/* ============================================================
   Portal look-alike — faithful recreation of the live
   Nami Academy admin & teacher portals (Next.js + shadcn).
   Indigo / slate / emerald. Scoped under .appwin so it never
   collides with the marketing styles in styles.css.
   ============================================================ */
:root {
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a;
  --indigo-50:#eef2ff; --indigo-100:#e0e7ff; --indigo-500:#6366f1; --indigo-600:#4f46e5; --indigo-700:#4338ca;
  --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-200:#a7f3d0; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-600:#d97706; --amber-700:#b45309;
  --red-50:#fef2f2; --red-100:#fee2e2; --red-200:#fecaca; --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c;
  --rose-50:#fff1f2; --rose-100:#ffe4e6; --rose-700:#be123c;
  --blue-50:#eff6ff; --blue-500:#3b82f6;
  --p-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --p-shadow-lg: 0 20px 50px rgba(15,23,42,.18), 0 6px 16px rgba(15,23,42,.08);
}

/* ---------- App window frame ---------- */
.appwin {
  max-width: 1240px; margin: 0 auto;
  background:#fff; border:1px solid var(--slate-200); border-radius:16px;
  box-shadow: var(--p-shadow-lg); overflow:hidden;
  font-family:"Inter","Noto Sans JP",system-ui,sans-serif;
}
.appwin__bar { display:flex; align-items:center; gap:14px; padding:11px 16px; background:var(--slate-100); border-bottom:1px solid var(--slate-200); }
.appwin__dots { display:flex; gap:7px; }
.appwin__dot { width:12px; height:12px; border-radius:50%; }
.appwin__dot.r{ background:#ff5f57; } .appwin__dot.y{ background:#febc2e; } .appwin__dot.g{ background:#28c840; }
.appwin__url {
  flex:1; max-width:520px; margin:0 auto; background:#fff; border:1px solid var(--slate-200);
  border-radius:999px; padding:5px 14px; font-size:12.5px; color:var(--slate-500);
  display:flex; align-items:center; gap:7px; justify-content:center;
}
.appwin__url svg { width:12px; height:12px; color:var(--emerald-600); }
.appwin__live { font-size:11px; font-weight:700; color:var(--emerald-600); display:inline-flex; align-items:center; gap:5px; }
.appwin__live .d{ width:7px;height:7px;border-radius:50%;background:var(--emerald-500); box-shadow:0 0 0 3px var(--emerald-100); }

/* ---------- Portal shell ---------- */
.portal { display:flex; height:720px; max-height:78vh; background:var(--slate-50); color:var(--slate-900); }
.psidebar { width:236px; flex-shrink:0; background:#fff; border-right:1px solid var(--slate-100); display:flex; flex-direction:column; }
.psidebar__brand { display:flex; align-items:center; gap:11px; padding:18px 20px; }
.psidebar__logo { width:34px; height:34px; border-radius:50%; flex-shrink:0; }
.psidebar__name { font-size:14px; font-weight:800; color:var(--indigo-600); line-height:1.1; }
.psidebar__sub { font-size:11.5px; color:var(--slate-400); }
.psidebar__rule { height:1px; background:var(--slate-100); margin:0 16px; }
.psidebar__nav { flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:3px; }
.pnav {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  font-size:13.5px; font-weight:500; color:var(--slate-900); background:transparent; border:none;
  width:100%; text-align:left; transition:background .15s, color .15s; cursor:pointer;
}
.pnav svg { width:18px; height:18px; flex-shrink:0; color:var(--slate-500); }
.pnav:hover { background:var(--slate-50); }
.pnav.is-active { background:var(--indigo-50); color:var(--indigo-600); }
.pnav.is-active svg { color:var(--indigo-600); }
.pnav__badge { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--red-500); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.psidebar__foot { padding:8px 12px 18px; }
.plogout { display:flex; align-items:center; gap:12px; width:100%; padding:9px 12px; border-radius:10px; border:none; background:transparent; color:var(--red-500); font-size:13.5px; font-weight:500; cursor:pointer; }
.plogout svg { width:16px; height:16px; }
.plogout:hover { background:var(--red-50); }

.pmain { flex:1; overflow-y:auto; padding:28px 30px; min-width:0; }
.pmain--flush { padding:0; display:flex; }   /* for full-bleed messaging */

/* ---------- Page primitives ---------- */
.ph1 { font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--slate-900); margin:0; }
.psubtle { color:var(--slate-500); font-size:14.5px; margin:5px 0 0; }
.phead { margin-bottom:22px; }
.pcard { background:#fff; border:1px solid var(--slate-100); border-radius:18px; box-shadow:var(--p-shadow); padding:22px; }
.pcard--p0 { padding:0; overflow:hidden; }
.pcard__h { font-size:15.5px; font-weight:700; color:var(--slate-900); margin:0 0 14px; }

.pstats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .pstats{ grid-template-columns:repeat(2,1fr);} }
.pstat { background:#fff; border:1px solid var(--slate-100); border-radius:18px; box-shadow:var(--p-shadow); padding:18px 20px; }
.pstat__top { display:flex; align-items:flex-start; justify-content:space-between; }
.pstat__title { font-size:13.5px; color:var(--slate-500); }
.pstat__icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
.pstat__icon svg { width:17px; height:17px; }
.ic-indigo{ background:var(--indigo-50);} .ic-indigo svg{ color:var(--indigo-500);}
.ic-emerald{ background:var(--emerald-50);} .ic-emerald svg{ color:var(--emerald-500);}
.ic-blue{ background:var(--blue-50);} .ic-blue svg{ color:var(--blue-500);}
.ic-amber{ background:var(--amber-50);} .ic-amber svg{ color:var(--amber-600);}
.pstat__val { font-size:34px; font-weight:800; letter-spacing:-.02em; color:var(--slate-900); margin:14px 0 2px; line-height:1; }
.pstat__val .u{ font-size:16px; color:var(--slate-400); font-weight:700; }
.pstat__sub { font-size:12px; color:var(--slate-400); }

/* pills */
.ppill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600; }
.ppill svg{ width:12px; height:12px; }
.ppill--indigo{ background:var(--indigo-50); color:var(--indigo-700);}
.ppill--emerald{ background:var(--emerald-50); color:var(--emerald-700);}
.ppill--amber{ background:var(--amber-50); color:var(--amber-600);}
.ppill--rose{ background:var(--rose-50); color:var(--rose-700);}
.ppill--slate{ background:var(--slate-100); color:var(--slate-600);}
.ppill--red{ background:var(--red-50); color:var(--red-600);}
.ppill--blue{ background:var(--blue-50); color:var(--blue-500);}

/* buttons */
.pbtn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 14px; border-radius:9px; font-size:13px; font-weight:600; border:1px solid transparent; background:var(--indigo-600); color:#fff; cursor:pointer; transition:.15s; }
.pbtn svg{ width:15px; height:15px; }
.pbtn:hover{ background:var(--indigo-700); }
.pbtn--emerald{ background:var(--emerald-600);} .pbtn--emerald:hover{ background:var(--emerald-700);}
.pbtn--outline{ background:#fff; border-color:var(--slate-200); color:var(--slate-700);} .pbtn--outline:hover{ background:var(--slate-50);}
.pbtn--outline-emerald{ background:#fff; border-color:var(--emerald-200); color:var(--emerald-700);} .pbtn--outline-emerald:hover{ background:var(--emerald-50);}
.pbtn--outline-slate{ background:#fff; border-color:var(--slate-200); color:var(--slate-600);} .pbtn--outline-slate:hover{ background:var(--slate-100);}
.pbtn--danger{ background:#fff; border-color:var(--red-200); color:var(--red-500);} .pbtn--danger:hover{ background:var(--red-50);}
.pbtn--sm{ height:30px; padding:0 11px; font-size:12.5px; }
.pbtn:disabled{ opacity:.5; cursor:default; }

/* empty state */
.pempty { background:#fff; border:1px solid var(--slate-100); border-radius:18px; box-shadow:var(--p-shadow); padding:54px 30px; text-align:center; }
.pempty__ic { width:60px; height:60px; border-radius:50%; background:var(--slate-100); display:grid; place-items:center; margin:0 auto 14px; }
.pempty__ic svg{ width:28px; height:28px; color:var(--slate-300); }
.pempty h3 { font-size:18px; font-weight:600; color:var(--slate-600); margin:0 0 4px; }
.pempty p { font-size:13.5px; color:var(--slate-400); margin:0 auto; max-width:380px; }

/* callout inside portal */
.pcallout { display:flex; gap:12px; background:var(--indigo-50); border:1px solid var(--indigo-100); border-radius:14px; padding:14px 16px; color:var(--slate-700); font-size:13.5px; }
.pcallout svg{ width:16px; height:16px; color:var(--indigo-600); flex-shrink:0; margin-top:2px; }

/* ============================================================
   Messaging console
   ============================================================ */
.msgr { display:flex; width:100%; height:100%; background:#fff; }
.msgr__list { width:360px; flex-shrink:0; border-right:1px solid var(--slate-200); display:flex; flex-direction:column; }
.msgr__listhead { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--slate-50); border-bottom:1px solid var(--slate-200); }
.msgr__listhead h2 { font-size:17px; font-weight:600; color:var(--slate-800); margin:0; }
.msgr__plus { width:34px; height:34px; border-radius:9px; border:none; background:transparent; color:var(--slate-600); display:grid; place-items:center; cursor:pointer; }
.msgr__plus:hover{ background:var(--slate-200);} .msgr__plus svg{ width:18px; height:18px; }
.msgr__search { padding:10px 12px; }
.msgr__search div { position:relative; }
.msgr__search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--slate-400); }
.msgr__search input { width:100%; height:36px; border:none; background:var(--slate-100); border-radius:9px; padding:0 12px 0 33px; font-size:13.5px; color:var(--slate-700); }
.msgr__search input::placeholder{ color:var(--slate-400);} .msgr__search input:focus{ outline:2px solid var(--indigo-500); outline-offset:0; }
.msgr__convos { flex:1; overflow-y:auto; }

.mconv { display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; padding:12px 16px; border:none; border-bottom:1px solid var(--slate-100); background:transparent; cursor:pointer; transition:background .12s; }
.mconv:hover{ background:var(--slate-50); }
.mconv.is-active{ background:var(--indigo-50); }
.mavatar { width:44px; height:44px; border-radius:50%; background:var(--emerald-100); color:var(--emerald-700); display:grid; place-items:center; font-weight:600; font-size:14px; flex-shrink:0; }
.mavatar--sm{ width:40px; height:40px; font-size:13px; }
.mconv__main { flex:1; min-width:0; }
.mconv__top { display:flex; align-items:center; gap:6px; }
.mconv__name { font-size:13.5px; font-weight:500; color:var(--slate-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mconv__time { margin-left:auto; font-size:11.5px; color:var(--slate-400); flex-shrink:0; }
.mconv__bot { display:flex; align-items:center; }
.mconv__preview { font-size:12.5px; color:var(--slate-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.mconv__preview .you{ color:var(--slate-400); }
.mrole { flex-shrink:0; border-radius:5px; padding:1px 6px; font-size:10px; font-weight:600; }
.mrole--student{ background:var(--indigo-50); color:var(--indigo-600);}
.mrole--teacher{ background:var(--amber-50); color:var(--amber-600);}

/* thread */
.msgr__thread { flex:1; display:flex; flex-direction:column; min-width:0; }
.mthead { display:flex; align-items:center; gap:10px; padding:11px 16px; background:var(--slate-50); border-bottom:1px solid var(--slate-200); }
.mthead__id { display:flex; align-items:center; gap:11px; min-width:0; }
.mthead__nm { font-size:13.5px; font-weight:500; color:var(--slate-800); }
.mthead__ph { font-size:11.5px; color:var(--slate-500); }
.mt-attn { height:30px; display:inline-flex; align-items:center; padding:0 10px; border-radius:8px; background:var(--amber-50); color:var(--amber-600); font-size:12px; font-weight:500; }
.mt-bot { height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 11px; border-radius:9px; border:1px solid; background:#fff; font-size:12px; font-weight:600; cursor:pointer; transition:.15s; }
.mt-bot svg{ width:14px; height:14px; }
.mt-bot.on{ border-color:var(--emerald-200); color:var(--emerald-600);} .mt-bot.on:hover{ background:var(--emerald-50);}
.mt-bot.off{ border-color:var(--slate-200); color:var(--slate-500);} .mt-bot.off:hover{ background:var(--slate-100);}
.mt-del { height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 11px; border-radius:9px; border:1px solid var(--red-200); background:#fff; color:var(--red-500); font-size:12px; font-weight:600; cursor:pointer; }
.mt-del svg{ width:14px; height:14px; } .mt-del:hover{ background:var(--red-50); }

.mbody { flex:1; overflow-y:auto; padding:14px 16px; background-color:#f8fafc; scroll-behavior:smooth;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e2e8f0' fill-opacity='0.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.mdate { display:flex; justify-content:center; margin:12px 0; }
.mdate span { background:#fff; border-radius:8px; padding:4px 12px; font-size:11.5px; font-weight:500; color:var(--slate-500); box-shadow:var(--p-shadow); }
.mrow { display:flex; margin-bottom:5px; }
.mrow.out{ justify-content:flex-end; } .mrow.in{ justify-content:flex-start; }
.mbub { max-width:75%; border-radius:9px; padding:7px 11px 6px; box-shadow:var(--p-shadow); font-size:13.5px; line-height:1.45; color:var(--slate-800); white-space:pre-wrap; word-break:break-word; animation:pbubIn .26s ease; }
.mbub--in{ background:#fff; } .mbub--out{ background:var(--emerald-100); }
.mbub__foot { display:flex; align-items:center; gap:4px; justify-content:flex-end; margin-top:3px; }
.mbub__time { font-size:10px; color:var(--slate-400); }
.mtick svg{ width:14px; height:14px; color:var(--blue-500); vertical-align:middle; }
.mailbl { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; color:var(--indigo-600); background:var(--indigo-50); padding:1px 7px; border-radius:999px; margin-bottom:4px; }
.mailbl svg{ width:11px; height:11px; }
.msys { display:flex; justify-content:center; margin:10px 0; }
.msys span { background:var(--amber-50); color:var(--amber-700); border:1px solid var(--amber-100); border-radius:8px; padding:4px 12px; font-size:11.5px; font-weight:600; max-width:80%; text-align:center; }
@keyframes pbubIn { from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:none;} }

.minput { display:flex; align-items:flex-end; gap:8px; padding:12px 16px; background:var(--slate-50); border-top:1px solid var(--slate-200); }
.minput__box { flex:1; min-height:40px; border:1px solid var(--slate-200); background:#fff; border-radius:9px; padding:9px 14px; font-size:13.5px; color:var(--slate-700); }
.minput__box.ai { background:var(--emerald-50); border-color:var(--emerald-200); color:var(--emerald-700); display:flex; align-items:center; gap:7px; }
.minput__box.ai svg{ width:15px; height:15px; }
.minput__send { width:40px; height:40px; flex-shrink:0; border-radius:50%; border:none; background:var(--emerald-500); color:#fff; display:grid; place-items:center; cursor:pointer; }
.minput__send svg{ width:16px; height:16px; } .minput__send:hover{ background:var(--emerald-600);} .minput__send:disabled{ opacity:.5; cursor:default; }

.mempty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--slate-50); text-align:center; }
.mempty__ic { width:80px; height:80px; border-radius:50%; background:var(--slate-100); display:grid; place-items:center; }
.mempty__ic svg{ width:38px; height:38px; color:var(--slate-300); }
.mempty h3{ font-size:19px; font-weight:500; color:var(--slate-600); margin:16px 0 2px; }
.mempty p{ font-size:13.5px; color:var(--slate-400); margin:0; }

/* ============================================================
   Acknowledgements
   ============================================================ */
.ackstack { display:flex; flex-direction:column; gap:12px; }
.ackcard { background:#fff; border:1px solid var(--slate-100); border-radius:18px; box-shadow:var(--p-shadow); padding:18px 20px; }
.ackcard__tags { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:11px; }
.ackcard__tags .right{ margin-left:auto; }
.ackcard__name { font-size:13.5px; font-weight:700; color:var(--slate-900); margin:0 0 2px; }
.ackcard__times { font-size:13.5px; color:var(--slate-600); margin:0; }
.ackcard__times .new{ font-weight:600; color:var(--slate-900); }
.ackcard__times .arrow{ color:var(--slate-400); margin:0 6px; }
.ackcard__act { margin-top:14px; }
.acksection { margin-top:26px; }
.acksection h2 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--slate-400); margin:0 0 12px; }
.ackcard.is-ack { opacity:.92; }

/* ============================================================
   Attendance
   ============================================================ */
.attstack { display:flex; flex-direction:column; gap:12px; }
.attcard { background:#fff; border:1px solid var(--slate-100); border-radius:18px; box-shadow:var(--p-shadow); padding:18px 20px; }
.attcard__head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.attcard__date { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--slate-900); }
.attcard__date svg{ width:16px; height:16px; color:var(--slate-400); }
.attcard__time { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--slate-500); margin-top:5px; }
.attcard__time svg{ width:15px; height:15px; color:var(--slate-400); }
.attrow { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--slate-100); border-radius:10px; padding:9px 14px; margin-top:8px; }
.attrow__name { font-size:13.5px; font-weight:500; color:var(--slate-700); }
.attbtns { display:flex; gap:8px; }
.attresult { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.attresult.present{ background:var(--emerald-50); color:var(--emerald-700);}
.attresult.absent{ background:var(--slate-100); color:var(--slate-600);}
.attresult svg{ width:13px; height:13px; }
.attnote { font-size:12px; color:var(--emerald-600); margin-top:6px; display:flex; align-items:center; gap:5px; }
.attnote svg{ width:13px; height:13px; }

/* ============================================================
   Calendar (week grid)
   ============================================================ */
.pcal { border:1px solid var(--slate-100); border-radius:18px; background:#fff; box-shadow:var(--p-shadow); overflow:hidden; }
.pcal__toolbar { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--slate-100); flex-wrap:wrap; }
.pcal__nav { display:flex; gap:4px; }
.pcal__iconbtn { width:30px; height:30px; border-radius:8px; border:1px solid var(--slate-200); background:#fff; color:var(--slate-600); display:grid; place-items:center; cursor:pointer; }
.pcal__iconbtn svg{ width:15px; height:15px; } .pcal__iconbtn:hover{ background:var(--slate-50); }
.pcal__range { font-size:13.5px; font-weight:600; color:var(--slate-700); }
.pcal__grid { display:grid; grid-template-columns:54px repeat(3,1fr); }
.pcal__corner { border-right:1px solid var(--slate-100); border-bottom:1px solid var(--slate-100); }
.pcal__dh { border-right:1px solid var(--slate-100); border-bottom:1px solid var(--slate-100); padding:9px 0; text-align:center; }
.pcal__dh.today{ background:var(--indigo-50); }
.pcal__dh .dn{ font-size:11px; font-weight:600; color:var(--slate-400); text-transform:uppercase; letter-spacing:.04em; }
.pcal__dh .dd{ display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:700; color:var(--slate-900); margin-top:3px; }
.pcal__dh.today .dd{ background:var(--indigo-600); color:#fff; }
.pcal__timecol { border-right:1px solid var(--slate-100); }
.pcal__tcell { height:54px; position:relative; }
.pcal__tcell span{ position:absolute; top:-7px; right:6px; font-size:10.5px; color:var(--slate-400); }
.pcal__daycol { border-right:1px solid var(--slate-100); position:relative; }
.pcal__daycol.today{ background:rgba(238,242,255,.4); }
.pcal__hr { height:54px; border-top:1px solid var(--slate-50); }
.pcal__lesson { position:absolute; left:3px; right:3px; border-radius:7px; padding:5px 7px; overflow:hidden; cursor:default;
  background:var(--indigo-500); border:1px solid var(--indigo-600); color:#fff; box-shadow:var(--p-shadow); }
.pcal__lesson .who{ font-size:11px; font-weight:700; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcal__lesson .tm{ font-size:10px; opacity:.85; line-height:1.15; }
.pcal__lesson.is-new{ animation:pcalNew 1.3s ease; }
.pcal__lesson.removing{ animation:pcalRemove .6s ease forwards; }
@keyframes pcalNew { 0%{ box-shadow:0 0 0 0 rgba(99,102,241,.55);} 100%{ box-shadow:0 0 0 13px rgba(99,102,241,0);} }
@keyframes pcalRemove { to{ opacity:0; transform:scale(.9); } }

/* ============================================================
   WhatsApp approval card (teacher receives the handshake)
   ============================================================ */
.waq { max-width:420px; border:1px solid var(--slate-100); border-radius:16px; overflow:hidden; box-shadow:var(--p-shadow); background:#fff; }
.waq__head { display:flex; align-items:center; gap:9px; background:#075e54; color:#fff; padding:11px 15px; font-size:13.5px; font-weight:700; }
.waq__head svg{ width:18px; height:18px; }
.waq__head .tag{ margin-left:auto; font-size:10.5px; background:rgba(255,255,255,.18); padding:2px 8px; border-radius:999px; font-weight:600; }
.waq__body { padding:15px; }
.waq__q { font-size:13.5px; color:var(--slate-700); line-height:1.5; margin:0 0 12px; }
.waq__q b{ color:var(--slate-900); }
.waq__card { border:1px solid var(--slate-100); border-radius:12px; background:var(--slate-50); padding:12px 14px; margin-bottom:13px; }
.waq__row { display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:13px; border-bottom:1px dashed var(--slate-200); }
.waq__row:last-child{ border-bottom:none; }
.waq__row .k{ color:var(--slate-500); } .waq__row .v{ font-weight:600; color:var(--slate-900); text-align:right; }
.waq__row .v.move{ color:var(--indigo-600); }
.waq__btns { display:flex; gap:9px; }
.waq__btns .pbtn{ flex:1; }
.waq__slots { display:flex; flex-direction:column; gap:7px; margin-top:4px; }
.waq__slot { display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--slate-200); background:#fff; border-radius:9px; padding:9px 12px; font-size:13px; font-weight:600; color:var(--slate-700); cursor:pointer; transition:.14s; }
.waq__slot:hover{ border-color:var(--indigo-500); background:var(--indigo-50); color:var(--indigo-700); }
.waq__done { text-align:center; padding:8px 4px; color:var(--emerald-700); }
.waq__done svg{ width:34px; height:34px; color:var(--emerald-500); margin-bottom:6px; }
.waq__done .t{ font-weight:700; font-size:14px; } .waq__done .s{ font-size:12.5px; color:var(--slate-500); margin-top:3px; }

/* upcoming lessons list (dashboard) */
.ulist { display:flex; flex-direction:column; gap:10px; }
.ulrow { display:flex; align-items:center; gap:13px; border:1px solid var(--slate-100); border-radius:12px; padding:12px 14px; }
.ulrow__date { width:50px; flex-shrink:0; text-align:center; }
.ulrow__date .d{ font-size:19px; font-weight:800; color:var(--slate-900); line-height:1; }
.ulrow__date .m{ font-size:11px; color:var(--slate-400); text-transform:uppercase; }
.ulrow__main{ flex:1; min-width:0; }
.ulrow__who{ font-size:13.5px; font-weight:600; color:var(--slate-800); }
.ulrow__meta{ font-size:12px; color:var(--slate-500); margin-top:2px; display:flex; align-items:center; gap:6px; }
.ulrow__meta svg{ width:13px; height:13px; color:var(--slate-400); }

/* ============================================================
   Tables, toolbars, tabs (Students / Teachers / Invoices)
   ============================================================ */
.ptoolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.ptoolbar .spacer { flex:1; }
.psearch { position:relative; max-width:360px; flex:1; min-width:200px; }
.psearch svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--slate-400); }
.psearch input { width:100%; height:36px; border:1px solid var(--slate-200); border-radius:9px; background:#fff; padding:0 12px 0 33px; font-size:13.5px; color:var(--slate-700); }
.psearch input:focus { outline:2px solid var(--indigo-500); }
.pselect { height:36px; border:1px solid var(--slate-200); border-radius:9px; background:#fff; padding:0 12px; font-size:13.5px; color:var(--slate-700); cursor:pointer; }

.ptabs { display:inline-flex; gap:2px; background:var(--slate-100); border-radius:11px; padding:3px; flex-wrap:wrap; }
.ptab { border:none; background:transparent; border-radius:8px; padding:6px 13px; font-size:13px; font-weight:600; color:var(--slate-500); cursor:pointer; transition:.12s; }
.ptab:hover { color:var(--slate-700); }
.ptab.is-active { background:#fff; color:var(--slate-900); box-shadow:var(--p-shadow); }
.ptab .n { color:var(--slate-400); margin-left:5px; font-size:12px; }
.ptab.is-active .n { color:var(--indigo-500); }

.ptable-wrap { background:#fff; border:1px solid var(--slate-100); border-radius:18px; box-shadow:var(--p-shadow); overflow:hidden; }
.ptable { width:100%; border-collapse:collapse; font-size:13.5px; }
.ptable thead th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-400); padding:11px 16px; border-bottom:1px solid var(--slate-100); background:var(--slate-50); white-space:nowrap; }
.ptable tbody td { padding:13px 16px; border-bottom:1px solid var(--slate-100); color:var(--slate-600); vertical-align:middle; }
.ptable tbody tr:last-child td { border-bottom:none; }
.ptable tbody tr.prow:hover { background:var(--slate-50); }
.ptable .nm { font-weight:600; color:var(--slate-900); }
.ptable .mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--slate-500); }
.ptable .right { text-align:right; }
.ptable .muted { color:var(--slate-400); }
.cellico { display:inline-flex; align-items:center; gap:6px; }
.cellico svg { width:14px; height:14px; color:var(--slate-400); flex-shrink:0; }
.linklike { color:var(--indigo-600); display:inline-flex; align-items:center; gap:5px; font-weight:500; }
.linklike svg { width:14px; height:14px; }
.editnum { display:inline-flex; align-items:center; gap:6px; }
.editnum svg { width:13px; height:13px; color:var(--slate-300); }
.tactions { display:flex; gap:1px; justify-content:flex-end; align-items:center; }
.picon { width:30px; height:30px; border:none; background:transparent; border-radius:8px; color:var(--slate-400); display:inline-grid; place-items:center; cursor:pointer; }
.picon:hover { background:var(--slate-100); color:var(--slate-700); }
.picon svg { width:15px; height:15px; }
.picon.danger:hover { background:var(--red-50); color:var(--red-600); }
.picon.go:hover { background:var(--emerald-50); color:var(--emerald-600); }
.subrow td { background:var(--slate-50); padding:0 16px 14px; }
.subrow .subtitle { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-400); margin:12px 0 8px; }
.subtable { width:100%; border-collapse:collapse; font-size:12.5px; background:#fff; border:1px solid var(--slate-100); border-radius:10px; overflow:hidden; }
.subtable th { text-align:left; font-size:10.5px; text-transform:uppercase; color:var(--slate-400); padding:8px 12px; border-bottom:1px solid var(--slate-100); }
.subtable td { padding:8px 12px; border-bottom:1px solid var(--slate-100); color:var(--slate-600); }
.subtable tr:last-child td { border-bottom:none; }
.pos { color:var(--emerald-600); font-weight:600; } .neg { color:var(--red-600); font-weight:600; }

/* calendar legend + scroll + filter row */
.pcal__legend { display:flex; gap:16px; flex-wrap:wrap; padding:11px 16px; border-bottom:1px solid var(--slate-100); background:#fff; }
.pcal__leg { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--slate-600); font-weight:500; }
.pcal__leg .dot { width:10px; height:10px; border-radius:50%; }
.pcal__scroll { overflow:auto; max-height:560px; }
.pcal__lesson.cancelled { background:#fff !important; border:1px solid var(--red-200) !important; color:var(--red-500) !important; }
.pcal__lesson.cancelled .who { text-decoration:line-through; }
.pcal__lesson.cancelled .tm { color:var(--red-400); }

/* settings */
.psetgrid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:900px){ .psetgrid{ grid-template-columns:1fr; } }
.psetrow { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:13px 0; border-top:1px solid var(--slate-100); }
.psetrow:first-of-type { border-top:none; }
.psetrow .lbl { font-size:13.5px; font-weight:600; color:var(--slate-800); }
.psetrow .desc { font-size:12.5px; color:var(--slate-500); margin-top:2px; max-width:330px; }
.pswitch { width:42px; height:24px; border-radius:999px; background:var(--slate-300); position:relative; flex-shrink:0; cursor:pointer; border:none; transition:background .18s; margin-top:2px; }
.pswitch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .18s; }
.pswitch.on { background:var(--emerald-500); } .pswitch.on::after { transform:translateX(18px); }
.pswitch.locked { opacity:.7; cursor:not-allowed; }
.pintg { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--slate-100); }
.pintg:first-of-type { border-top:none; }
.pintg img { height:26px; width:auto; }
.pintg .ti { font-size:13.5px; font-weight:600; color:var(--slate-800); }
.pintg .ts { font-size:12px; color:var(--slate-500); }

/* ============================================================
   Analytics — extra stat tones, charts, breakdowns
   ============================================================ */
.ic-violet { background:#f5f3ff; } .ic-violet svg { color:#8b5cf6; }
.ic-pink   { background:#fdf2f8; } .ic-pink svg   { color:#ec4899; }
.ic-cyan   { background:#ecfeff; } .ic-cyan svg   { color:#06b6d4; }
.ic-rose   { background:#fff1f2; } .ic-rose svg   { color:#f43f5e; }
.ic-sky    { background:#f0f9ff; } .ic-sky svg    { color:#0ea5e9; }
.ic-orange { background:#fff7ed; } .ic-orange svg { color:#f97316; }
.ic-purple { background:#faf5ff; } .ic-purple svg { color:#a855f7; }

.an-toolbar { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.an-presets { display:inline-flex; gap:7px; flex-wrap:wrap; }
.an-preset { height:34px; padding:0 13px; border-radius:9px; border:1px solid var(--slate-200); background:#fff; color:var(--slate-600); font-size:12.5px; font-weight:600; cursor:pointer; }
.an-preset.is-active { background:var(--slate-900); border-color:var(--slate-900); color:#fff; }

.an-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
@media (max-width:900px){ .an-grid { grid-template-columns:1fr; } }
.an-grid .full { grid-column:1 / -1; }
.charthd { margin-bottom:12px; }
.charthd .t { font-size:15px; font-weight:700; color:var(--slate-900); }
.charthd .s { font-size:12px; color:var(--slate-400); margin-top:2px; }
.chartlegend { display:flex; gap:16px; margin-top:10px; }
.chartlegend span { font-size:11.5px; color:var(--slate-500); display:inline-flex; align-items:center; gap:6px; }
.chartlegend .dot { width:9px; height:9px; border-radius:50%; }

.bd { display:flex; flex-direction:column; gap:12px; }
.bd__row { display:flex; align-items:center; gap:12px; }
.bd__label { width:120px; flex-shrink:0; font-size:12.5px; color:var(--slate-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd__track { flex:1; height:9px; background:var(--slate-100); border-radius:999px; overflow:hidden; }
.bd__fill { height:100%; border-radius:999px; }
.bd__val { width:104px; flex-shrink:0; text-align:right; font-size:12.5px; color:var(--slate-900); font-weight:600; }
.bd__val .h { color:var(--slate-400); font-weight:500; font-size:11.5px; margin-right:6px; }
.an-empty { font-size:13px; color:var(--slate-400); padding:20px 0; text-align:center; }
.atrisk { display:flex; flex-direction:column; gap:9px; }
.atrisk__row { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--slate-700); }
.atrisk__ic { width:26px; height:26px; border-radius:50%; background:#fff1f2; color:#f43f5e; display:grid; place-items:center; flex-shrink:0; }
.atrisk__ic svg { width:14px; height:14px; }

@media (max-width:760px){
  .psidebar{ width:64px; }
  .psidebar__name,.psidebar__sub,.pnav span,.plogout span{ display:none; }
  .psidebar__brand{ justify-content:center; padding:16px 0; }
  .pnav{ justify-content:center; }
  .msgr__list{ width:300px; }
}