/* ============================================================
   ARTI 10 — app UI (auth, member LMS, admin). Uses style.css tokens.
   ============================================================ */
body.app{background:var(--soft);color:var(--text)}
.app-main{max-width:1180px;margin-inline:auto;padding:clamp(22px,3vw,40px) var(--pad-x) 80px}
.muted{color:var(--muted)}
.nojs-warn{display:none}
.no-js .nojs-warn{display:block;max-width:560px;margin:80px auto;padding:24px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px}

/* form fields shared */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:.86rem;font-weight:600;color:var(--ink)}
.inp{width:100%;font-family:inherit;font-size:.98rem;color:var(--ink);background:#fff;border:1.5px solid var(--line-2);border-radius:11px;padding:.82em 1em;transition:border-color .25s,box-shadow .25s}
.inp::placeholder{color:var(--soft-ink)}
.inp:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 4px rgba(200,155,44,.14)}
textarea.inp{min-height:96px;resize:vertical}
select.inp{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2356657a' stroke-width='2'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.field .hint{font-size:.78rem;color:var(--soft-ink)}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.field.row2{grid-template-columns:1fr}}
.formbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.alert{padding:12px 15px;border-radius:11px;font-size:.9rem;font-weight:500;margin-bottom:16px;display:none}
.alert.show{display:block}
.alert.err{background:#fdecef;color:#b0344f;border:1px solid #f4c4cf}
.alert.ok{background:#e8f6ee;color:#1c7a4f;border:1px solid #bfe6cf}

/* ============================================================
   AUTH pages
   ============================================================ */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:880px){.auth-wrap{grid-template-columns:1fr}}
.auth-aside{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--navy-800),var(--navy-950));color:#fff;padding:clamp(34px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between}
@media(max-width:880px){.auth-aside{display:none}}
.auth-aside::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 360px at 80% 0,rgba(200,155,44,.2),transparent 60%)}
.auth-aside .aa-top,.auth-aside .aa-mid,.auth-aside .aa-bot{position:relative;z-index:1}
.auth-aside .ashell-brand{color:#fff}
.auth-aside .aa-mid h2{color:#fff;font-size:clamp(1.8rem,2.8vw,2.6rem);margin:0 0 .4em;letter-spacing:-.02em}
.auth-aside .aa-mid p{color:var(--on-navy-dim);font-size:1.05rem;max-width:38ch}
.auth-aside .aa-list{margin-top:26px;display:grid;gap:12px}
.auth-aside .aa-list li{display:flex;align-items:center;gap:11px;color:var(--on-navy);font-size:.96rem}
.auth-aside .aa-list .ck{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(200,155,44,.18);flex-shrink:0}
.auth-aside .aa-list .ck svg{width:15px;height:15px;color:var(--gold-300)}
.auth-aside .aa-bot{color:var(--on-navy-dim);font-size:.84rem}
.auth-main{display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,56px) var(--pad-x);background:#fff}
.auth-card{width:100%;max-width:420px}
.auth-card .ac-brand{display:none}
@media(max-width:880px){.auth-card .ac-brand{display:flex;align-items:center;gap:10px;margin-bottom:24px}.auth-card .ac-brand img{width:40px;height:40px;border-radius:50%}.auth-card .ac-brand b{font-family:"Plus Jakarta Sans";font-weight:800;font-size:1.3rem;color:var(--ink)}.auth-card .ac-brand b i{font-style:normal;color:var(--gold-600)}}
.auth-card h1{font-size:clamp(1.7rem,3vw,2.1rem);margin-bottom:.3em}
.auth-card .sub{color:var(--muted);margin-bottom:26px}
.auth-card .btn{width:100%;margin-top:6px}
.auth-alt{margin-top:22px;text-align:center;color:var(--muted);font-size:.92rem}
.auth-alt a{color:var(--gold-700);font-weight:700}
.auth-foot{margin-top:18px;display:flex;justify-content:space-between;align-items:center;font-size:.86rem}
.auth-foot a{color:var(--muted)}.auth-foot a:hover{color:var(--ink)}
.demo-hint{margin-top:20px;background:var(--soft);border:1px dashed var(--line-2);border-radius:11px;padding:12px 14px;font-size:.82rem;color:var(--muted)}
.demo-hint b{color:var(--ink)}
.pw-wrap{position:relative}
.pw-wrap .toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;color:var(--soft-ink);padding:4px;font-size:.8rem;font-weight:600}

/* ============================================================
   MEMBER shell (top bar)
   ============================================================ */
.ashell-brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.ashell-brand img{width:36px;height:36px;border-radius:50%}
.ashell-brand b{font-family:"Plus Jakarta Sans";font-weight:800;font-size:1.2rem;color:var(--ink);letter-spacing:-.02em}
.ashell-brand b i{font-style:normal;color:var(--gold-600)}
.ashell-top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.ashell-top-in{max-width:1180px;margin-inline:auto;padding:0 var(--pad-x);height:66px;display:flex;align-items:center;gap:18px}
.ashell-nav{display:flex;align-items:center;gap:4px;margin-left:14px}
.ashell-nav a{display:inline-flex;align-items:center;gap:8px;padding:.55em .85em;border-radius:10px;font-size:.92rem;font-weight:600;color:var(--muted);transition:color .2s,background .2s}
.ashell-nav a svg{width:18px;height:18px}
.ashell-nav a:hover{color:var(--ink);background:var(--soft)}
.ashell-nav a.on{color:var(--gold-700);background:var(--gold-100)}
@media(max-width:620px){.ashell-nav a span{display:none}.ashell-nav{margin-left:4px}}
.umenu{position:relative;margin-left:auto}
.uavatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--navy-700),var(--navy-900));color:#fff;font-weight:800;font-size:.92rem;font-family:"Plus Jakarta Sans";box-shadow:var(--sh-xs)}
.uavatar:hover{box-shadow:0 0 0 3px var(--gold-100)}
.udrop{position:absolute;top:calc(100% + 10px);right:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s,transform .22s,visibility .22s;z-index:50}
.umenu.open .udrop{opacity:1;visibility:visible;transform:none}
.udrop .uhead{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.udrop .uhead b{display:block;font-size:.95rem;color:var(--ink)}
.udrop .uhead small{color:var(--soft-ink);font-size:.8rem}
.udrop a,.udrop button{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-size:.9rem;font-weight:600;color:var(--text);text-align:left;transition:background .2s}
.udrop a svg,.udrop button svg{width:17px;height:17px;color:var(--muted)}
.udrop a:hover,.udrop button:hover{background:var(--soft)}
.udrop .ulogout{color:#c0476a;margin-top:4px;border-top:1px solid var(--line)}
.udrop .ulogout svg{color:#c0476a}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-hero{background:linear-gradient(150deg,var(--navy-800),var(--navy-950));color:#fff;border-radius:var(--r-lg);padding:clamp(24px,3.5vw,40px);position:relative;overflow:hidden;margin-bottom:30px}
.dash-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 92% 0,rgba(200,155,44,.2),transparent 60%)}
.dash-hero>*{position:relative}
.dash-hero .greet{font-family:"Plus Jakarta Sans";font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;margin-bottom:.3em}
.dash-hero p{color:var(--on-navy-dim);max-width:54ch}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
@media(max-width:680px){.dash-stats{grid-template-columns:1fr 1fr}}
.dash-stats .ds{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:16px}
.dash-stats .ds b{display:block;font-family:"Plus Jakarta Sans";font-weight:800;font-size:1.6rem;color:#fff}
.dash-stats .ds span{font-size:.8rem;color:var(--on-navy-dim)}
.sec-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:34px 0 18px}
.sec-title h2{font-size:clamp(1.3rem,2.2vw,1.6rem)}
.sec-title a{font-size:.9rem;font-weight:700;color:var(--gold-700)}

.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px)}
@media(max-width:880px){.ccards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ccards{grid-template-columns:1fr}}
.ccard{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-xs);display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ccard:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.ccard .cc-cover{aspect-ratio:16/9;position:relative;display:grid;place-items:center;overflow:hidden}
.ccard .cc-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 80% 0,rgba(255,255,255,.18),transparent 60%)}
.ccard .cc-cover svg{width:46px;height:46px;color:rgba(255,255,255,.92);position:relative;z-index:1}
.ccard .cc-cover .cc-cat{position:absolute;top:10px;left:10px;z-index:2;font-size:.68rem;font-weight:700;color:#fff;background:rgba(0,0,0,.28);padding:.32em .6em;border-radius:99px;letter-spacing:.02em}
.ccard .cc-body{padding:18px;display:flex;flex-direction:column;flex-grow:1}
.ccard .cc-body h3{font-size:1.1rem;margin-bottom:.35em;letter-spacing:-.02em}
.ccard .cc-body p{font-size:.86rem;color:var(--muted);line-height:1.55;margin-bottom:14px;flex-grow:1}
.ccard .cc-meta{display:flex;gap:14px;font-size:.78rem;color:var(--soft-ink);margin-bottom:14px}
.ccard .cc-meta span{display:inline-flex;align-items:center;gap:5px}
.ccard .cc-meta svg{width:14px;height:14px}
.cc-prog{height:7px;border-radius:99px;background:var(--soft-2);overflow:hidden;margin-bottom:8px}
.cc-prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-400),var(--gold-600))}
.cc-prog-l{display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted);margin-bottom:14px}
.ccard .cc-btn{margin-top:auto}
.ccard .cc-btn .btn{width:100%}
.locked{opacity:.92}
.empty{text-align:center;padding:50px 20px;background:#fff;border:1px dashed var(--line-2);border-radius:var(--r-md);color:var(--muted)}
.empty svg{width:40px;height:40px;color:var(--soft-ink);margin-bottom:12px}

/* continue watching */
.cont{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px;display:flex;gap:16px;align-items:center;box-shadow:var(--sh-xs)}
@media(max-width:560px){.cont{flex-direction:column;align-items:stretch}}
.cont .ct-thumb{width:150px;aspect-ratio:16/9;border-radius:11px;flex-shrink:0;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
@media(max-width:560px){.cont .ct-thumb{width:100%}}
.cont .ct-thumb .pl{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center}
.cont .ct-thumb .pl svg{width:18px;height:18px;color:var(--navy-900);margin-left:2px}
.cont .ct-info{flex-grow:1;min-width:0}
.cont .ct-info small{color:var(--gold-700);font-weight:700;font-size:.78rem}
.cont .ct-info h3{font-size:1.1rem;margin:3px 0 6px}
.cont .ct-info .cc-prog{max-width:340px}

/* ============================================================
   COURSE DETAIL
   ============================================================ */
.course-head{background:linear-gradient(150deg,var(--navy-800),var(--navy-950));color:#fff;border-radius:var(--r-lg);padding:clamp(26px,4vw,44px);position:relative;overflow:hidden;margin-bottom:28px}
.course-head::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 320px at 90% 0,rgba(200,155,44,.18),transparent 60%)}
.course-head>*{position:relative}
.course-head .crumbs{font-size:.84rem;color:var(--on-navy-dim);margin-bottom:14px}
.course-head .crumbs a:hover{color:#fff}
.course-head h1{color:#fff;font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:.35em;max-width:20ch}
.course-head p{color:var(--on-navy-dim);max-width:60ch;margin-bottom:18px}
.course-head .ch-meta{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:.88rem;color:var(--on-navy);margin-bottom:22px}
.course-head .ch-meta span{display:inline-flex;align-items:center;gap:7px}
.course-head .ch-meta svg{width:16px;height:16px;color:var(--gold-300)}
.course-grid{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
@media(max-width:880px){.course-grid{grid-template-columns:1fr}}
.llist{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-xs)}
.llist .ll-head{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.lrow{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);transition:background .2s;text-align:left;width:100%}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:var(--soft)}
.lrow .ln{width:30px;height:30px;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-size:.82rem;font-weight:700;color:var(--muted);flex-shrink:0}
.lrow.done .ln{background:var(--gold-100);color:var(--gold-700)}
.lrow.done .ln svg{width:15px;height:15px}
.lrow .li{flex-grow:1;min-width:0}
.lrow .li b{display:block;font-size:.95rem;color:var(--ink);font-weight:600}
.lrow .li small{font-size:.78rem;color:var(--soft-ink);display:inline-flex;align-items:center;gap:5px}
.lrow .li small svg{width:13px;height:13px}
.lrow .lp{flex-shrink:0;color:var(--soft-ink)}
.lrow .lp svg{width:20px;height:20px}
.lrow .badge-free{font-size:.66rem;font-weight:800;color:#1c7a4f;background:#e8f6ee;padding:.3em .55em;border-radius:99px}
.lrow .badge-lock svg{width:16px;height:16px;color:var(--soft-ink)}
.cside{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px;box-shadow:var(--sh-xs);position:sticky;top:84px}
.cside .cs-prog{margin-bottom:16px}
.cside .btn{width:100%;margin-bottom:10px}
.cside ul{margin-top:14px;display:grid;gap:10px}
.cside li{display:flex;gap:10px;font-size:.88rem;color:var(--muted)}
.cside li svg{width:17px;height:17px;color:var(--gold-600);flex-shrink:0;margin-top:2px}

/* ============================================================
   VIDEO PLAYER
   ============================================================ */
body.player-page{background:#0a1326}
.player-top{position:sticky;top:0;z-index:40;background:rgba(10,19,38,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.player-top-in{max-width:1440px;margin-inline:auto;padding:0 clamp(14px,3vw,28px);height:60px;display:flex;align-items:center;gap:14px;color:#fff}
.player-top a.pt-back{display:inline-flex;align-items:center;gap:8px;color:var(--on-navy-dim);font-size:.9rem;font-weight:600}
.player-top a.pt-back:hover{color:#fff}.player-top a.pt-back svg{width:18px;height:18px}
.player-top .pt-title{font-weight:700;font-size:.96rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-top .pt-title small{display:block;color:var(--on-navy-dim);font-weight:400;font-size:.78rem}
.player-top .umenu{margin-left:auto}
.player-grid{max-width:1440px;margin-inline:auto;padding:clamp(14px,2vw,24px) clamp(14px,3vw,28px);display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
@media(max-width:980px){.player-grid{grid-template-columns:1fr}}
.player-video{background:#000;border-radius:16px;overflow:hidden;aspect-ratio:16/9;box-shadow:var(--sh-lg)}
.player-video video{width:100%;height:100%;display:block;background:#000}
.player-meta{margin-top:18px;color:#fff}
.player-meta .pm-cat{color:var(--gold-300);font-weight:700;font-size:.82rem}
.player-meta h1{color:#fff;font-size:clamp(1.3rem,2.4vw,1.8rem);margin:6px 0 10px}
.player-meta p{color:var(--on-navy-dim);max-width:70ch}
.player-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;align-items:center}
.btn-done{background:var(--gold-500);color:#2c2107}
.btn-done.is-done{background:rgba(54,211,154,.16);color:#36d39a;box-shadow:inset 0 0 0 1.5px rgba(54,211,154,.4)}
.player-nav{display:flex;gap:10px;margin-left:auto}
.player-nav .btn{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16)}
.player-nav .btn:hover:not(:disabled){background:rgba(255,255,255,.14)}
.player-nav .btn:disabled{opacity:.4;cursor:not-allowed}
.player-side{background:#0f1c38;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;max-height:78vh;display:flex;flex-direction:column}
.player-side .ps-head{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.player-side .ps-head b{font-size:1rem}
.player-side .ps-head .cc-prog{margin-top:12px;background:rgba(255,255,255,.1)}
.player-side .ps-head small{color:var(--on-navy-dim);font-size:.8rem}
.ps-list{overflow-y:auto;padding:8px}
.ps-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;width:100%;text-align:left;color:var(--on-navy-dim);transition:background .2s}
.ps-row:hover{background:rgba(255,255,255,.05)}
.ps-row.active{background:rgba(200,155,44,.16)}
.ps-row.active b{color:#fff}
.ps-row .pn{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:.78rem;font-weight:700;flex-shrink:0;color:var(--on-navy-dim)}
.ps-row.done .pn{background:rgba(54,211,154,.18);color:#36d39a}
.ps-row.done .pn svg{width:14px;height:14px}
.ps-row .pinfo{flex-grow:1;min-width:0}
.ps-row .pinfo b{display:block;font-size:.88rem;color:var(--on-navy);font-weight:600;white-space:normal}
.ps-row .pinfo small{font-size:.74rem;color:var(--soft-ink);display:inline-flex;align-items:center;gap:4px}
.ps-row .pinfo small svg{width:12px;height:12px}
.ps-row.active .pinfo b{color:#fff}
.lock-note{margin:18px 0;padding:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:var(--on-navy-dim);font-size:.9rem;text-align:center}
.lock-note .btn{margin-top:12px}

/* ============================================================
   ACCOUNT
   ============================================================ */
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:780px){.acct-grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(20px,2.5vw,28px);box-shadow:var(--sh-xs)}
.card h2{font-size:1.2rem;margin-bottom:4px}
.card .csub{color:var(--muted);font-size:.9rem;margin-bottom:20px}
.acct-head{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.acct-head .big-av{width:64px;height:64px;border-radius:50%;background:linear-gradient(140deg,var(--navy-700),var(--navy-900));color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.4rem;font-family:"Plus Jakarta Sans"}
.acct-head b{font-size:1.3rem;font-family:"Plus Jakarta Sans";font-weight:800;color:var(--ink);display:block}
.acct-head .role{display:inline-block;margin-top:4px;font-size:.74rem;font-weight:700;padding:.3em .7em;border-radius:99px;background:var(--gold-100);color:var(--gold-700)}
.acct-head .role.admin{background:#eef2fb;color:var(--navy-700)}

/* ============================================================
   ADMIN
   ============================================================ */
body.admin{background:var(--soft)}
.admin-layout{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
@media(max-width:920px){.admin-layout{grid-template-columns:1fr}}
.admin-side{background:var(--navy-900);color:var(--on-navy)}
@media(max-width:920px){.admin-side{position:fixed;inset:0 auto 0 0;width:248px;z-index:60;transform:translateX(-100%);transition:transform .35s var(--ease)}.admin-side.open{transform:none}}
.admin-side-in{position:sticky;top:0;padding:18px 14px;display:flex;flex-direction:column;gap:6px;height:100vh}
.admin-side .ashell-brand b{color:#fff}
.admin-side .ashell-brand{padding:8px 8px 4px}
.admin-tag{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-300);font-weight:700;padding:6px 10px 14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.admin-nav{display:flex;flex-direction:column;gap:3px}
.admin-nav a,.admin-nav button{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;font-size:.92rem;font-weight:600;color:var(--on-navy-dim);text-align:left;width:100%;transition:background .2s,color .2s}
.admin-nav a svg,.admin-nav button svg{width:18px;height:18px;flex-shrink:0}
.admin-nav a:hover,.admin-nav button:hover{background:rgba(255,255,255,.06);color:#fff}
.admin-nav a.on{background:rgba(200,155,44,.16);color:var(--gold-300)}
.admin-nav .muted{margin-top:auto;color:var(--soft-ink)}
.admin-scrim{position:fixed;inset:0;background:rgba(8,16,32,.5);opacity:0;visibility:hidden;transition:opacity .3s;z-index:55}
.admin-scrim.show{opacity:1;visibility:visible}
.admin-main{min-width:0;display:flex;flex-direction:column}
.admin-top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);height:64px;display:flex;align-items:center;gap:14px;padding:0 clamp(16px,2.5vw,30px)}
.admin-top h1{font-size:1.2rem;margin-right:auto}
.admin-burger{display:none;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line-2);background:#fff}
.admin-burger span,.admin-burger span::before,.admin-burger span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;content:""}
.admin-burger span::before{position:absolute;top:-6px}.admin-burger span::after{position:absolute;top:6px}
@media(max-width:920px){.admin-burger{display:inline-flex}}
.admin-body{padding:clamp(20px,3vw,34px);max-width:1100px;width:100%}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:30px}
@media(max-width:760px){.admin-stats{grid-template-columns:1fr 1fr}}
.astat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--sh-xs)}
.astat .ai{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--gold-100);margin-bottom:14px}
.astat .ai svg{width:20px;height:20px;color:var(--gold-700)}
.astat b{display:block;font-family:"Plus Jakarta Sans";font-weight:800;font-size:1.8rem;color:var(--ink);letter-spacing:-.02em}
.astat span{font-size:.84rem;color:var(--muted)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-xs);overflow:hidden;margin-bottom:24px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:1.12rem}
.panel-head .ph-sub{font-size:.84rem;color:var(--muted)}
.atable{width:100%;border-collapse:collapse}
.atable th{text-align:left;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--soft-ink);font-weight:700;padding:12px 22px;border-bottom:1px solid var(--line);background:var(--soft)}
.atable td{padding:14px 22px;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle}
.atable tr:last-child td{border-bottom:0}
.atable tr:hover td{background:var(--soft)}
.atable .t-title{font-weight:700;color:var(--ink)}
.atable .t-sub{font-size:.8rem;color:var(--soft-ink)}
.atable .t-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,var(--navy-700),var(--navy-900));color:#fff;display:grid;place-items:center;font-weight:700;font-size:.78rem;flex-shrink:0}
.cellflex{display:flex;align-items:center;gap:11px}
.pill-role{font-size:.72rem;font-weight:700;padding:.3em .7em;border-radius:99px}
.pill-role.member{background:var(--gold-100);color:var(--gold-700)}
.pill-role.admin{background:#eef2fb;color:var(--navy-700)}
.iconbtn{width:34px;height:34px;border-radius:9px;display:inline-grid;place-items:center;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2);background:#fff;transition:color .2s,box-shadow .2s,background .2s}
.iconbtn:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.iconbtn.danger:hover{color:#c0476a;box-shadow:inset 0 0 0 1px #c0476a}
.iconbtn svg{width:16px;height:16px}
.rowacts{display:flex;gap:7px;justify-content:flex-end}
.btn-sm{padding:.55em 1em;font-size:.86rem}
.tag-count{font-size:.78rem;color:var(--muted);background:var(--soft);padding:.3em .7em;border-radius:99px;font-weight:600}

/* admin lesson editor rows */
.led-row{display:grid;grid-template-columns:auto 1fr 130px auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff}
@media(max-width:620px){.led-row{grid-template-columns:1fr;gap:8px}}
.led-row .led-n{width:30px;height:30px;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-weight:700;font-size:.82rem;color:var(--muted)}
.led-row .inp{margin:0}

/* modal */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal .mscrim{position:absolute;inset:0;background:rgba(8,16,32,.55)}
.modal .mbox{position:relative;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%;max-width:560px;max-height:90vh;overflow-y:auto}
.modal .mhead{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.modal .mhead h3{font-size:1.2rem}
.modal .mclose{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--muted);background:var(--soft)}
.modal .mbody{padding:24px}
.modal .mfoot{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}

/* toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(120%);z-index:90;background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-weight:600;font-size:.9rem;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:10px;
  visibility:hidden;transition:transform .4s var(--ease-spring),visibility 0s .4s}
.toast.show{transform:translateX(-50%);visibility:visible;transition-delay:0s}
.toast svg{width:18px;height:18px;color:var(--gold-400)}

/* ============================================================
   SUBSCRIPTION banner + locked cards + packages page
   ============================================================ */
.sub-banner{border-radius:var(--r-md);padding:18px 22px;margin-bottom:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sub-banner.warn{background:linear-gradient(150deg,#fff7e6,#fdf0d2);border:1px solid var(--gold-300)}
.sub-banner.active{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-xs)}
.sub-banner .sb-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.sub-banner.warn .sb-ic{background:var(--gold-100);color:var(--gold-700)}
.sub-banner.active .sb-ic{color:#fff}
.sub-banner .sb-ic svg{width:22px;height:22px}
.sub-banner .sb-info{flex-grow:1;min-width:200px}
.sub-banner .sb-info b{display:block;font-size:1.04rem;color:var(--ink)}
.sub-banner .sb-info span{font-size:.86rem;color:var(--muted)}
.sub-banner .sb-info span .pp{font-weight:700;color:var(--ink)}
.sub-banner .btn{flex-shrink:0}
.plan-pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;padding:.32em .8em;border-radius:99px;color:#fff}
.plan-pill svg{width:13px;height:13px}

.ccard.locked .cc-cover{filter:saturate(.75)}
.cc-lockbadge{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(8,16,32,.55);display:grid;place-items:center}
.cc-lockbadge svg{width:15px;height:15px;color:#fff}
.cc-need{font-size:.78rem;color:var(--gold-700);font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:12px}
.cc-need svg{width:14px;height:14px}

.pak-head{text-align:center;max-width:700px;margin:0 auto clamp(26px,4vw,42px)}
.pak-head h1{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:.3em}
.pak-head p{color:var(--muted);font-size:1.05rem}
.pricing{display:flex;flex-direction:column;align-items:center}
.pricing .pkg-grid{width:100%}
.pkg.current{box-shadow:0 0 0 1.5px var(--navy-700),var(--sh-md)}
.pkg .cur-tag{display:none}
.pkg.current .cur-tag{display:flex;align-items:center;gap:6px;justify-content:center;width:100%;margin-bottom:20px;font-weight:700;font-size:.86rem;color:#fff;background:var(--navy-700);padding:.75em;border-radius:var(--rb)}
.pkg.current .cur-tag svg{width:15px;height:15px}
.pkg.current .pkg-cta-buy{display:none}
.pak-note{text-align:center;color:var(--soft-ink);font-size:.84rem;margin-top:30px;max-width:620px;margin-inline:auto;line-height:1.6}

/* ============================================================
   QA fixes: mobile tables, tiny screens, toasts, player
   ============================================================ */
.atable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.atable{min-width:560px}
@media(max-width:380px){
  .ashell-top-in{gap:8px;padding:0 12px}
  .ashell-nav{margin-left:0;gap:0;min-width:0}
  .ashell-nav a{padding:.5em .55em}
  .ashell-brand b{display:none}
  .umenu{margin-left:auto;flex-shrink:0}
}
.lock-note svg{width:36px;height:36px}
.pt-back{white-space:nowrap}
.led-row>div{min-width:0}
.led-url{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@media(max-width:400px){.led-row .rowacts{justify-content:flex-start}}
@media(max-width:640px){.panel-head{flex-wrap:wrap}.panel-head .inp{width:100%;max-width:100%!important}}
.admin-close{display:none;position:absolute;top:14px;right:12px;width:36px;height:36px;border-radius:9px;place-items:center;color:var(--on-navy-dim);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:1rem}
.admin-close:hover{color:#fff}
@media(max-width:920px){.admin-close{display:grid}}

/* theme button placement in app bars */
.ashell-top-in .theme-btn{margin-left:auto;width:40px;height:40px}
.ashell-top-in .umenu{margin-left:12px}
.admin-top .theme-btn{width:40px;height:40px;margin-right:12px}

/* ============================================================
   DARK THEME — app surfaces
   ============================================================ */
html.dark body.app,html.dark body.admin{background:var(--bg)}
html.dark .ashell-top{background:rgba(12,20,36,.92);border-color:var(--line)}
html.dark .ashell-nav a:hover{background:var(--soft)}
html.dark .ashell-nav a.on{background:var(--gold-100);color:var(--gold-300)}
html.dark .udrop{background:var(--soft);border-color:var(--line)}
html.dark .udrop a:hover,html.dark .udrop button:hover{background:var(--soft-2)}
html.dark .ccard,html.dark .cont,html.dark .card,html.dark .llist,html.dark .cside,
html.dark .panel,html.dark .astat,html.dark .empty,html.dark .led-row,
html.dark .sub-banner.active,html.dark .iconbtn,html.dark .admin-burger{background:var(--soft)}
html.dark .empty{border-color:var(--line-2)}
html.dark .atable th{background:var(--soft-2)}
html.dark .atable tr:hover td{background:var(--soft-2)}
html.dark .lrow:hover{background:var(--soft-2)}
html.dark .lrow .ln{background:var(--soft-2)}
html.dark .inp{background:var(--soft-2);color:var(--ink);border-color:var(--line-2)}
html.dark .inp::placeholder{color:var(--soft-ink)}
html.dark .modal .mbox{background:var(--bg)}
html.dark .modal .mclose{background:var(--soft-2)}
html.dark .toast{background:var(--navy-700)}
html.dark .sub-banner.warn{background:linear-gradient(150deg,#241d09,#1a1505);border-color:#4a3c14}
html.dark .auth-main{background:var(--bg)}
html.dark .demo-hint{background:var(--soft);border-color:var(--line-2)}
html.dark .alert.err{background:#3a1522;color:#ff9fb3;border-color:#5c2335}
html.dark .alert.ok{background:#0f2b1d;color:#7fe0ae;border-color:#1d4732}
html.dark .admin-top{background:rgba(12,20,36,.92);border-color:var(--line)}
html.dark .cc-prog{background:var(--soft-2)}
html.dark .tag-count{background:var(--soft-2)}
html.dark .pill-role.admin{background:var(--soft-2);color:#9db6dd}
html.dark .s-badge.tg{background:var(--soft-2)}
html.dark .cta-qr .qrcard,html.dark .qrcard{background:#fff}
html.dark .ct-thumb .pl{background:rgba(255,255,255,.92)}
html.dark .badge-free{background:#0f2b1d;color:#7fe0ae}
html.dark .lock-note{color:var(--on-navy-dim)}