/* ============================================================
   FluentPath — Style System
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0f1b35;--navy2:#1a2d52;--navy3:#263c6e;
  --blue:#1A4FBF;--blue2:#4a7de8;--blue-pale:#e8effe;
  --green:#10b981;--green-pale:#d1fae5;
  --amber:#f59e0b;--amber-pale:#fef3c7;
  --purple:#8b5cf6;--purple-pale:#ede9fe;
  --red:#D93025;--red-pale:#fde8e6;
  --g50:#f8fafc;--g100:#f1f5f9;--g200:#e2e8f0;--g300:#cbd5e1;
  --g400:#94a3b8;--g500:#64748b;--g600:#475569;--g700:#334155;
  --g800:#1e293b;--g900:#0f172a;--white:#fff;
  --sb:280px;--r:12px;--r-sm:8px;--r-full:999px;
  --sh-sm:0 1px 3px rgba(0,0,0,.07);--sh-md:0 4px 16px rgba(0,0,0,.1);--sh-lg:0 12px 40px rgba(0,0,0,.16)
}
body{font-family:'DM Sans',sans-serif;background:var(--g50);color:var(--g800);min-height:100vh;font-size:15px;line-height:1.6}

/* Pages */
.page{display:none}.page.active{display:block}

/* ── LOGIN ─────────────────────────────────────────────────── */
.login-wrap{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.login-left{
  background:linear-gradient(145deg,#0a1628 0%,#1A4FBF 55%,#D93025 100%);
  padding:52px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden
}
.login-brand{display:flex;align-items:center;gap:12px;position:relative;z-index:2}
.brand-mark{width:36px;height:36px;background:linear-gradient(135deg,#3b6ef5,#e63946);border-radius:10px;position:relative;flex-shrink:0}
.brand-mark::after{content:'';position:absolute;top:8px;left:8px;width:12px;height:12px;background:rgba(255,255,255,.9);border-radius:3px}
.brand-mark.sm{width:28px;height:28px;border-radius:8px}.brand-mark.sm::after{top:6px;left:6px;width:10px;height:10px}
.brand-name{font-family:'DM Serif Display',serif;font-size:22px;color:#fff}.brand-name.dark{color:var(--g800)}
.login-copy{position:relative;z-index:2}
.login-copy h1{font-family:'DM Serif Display',serif;font-size:38px;color:#fff;line-height:1.2;margin-bottom:18px}
.login-copy h1 em{font-style:italic;background:linear-gradient(90deg,#6b96ff,#ff8080);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.login-copy p{color:rgba(255,255,255,.65);font-size:15px;max-width:380px;line-height:1.7;margin-bottom:28px}
.login-langs{display:flex;align-items:center;gap:12px;margin-bottom:28px;position:relative;z-index:2}
.lang-pill{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-full);padding:7px 14px}
.lang-flag{font-size:20px}.lang-txt{font-size:13px;font-weight:600;color:rgba(255,255,255,.9)}
.lang-div{width:1px;height:24px;background:rgba(255,255,255,.25)}
.login-features{display:flex;flex-direction:column;gap:8px;position:relative;z-index:2}
.lf-item{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.7)}
.lf-icon{font-size:15px}
.login-deco{position:absolute;inset:0;pointer-events:none}
.dc{position:absolute;border-radius:50%}
.dc.dc1{width:450px;height:450px;top:-120px;right:-120px;background:rgba(59,110,245,.12)}
.dc.dc2{width:280px;height:280px;bottom:40px;right:20px;background:rgba(230,57,70,.1)}
.dc.dc3{width:120px;height:120px;top:42%;left:20px;background:rgba(107,150,255,.12)}
.dc.dc4{width:60px;height:60px;bottom:120px;left:80px;background:rgba(230,57,70,.15)}
.login-right{background:var(--white);display:flex;align-items:center;justify-content:center;padding:48px}
.login-card{width:100%;max-width:420px}
.login-card h2{font-family:'DM Serif Display',serif;font-size:28px;color:var(--g900);margin-bottom:6px}
.login-sub{color:var(--g500);margin-bottom:24px;font-size:14px}
.login-logo-mob{display:none;align-items:center;gap:10px;margin-bottom:28px}
.login-footer{text-align:center;margin-top:20px;font-size:13px;color:var(--g400)}
/* ── FORM FIELDS ────────────────────────────────────────────── */
.field-group{margin-bottom:16px}.field-group label{display:block;font-size:13px;font-weight:500;color:var(--g700);margin-bottom:6px}
.field-group input,.field-group select,.field-group textarea{width:100%;padding:10px 14px;border:1.5px solid var(--g200);border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);background:var(--white);outline:none;transition:border-color .18s,box-shadow .18s}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,110,245,.12)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pw-wrap{position:relative}.pw-wrap input{padding-right:44px}.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:16px;color:var(--g400);padding:4px}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary{background:var(--blue);color:var(--white);border:none;padding:10px 22px;border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background .18s,transform .1s}
.btn-primary:hover{background:#2d5ce0}.btn-primary:active{transform:scale(.98)}.btn-primary.full{width:100%;padding:13px;font-size:15px}
.btn-secondary{background:var(--white);color:var(--g700);border:1.5px solid var(--g200);padding:10px 22px;border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:background .18s}
.btn-secondary:hover{background:var(--g50)}
.btn-danger{background:var(--red);color:var(--white);border:none;padding:10px 22px;border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background .18s}
.btn-danger:hover{background:#dc2626}
.btn-sm{font-size:13px;padding:6px 14px;background:var(--white);border:1.5px solid var(--g200);border-radius:var(--r-sm);color:var(--blue);font-weight:500;cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif}
.btn-sm:hover{background:var(--blue-pale);border-color:var(--blue)}
.btn-icon{background:none;border:1.5px solid var(--g200);border-radius:var(--r-sm);padding:6px 10px;cursor:pointer;font-size:14px;color:var(--g500);transition:all .15s}
.btn-icon:hover{background:var(--g100)}
.btn-icon.danger:hover{background:var(--red-pale);border-color:var(--red);color:var(--red)}

/* ── ALERTS ─────────────────────────────────────────────────── */
.alert-err{background:#fef2f2;border:1px solid #fecaca;color:var(--red);padding:10px 14px;border-radius:var(--r-sm);font-size:13px;margin-bottom:16px}
.hidden{display:none!important}

/* ── APP LAYOUT ─────────────────────────────────────────────── */
.app-layout{display:flex;min-height:100vh}
.sidebar{width:var(--sb);background:var(--white);border-right:1px solid var(--g200);display:flex;flex-direction:column;padding:24px 16px;position:fixed;height:100vh;overflow-y:auto;z-index:100}
.sb-brand{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:0}
.sb-user{display:flex;align-items:center;gap:10px;background:var(--g50);border-radius:var(--r-sm);padding:12px;margin-bottom:20px}
.u-name{font-weight:600;font-size:13px;color:var(--g800)}.u-role{font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-top:1px}
.role-adm{color:#dc2626}.role-teach{color:#d97706}.role-stud{color:var(--blue)}

/* Avatars */
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.adm-av{background:#fee2e2;color:#dc2626}.teach-av{background:var(--amber-pale);color:#d97706}.stud-av{background:var(--blue-pale);color:var(--blue)}

/* Sidebar nav */
.sb-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);color:var(--g500);text-decoration:none;font-size:14px;font-weight:500;transition:all .15s;cursor:pointer;user-select:none}
.nav-item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.nav-item:hover{background:var(--g100);color:var(--g800)}.nav-item.active{background:var(--blue-pale);color:var(--blue);font-weight:600}
.nav-item.nav-locked{opacity:.55}
.nav-item.nav-locked::after{content:'🔒';margin-left:auto;font-size:11px}
.btn-logout{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--g200);color:var(--g500);padding:10px 12px;border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;width:100%;margin-top:10px;transition:all .15s}
.btn-logout svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-logout:hover{background:#fef2f2;color:var(--red);border-color:#fecaca}
.main-content{margin-left:var(--sb);flex:1;padding:32px;max-width:calc(100vw - var(--sb))}

/* Content sections */
.cs{display:none}.cs.active{display:block}

/* Section header */
.sh{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px;gap:16px}
.sh h2{font-family:'DM Serif Display',serif;font-size:28px;color:var(--g900);line-height:1.2}.sub{color:var(--g500);font-size:14px;margin-top:4px}
.teacher-badge{display:flex;align-items:center;gap:8px;background:var(--blue-pale);color:var(--blue);padding:8px 16px;border-radius:var(--r-full);font-size:13px;white-space:nowrap}
.teacher-badge svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;flex-shrink:0}.teacher-badge strong{color:var(--navy)}

/* ── CARDS ──────────────────────────────────────────────────── */
.card{background:var(--white);border:1px solid var(--g200);border-radius:var(--r);padding:20px 24px;box-shadow:var(--sh-sm)}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.ch h3{font-size:15px;font-weight:600;color:var(--g800)}
.mt16{margin-top:16px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── STATS ──────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:4px}
.stat-card{background:var(--white);border:1px solid var(--g200);border-radius:var(--r);padding:18px 20px;display:flex;align-items:center;gap:14px;box-shadow:var(--sh-sm)}
.stat-icon{font-size:28px;flex-shrink:0}.stat-val{font-size:26px;font-weight:700;color:var(--g900);line-height:1}.stat-lbl{font-size:12px;color:var(--g500);margin-top:3px}
.bc-blue{border-left:4px solid var(--blue)}.bc-green{border-left:4px solid var(--green)}.bc-amber{border-left:4px solid var(--amber)}.bc-purple{border-left:4px solid var(--purple)}.bc-red{border-left:4px solid var(--red)}

/* ── GRIDS ──────────────────────────────────────────────────── */
.teacher-grid,.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.person-card{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r);padding:16px 18px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .15s}
.person-card:hover{box-shadow:var(--sh-md);border-color:var(--blue);background:var(--white)}
.pc-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.pc-name{font-weight:600;font-size:14px;color:var(--g800)}.pc-sub{font-size:12px;color:var(--g500);margin-top:2px}.pc-cnt{font-size:12px;font-weight:500;color:var(--blue);margin-top:3px}

/* ── LESSON ITEMS ───────────────────────────────────────────── */
.lesson-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--g50);border-radius:var(--r-sm);border:1px solid var(--g200);margin-bottom:8px}
.lesson-item:last-child{margin-bottom:0}
.ld{background:var(--blue);color:var(--white);border-radius:8px;padding:7px 10px;text-align:center;min-width:46px;flex-shrink:0}
.ld-day{font-size:19px;font-weight:700;line-height:1}.ld-mon{font-size:10px;text-transform:uppercase;letter-spacing:.4px;opacity:.85}
.li-info{flex:1}.li-topic{font-weight:600;font-size:14px;color:var(--g800)}.li-meta{font-size:12px;color:var(--g500);margin-top:2px}
.meet-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--green);text-decoration:none;background:var(--green-pale);padding:3px 10px;border-radius:var(--r-full);margin-top:5px;transition:opacity .15s}
.meet-link:hover{opacity:.8}
.badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--r-full);flex-shrink:0}
.b-sched{background:var(--blue-pale);color:var(--blue)}.b-done{background:var(--green-pale);color:#059669}.b-cancel{background:var(--red-pale);color:var(--red)}

/* ── TOPICS ─────────────────────────────────────────────────── */
.topic-tag{display:inline-flex;align-items:center;background:var(--blue-pale);color:var(--blue);font-size:12px;font-weight:500;padding:4px 12px;border-radius:var(--r-full);margin:3px;border:1px solid rgba(59,110,245,.2)}

/* ── TABLE ──────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
.dtbl{width:100%;border-collapse:collapse;font-size:13px}
.dtbl th{text-align:left;padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--g400);border-bottom:1px solid var(--g200)}
.dtbl td{padding:11px 12px;border-bottom:1px solid var(--g100);color:var(--g700)}.dtbl tr:last-child td{border-bottom:none}.dtbl tr:hover td{background:var(--g50)}
.dtbl a{color:var(--green);font-size:12px;font-weight:600;text-decoration:none}.dtbl a:hover{text-decoration:underline}

/* ── STUDENT DETAIL CARD ────────────────────────────────────── */
.sdc{background:var(--white);border:1px solid var(--g200);border-radius:var(--r);margin-bottom:16px;overflow:hidden;box-shadow:var(--sh-sm)}
.sdc-hd{background:var(--navy);padding:18px 24px;display:flex;align-items:center;gap:14px}
.sdc-hd-av{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;background:rgba(255,255,255,.15);color:var(--white);flex-shrink:0}
.sdc-n{font-family:'DM Serif Display',serif;font-size:18px;color:var(--white)}.sdc-sub{font-size:13px;color:rgba(255,255,255,.55);margin-top:2px}
.sdc-hd-actions{margin-left:auto;display:flex;gap:8px}
.sdc-body{padding:20px 24px}
.sdc-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.sdc-mini{background:var(--g50);border-radius:var(--r-sm);padding:12px 14px}.sdc-mini-val{font-size:20px;font-weight:700;color:var(--g900)}.sdc-mini-lbl{font-size:12px;color:var(--g500);margin-top:2px}
.sdc-actions{display:flex;gap:8px;margin-top:12px}.sdc-actions button{font-size:13px;padding:8px 16px}

/* ── ADMIN LIST TABLE ───────────────────────────────────────── */
.list-table{width:100%;border-collapse:collapse;font-size:14px}
.list-table th{text-align:left;padding:10px 14px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--g400);border-bottom:1px solid var(--g200);background:var(--g50)}
.list-table td{padding:13px 14px;border-bottom:1px solid var(--g100);color:var(--g700);vertical-align:middle}
.list-table tr:last-child td{border-bottom:none}.list-table tr:hover td{background:var(--g50)}
.lt-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.lt-actions{display:flex;gap:6px}

