:root{
    --bg:#F4EFE3;--panel:#FBF8F0;--ink:#16302E;--ink-soft:#5B716D;--mute:#8A9C97;
    --teal:#0E5E54;--teal-d:#0A413B;--teal-l:#EAF2F0;--rust:#C0532B;--gold:#CC962F;
    --line:#E3DBC8;--line-2:#D2C8B0;--shadow:rgba(22,48,46,.10);
    --serif:"Fraunces",Georgia,serif;--sans:"Hanken Grotesk",system-ui,sans-serif;
    --c-akog:#0E5E54;--c-ktex:#2C5E8F;--c-kran:#C0532B;--c-kpro:#CC962F;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
  ::selection{background:var(--gold);color:var(--ink)}
  button{font-family:var(--sans);cursor:pointer;border:none;background:none}
  .app{display:flex;min-height:100vh}

  /* SIDEBAR */
  .side{
    width:248px;flex:none;background:var(--ink);color:#CFE0DC;
    display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh;z-index:40;
  }
  .logo{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:900;font-size:18px;color:#fff;padding:6px 8px 22px}
  .logo .g{width:36px;height:36px;border-radius:10px;background:var(--teal);display:grid;place-items:center;color:var(--gold);font-size:20px;flex:none;box-shadow:0 6px 16px rgba(14,94,84,.5)}
  .navsec{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:14px 12px 8px;font-weight:700}
  .navi{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 12px;border-radius:11px;color:#BDD2CE;font-size:14.5px;font-weight:600;transition:.18s;margin-bottom:2px}
  .navi .ic{width:20px;text-align:center;font-size:17px}
  .navi:hover{background:rgba(255,255,255,.06);color:#fff}
  .navi.on{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(14,94,84,.45)}
  .navi.on .ic{color:var(--gold)}
  .side .spacer{flex:1}
  .ucard{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:11px}
  .ucard .av{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--rust));display:grid;place-items:center;font-weight:800;color:#fff;flex:none}
  .ucard .nm{font-size:13.5px;font-weight:700;color:#fff;line-height:1.2}
  .ucard .rl{font-size:11.5px;color:var(--mute)}

  /* MAIN */
  .main{flex:1;min-width:0;display:flex;flex-direction:column}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,3.5vw,40px);border-bottom:1px solid var(--line);background:rgba(244,239,227,.85);backdrop-filter:blur(10px);position:sticky;top:0;z-index:30}
  .topbar .ttl{font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);font-weight:900;letter-spacing:-.01em}
  .topbar .crumb{font-size:12.5px;color:var(--mute);font-weight:600;margin-bottom:2px}
  .topbar .actions{display:flex;align-items:center;gap:10px}
  .pill{font-size:12.5px;font-weight:700;background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:8px 15px;color:var(--ink-soft);display:flex;align-items:center;gap:7px}
  .pill b{color:var(--teal)}
  .menbtn{display:none;font-size:22px;background:var(--panel);border:1px solid var(--line);border-radius:10px;width:42px;height:42px}
  .view{padding:clamp(20px,3.5vw,40px);animation:fade .4s ease}
  @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* GENERIC CARDS */
  .grid{display:grid;gap:18px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 8px 26px var(--shadow)}
  .h-serif{font-family:var(--serif);font-weight:900;letter-spacing:-.01em}

  /* DASHBOARD */
  .hello{font-family:var(--serif);font-size:clamp(24px,3.4vw,34px);font-weight:900;margin-bottom:4px}
  .hello em{font-style:italic;color:var(--rust)}
  .sub{color:var(--ink-soft);font-size:15px;margin-bottom:26px}
  .dash-top{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:18px}
  .continue{background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;border-radius:20px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
  .continue::after{content:"▸";position:absolute;right:-10px;bottom:-30px;font-size:160px;opacity:.08;color:#fff}
  .continue .lab{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
  .continue h3{font-family:var(--serif);font-size:25px;font-weight:900;line-height:1.1;margin-bottom:8px}
  .continue p{font-size:14px;opacity:.9;max-width:42ch}
  .continue .pbar{height:7px;background:rgba(255,255,255,.2);border-radius:8px;margin:16px 0 14px;overflow:hidden}
  .continue .pbar i{display:block;height:100%;background:var(--gold);border-radius:8px}
  .btn{font-weight:700;font-size:14.5px;padding:13px 24px;border-radius:11px;display:inline-flex;align-items:center;gap:9px;transition:.22s}
  .btn-gold{background:var(--gold);color:var(--ink)}
  .btn-gold:hover{filter:brightness(1.07);transform:translateY(-2px)}
  .btn-teal{background:var(--teal);color:#fff;box-shadow:0 8px 22px rgba(14,94,84,.35)}
  .btn-teal:hover{background:var(--teal-d);transform:translateY(-2px)}
  .btn-out{border:1.5px solid var(--line-2);color:var(--ink)}
  .btn-out:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .ring-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 26px var(--shadow)}
  .ring-wrap{position:relative;width:150px;height:150px}
  .ring-wrap .ctr{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
  .ring-wrap .ctr b{font-family:var(--serif);font-size:34px;font-weight:900;color:var(--teal);line-height:1}
  .ring-wrap .ctr span{font-size:11px;color:var(--mute);font-weight:600}
  .ring-card .cap{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--ink-soft);text-align:center}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
  .stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:0 6px 18px var(--shadow)}
  .stat .ic{font-size:22px;margin-bottom:8px}
  .stat b{font-family:var(--serif);font-size:28px;font-weight:900;display:block;line-height:1}
  .stat span{font-size:12.5px;color:var(--ink-soft);font-weight:600}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .sect-h{font-family:var(--serif);font-size:19px;font-weight:900;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
  .sect-h a{font-size:13px;font-weight:700;color:var(--teal)}
  .act{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px dashed var(--line)}
  .act:last-child{border:none}
  .act .d{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex:none}
  .act .tx{font-size:14px;font-weight:600;flex:1}
  .act .tm{font-size:12px;color:var(--mute)}

  /* MODULES */
  .modgrid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
  .modc{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;transition:.25s;box-shadow:0 8px 22px var(--shadow)}
  .modc:hover{transform:translateY(-5px);box-shadow:0 18px 40px var(--shadow)}
  .modc .top{height:84px;display:flex;align-items:center;padding:0 22px;color:#fff;position:relative;overflow:hidden}
  .modc .top .num{font-family:var(--serif);font-size:13px;font-weight:900;opacity:.8;letter-spacing:.1em;position:absolute;top:14px;left:22px}
  .modc .top .emo{font-size:34px;margin-left:auto;opacity:.9}
  .modc .bd{padding:20px 22px 22px}
  .modc .bd h4{font-family:var(--serif);font-size:18.5px;font-weight:900;margin-bottom:6px}
  .modc .bd p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:16px;min-height:40px}
  .pbar2{height:8px;background:var(--bg);border-radius:8px;overflow:hidden}
  .pbar2 i{display:block;height:100%;border-radius:8px;transition:.5s}
  .modc .meta{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;margin-top:10px;color:var(--ink-soft)}
  .badge-done{font-size:11px;font-weight:700;color:var(--teal);background:var(--teal-l);padding:3px 10px;border-radius:20px}

  /* MODULE DETAIL */
  .back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink-soft);margin-bottom:18px}
  .back:hover{color:var(--teal)}
  .md-hero{border-radius:20px;padding:30px;color:#fff;margin-bottom:24px;position:relative;overflow:hidden}
  .md-hero .num{font-size:12px;font-weight:700;letter-spacing:.12em;opacity:.85;text-transform:uppercase}
  .md-hero h2{font-family:var(--serif);font-size:clamp(24px,3.4vw,34px);font-weight:900;margin:8px 0 10px;max-width:22ch}
  .md-hero p{font-size:15px;opacity:.93;max-width:60ch}
  .md-hero .mrow{display:flex;gap:22px;margin-top:18px;font-size:13.5px;font-weight:600}
  .md-hero .emo{position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:90px;opacity:.16}
  .lesson{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:11px;transition:.2s;cursor:pointer}
  .lesson:hover{border-color:var(--teal);transform:translateX(4px)}
  .lesson .chk{width:30px;height:30px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;flex:none;font-size:15px;color:#fff;transition:.2s}
  .lesson.done .chk{background:var(--teal);border-color:var(--teal)}
  .lesson .info{flex:1;min-width:0}
  .lesson .info h5{font-size:15.5px;font-weight:700;margin-bottom:3px}
  .lesson.done .info h5{color:var(--mute);text-decoration:line-through}
  .lesson .info .tp{font-size:12.5px;color:var(--mute);font-weight:600;display:flex;gap:12px}
  .lesson .go{font-size:13px;font-weight:700;color:var(--teal);flex:none}

  /* LESSON VIEW */
  .lesson-body{max-width:760px}
  .lv-type{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rust);background:var(--panel);border:1px solid var(--line);padding:7px 15px;border-radius:30px;margin-bottom:18px}
  .lv-title{font-family:var(--serif);font-size:clamp(24px,3.6vw,36px);font-weight:900;line-height:1.1;margin-bottom:18px}
  .media-frame{background:linear-gradient(135deg,#16302E,#0A413B);border-radius:18px;aspect-ratio:16/8;display:grid;place-items:center;margin-bottom:24px;color:#fff;position:relative;overflow:hidden}
  .media-frame .play{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.4);display:grid;place-items:center;font-size:26px;backdrop-filter:blur(4px);transition:.2s}
  .media-frame:hover .play{transform:scale(1.08);background:rgba(204,150,47,.5)}
  .media-frame .tag{position:absolute;top:16px;left:16px;font-size:12px;font-weight:600;background:rgba(0,0,0,.3);padding:6px 12px;border-radius:20px}
  .lv-text p{font-size:16px;color:var(--ink-soft);line-height:1.7;margin-bottom:16px}
  .lv-text h4{font-family:var(--serif);font-size:20px;font-weight:900;margin:24px 0 10px}
  .keybox{background:var(--teal-l);border-left:4px solid var(--teal);border-radius:0 12px 12px 0;padding:18px 22px;margin:20px 0}
  .keybox b{color:var(--teal);font-family:var(--serif)}
  .lv-foot{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);gap:14px;flex-wrap:wrap}

  /* RADAR / PROFILE */
  .prof-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
  .complist .ci{display:flex;align-items:center;gap:14px;margin-bottom:16px}
  .complist .dot{width:13px;height:13px;border-radius:4px;flex:none}
  .complist .nm{font-size:14px;font-weight:700;width:110px;flex:none}
  .complist .bar{flex:1;height:9px;background:var(--bg);border-radius:8px;overflow:hidden}
  .complist .bar i{display:block;height:100%;border-radius:8px;transition:.7s}
  .complist .pc{font-size:13px;font-weight:800;width:42px;text-align:right;flex:none}

  /* QUIZ */
  .quiz{max-width:680px;margin:0 auto}
  .qprog{height:8px;background:var(--bg);border-radius:8px;overflow:hidden;margin-bottom:8px}
  .qprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));transition:.4s}
  .qmeta{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:24px}
  .qq{font-family:var(--serif);font-size:clamp(20px,2.8vw,26px);font-weight:900;line-height:1.25;margin-bottom:22px}
  .qopt{width:100%;text-align:left;font-size:15px;font-weight:500;background:var(--bg);border:1.5px solid var(--line);border-radius:13px;padding:15px 18px;margin-bottom:11px;display:flex;align-items:center;gap:13px;transition:.18s}
  .qopt .k{width:28px;height:28px;border-radius:8px;background:var(--panel);border:1.5px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--ink-soft);flex:none;transition:.18s}
  .qopt:hover{border-color:var(--teal);transform:translateX(3px)}
  .qopt.sel{border-color:var(--teal);background:var(--teal-l)}
  .qopt.sel .k{background:var(--teal);color:#fff;border-color:var(--teal)}
  .qnav{display:flex;justify-content:space-between;margin-top:24px;gap:12px}

  /* PORTFOLIO */
  .pf-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .pf{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px var(--shadow);transition:.2s}
  .pf:hover{transform:translateY(-4px)}
  .pf .cv{height:110px;display:grid;place-items:center;font-size:40px;color:#fff}
  .pf .bd{padding:16px 18px}
  .pf .bd h5{font-family:var(--serif);font-size:16px;font-weight:900;margin-bottom:4px}
  .pf .bd p{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px}
  .pf .bd .st{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
  .pf-add{border:2px dashed var(--line-2);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--mute);font-weight:700;font-size:14px;min-height:180px;transition:.2s}
  .pf-add:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-l)}
  .badges{display:flex;flex-wrap:wrap;gap:12px}
  .bdg{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:8px 16px 8px 8px;font-size:13px;font-weight:700;box-shadow:0 4px 12px var(--shadow)}
  .bdg .e{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:16px;background:var(--gold);color:#fff}
  .bdg.lock{opacity:.45}.bdg.lock .e{background:var(--mute)}

  /* TOAST */
  .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:14px 24px;border-radius:30px;font-weight:600;font-size:14px;box-shadow:0 12px 40px rgba(0,0,0,.3);z-index:200;opacity:0;transition:.4s;display:flex;align-items:center;gap:10px}
  .toast.show{transform:translateX(-50%);opacity:1}
  .toast .e{color:var(--gold)}

  @media(max-width:980px){.dash-top{grid-template-columns:1fr}.two,.prof-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}
  @media(max-width:760px){
    .side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:.3s;box-shadow:14px 0 40px rgba(0,0,0,.2)}
    .side.open{transform:none}
    .menbtn{display:grid;place-items:center}
    .scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35;opacity:0;pointer-events:none;transition:.3s}
    .scrim.on{opacity:1;pointer-events:auto}
  }

  /* LOGIN */
  .login{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;overflow:auto}
  .login .art{flex:1;background:linear-gradient(150deg,#0E5E54,#0A413B 72%);color:#fff;padding:clamp(34px,4vw,60px) clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:36px;position:relative;overflow:hidden;min-width:0}
  .login .art .blob{position:absolute;border-radius:50%;filter:blur(70px)}
  .login .art .b1{width:360px;height:360px;background:var(--gold);opacity:.25;top:-90px;right:-70px}
  .login .art .b2{width:300px;height:300px;background:var(--rust);opacity:.22;bottom:-80px;left:-60px}
  .login .art .lg{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:900;font-size:20px;position:relative;z-index:2}
  .login .art .lg .g{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:var(--gold);font-size:23px}
  .login .art .mid{position:relative;z-index:2;max-width:640px;margin:0 auto}
  .login .art .mid h1{font-family:var(--serif);font-size:clamp(28px,4vw,46px);font-weight:900;line-height:1.08;letter-spacing:-.02em}
  .login .art .mid h1 em{font-style:italic;color:var(--gold);font-weight:500}
  .login .art .mid p{margin:18px auto 0;font-size:16px;opacity:.9;line-height:1.6;max-width:48ch}
  .login .art .feat{position:relative;z-index:2;display:flex;gap:30px;flex-wrap:wrap;justify-content:center}
  .login .art .feat div b{font-family:var(--serif);font-size:28px;font-weight:900;color:var(--gold);display:block;line-height:1}
  .login .art .feat div span{font-size:12.5px;opacity:.85}
  .login .form{flex:none;width:min(460px,100%);padding:clamp(30px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
  .login .form .wel{font-family:var(--serif);font-size:28px;font-weight:900;margin-bottom:6px}
  .login .form .welsub{color:var(--ink-soft);font-size:14.5px;margin-bottom:26px}
  .flab{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;display:block}
  .finput{width:100%;padding:13px 16px;border:1.5px solid var(--line-2);border-radius:12px;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--panel);margin-bottom:16px;transition:.2s}
  .finput:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l)}
  .roles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 22px}
  .role{border:1.5px solid var(--line-2);border-radius:14px;padding:16px 12px;text-align:center;cursor:pointer;transition:.2s;background:var(--panel)}
  .role:hover{border-color:var(--teal);transform:translateY(-3px)}
  .role.sel{border-color:var(--teal);background:var(--teal-l);box-shadow:0 8px 22px var(--shadow)}
  .role .e{font-size:30px}
  .role .rt{font-family:var(--serif);font-weight:900;font-size:16px;margin-top:6px}
  .role .rd{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
  .login .ent{width:100%;justify-content:center;font-size:15.5px;padding:15px}
  .login .lfoot{font-size:12.5px;color:var(--mute);text-align:center;margin-top:20px}

  /* LOGOUT + TEACHER */
  .logout{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border-radius:11px;color:#BDD2CE;font-size:14px;font-weight:600;margin-top:10px;transition:.18s}
  .logout:hover{background:rgba(192,83,43,.22);color:#fff}
  .tbl{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 22px var(--shadow)}
  .trow{display:grid;grid-template-columns:2.2fr 1fr 2fr 1.3fr auto;gap:14px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line);transition:.15s}
  .trow:last-child{border:none}
  .trow:hover{background:var(--bg)}
  .trow.head{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);background:var(--bg)}
  .trow .who{display:flex;align-items:center;gap:11px;min-width:0}
  .trow .who .av{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--teal),var(--teal-d));display:grid;place-items:center;color:#fff;font-weight:800;font-size:12.5px;flex:none}
  .trow .who .nm{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .trow .grp{font-size:13px;font-weight:600;color:var(--ink-soft)}
  .minibar{height:8px;background:var(--bg);border-radius:8px;overflow:hidden;margin-bottom:5px}
  .minibar i{display:block;height:100%;border-radius:8px}
  .lvl-pill{font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;white-space:nowrap}
  .tview-btn{font-size:13px;font-weight:700;color:var(--teal);white-space:nowrap}
  .gfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
  .gchip{font-size:13px;font-weight:700;padding:8px 16px;border-radius:30px;border:1.5px solid var(--line-2);color:var(--ink-soft);transition:.18s;background:var(--panel)}
  .gchip:hover{border-color:var(--teal)}
  .gchip.on{background:var(--teal);color:#fff;border-color:var(--teal)}
  .mprog-row{display:flex;align-items:center;gap:14px;margin-bottom:13px}
  .mprog-row .ml{font-size:13px;font-weight:700;width:210px;flex:none;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mprog-row .ml .e{font-size:16px;flex:none}
  .mprog-row .bar{flex:1;height:11px;background:var(--bg);border-radius:8px;overflow:hidden}
  .mprog-row .bar i{display:block;height:100%;border-radius:8px;transition:.6s}
  .mprog-row .pc{font-size:13px;font-weight:800;width:42px;text-align:right;color:var(--teal);flex:none}
  @media(max-width:760px){
    .login .art{display:none}
    .login .form{width:100%}
    .trow{grid-template-columns:2fr 1.3fr auto;gap:10px}
    .trow .col-bar,.trow .col-lvl{display:none}
    .mprog-row .ml{width:140px;font-size:12px}
  }

  /* THEORY: principles & categories */
  .thy-grid{display:grid;gap:16px;margin-bottom:8px}
  .thy-6{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .thy-5{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
  .pcard2{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 6px 18px var(--shadow);position:relative;transition:.25s;border-top:3px solid var(--teal)}
  .pcard2:hover{transform:translateY(-4px);box-shadow:0 16px 36px var(--shadow)}
  .pcard2 .pn{position:absolute;top:18px;right:20px;font-family:var(--serif);font-size:34px;font-weight:900;color:var(--line-2);line-height:1}
  .pcard2 h4{font-family:var(--serif);font-size:18px;font-weight:900;margin-bottom:8px;padding-right:40px}
  .pcard2 .ess{font-size:14px;color:var(--ink);margin-bottom:12px;line-height:1.5}
  .pcard2 .mex{font-size:12.5px;color:var(--ink-soft);background:var(--bg);border-radius:9px;padding:9px 12px;line-height:1.45}
  .pcard2 .mex b{color:var(--teal);font-weight:700}
  .catc{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 6px 16px var(--shadow);transition:.2s}
  .catc:hover{transform:translateY(-3px)}
  .catc .ce{font-size:26px;flex:none;width:46px;height:46px;border-radius:12px;background:var(--teal-l);display:grid;place-items:center}
  .catc h5{font-family:var(--serif);font-size:16px;font-weight:900;margin-bottom:5px}
  .catc p{font-size:13px;color:var(--ink-soft);line-height:1.5}

  /* MODEL 4-block diagram */
  .modelflow{max-width:780px;margin:0 auto}
  .mblock{border-radius:16px;padding:22px 26px;color:#fff;position:relative;overflow:hidden;box-shadow:0 10px 28px var(--shadow)}
  .mblock .mbtag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
  .mblock h4{font-family:var(--serif);font-size:21px;font-weight:900;margin:5px 0 12px}
  .mblock .mbel{display:flex;flex-wrap:wrap;gap:8px}
  .mblock .mbel span{font-size:12.5px;font-weight:600;background:rgba(255,255,255,.16);padding:6px 12px;border-radius:20px;backdrop-filter:blur(3px)}
  .mb1{background:linear-gradient(135deg,#0E5E54,#0A413B)}
  .mb2{background:linear-gradient(135deg,#2C5E8F,#1b3f63)}
  .mb3{background:linear-gradient(135deg,#C0532B,#8c3a1c)}
  .mb4{background:linear-gradient(135deg,#CC962F,#9c6f18)}
  .marrow{text-align:center;font-size:24px;color:var(--line-2);margin:10px 0}
  .mresult{background:var(--ink);color:#fff;border-radius:16px;padding:20px;text-align:center;font-family:var(--serif);font-weight:900;font-size:19px;box-shadow:0 12px 30px var(--shadow)}
  .mresult span{color:var(--gold)}

  /* MEDIAKEYS exercise */
  .mk-scenario{background:linear-gradient(135deg,#2a2320,#1a1614);color:#EDE6DA;border-radius:16px;padding:24px;margin-bottom:22px;position:relative;border:1px solid #3a3330}
  .mk-scenario .src{display:flex;align-items:center;gap:10px;font-size:13px;color:#9aa;margin-bottom:14px;font-weight:600}
  .mk-scenario .src .tg{width:30px;height:30px;border-radius:8px;background:#229ED9;display:grid;place-items:center;font-size:15px;color:#fff}
  .mk-scenario .post{background:#0e0c0b;border-radius:12px;padding:18px;border-left:3px solid var(--rust)}
  .mk-scenario .post .hd{font-family:var(--serif);font-size:18px;font-weight:900;color:#fff;line-height:1.3;margin-bottom:10px}
  .mk-scenario .post .bd{font-size:14px;color:#c9c2b6;line-height:1.55}
  .mk-scenario .meta{display:flex;gap:18px;margin-top:14px;font-size:12.5px;color:#9aa;flex-wrap:wrap}
  .mk-q{font-family:var(--serif);font-size:18px;font-weight:900;margin:6px 0 16px}
  .mk-chip{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--panel);border:1.5px solid var(--line-2);border-radius:12px;padding:13px 16px;margin-bottom:10px;font-size:14.5px;font-weight:500;color:var(--ink);transition:.18s}
  .mk-chip:hover{border-color:var(--teal)}
  .mk-chip .bx{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line-2);flex:none;display:grid;place-items:center;font-size:14px;color:#fff;transition:.15s}
  .mk-chip.on{border-color:var(--teal);background:var(--teal-l)}
  .mk-chip.on .bx{background:var(--teal);border-color:var(--teal)}
  .mk-chip.ok{border-color:#1a8a5a;background:#e7f4ec}
  .mk-chip.ok .bx{background:#1a8a5a;border-color:#1a8a5a}
  .mk-chip.miss{border-color:var(--gold);background:#FAF1DA}
  .mk-chip.wrong{border-color:var(--rust);background:#F8E6DD}
  .mk-chip.wrong .bx{background:var(--rust);border-color:var(--rust)}
  .mk-chip .vd{margin-left:auto;font-size:11.5px;font-weight:700;flex:none}
  .mk-step{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
  .mk-step:last-child{border:none}
  .mk-step .sn{width:30px;height:30px;border-radius:9px;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
  .mk-step .st{font-size:14px;color:var(--ink-soft);line-height:1.5}
  .mk-step .st b{color:var(--ink)}
  .mk-stat{background:var(--teal-l);border-radius:14px;padding:18px 22px;text-align:center;margin-top:18px}
  .mk-stat b{font-family:var(--serif);font-size:30px;font-weight:900;color:var(--teal)}

  /* APPROACH INTEGRATION */
  .integ-hub{background:linear-gradient(135deg,#0E5E54,#0A413B);color:#fff;border-radius:18px;padding:24px;text-align:center;max-width:540px;margin:0 auto;box-shadow:0 12px 30px var(--shadow)}
  .integ-hub .t{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .integ-hub h4{font-family:var(--serif);font-size:24px;font-weight:900;margin:6px 0}
  .integ-hub p{font-size:13.5px;opacity:.9;max-width:44ch;margin:0 auto}
  .integ-arrows{text-align:center;font-size:22px;color:var(--line-2);margin:8px 0}
  .integ-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
  .integ-card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--c);border-radius:14px;padding:18px;box-shadow:0 6px 16px var(--shadow);transition:.2s}
  .integ-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px var(--shadow)}
  .integ-card h5{font-family:var(--serif);font-size:15.5px;font-weight:900;margin-bottom:6px}
  .integ-card p{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
  .integ-note{text-align:center;font-size:13.5px;color:var(--ink-soft);max-width:62ch;margin:18px auto 0;font-style:italic}

  /* MEDIAKEYS LIBRARY */
  .mklib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
  .mklib-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:0 8px 22px var(--shadow);transition:.25s}
  .mklib-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px var(--shadow)}
  .mklib-card .cv{height:72px;display:flex;align-items:center;gap:12px;padding:0 20px;color:#fff}
  .mklib-card .cv .e{font-size:26px}
  .mklib-card .cv .ct{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
  .mklib-card .bd{padding:16px 20px 20px}
  .mklib-card .bd h4{font-family:var(--serif);font-size:16.5px;font-weight:900;margin-bottom:7px;line-height:1.25}
  .mklib-card .bd .go{font-size:13px;font-weight:700;color:var(--teal);display:flex;justify-content:space-between;align-items:center}
  .mklib-card .bd .go .dn{font-size:11px;font-weight:700;color:var(--teal);background:var(--teal-l);padding:3px 9px;border-radius:20px}
  .diffb{font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:20px;white-space:nowrap}
  .mklib-card .cv .diffb{margin-left:auto}
  .asgn-chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line-2);border-radius:20px;padding:6px 8px 6px 12px;font-size:12.5px;font-weight:600;margin:0 8px 8px 0}
  .asgn-chip button{width:20px;height:20px;border-radius:50%;background:var(--line-2);color:#fff;font-size:13px;line-height:1;display:grid;place-items:center}
  .asgn-chip button:hover{background:var(--rust)}
  .hist-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
  .hist-row:last-child{border:none}
  .hist-row .he{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:20px;color:#fff;flex:none}
  .hist-row .hi{flex:1;min-width:0}
  .hist-row .hi h5{font-size:14.5px;font-weight:700}
  .hist-row .hi .hm{font-size:12px;color:var(--mute);font-weight:600}
  .hist-row .ha{font-family:var(--serif);font-size:20px;font-weight:900;flex:none}

  /* CERTIFICATE */
  .cert-page{position:relative;background:#FBF8F0;border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:780px;margin:0 auto;box-shadow:0 16px 44px var(--shadow)}
  .cert-band{height:14px;background:linear-gradient(90deg,var(--teal),var(--gold),var(--rust))}
  .cert-inner{padding:clamp(28px,5vw,56px);text-align:center;border:2px solid var(--gold);margin:18px;border-radius:10px}
  .cert-logo{font-family:var(--serif);font-weight:900;font-size:18px;color:var(--teal)}
  .cert-kicker{font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--rust);margin-top:18px}
  .cert-title{font-family:var(--serif);font-weight:900;font-size:clamp(34px,7vw,58px);letter-spacing:.08em;color:var(--ink);margin:4px 0 2px}
  .cert-sub{font-size:13px;color:var(--ink-soft);font-style:italic;margin-bottom:14px}
  .cert-name{font-family:var(--serif);font-weight:900;font-size:clamp(26px,4.5vw,38px);color:var(--teal);padding-bottom:8px;border-bottom:2px solid var(--line-2);display:inline-block;margin-bottom:16px}
  .cert-text{font-size:14.5px;color:var(--ink-soft);line-height:1.6;max-width:54ch;margin:0 auto 24px}
  .cert-stats{display:flex;justify-content:center;gap:clamp(20px,6vw,56px);margin-bottom:28px}
  .cert-stats b{display:block;font-family:var(--serif);font-size:30px;font-weight:900;color:var(--teal)}
  .cert-stats span{font-size:12px;color:var(--ink-soft);font-weight:600}
  .cert-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:8px}
  .cert-foot .cl{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
  .cert-foot .cv{font-size:13.5px;font-weight:700;color:var(--ink);border-top:1px solid var(--line-2);padding-top:6px;margin-top:4px}
  .cert-seal{width:64px;height:64px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-size:26px;flex:none}
  .cert-top{display:flex;justify-content:space-between;align-items:center}
  .cert-no{font-size:12px;font-weight:700;color:var(--rust);letter-spacing:.04em;border:1px solid var(--line-2);border-radius:20px;padding:4px 12px}
  .cert-listwrap{text-align:left;max-width:560px;margin:0 auto 26px;border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:#fff}
  .cert-listh{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
  .cert-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px}
  .cert-li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0;border-bottom:1px dotted var(--line)}
  .cert-li b{color:var(--teal);flex:none}
  .cert-qr{text-align:center;flex:none}
  .cert-qr img,.cert-qr .qr-fb{border:1px solid var(--line);border-radius:8px;background:#fff;padding:5px}
  .qr-cap{font-size:10.5px;color:var(--mute);margin-top:5px;letter-spacing:.05em}
  @media (max-width:560px){.cert-list{grid-template-columns:1fr}}

  /* MODAL / NOTIFICATION */
  .modal-scrim{position:fixed;inset:0;background:rgba(16,24,22,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
  .modal-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:600px;width:100%;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.35);max-height:88vh;overflow:auto}
  .modal-box textarea.finput{width:100%;font-family:var(--sans);font-size:13.5px}

  /* WEEK CALENDAR */
  .wk-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .wk-day{text-align:center;padding:10px 0 8px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
  .wk-day.today{background:var(--teal-l);border-color:var(--teal)}
  .wk-day .wl{display:block;font-size:11px;color:var(--mute);font-weight:700}
  .wk-day .wn{display:block;font-size:18px;font-weight:800;font-family:var(--serif);margin:2px 0 4px}
  .wk-day.today .wn{color:var(--teal)}
  .wk-day .wd{display:inline-block;min-width:18px;height:18px;line-height:18px;border-radius:9px;color:#fff;font-size:11px;font-weight:700;padding:0 4px}
  .wk-day .wd.empty{background:transparent}

  @media print{
    .side,.topbar,.scrim,.toast,.cert-actions,.menbtn{display:none!important}
    .app,.main,.view{display:block!important;margin:0!important;padding:0!important;background:#fff!important}
    body{background:#fff!important}
    body::before{display:none!important}
    .cert-page{box-shadow:none!important;border:none!important;max-width:100%!important}
  }

  /* DARK THEME */
  html[data-theme="dark"]{--bg:#0E1B19;--panel:#152825;--ink:#E9F1EE;--ink-soft:#A7BBB6;--mute:#7E938E;--teal:#2AA493;--teal-l:#15332e;--line:#2a423d;--line-2:#36534c;--shadow:rgba(0,0,0,.45)}
  html[data-theme="dark"] .side{background:#0a1513}
  html[data-theme="dark"] .topbar{background:rgba(14,27,25,.86);border-bottom-color:var(--line)}
  html[data-theme="dark"] .btn-out:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
  html[data-theme="dark"] .login .form{background:var(--bg)}
  html[data-theme="dark"] .finput{background:#11211e}
  html[data-theme="dark"] .cert-page,html[data-theme="dark"] .modal-box textarea{color-scheme:dark}

  /* TOPBAR CONTROLS */
  .tbctl{display:flex;align-items:center;gap:10px}
  .iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:16px;display:grid;place-items:center;flex:none}
  .iconbtn:hover{border-color:var(--teal)}
  .langsw{display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;flex:none}
  .langsw button{padding:7px 10px;font-size:12px;font-weight:700;color:var(--ink-soft);background:var(--panel)}
  .langsw button.on{background:var(--teal);color:#fff}
  .langsw.lite{border-color:rgba(255,255,255,.3)}
  .langsw.lite button{background:transparent;color:#cfe0dc}
  .langsw.lite button.on{background:rgba(255,255,255,.2);color:#fff}

  /* VIDEO PLAYER (taqdimot) */
  .vplayer{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 10px 30px var(--shadow)}
  .vplayer .vbar{color:#fff;padding:15px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .vplayer .vbar .badge{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.18);padding:6px 12px;border-radius:20px;flex:none}
  .vplayer .vbar .vti h3{font-family:var(--serif);font-size:clamp(15px,2.3vw,21px);font-weight:900;line-height:1.2}
  .vplayer .vbar .vti .by{font-size:12.5px;opacity:.85;margin-top:3px}
  .vplayer .screen{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:24px;overflow:hidden}
  .vplayer .screen .bgtitle{position:relative;z-index:2;max-width:84%;transition:.3s}
  .vplayer .screen .bgtitle .badge{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.16);padding:5px 12px;border-radius:20px;display:inline-block;margin-bottom:14px}
  .vplayer .screen .bgtitle h3{font-family:var(--serif);font-size:clamp(18px,3vw,26px);font-weight:900;line-height:1.22}
  .vplayer .screen .bgtitle .by{font-size:13px;opacity:.85;margin-top:8px}
  .vplayer .playbtn{position:absolute;z-index:3;width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.93);color:var(--teal);font-size:24px;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.45);transition:.2s}
  .vplayer .playbtn:hover{transform:scale(1.08)}
  .vplayer.playing .bgtitle{opacity:.22}
  .vplayer .ctrl{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#0d1412;color:#fff}
  .vplayer .ctrl .pp{font-size:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;flex:none}
  .vplayer .track{flex:1;height:6px;background:rgba(255,255,255,.18);border-radius:6px;overflow:hidden}
  .vplayer .track i{display:block;height:100%;background:var(--gold);width:0%;transition:width .3s linear}
  .vplayer .tm{font-size:12px;font-variant-numeric:tabular-nums;opacity:.85;flex:none}
  .vchapters .ch{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);cursor:pointer;font-size:13.5px}
  .vchapters .ch:last-child{border:none}
  .vchapters .ch:hover{color:var(--teal)}
  .vchapters .ch .tcode{font-variant-numeric:tabular-nums;font-weight:700;color:var(--teal);flex:none;width:46px}

  /* TRANSKRIPT */
  .vtrans .ts{display:flex;gap:12px;padding:9px 6px;cursor:pointer;border-bottom:1px dashed var(--line);border-radius:8px}
  .vtrans .ts:last-child{border:none}
  .vtrans .ts:hover{background:var(--teal-l)}
  .vtrans .ts .tc{font-variant-numeric:tabular-nums;font-weight:700;color:var(--teal);flex:none;width:46px;font-size:12.5px;padding-top:2px}
  .vtrans .ts p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
  .vid-watched{display:none;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--teal);background:var(--teal-l);padding:4px 11px;border-radius:20px;margin-left:8px}
  /* VIDEO TEST */
  .vquiz{position:relative;margin-top:10px;border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--panel)}
  .vquiz.locked .vq-body{filter:blur(3px);opacity:.55;pointer-events:none;user-select:none}
  .vq-lock{display:none;position:absolute;inset:0;z-index:2;align-items:center;justify-content:center;text-align:center;font-weight:700;color:var(--ink-soft);border-radius:14px;padding:20px}
  .vquiz.locked .vq-lock{display:flex}
  .vq-q{margin-bottom:16px}
  .vq-qt{font-weight:700;font-size:14.5px;margin-bottom:8px}
  .vq-opt{display:block;width:100%;text-align:left;font-size:14px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:11px;padding:11px 14px;margin-bottom:8px;transition:.15s}
  .vq-opt:hover{border-color:var(--teal)}
  .vq-opt.on{border-color:var(--teal);background:var(--teal-l);font-weight:600}
  .vq-opt.correct{border-color:#1a8a5a;background:#e7f4ec;font-weight:600}
  .vq-opt.wrong{border-color:var(--rust);background:#F8E6DD}

  /* SLIDE PRESENTATION */
  .slide-stage{position:relative;min-height:520px;border-radius:16px;color:#fff;padding:clamp(28px,4vw,46px);display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden auto;box-shadow:0 10px 30px var(--shadow);scrollbar-width:thin}
  .slide-stage.title{justify-content:center;min-height:520px}
  .slide-stage h3{font-family:var(--serif);font-size:clamp(22px,3vw,30px);font-weight:900;line-height:1.18;margin-bottom:14px;letter-spacing:-.01em}
  .slide-stage.title h3{font-size:clamp(28px,4vw,42px);margin-bottom:18px;letter-spacing:-.02em}
  .slide-stage .slid{font-size:clamp(14px,1.6vw,17px);font-style:italic;font-weight:500;opacity:.93;margin-bottom:18px;padding-left:14px;border-left:3px solid rgba(255,255,255,.4);line-height:1.5}
  .slide-stage ul{list-style:none;padding-left:0;margin:0 0 18px;display:flex;flex-direction:column;gap:10px}
  .slide-stage li{position:relative;padding-left:26px;font-size:clamp(13px,1.55vw,15.5px);line-height:1.55;opacity:.96}
  .slide-stage li:before{content:"▹";position:absolute;left:0;top:0;color:#fff;opacity:.55;font-weight:900}
  .slide-stage li b{color:#fff;font-weight:800;background:rgba(255,255,255,.15);padding:1px 7px;border-radius:5px}
  .slide-stage .sex{background:rgba(255,255,255,.10);border-left:4px solid rgba(255,255,255,.5);border-radius:10px;padding:13px 16px;margin-top:6px;backdrop-filter:blur(8px)}
  .slide-stage .sex-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-bottom:4px}
  .slide-stage .sex p{font-size:clamp(12.5px,1.4vw,14px);line-height:1.55;margin:0;opacity:.95}
  .slide-stage .sbadge{display:inline-block;font-size:12px;font-weight:700;background:rgba(255,255,255,.18);padding:6px 14px;border-radius:30px;letter-spacing:.04em;margin-bottom:14px}
  .slide-stage .ssub{font-size:clamp(14px,1.7vw,17px);font-style:italic;opacity:.85;margin-top:6px}
  .slide-stage .sn{position:absolute;top:14px;right:18px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
  .slide-nav{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
  .slide-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
  .slide-nav .btn{padding:10px 18px}
  .slide-dots{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;flex:1}
  .slide-dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);cursor:pointer;transition:.15s}
  .slide-dot.on{background:var(--teal);transform:scale(1.25)}

  /* AUTH / REGISTRATION */
  .authtabs{display:flex;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:13px;padding:5px;margin-bottom:20px}
  .authtab{flex:1;padding:11px;border-radius:9px;font-weight:700;font-size:14px;color:var(--mute);background:transparent;transition:.15s}
  .authtab.on{background:var(--panel);color:var(--teal);box-shadow:0 1px 5px var(--shadow)}
  .frow{display:flex;gap:12px}
  .frow>div{flex:1;min-width:0}
  select.finput{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23889' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;cursor:pointer}
  .rcheck{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-soft);margin:2px 0 4px;cursor:pointer;line-height:1.45}
  .rcheck input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--teal)}
  .pstr{height:5px;border-radius:5px;background:var(--line);overflow:hidden;margin:-6px 0 16px}
  .pstr i{display:block;height:100%;width:0;background:var(--rust);transition:.25s}
  .ferr{font-size:13px;color:var(--rust);font-weight:600;margin:2px 0 12px;display:none;line-height:1.55;padding:10px 12px;background:#fbe5da;border:1px solid var(--rust);border-radius:9px}
  .lhint{font-size:12px;color:var(--mute);margin:-4px 0 2px}

  /* ROL TANLASH EKRANI */
  .rolegrid{display:flex;flex-direction:column;gap:12px;margin:8px 0 20px}
  .rolecard{display:flex;align-items:center;gap:15px;text-align:left;padding:18px;border:1.5px solid var(--line);border-radius:16px;background:var(--bg);transition:.16s;cursor:pointer}
  .rolecard:hover{border-color:var(--teal);box-shadow:0 8px 22px var(--shadow);transform:translateY(-1px)}
  .rolecard .e{font-size:30px;flex:none}
  .rolecard .rcol{flex:1;display:flex;flex-direction:column;gap:3px}
  .rolecard .rt{font-family:var(--serif);font-size:18px;font-weight:800;color:var(--ink)}
  .rolecard .rd{font-size:13px;color:var(--mute)}
  .rolecard .go{flex:none;font-weight:700;color:var(--teal);font-size:14px}
  .rolecard.teacher:hover{border-color:var(--c-ktex)}
  .rolecard.teacher .go{color:var(--c-ktex)}
  .gate-back{align-self:flex-start;background:transparent;color:var(--mute);font-weight:600;font-size:13.5px;margin-bottom:14px;padding:4px 0}
  .gate-back:hover{color:var(--teal)}
  .rolepill{display:inline-flex;align-items:center;gap:12px;background:var(--teal-l);border:1px solid var(--line);border-radius:14px;padding:11px 16px;margin-bottom:18px}
  .rolepill .e{font-size:24px}
  .rolepill b{display:block;font-size:15px;color:var(--ink);font-family:var(--serif)}
  .rolepill i{font-size:12.5px;color:var(--mute);font-style:normal}

/* ===== MOBIL YAXSHILANISHLARI (Joomla muhiti uchun) ===== */
@media(max-width:560px){
  /* Login oynasi mobilda — art (chap panel) yashiriladi, form to'liq ekran */
  .login{flex-direction:column}
  .login .art{display:none}
  .login .form{width:100%;min-height:100vh;padding:24px 20px}
  .login .form .wel{font-size:24px}
  .roles{grid-template-columns:1fr 1fr;gap:10px}
  .rolegrid{gap:10px}
  .rolecard{padding:14px}
  .rolecard .e{font-size:26px}
  .frow{flex-direction:column;gap:0}
  /* Topbar va sidebar mobil moslash */
  .topbar{padding:12px 14px;gap:10px}
  .topbar h2{font-size:16px}
  .topactions{gap:6px}
  .actions{gap:6px}
  /* Dashboard kartochkalari */
  .dash-top,.two,.prof-grid,.stats{grid-template-columns:1fr!important}
  .quick-acts{grid-template-columns:1fr 1fr;gap:10px}
  .qact{padding:14px}
  /* Modullar va darslar */
  .modgrid,.mods{grid-template-columns:1fr!important}
  .modcard{padding:18px}
  /* Mediakeys */
  .mk-grid,.keylib{grid-template-columns:1fr!important}
  /* Slayd taqdimot — mobilda balandlik to'g'irlash */
  .slide-stage{min-height:auto;padding:22px 18px}
  .slide-stage.title{min-height:380px}
  .slide-stage h3{font-size:19px;margin-bottom:10px}
  .slide-stage .slid{font-size:13.5px;margin-bottom:12px;padding-left:10px}
  .slide-stage li{font-size:13px;padding-left:22px;line-height:1.5}
  .slide-stage .sex{padding:11px 13px;margin-top:4px}
  .slide-stage .sex p{font-size:12.5px}
  .slide-nav{flex-direction:column;gap:10px}
  .slide-nav .btn{width:100%}
  .slide-dots{order:-1}
  /* Test variantlari */
  .vq-opt{padding:13px;font-size:13.5px}
  /* Jadval mobil scroll */
  table{display:block;overflow-x:auto;white-space:nowrap}
  /* Diagnostika va statistika */
  .stat-card{padding:14px}
  .stat-card .num{font-size:24px}
  /* Tugmalar */
  .btn{padding:11px 16px;font-size:13.5px}
  /* Auth form */
  .form{padding:20px}
  .authtabs{margin-bottom:14px}
  .authtab{font-size:13px;padding:10px}
}
/* Juda kichik ekranlar (320–380px) */
@media(max-width:380px){
  .roles,.rolegrid{grid-template-columns:1fr}
  .quick-acts{grid-template-columns:1fr}
  .topbar h2{font-size:14px}
  .ucard .nm{display:none}
}
/* Landscape mobil (telefon ko'ndalang) */
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
  .login .form{padding:18px}
  .login .form .wel{font-size:22px;margin-bottom:4px}
  .login .form .welsub{margin-bottom:14px}
}
/* Touch hover'ni sezgir qilish */
@media(hover:none){
  .modcard:hover,.qact:hover,.rolecard:hover,.kcard:hover{transform:none}
}

/* ===== O'QISH / INTERAKTIV / AMALIY / TEST BLOKLARI ===== */
/* O'QISH */
.read-block{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,32px);box-shadow:0 6px 20px var(--shadow);margin-bottom:18px}
.read-lead{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.7vw,17.5px);color:var(--ink);line-height:1.55;padding:14px 18px;border-left:4px solid var(--teal);background:var(--teal-l);border-radius:0 10px 10px 0;margin-bottom:22px}
.read-sec{display:flex;gap:16px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px dashed var(--line)}
.read-sec:last-of-type{border:none;padding-bottom:0;margin-bottom:14px}
.read-num{flex:none;width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:16px}
.read-sec h4{font-family:var(--serif);font-size:18px;font-weight:800;margin-bottom:6px;color:var(--ink)}
.read-sec p{font-size:14.5px;line-height:1.62;color:var(--ink-soft);margin:0}
.read-sec p b{color:var(--ink);background:var(--bg);padding:1px 6px;border-radius:5px}
.read-note{background:var(--bg);border:1px dashed var(--line-2);border-radius:11px;padding:13px 16px;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.read-note b{color:var(--teal)}

/* INTERAKTIV */
.int-block{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,32px);box-shadow:0 6px 20px var(--shadow);margin-bottom:18px}
.int-intro{font-size:14.5px;color:var(--ink-soft);padding:12px 16px;background:#fdf3e0;border-left:4px solid var(--gold);border-radius:0 10px 10px 0;margin-bottom:22px;line-height:1.55}
.int-q{margin-bottom:24px;padding-bottom:20px;border-bottom:1px dashed var(--line)}
.int-q:last-child{border:none;padding-bottom:0;margin-bottom:0}
.int-qh{font-weight:800;font-size:15.5px;margin-bottom:12px;color:var(--ink);line-height:1.4}
.int-opt{display:block;width:100%;text-align:left;padding:13px 16px;margin-bottom:8px;background:var(--bg);border:1.5px solid var(--line);border-radius:11px;cursor:pointer;font-size:14.5px;color:var(--ink);transition:.15s;font-family:inherit}
.int-opt:hover:not(.correct):not(.wrong){border-color:var(--teal);background:var(--teal-l)}
.int-opt.correct{background:#e7f4ec;border-color:#1a8a5a;color:#0d5e3a;font-weight:600}
.int-opt.correct:before{content:"✓ ";font-weight:900}
.int-opt.wrong{background:#fbe5da;border-color:var(--rust);color:#7a2d10}
.int-opt.wrong:before{content:"✗ ";font-weight:900}
.int-exp{margin-top:12px;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.55}
.int-exp.ok{background:#e7f4ec;border:1px solid #1a8a5a;color:#0d5e3a}
.int-exp.no{background:#fbe5da;border:1px solid var(--rust);color:#7a2d10}
.int-exp b{display:block;margin-bottom:4px;font-size:14px}
.int-exp p{margin:0;color:var(--ink-soft)}
.int-exp.ok p{color:#0d5e3a}
.int-exp.no p{color:#7a2d10}

/* AMALIY */
.prac-block{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,32px);box-shadow:0 6px 20px var(--shadow);margin-bottom:18px}
.prac-goal{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,#2C5E8F 0%,#1e4163 100%);color:#fff;border-radius:14px;padding:18px 22px;margin-bottom:22px}
.prac-goal span{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.8;flex:none;padding-top:3px}
.prac-goal p{margin:0;color:#fff;font-size:15px;line-height:1.55;font-weight:500}
.prac-steps{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.prac-step{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:12px;border-left:4px solid #2C5E8F}
.prac-num{flex:none;width:32px;height:32px;border-radius:50%;background:#2C5E8F;color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:14px;margin-top:2px}
.prac-body{flex:1;min-width:0}
.prac-body h5{font-family:var(--serif);font-size:15.5px;font-weight:800;margin:0 0 5px;color:var(--ink)}
.prac-body p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:0}
.prac-body p b{color:var(--ink);background:var(--panel);padding:1px 5px;border-radius:4px}
.prac-body p code{font-family:Menlo,Consolas,monospace;background:var(--panel);border:1px solid var(--line);padding:1px 6px;border-radius:5px;font-size:12.5px;color:var(--rust)}
.prac-deliver{padding:14px 18px;background:#fffaf0;border:1px dashed var(--gold);border-radius:11px;font-size:13.5px;color:var(--ink-soft);line-height:1.55}

/* TEST blok: VQUIZ stillaridan foydalanadi — qo'shimcha hech narsa kerak emas */

/* MOBIL MOSLASH */
@media(max-width:560px){
  .read-sec{flex-direction:column;gap:8px}
  .read-num{width:32px;height:32px;font-size:14px}
  .read-lead{font-size:14px;padding:11px 14px}
  .int-block,.read-block,.prac-block{padding:18px}
  .int-opt{padding:11px 13px;font-size:13.5px}
  .int-qh{font-size:14.5px}
  .prac-step{flex-direction:column;gap:8px;padding:12px}
  .prac-num{width:28px;height:28px;font-size:13px}
  .prac-goal{flex-direction:column;gap:6px;padding:14px 16px}
}

/* ===== PORTFOLIO ===== */
.pf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:22px}
.pf-stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 14px;text-align:center;box-shadow:0 2px 10px var(--shadow);transition:.18s}
.pf-stat:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow)}
.pf-stat-e{font-size:24px;margin-bottom:4px}
.pf-stat-n{font-family:var(--serif);font-size:24px;font-weight:900;color:var(--teal);line-height:1}
.pf-stat-l{font-size:11.5px;color:var(--mute);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:4px}

.pf-actions{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.pf-actions .btn{padding:11px 18px}

.pf-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:30px}
.pf-bdg{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;position:relative;transition:.18s}
.pf-bdg.on{border-color:var(--gold);background:linear-gradient(135deg,#fffaf0,var(--panel))}
.pf-bdg.on:hover{transform:translateY(-2px);box-shadow:0 8px 22px var(--shadow)}
.pf-bdg.off{opacity:.6}
.pf-bdg-e{font-size:28px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--bg);flex:none}
.pf-bdg.on .pf-bdg-e{background:linear-gradient(135deg,var(--gold),#a87a25);box-shadow:0 4px 12px rgba(204,150,47,.3)}
.pf-bdg.off .pf-bdg-e{filter:grayscale(.8);background:var(--line)}
.pf-bdg-bd{flex:1;min-width:0}
.pf-bdg-t{font-family:var(--serif);font-weight:800;font-size:14.5px;color:var(--ink);line-height:1.2}
.pf-bdg-d{font-size:11.5px;color:var(--mute);margin-top:3px;line-height:1.4}
.pf-bdg-tick{position:absolute;top:10px;right:12px;font-size:14px;color:#1a8a5a;font-weight:900}
.pf-bdg-lock{position:absolute;top:10px;right:12px;font-size:13px;opacity:.5}

.pf-filter{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.pf-fchip{background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.15s}
.pf-fchip:hover{border-color:var(--teal);color:var(--teal)}
.pf-fchip.on{background:var(--teal);color:#fff;border-color:var(--teal)}

.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.pf-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 4px 14px var(--shadow);transition:.2s;display:flex;flex-direction:column}
.pf-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px var(--shadow)}
.pf-cover{aspect-ratio:16/9;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
.pf-cover span{font-size:52px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.pf-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(255,255,255,.15),transparent 60%)}
.pf-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pf-meta-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pf-comp{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px}
.pf-date{font-size:11.5px;color:var(--mute);font-weight:600}
.pf-body h5{font-family:var(--serif);font-size:16px;font-weight:800;line-height:1.25;color:var(--ink);margin:0}
.pf-body p{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0;flex:1}
.pf-tags{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0}
.pf-tag{font-size:11px;color:var(--teal);background:var(--teal-l);padding:2px 8px;border-radius:5px;font-weight:600}
.pf-card-foot{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px dashed var(--line);margin-top:auto}
.pf-st{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.02em}
.pf-st.st-done{background:#e7f4ec;color:#1a8a5a}
.pf-st.st-prog{background:#fbeed1;color:#8a6a14}
.pf-st.st-plan{background:var(--bg);color:var(--mute);border:1px dashed var(--line-2)}
.pf-card-acts{display:flex;gap:4px}
.pf-icon{width:28px;height:28px;border:none;background:var(--bg);border-radius:7px;cursor:pointer;font-size:13px;color:var(--ink-soft);transition:.15s;display:grid;place-items:center}
.pf-icon:hover{background:var(--teal-l);color:var(--teal)}
.pf-icon-d:hover{background:#fbe5da;color:var(--rust)}

.pf-add{background:var(--panel);border:2px dashed var(--line-2);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 20px;cursor:pointer;transition:.18s;color:var(--mute);min-height:230px}
.pf-add:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-l)}
.pf-add-icon{font-size:38px;line-height:1;margin-bottom:10px;font-weight:300}
.pf-add-t{font-family:var(--serif);font-size:17px;font-weight:800;margin-bottom:4px}
.pf-add-d{font-size:12.5px;opacity:.8}

/* MODAL */
.pf-modal{position:fixed;inset:0;background:rgba(22,48,46,.55);backdrop-filter:blur(4px);z-index:1000;display:grid;place-items:center;padding:20px;animation:pfFade .2s ease-out}
@keyframes pfFade{from{opacity:0}to{opacity:1}}
.pf-modal-card{background:var(--panel);border-radius:18px;max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:pfSlide .25s ease-out}
@keyframes pfSlide{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.pf-modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.pf-modal-head h3{font-family:var(--serif);font-size:19px;margin:0;color:var(--ink)}
.pf-modal-x{background:transparent;border:none;width:32px;height:32px;font-size:18px;color:var(--mute);cursor:pointer;border-radius:8px;transition:.15s}
.pf-modal-x:hover{background:var(--bg);color:var(--ink)}
.pf-modal-body{padding:20px 22px}
.pf-modal-body textarea{resize:vertical;min-height:70px;font-family:inherit}
.pf-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--line);background:var(--bg)}

@media(max-width:560px){
  .pf-stats{grid-template-columns:repeat(2,1fr)}
  .pf-badges{grid-template-columns:1fr}
  .pf-grid{grid-template-columns:1fr}
  .pf-actions .btn{flex:1;min-width:0}
  .pf-modal-card{max-height:95vh}
}

/* ===== ADMIN-ONLY NOTE (teacher role login) ===== */
.admin-note{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#fffaf0,#fdf3e0);border:1px solid var(--gold);border-left:4px solid var(--gold);border-radius:12px;padding:14px 16px;margin-bottom:18px;box-shadow:0 4px 14px rgba(204,150,47,.15)}
.admin-note-ic{font-size:24px;line-height:1;flex:none;width:38px;height:38px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(204,150,47,.3)}
.admin-note-bd{flex:1;min-width:0}
.admin-note-bd b{display:block;font-family:var(--serif);font-size:14.5px;color:var(--ink);font-weight:800;margin-bottom:3px}
.admin-note-bd p{font-size:12.5px;color:var(--ink-soft);margin:0;line-height:1.5}

/* ===== ADMIN PANELI ===== */
.admin-badge{display:inline-block;font-size:9.5px;font-weight:900;letter-spacing:.1em;background:linear-gradient(135deg,var(--gold),#a87a25);color:#fff;padding:1px 7px;border-radius:5px;vertical-align:middle;box-shadow:0 1px 3px rgba(204,150,47,.4)}
.adm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.adm-stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 14px;text-align:center;box-shadow:0 2px 10px var(--shadow)}
.adm-stat-e{font-size:22px;margin-bottom:4px}
.adm-stat-n{font-family:var(--serif);font-size:24px;font-weight:900;color:var(--teal);line-height:1}
.adm-stat-l{font-size:11.5px;color:var(--mute);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:4px}
.adm-actions{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.adm-tabs{display:flex;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:4px;margin-bottom:18px}
.adm-tab{flex:1;padding:10px;background:transparent;border:none;border-radius:8px;font-weight:700;font-size:13.5px;color:var(--mute);cursor:pointer;transition:.15s}
.adm-tab.on{background:var(--panel);color:var(--teal);box-shadow:0 1px 4px var(--shadow)}
.adm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.adm-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 2px 10px var(--shadow);transition:.18s}
.adm-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow)}
.adm-card.is-admin{border-color:var(--gold);background:linear-gradient(135deg,#fffaf0,var(--panel))}
.adm-card-h{display:flex;gap:12px;margin-bottom:12px}
.adm-av{flex:none;width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.adm-card.is-admin .adm-av{background:linear-gradient(135deg,var(--gold),#a87a25)}
.adm-info{flex:1;min-width:0}
.adm-name{font-family:var(--serif);font-weight:800;font-size:15px;color:var(--ink);margin-bottom:2px;line-height:1.2}
.adm-meta{font-size:12px;color:var(--mute);line-height:1.4}
.adm-acts{display:flex;gap:6px;padding-top:10px;border-top:1px dashed var(--line)}
.adm-btn{flex:1;padding:8px 10px;background:var(--bg);border:1px solid var(--line);border-radius:8px;font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.15s}
.adm-btn:hover:not(:disabled){background:var(--teal-l);color:var(--teal);border-color:var(--teal)}
.adm-btn:disabled{opacity:.5;cursor:not-allowed}
.adm-btn-d:hover{background:#fbe5da;color:var(--rust);border-color:var(--rust)}

/* ===== LOGIN LOG ===== */
.ll-table{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px var(--shadow)}
.ll-row{display:grid;grid-template-columns:115px 140px 1fr 110px 75px 1.2fr;gap:12px;padding:11px 16px;font-size:13px;border-bottom:1px solid var(--line);align-items:center}
.ll-row:last-child{border-bottom:none}
.ll-row.ll-head{background:var(--bg);font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);padding:11px 16px}
.ll-row.ok{background:linear-gradient(90deg,rgba(26,138,90,.04) 0%,transparent 30%)}
.ll-row.fail{background:linear-gradient(90deg,rgba(192,83,43,.06) 0%,transparent 30%)}
.ll-time{font-variant-numeric:tabular-nums;font-size:12px;color:var(--mute);font-weight:600}
.ll-phone{font-family:Menlo,Consolas,monospace;font-size:12.5px;color:var(--ink)}
.ll-name{font-size:13px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ll-role{font-size:12.5px;color:var(--ink-soft)}
.ll-ok{display:inline-block;background:#e7f4ec;color:#1a8a5a;padding:2px 9px;border-radius:5px;font-weight:700;font-size:11px}
.ll-fail{display:inline-block;background:#fbe5da;color:var(--rust);padding:2px 9px;border-radius:5px;font-weight:700;font-size:11px}
.ll-reason{font-size:12.5px;color:var(--ink-soft);line-height:1.4}

@media(max-width:760px){
  .ll-row{grid-template-columns:1fr;gap:4px;padding:12px 14px}
  .ll-row.ll-head{display:none}
  .ll-row span:before{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-right:8px}
  .ll-row .ll-time:before{content:"⏱"}
  .ll-row .ll-phone:before{content:"📞"}
  .ll-row .ll-name:before{content:"👤 F.I.Sh.:"}
  .ll-row .ll-role:before{content:"🎓"}
  .ll-row .ll-reason:before{content:"📝 Sabab:"}
}
@media(max-width:560px){
  .adm-stats{grid-template-columns:repeat(2,1fr)}
  .adm-grid{grid-template-columns:1fr}
  .adm-acts{flex-wrap:wrap}
}

/* ===== ADMIN: kredensiyallar va parol ko'rsatish ===== */
.pwd-wrap{position:relative;margin-bottom:6px}
.pwd-wrap .finput{padding-right:46px;font-family:Menlo,Consolas,monospace;letter-spacing:.04em}
.pwd-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;background:transparent;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:.15s;color:var(--mute)}
.pwd-toggle:hover{background:var(--bg);color:var(--ink)}
.pwd-hint{font-size:12px;color:var(--ink-soft);padding:8px 10px;background:#fff8e8;border:1px dashed var(--gold);border-radius:8px;margin-bottom:14px;line-height:1.5}
.link-btn{background:none;border:none;color:var(--teal);font-weight:700;cursor:pointer;font-size:12.5px;padding:0;text-decoration:underline;font-family:inherit}
.link-btn:hover{color:var(--teal-d)}

.creds-card{background:linear-gradient(135deg,#fffaf0,var(--panel));border:2px solid var(--gold);border-radius:14px;padding:18px;margin-bottom:14px}
.creds-name{font-family:var(--serif);font-weight:900;font-size:18px;color:var(--ink);margin-bottom:3px;display:flex;align-items:center;flex-wrap:wrap}
.creds-meta{font-size:12.5px;color:var(--mute);margin-bottom:14px}
.creds-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.creds-label{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);flex:none;width:100px}
.creds-value{flex:1;font-size:15px;font-weight:700;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;word-break:break-all}
.creds-copy{flex:none;width:34px;height:34px;background:var(--bg);border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:.15s;font-size:14px}
.creds-copy:hover{background:var(--teal-l);border-color:var(--teal)}
.creds-warn{background:#fff8e8;border:1px dashed var(--gold);border-radius:10px;padding:11px 14px;font-size:12.5px;color:var(--ink-soft);line-height:1.55}
.creds-warn b{color:var(--rust)}

@media(max-width:560px){
  .creds-row{flex-wrap:wrap}
  .creds-label{width:100%;margin-bottom:2px}
  .creds-value{flex:1;min-width:0;font-size:14px}
}

/* ===== Storage notice in admin panel ===== */
.storage-note{background:#e2ecf6;border:1px solid #2C5E8F;border-left:4px solid #2C5E8F;border-radius:10px;padding:11px 14px;font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:18px}
.storage-note b{color:#2C5E8F}

/* ===== localStorage blocked banner ===== */
#storage-banner{position:fixed;bottom:14px;left:14px;right:14px;max-width:600px;margin:0 auto;background:#fbe5da;border:2px solid var(--rust);border-radius:12px;padding:13px 18px;color:var(--ink);font-size:13px;line-height:1.5;z-index:99999;box-shadow:0 12px 30px rgba(0,0,0,.25)}
#storage-banner b{color:var(--rust)}

/* ===== Bulk assign checkbox list ===== */
.bulk-list{max-height:340px;overflow-y:auto;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:8px 12px;margin-bottom:6px}
.bulk-list::-webkit-scrollbar{width:8px}
.bulk-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px}
.bulk-group-h{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:6px 4px 4px;border-bottom:1px dashed var(--line);margin-bottom:4px}
.bulk-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:7px;cursor:pointer;transition:.12s}
.bulk-row:hover{background:var(--panel)}
.bulk-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--teal);cursor:pointer;flex:none}
.bulk-row:has(input:checked){background:var(--teal-l)}
.bulk-lbl{font-size:13.5px;color:var(--ink);line-height:1.4}
.bulk-lbl b{color:var(--teal);font-weight:800;margin-right:4px}
.bulk-cnt{font-size:11px;color:var(--mute);font-weight:600;background:var(--panel);padding:1px 7px;border-radius:5px;margin-left:6px}
.bulk-mini{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 10px;font-size:11.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.15s}
.bulk-mini:hover{border-color:var(--teal);color:var(--teal)}

/* ===== REAL talaba belgisi ===== */
.real-badge{display:inline-block;font-size:9.5px;font-weight:900;letter-spacing:.1em;background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;padding:2px 7px;border-radius:5px;vertical-align:middle;box-shadow:0 1px 3px rgba(14,94,84,.3)}

/* ===== TALABA: O'qituvchidan vazifalar sahifasi ===== */
.task-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.task-stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 14px;text-align:center;box-shadow:0 2px 10px var(--shadow);transition:.18s}
.task-stat:hover{transform:translateY(-2px);box-shadow:0 8px 22px var(--shadow)}
.task-stat-e{font-size:24px;margin-bottom:5px}
.task-stat-n{font-family:var(--serif);font-size:28px;font-weight:900;color:var(--ink);line-height:1}
.task-stat-l{font-size:11.5px;color:var(--mute);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:5px}

.task-section{margin-bottom:26px}
.task-section-h{font-family:var(--serif);font-size:17px;font-weight:800;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid currentColor;display:inline-block}

.task-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px}
.task-card{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 2px 10px var(--shadow);transition:.18s}
.task-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--shadow)}
.task-card.overdue{border-left:4px solid var(--rust);background:linear-gradient(90deg,rgba(192,83,43,.04) 0%,var(--panel) 30%)}
.task-card.done{opacity:.85;border-left:4px solid #1a8a5a}
.task-emo{flex:none;width:52px;height:52px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:24px;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.task-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.task-meta{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--rust)}
.task-body h4{font-family:var(--serif);font-size:16px;font-weight:800;line-height:1.25;margin:0;color:var(--ink)}
.task-card.done .task-body h4{text-decoration:line-through;color:var(--mute)}
.task-desc{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:0}
.task-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.task-due{font-size:12px;color:var(--ink-soft);font-weight:500}
.task-due b{color:var(--ink);font-weight:700}
.task-st{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px}
.task-btn{margin-left:auto;padding:7px 14px;font-size:12.5px}

@media(max-width:560px){
  .task-stats{grid-template-columns:repeat(2,1fr)}
  .task-grid{grid-template-columns:1fr}
  .task-card{flex-direction:column;gap:10px}
  .task-emo{width:44px;height:44px;font-size:20px}
  .task-foot{flex-direction:column;align-items:stretch}
  .task-btn{margin-left:0;width:100%}
}

/* ===== O'qituvchi paneli: tayinlangan vazifa kartochkalari va olib tashlash ===== */
.asg-list{display:flex;flex-direction:column;gap:10px}
.asg-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:11px;transition:.15s}
.asg-item:hover{border-color:var(--line-2);background:var(--panel)}
.asg-item .he{flex:none;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:20px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.asg-info{flex:1;min-width:0}
.asg-info h5{font-family:var(--serif);font-size:15px;font-weight:800;margin:0 0 3px;color:var(--ink);line-height:1.25}
.asg-meta{font-size:11.5px;color:var(--mute);font-weight:600}
.asg-status{flex:none;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:20px;white-space:nowrap}

.btn-remove{flex:none;background:#fff;border:1px solid #f0d2c5;color:var(--rust);padding:7px 12px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:4px;font-family:inherit}
.btn-remove:hover{background:var(--rust);color:#fff;border-color:var(--rust);box-shadow:0 3px 8px rgba(192,83,43,.25);transform:translateY(-1px)}
.btn-remove:active{transform:translateY(0)}

.btn-mini-danger{background:#fff;border:1.5px solid var(--rust);color:var(--rust);padding:7px 14px;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit}
.btn-mini-danger:hover{background:var(--rust);color:#fff;box-shadow:0 4px 12px rgba(192,83,43,.3)}

@media(max-width:720px){
  .asg-item{flex-wrap:wrap;gap:8px}
  .asg-status{order:3}
  .btn-remove{order:4;margin-left:auto}
}