/* Standalone Shell V38 — login/install/error pages. */

/* ===== SOURCE: assets/css/app.css ===== */
:root{--navy:#0b2f4a;--navy2:#123d5a;--blue:#1677a6;--cyan:#27a6c7;--green:#157a65;--amber:#b97812;--red:#b64242;--bg:#f4f7fb;--surface:#fff;--text:#172535;--muted:#647486;--line:#dce5ee;--shadow:0 18px 48px rgba(18,61,90,.12);--radius:20px;--radius-sm:12px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%}button,input,select,textarea{font:inherit}.container{width:min(1180px,calc(100% - 32px));margin:auto}.topbar{position:sticky;top:0;z-index:50;background:rgba(11,47,74,.94);backdrop-filter:blur(18px);color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}.topbar-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:12px;font-weight:800}.brand-logo{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:13px;padding:4px}.brand small{display:block;font-weight:500;color:#cce3ee}.nav{display:flex;align-items:center;gap:8px}.nav a{padding:10px 13px;border-radius:10px;color:#e8f6fb}.nav a:hover,.nav a.active{background:rgba(255,255,255,.12)}.menu-btn{display:none;border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:9px 12px}.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b2f4a,#145a75 62%,#18849b);color:#fff;padding:72px 0 58px}.hero:before,.hero:after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.07);filter:blur(2px)}.hero:before{width:420px;height:420px;right:-120px;top:-190px}.hero:after{width:260px;height:260px;left:-90px;bottom:-160px}.hero-grid{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.09);border-radius:999px;font-weight:700;font-size:.86rem}.hero h1{font-size:clamp(2.2rem,5vw,4.5rem);line-height:1.03;margin:18px 0 18px;letter-spacing:-.045em}.hero p{font-size:1.08rem;color:#d8edf5;max-width:720px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer;transition:.2s transform,.2s box-shadow,.2s background}.btn:hover{transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,#1a8bb5,#23abc4);color:#fff;box-shadow:0 10px 24px rgba(24,139,181,.25)}.btn-light{background:#fff;color:var(--navy)}.btn-outline{border:1px solid var(--line);background:#fff;color:var(--text)}.btn-danger{background:#fff0f0;color:var(--red);border:1px solid #f3c6c6}.btn-sm{padding:8px 11px;font-size:.88rem}.hero-card{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);box-shadow:0 22px 60px rgba(0,0,0,.18);border-radius:26px;padding:24px;backdrop-filter:blur(12px)}.hero-card .metric{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.metric div{padding:16px;border-radius:16px;background:rgba(255,255,255,.1)}.metric strong{display:block;font-size:1.8rem}.section{padding:56px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.section-head h2{font-size:clamp(1.65rem,3vw,2.5rem);margin:0;letter-spacing:-.03em}.section-head p{margin:.4rem 0 0;color:var(--muted)}.filters{display:flex;flex-wrap:wrap;gap:10px}.field,.select,.input,.textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 13px;color:var(--text);outline:none}.input:focus,.select:focus,.textarea:focus{border-color:#5db4d1;box-shadow:0 0 0 4px rgba(39,166,199,.13)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 8px 28px rgba(19,54,76,.06);transition:.22s transform,.22s box-shadow,.22s border}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#bad4e2}.card h3{margin:10px 0 7px;line-height:1.25}.card p{color:var(--muted)}.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.iconbox{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#e8f6fb;color:var(--blue);font-size:1.35rem;font-weight:900}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#edf4f8;color:#36586d;font-size:.78rem;font-weight:800}.badge-published{background:#e5f7f1;color:#116451}.badge-draft{background:#fff4dc;color:#8d5b0d}.badge-archived{background:#eef0f3;color:#5d6570}.meta{display:flex;flex-wrap:wrap;gap:8px 12px;color:var(--muted);font-size:.9rem}.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.empty{padding:36px;text-align:center;background:#fff;border:1px dashed #b7c8d5;border-radius:var(--radius);color:var(--muted)}.footer{background:#0b2f4a;color:#dcecf3;padding:34px 0;margin-top:40px}.footer-grid{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}.alert{padding:12px 14px;border-radius:12px;margin:12px 0;border:1px solid}.alert-success{background:#eaf8f3;border-color:#bce8d9;color:#12624f}.alert-warning{background:#fff6df;border-color:#f1d494;color:#75500d}.alert-danger{background:#fff0f0;border-color:#f0c2c2;color:#8a2f2f}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top right,#d7f2f7,transparent 38%),var(--bg)}.login-card{width:min(460px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}.login-card h1{margin:.4rem 0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-group{display:grid;gap:6px}.form-group.full{grid-column:1/-1}.label{font-weight:800;font-size:.9rem}.help{font-size:.82rem;color:var(--muted)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}.table{border-collapse:collapse;width:100%;min-width:760px}.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table th{background:#f3f7fa;color:#405769;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}.table tr:last-child td{border-bottom:0}.pager{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.pager a{padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:9px}.package-detail{display:grid;grid-template-columns:1fr 320px;gap:24px}.side-card{position:sticky;top:92px;height:max-content}.resource-list{display:grid;gap:10px}.resource-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:13px;padding:12px}.muted{color:var(--muted)}.hidden{display:none!important}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-grid,.package-detail{grid-template-columns:1fr}.side-card{position:static}.nav{display:none;position:absolute;left:16px;right:16px;top:64px;background:#0b2f4a;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px;flex-direction:column;align-items:stretch}.nav.open{display:flex}.menu-btn{display:block}.hero{padding-top:52px}}
@media(max-width:620px){.container{width:min(100% - 20px,1180px)}.grid,.form-grid{grid-template-columns:1fr}.hero h1{font-size:2.35rem}.hero-card .metric{grid-template-columns:1fr 1fr}.section{padding:40px 0}.section-head{align-items:stretch;flex-direction:column}.filters>*{flex:1 1 100%}.footer-grid{grid-template-columns:1fr}.topbar-inner{min-height:62px}.brand-logo{width:38px;height:38px}.brand small{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Stabilization V3: package detail and teacher signature */
.package-title{font-size:clamp(2rem,4vw,3.4rem);line-height:1.08;margin:16px 0;overflow-wrap:anywhere}.package-description{font-size:1.08rem}.package-components{margin-top:24px}.section-head.compact{align-items:center;margin-bottom:18px}.section-head.compact h2{font-size:1.45rem}.resource-meta{display:block}.detail-list{display:grid;gap:0;margin:10px 0 18px}.detail-list>div{display:grid;gap:3px;padding:12px 0;border-bottom:1px solid var(--line)}.detail-list dt{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.detail-list dd{margin:0;font-weight:700;overflow-wrap:anywhere}.detail-list dd small{display:block;font-weight:500;color:var(--muted)}.teacher-signature-public{display:grid;gap:6px;margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fbfdfe}.teacher-signature-public span{font-size:.82rem;font-weight:700}.teacher-signature-public img{display:block;width:190px;max-width:100%;height:82px;object-fit:contain;object-position:left center}.full-width{width:100%}.secondary-action{margin-top:8px}
@media(max-width:620px){.package-components{padding:16px}.section-head.compact{align-items:flex-start}.teacher-signature-public img{height:72px}.resource-item{align-items:flex-start}}
/* Portal V6 dynamic layout stabilization */
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{min-width:320px;overflow-x:hidden}main,section,article,header,footer,nav,div,form{min-width:0}.topbar{max-width:100vw}.menu-btn{min-height:44px}.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}.resource-item{min-width:0}.resource-item>span:first-child{min-width:0}.resource-item strong,.resource-item small{overflow-wrap:anywhere}
@media(max-width:620px){.hero{padding:42px 0 36px}.hero h1{font-size:clamp(2rem,11vw,2.75rem)}.hero-card{padding:16px}.hero-card .metric{gap:8px}.metric div{padding:12px}.section-head .filters{width:100%}.package-detail{gap:14px}.package-components,.side-card{border-radius:16px}.resource-item{align-items:flex-start}.login-shell{padding:12px}.login-card{padding:22px 16px}.btn{min-height:44px}}

/* V12.7 — koreksi menu HP dan kerapian teks; tanpa elemen atau fitur baru. */
.nav a,.menu-btn,.btn,.metric span,.card h3,.card p{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.metric div{min-width:0}
.metric span{display:block;line-height:1.35}
@media(max-width:900px){
  .nav:not(.open){display:none!important}
  .nav.open{display:flex!important;max-height:calc(100vh - 88px);overflow-y:auto;overscroll-behavior:contain}
}

/* V12.8 — menu HP memakai kontrol native agar selalu dapat ditutup. */
.portal-menu{margin-left:auto;min-width:0}
.portal-menu>summary{list-style:none}
.portal-menu>summary::-webkit-details-marker{display:none}
.portal-menu>.nav{display:flex}
.portal-menu:not([open])>.nav{display:flex}
.nav a,.menu-btn,.btn,.card h3,.card p,.card a,.meta,.meta span,.metric span{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.card-actions .btn{white-space:normal;text-align:center}
@media(max-width:900px){
  .portal-menu{position:relative;flex:0 0 auto}
  .portal-menu>.menu-btn{display:block;user-select:none;-webkit-user-select:none}
  .portal-menu:not([open])>.nav{display:none!important}
  .portal-menu[open]>.nav{
    display:flex!important;
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    left:auto;
    width:min(330px,calc(100vw - 24px));
    max-height:calc(100dvh - 96px);
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:100;
  }
  .portal-menu>.nav a{width:100%}
}
@media(min-width:901px){
  .portal-menu>.menu-btn{display:none!important}
  .portal-menu>.nav{position:static!important;display:flex!important}
}
@media(max-width:620px){
  .brand{min-width:0}
  .brand>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card h3,.card p,.meta span{line-height:1.5}
  .card-actions .btn{width:100%}
}

/* V12.9 — perapian panel menu saat dibuka pada HP; tanpa menu atau fitur baru. */
@media(max-width:900px){
  .portal-menu[open]>.nav{
    display:flex!important;
    position:fixed!important;
    top:70px!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:10px!important;
    gap:4px!important;
    align-items:stretch!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    max-height:calc(100dvh - 82px)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:16px!important;
    background:#0b2f4a!important;
    box-shadow:0 18px 42px rgba(5,29,46,.32)!important;
    z-index:1000!important;
  }
  .portal-menu>.nav a{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    padding:13px 15px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    border-radius:11px!important;
  }
}
@media(max-width:620px){
  .portal-menu[open]>.nav{
    top:62px!important;
    left:10px!important;
    right:10px!important;
    max-height:calc(100dvh - 72px)!important;
  }
}


/* V14.1 — tombol kembali ke website utama; tidak mengubah logika aplikasi. */
.nav .nav-return{
  background:#fff;
  color:var(--navy);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  font-weight:850;
}
.nav .nav-return:hover,.nav .nav-return:focus-visible{
  background:#f0bd35;
  color:#263849;
}
@media(max-width:900px){
  .portal-menu>.nav .nav-return{
    margin-top:4px;
    text-align:center;
  }
}


/* V14.2 — tombol Kembali selalu terlihat di header, di luar menu lipat. */
.topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-left:auto;
  min-width:0;
  flex:0 0 auto;
}
.topbar-return{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 14px;
  border-radius:11px;
  white-space:nowrap;
  background:#fff;
  color:var(--navy);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 6px 16px rgba(0,0,0,.14);
  font-weight:850;
  line-height:1;
}
.topbar-return:hover,.topbar-return:focus-visible{
  background:#f0bd35;
  color:#263849;
}
.topbar-actions .portal-menu{margin-left:0}
@media(max-width:900px){
  .topbar-inner{gap:10px}
  .topbar-actions{gap:6px}
}
@media(max-width:620px){
  .topbar-inner{gap:7px}
  .brand{flex:1 1 auto;min-width:0;gap:8px}
  .brand-logo{flex:0 0 auto}
  .topbar-actions{gap:5px}
  .topbar-return{min-height:40px;padding:8px 10px;font-size:.82rem}
  .menu-btn{min-height:40px;padding:8px 10px;font-size:.82rem}
}
@media(max-width:390px){
  .topbar-return,.menu-btn{padding-inline:8px;font-size:.78rem}
}

.login-links{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.login-main-return{font-weight:800;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
@media(max-width:420px){.login-links{align-items:flex-start;flex-direction:column}}

/* V15 — focused public portal */
.portal-section-head{align-items:center}.portal-filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.portal-filters .input{min-width:230px}.portal-filters .btn{min-height:44px}
.package-grid .card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.package-grid .card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,47,74,.10);border-color:#bdd1dc}.package-grid .card-actions{margin-top:auto;padding-top:16px}.package-grid .card-actions .btn{width:100%}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.hero-card{align-self:center}
@media(max-width:760px){.portal-section-head{align-items:stretch}.portal-filters{display:grid;grid-template-columns:1fr 1fr;width:100%}.portal-filters .input{grid-column:1/-1;min-width:0}.portal-filters>*{width:100%}.package-grid{grid-template-columns:1fr!important}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-actions .btn:last-child{grid-column:1/-1}}
@media(max-width:420px){.portal-filters,.hero-actions{grid-template-columns:1fr}.portal-filters .input,.hero-actions .btn:last-child{grid-column:auto}}

/* Focus pass: concise public portal. */
.hero-grid:has(> :only-child){grid-template-columns:1fr;max-width:840px}
.package-description-toggle{margin:10px 0 18px}
.package-description-toggle>summary{display:inline-flex;cursor:pointer;font-weight:750;color:var(--blue)}
.package-description-toggle .package-description{margin:8px 0 0}
.package-open-main{margin:4px 0 0}

/* Public application shell V16 — sidebar-first, compact, function-driven. */
.public-app-body{min-height:100dvh;background:#eef3f7}
.public-app-shell{display:flex;min-height:100dvh}
.public-sidebar{position:sticky;top:0;z-index:80;display:flex;flex:0 0 224px;flex-direction:column;width:224px;height:100dvh;padding:13px 10px;overflow:auto;background:linear-gradient(180deg,#0b304a,#0d3a57 62%,#102f43);color:#fff;box-shadow:8px 0 26px rgba(10,42,63,.08)}
.public-brand{display:flex;align-items:center;gap:10px;min-width:0;padding:3px 5px 12px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12);font-size:.82rem;font-weight:850;line-height:1.25}.public-brand .brand-logo{width:38px;height:38px;flex:0 0 38px;border-radius:10px}.public-brand span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.public-nav,.public-nav-utility{display:grid;gap:3px}.public-nav a,.public-nav-utility a{display:flex;align-items:center;gap:9px;min-height:40px;padding:7px 9px;border-radius:9px;color:#dceaf1;font-size:.87rem;font-weight:740;text-decoration:none}.public-nav a>span,.public-nav-utility a>span{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px}.public-nav a:hover,.public-nav a.active,.public-nav-utility a:hover{background:rgba(255,255,255,.10);color:#fff}.public-nav a.active{background:rgba(255,255,255,.16);font-weight:850}.public-nav-utility{margin-top:auto;padding-top:9px;border-top:1px solid rgba(255,255,255,.10)}
.public-main{flex:1 1 auto;min-width:0;min-height:100dvh}.public-appbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:9px;min-height:56px;padding:8px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}.public-sidebar-toggle{display:none;place-items:center;width:38px;height:38px;min-height:38px;padding:0;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--navy);cursor:pointer}.public-appbar-brand{font-size:.9rem;font-weight:800;color:var(--navy)}
.public-sidebar-backdrop{display:none;position:fixed;inset:0;z-index:70;border:0;background:rgba(5,24,38,.52);backdrop-filter:blur(2px)}
.public-main>.section{padding:18px 0 28px}.public-main .section-head{align-items:center;margin-bottom:12px}.public-main .section-head h1,.public-main .section-head h2{margin:0;font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.02em}.public-main .section-head p{display:none}.public-main .container{width:min(1460px,calc(100% - 28px))}
.package-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px}.package-grid .card{min-height:0;padding:13px 14px;border-radius:12px;box-shadow:none;transform:none}.package-grid .card:hover{transform:none;box-shadow:none;background:#fbfdfe}.package-grid .card h3{margin:7px 0 4px;font-size:.98rem}.package-grid .meta{font-size:.78rem}.package-grid .card-actions{margin-top:10px;padding-top:0}.package-grid .card-actions .btn{min-height:36px;padding:7px 10px;border-radius:8px}.portal-section-head{gap:10px}.portal-filters{gap:6px}.portal-filters .input,.portal-filters .select{min-height:40px;padding:8px 10px;border-radius:9px}.portal-filters .btn{min-height:40px;padding:8px 11px;border-radius:9px}.footer{margin-top:14px;padding:18px 0}
@media(max-width:980px){.public-app-shell{display:block}.public-sidebar{position:fixed;inset:0 auto 0 0;z-index:90;width:min(286px,88vw);transform:translateX(-105%);box-shadow:18px 0 48px rgba(4,25,38,.25);transition:transform .2s ease}.public-sidebar-toggle{display:grid}.public-app-body.public-sidebar-open{overflow:hidden}.public-app-body.public-sidebar-open .public-sidebar{transform:translateX(0)}.public-app-body.public-sidebar-open .public-sidebar-backdrop{display:block}.public-main{width:100%}}
@media(max-width:760px){.public-appbar{min-height:52px;padding:7px 9px}.public-main>.section{padding:12px 0 20px}.public-main .container{width:calc(100% - 18px)}.portal-section-head{align-items:stretch}.portal-filters{display:grid;grid-template-columns:1fr 1fr;width:100%}.portal-filters .input{grid-column:1/-1;min-width:0}.package-grid{grid-template-columns:1fr!important}.package-grid .card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'top action' 'title action' 'meta action';align-items:center;gap:3px 10px}.package-grid .card-top{grid-area:top;justify-content:flex-start}.package-grid .card h3{grid-area:title}.package-grid .meta{grid-area:meta}.package-grid .card-actions{grid-area:action;margin:0}.package-grid .card-actions .btn{width:auto;min-width:70px}.footer-grid{grid-template-columns:1fr;gap:3px}}
@media(max-width:430px){.portal-filters{grid-template-columns:1fr}.portal-filters .input{grid-column:auto}.public-main .section-head h1,.public-main .section-head h2{font-size:1.25rem}}
@media print{.public-sidebar,.public-appbar,.public-sidebar-backdrop{display:none!important}.public-main{width:100%!important}.public-app-shell{display:block!important}}
@media(prefers-reduced-motion:reduce){.public-sidebar{transition:none!important}}


/* ===== SOURCE: assets/css/native-ui-v13.css ===== */
/*
 * Native UI V13 — progressive polish layer.
 * Intentionally conservative: it improves motion, touch, focus, scrolling,
 * spacing and responsive ergonomics without changing application logic.
 */
@layer paNativeV13 {
  :root{
    --pa13-navy:#123f5f;
    --pa13-blue:#197aa5;
    --pa13-gold:#f0bd35;
    --pa13-bg:#eef3f6;
    --pa13-surface:#ffffff;
    --pa13-text:#172a3a;
    --pa13-muted:#627483;
    --pa13-line:#d7e2e9;
    --pa13-radius:18px;
    --pa13-shadow:0 12px 34px rgba(18,63,95,.10);
    --pa13-shadow-soft:0 5px 18px rgba(18,63,95,.07);
    --pa13-ease:cubic-bezier(.2,.8,.2,1);
    --pa13-safe-bottom:max(14px,env(safe-area-inset-bottom));
  }

  html{
    min-width:320px;
    scroll-behavior:smooth;
    scroll-padding-top:82px;
    scrollbar-gutter:stable;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  body{
    min-height:100dvh;
    max-width:100%;
    overflow-x:hidden;
    overscroll-behavior-y:auto;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  body,
  .sheet-viewport,
  .table-wrap,
  .table-responsive,
  [class*="table-wrap"],
  [class*="scroll"]{
    -webkit-overflow-scrolling:touch;
  }

  img,svg,video,canvas,iframe{max-width:100%;height:auto}
  iframe{border:0}

  :is(a,button,input,select,textarea,[role="button"],summary){
    -webkit-tap-highlight-color:transparent;
  }

  :is(button,.btn,a.btn,[role="button"],summary){
    touch-action:manipulation;
    transition:
      transform .18s var(--pa13-ease),
      box-shadow .18s var(--pa13-ease),
      background-color .18s var(--pa13-ease),
      border-color .18s var(--pa13-ease),
      color .18s var(--pa13-ease),
      opacity .18s var(--pa13-ease);
  }

  :is(button,.btn,a.btn,[role="button"],summary):active{
    transform:scale(.985);
  }

  :is(a,button,input,select,textarea,[role="button"],summary):focus-visible{
    outline:3px solid rgba(25,122,165,.33)!important;
    outline-offset:3px!important;
  }

  :is(button,input,select,textarea,.btn,[role="button"]):disabled,
  [aria-disabled="true"]{
    opacity:.58;
    cursor:not-allowed;
    transform:none!important;
  }

  :is(.card,.panel,.section,.info-card,.pro-panel,.viewer-card,.status-card,.metric,.question,fieldset){
    transition:box-shadow .22s var(--pa13-ease),border-color .22s var(--pa13-ease),transform .22s var(--pa13-ease);
  }

  .table-wrap,.table-responsive,[class*="table-wrap"]{
    max-width:100%;
    overflow:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    scrollbar-color:#9fb5c2 transparent;
  }

  .table-wrap::-webkit-scrollbar,
  .table-responsive::-webkit-scrollbar,
  [class*="table-wrap"]::-webkit-scrollbar{height:9px;width:9px}
  .table-wrap::-webkit-scrollbar-thumb,
  .table-responsive::-webkit-scrollbar-thumb,
  [class*="table-wrap"]::-webkit-scrollbar-thumb{background:#aabdc8;border-radius:99px;border:2px solid transparent;background-clip:padding-box}

  table{max-width:100%}
  th,td{overflow-wrap:anywhere}

  .navlinks,.nav,.top-actions,.toolbar-actions,.tabs,.pro-tabs,.actions-scroll{
    scrollbar-width:none;
  }
  .navlinks::-webkit-scrollbar,.nav::-webkit-scrollbar,.top-actions::-webkit-scrollbar,.toolbar-actions::-webkit-scrollbar,.tabs::-webkit-scrollbar,.pro-tabs::-webkit-scrollbar,.actions-scroll::-webkit-scrollbar{display:none}

  .status:empty,.hint:empty,.notice:empty,.helper:empty,.help-text:empty,.description:empty{display:none!important}
  .diagnostic-item>.item-hint{display:none!important}
  [hidden]{display:none!important}

  .scroll-top,[class*="scroll-top"],button[aria-label*="atas" i],a[aria-label*="atas" i]{
    opacity:0;
    pointer-events:none;
    transform:translateY(10px) scale(.94);
    transition:opacity .2s var(--pa13-ease),transform .2s var(--pa13-ease)!important;
  }
  .scroll-top.pa-scrolltop-visible,[class*="scroll-top"].pa-scrolltop-visible,button[aria-label*="atas" i].pa-scrolltop-visible,a[aria-label*="atas" i].pa-scrolltop-visible{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }

  body.pa-is-scrolling .roster-quick-access{
    opacity:.72;
    transform:scale(.94);
  }

  @media (hover:hover) and (pointer:fine){
    :is(button,.btn,a.btn,[role="button"]):not(:disabled):hover{
      transform:translateY(-1px);
    }
    :is(.card,.panel,.info-card,.pro-panel,.viewer-card):hover{
      border-color:#c6d7e1;
      box-shadow:var(--pa13-shadow);
    }
  }

  @media(max-width:760px){
    html{scroll-padding-top:70px}
    body{
      min-width:320px;
      padding-bottom:env(safe-area-inset-bottom);
      background:var(--pa13-bg);
    }

    body::selection{background:rgba(25,122,165,.20)}

    :is(.shell,.container,.wrapper,.wrap,.doc-shell,.pro-shell,.page-shell){
      max-width:calc(100% - 12px)!important;
      margin-inline:auto!important;
    }

    :is(.card,.panel,.section,.info-card,.pro-panel,.viewer-card,.status-card,.metric,.question,fieldset){
      max-width:100%!important;
      border-radius:16px!important;
      box-shadow:var(--pa13-shadow-soft);
    }

    :is(.topbar,.site-header,header.top,.toolbar,.pro-toolbar){
      max-width:100%;
      -webkit-backdrop-filter:blur(16px) saturate(1.12);
      backdrop-filter:blur(16px) saturate(1.12);
    }

    :is(.navlinks,.nav,.top-actions,.toolbar-actions,.tabs,.pro-tabs,.actions-scroll){
      display:flex!important;
      flex-wrap:nowrap!important;
      max-width:100%!important;
      overflow-x:auto!important;
      overscroll-behavior-inline:contain;
      scroll-snap-type:x proximity;
      scroll-padding-inline:8px;
      gap:8px;
      padding-bottom:3px;
    }

    :is(.navlinks,.nav,.top-actions,.toolbar-actions,.tabs,.pro-tabs,.actions-scroll)>*{
      flex:0 0 auto!important;
      white-space:nowrap!important;
      scroll-snap-align:start;
    }

    :is(button,.btn,a.btn,[role="button"],summary){
      min-height:44px;
    }

    input,select,textarea{
      min-height:46px;
      font-size:16px!important;
    }

    textarea{line-height:1.5}

    :is(.grid,.pro-grid,.hero-grid,.student-grid,.profile-head,.stats,.filters,.reading-layout){
      min-width:0;
    }

    .table-wrap,.table-responsive,[class*="table-wrap"]{
      border-radius:12px;
    }

    .roster-quick-access{
      left:10px!important;
      bottom:calc(12px + env(safe-area-inset-bottom))!important;
      width:46px!important;
      height:46px!important;
      min-width:46px!important;
      min-height:46px!important;
      padding:0!important;
      justify-content:center!important;
      border-width:2px!important;
      box-shadow:0 10px 24px rgba(8,44,67,.24)!important;
    }

    .roster-quick-access__label{
      position:absolute!important;
      width:1px!important;
      height:1px!important;
      overflow:hidden!important;
      clip:rect(0,0,0,0)!important;
      white-space:nowrap!important;
    }

    .scroll-top,[class*="scroll-top"],button[aria-label*="atas" i],a[aria-label*="atas" i]{
      width:46px!important;
      height:46px!important;
      min-width:46px!important;
      min-height:46px!important;
      right:10px!important;
      bottom:calc(12px + env(safe-area-inset-bottom))!important;
      font-size:1.08rem!important;
    }

  }

  @media(max-width:420px){
    :is(.shell,.container,.wrapper,.wrap,.doc-shell,.pro-shell,.page-shell){
      max-width:calc(100% - 8px)!important;
    }
    :is(.card,.panel,.section,.info-card,.pro-panel,.viewer-card,.status-card,.metric,.question,fieldset){
      border-radius:14px!important;
    }
  }

  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
      animation-duration:.001ms!important;
      animation-iteration-count:1!important;
      transition-duration:.001ms!important;
      scroll-behavior:auto!important;
    }
  }

  @media print{
    .roster-quick-access,.scroll-top,[class*="scroll-top"],button[aria-label*="atas" i],a[aria-label*="atas" i]{display:none!important}
  }
}

/* V12.6 — koreksi khusus HP; tidak menambah elemen/menu. */
@media(max-width:760px){
  th,td{overflow-wrap:break-word!important;word-break:normal!important;hyphens:none!important}
  .roster-quick-access,.scroll-top,[class*="scroll-top"],button[aria-label*="atas" i],a[aria-label*="atas" i]{display:none!important}
}

/* Total audit v13.1 — touch responsiveness without changing business logic. */
@media (pointer:coarse){
  :is(button,.btn,a.btn,[role="button"],summary,input[type="button"],input[type="submit"],input[type="reset"]){
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(25,122,165,.12);
  }
}

/* V18 legacy/static mobile hardening.
   Applies to subject pages that do not use the newer sidebar workspace script. */
@media(max-width:760px){
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace){min-width:0!important;max-width:100%!important;overflow-x:hidden!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(.shell,.container,.wrapper,.wrap,.doc-shell,.pro-shell,.page-shell){width:auto!important;max-width:none!important;margin-left:7px!important;margin-right:7px!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(.card,.panel,.section,.info-card,.pro-panel,.question,fieldset){min-width:0!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(.grid,.pro-grid,.hero-grid,.student-grid,.profile-head,.stats,.filters,.reading-layout,.lab-grid,.algebra-lab,.alg-lab-layout,.profile-grid,.plan-grid,.mastery){grid-template-columns:1fr!important;min-width:0!important;gap:9px!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) .filters>*{width:100%!important;min-width:0!important;max-width:100%!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(input,select,textarea){width:100%!important;min-width:0!important;max-width:100%!important;font-size:16px!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(input[type="checkbox"],input[type="radio"]){width:auto!important;min-height:0!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(.actions,.top-actions,.toolbar-actions,.pro-actions){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;max-width:100%!important;gap:7px!important;overflow:visible!important;padding-bottom:0!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(.actions,.top-actions,.toolbar-actions,.pro-actions)>*{width:100%!important;min-width:0!important;max-width:100%!important;white-space:normal!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(.actions,.top-actions,.toolbar-actions,.pro-actions) :is(.btn,a,button){min-height:44px!important;justify-content:center!important;white-space:normal!important;text-align:center!important;line-height:1.25!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(.topbar,.site-header,.toolbar,.pro-toolbar){position:relative!important;top:auto!important;width:100%!important;max-width:100%!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(.topbar-inner,.toprow,.toolbar-inner,.site-header-inner){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;width:100%!important;max-width:100%!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) .brand{min-width:0!important;max-width:100%!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) .brand :is(h1,h2,h3,p,span,strong){max-width:100%!important;overflow-wrap:anywhere!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) .table-wrap,
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) .table-responsive,
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) [class*="table-wrap"]{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-inline:contain!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) table{max-width:100%!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(th,td){overflow-wrap:break-word!important;word-break:normal!important;hyphens:none!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(h1,h2,h3){line-height:1.28!important;overflow-wrap:anywhere!important}
}
@media(max-width:430px){
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(.actions,.top-actions,.toolbar-actions,.pro-actions){grid-template-columns:1fr!important}
  body:not(.pa-admin-body):not(.public-app-body):not(.pa-static-workspace) :is(.shell,.container,.wrapper,.wrap,.doc-shell,.pro-shell,.page-shell){margin-left:5px!important;margin-right:5px!important}
}

/* V30 static workspace stability */
.pa-static-workspace{transition:none!important}.pa-static-sidebar{transition:none!important}.pa-static-sidebar a,.pa-static-sidebar summary{transform:none!important}
@media(max-width:1080px){.pa-static-sidebar{transition:transform 200ms cubic-bezier(.2,.7,.2,1)!important}}
@media(prefers-reduced-motion:reduce){.pa-static-sidebar{transition:none!important}}


/* ===== SOURCE: assets/css/responsive-hardening-v18.css ===== */
/* PERANGKAT Responsive Hardening V18 — final cascade layer
   Loaded last to resolve older mobile rules without changing application logic. */

:root{
  --rh-gutter:clamp(10px,2.6vw,20px);
  --rh-touch:44px;
  --rh-radius:14px;
}

html,body{max-width:100%;overflow-x:hidden}
body{min-width:0!important}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas,iframe,object,embed{max-width:100%;height:auto}
pre,code{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
:is(.pa-admin-main,.pa-admin-content,.public-main,.container,.panel,.card,.toolbar,.page-title,.form-grid,.filters,.inline-actions,.resource-item,.activity-question-row,.activity-question-main,.worksheet-studio-grid,.worksheet-editor-panel,.worksheet-canvas){min-width:0}
:is(input,select,textarea,button,.btn){max-width:100%}

/* ---------- ADMIN / TEACHER APP ---------- */
@media(max-width:1080px){
  .pa-admin-shell{display:block!important;width:100%!important}
  .pa-admin-main{width:100%!important;max-width:100%!important}
  .pa-admin-sidebar{
    width:min(300px,88vw)!important;
    min-width:0!important;
    max-width:min(300px,88vw)!important;
    flex-basis:auto!important;
    height:100dvh!important;
    padding:12px 10px calc(12px + env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .pa-sidebar-close{display:grid!important}
  .pa-admin-top{padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important}
  .pa-admin-content{width:100%!important;max-width:100%!important;margin:0!important;padding:14px var(--rh-gutter) calc(24px + env(safe-area-inset-bottom))!important}
}

@media(max-width:760px){
  .pa-admin-body{font-size:15px!important}
  .pa-admin-top{
    min-height:54px!important;
    gap:8px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
  .pa-admin-top-left{gap:7px!important;min-width:0!important}
  .pa-sidebar-toggle,.pa-command-trigger{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important}
  .pa-user-menu{min-width:0!important;margin-left:auto!important}
  .pa-user-badge{
    display:block!important;
    max-width:min(42vw,150px)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .page-title{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:9px!important;
    width:100%!important;
    margin-bottom:12px!important;
  }
  .page-title>div:first-child{width:100%!important;min-width:0!important}
  .page-title h1{font-size:clamp(1.2rem,5.4vw,1.48rem)!important;line-height:1.22!important;overflow-wrap:anywhere}
  .page-title p{font-size:.84rem!important;line-height:1.45!important;max-width:none!important}
  .page-title>.inline-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    max-width:none!important;
    gap:7px!important;
  }
  .page-title>.inline-actions>*{width:100%!important;min-width:0!important}
  .page-title>.inline-actions .btn{width:100%!important;min-height:42px!important;white-space:normal!important}

  .panel{width:100%!important;max-width:100%!important;padding:12px!important;margin-bottom:10px!important;border-radius:12px!important;overflow:visible}
  .panel>h2,.panel>h3{font-size:1rem!important;line-height:1.3!important}
  .dashboard-grid,.system-checks,.signature-uploader,.school-brand-editor,.student-photo-editor{grid-template-columns:1fr!important}

  .kpi-grid,.kpi-grid.compact-kpi,.compact-kpi,.sp-kpis{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  .kpi,.sp-kpi{min-width:0!important;padding:11px 9px!important;text-align:left!important}
  .kpi strong,.sp-kpi strong{font-size:1.28rem!important}
  .kpi span,.sp-kpi span{font-size:.75rem!important;line-height:1.3!important;overflow-wrap:anywhere}

  .toolbar,.filter-bar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:100%!important;
  }
  .toolbar>*{max-width:100%!important}
  .toolbar>.filters,.toolbar>.inline-actions,.filter-bar>.filters{width:100%!important;flex:none!important}

  .filters,.filters-compact,form.filters{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:stretch!important;
    width:100%!important;
    gap:8px!important;
  }
  .filters>*,.filters-compact>*,form.filters>*{
    grid-column:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex:none!important;
  }
  .filter-more{width:100%!important}
  .filter-more>summary{width:100%!important;min-height:44px!important}
  .filter-more-body{left:max(10px,env(safe-area-inset-left))!important;right:max(10px,env(safe-area-inset-right))!important;bottom:max(10px,env(safe-area-inset-bottom))!important;width:auto!important;max-height:72dvh!important}

  .form-grid,.school-brand-fields,.advanced-settings-body{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:10px!important;
  }
  .form-grid>*{grid-column:auto!important;min-width:0!important}
  .form-group.full,.simple-form-section{grid-column:1!important}
  .input,.select,.textarea,input,select,textarea{width:100%!important;min-width:0!important;font-size:16px!important}
  input[type="checkbox"],input[type="radio"]{width:auto!important;min-height:0!important}
  input[type="file"]{font-size:.9rem!important;overflow:hidden}
  .input-action{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .input-action .btn{width:100%!important}

  .form-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }
  .form-actions>*{min-width:0!important;width:100%!important}
  .form-actions .btn{width:100%!important;white-space:normal!important}

  /* Real card tables: no hidden horizontal table width on phones. */
  .table-wrap.is-card-table-wrap{
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  table.table.responsive-table{display:block!important;width:100%!important;min-width:0!important;background:transparent!important;border-collapse:separate!important}
  table.table.responsive-table thead{display:none!important}
  table.table.responsive-table tbody{display:grid!important;width:100%!important;gap:9px!important}
  table.table.responsive-table tr{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:7px 0!important;
    overflow:hidden!important;
    border:1px solid var(--line)!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 3px 12px rgba(11,47,74,.035)!important;
  }
  table.table.responsive-table td{
    display:grid!important;
    grid-template-columns:minmax(86px,31%) minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    padding:7px 10px!important;
    border:0!important;
    overflow:visible!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  table.table.responsive-table td::before{
    content:attr(data-label)!important;
    display:block!important;
    min-width:0!important;
    color:var(--muted)!important;
    font-size:.7rem!important;
    font-weight:850!important;
    line-height:1.3!important;
    letter-spacing:.035em!important;
    text-transform:uppercase!important;
    overflow-wrap:anywhere!important;
  }
  table.table.responsive-table td[colspan]{display:block!important}
  table.table.responsive-table td[colspan]::before{display:none!important}
  table.table.responsive-table td[data-label="Aksi"]{
    display:block!important;
    margin-top:4px!important;
    padding-top:9px!important;
    border-top:1px solid var(--line)!important;
  }
  table.table.responsive-table td[data-label="Aksi"]::before{display:none!important}
  table.table.responsive-table td[data-label="Aksi"]>.inline-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    gap:7px!important;
  }
  table.table.responsive-table td[data-label="Aksi"]>.inline-actions>*{width:100%!important;min-width:0!important}
  table.table.responsive-table td[data-label="Aksi"] .btn,
  table.table.responsive-table td[data-label="Aksi"] summary{width:100%!important;min-height:40px!important;justify-content:center!important;white-space:normal!important}

  .inline-actions{max-width:100%!important;min-width:0!important}
  .resource-item{align-items:flex-start!important;max-width:100%!important;overflow-wrap:anywhere}

  .workspace-tabs{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 10px!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain!important;
    scroll-snap-type:x proximity;
  }
  .workspace-tabs a{flex:0 0 auto!important;min-height:40px!important;scroll-snap-align:start}

  .pa-command{padding:64px 8px 8px!important;align-items:start!important}
  .pa-command-dialog{width:100%!important;max-width:620px!important;max-height:calc(100dvh - 78px)!important;overflow:hidden!important}
  .pa-command-results{max-height:calc(100dvh - 155px)!important}
  .pa-user-menu-panel{position:fixed!important;top:58px!important;right:10px!important;left:auto!important;max-width:calc(100vw - 20px)!important;min-width:min(220px,calc(100vw - 20px))!important}
}

@media(max-width:430px){
  .pa-admin-content{padding-left:9px!important;padding-right:9px!important}
  .page-title{flex-direction:column!important;align-items:stretch!important}
  .page-title>.inline-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .page-title>.inline-actions .btn{display:flex!important}
  .kpi-grid,.kpi-grid.compact-kpi,.compact-kpi,.sp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .form-actions{grid-template-columns:1fr!important}
  table.table.responsive-table td{grid-template-columns:1fr!important;gap:3px!important}
  table.table.responsive-table td::before{margin-bottom:1px!important}
  .pa-user-badge{max-width:34vw!important}
}

@media(max-width:350px){
  .kpi-grid,.kpi-grid.compact-kpi,.compact-kpi,.sp-kpis{grid-template-columns:1fr!important}
  .pa-user-badge{display:none!important}
}

/* ---------- PUBLIC / STUDENT APP ---------- */
@media(max-width:980px){
  .public-main{width:100%!important;max-width:100%!important}
  .public-sidebar{height:100dvh!important;padding-bottom:calc(12px + env(safe-area-inset-bottom))!important}
  .public-appbar{padding-left:max(9px,env(safe-area-inset-left))!important;padding-right:max(9px,env(safe-area-inset-right))!important}
}

@media(max-width:760px){
  .public-appbar{min-height:52px!important;gap:8px!important}
  .public-appbar-brand{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .public-main>.section{padding:10px 0 18px!important}
  .public-main .container{width:auto!important;max-width:none!important;margin-left:9px!important;margin-right:9px!important}
  .public-main .section-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;margin-bottom:10px!important}
  .public-main .section-head h1,.public-main .section-head h2{font-size:1.25rem!important;line-height:1.25!important;overflow-wrap:anywhere}
  .portal-filters{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;width:100%!important}
  .portal-filters>*{grid-column:auto!important;width:100%!important;min-width:0!important}
  .package-grid{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .package-grid .card{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    padding:12px!important;
  }
  .package-grid .card-actions{display:grid!important;grid-template-columns:1fr!important;margin-top:9px!important}
  .package-grid .card-actions .btn{width:100%!important;min-height:42px!important}
  .resource-list{gap:8px!important}
  .resource-item{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;padding:11px!important}
  .resource-item>*{min-width:0!important}
  .footer{padding:16px 0!important;margin-top:12px!important}
  .footer-grid{display:grid!important;grid-template-columns:1fr!important;gap:3px!important}
  .login-shell{padding:10px!important;align-items:start!important;padding-top:max(14px,env(safe-area-inset-top))!important}
  .login-card{width:100%!important;max-width:460px!important;padding:18px 14px!important;border-radius:16px!important}
}

@media(max-width:430px){
  .resource-item{grid-template-columns:1fr!important}
  .resource-item .badge{justify-self:start!important}
}

/* ---------- ACTIVITIES / QUIZ / PAPER / WORKSHEET ---------- */
@media(max-width:760px){
  .activity-public{min-height:0!important}
  .activity-join-card{max-width:none!important;margin:10px 0!important}
  .activity-code-form{grid-template-columns:1fr!important}
  .activity-code-form .btn{width:100%!important}
  .activity-run-head{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin:10px 0!important}
  .activity-run-progress{width:100%!important;min-width:0!important;margin:0!important}
  .activity-run-question{width:100%!important;max-width:100%!important}
  .activity-run-question h2{font-size:1.02rem!important}
  .activity-run-question .activity-stem{font-size:1rem!important;line-height:1.55!important}
  .activity-answer-option{padding:10px!important;border-radius:11px!important}
  .activity-run-actions{
    position:sticky!important;
    left:0!important;right:0!important;bottom:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    margin-top:12px!important;
    padding:8px!important;
    padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;
    border:1px solid var(--line,#d9e3ea)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.96)!important;
    backdrop-filter:blur(12px)!important;
    z-index:12!important;
  }
  .activity-run-actions>*{width:100%!important;min-width:0!important}

  .activity-question-row{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:start!important;
    padding:10px!important;
  }
  .activity-question-no{width:36px!important;height:36px!important}
  .activity-question-row>.inline-actions{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    padding-left:0!important;
    overflow:visible!important;
    gap:7px!important;
  }
  .activity-question-row>.inline-actions>*{width:100%!important;min-width:0!important}
  .option-edit-row{grid-template-columns:1fr!important;gap:7px!important}
  .option-key{justify-content:flex-start!important;padding:0 10px!important}
  .option-edit-row .option-mis{grid-column:auto!important}
  .activity-share-grid{grid-template-columns:1fr!important}
  .activity-big-code{font-size:clamp(1.7rem,10vw,2.5rem)!important;overflow-wrap:anywhere}
  .activity-dimension-grid{grid-template-columns:1fr!important}

  /* Worksheet canvas uses percentage coordinates, so it may safely scale to phone width. */
  .worksheet-studio-grid{grid-template-columns:1fr!important;gap:8px!important}
  .worksheet-tools{position:static!important;width:100%!important}
  .worksheet-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .worksheet-tool-grid>*{min-width:0!important;width:100%!important;white-space:normal!important}
  .worksheet-editor-panel{width:100%!important;max-width:100%!important;overflow:visible!important;padding:4px!important}
  .worksheet-canvas{width:100%!important;max-width:100%!important;min-width:0!important;margin:0 auto!important;touch-action:none}
  .worksheet-pages{max-width:100%!important;overscroll-behavior-inline:contain!important}
  .worksheet-dialog{width:calc(100vw - 16px)!important;max-width:none!important;max-height:calc(100dvh - 16px)!important;overflow:auto!important}
  .worksheet-dialog>form:first-child{padding:12px!important}
  .worksheet-upload-panel .toolbar{align-items:stretch!important}
  .worksheet-upload-panel input[type=file]{max-width:100%!important;width:100%!important}
  .worksheet-submitbar{bottom:0!important;padding:6px!important;padding-bottom:calc(6px + env(safe-area-inset-bottom))!important}
  .worksheet-submitbar>div{width:100%!important;border-radius:12px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .worksheet-submitbar>div>*{width:100%!important;min-width:0!important}
  .ws-join-lines{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;gap:5px!important}
  .ws-join-node{padding:7px 6px!important;font-size:.82rem!important;overflow-wrap:anywhere}

  /* Presenter becomes a compact vertical app on phones. */
  .paper-stage{min-height:100dvh!important;padding:10px!important;padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;gap:10px!important}
  .paper-stage-top{align-items:flex-start!important;gap:8px!important}
  .paper-stage-title{min-width:0!important}
  .paper-stage-title strong{font-size:1rem!important;overflow-wrap:anywhere}
  .paper-stage-title span{font-size:.82rem!important}
  .paper-stage-count{flex:0 0 auto!important;font-size:1.3rem!important}
  .paper-stage-question{align-content:start!important;overflow:auto!important;padding:4px 0!important}
  .paper-stage-number{margin-bottom:7px!important}
  .paper-stage-question h1{font-size:clamp(1.22rem,6vw,1.8rem)!important;line-height:1.28!important;margin-bottom:12px!important}
  .paper-stage-options{grid-template-columns:1fr!important;gap:8px!important}
  .paper-stage-option{padding:10px!important;gap:10px!important;border-radius:12px!important;font-size:.96rem!important}
  .paper-stage-option strong{min-width:38px!important;height:38px!important;border-radius:10px!important}
  .paper-stage-bottom{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;gap:8px!important}
  .paper-stage-controls{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .paper-stage-controls>*{width:100%!important;min-width:0!important;min-height:44px!important;padding:0 8px!important;text-align:center!important;white-space:normal!important}

  .paper-scanner{width:100%!important;max-width:none!important;padding:8px!important;padding-bottom:calc(8px + env(safe-area-inset-bottom))!important}
  .paper-scanner-head{align-items:flex-start!important;gap:8px!important}
  .paper-scanner-camera{width:100%!important;max-height:58dvh!important;border-radius:12px!important}
  .paper-scanner-status{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;gap:7px!important}
  .paper-scanner-status button{width:100%!important;min-height:44px!important}
  .paper-scan-student{grid-template-columns:1fr!important;padding:9px!important}
  .paper-scan-student .answer-buttons{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;gap:6px!important}
  .paper-scan-student button{width:100%!important;min-width:0!important;height:42px!important}
  .live-dist-row{grid-template-columns:34px minmax(0,1fr) 38px!important;gap:7px!important;font-size:.9rem!important}
}

@media(max-width:430px){
  .worksheet-tool-grid{grid-template-columns:1fr 1fr!important}
  .activity-run-actions,.paper-stage-controls,.worksheet-submitbar>div{grid-template-columns:1fr!important}
}

/* Dialogs and popovers can never escape the device viewport. */
dialog{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}
.floating-action-panel{max-width:calc(100vw - 20px)!important}

@media(orientation:landscape) and (max-height:520px) and (pointer:coarse){
  .pa-admin-top{position:relative!important}
  .paper-stage{padding:8px!important;grid-template-rows:auto minmax(0,1fr) auto!important}
  .paper-stage-question h1{font-size:1.2rem!important;margin-bottom:8px!important}
  .paper-stage-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .paper-stage-option{padding:7px 9px!important}
  .paper-scanner-camera{max-height:56dvh!important}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}


/* ===== SOURCE: assets/css/professional-ui-v37.css ===== */
/* Professional UI V37 — final visual/system pass. Progressive, business-logic neutral. */
:root{
  --ui-bg:#f2f6f9;
  --ui-bg-soft:#f7fafc;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f9fbfc;
  --ui-ink:#102f45;
  --ui-text:#17354a;
  --ui-muted:#647d8e;
  --ui-line:#d9e5ec;
  --ui-line-strong:#c8d9e3;
  --ui-primary:#0f788b;
  --ui-primary-strong:#0b6172;
  --ui-primary-soft:#e8f5f6;
  --ui-focus:#17a0b4;
  --ui-success:#23785e;
  --ui-warning:#a96816;
  --ui-danger:#b54747;
  --ui-r8:8px;
  --ui-r10:10px;
  --ui-r12:12px;
  --ui-r14:14px;
  --ui-r16:16px;
  --ui-r18:18px;
  --ui-shadow-xs:0 1px 2px rgba(16,47,69,.035);
  --ui-shadow-sm:0 5px 18px rgba(16,47,69,.055);
  --ui-shadow-md:0 12px 30px rgba(16,47,69,.08);
  --ui-shadow-float:0 18px 48px rgba(12,43,63,.16);
  --ui-ease:cubic-bezier(.2,.72,.25,1);
  --ui-content:1480px;
  --ui-control:44px;
}

html{scroll-padding-top:78px;-webkit-tap-highlight-color:transparent}
body{font-kerning:normal;text-rendering:optimizeLegibility}
::selection{background:#cceff1;color:#0b3f4b}

/* ---------- GLOBAL INTERACTION QUALITY ---------- */
:is(.app-shell-body,.login-shell) :is(a,button,input,select,textarea,summary){-webkit-tap-highlight-color:transparent}
.app-shell-body :is(a,button,summary,.btn){touch-action:manipulation}
.app-shell-body :is(button,.btn,a,summary,input,select,textarea):focus-visible{
  outline:3px solid color-mix(in srgb,var(--ui-focus) 27%,transparent);
  outline-offset:2px;
}
.app-shell-body :is(.input,.select,.textarea,input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  min-height:var(--ui-control);
  border-color:var(--ui-line-strong);
  border-radius:var(--ui-r10);
  background:var(--ui-surface);
  color:var(--ui-text);
  box-shadow:var(--ui-shadow-xs);
  transition:border-color 140ms var(--ui-ease),box-shadow 140ms var(--ui-ease),background-color 140ms var(--ui-ease);
}
.app-shell-body :is(.input,.select,.textarea,input:not([type="checkbox"]):not([type="radio"]),select,textarea):hover{border-color:#b8ccd8}
.app-shell-body :is(.input,.select,.textarea,input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus{
  border-color:#68bdc8;
  box-shadow:0 0 0 4px rgba(23,160,180,.11),var(--ui-shadow-xs);
}
.app-shell-body textarea{line-height:1.55;resize:vertical}
.app-shell-body :is(input,textarea)::placeholder{color:#8ea1ad;opacity:1}

.app-shell-body .btn{
  min-height:40px;
  border-radius:var(--ui-r10);
  font-weight:780;
  letter-spacing:-.005em;
  box-shadow:none;
  transform:none;
  transition:background-color 150ms var(--ui-ease),border-color 150ms var(--ui-ease),color 150ms var(--ui-ease),box-shadow 150ms var(--ui-ease),transform 100ms ease;
}
.app-shell-body .btn:hover{transform:none}
.app-shell-body .btn:active{transform:translateY(1px)}
.app-shell-body .btn-primary,
.app-shell-body .pa-top-create{
  background:linear-gradient(180deg,#16879a,#0f7487);
  border-color:#0f7487;
  color:#fff;
  box-shadow:0 5px 14px rgba(15,116,135,.18);
}
.app-shell-body .btn-primary:hover,
.app-shell-body .pa-top-create:hover{background:linear-gradient(180deg,#11798b,#0b6575);box-shadow:0 7px 18px rgba(15,116,135,.22)}
.app-shell-body .btn-outline{background:#fff;border-color:var(--ui-line-strong);color:var(--ui-text)}
.app-shell-body .btn-outline:hover{background:#f8fbfc;border-color:#afc6d3}
.app-shell-body .badge{border:1px solid transparent;font-weight:780;letter-spacing:.005em}
.app-shell-body .badge-published{border-color:#c8eadf}
.app-shell-body .badge-draft{border-color:#efdfb8}

/* ---------- ADMIN / TEACHER SHELL ---------- */
.pa-admin-body{background:var(--ui-bg)!important;color:var(--ui-text)}
.pa-admin-shell{isolation:isolate}
.pa-admin-sidebar{
  flex-basis:264px;width:264px;min-width:264px;max-width:264px;
  padding:14px 12px 12px;
  background:linear-gradient(180deg,#0b324b 0%,#0d3b56 52%,#0c344b 100%);
  box-shadow:10px 0 28px rgba(10,45,67,.065);
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
.pa-sidebar-brand{gap:10px;padding:5px 6px 14px;margin-bottom:9px}
.pa-sidebar-brand img{width:40px;height:40px;flex-basis:40px;border-radius:11px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.pa-sidebar-brand strong{font-size:.88rem;line-height:1.25;letter-spacing:.005em}
.pa-sidebar-brand small{margin-top:2px;font-size:.73rem;color:#acd0dc}
.pa-sidebar-close{width:32px;height:32px;flex-basis:32px;border-radius:9px;font-size:1.2rem}
.pa-side-nav{gap:3px;padding:1px 0 8px}
.pa-side-nav a{
  min-height:43px;
  gap:10px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:10px;
  color:#d7e9ef;
  font-size:.875rem;
  font-weight:700;
  line-height:1.2;
  transform:none;
  transition:background-color 140ms var(--ui-ease),color 140ms var(--ui-ease),border-color 140ms var(--ui-ease);
}
.pa-side-nav a:hover{transform:none;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.04)}
.pa-side-nav a.active{
  background:linear-gradient(90deg,rgba(53,166,184,.27),rgba(255,255,255,.085));
  box-shadow:inset 3px 0 0 #5fe0e5;
  color:#fff;
  border-color:rgba(116,224,229,.11);
}
.pa-nav-icon{width:23px!important;height:23px!important;flex-basis:23px!important;font-size:.92rem;opacity:.94}
.pa-nav-label{font-weight:inherit}
.pa-sidebar-footer{margin-top:auto;padding:10px 4px 2px;border-top:1px solid rgba(255,255,255,.09)}
.pa-sidebar-footer a{display:flex;align-items:center;gap:9px;min-height:39px;padding:7px 8px;border-radius:9px;color:#d7e9ef;font-size:.82rem}
.pa-sidebar-footer a:hover{background:rgba(255,255,255,.07);color:#fff}

.pa-admin-top{
  min-height:62px;
  padding:9px 18px;
  border-bottom-color:#dce7ee;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(135%) blur(16px);
  -webkit-backdrop-filter:saturate(135%) blur(16px);
  transition:box-shadow 160ms var(--ui-ease),background-color 160ms var(--ui-ease);
}
.ui-v37-scrolled .pa-admin-top{box-shadow:0 7px 20px rgba(16,47,69,.06);background:rgba(255,255,255,.97)}
.pa-admin-top-left{display:flex;align-items:center;gap:10px;min-width:0}
.pa-sidebar-toggle{display:grid;place-items:center;width:40px;height:40px;min-height:40px;border-color:var(--ui-line-strong);border-radius:10px;background:#fff;color:#294b60;font-size:0;box-shadow:var(--ui-shadow-xs)}
.pa-sidebar-toggle::before{content:"☰";font-size:17px;line-height:1}
.pa-top-role{font-size:.88rem;font-weight:760;color:#496779}
.pa-top-actions{display:flex;align-items:center;gap:8px;min-width:0}
.pa-command-trigger{
  display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;
  border:1px solid var(--ui-line-strong);border-radius:10px;background:#fff;color:#587184;
  box-shadow:var(--ui-shadow-xs);cursor:pointer;
}
.pa-command-trigger:hover{border-color:#b4cad6;background:#fbfdfe;color:#2d5065}
.pa-command-trigger kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border:1px solid #d6e2e9;border-radius:6px;background:#f5f8fa;color:#77909f;font:700 .72rem ui-monospace,SFMono-Regular,monospace}
.pa-top-create{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 13px;border:1px solid #0f7487;border-radius:10px;font-size:.86rem;font-weight:800}
.pa-user-menu{position:relative;min-width:0}
.pa-user-badge{display:flex;align-items:center;min-height:40px;padding:7px 11px;border:1px solid #dbe6ec;background:#edf4f7;color:#35576b;cursor:pointer}
.pa-user-menu[open] .pa-user-badge{background:#e6f0f4;border-color:#bfd4df}
.pa-user-menu-panel{
  border:1px solid var(--ui-line);border-radius:12px;background:#fff;box-shadow:var(--ui-shadow-float);overflow:hidden;
}
.pa-user-menu-panel a{min-height:41px;padding:9px 12px;font-size:.84rem}
.pa-user-menu-panel a:hover{background:#f3f8fa}

.pa-admin-content{max-width:var(--ui-content);padding:22px clamp(16px,2vw,28px) 34px}
.page-title{gap:16px;margin-bottom:18px;align-items:center}
.page-title h1{font-size:clamp(1.55rem,2vw,2rem);letter-spacing:-.032em;color:var(--ui-ink)}
.page-title p{max-width:900px;margin-top:.3rem;font-size:.9rem;line-height:1.5;color:var(--ui-muted)}
.page-title>.inline-actions{justify-content:flex-end}

.panel,
.lp-section,
.lp-work-card,
.lp-library-card,
.sp-section{
  border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-r16)!important;
  background:var(--ui-surface)!important;
  box-shadow:var(--ui-shadow-xs)!important;
}
.panel{padding:18px;margin-bottom:16px}
.panel:hover{border-color:#d3e0e8}
.panel h2,.panel h3{color:var(--ui-ink);letter-spacing:-.015em}

.kpi-grid{gap:12px;margin-bottom:18px}
.kpi{
  padding:16px;
  border:1px solid var(--ui-line);
  border-radius:14px;
  box-shadow:var(--ui-shadow-xs);
  background:linear-gradient(180deg,#fff,#fbfdfe);
}
.kpi strong{font-size:1.75rem;letter-spacing:-.035em;color:var(--ui-ink);font-variant-numeric:tabular-nums}
.kpi span{font-size:.82rem;color:var(--ui-muted)}

.toolbar,.filter-bar{gap:9px;margin-bottom:13px}
.toolbar h2,.toolbar h3{color:var(--ui-ink)}
.filters{gap:8px}
.check{border-color:var(--ui-line);background:#f9fbfc}
.admin-note{background:#eef8fa;border-left-color:#1b91a1}
.table-wrap{border-radius:12px;scrollbar-width:thin;scrollbar-color:#c5d5de transparent}
.table{font-size:.875rem}
.table th{padding:10px 12px;background:#f6f9fb;color:#49677a;font-size:.74rem;font-weight:820;letter-spacing:.025em;text-transform:none;white-space:nowrap}
.table td{padding:11px 12px;border-color:#e8eff3;vertical-align:middle}
.table tbody tr{transition:background-color 120ms ease}
.table tbody tr:hover{background:#fbfdfe}

.alert{border-radius:12px;box-shadow:var(--ui-shadow-xs)}
.form-group .label,.label{font-size:.82rem;font-weight:760;color:#466579}
.form-hint,.hint,.help-text{font-size:.78rem;color:#78909f}

.context-actions{
  display:flex;align-items:center;gap:6px;max-width:100%;margin-bottom:14px;padding:5px;
  border:1px solid var(--ui-line);border-radius:12px;background:#fff;box-shadow:var(--ui-shadow-xs);overflow-x:auto;scrollbar-width:none;
}
.context-actions::-webkit-scrollbar{display:none}
.context-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 10px;border-radius:8px;white-space:nowrap;font-size:.8rem;font-weight:760;color:#577285}
.context-actions a:hover{background:#f3f8fa;color:#244d62}
.context-actions a.active{background:var(--ui-primary-soft);color:#0b6575}
.context-actions .context-back{margin-right:2px;color:#35596e}

/* Workspace V37 */
.workspace-eyebrow{font-size:.69rem!important;letter-spacing:.13em!important;color:#678092!important}
.workspace-head{align-items:center;gap:14px}
.workspace-launchers{gap:10px;margin-bottom:14px}
.workspace-launcher{
  min-height:128px;padding:16px;border-radius:14px;box-shadow:var(--ui-shadow-xs);
  transition:border-color 150ms var(--ui-ease),box-shadow 150ms var(--ui-ease),transform 150ms var(--ui-ease);
}
.workspace-launcher:hover{border-color:#9fc5cf;box-shadow:var(--ui-shadow-sm);transform:translateY(-1px)}
.workspace-launcher>span{width:36px;height:36px;border-radius:10px}
.workspace-launcher strong{letter-spacing:-.01em;color:#123e4c}
.workspace-launcher small{font-size:.72rem;line-height:1.3}
.workspace-tools{gap:7px!important;margin-bottom:14px!important}
.workspace-tools a,.workspace-categories>a{border-radius:9px!important;font-size:.78rem!important}
.workspace-catalog{border-radius:16px!important;box-shadow:var(--ui-shadow-xs)!important}
.workspace-filters{gap:8px!important}
.workspace-resource-grid{gap:11px}
.workspace-resource-card{
  padding:15px;border-radius:13px;
  transition:border-color 140ms var(--ui-ease),box-shadow 140ms var(--ui-ease),transform 140ms var(--ui-ease);
}
.workspace-resource-card:hover{border-color:#c1d5df;box-shadow:var(--ui-shadow-sm);transform:translateY(-1px)}
.workspace-resource-card h3{line-height:1.38}
.workspace-card-actions .btn{min-height:39px}
.workspace-status{font-weight:720}

/* Command palette + floating menus */
.pa-command{backdrop-filter:blur(2px)}
.pa-command-backdrop{background:rgba(9,32,47,.44)!important}
.pa-command-dialog{border:1px solid #cfdee6!important;border-radius:16px!important;background:#fff!important;box-shadow:0 24px 64px rgba(9,32,47,.22)!important;overflow:hidden}
.pa-command-dialog>.input{margin:10px;width:calc(100% - 20px)!important}
.pa-command-results{padding:0 8px 8px}
.pa-command-results a{border-radius:9px!important}
.floating-action-panel,.row-actions-menu__panel,.action-menu-pop{border:1px solid var(--ui-line)!important;border-radius:11px!important;background:#fff!important;box-shadow:var(--ui-shadow-float)!important}
.pa-action-menu-backdrop{backdrop-filter:blur(2px)}

/* ---------- PUBLIC / STUDENT SHELL ---------- */
.public-app-body{background:var(--ui-bg)!important;color:var(--ui-text)}
.public-sidebar{
  flex-basis:224px;width:224px;padding:12px 9px;
  background:linear-gradient(180deg,#0b324b,#0c3b56 62%,#0d344b);
  box-shadow:8px 0 26px rgba(10,45,67,.055);
}
.public-brand{gap:9px;padding:4px 6px 12px;margin-bottom:7px;font-size:.8rem}
.public-brand .brand-logo{width:36px;height:36px;flex-basis:36px;border-radius:10px}
.public-brand small{display:block;margin-top:1px;color:#acd0dc;font-size:.69rem;font-weight:590}
.public-nav,.public-nav-utility{gap:2px}
.public-nav a,.public-nav-utility a{min-height:41px;padding:7px 9px;border:1px solid transparent;border-radius:9px;font-size:.82rem}
.public-nav a.active{background:linear-gradient(90deg,rgba(53,166,184,.25),rgba(255,255,255,.08));border-color:rgba(116,224,229,.1);box-shadow:inset 3px 0 0 #5fe0e5}
.public-nav a:hover,.public-nav-utility a:hover{background:rgba(255,255,255,.075)}
.public-appbar{
  min-height:58px;padding:8px 14px;border-color:#dce7ee;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(135%) blur(16px);-webkit-backdrop-filter:saturate(135%) blur(16px);
  transition:box-shadow 160ms var(--ui-ease),background-color 160ms var(--ui-ease);
}
.ui-v37-scrolled .public-appbar{box-shadow:0 7px 20px rgba(16,47,69,.06);background:rgba(255,255,255,.97)}
.public-sidebar-toggle{width:40px;height:40px;min-height:40px;border-radius:10px;box-shadow:var(--ui-shadow-xs)}
.public-appbar-brand{font-size:.86rem;font-weight:760;color:#486778}
.public-main>.section{padding:20px 0 30px}
.public-main .container{width:min(var(--ui-content),calc(100% - 32px))}
.public-main .section-head{margin-bottom:14px}
.public-main .section-head h1,.public-main .section-head h2{color:var(--ui-ink);letter-spacing:-.028em}
.public-main .card{border-radius:14px;border-color:var(--ui-line);box-shadow:var(--ui-shadow-xs);transition:border-color 140ms var(--ui-ease),box-shadow 140ms var(--ui-ease)}
.public-main .card:hover{transform:none;border-color:#c6d9e3;box-shadow:var(--ui-shadow-sm)}
.public-main .footer{border-top:1px solid #dfe9ef;background:rgba(255,255,255,.58)}
.student-surface .public-appbar{background:rgba(255,255,255,.95)}

/* Learning platform families: calm, coherent surfaces */
:is(.lp-hero,.sp-hero){border-radius:16px!important;box-shadow:var(--ui-shadow-xs)!important}
:is(.lp-create-card,.lp-experience-card,.lp-class-card,.lp-convert-card){border-radius:14px!important;box-shadow:var(--ui-shadow-xs)!important;transition:border-color 140ms var(--ui-ease),box-shadow 140ms var(--ui-ease),transform 140ms var(--ui-ease)!important}
:is(.lp-create-card,.lp-experience-card,.lp-class-card,.lp-convert-card):hover{transform:translateY(-1px)!important;box-shadow:var(--ui-shadow-sm)!important}
.lp-section-head,.sp-section-head{gap:10px}
.lp-chip{border-radius:999px!important}

/* ---------- MOBILE/TABLET PRECISION ---------- */
@media(max-width:1080px){
  .pa-admin-sidebar{width:min(286px,88vw);max-width:min(286px,88vw);padding-top:max(12px,env(safe-area-inset-top))}
  .public-sidebar{width:min(278px,88vw);padding-top:max(12px,env(safe-area-inset-top))}
  .pa-sidebar-backdrop,.public-sidebar-backdrop{background:rgba(6,27,41,.48);backdrop-filter:blur(3px)}
}
@media(max-width:900px){
  .workspace-launcher{min-height:116px}
}
@media(max-width:760px){
  :root{--ui-control:44px}
  html{scroll-padding-top:66px}
  .pa-admin-top{min-height:56px;padding:7px max(9px,env(safe-area-inset-right)) 7px max(9px,env(safe-area-inset-left))}
  .pa-admin-content{padding:14px max(10px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important}
  .pa-top-role{font-size:.83rem}
  .pa-command-trigger{width:40px!important;min-width:40px!important;padding:0!important;justify-content:center}
  .pa-command-trigger>span:nth-child(2),.pa-command-trigger kbd{display:none}
  .pa-top-create{min-width:40px;padding:0 10px;font-size:.82rem}
  .pa-user-badge{max-width:34vw!important;padding-inline:9px;font-size:.78rem}
  .page-title{gap:9px;margin-bottom:13px}
  .page-title h1{font-size:clamp(1.32rem,6.3vw,1.6rem)!important}
  .page-title p{font-size:.82rem!important}
  .panel{padding:13px!important;border-radius:13px!important;margin-bottom:10px!important}
  .kpi-grid{gap:8px}.kpi{padding:12px}.kpi strong{font-size:1.45rem}.kpi span{font-size:.75rem}
  .table-wrap{border-radius:0}
  table.table.responsive-table tr{border-radius:11px!important;box-shadow:var(--ui-shadow-xs)!important}
  table.table.responsive-table td{padding:7px 9px!important}
  .context-actions{margin:0 0 10px;padding:4px;border-radius:10px;scroll-snap-type:x proximity}
  .context-actions a{min-height:38px;scroll-snap-align:start}
  .workspace-launchers{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .workspace-launcher{min-height:112px;padding:13px;border-radius:13px}
  .workspace-launcher>span{width:34px;height:34px}
  .workspace-launcher strong{font-size:.86rem}
  .workspace-tools{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;scroll-snap-type:x proximity;padding-bottom:2px;scrollbar-width:none}
  .workspace-tools::-webkit-scrollbar{display:none}
  .workspace-tools a{flex:0 0 auto;scroll-snap-align:start}
  .workspace-resource-grid{grid-template-columns:1fr;gap:9px}
  .workspace-resource-card{padding:13px}
  .public-appbar{min-height:54px;padding:7px max(9px,env(safe-area-inset-right)) 7px max(9px,env(safe-area-inset-left))}
  .public-main>.section{padding:12px 0 22px!important}
  .public-main .container{width:auto!important;margin-inline:max(9px,env(safe-area-inset-left))!important}
  .public-main .section-head{gap:7px;margin-bottom:10px}
  .public-main .card{border-radius:12px}
  .pa-command{padding:max(64px,calc(48px + env(safe-area-inset-top))) 8px max(8px,env(safe-area-inset-bottom))!important}
}
@media(max-width:430px){
  .pa-admin-top{gap:6px}
  .pa-admin-top-left{gap:7px}
  .pa-sidebar-toggle,.pa-command-trigger{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
  .pa-top-create{min-height:38px;min-width:38px;padding-inline:9px}
  .pa-top-role{font-size:.8rem}
  .pa-user-badge{max-width:31vw!important;min-height:38px}
  .workspace-launchers{gap:8px}
  .workspace-launcher{min-height:108px;padding:12px}
  .workspace-launcher small{font-size:.67rem}
  .workspace-card-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .workspace-card-actions .btn{width:100%;min-width:0}
}
@media(max-width:350px){
  .pa-top-role{display:none}
  .pa-user-badge{display:flex!important;max-width:30vw!important}
  .workspace-launchers{grid-template-columns:1fr}
  .workspace-launcher{min-height:0}
}

/* ---------- MOTION / PERFORMANCE ---------- */
@media(hover:none){
  .workspace-launcher:hover,.workspace-resource-card:hover,:is(.lp-create-card,.lp-experience-card,.lp-class-card,.lp-convert-card):hover{transform:none!important;box-shadow:var(--ui-shadow-xs)!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .app-shell-body *, .app-shell-body *::before,.app-shell-body *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media print{
  .pa-admin-top,.pa-admin-sidebar,.pa-sidebar-backdrop,.public-appbar,.public-sidebar,.public-sidebar-backdrop,.pa-scroll-top{display:none!important}
  .pa-admin-main,.public-main{width:100%!important}
  .pa-admin-content,.public-main .container{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
  .panel,.card,.lp-section{box-shadow:none!important}
}

/* ---------- LOGIN / INSTALL / EMPTY APP STATES ---------- */
.login-shell{background:
  radial-gradient(circle at 12% 10%,rgba(38,158,177,.09),transparent 30%),
  radial-gradient(circle at 88% 88%,rgba(20,92,117,.08),transparent 32%),
  #eef4f7!important;
}
.login-card{border:1px solid #d7e4eb!important;border-radius:18px!important;box-shadow:0 18px 52px rgba(12,49,72,.105)!important}
.login-card h1{letter-spacing:-.03em;color:var(--ui-ink)}
.login-card .brand{margin-bottom:16px}
.login-card .btn-primary{min-height:44px;border-radius:10px;background:linear-gradient(180deg,#16879a,#0f7487);box-shadow:0 6px 16px rgba(15,116,135,.18)}
.login-card :is(.input,.select,.textarea,input,select,textarea){min-height:44px;border-color:#cbdce6;border-radius:10px}
.login-card :is(.input,.select,.textarea,input,select,textarea):focus{border-color:#68bdc8;box-shadow:0 0 0 4px rgba(23,160,180,.11)}

/* ---------- LIVE / PAPER / SCANNER EXPERIENCE ---------- */
.paper-stage-body,.paper-scanner-body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;text-rendering:optimizeLegibility}
.paper-stage-body{background:#07151f!important}
.paper-stage{isolation:isolate}
.paper-stage-top{backdrop-filter:saturate(125%) blur(14px);-webkit-backdrop-filter:saturate(125%) blur(14px)}
.paper-stage-title strong{letter-spacing:-.018em}
.paper-stage-count{font-variant-numeric:tabular-nums}
.paper-stage-options>*{border-radius:14px!important;transition:transform 110ms ease,background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease}
.paper-stage-options>*:active{transform:translateY(1px)}
.paper-stage-controls :is(button,a){min-height:42px;border-radius:10px!important;font-weight:760}
.paper-stage-bottom{padding-bottom:max(12px,env(safe-area-inset-bottom))}
.paper-pair-dialog,.paper-remote-dialog,#joinDialog{border:1px solid rgba(255,255,255,.16)!important;box-shadow:0 24px 68px rgba(0,0,0,.30)!important}
.paper-scanner{padding-bottom:env(safe-area-inset-bottom)}
.paper-scanner-head{padding-top:max(10px,env(safe-area-inset-top))}
.paper-scanner-camera{overflow:hidden;border-radius:16px!important;box-shadow:0 12px 36px rgba(0,0,0,.18)}
.paper-scan-controls{padding-bottom:max(10px,env(safe-area-inset-bottom))}
.paper-scan-controls button,.paper-scanner-status button,.paper-remote-dialog button{min-height:42px;border-radius:10px}
@media(max-width:640px){
  .paper-stage-controls{gap:6px}
  .paper-stage-controls :is(button,a){min-height:40px;padding-inline:10px;font-size:.78rem}
  .paper-scanner-camera{border-radius:12px!important}
}


/* ===== SOURCE: assets/css/ui-components-v38.css ===== */
/*
 * UI Components V38 — Module 1 Foundation
 * Shared interaction, accessibility and component contract for Admin, Teacher,
 * Student and standalone learning surfaces. Loaded after legacy bundles so this
 * file is the single final authority for common controls and states.
 */
:root{
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:12px;
  --ui-space-4:16px;
  --ui-space-5:20px;
  --ui-space-6:24px;
  --ui-space-8:32px;
  --ui-space-10:40px;
  --ui-radius-sm:8px;
  --ui-radius-md:12px;
  --ui-radius-lg:16px;
  --ui-radius-xl:20px;
  --ui-control-sm:36px;
  --ui-control-md:44px;
  --ui-control-lg:50px;
  --ui-font-xs:.75rem;
  --ui-font-sm:.84rem;
  --ui-font-md:.94rem;
  --ui-font-lg:1.08rem;
  --ui-layer-dropdown:220;
  --ui-layer-sticky:240;
  --ui-layer-backdrop:300;
  --ui-layer-dialog:320;
  --ui-layer-toast:360;
  --ui-shadow-control:0 1px 2px rgba(15,45,65,.035);
  --ui-shadow-card:0 6px 22px rgba(15,45,65,.055);
  --ui-shadow-pop:0 20px 56px rgba(8,35,53,.18);
  --ui-transition-fast:120ms cubic-bezier(.2,.72,.25,1);
  --ui-transition:170ms cubic-bezier(.2,.72,.25,1);
}

/* --- Structural accessibility ------------------------------------------------ */
.pa-skip-link{
  position:fixed;z-index:9999;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));
  transform:translateY(-150%);padding:10px 14px;border:2px solid #fff;border-radius:10px;
  background:#0b324b;color:#fff;font-weight:800;text-decoration:none;box-shadow:var(--ui-shadow-pop);
  transition:transform var(--ui-transition-fast);
}
.pa-skip-link:focus{transform:translateY(0);outline:3px solid rgba(95,224,229,.45);outline-offset:2px}
.pa-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
[hidden]{display:none!important}

/* --- Page context and shell precision ---------------------------------------- */
.pa-top-context{display:grid;min-width:0;line-height:1.15}
.pa-top-context small{font-size:.69rem;font-weight:730;color:#78909f;text-transform:uppercase;letter-spacing:.055em}
.pa-top-context strong{max-width:min(42vw,520px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-ink,#102f45);font-size:.88rem;font-weight:820;letter-spacing:-.01em}
.pa-admin-top-left>.pa-top-role{display:none}
.pa-user-badge::before{
  content:attr(data-initials);display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;margin-right:7px;
  border-radius:8px;background:#dbecef;color:#0f6675;font-size:.67rem;font-weight:900;letter-spacing:.02em
}
.pa-user-badge{gap:0;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.public-appbar{gap:10px}
.public-appbar-context{display:grid;min-width:0;line-height:1.12}
.public-appbar-context small{font-size:.68rem;color:#7a919f;font-weight:720;text-transform:uppercase;letter-spacing:.05em}
.public-appbar-context strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-ink,#102f45);font-size:.86rem;font-weight:820}
#main-content{min-width:0}

/* --- Canonical buttons and controls ----------------------------------------- */
.app-shell-body :is(.btn,button,input,select,textarea,summary),
.login-shell :is(.btn,button,input,select,textarea,summary){font-family:inherit}
.app-shell-body .btn,.login-shell .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 13px;line-height:1.1;white-space:nowrap}
.app-shell-body .btn-sm,.login-shell .btn-sm{min-height:var(--ui-control-sm);padding:7px 10px;font-size:.78rem}
.app-shell-body .btn-lg,.login-shell .btn-lg{min-height:var(--ui-control-lg);padding:11px 17px;font-size:.95rem}
.app-shell-body .btn-danger,.login-shell .btn-danger{border-color:#dcb5b5;background:#fff7f7;color:#9b3434;box-shadow:none}
.app-shell-body .btn-danger:hover,.login-shell .btn-danger:hover{border-color:#ca9292;background:#fff0f0;color:#852c2c}
.app-shell-body .btn-success,.login-shell .btn-success{border-color:#c4e1d7;background:#f3fbf8;color:#1f6d58}
.app-shell-body .btn-icon,.login-shell .btn-icon{width:40px;min-width:40px;padding:0}
.app-shell-body :is(button,.btn,[role="button"]):disabled,.login-shell :is(button,.btn,[role="button"]):disabled{cursor:not-allowed;opacity:.55;filter:saturate(.7);box-shadow:none!important;transform:none!important}
.app-shell-body :is(input,select,textarea)[aria-invalid="true"],.login-shell :is(input,select,textarea)[aria-invalid="true"]{border-color:#d58d8d!important;box-shadow:0 0 0 4px rgba(181,71,71,.09)!important}
.app-shell-body :is(input,select,textarea):disabled{background:#f1f5f7;color:#7b8d98;cursor:not-allowed}
.app-shell-body input[type="checkbox"],.app-shell-body input[type="radio"]{accent-color:var(--ui-primary,#0f788b)}

/* --- Form rhythm ------------------------------------------------------------- */
.form-grid{row-gap:14px}
.form-group{min-width:0}
.form-group>.label,.form-group>label>.label{display:block;margin-bottom:6px}
.form-group .help,.form-group .hint,.form-hint{display:block;margin-top:6px;line-height:1.45}
.form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:4px}
.form-actions.is-sticky{position:sticky;z-index:20;bottom:max(8px,env(safe-area-inset-bottom));padding:10px;border:1px solid var(--ui-line,#d9e5ec);border-radius:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(15,45,65,.11)}
.field-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.field-row>*{grid-column:span 6}
.field-row>.full{grid-column:1/-1}

/* --- Canonical panels/cards -------------------------------------------------- */
.ui-card{border:1px solid var(--ui-line,#d9e5ec);border-radius:var(--ui-radius-lg);background:#fff;box-shadow:var(--ui-shadow-control);padding:18px}
.ui-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.ui-card-header h2,.ui-card-header h3{margin:0;color:var(--ui-ink,#102f45)}
.ui-card-header p{margin:4px 0 0;color:var(--ui-muted,#647d8e);font-size:.84rem;line-height:1.45}
.ui-stack{display:grid;gap:12px}
.ui-inline{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.ui-divider{height:1px;border:0;background:var(--ui-line,#d9e5ec);margin:16px 0}

/* --- Empty, loading and error states ---------------------------------------- */
.empty,.ui-empty,.ui-error,.ui-loading{
  min-height:112px;display:grid;place-items:center;align-content:center;gap:6px;padding:22px;
  border:1px dashed #c6d7e1;border-radius:14px;background:#f9fbfc;color:#637b8a;text-align:center;line-height:1.5
}
.empty.compact,.ui-empty.compact,.ui-error.compact,.ui-loading.compact{min-height:70px;padding:14px}
.ui-empty strong,.ui-error strong,.ui-loading strong{color:var(--ui-ink,#102f45)}
.ui-error{border-color:#e4c4c4;background:#fff8f8;color:#8b4d4d}
.ui-loading{border-style:solid}
.ui-skeleton{position:relative;overflow:hidden;border-radius:9px;background:#eaf0f3;color:transparent!important;user-select:none}
.ui-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent);animation:uiSkeleton 1.25s ease-in-out infinite}
@keyframes uiSkeleton{to{transform:translateX(100%)}}

/* --- Alerts and toast -------------------------------------------------------- */
.alert{position:relative;padding-right:42px!important;line-height:1.45}
.alert .ui-alert-close{position:absolute;top:50%;right:8px;translate:0 -50%;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;font-size:1rem}
.alert .ui-alert-close:hover{background:rgba(0,0,0,.055)}
.pa-toast-region{position:fixed;z-index:var(--ui-layer-toast);top:max(72px,calc(env(safe-area-inset-top) + 12px));right:max(12px,env(safe-area-inset-right));display:grid;gap:8px;width:min(390px,calc(100vw - 24px));pointer-events:none}
.pa-toast{pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px 12px 12px 13px;border:1px solid #d4e1e8;border-radius:13px;background:#fff;color:#24485d;box-shadow:var(--ui-shadow-pop);animation:uiToastIn .18s ease-out}
.pa-toast[data-type="success"]{border-left:4px solid #2d846b}
.pa-toast[data-type="warning"]{border-left:4px solid #b07727}
.pa-toast[data-type="danger"],.pa-toast[data-type="error"]{border-left:4px solid #b54747}
.pa-toast__icon{font-weight:900;line-height:1.35}.pa-toast__body{min-width:0;font-size:.84rem;line-height:1.45}.pa-toast__close{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:#657b89;cursor:pointer}.pa-toast__close:hover{background:#f1f5f7}
.pa-toast.is-leaving{opacity:0;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease}
@keyframes uiToastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- Universal dialog ------------------------------------------------------- */
.pa-ui-dialog{width:min(480px,calc(100vw - 24px));max-height:min(82dvh,680px);margin:auto;padding:0;border:1px solid #d1e0e8;border-radius:18px;background:#fff;color:var(--ui-text,#17354a);box-shadow:0 28px 80px rgba(5,31,49,.26);overflow:hidden}
.pa-ui-dialog:not([open]){display:none}.pa-ui-dialog[open]{display:block}
.pa-ui-dialog::backdrop{background:rgba(6,26,40,.52);backdrop-filter:blur(3px)}
.pa-ui-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 11px}
.pa-ui-dialog__head h2{margin:0;color:var(--ui-ink,#102f45);font-size:1.05rem;letter-spacing:-.018em}
.pa-ui-dialog__close{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border:0;border-radius:9px;background:#f2f6f8;color:#4f6b7b;cursor:pointer;font-size:1.08rem}
.pa-ui-dialog__body{padding:2px 18px 17px;color:#587181;font-size:.9rem;line-height:1.6;overflow:auto}
.pa-ui-dialog__body p{margin:0}.pa-ui-dialog__body p+p{margin-top:8px}
.pa-ui-dialog__actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 17px;border-top:1px solid #e5edf1;background:#fbfcfd}
.pa-ui-dialog[data-tone="danger"] .pa-ui-dialog__head h2{color:#8d3434}
body.pa-dialog-open{overflow:hidden}

/* --- Busy and submission state --------------------------------------------- */
.ui-is-busy{position:relative;pointer-events:none;opacity:.82}
.ui-is-busy::after{content:"";width:15px;height:15px;flex:0 0 15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:uiSpin .65s linear infinite}
form[data-ui-submitting="1"] :is(button[type="submit"],input[type="submit"]){pointer-events:none}
@keyframes uiSpin{to{transform:rotate(360deg)}}

/* --- Table/data grid contract ---------------------------------------------- */
.table-wrap{position:relative;max-width:100%;overflow:auto;overscroll-behavior-inline:contain}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table :is(th,td){overflow-wrap:anywhere}
.table th[scope="col"]{position:relative}
.table tbody tr:focus-within{background:#f8fbfc}
.table .cell-actions{white-space:nowrap}
.ui-table-count{font-variant-numeric:tabular-nums}

/* --- Filters/toolbars ------------------------------------------------------- */
.ui-filterbar,.filter-bar{display:flex;align-items:end;flex-wrap:wrap;gap:8px;padding:10px;border:1px solid var(--ui-line,#d9e5ec);border-radius:13px;background:#fbfdfe}
.ui-filterbar>.form-group,.filter-bar>.form-group{margin:0;min-width:150px;flex:1 1 180px}
.ui-filterbar>.form-actions,.filter-bar>.form-actions{margin:0;flex:0 0 auto}
.toolbar{align-items:center}
.toolbar>.inline-actions{margin-left:auto}

/* --- Menus, popovers and command palette ----------------------------------- */
.pa-user-menu-panel,.floating-action-panel,.row-actions-menu__panel,.action-menu-pop{animation:uiPopIn var(--ui-transition-fast);transform-origin:top right}
@keyframes uiPopIn{from{opacity:0;transform:translateY(-3px) scale(.985)}to{opacity:1;transform:none}}
.pa-command-dialog{border:1px solid #cfdee7!important;border-radius:16px!important;box-shadow:var(--ui-shadow-pop)!important;overflow:hidden}
.pa-command-results{scrollbar-width:thin}
.pa-command-result{min-height:48px!important}
.pa-command-result:focus-visible{outline:0!important;box-shadow:inset 0 0 0 3px rgba(23,160,180,.16)}

/* --- Native dialog normalisation ------------------------------------------- */
dialog:not(.pa-ui-dialog){max-width:calc(100vw - 24px)}
dialog:not(.pa-ui-dialog)::backdrop{background:rgba(6,26,40,.48);backdrop-filter:blur(2px)}

/* --- Motion, density and responsive rules ---------------------------------- */
.app-density-compact{--ui-control:40px;--ui-control-md:40px}
.app-density-compact .panel{padding:14px}.app-density-compact .table td{padding-block:8px}.app-density-compact .table th{padding-block:8px}
@media(max-width:760px){
  .pa-top-context small{display:none}.pa-top-context strong{max-width:30vw;font-size:.8rem}
  .pa-user-badge::before{margin-right:0}.pa-user-badge{font-size:0!important;padding-inline:7px!important;max-width:none!important}
  .field-row{grid-template-columns:1fr}.field-row>*{grid-column:1}
  .ui-filterbar,.filter-bar{align-items:stretch;padding:8px}.ui-filterbar>.form-group,.filter-bar>.form-group{flex:1 1 100%;min-width:0}
  .ui-filterbar>.form-actions,.filter-bar>.form-actions{width:100%}.ui-filterbar>.form-actions>.btn,.filter-bar>.form-actions>.btn{flex:1 1 auto}
  .toolbar{align-items:flex-start}.toolbar>.inline-actions{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .pa-toast-region{top:auto;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));width:auto}
  .pa-ui-dialog{width:calc(100vw - 16px);max-height:calc(var(--pa-viewport-height,100dvh) - 24px);border-radius:16px}
  .pa-ui-dialog__head{padding:15px 14px 10px}.pa-ui-dialog__body{padding:2px 14px 14px}.pa-ui-dialog__actions{padding:11px 14px max(14px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr}
  .pa-ui-dialog__actions .btn{width:100%}
  .form-actions>.btn{min-height:42px}
}
@media(max-width:430px){
  .pa-top-context{display:none}.public-appbar-context small{display:none}.public-appbar-context strong{font-size:.8rem}
  .pa-ui-dialog__actions{grid-template-columns:1fr}.pa-ui-dialog__actions .btn[data-ui-confirm-ok]{order:-1}
}
@media(pointer:coarse){
  :is(.app-shell-body,.login-shell) :is(button,.btn,a[role="button"],summary){min-height:max(40px,var(--ui-control-sm))}
  .action-menu-pop a,.action-menu-pop button,.row-actions-menu__panel a,.row-actions-menu__panel button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .ui-skeleton::after,.ui-is-busy::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .pa-toast,.pa-user-menu-panel,.floating-action-panel,.row-actions-menu__panel,.action-menu-pop{animation:none!important}
}
@media print{
  .pa-skip-link,.pa-toast-region,.pa-ui-dialog{display:none!important}
}

/* --- Page transition & navigation loader — Module 2 ------------------------ */
.pa-page-loader{position:fixed;z-index:420;inset:0;display:grid;place-items:center;padding:20px;background:rgba(244,249,251,.72);backdrop-filter:blur(7px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 150ms cubic-bezier(.2,.75,.25,1),visibility 0s linear 150ms}
.pa-page-loader.is-active{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.pa-page-loader__progress{position:absolute;top:0;left:0;width:100%;height:3px;overflow:hidden;background:rgba(15,126,139,.08)}
.pa-page-loader__progress::after{content:"";display:block;width:34%;height:100%;border-radius:999px;background:linear-gradient(90deg,transparent,#0f7f8d,#39a9ad,transparent);animation:uiPageProgress .95s cubic-bezier(.4,0,.2,1) infinite}
.pa-page-loader__card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;min-width:min(310px,calc(100vw - 36px));padding:13px 15px;border:1px solid rgba(202,222,230,.9);border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 24px 70px rgba(10,39,58,.16)}
.pa-page-loader__mark{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#e9f7f7,#eef5f8);overflow:hidden}
.pa-page-loader__mark::before,.pa-page-loader__mark::after{content:"";position:absolute;border-radius:50%;border:2px solid transparent}
.pa-page-loader__mark::before{width:25px;height:25px;border-top-color:#0f7f8d;border-right-color:#0f7f8d;animation:uiSpin .75s linear infinite}
.pa-page-loader__mark::after{width:11px;height:11px;background:#0f7f8d;box-shadow:0 0 0 5px rgba(15,127,141,.08)}
.pa-page-loader__copy{display:grid;gap:2px;line-height:1.2}.pa-page-loader__copy strong{color:#15384d;font-size:.84rem}.pa-page-loader__copy span{color:#758b97;font-size:.7rem}
.ui-page-enter :is(.pa-admin-content,.public-main,.student-main,.login-card,.install-shell){opacity:0;transform:translateY(5px)}
.ui-page-ready :is(.pa-admin-content,.public-main,.student-main,.login-card,.install-shell){opacity:1;transform:none;transition:opacity 230ms cubic-bezier(.2,.75,.25,1),transform 260ms cubic-bezier(.2,.75,.25,1)}
body.ui-navigating :is(.pa-admin-content,.public-main,.student-main){opacity:.7;transform:translateY(-2px);transition:opacity 100ms ease,transform 100ms ease;pointer-events:none}
@keyframes uiPageProgress{0%{transform:translateX(-130%)}100%{transform:translateX(390%)}}
@media(max-width:560px){.pa-page-loader{align-items:end;padding:12px max(10px,env(safe-area-inset-right)) max(12px,calc(env(safe-area-inset-bottom) + 10px)) max(10px,env(safe-area-inset-left));background:rgba(241,247,249,.58)}.pa-page-loader__card{width:100%;min-width:0;border-radius:15px}}
@media(prefers-reduced-motion:reduce){.pa-page-loader,.ui-page-ready :is(.pa-admin-content,.public-main,.student-main,.login-card,.install-shell),body.ui-navigating :is(.pa-admin-content,.public-main,.student-main){transition:none!important}.pa-page-loader__progress::after,.pa-page-loader__mark::before{animation:none!important}.ui-page-enter :is(.pa-admin-content,.public-main,.student-main,.login-card,.install-shell){opacity:1;transform:none}}
@media print{.pa-page-loader{display:none!important}}