/* ── CALENDAR ───────────────────────────────────────────────── */
.cal-layout{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
.cal-card{padding:16px}
.cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.cal-hd span{font-weight:600;font-size:15px;color:var(--g800)}
.cal-hd button{background:none;border:1px solid var(--g200);border-radius:var(--r-sm);width:32px;height:32px;cursor:pointer;font-size:18px;color:var(--g500);transition:all .15s;display:flex;align-items:center;justify-content:center}.cal-hd button:hover{background:var(--g100)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cdh{text-align:center;font-size:10px;font-weight:600;color:var(--g400);text-transform:uppercase;padding:4px 0;letter-spacing:.3px}
.cd{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);font-size:13px;cursor:pointer;position:relative;transition:all .14s;color:var(--g700)}
.cd:hover:not(.cd-empty){background:var(--g100)}.cd.cd-empty{cursor:default}.cd.cd-today{background:var(--blue-pale);color:var(--blue);font-weight:700}.cd.cd-sel{background:var(--blue);color:var(--white);font-weight:700}
.cd.cd-has::after{content:'';position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--blue)}.cd.cd-sel.cd-has::after{background:var(--white)}
.day-events{display:flex;flex-direction:column;gap:10px}
.dev{background:var(--g50);border-radius:var(--r-sm);padding:12px 14px;border-left:3px solid var(--blue)}
.dev.dev-done{border-left-color:var(--green)}.dev-topic{font-weight:600;font-size:14px}.dev-meta{font-size:12px;color:var(--g500);margin-top:3px}

/* ── FILES ──────────────────────────────────────────────────── */
.file-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--g50);border-radius:var(--r-sm);border:1px solid var(--g200);margin-bottom:8px}
.file-item:last-child{margin-bottom:0}.f-icon{font-size:20px}.f-info{flex:1;min-width:0}.f-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.f-meta{font-size:11px;color:var(--g400);margin-top:2px}
.f-actions{display:flex;gap:6px;flex-shrink:0}
.upload-zone{border:2px dashed var(--g300);border-radius:var(--r);padding:28px;text-align:center;cursor:pointer;transition:all .2s;color:var(--g500)}
.upload-zone:hover{border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}
.upload-zone svg{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto 10px}
.upload-zone p{font-weight:600;font-size:14px;margin-bottom:4px}.upload-zone span{font-size:12px;opacity:.7}

/* ── PROGRESS ───────────────────────────────────────────────── */
.level-track{padding-top:8px}
.lvl-row{display:flex;align-items:center;gap:0;margin-bottom:18px}
.lvl{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;font-weight:700;font-size:12px;border:2.5px solid var(--g200);color:var(--g400);background:var(--white);flex-shrink:0;position:relative;z-index:1}
.lvl.done{border-color:var(--green);color:var(--green);background:var(--green-pale)}.lvl.curr{border-color:var(--blue);color:var(--white);background:var(--blue);box-shadow:0 0 0 4px rgba(59,110,245,.2)}.lvl.future{border-color:var(--g200)}
.lvl-conn{flex:1;height:3px;background:var(--g200)}.lvl-conn.done{background:var(--green)}
.lvl-desc{font-size:14px;color:var(--g600)}
.bar-chart{display:flex;align-items:flex-end;gap:8px;height:130px;padding-top:10px}
.bcc{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1}
.bcb{width:100%;background:var(--blue-pale);border-radius:6px 6px 0 0;min-height:4px;transition:background .2s}.bcb:hover{background:var(--blue)}
.bcv{font-size:11px;font-weight:600;color:var(--g600)}.bcl{font-size:10px;color:var(--g400)}
.subject-item{background:var(--g50);border-radius:var(--r-sm);padding:10px 14px;border-left:3px solid var(--blue);margin-bottom:8px}.subject-item:last-child{margin-bottom:0}
.si-name{font-weight:600;font-size:14px}.si-date{font-size:12px;color:var(--g500);margin-top:2px}
.note-item{background:var(--amber-pale);border-radius:var(--r-sm);padding:12px 14px;border-left:3px solid var(--amber);margin-bottom:10px}.note-item:last-child{margin-bottom:0}
.ni-text{font-size:14px;color:var(--g700)}.ni-date{font-size:11px;color:var(--g500);margin-top:5px}

/* ── MODAL ──────────────────────────────────────────────────── */
.modal-ov{position:fixed;inset:0;background:rgba(15,27,53,.55);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}
.modal-card{background:var(--white);border-radius:var(--r);padding:28px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:var(--sh-lg);animation:min .2s ease}
.modal-wide{max-width:580px}
@keyframes min{from{opacity:0;transform:scale(.95) translateY(-8px)}to{opacity:1;transform:none}}
.mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.mh h3{font-family:'DM Serif Display',serif;font-size:20px;color:var(--g900)}
.mc-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--g400);padding:4px 8px;border-radius:6px}.mc-close:hover{background:var(--g100);color:var(--g700)}
.mf{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.modal-info{font-size:13px;color:var(--g500);background:var(--g50);padding:10px 14px;border-radius:var(--r-sm);margin-bottom:16px;border:1px solid var(--g200)}

/* Credential box */
.cred-box{background:var(--navy);border-radius:var(--r);padding:20px 24px;margin-bottom:16px}
.cred-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}.cred-row:last-child{border-bottom:none}
.cred-row span{font-size:12px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px}.cred-row strong{color:var(--white);font-size:15px}

/* ── TOAST ──────────────────────────────────────────────────── */
.toast{position:fixed;bottom:28px;right:28px;background:var(--g900);color:var(--white);padding:12px 22px;border-radius:var(--r-sm);font-size:14px;font-weight:500;z-index:9999;box-shadow:var(--sh-lg);animation:ti .25s ease}
@keyframes ti{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── MISC ───────────────────────────────────────────────────── */
.empty{text-align:center;color:var(--g400);font-size:14px;padding:24px 0}
.mat-badge{display:inline-block;background:var(--navy);color:var(--white);font-size:13px;font-weight:600;padding:3px 12px;border-radius:var(--r-full);letter-spacing:1px}

@media(max-width:900px){
  .login-wrap{grid-template-columns:1fr}.login-left{display:none}.login-logo-mob{display:flex}
  .stats-grid{grid-template-columns:repeat(2,1fr)}.two-col,.cal-layout{grid-template-columns:1fr}
  .sidebar{width:200px}.main-content{margin-left:200px}
}

/* ── CERTIFICATES ───────────────────────────────────────────── */
.cert-card {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r);
  padding: 20px 24px;
  margin-bottom: 14px;
  box-shadow: var(--sh-sm);
  display: flex;
  align-items: center;
  gap: 18px;
}
.cert-icon {
  font-size: 36px;
  flex-shrink: 0;
}
.cert-info { flex: 1; }
.cert-title {
  font-family: 'DM Serif Display', serif;
  font-size: 17px;
  color: var(--g900);
  margin-bottom: 3px;
}
.cert-meta { font-size: 13px; color: var(--g500); margin-bottom: 6px; }
.cert-id { font-size: 11px; color: var(--g400); font-family: monospace; letter-spacing: .5px; }
.cert-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.badge-pending  { background: var(--amber-pale); color: #92400e; border: 1px solid #fcd34d; }
.badge-complete { background: var(--green-pale);  color: #065f46; border: 1px solid #6ee7b7; }

/* ── SIGNATURE CANVAS ───────────────────────────────────────── */
.sig-wrap {
  position: relative;
  border: 2px solid var(--g200);
  border-radius: var(--r-sm);
  background: var(--g50);
  overflow: hidden;
}
.sig-canvas {
  display: block;
  width: 100%;
  cursor: crosshair;
  touch-action: none;
}
.sig-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--g500);
  font-family: 'DM Sans', sans-serif;
  transition: all .15s;
}
.sig-clear:hover { background: var(--red-pale); color: var(--red); border-color: var(--red); }
.sig-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--g300);
  pointer-events: none;
  user-select: none;
}

/* meet-link — works as <a> or <button> */
.meet-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-pale);
  border: none;
  padding: 5px 14px;
  border-radius: var(--r-full);
  margin-top: 6px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  transition: opacity .15s, background .15s;
}
.meet-link:hover { opacity: .85; background: #a7f3d0; }

/* Absent lesson status */
.dev.dev-absent { border-left-color: var(--red); background: #fff5f5; }
.b-absent { background: var(--red-pale); color: var(--red); border: 1px solid #fca5a5; }

/* ── New login styles (EN + ES) ─────────────────────────────── */
.login-left{
  background:linear-gradient(145deg,#0a1628 0%,#1A4FBF 55%,#D93025 100%);
}
.login-langs{display:flex;align-items:center;gap:12px;margin-bottom:28px;position:relative;z-index:2}
.lang-pill{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-full);padding:7px 14px}
.lang-flag{font-size:20px}.lang-txt{font-size:13px;font-weight:600;color:rgba(255,255,255,.9)}
.lang-div{width:1px;height:24px;background:rgba(255,255,255,.25)}
.login-features{display:flex;flex-direction:column;gap:8px;position:relative;z-index:2}

.login-theme-toggle:hover{background:var(--g200)}

.theme-toggle-btn span{font-size:13px;color:var(--text-sub);font-family:'DM Sans',sans-serif}
.toggle-pill{width:36px;height:20px;background:var(--g300);border-radius:var(--r-full);position:relative;transition:background .2s;flex-shrink:0}
.toggle-pill.on{background:var(--blue)}
.toggle-pill::after{content:'';position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle-pill.on::after{transform:translateX(16px)}

/* ── Language badges ────────────────────────────────────────── */
.lang-badge-en{background:#dbeeff;color:#1d6fa4;border:1px solid #93c5fd;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-full)}
.lang-badge-es{background:#fce8ea;color:#e63946;border:1px solid #fca5a5;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-full)}

/* ── Inactive badge ─────────────────────────────────────────── */
.inactive-badge{background:var(--g100);color:var(--g500);border:1px solid var(--g300);font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-full)}

/* ── Student info fields ────────────────────────────────────── */
.student-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.si-field{background:var(--g50);border-radius:var(--r-sm);padding:8px 12px}
.si-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-sub);margin-bottom:2px}
.si-value{font-size:13px;color:var(--text-main);font-weight:500}

/* ── Payment alert ──────────────────────────────────────────── */
.payment-alert{background:#fef3c7;border:1px solid #fcd34d;border-radius:var(--r-sm);padding:8px 14px;font-size:12px;color:#92400e;display:flex;align-items:center;gap:6px;margin-top:8px}

/* Field row 3 */
.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}


/* ── JITSI ──────────────────────────────────────────────────── */
.btn-jitsi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--r-full);
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  margin-top: 8px;
  transition: all .2s;
  background: var(--blue-pale);
  color: var(--blue);
}
.btn-jitsi:hover { background: var(--blue); color: #fff; }
.btn-jitsi-live {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 2px 10px rgba(16,185,129,.3);
}
.btn-jitsi-live:hover { opacity: .9; box-shadow: 0 4px 18px rgba(16,185,129,.45); }

/* ══════════════════════════════════════════════════════════════
   LOGIN V2 — Bold blue, world map, logo-first
   ══════════════════════════════════════════════════════════════ */
.login-v2 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Deep blue gradient */
  background-image: linear-gradient(135deg, #08122c 0%, #142759 16%, #1A3FA0 34%, #3f6ad1 48%, #1A3FA0 62%, #142759 80%, #08122c 100%);
  position: relative;
  overflow: hidden;
  padding: 32px 16px;
}

/* Language/country motif overlay, contained within the section */
.lv2-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Card — dark navy with slight transparency */
.lv2-card {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.97);
  border-radius: 24px;
  padding: 48px 52px 44px;
  width: 100%;
  max-width: 490px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15),
    0 20px 60px rgba(0,0,0,0.35),
    0 4px 16px rgba(0,0,0,0.2);
}

/* Logo — LARGE */
.lv2-logo-wrap {
  text-align: center;
  margin-bottom: 0;
}
.lv2-logo-svg {
  width: 80%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
}

/* Divider */
.lv2-divider {
  display: flex;
  align-items: center;
  margin: 18px 0 26px;
}
.lv2-divider-line { flex: 1; height: 1.5px; display: block; }
.lv2-dl-blue { background: linear-gradient(90deg, transparent, #1A3FA0 80%); }
.lv2-dl-red  { background: linear-gradient(90deg, #C8281E 20%, transparent); }
.lv2-divider-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #cbd5e1; flex-shrink: 0; margin: 0 10px;
}

/* Form text */
.lv2-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #0f172a;
  text-align: center;
  margin-bottom: 5px;
  font-weight: 400;
}
.lv2-sub {
  font-size: 14px;
  color: #64748b;
  text-align: center;
  margin-bottom: 26px;
}

/* Fields */
.lv2-field { margin-bottom: 16px; }
.lv2-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 7px;
}
.lv2-input-wrap { position: relative; display: flex; align-items: center; }
.lv2-ico {
  position: absolute; left: 14px;
  width: 18px; height: 18px;
  color: #94a3b8; pointer-events: none;
}
.lv2-input {
  width: 100%;
  padding: 12px 44px 12px 44px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #1e293b;
  background: #f8fafc;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.lv2-input:focus {
  border-color: #1A3FA0;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(26,63,160,.10);
}
.lv2-eye {
  position: absolute; right: 12px;
  background: none; border: none; cursor: pointer;
  color: #94a3b8; padding: 4px;
  display: flex; align-items: center;
  transition: color .15s;
}
.lv2-eye:hover { color: #475569; }

/* Button */
.lv2-btn {
  width: 100%; padding: 14px; margin-top: 8px;
  background: linear-gradient(135deg, #1A3FA0 0%, #1e4db7 60%, #C8281E 200%);
  background: #1A3FA0;
  color: #fff; border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer; letter-spacing: 0.3px;
  transition: background .2s, transform .1s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(26,63,160,.35);
  position: relative; overflow: hidden;
}
.lv2-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(200,40,30,0.18) 100%);
  pointer-events: none;
}
.lv2-btn:hover {
  background: #163490;
  box-shadow: 0 6px 22px rgba(26,63,160,.45);
}
.lv2-btn:active { transform: scale(.98); }

.lv2-footer {
  text-align: center; margin-top: 18px;
  font-size: 13px; color: #94a3b8;
}

/* Secondary CTAs (register as teacher / student) */
.lv2-alt-wrap { margin-top: 14px; text-align: center; padding-top: 18px; border-top: 1px solid rgba(15,27,53,.08); }
.lv2-alt-label { font-size: 13px; color: #475569; margin: 0 0 10px; }
.lv2-alt-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px;
  padding: 12px 20px; font-family: 'DM Sans', sans-serif; font-size: 14.5px; font-weight: 700;
  cursor: pointer; letter-spacing: .01em; color: #334155;
  transition: border-color .18s, background .18s, color .18s, transform .1s;
}
.lv2-alt-btn svg { flex-shrink: 0; transition: color .18s; }
.lv2-alt-btn:active { transform: scale(.98); }
.lv2-alt-btn.teach { color: #C8281E; border-color: #f3c9c5; background: #fef6f5; }
.lv2-alt-btn.teach:hover { background: #E8381E; border-color: #E8381E; color: #fff; }
.lv2-alt-btn.stud { color: #1A3FA0; border-color: #c7d5f5; background: #f5f8ff; }
.lv2-alt-btn.stud:hover { background: #1A3FA0; border-color: #1A3FA0; color: #fff; }

@media (max-width: 560px) {
  .lv2-card { padding: 36px 24px 32px; border-radius: 18px; }
  .lv2-logo-svg { max-width: 300px; }
}

/* ── LANDING PAGE ─────────────────────────────────────────── */
/* Metallic pearl/silver gradient — one continuous surface, no per-section seams */
#page-landing {
  position: relative;
  background-color: #eef1f6;
  background-image: linear-gradient(160deg, #e3e8f0 0%, #eef1f6 14%, #ffffff 32%, #f4f7fb 48%, #e8edf4 64%, #f1f4f9 80%, #e3e8f0 100%);
}
.lp-words-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.lp-nav, .lp-audience-bar, .lp-hero, .lp-footer { position: relative; z-index: 1; }

.lp-nav {
  display: flex; align-items: center; min-height: 96px;
  padding: 10px 32px;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 1px, transparent 1px, transparent 4px),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 48%, transparent 66%),
    linear-gradient(100deg, #E8381E 0%, #E8381E 48%, #2A5FCC 52%, #2A5FCC 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.2); position: relative; z-index: 20;
}
.lp-nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 48%, #E8381E 52%, #E8381E 100%);
  opacity: .9;
}
.lp-nav-spacer { flex: 1; min-width: 12px; }
.lp-nav-logo {
  height: 64px; width: auto; display: block; flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}
.lp-nav-links { display: flex; align-items: center; gap: 26px; flex-shrink: 0; margin-left: 36px; }
.lp-nav-links a {
  color: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; opacity: .9; transition: opacity .15s;
}
.lp-nav-links a:hover { opacity: 1; text-decoration: underline; }
.lp-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lp-nav-btn, .lp-nav-btn-outline {
  padding: 10px 26px; border-radius: var(--r-full); font-family: 'Poppins', sans-serif; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.lp-nav-btn { background: #fff; color: var(--blue); border: none; }
.lp-nav-btn:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.lp-nav-btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.lp-nav-btn-outline:hover { background: rgba(255,255,255,.15); }

.lp-createacc-wrap { position: relative; }
.lp-createacc-menu {
  position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border-radius: var(--r);
  box-shadow: var(--sh-lg); border: 1px solid var(--g100); padding: 8px; min-width: 190px;
  display: flex; flex-direction: column; gap: 2px; z-index: 30;
}
.lp-createacc-menu button {
  padding: 10px 14px; border: none; background: none; text-align: left; border-radius: var(--r-sm);
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--navy);
  cursor: pointer; transition: background .15s; white-space: nowrap;
}
.lp-createacc-menu button:hover { background: var(--g50); }

.lp-promo-bar {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(100deg, #f59e0b 0%, #d97706 100%);
  padding: 12px 24px; position: relative; z-index: 15; text-align: center;
}
.lp-promo-text { color: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; }
.lp-promo-btn {
  background: #fff; color: #b45309; border: none; padding: 9px 20px; border-radius: var(--r-full);
  font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: all .15s;
}
.lp-promo-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.18); }

.lp-free-strip {
  background: #2A5FCC; color: #fff; text-align: center; padding: 7px 20px;
  font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 500;
  position: relative; z-index: 15;
}
.lp-free-strip strong { font-weight: 700; }

.lp-audience-bar { display: flex; justify-content: center; padding: 22px 16px 0; }
.lp-audience-toggle {
  display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--g200);
  border-radius: var(--r-full); padding: 4px; box-shadow: var(--sh-sm);
}
.lp-aud-btn {
  padding: 10px 22px; border: none; background: transparent; color: var(--g500);
  font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 600;
  border-radius: var(--r-full); cursor: pointer; transition: all .18s; white-space: nowrap;
}
.lp-aud-btn.active { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(26,63,160,.3); }
.lp-aud-btn:not(.active):hover { background: var(--g50); color: var(--navy); }

.lp-hero {
  position: relative; overflow: hidden;
  background-image: linear-gradient(135deg, #08122c 0%, #142759 16%, #1A3FA0 34%, #3f6ad1 48%, #1A3FA0 62%, #142759 80%, #08122c 100%);
  padding: 56px 24px 80px; text-align: center;
}
.lp-hero-words-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lp-hero-content { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.lp-hero-badge {
  display: inline-block; padding: 6px 16px; margin-bottom: 20px; border-radius: var(--r-full);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
}
.lp-hero-title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(28px, 5vw, 44px); line-height: 1.25; color: #fff; margin-bottom: 18px;
  letter-spacing: -.5px;
}
.lp-hero-sub { font-size: 17px; color: rgba(255,255,255,.82); line-height: 1.6; margin-bottom: 32px; }
.lp-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.lp-btn-primary, .lp-btn-outline {
  padding: 13px 26px; border-radius: var(--r-full); font-family: 'Poppins', sans-serif;
  font-size: 14.5px; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.lp-btn-primary { background: #fff; color: #1A3FA0; border: none; }
.lp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.lp-btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.lp-btn-outline:hover { background: rgba(255,255,255,.12); }
.lp-btn-outline-dark { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.lp-btn-outline-dark:hover { background: var(--blue-pale); }

.lp-section { max-width: 1100px; margin: 0 auto; padding: 72px 24px; position: relative; z-index: 1; }
.lp-section-alt { max-width: none; }
.lp-section-alt > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.lp-section-title {
  font-family: 'Poppins', sans-serif; font-weight: 700; text-align: center;
  font-size: clamp(22px, 3.2vw, 30px); color: var(--navy); margin-bottom: 12px; letter-spacing: -.3px;
}
.lp-section-sub { text-align: center; color: var(--g500); margin-bottom: 40px; font-size: 15px; }

.lp-mesh-bg { position: relative; }

.lp-features { display: grid; gap: 20px; }
.lp-feature {
  background: #fff; border: 1px solid var(--g100); border-radius: var(--r); padding: 30px 22px;
  text-align: center; box-shadow: var(--sh-sm); position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lp-feature::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--r); padding: 1.5px;
  background: linear-gradient(135deg, var(--blue), #E8381E);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .25s;
}
.lp-feature:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(26,63,160,.16); border-color: transparent; }
.lp-feature:hover::before { opacity: 1; }
.lp-feature-ico {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--blue-pale); display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.lp-feature h3 { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.lp-feature p { font-size: 13.5px; color: var(--g500); line-height: 1.5; }

.lp-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.lp-shot {
  background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-md);
  border: 1px solid var(--g100); transition: transform .2s, box-shadow .2s;
}
.lp-shot:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.lp-shot .lp-shot-imgwrap { cursor: zoom-in; overflow: hidden; background: var(--g50); }
.lp-shot img { width: 100%; display: block; transition: transform .3s; }
.lp-shot:hover img { transform: scale(1.03); }
.lp-shot-body { padding: 14px 18px 18px; }
.lp-shot-body h4 { font-family: 'Poppins', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.lp-shot-body p { font-size: 12.5px; color: var(--g500); line-height: 1.5; }

.lp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; align-items: stretch; }
.lp-plan-card {
  background: #fff; border: 1.5px solid var(--g100); border-radius: var(--r); padding: 28px 22px;
  text-align: center; transition: transform .2s, box-shadow .2s; position: relative;
  display: flex; flex-direction: column;
}
.lp-plan-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.lp-plan-card-popular { border-color: var(--blue); box-shadow: 0 8px 24px rgba(26,63,160,.14); }
.lp-plan-card-popular:hover { box-shadow: 0 12px 30px rgba(26,63,160,.2); }
.lp-plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--blue), #3f6ad1); color: #fff;
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 4px 14px; border-radius: var(--r-full); box-shadow: 0 3px 8px rgba(26,63,160,.35);
}
.lp-plan-card h3 { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.lp-plan-price-was { font-size: 13px; color: var(--g400); margin-bottom: 2px; }
.lp-plan-price-was s { text-decoration: line-through; color: var(--g500); font-weight: 600; }
.lp-plan-price { font-size: 26px; font-weight: 700; color: var(--blue); margin-bottom: 8px; font-family: 'Poppins', sans-serif; }
.lp-plan-price span { font-size: 13px; font-weight: 500; color: var(--g400); }
.lp-plan-limit { font-size: 13.5px; color: var(--g600); margin-bottom: 6px; }
.lp-plan-features { list-style: none; margin: 10px 0 18px; padding: 0; text-align: left; flex: 1; }
.lp-plan-features li { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: 12.5px; line-height: 1.4; }
.lp-plan-features li svg { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; }
.lp-plan-features li.included { color: var(--navy); font-weight: 600; }
.lp-plan-features li.included svg { color: var(--blue); }
.lp-plan-features li.excluded { color: var(--g400); font-weight: 400; }
.lp-plan-features li.excluded svg { color: var(--g300); }

/* Toggle switch (plan tool editor) */
.plan-tool-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid var(--g100); font-size: 13.5px; }
.plan-tool-row:last-child { border-bottom: none; }
.tgl-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; cursor: pointer; }
.tgl-switch input { opacity: 0; width: 0; height: 0; }
.tgl-switch .tgl-slider { position: absolute; inset: 0; background: var(--g300); transition: .18s; border-radius: 999px; }
.tgl-switch .tgl-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; transition: .18s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tgl-switch input:checked + .tgl-slider { background: var(--blue); }
.tgl-switch input:checked + .tgl-slider::before { transform: translateX(16px); }
.tgl-switch input:disabled + .tgl-slider { opacity: .55; cursor: not-allowed; }

.lp-plan-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: auto;
  padding: 12px 18px; border-radius: var(--r-full); border: 1.5px solid var(--blue); background: transparent;
  color: var(--blue); font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .18s;
}
.lp-plan-btn svg { transition: transform .18s; }
.lp-plan-btn:hover { background: var(--blue-pale); }
.lp-plan-btn:hover svg { transform: translateX(3px); }
.lp-plan-btn-solid {
  border-color: transparent; background: linear-gradient(135deg, var(--blue), #3f6ad1); color: #fff;
  box-shadow: 0 4px 14px rgba(26,63,160,.35);
}
.lp-plan-btn-solid:hover { background: linear-gradient(135deg, #1846ad, var(--blue)); box-shadow: 0 6px 18px rgba(26,63,160,.45); }

.lp-free-banner {
  max-width: 640px; margin: 0 auto; text-align: center; background: #fff; border-radius: var(--r);
  padding: 44px 36px; box-shadow: var(--sh-md); border: 1.5px solid var(--green-pale);
}
.lp-free-badge {
  display: inline-block; padding: 6px 18px; margin-bottom: 16px; border-radius: var(--r-full);
  background: var(--green-pale); color: #065f46; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px;
}
.lp-free-banner h3 { font-family: 'Poppins', sans-serif; font-size: 22px; color: var(--navy); margin-bottom: 12px; }
.lp-free-banner p { font-size: 14.5px; color: var(--g600); line-height: 1.6; margin-bottom: 24px; }
.lp-free-banner .lp-btn-primary { background: var(--blue); color: #fff; }
.lp-free-banner .lp-btn-primary:hover { opacity: .9; }

.lp-footer {
  background: var(--navy); color: rgba(255,255,255,.75); text-align: center;
  padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 13px;
}

/* Lightbox */
.lp-lightbox {
  position: fixed; inset: 0; background: rgba(10,15,30,.88); z-index: 999;
  display: flex; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out;
}
.lp-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lp-lightbox-close {
  position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,.12); border: none;
  color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; cursor: pointer;
}
.lp-lightbox-close:hover { background: rgba(255,255,255,.22); }

/* Back button on login page */
.lv2-back-btn {
  position: absolute; top: 24px; left: 24px; z-index: 5; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25); color: #fff; padding: 9px 18px; border-radius: var(--r-full);
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.lv2-back-btn:hover { background: rgba(255,255,255,.2); }

@media (max-width: 1300px) {
  .lp-nav-links { display: none; }
}

@media (max-width: 640px) {
  .lp-nav { padding: 10px 16px; flex-wrap: wrap; row-gap: 8px; min-height: 0; }
  .lp-nav-logo { height: 44px; }
  .lp-nav-spacer { display: none; }
  .lp-nav-actions { gap: 6px; margin-left: auto; }
  .lp-nav-btn, .lp-nav-btn-outline { padding: 8px 14px; font-size: 12.5px; }
  .lp-createacc-menu { right: -10px; min-width: 170px; }
  .lp-hero { padding: 44px 18px 56px; }
  .lp-section { padding: 48px 18px; }
  .lp-aud-btn { padding: 9px 14px; font-size: 12.5px; }
  .lv2-back-btn { top: 14px; left: 14px; padding: 7px 14px; font-size: 12px; }
}
@media (min-width: 641px) {
  .lp-features[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
  .lp-features[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) and (min-width: 641px) {
  .lp-features[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}

/* ── SIDEBAR — dark navy for better logo contrast ──────────── */
.sidebar {
  background: #0f1b35 !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}
.sb-user {
  background: rgba(255,255,255,.06) !important;
}
.u-name { color: #f1f5f9 !important; }
.u-role { color: rgba(255,255,255,.45) !important; }
.role-adm  { color: #fca5a5 !important; }
.role-teach{ color: #fcd34d !important; }
.role-stud { color: #93c5fd !important; }
.nav-item { color: rgba(255,255,255,.55) !important; }
.nav-item:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.nav-item.active { background: rgba(26,63,160,.55) !important; color: #93c5fd !important; }
.nav-item svg { stroke: currentColor; }
.btn-logout {
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.45) !important;
}
.btn-logout:hover {
  background: rgba(200,40,30,.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(200,40,30,.3) !important;
}

/* ── SIDEBAR LOGO ───────────────────────────────────────────── */
.sb-logo-wrap {
  padding: 12px 10px 24px 10px;
  display: flex;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  margin: 8px 4px 4px 4px;
}
.sb-logo-svg {
  width: 210px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
}

/* ── PROFILE EDIT ───────────────────────────────────────────── */
.profile-avatar-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.profile-avatar-preview {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--blue-pale);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
  flex-shrink: 0;
  border: 3px solid var(--g200);
}
.profile-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-readonly-info {
  display: flex;
  gap: 20px;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.profile-readonly-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-readonly-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--g400);
}
.profile-readonly-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--g700);
}
.sb-user-clickable { cursor: pointer; transition: background .15s; }
.sb-user-clickable:hover { background: var(--g100); border-radius: var(--r-sm); }
.section-divider { height: 1px; background: var(--g100); margin: 16px 0; }

/* ── CHAT FLUTUANTE ─────────────────────────────────────────── */
#chat-widget { position:fixed; bottom:24px; right:24px; z-index:9000; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
#chat-toggle-btn { position:relative; width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff; border:none; cursor:pointer; box-shadow:0 4px 16px rgba(42,95,204,.45); display:flex; align-items:center; justify-content:center; transition:transform .15s; }
#chat-toggle-btn:hover { transform:scale(1.08); }
.chat-badge { position:absolute; top:-4px; right:-4px; background:#ef4444; color:#fff; font-size:11px; font-weight:700; border-radius:50%; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid #fff; }
.chat-panel { width:300px; background:#fff; border-radius:14px; box-shadow:0 8px 32px rgba(15,23,42,.18); overflow:hidden; animation:chatIn .2s ease; }
@keyframes chatIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.chat-panel-header { display:flex; align-items:center; gap:8px; padding:12px 14px; background:var(--navy); color:#fff; font-weight:600; font-size:14px; }
.chat-panel-header span:first-of-type { flex:1; }
.chat-close-btn { background:none; border:none; color:#fff; font-size:20px; cursor:pointer; line-height:1; padding:0 2px; opacity:.8; }
.chat-close-btn:hover { opacity:1; }
.chat-back-btn { background:none; border:none; color:#fff; font-size:18px; cursor:pointer; line-height:1; padding:0 4px; opacity:.8; }
.chat-back-btn:hover { opacity:1; }
.chat-contacts-list { max-height:320px; overflow-y:auto; }
.chat-contact-item { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; border-bottom:1px solid #f1f5f9; transition:background .12s; }
.chat-contact-item:hover { background:#f8fafc; }
.chat-contact-avatar { width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; position:relative; }
.chat-online-dot { width:10px; height:10px; background:#22c55e; border-radius:50%; border:2px solid #fff; position:absolute; bottom:0; right:0; }
.chat-online-dot-inline { width:8px; height:8px; background:#22c55e; border-radius:50%; display:inline-block; margin-left:4px; vertical-align:middle; }
.chat-contact-info { flex:1; min-width:0; }
.chat-contact-name { font-size:13px; font-weight:600; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-contact-status { font-size:11px; color:#94a3b8; }
.chat-contact-unread { background:#ef4444; color:#fff; font-size:10px; font-weight:700; border-radius:50%; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 3px; flex-shrink:0; }
.chat-loading { padding:20px; text-align:center; color:#94a3b8; font-size:13px; }
.chat-messages-list { height:260px; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:6px; background:#f8fafc; }
.chat-msg { max-width:80%; padding:8px 12px; border-radius:12px; font-size:13px; line-height:1.4; word-break:break-word; }
.chat-msg.mine { align-self:flex-end; background:var(--navy); color:#fff; border-bottom-right-radius:3px; }
.chat-msg.theirs { align-self:flex-start; background:#fff; color:#0f172a; border:1px solid #e2e8f0; border-bottom-left-radius:3px; }
.chat-msg-time { font-size:10px; opacity:.6; margin-top:2px; text-align:right; }
.chat-input-row { display:flex; gap:6px; padding:8px 10px; border-top:1px solid #e2e8f0; background:#fff; }
.chat-input-row input { flex:1; border:1px solid #e2e8f0; border-radius:20px; padding:7px 12px; font-size:13px; outline:none; }
.chat-input-row input:focus { border-color:var(--navy); }
.chat-send-btn { width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-send-btn:hover { opacity:.85; }

/* ── AVISO DE AULA PRÓXIMA ──────────────────────────────────── */
.lesson-alert { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:9500; display:flex; align-items:center; gap:12px; background:#1e3a8a; color:#fff; padding:14px 18px; border-radius:14px; box-shadow:0 8px 32px rgba(15,23,42,.35); max-width:520px; width:calc(100% - 32px); animation:lessonAlertIn .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes lessonAlertIn { from{opacity:0;transform:translateX(-50%) translateY(-20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.lesson-alert-icon { font-size:28px; flex-shrink:0; animation:bellRing 1s ease-in-out 3; }
@keyframes bellRing { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-15deg)} 40%{transform:rotate(15deg)} 60%{transform:rotate(-10deg)} 80%{transform:rotate(10deg)} }
.lesson-alert-body { flex:1; min-width:0; }
.lesson-alert-title { font-weight:700; font-size:15px; margin-bottom:2px; }
.lesson-alert-desc { font-size:13px; color:rgba(255,255,255,.85); }
.lesson-alert-btn { background:#fff; color:#1e3a8a; font-weight:700; font-size:13px; padding:8px 16px; border-radius:8px; text-decoration:none; flex-shrink:0; white-space:nowrap; transition:opacity .15s; }
.lesson-alert-btn:hover { opacity:.85; }
.lesson-alert-close { background:none; border:none; color:rgba(255,255,255,.7); font-size:18px; cursor:pointer; line-height:1; padding:0 2px; flex-shrink:0; }
.lesson-alert-close:hover { color:#fff; }