:root{
  --sidebar-width:268px;
  --bg:#eef3f9;
  --surface:#ffffff;
  --surface-2:#f7faff;
  --surface-dark:#0b1220;
  --sidebar:#070b14;
  --sidebar-2:#111827;
  --text:#172033;
  --muted:#6f7e93;
  --line:#dce5f0;
  --primary:#2563eb;
  --cyan:#06b6d4;
  --purple:#8b5cf6;
  --success:#16a34a;
  --warning:#d97706;
  --danger:#dc2626;
  --shadow:0 18px 55px rgba(15,23,42,.09);
}
:root[data-theme="dark"]{
  --bg:#080d18;--surface:#101827;--surface-2:#111c2d;--text:#eaf2ff;--muted:#91a0b6;--line:#26354a;
}
*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
a{color:var(--primary)}
.min-w-0{min-width:0}
.public-navbar{
  height:58px;display:flex;align-items:center;padding:0 clamp(1rem,3vw,2.5rem);
  background:#070b14;border-bottom:1px solid rgba(148,163,184,.15)
}
.public-brand{display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;font-weight:900;letter-spacing:.02em}
.public-brand span,.brand-logo{
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--cyan),var(--purple));color:#fff;font-weight:900
}
.app-layout{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
.app-sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);z-index:1030;
  display:flex;flex-direction:column;padding:1rem;background:
  radial-gradient(circle at 30% 0,rgba(37,99,235,.18),transparent 35%),
  linear-gradient(180deg,#070b14,#0b1220);color:#dce8f8;border-right:1px solid rgba(148,163,184,.12)
}
.sidebar-brand{display:flex;align-items:center;gap:.75rem;padding:.35rem .45rem 1.1rem;text-decoration:none;color:#fff}
.brand-logo{width:46px;height:46px;border-radius:15px;box-shadow:0 12px 30px rgba(37,99,235,.3)}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}.brand-copy strong{font-size:1.05rem}.brand-copy small{font-size:.66rem;color:#8fa2ba;letter-spacing:.1em;margin-top:.3rem}
.sidebar-role{display:flex;align-items:center;gap:.75rem;padding:.85rem;border:1px solid rgba(148,163,184,.14);border-radius:1rem;background:rgba(255,255,255,.045)}
.role-avatar{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#2563eb,#06b6d4);font-weight:900;color:#fff}
.sidebar-role small{color:#8395ad;font-size:.72rem}
.sidebar-nav{margin-top:1.25rem;display:flex;flex-direction:column;gap:.3rem}
.sidebar-caption{padding:.45rem .75rem;color:#61728a;font-size:.65rem;font-weight:800;letter-spacing:.13em}
.sidebar-item{
  display:flex;align-items:center;gap:.8rem;min-height:45px;padding:.65rem .75rem;
  color:#9dafc6;text-decoration:none;border-radius:.8rem;font-size:.89rem;font-weight:700;
  transition:.18s ease
}
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,.06);transform:translateX(2px)}
.sidebar-item.active{color:#fff;background:linear-gradient(135deg,rgba(37,99,235,.92),rgba(6,182,212,.72));box-shadow:0 10px 24px rgba(37,99,235,.2)}
.sidebar-icon{width:28px;text-align:center;font-family:ui-monospace,monospace;font-weight:900}
.sidebar-footer{margin-top:auto}
.system-pill{display:flex;align-items:center;gap:.5rem;margin:.8rem;padding:.55rem .7rem;border-radius:.7rem;background:rgba(34,197,94,.08);color:#86efac;font-size:.7rem}
.system-pill span,.connection-badge span{width:.5rem;height:.5rem;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.logout-link{color:#fda4af}
.app-content{grid-column:2;min-width:0;min-height:100vh}
.app-topbar{
  position:sticky;top:0;z-index:1020;height:72px;display:flex;align-items:center;gap:1rem;
  padding:0 clamp(1rem,2.5vw,2rem);background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(15px);border-bottom:1px solid var(--line)
}
.mobile-menu-btn{display:none;border:1px solid var(--line);background:var(--surface-2);color:var(--text);width:42px;height:42px;border-radius:.8rem}
.topbar-title{display:flex;flex-direction:column;min-width:0}.topbar-title strong{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-kicker{font-size:.62rem;color:var(--muted);font-weight:900;letter-spacing:.12em}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:.65rem}
.topbar-icon{width:40px;height:40px;border:1px solid var(--line);border-radius:.8rem;background:var(--surface-2);color:var(--text)}
.connection-badge{display:flex;align-items:center;gap:.45rem;padding:.5rem .7rem;border-radius:.7rem;background:rgba(34,197,94,.08);color:var(--success);font-size:.72rem;font-weight:800}.connection-badge.offline{color:var(--danger);background:rgba(220,38,38,.08)}.connection-badge.offline span{background:var(--danger)}
.profile-chip{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--text);padding:.35rem .5rem;border-radius:.8rem}.profile-chip>span{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;font-weight:900}.profile-chip div{display:flex;flex-direction:column}.profile-chip strong{font-size:.76rem}.profile-chip small{font-size:.65rem;color:var(--muted)}
.app-main{padding:clamp(1rem,2.5vw,2rem);max-width:1700px;width:100%;margin:0 auto}
.card{
  color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:1.15rem;
  box-shadow:var(--shadow)
}
.metric{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--surface),var(--surface-2))}
.metric:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-25px;top:-25px;background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(6,182,212,.08))}
.card h1,.card h2,.card h3,.card h4,.card h5{letter-spacing:-.025em}
.text-secondary{color:var(--muted)!important}
.form-label{font-size:.8rem;font-weight:800;color:var(--text);margin-bottom:.42rem}
.form-control,.form-select{
  min-height:47px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);
  border-radius:.8rem;padding:.65rem .85rem
}
textarea.form-control{min-height:120px}
.form-control::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.form-control:focus,.form-select:focus{color:var(--text);background:var(--surface);border-color:var(--cyan);box-shadow:0 0 0 .22rem rgba(6,182,212,.13)}
.input-group-text{color:var(--muted);background:var(--surface-2);border-color:var(--line)}
.btn{min-height:42px;border-radius:.78rem;font-weight:800;font-size:.84rem;padding:.55rem .9rem}
.btn-primary{border:0;background:linear-gradient(135deg,var(--primary),var(--cyan));box-shadow:0 10px 24px rgba(37,99,235,.2)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-light,.btn-outline-dark{color:var(--text);background:var(--surface-2);border-color:var(--line)}
.table{--bs-table-bg:transparent;--bs-table-color:var(--text);--bs-table-border-color:var(--line)}
.table thead th{padding:.8rem .75rem;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;background:var(--surface-2)}
.table tbody td{padding:.85rem .75rem;vertical-align:middle}
.badge{padding:.45rem .65rem;border-radius:999px;font-size:.67rem}
.alert{border-radius:.85rem;border:0}
.progress{height:9px;background:var(--line);border-radius:999px}
.progress-bar{border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--cyan))}
.border{border-color:var(--line)!important}
.rounded{border-radius:.85rem!important}
.bg-dark{background:#07101e!important}
.modal-content,.offcanvas{color:var(--text);background:var(--surface);border-color:var(--line)}
.mobile-sidebar{background:#070b14;color:#fff!important}.mobile-sidebar .offcanvas-header{border-bottom:1px solid rgba(148,163,184,.14)}
.editor-shell{min-height:420px;background:#101827;color:#e5e7eb;border-radius:1rem;overflow:hidden}
textarea.code{min-height:360px;background:#101827;color:#e5e7eb;border:0;border-radius:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.preview-frame{width:100%;height:420px;background:#fff;border:0;border-radius:1rem}

/* Login and public forms */
.login-page{min-height:calc(100vh - 58px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);overflow:hidden}
.login-visual{position:relative;padding:clamp(2rem,5vw,5.5rem);display:flex;align-items:center;color:#eef6ff;background:linear-gradient(145deg,rgba(7,11,20,.98),rgba(11,18,32,.94))}
.login-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(56,189,248,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.045) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,black,transparent)}
.login-copy{position:relative;z-index:1;max-width:760px}.login-chip{display:inline-flex;gap:.5rem;align-items:center;padding:.45rem .8rem;border:1px solid rgba(56,189,248,.35);border-radius:999px;background:rgba(14,165,233,.08);color:#bae6fd;font-size:.82rem;font-weight:700}
.login-title{font-size:clamp(2.4rem,5vw,5.2rem);line-height:.98;font-weight:900;letter-spacing:-.055em;margin:1.3rem 0}.login-title span{background:linear-gradient(90deg,#38bdf8,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}.login-subtitle{font-size:1.05rem;line-height:1.8;color:#a8b6ca;max-width:650px}
.code-window{margin-top:2rem;border:1px solid rgba(148,163,184,.18);border-radius:1rem;background:rgba(2,6,23,.62);box-shadow:0 30px 80px rgba(0,0,0,.28);overflow:hidden}.code-window-head{height:40px;display:flex;align-items:center;gap:.45rem;padding:0 1rem;border-bottom:1px solid rgba(148,163,184,.14)}.code-window-head i{width:.65rem;height:.65rem;border-radius:50%;display:block}.code-window pre{margin:0;padding:1.25rem;color:#bfdbfe;font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace}
.login-panel{display:flex;align-items:center;justify-content:center;padding:clamp(1.4rem,4vw,4rem);background:rgba(248,251,255,.94)}.login-card{width:min(100%,520px);padding:clamp(1.6rem,4vw,2.4rem);border:1px solid #dce5f0;border-radius:1.5rem;background:#fff;box-shadow:0 24px 70px rgba(2,6,23,.16)}.login-logo{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.25rem;background:linear-gradient(135deg,#2563eb,#06b6d4);box-shadow:0 12px 30px rgba(37,99,235,.28)}.login-heading{font-size:1.9rem;font-weight:900;letter-spacing:-.035em}.password-wrap{position:relative}.password-toggle{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#64748b;padding:.4rem}.login-link{font-weight:700;text-decoration:none}.login-footer-links{display:flex;justify-content:space-between;gap:1rem}.login-status{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;font-size:.78rem;color:#64748b}

/* Registration form */
.registration-shell{min-height:calc(100vh - 58px);display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);background:radial-gradient(circle at 20% 10%,rgba(37,99,235,.12),transparent 30%),linear-gradient(180deg,#f6f9fe,#eef3f9)}
.registration-card{width:min(100%,980px);overflow:hidden}.registration-header{padding:clamp(1.4rem,4vw,2.2rem);color:#fff;background:linear-gradient(135deg,#070b14,#172033)}.registration-header h2{font-weight:900}.registration-body{padding:clamp(1.2rem,4vw,2.2rem)}
.form-section-title{display:flex;align-items:center;gap:.65rem;margin:1rem 0;color:var(--text);font-weight:900}.form-section-title span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;font-size:.75rem}

/* Small devices */
@media(max-width:1199px){
  :root{--sidebar-width:240px}
  .profile-chip div{display:none}
}
@media(max-width:991.98px){
  .app-layout{display:block}.app-sidebar{display:none}.app-content{min-height:100vh}.mobile-menu-btn{display:grid;place-items:center}.app-topbar{height:64px}.app-main{padding:1rem}
  .connection-badge{display:none}.login-page{grid-template-columns:1fr}.login-visual{min-height:300px;padding:2.2rem}.login-title{font-size:2.8rem}.code-window{display:none}.login-panel{padding:1.25rem}
}
@media(max-width:767.98px){
  html{font-size:15px}.topbar-icon{display:none}.topbar-title strong{max-width:52vw}.app-main{padding:.85rem}.card{border-radius:1rem}.card.p-4{padding:1rem!important}.card.p-3{padding:.9rem!important}
  .row.g-3{--bs-gutter-x:.8rem;--bs-gutter-y:.8rem}
  .btn{width:100%}.d-flex .btn,.studio-actions .btn,.topbar-actions .btn{width:auto}
  .table-responsive-stack table,.table-responsive-stack thead,.table-responsive-stack tbody,.table-responsive-stack th,.table-responsive-stack td,.table-responsive-stack tr{display:block}
  .table-responsive-stack thead{display:none}.table-responsive-stack tr{background:var(--surface);border:1px solid var(--line);border-radius:1rem;padding:.75rem;margin-bottom:.75rem}.table-responsive-stack td{border:0;padding:.35rem 0}.table-responsive-stack td:before{content:attr(data-label);font-weight:800;color:var(--muted);font-size:.67rem;text-transform:uppercase;display:block}
  .login-visual{min-height:230px}.login-title{font-size:2.15rem}.login-subtitle{font-size:.92rem}.login-card{border-radius:1.1rem;padding:1.25rem}.login-footer-links{flex-direction:column}
  .registration-shell{padding:.75rem}.registration-header,.registration-body{padding:1.1rem}.registration-card{border-radius:1rem}
  .form-control,.form-select{font-size:16px} /* prevents iOS zoom */
  .editor-shell,.preview-frame{min-height:330px;height:330px}
}
@media(max-width:420px){
  .app-topbar{padding:0 .7rem;gap:.65rem}.mobile-menu-btn{width:38px;height:38px}.topbar-title strong{font-size:.88rem;max-width:55vw}.topbar-kicker{font-size:.55rem}
  .app-main{padding:.65rem}.card{border-radius:.9rem}.display-6{font-size:1.8rem}.login-panel{padding:.65rem}.login-card{padding:1rem}
  .btn{min-height:45px}.form-control,.form-select{min-height:48px}.registration-header h2{font-size:1.35rem}
}
@media(max-width:360px){
  html{font-size:14px}.topbar-title strong{max-width:48vw}.brand-copy small{display:none}.login-title{font-size:1.9rem}
}
@media(hover:none) and (pointer:coarse){
  .btn,.sidebar-item,.form-control,.form-select{min-height:46px}
}


/* =========================================================
   STRUCTURED DIGITAL NAVIGATION V3
   ========================================================= */
.app-sidebar{
  padding:.75rem;
  overflow:hidden;
}
.app-sidebar .sidebar-brand{
  padding:.2rem .35rem .65rem;
}
.app-sidebar .brand-logo{
  width:40px;height:40px;border-radius:12px;
}
.app-sidebar .sidebar-role{
  padding:.65rem;
  border-radius:.85rem;
}
.app-sidebar .role-avatar{
  width:34px;height:34px;border-radius:10px;
}
.grouped-nav{
  flex:1;
  min-height:0;
  margin-top:.65rem;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:.28rem;
}
.nav-group{
  flex:0 0 auto;
  border:1px solid rgba(148,163,184,.09);
  border-radius:.75rem;
  background:rgba(255,255,255,.018);
  overflow:hidden;
}
.nav-group[open]{
  background:rgba(37,99,235,.055);
  border-color:rgba(59,130,246,.2);
}
.nav-group-title{
  list-style:none;
  min-height:38px;
  padding:.48rem .58rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  cursor:pointer;
  color:#b8c7da;
  font-size:.76rem;
  font-weight:850;
  user-select:none;
}
.nav-group-title::-webkit-details-marker{display:none}
.nav-group-title:hover{color:#fff;background:rgba(255,255,255,.04)}
.nav-group-title .sidebar-icon{
  width:22px;
  color:#62d8ff;
}
.nav-chevron{
  margin-left:auto;
  transition:transform .2s ease;
  color:#667a94;
}
.nav-group[open] .nav-chevron{transform:rotate(180deg)}
.nav-group-items{
  padding:.08rem .35rem .35rem;
  display:grid;
  gap:.12rem;
}
.nav-group-items .sidebar-item{
  min-height:33px;
  padding:.35rem .48rem;
  border-radius:.58rem;
  font-size:.73rem;
  gap:.48rem;
}
.nav-group-items .sidebar-icon{
  width:22px;
  font-size:.72rem;
}
.nav-group-items .sidebar-item.active{
  box-shadow:none;
}
.sidebar-footer{
  flex:0 0 auto;
  padding-top:.35rem;
}
.system-pill{
  margin:.2rem .3rem .3rem;
  padding:.4rem .55rem;
}
.sidebar-footer .sidebar-item{
  min-height:34px;
  padding:.35rem .55rem;
  font-size:.75rem;
}
.mobile-sidebar .grouped-nav{
  overflow-y:auto;
}
.mobile-sidebar .nav-group-items .sidebar-item{
  min-height:42px;
  font-size:.84rem;
}
@media (max-height:760px) and (min-width:992px){
  .app-sidebar .sidebar-role{display:none}
  .grouped-nav{margin-top:.25rem}
  .nav-group-title{min-height:34px;padding:.35rem .5rem}
  .nav-group-items .sidebar-item{min-height:30px;padding:.28rem .42rem}
  .system-pill{display:none}
}
.digital-launch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}
.digital-launch-card{
  height:100%;
  display:flex;
  flex-direction:column;
  padding:1.2rem;
  border:1px solid var(--line);
  border-radius:1rem;
  background:linear-gradient(145deg,var(--surface),var(--surface-2));
  text-decoration:none;
  color:var(--text);
  transition:.2s ease;
}
.digital-launch-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(15,23,42,.12);
  border-color:rgba(37,99,235,.45);
}
.digital-launch-card .launch-icon{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:white;font-weight:900;margin-bottom:.8rem;
}
.digital-launch-card p{color:var(--muted);font-size:.86rem}
.digital-launch-card .launch-action{
  margin-top:auto;color:#2563eb;font-size:.8rem;font-weight:800;
}
.feature-status{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .55rem;border-radius:999px;
  background:rgba(34,197,94,.09);color:#16a34a;
  font-size:.7rem;font-weight:800;
}
.feature-status::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;
}


/* =========================================================
   NAVIGATION + DIGITAL STUDIO CORRECTION V4
   ========================================================= */
.nav-group-title::marker{content:""}
.nav-group-title::-webkit-details-marker{display:none!important}
.nav-group-title .nav-chevron{font-size:.72rem}
.nav-group[open]>.nav-group-title .nav-chevron{transform:rotate(180deg)}
.nav-group-title{white-space:nowrap}
.nav-group-title>span:nth-child(2){overflow:hidden;text-overflow:ellipsis}
.nav-group-items .sidebar-item span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-group-items .sidebar-item{color:#aebdd0}
.nav-group-items .sidebar-item:hover{color:#fff;background:rgba(255,255,255,.055)}
.nav-group-items .sidebar-item.active{color:#fff;background:linear-gradient(135deg,#2563eb,#0891b2)}
.app-main{background:
  radial-gradient(circle at 10% 0%,rgba(37,99,235,.065),transparent 30%),
  var(--app-bg);
}
.digital-launch-grid{align-items:stretch}
.digital-launch-card{
  min-height:190px!important;
  box-shadow:0 8px 26px rgba(15,23,42,.055);
}
.digital-launch-card h3{color:var(--text)!important}
.digital-launch-card,.digital-launch-card:hover{text-decoration:none!important}
.digital-launch-card .feature-status{flex:0 0 auto}
.digital-launch-card .launch-action{display:flex;align-items:center;gap:.35rem}

/* Functional Word Studio */
.studio-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:1rem;
}
.studio-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:1rem;
  box-shadow:var(--shadow-sm);
}
.studio-toolbar{
  position:sticky;top:64px;z-index:5;
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  padding:.7rem;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(12px);
}
.studio-tool{
  min-width:38px;height:38px;padding:0 .65rem;
  border:1px solid var(--line);border-radius:.65rem;
  background:var(--surface-2);color:var(--text);
  font-weight:800;font-size:.78rem;
}
.studio-tool:hover{border-color:var(--primary);color:var(--primary)}
.studio-tool.primary{border:0;color:#fff;background:linear-gradient(135deg,#2563eb,#06b6d4)}
.studio-title-input{
  width:100%;border:0;border-bottom:1px solid var(--line);
  padding:1rem 1.25rem;background:transparent;color:var(--text);
  font-size:1.25rem;font-weight:900;outline:0;
}
.document-stage{
  padding:1.5rem;background:#dce5f0;min-height:680px;
}
.document-page{
  width:min(100%,794px);min-height:1123px;margin:0 auto;
  padding:72px 70px;background:#fff;color:#111827;
  box-shadow:0 18px 50px rgba(15,23,42,.16);
  outline:0;line-height:1.65;
}
.document-page:empty::before{
  content:"Mulai menulis modul, LKPD, jobsheet, atau dokumen pembelajaran di sini...";
  color:#94a3b8;
}
.studio-side{padding:1rem}
.studio-side h3{font-size:.85rem;font-weight:900;margin-bottom:.8rem}
.status-box{
  display:flex;align-items:center;gap:.65rem;
  padding:.75rem;border:1px solid var(--line);border-radius:.75rem;
  background:var(--surface-2);font-size:.78rem;
}
.status-dot{width:9px;height:9px;border-radius:50%;background:#22c55e}
.studio-meta-list{display:grid;gap:.65rem;margin-top:1rem}
.studio-meta-item{padding:.75rem;border:1px solid var(--line);border-radius:.75rem}
.studio-meta-item small{display:block;color:var(--muted);font-size:.68rem}
.studio-meta-item strong{font-size:.8rem}
.studio-help{font-size:.75rem;color:var(--muted);line-height:1.6}
@media(max-width:1100px){
  .studio-shell{grid-template-columns:1fr}
  .studio-side{order:-1}
}
@media(max-width:767.98px){
  .document-stage{padding:.6rem}
  .document-page{min-height:800px;padding:35px 28px}
  .studio-toolbar{top:64px}
}
@media print{
  .app-sidebar,.app-topbar,.studio-toolbar,.studio-side,.page-heading{display:none!important}
  .app-content,.app-main,.studio-shell,.studio-panel,.document-stage{display:block!important;padding:0!important;margin:0!important;background:#fff!important;border:0!important;box-shadow:none!important}
  .document-page{width:100%!important;min-height:0!important;margin:0!important;box-shadow:none!important}
}


/* =========================================================
   POWERPOINT STUDIO REAL EDITOR V1
   ========================================================= */
.ppt-workspace{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 290px;
  gap:1rem;
  min-height:calc(100vh - 190px);
}
.ppt-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:1rem;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.ppt-sidebar{
  display:flex;
  flex-direction:column;
  min-height:680px;
}
.ppt-sidebar-header,
.ppt-properties-header{
  padding:.85rem 1rem;
  border-bottom:1px solid var(--line);
  font-weight:900;
}
.ppt-slide-list{
  padding:.75rem;
  display:grid;
  gap:.7rem;
  overflow:auto;
  max-height:650px;
}
.ppt-slide-thumb{
  position:relative;
  aspect-ratio:16/9;
  border:2px solid transparent;
  border-radius:.75rem;
  background:#fff;
  color:#0f172a;
  padding:.55rem;
  cursor:pointer;
  box-shadow:0 5px 16px rgba(15,23,42,.08);
  overflow:hidden;
}
.ppt-slide-thumb.active{border-color:#2563eb}
.ppt-slide-thumb-number{
  position:absolute;
  left:.35rem;
  bottom:.25rem;
  font-size:.62rem;
  color:#64748b;
}
.ppt-slide-thumb-title{
  font-size:.72rem;
  font-weight:900;
  line-height:1.25;
  max-height:2.4em;
  overflow:hidden;
}
.ppt-slide-thumb-body{
  margin-top:.3rem;
  font-size:.55rem;
  color:#64748b;
  line-height:1.3;
  max-height:3.9em;
  overflow:hidden;
}
.ppt-main{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.ppt-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  align-items:center;
  padding:.75rem;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.ppt-tool{
  min-height:38px;
  border:1px solid var(--line);
  border-radius:.65rem;
  background:var(--surface-2);
  color:var(--text);
  padding:.45rem .7rem;
  font-size:.76rem;
  font-weight:850;
}
.ppt-tool:hover{border-color:#2563eb;color:#2563eb}
.ppt-tool.primary{
  border:0;color:#fff;
  background:linear-gradient(135deg,#2563eb,#06b6d4)
}
.ppt-canvas-stage{
  flex:1;
  display:grid;
  place-items:center;
  padding:2rem;
  background:
    linear-gradient(45deg,#dbe4ef 25%,transparent 25%) 0 0/20px 20px,
    linear-gradient(45deg,transparent 75%,#dbe4ef 75%) 0 0/20px 20px,
    #e7edf5;
  overflow:auto;
}
.ppt-slide-canvas{
  width:min(100%,960px);
  aspect-ratio:16/9;
  background:#fff;
  color:#0f172a;
  box-shadow:0 24px 65px rgba(15,23,42,.2);
  border-radius:.4rem;
  padding:6% 7%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  outline:0;
  position:relative;
  overflow:hidden;
}
.ppt-slide-canvas[data-layout="title"]{text-align:center}
.ppt-slide-canvas[data-layout="title-content"]{justify-content:flex-start}
.ppt-slide-canvas[data-layout="section"]{text-align:center}
.ppt-title{
  font-size:clamp(2rem,4.4vw,4.3rem);
  line-height:1.05;
  font-weight:950;
  margin:0 0 1.2rem;
  outline:0;
}
.ppt-subtitle{
  font-size:clamp(1rem,1.8vw,1.7rem);
  color:#475569;
  line-height:1.5;
  outline:0;
}
.ppt-properties{
  min-height:680px;
}
.ppt-properties-body{
  padding:1rem;
  display:grid;
  gap:1rem;
}
.ppt-color-row{
  display:grid;
  grid-template-columns:1fr 52px;
  gap:.6rem;
  align-items:center;
}
.ppt-status{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.75rem;
  color:var(--muted);
}
.ppt-status-dot{
  width:8px;height:8px;border-radius:50%;background:#22c55e
}
.ppt-notes{
  min-height:120px;
  resize:vertical;
}
.ppt-empty-help{
  padding:.8rem;
  border:1px dashed var(--line);
  border-radius:.75rem;
  font-size:.75rem;
  color:var(--muted);
  line-height:1.6;
}
.ppt-present-overlay{
  position:fixed;inset:0;z-index:99999;
  background:#000;
  display:none;
  align-items:center;
  justify-content:center;
}
.ppt-present-overlay.show{display:flex}
.ppt-present-slide{
  width:100vw;height:100vh;
  padding:7vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#fff;color:#0f172a;
}
.ppt-present-controls{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;gap:.5rem;
  background:rgba(15,23,42,.82);
  border-radius:999px;padding:.45rem;
}
.ppt-present-controls button{
  border:0;border-radius:999px;padding:.55rem .8rem;
  background:#fff;color:#0f172a;font-weight:900
}
@media(max-width:1200px){
  .ppt-workspace{grid-template-columns:190px minmax(0,1fr)}
  .ppt-properties{grid-column:1/-1;min-height:auto}
}
@media(max-width:800px){
  .ppt-workspace{grid-template-columns:1fr}
  .ppt-sidebar,.ppt-properties{min-height:auto}
  .ppt-slide-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}
  .ppt-canvas-stage{padding:.75rem}
}
@media print{
  .app-sidebar,.app-topbar,.page-heading,.ppt-sidebar,.ppt-toolbar,.ppt-properties{display:none!important}
  .app-main,.app-content,.ppt-workspace,.ppt-main,.ppt-canvas-stage{
    display:block!important;background:#fff!important;padding:0!important;margin:0!important
  }
  .ppt-slide-canvas{
    width:100%!important;box-shadow:none!important;border-radius:0!important;
    page-break-after:always
  }
}


/* =========================================================
   CODING LAB STUDIO REAL WORKSPACE V2
   ========================================================= */
.coding-lab-shell{
  display:grid;
  grid-template-columns:220px minmax(0,1.4fr) minmax(340px,.9fr);
  gap:1rem;
  min-height:calc(100vh - 190px);
}
.coding-panel{
  background:#0b1220;
  color:#dbeafe;
  border:1px solid #1e293b;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(15,23,42,.18);
}
.coding-panel-header{
  min-height:48px;
  padding:.7rem .85rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #1e293b;
  background:#111827;
}
.coding-icon-btn{
  width:30px;height:30px;
  border:1px solid #334155;
  border-radius:.45rem;
  background:#172033;
  color:#dbeafe;
  font-weight:900;
}
.coding-icon-btn:hover{background:#2563eb;border-color:#2563eb}
.coding-explorer{
  display:flex;
  flex-direction:column;
}
.coding-project-name{padding:.65rem;border-bottom:1px solid #1e293b}
.coding-project-name input{
  background:#111827!important;
  border-color:#334155!important;
  color:#fff!important;
}
.coding-file-tree{
  flex:1;
  padding:.55rem;
  display:grid;
  align-content:start;
  gap:.2rem;
  min-height:420px;
}
.coding-file-item{
  display:flex;align-items:center;gap:.55rem;
  width:100%;
  border:0;border-radius:.45rem;
  padding:.48rem .55rem;
  background:transparent;color:#a9b8cc;
  font-size:.78rem;text-align:left;
}
.coding-file-item:hover{background:#172033;color:#fff}
.coding-file-item.active{background:#1d4ed8;color:#fff}
.coding-explorer-footer{padding:.7rem;border-top:1px solid #1e293b}
.coding-editor-panel{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.coding-tab-bar{
  display:flex;
  gap:1px;
  overflow-x:auto;
  background:#0f172a;
  border-bottom:1px solid #1e293b;
}
.coding-tab{
  min-width:115px;
  display:flex;align-items:center;gap:.45rem;
  border:0;border-right:1px solid #1e293b;
  padding:.65rem .8rem;
  background:#111827;color:#94a3b8;
  font-size:.74rem;
}
.coding-tab.active{background:#172033;color:#fff;border-top:2px solid #38bdf8}
.coding-toolbar{
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  padding:.6rem;
  border-bottom:1px solid #1e293b;
  background:#111827;
}
.coding-toolbar select{
  background:#172033!important;
  color:#fff!important;
  border-color:#334155!important;
}
.coding-editor-wrap{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  flex:1;
  min-height:440px;
  background:#0b1220;
  overflow:hidden;
}
.coding-line-numbers{
  padding:14px 8px;
  background:#0f172a;
  color:#475569;
  text-align:right;
  font:13px/1.55 "Consolas","Courier New",monospace;
  white-space:pre;
  overflow:hidden;
  user-select:none;
}
.coding-editor{
  width:100%;height:100%;
  min-height:440px;
  resize:none;
  border:0;outline:0;
  padding:14px 16px;
  background:#0b1220;color:#e2e8f0;
  font:14px/1.55 "Consolas","Courier New",monospace;
  tab-size:2;
  white-space:pre;
  overflow:auto;
}
.coding-bottom-panel{
  border-top:1px solid #1e293b;
  background:#0f172a;
}
.coding-bottom-tabs{
  display:flex;
  border-bottom:1px solid #1e293b;
}
.coding-bottom-tabs button{
  border:0;
  padding:.55rem .85rem;
  background:transparent;color:#64748b;
  font-size:.72rem;font-weight:800;
}
.coding-bottom-tabs button.active{color:#fff;border-bottom:2px solid #38bdf8}
.coding-bottom-content{
  display:none;
  min-height:120px;
  max-height:180px;
  overflow:auto;
  padding:.7rem;
  font:12px/1.5 "Consolas","Courier New",monospace;
}
.coding-bottom-content.active{display:block}
.console-log{color:#dbeafe}
.console-error{color:#fca5a5}
.console-warning{color:#fde68a;margin-bottom:.3rem}
.console-success{color:#86efac}
.console-info{color:#93c5fd}
.snapshot-item{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.5rem;border-bottom:1px solid #1e293b;
}
.snapshot-item small{display:block;color:#64748b}
.snapshot-item button{
  border:1px solid #334155;border-radius:.4rem;
  background:#172033;color:#fff;padding:.3rem .55rem
}
.coding-preview-panel{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.coding-preview-frame{
  width:100%;height:100%;
  min-height:650px;
  border:0;
  background:#fff;
}
@media(max-width:1350px){
  .coding-lab-shell{
    grid-template-columns:210px minmax(0,1fr);
  }
  .coding-preview-panel{
    grid-column:1/-1;
  }
  .coding-preview-frame{min-height:520px}
}
@media(max-width:800px){
  .coding-lab-shell{grid-template-columns:1fr}
  .coding-file-tree{min-height:180px}
  .coding-editor-wrap,.coding-editor{min-height:380px}
}


/* =========================================================
   CODING LAB MEDIA ASSET MANAGER V3
   ========================================================= */
.coding-assets-section{
  border-top:1px solid #1e293b;
  max-height:310px;
  overflow:auto;
}
.coding-assets-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.55rem .7rem;
  background:#111827;
  color:#dbeafe;
  font-size:.74rem;
  font-weight:900;
}
.coding-assets-title small{color:#64748b;font-weight:700}
.coding-asset-tree{padding:.35rem}
.coding-asset-group{
  border-bottom:1px solid #182236;
}
.coding-asset-group summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.45rem .4rem;
  cursor:pointer;
  color:#a9b8cc;
  font-size:.72rem;
  font-weight:800;
}
.coding-asset-group summary::-webkit-details-marker{display:none}
.coding-asset-group summary small{color:#64748b}
.coding-asset-list{
  display:grid;
  gap:.2rem;
  padding:0 .15rem .35rem;
}
.coding-asset-empty{
  padding:.35rem .45rem;
  color:#475569;
  font-size:.68rem;
}
.coding-asset-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.4rem;
  padding:.35rem;
  border-radius:.45rem;
  background:#111827;
}
.coding-asset-item:hover{background:#172033}
.asset-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:.45rem;
}
.asset-main img{
  width:30px;
  height:30px;
  object-fit:cover;
  border-radius:.35rem;
  border:1px solid #334155;
}
.asset-file-icon{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:.35rem;
  background:#1e293b;
  color:#38bdf8;
  font-weight:900;
}
.asset-meta{min-width:0}
.asset-meta strong{
  display:block;
  max-width:100px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dbeafe;
  font-size:.68rem;
}
.asset-meta small{
  display:block;
  color:#64748b;
  font-size:.6rem;
}
.asset-actions{
  display:flex;
  gap:.15rem;
}
.asset-actions button{
  width:24px;height:24px;
  display:grid;place-items:center;
  border:1px solid #334155;
  border-radius:.35rem;
  background:#0f172a;
  color:#94a3b8;
  font-size:.68rem;
}
.asset-actions button:hover{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}


/* =========================================================
   REAL ASSESSMENT WORKSPACE V1
   ========================================================= */
.assessment-workspace{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:1rem;
}
.assessment-sidebar{
  display:grid;
  align-content:start;
  gap:.5rem;
  position:sticky;
  top:84px;
  align-self:start;
}
.assessment-nav{
  display:flex;
  align-items:center;
  gap:.75rem;
  width:100%;
  border:1px solid var(--line);
  border-radius:.9rem;
  background:var(--surface);
  color:var(--text);
  padding:.85rem;
  text-align:left;
}
.assessment-nav>span{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:.75rem;
  background:var(--surface-2);
  color:#2563eb;
  font-weight:900;
}
.assessment-nav strong,.assessment-nav small{display:block}
.assessment-nav small{color:var(--muted);font-size:.68rem}
.assessment-nav.active{
  border-color:#2563eb;
  background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(6,182,212,.08));
}
.assessment-view{display:none}
.assessment-view.active{display:block}
.assessment-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:1rem;
}
.assessment-editor-card,.assessment-summary-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:var(--shadow-sm);
}
.assessment-card-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1.2rem;
}
.assessment-card-header h2{font-size:1.2rem;font-weight:900;margin:0}
.assessment-card-header p{color:var(--muted);font-size:.8rem;margin:.25rem 0 0}
.assessment-toolbar{display:flex;flex-wrap:wrap;gap:.5rem}
.assessment-summary-card{
  position:sticky;top:84px;align-self:start
}
.assessment-summary-card h3{font-size:1rem;font-weight:900}
.assessment-stat{
  display:flex;justify-content:space-between;
  padding:.7rem 0;border-bottom:1px solid var(--line)
}
.question-list{display:grid;gap:1rem}
.question-card{
  border:1px solid var(--line);
  border-radius:.9rem;
  padding:1rem;
  background:var(--surface-2)
}
.question-card-header{
  display:flex;justify-content:space-between;gap:1rem;
  align-items:center;margin-bottom:.75rem
}
.rubric-row,.testcase-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 130px auto;
  gap:.5rem;margin-bottom:.5rem
}
.starter-file-row{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) auto;
  gap:.5rem;margin-bottom:.5rem
}
.activity-bank{display:grid;gap:.65rem}
.activity-bank-item{
  display:flex;align-items:center;gap:.75rem;
  border:1px solid var(--line);border-radius:.85rem;
  padding:.8rem;background:var(--surface-2)
}
.activity-bank-icon{
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:.75rem;background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:#fff;font-weight:900
}
.activity-bank-item small{display:block;color:var(--muted);font-size:.68rem}
.assessment-preview-overlay{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  padding:1rem;background:rgba(15,23,42,.75)
}
.assessment-preview-overlay.show{display:flex}
.assessment-preview-dialog{
  width:min(820px,100%);
  max-height:90vh;overflow:auto;
  background:#fff;border-radius:1rem;color:#0f172a
}
.assessment-preview-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.2rem;border-bottom:1px solid #e2e8f0
}
.assessment-preview-header button{
  width:34px;height:34px;border:0;border-radius:50%;
  background:#fee2e2;color:#991b1b;font-size:1.3rem
}
.assessment-preview-body{padding:1.2rem}
.preview-question{
  padding:1rem;border:1px solid #e2e8f0;border-radius:.8rem;margin-bottom:.75rem
}
@media(max-width:1100px){
  .assessment-grid{grid-template-columns:1fr}
  .assessment-summary-card{position:static}
}
@media(max-width:850px){
  .assessment-workspace{grid-template-columns:1fr}
  .assessment-sidebar{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:650px){
  .assessment-sidebar{grid-template-columns:1fr}
  .rubric-row,.testcase-row,.starter-file-row{grid-template-columns:1fr}
}


/* =========================================================
   INTERACTIVE QUIZ QUESTION TYPES V2
   ========================================================= */
.choice-option-list{
  display:grid;
  gap:.55rem;
}
.choice-option-row{
  display:grid;
  grid-template-columns:28px 36px minmax(0,1fr) auto;
  gap:.5rem;
  align-items:center;
}
.choice-option-row .choice-correct{
  width:18px;height:18px;
  margin:auto;
}
.choice-label{
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:.55rem;
  background:#dbeafe;
  color:#1d4ed8;
  font-weight:900;
}
.code-answer,
.preview-code-editor{
  font-family:"Consolas","Courier New",monospace;
  background:#0f172a!important;
  color:#e2e8f0!important;
  border-color:#334155!important;
}
.preview-choice{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  border:1px solid #e2e8f0;
  border-radius:.75rem;
  padding:.75rem;
  margin-bottom:.5rem;
  cursor:pointer;
}
.preview-choice:hover{
  border-color:#2563eb;
  background:#eff6ff;
}
.preview-code-label{
  font-size:.72rem;
  font-weight:800;
  color:#64748b;
  margin-bottom:.35rem;
}
.question-card-header small{
  margin-top:.2rem;
  font-size:.68rem;
}
@media(max-width:650px){
  .choice-option-row{
    grid-template-columns:24px 30px minmax(0,1fr);
  }
  .choice-option-row .remove-choice{
    grid-column:3;
    justify-self:end;
  }
}


/* =========================================================
   FINAL PROJECT PACKAGE + IMAGE QUIZ V1
   ========================================================= */
.coding-explorer{
  min-width:0;
  overflow:hidden;
}
.coding-file-tree,
.coding-assets-section,
.coding-asset-tree{
  min-width:0;
}
.coding-file-item,
.coding-asset-item,
.asset-main,
.asset-meta{
  min-width:0;
}
.coding-file-item span:last-child,
.asset-meta strong{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.coding-assets-section{
  overflow-x:hidden!important;
}
.coding-asset-tree{
  overflow-x:hidden!important;
}
.coding-explorer-footer{
  position:sticky;
  bottom:0;
  background:#0b1220;
  z-index:3;
}
.project-package-status{
  margin-top:.55rem;
  padding:.5rem .6rem;
  border:1px solid #1e3a5f;
  border-radius:.65rem;
  background:#0f172a;
  color:#93c5fd;
  font-size:.66rem;
  line-height:1.45;
}
.project-package-status strong{color:#dbeafe}
.image-question-upload{
  border:1px dashed var(--line);
  border-radius:.85rem;
  padding:1rem;
  background:var(--surface);
}
.image-question-preview{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.75rem;
  margin-top:.75rem;
}
.image-question-card{
  position:relative;
  border:1px solid var(--line);
  border-radius:.75rem;
  padding:.55rem;
  background:var(--surface-2);
}
.image-question-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:.55rem;
}
.image-question-card small{
  display:block;
  margin-top:.4rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.image-question-card button{
  position:absolute;
  right:.35rem;
  top:.35rem;
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  font-weight:900;
}
.sequence-image-list{
  display:grid;
  gap:.65rem;
}
.sequence-image-row{
  display:grid;
  grid-template-columns:42px 90px minmax(0,1fr) auto;
  align-items:center;
  gap:.65rem;
  padding:.55rem;
  border:1px solid var(--line);
  border-radius:.75rem;
  background:var(--surface-2);
}
.sequence-image-row img{
  width:90px;height:64px;object-fit:cover;border-radius:.5rem;
}
.sequence-number{
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:.65rem;background:#dbeafe;color:#1d4ed8;font-weight:900;
}
.image-answer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:.75rem;
}
.image-answer-option{
  border:2px solid #e2e8f0;
  border-radius:.8rem;
  padding:.55rem;
  cursor:pointer;
}
.image-answer-option:hover{border-color:#2563eb;background:#eff6ff}
.image-answer-option img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:.55rem;
}
.hotspot-stage{
  position:relative;
  display:inline-block;
  max-width:100%;
}
.hotspot-stage img{max-width:100%;border-radius:.75rem}
.hotspot-point{
  position:absolute;
  width:26px;height:26px;
  border-radius:50%;
  border:3px solid #fff;
  background:#ef4444;
  transform:translate(-50%,-50%);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* =========================================================
   CODING LAB WIDE PRECISION LAYOUT V4
   ========================================================= */
.coding-lab-page{
  max-width:none;
  padding:clamp(.75rem,1.25vw,1.25rem);
}
.coding-lab-page .page-heading{
  max-width:1920px;
  margin-inline:auto;
}
.coding-lab-page .coding-lab-shell{
  width:100%;
  max-width:1920px;
  margin-inline:auto;
  grid-template-columns:190px minmax(620px,1.55fr) minmax(390px,.95fr);
  gap:.75rem;
  min-height:calc(100vh - 172px);
  align-items:stretch;
}
.coding-lab-page .coding-panel{
  border-radius:.85rem;
}
.coding-lab-page .coding-file-tree{
  min-height:300px;
}
.coding-lab-page .coding-editor-wrap{
  min-height:460px;
}
.coding-lab-page .coding-editor{
  min-height:460px;
}
.coding-lab-page .coding-preview-frame{
  min-height:650px;
}
.coding-lab-page .coding-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:.5rem .75rem;
  padding:.55rem .65rem;
}
.coding-toolbar-group{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.4rem;
  min-width:0;
}
.coding-toolbar-config{justify-content:flex-start}
.coding-toolbar-actions{justify-content:flex-end}
.coding-toolbar-config #languageMode{width:125px;flex:0 0 125px}
.coding-toolbar-config #frameworkMode{width:165px;flex:0 0 165px}
.coding-toolbar .btn{
  white-space:nowrap;
  min-height:34px;
  padding-inline:.75rem;
}
.coding-cursor-info{
  white-space:nowrap;
  justify-self:end;
}
@media(max-width:1550px){
  .coding-lab-page .coding-lab-shell{
    grid-template-columns:180px minmax(560px,1.5fr) minmax(350px,.9fr);
  }
  .coding-lab-page .coding-toolbar{
    grid-template-columns:1fr auto;
  }
  .coding-cursor-info{
    grid-column:1/-1;
    justify-self:end;
    margin-top:-.2rem;
  }
}
@media(max-width:1280px){
  .coding-lab-page .coding-lab-shell{
    grid-template-columns:180px minmax(0,1fr);
  }
  .coding-lab-page .coding-preview-panel{
    grid-column:1/-1;
  }
  .coding-lab-page .coding-preview-frame{min-height:500px}
}
@media(max-width:900px){
  .coding-lab-page{padding:.75rem}
  .coding-lab-page .coding-lab-shell{grid-template-columns:1fr}
  .coding-lab-page .coding-preview-panel{grid-column:auto}
  .coding-lab-page .coding-toolbar{grid-template-columns:1fr}
  .coding-toolbar-actions{justify-content:flex-start}
  .coding-cursor-info{grid-column:auto;justify-self:start;margin-top:0}
}
@media(max-width:560px){
  .coding-toolbar-config #languageMode,
  .coding-toolbar-config #frameworkMode{width:100%;flex:1 1 100%}
  .coding-toolbar-group .btn{flex:1 1 auto}
}

/* Graphic Design Lab Studio */
.graphic-design-page{padding:1rem 1.25rem 1.25rem;max-width:none;overflow:hidden}
.graphic-studio-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.graphic-status{display:flex;align-items:center;gap:.5rem;color:var(--text-muted,#64748b);font-size:.85rem;white-space:nowrap}
.graphic-status span:first-child{width:.55rem;height:.55rem;border-radius:50%;background:#22c55e;box-shadow:0 0 0 .22rem rgba(34,197,94,.12)}
.graphic-studio-shell{height:calc(100vh - 215px);min-height:650px;display:grid;grid-template-columns:220px minmax(0,1fr) 245px;gap:.75rem}
.graphic-sidebar,.graphic-workspace{background:#0c1424;border:1px solid #22304a;border-radius:16px;color:#e5eefc;overflow:hidden;box-shadow:0 18px 45px rgba(15,23,42,.12)}
.graphic-sidebar{padding:.85rem;overflow-y:auto}
.graphic-panel-title{font-weight:800;margin-bottom:.75rem;font-size:.92rem}
.graphic-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.graphic-tool{border:1px solid #263653;background:#111c31;color:#dbeafe;border-radius:10px;min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;font-size:.75rem}
.graphic-tool b{font-size:1.15rem}.graphic-tool:hover,.graphic-tool.active{border-color:#38bdf8;background:#102d4f;color:#fff}
.graphic-section-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#8ca0c1;font-weight:800;margin:1.1rem 0 .55rem}
.graphic-template-list{display:grid;gap:.42rem}.graphic-template-list button{border:1px solid #263653;background:#111c31;color:#dbeafe;border-radius:9px;text-align:left;padding:.58rem .68rem;font-size:.78rem}
.graphic-template-list button:hover{border-color:#38bdf8;color:#fff}
.graphic-size-fields{display:grid;grid-template-columns:1fr auto 1fr;gap:.4rem;align-items:center}.graphic-sidebar .form-control,.graphic-sidebar .form-select{background:#111c31;border-color:#2a3b59;color:#e5eefc}
.graphic-workspace{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0}
.graphic-top-toolbar{min-height:58px;padding:.55rem .7rem;display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;border-bottom:1px solid #22304a;background:#101a2d}
.graphic-toolbar-group{display:flex;align-items:center;gap:.35rem}.graphic-toolbar-spacer{flex:1}.graphic-icon-btn{width:34px;height:34px;border:1px solid #31425f;border-radius:8px;background:#132038;color:#e5eefc}.graphic-icon-btn:hover,.graphic-icon-btn.active{border-color:#38bdf8;background:#12365c}.graphic-icon-btn.danger:hover{border-color:#fb7185;color:#fecdd3}
.graphic-object-controls label{display:flex;align-items:center;gap:.3rem;font-size:.7rem;color:#aab9d1}.graphic-object-controls input[type=color]{width:30px;height:30px;padding:2px;border:1px solid #31425f;border-radius:7px;background:#132038}.graphic-object-controls input[type=number]{width:52px;height:32px;background:#132038;border:1px solid #31425f;color:#fff;border-radius:7px;padding:.25rem}.graphic-object-controls input[type=range]{width:75px}
.graphic-text-controls .form-select{width:105px}.graphic-text-controls .form-control{width:62px}.graphic-top-toolbar .form-select,.graphic-top-toolbar .form-control{background:#132038;border-color:#31425f;color:#fff}
.graphic-canvas-stage{position:relative;overflow:auto;background-color:#dfe6ef;background-image:linear-gradient(45deg,#d3dbe6 25%,transparent 25%),linear-gradient(-45deg,#d3dbe6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d3dbe6 75%),linear-gradient(-45deg,transparent 75%,#d3dbe6 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;display:flex;align-items:flex-start;justify-content:center;padding:42px}
.graphic-canvas-wrap{flex:0 0 auto;background:#fff;box-shadow:0 16px 50px rgba(15,23,42,.3);position:relative;line-height:0}
.graphic-canvas-wrap canvas{display:block;touch-action:none;cursor:default}
.graphic-ruler{position:absolute;background:#101a2d;z-index:2}.graphic-ruler-top{left:28px;right:0;top:0;height:26px;border-bottom:1px solid #334155}.graphic-ruler-left{left:0;top:26px;bottom:0;width:28px;border-right:1px solid #334155}
.graphic-bottom-bar{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.35rem .75rem;background:#101a2d;border-top:1px solid #22304a;font-size:.75rem;color:#9fb0ca}.graphic-zoom-controls{display:flex;align-items:center;gap:.45rem}.graphic-zoom-controls button{border:1px solid #31425f;background:#132038;color:#fff;border-radius:7px;min-width:30px;height:28px}.graphic-zoom-controls input{width:110px}
.graphic-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;margin-bottom:.9rem}.graphic-tabs button{border:1px solid #263653;background:#111c31;color:#9fb0ca;border-radius:8px;padding:.5rem .25rem;font-size:.72rem;font-weight:700}.graphic-tabs button.active{background:#0d6efd;color:#fff;border-color:#0d6efd}
.graphic-side-panel{display:none}.graphic-side-panel.active{display:block}.graphic-layer-actions{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:.6rem}.graphic-layer-actions button{border:1px solid #2b3d5d;background:#111c31;color:#dbeafe;border-radius:8px;padding:.42rem;font-size:.75rem}
.graphic-layers-list{display:grid;gap:.35rem}.graphic-layer-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:.45rem;width:100%;border:1px solid #263653;background:#111c31;color:#dbeafe;border-radius:9px;padding:.5rem;text-align:left;font-size:.76rem}.graphic-layer-item.active{border-color:#38bdf8;background:#12365c}.graphic-layer-item small{color:#7890b5}.layer-icon{display:grid;place-items:center;width:26px;height:26px;background:#17243c;border-radius:6px;font-weight:800}
.graphic-help-card{background:#111c31;border:1px solid #263653;border-radius:10px;padding:.7rem;color:#9fb0ca;font-size:.72rem;line-height:1.5}
.graphic-properties-panel .form-control{background:#111c31;border-color:#2a3b59;color:#fff}
@media(max-width:1350px){.graphic-studio-shell{grid-template-columns:190px minmax(0,1fr) 215px}.graphic-object-controls label{font-size:0}.graphic-text-controls{display:none}}
@media(max-width:1050px){.graphic-design-page{overflow:visible}.graphic-studio-shell{height:auto;grid-template-columns:190px minmax(0,1fr);min-height:0}.graphic-properties-panel{grid-column:1/-1;max-height:none}.graphic-workspace{min-height:760px}}
@media(max-width:760px){.graphic-design-page{padding:.75rem}.graphic-studio-heading{align-items:flex-start;flex-direction:column}.graphic-studio-shell{display:flex;flex-direction:column}.graphic-sidebar{max-height:none}.graphic-workspace{min-height:700px}.graphic-canvas-stage{padding:40px 18px}.graphic-top-toolbar{align-items:flex-start}.graphic-toolbar-spacer{display:none}.graphic-object-controls{order:3;width:100%;overflow-x:auto}.graphic-text-controls{display:flex;order:4;width:100%;overflow-x:auto}.graphic-bottom-bar{flex-direction:column;align-items:stretch}.graphic-zoom-controls{justify-content:center}}

/* Word Studio Pro */
.word-pro-shell{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px}.word-main-panel{min-width:0}.word-ribbon{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border-bottom:1px solid var(--border-color,#dbe4f0);background:#f8fafc}.word-ribbon-group{display:flex;align-items:end;gap:5px;padding-right:8px;border-right:1px solid #dbe4f0}.word-ribbon button{border:1px solid #cbd5e1;background:#fff;border-radius:7px;padding:7px 9px;font-weight:700}.word-ribbon button.primary{background:#2563eb;color:#fff}.word-ribbon label{font-size:11px;font-weight:700}.word-ribbon select{display:block;border:1px solid #cbd5e1;border-radius:6px;padding:5px}.word-template-list{display:grid;gap:8px}.word-template-list button{padding:9px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;text-align:left;font-weight:700}.word-inserted-table{width:100%;border-collapse:collapse;margin:12px 0}.word-inserted-table td,.word-inserted-table th{border:1px solid #334155;padding:7px}.document-page.landscape{width:297mm;min-height:210mm}@media(max-width:1100px){.word-pro-shell{grid-template-columns:1fr}.word-side-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}@media(max-width:700px){.word-side-panel{grid-template-columns:1fr}.word-ribbon-group{border-right:0}.document-stage{overflow:auto}}
/* Photo Studio */
.photo-studio-shell{display:grid;grid-template-columns:220px minmax(0,1fr) 250px;gap:14px}.photo-panel,.photo-workspace{background:#0f172a;color:#e2e8f0;border-radius:15px;padding:14px}.photo-panel h3{font-size:14px}.photo-panel label{display:block;font-size:12px;font-weight:700;margin-bottom:12px}.photo-panel input[type=range]{width:100%}.photo-panel output{float:right}.photo-toolbar{display:flex;align-items:center;margin-bottom:10px}.photo-canvas-wrap{display:grid;place-items:center;min-height:600px;overflow:auto;background:#111827}.photo-canvas-wrap canvas{max-width:100%;height:auto;box-shadow:0 12px 30px #0008}@media(max-width:1050px){.photo-studio-shell{grid-template-columns:1fr}.photo-canvas-wrap{min-height:420px}}
/* Accounting Lab */
.accounting-lab{display:grid;gap:14px}.account-tabs{display:flex;flex-wrap:wrap;gap:8px}.account-tabs button{border:1px solid #cbd5e1;background:#fff;border-radius:9px;padding:9px 13px;font-weight:800}.account-tabs button.active{background:#2563eb;color:#fff}.account-tab{display:none}.account-tab.active{display:block}.account-tab input{min-width:110px;width:100%;border:1px solid #dbe4f0;border-radius:7px;padding:7px}.account-summary{background:linear-gradient(135deg,#eef6ff,#fff);border:1px solid #dbeafe;border-radius:14px;padding:16px}.account-summary small,.account-summary strong{display:block}.account-summary strong{font-size:22px;margin-top:6px}

/* =========================================================
   STUDIO WORKSPACE SIDEBAR COLLAPSE + VSCODE CODING LAB V22
   ========================================================= */
.desktop-sidebar-toggle{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line,#d9e2ef);border-radius:10px;background:var(--surface,#fff);color:var(--text,#0f172a);font-weight:900}
body.sidebar-collapsed .app-layout{grid-template-columns:76px minmax(0,1fr)}
body.sidebar-collapsed .app-sidebar{width:76px;padding-inline:.55rem}
body.sidebar-collapsed .app-content{grid-column:2}
body.sidebar-collapsed .app-sidebar .brand-copy,
body.sidebar-collapsed .app-sidebar .sidebar-role,
body.sidebar-collapsed .app-sidebar .nav-group-title>span:nth-child(2),
body.sidebar-collapsed .app-sidebar .nav-chevron,
body.sidebar-collapsed .app-sidebar .sidebar-item>span:last-child,
body.sidebar-collapsed .app-sidebar .system-pill{display:none!important}
body.sidebar-collapsed .app-sidebar .sidebar-brand{justify-content:center;padding-inline:0}
body.sidebar-collapsed .app-sidebar .nav-group-title,
body.sidebar-collapsed .app-sidebar .sidebar-item{justify-content:center;padding-inline:.5rem}
body.sidebar-collapsed .app-sidebar .nav-group-items{padding-left:0}
body.sidebar-collapsed .app-sidebar .sidebar-icon{margin:0;font-size:1rem}
body.sidebar-collapsed .app-sidebar details.nav-group{position:relative}
body.sidebar-collapsed .app-sidebar details.nav-group:not([open]) .nav-group-items{display:none}
body.sidebar-collapsed .app-sidebar .logout-link{justify-content:center}
@media(max-width:991.98px){.desktop-sidebar-toggle{display:none!important}}

.vscode-workbench-header{display:grid;grid-template-columns:auto minmax(260px,680px) auto;align-items:center;gap:.65rem;margin:0 auto .5rem;max-width:1920px;background:#181818;border:1px solid #333;border-radius:.65rem .65rem 0 0;padding:.38rem .55rem;color:#ddd}
.vscode-window-controls,.vscode-editor-tools{display:flex;align-items:center;gap:.28rem}.vscode-window-controls button,.vscode-editor-tools button{height:30px;min-width:32px;border:0;border-radius:5px;background:transparent;color:#cbd5e1}.vscode-window-controls button:hover,.vscode-editor-tools button:hover,.vscode-editor-tools button.active{background:#333;color:#fff}
.vscode-command-center{height:31px;border:1px solid #454545!important;border-radius:6px!important;background:#2a2d2e!important;color:#d4d4d4!important;text-align:left;padding:0 .75rem!important;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vscode-command-center kbd{float:right;background:#3b3b3b;color:#ddd;margin-left:1rem}
.vscode-layout{grid-template-columns:48px 205px minmax(580px,1.45fr) minmax(340px,.9fr)!important;gap:0!important;background:#181818;border:1px solid #333;border-top:0;border-radius:0!important;overflow:hidden;min-height:calc(100vh - 205px)!important}
.vscode-layout .coding-panel{border-radius:0!important;border:0;border-right:1px solid #333;box-shadow:none;background:#1e1e1e}
.vscode-activitybar{grid-column:1;display:flex;flex-direction:column;align-items:center;background:#181818;border-right:1px solid #333;padding:.25rem 0}
.vscode-activitybar button{width:48px;height:48px;border:0;background:transparent;color:#858585;font-size:1.25rem;border-left:2px solid transparent}.vscode-activitybar button:hover{color:#fff}.vscode-activitybar button.active{color:#fff;border-left-color:#fff}.vscode-activitybar .activity-bottom{margin-top:auto}
.vscode-layout .coding-explorer{grid-column:2;background:#181818}
.vscode-layout .coding-editor-panel{grid-column:3;background:#1e1e1e}
.vscode-layout .coding-preview-panel{grid-column:4;background:#1e1e1e}
.vscode-layout.explorer-hidden{grid-template-columns:48px 0 minmax(620px,1.55fr) minmax(340px,.9fr)!important}.vscode-layout.explorer-hidden .coding-explorer{visibility:hidden;pointer-events:none;overflow:hidden}
.vscode-layout.preview-hidden{grid-template-columns:48px 205px minmax(0,1fr) 0!important}.vscode-layout.preview-hidden .coding-preview-panel{visibility:hidden;pointer-events:none;overflow:hidden}
.vscode-layout.explorer-hidden.preview-hidden{grid-template-columns:48px 0 minmax(0,1fr) 0!important}
.vscode-layout .coding-panel-header{background:#181818;border-color:#333;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em}
.vscode-layout .coding-project-name{background:#181818;border-color:#333}.vscode-layout .coding-project-name input{background:#252526!important;border-color:#3c3c3c!important;border-radius:2px!important}
.vscode-layout .coding-file-tree{background:#181818;padding:.25rem;min-height:260px}.vscode-layout .coding-file-item{border-radius:0;padding:.32rem .5rem;color:#ccc}.vscode-layout .coding-file-item:hover{background:#2a2d2e}.vscode-layout .coding-file-item.active{background:#37373d;color:#fff}
.vscode-layout .coding-assets-section,.vscode-layout .coding-explorer-footer{background:#181818;border-color:#333}
.vscode-layout .coding-tab-bar{background:#181818;border-color:#333}.vscode-layout .coding-tab{background:#2d2d2d;border-color:#252525;color:#aaa;border-top:0;padding:.55rem .75rem}.vscode-layout .coding-tab.active{background:#1e1e1e;color:#fff;border-top:1px solid #007acc}
.vscode-layout .coding-toolbar{background:#252526;border-color:#333;padding:.42rem .55rem}.vscode-layout .coding-toolbar select{background:#333!important;border-color:#4b4b4b!important;border-radius:2px!important}
.vscode-layout .coding-editor-wrap{background:#1e1e1e;min-height:480px}.vscode-layout .coding-line-numbers{background:#1e1e1e;color:#858585;border-right:1px solid #252525}.vscode-layout .coding-editor{background:#1e1e1e;color:#d4d4d4;caret-color:#fff;min-height:480px;line-height:1.55}
.vscode-layout .coding-bottom-panel{background:#1e1e1e;border-color:#333;transition:max-height .2s ease,opacity .2s ease}.vscode-layout .coding-bottom-panel.panel-hidden{max-height:0!important;opacity:0;overflow:hidden;border:0}.vscode-layout .coding-bottom-tabs{border-color:#333}.vscode-layout .coding-bottom-tabs button.active{border-color:#fff}
.vscode-layout .coding-preview-frame{min-height:620px}.vscode-statusbar{height:24px;display:flex;align-items:center;gap:1rem;max-width:1920px;margin:0 auto;background:#007acc;color:#fff;padding:0 .65rem;font-size:.7rem;border-radius:0 0 .55rem .55rem}.vscode-statusbar span{white-space:nowrap}
.vscode-search-panel{padding:.45rem;background:#181818;border-bottom:1px solid #333}.vscode-search-row{display:grid;grid-template-columns:1fr 30px;gap:.25rem}.vscode-search-row input{min-width:0;background:#3c3c3c;color:#fff;border:1px solid #555;padding:.35rem .45rem;font-size:.75rem}.vscode-search-row button{border:0;background:#333;color:#fff}.vscode-search-results{max-height:330px;overflow:auto;margin-top:.45rem}.vscode-search-results button{display:grid;width:100%;border:0;background:transparent;color:#ccc;text-align:left;padding:.35rem .4rem;font-size:.7rem}.vscode-search-results button:hover{background:#2a2d2e}.vscode-search-results button strong{color:#fff}.vscode-search-results button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#9ca3af}
.vscode-command-palette{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:12000;padding-top:8vh}.vscode-command-dialog{width:min(720px,92vw);margin:auto;background:#252526;border:1px solid #555;box-shadow:0 18px 60px #0009}.vscode-command-dialog input{width:100%;border:0;border-bottom:1px solid #555;background:#3c3c3c;color:#fff;padding:.75rem .9rem;outline:0}.vscode-command-dialog>div{max-height:420px;overflow:auto}.vscode-command-dialog button{display:flex;justify-content:space-between;width:100%;border:0;background:#252526;color:#ddd;padding:.55rem .75rem;text-align:left}.vscode-command-dialog button:hover{background:#04395e}.vscode-command-dialog kbd{background:transparent;color:#9ca3af}
@media(max-width:1450px){.vscode-layout{grid-template-columns:48px 190px minmax(540px,1fr)!important}.vscode-layout .coding-preview-panel{grid-column:2/4;min-height:480px}.vscode-layout.preview-hidden .coding-preview-panel{display:none}.vscode-layout.explorer-hidden{grid-template-columns:48px 0 minmax(0,1fr)!important}.vscode-layout.explorer-hidden .coding-preview-panel{grid-column:1/4}}
@media(max-width:900px){.vscode-workbench-header{grid-template-columns:auto 1fr}.vscode-editor-tools{grid-column:1/-1}.vscode-layout{grid-template-columns:46px minmax(0,1fr)!important}.vscode-layout .coding-explorer,.vscode-layout .coding-editor-panel,.vscode-layout .coding-preview-panel{grid-column:2}.vscode-layout .coding-explorer{max-height:350px}.vscode-layout.explorer-hidden .coding-explorer{display:none}.vscode-statusbar{overflow-x:auto}.vscode-command-center kbd{display:none}}

/* V23 — Global overlay navigation drawer.
   The application content always receives the full viewport width.
   The navigation appears only after the hamburger button is pressed. */
@media (min-width: 0px){
  .app-layout{display:block!important;min-height:100vh}
  .app-sidebar{display:none!important}
  .app-content{grid-column:1!important;width:100%;min-width:0}
  .mobile-menu-btn{display:grid!important;place-items:center;flex:0 0 42px}
  .desktop-sidebar-toggle{display:none!important}
  body.sidebar-collapsed .app-layout{grid-template-columns:1fr!important}
  body.sidebar-collapsed .app-content{grid-column:1!important}
  .mobile-sidebar{width:min(286px,88vw)!important;background:
    radial-gradient(circle at 28% 0,rgba(37,99,235,.19),transparent 34%),
    linear-gradient(180deg,#070b14,#0b1220)!important;
    border-right:1px solid rgba(148,163,184,.16)!important;
    box-shadow:22px 0 55px rgba(2,6,23,.38)}
  .mobile-sidebar .offcanvas-header{padding:1rem 1rem .85rem}
  .mobile-sidebar .offcanvas-body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column}
  .mobile-sidebar .sidebar-nav{margin-top:.65rem;gap:.35rem}
  .mobile-sidebar .nav-group{border:1px solid rgba(148,163,184,.12);border-radius:.82rem;background:rgba(255,255,255,.025);overflow:hidden}
  .mobile-sidebar .nav-group-title{min-height:46px;padding:.7rem .72rem}
  .mobile-sidebar .nav-group-items{padding:0 .45rem .5rem}
  .mobile-sidebar .nav-group-items .sidebar-item{min-height:38px;padding:.48rem .58rem;border-radius:.62rem}
  .mobile-sidebar .nav-group-items .sidebar-item.active{background:linear-gradient(135deg,#2563eb,#0891b2);color:#fff}
  .mobile-sidebar .logout-link{margin-top:auto!important}
  .offcanvas-backdrop.show{opacity:.54;background:#020617}
  .app-topbar{padding-left:clamp(.75rem,2vw,1.5rem)}
}

/* V25 — Enterprise drawer navigation */
.drawer-search-wrap{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:.45rem;padding:.55rem .65rem;margin:.15rem 0 .55rem;border:1px solid rgba(148,163,184,.18);border-radius:.75rem;background:rgba(15,23,42,.72)}
.drawer-search-wrap>span{color:#7dd3fc;font-size:1rem;text-align:center}.drawer-search-wrap input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:.86rem}.drawer-search-wrap input::placeholder{color:#94a3b8}.drawer-search-wrap kbd{padding:.15rem .4rem;border:1px solid rgba(148,163,184,.2);border-radius:.35rem;background:#111827;color:#94a3b8;font-size:.68rem}
.drawer-search-empty{margin:.25rem 0 .6rem;padding:.75rem;border:1px dashed rgba(148,163,184,.24);border-radius:.7rem;color:#94a3b8;text-align:center;font-size:.8rem}
.drawer-section-label{display:flex;align-items:center;justify-content:space-between;margin:.25rem 0 .35rem;color:#93c5fd;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.drawer-section-label button{border:0;background:transparent;color:#94a3b8;font-size:.7rem}.drawer-section-label button:hover{color:#fff}
.drawer-favorites{margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid rgba(148,163,184,.12)}.drawer-favorite-row,.drawer-nav-row{display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:center;gap:.2rem}.drawer-favorite-row .sidebar-item,.drawer-nav-row .sidebar-item{min-width:0}.drawer-pin{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:.5rem;background:transparent;color:#64748b;font-size:1rem}.drawer-pin:hover,.drawer-pin.active{background:rgba(14,165,233,.12);color:#facc15}.drawer-nav-row[hidden]{display:none!important}
.mobile-sidebar .offcanvas-body{overflow:auto;overscroll-behavior:contain}.mobile-sidebar .sidebar-item{transition:background-color .16s ease,color .16s ease,transform .16s ease}.mobile-sidebar .sidebar-item:hover{transform:translateX(2px)}
.global-nav-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:20000;pointer-events:none;opacity:0;background:transparent;transition:opacity .12s ease}.global-nav-progress span{display:block;width:35%;height:100%;background:linear-gradient(90deg,#2563eb,#06b6d4,#38bdf8);transform:translateX(-120%)}.global-nav-progress.active{opacity:1}.global-nav-progress.active span{animation:globalNavProgress 1s ease-in-out infinite}
@keyframes globalNavProgress{0%{transform:translateX(-120%)}70%{transform:translateX(220%)}100%{transform:translateX(320%)}}
body.global-nav-loading{cursor:default}body.global-nav-loading a,body.global-nav-loading button{pointer-events:auto}
body.drawer-open-fallback{overflow:hidden}.drawer-open-fallback #mobileSidebar{display:block;transform:none;visibility:visible}.drawer-open-fallback::after{content:"";position:fixed;inset:0;background:rgba(2,6,23,.58);z-index:1040}.drawer-open-fallback #mobileSidebar{z-index:1045}
@media(min-width:1200px){.mobile-sidebar{width:310px!important}.drawer-search-wrap{margin-top:.25rem}}
@media(max-width:520px){.drawer-pin{width:28px;height:28px}.mobile-sidebar .offcanvas-body{padding:.7rem .75rem 1rem}.drawer-search-wrap{position:sticky;top:0;z-index:5;background:#0b1220}}

/* Coding Lab V33 — tab switching dibuat mudah, satu klik, dan familier */
.vscode-layout .coding-tab-bar{
  min-height:46px;
  display:flex;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scroll-behavior:smooth;
}
.vscode-layout .coding-tab.coding-file-switch{
  position:relative;
  min-width:132px;
  max-width:210px;
  min-height:46px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 13px;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  border-right:1px solid #292929;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.vscode-layout .coding-tab.coding-file-switch:hover{
  background:#252526;
  color:#fff;
}
.vscode-layout .coding-tab.coding-file-switch.active{
  background:#1e1e1e;
  color:#fff;
  box-shadow:inset 0 2px 0 #007acc;
}
.vscode-layout .coding-tab.coding-file-switch.active::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:#007acc;
}
.coding-tab-icon{font-weight:700;flex:0 0 auto;color:#9cdcfe}
.coding-tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;pointer-events:none}
.coding-file-switch kbd{
  margin-left:auto;
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border:1px solid #3b3b3b;
  border-radius:4px;
  background:#181818;
  color:#8f8f8f;
  font-size:10px;
  pointer-events:none;
}
.coding-file-switch.active kbd{color:#d4d4d4;border-color:#555}
@media(max-width:760px){
  .vscode-layout .coding-tab.coding-file-switch{min-width:112px;padding:0 10px}
  .coding-file-switch kbd{display:none}
}

/* Public homepage showcase */
.public-showcase,.graduate-section{background:#f8fbff;color:#0f172a}.public-showcase{border-top:1px solid #e2e8f0}.py-lg-6{padding-top:5rem!important;padding-bottom:5rem!important}.showcase-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem}.showcase-heading h2,.graduate-intro h2{max-width:760px;margin:.45rem 0 0;font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.045em;font-weight:900}.section-kicker{font-size:.78rem;font-weight:900;letter-spacing:.16em;color:#2563eb}.activity-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.activity-card{position:relative;min-height:300px;padding:0;overflow:hidden;border:0;border-radius:1.6rem;background:#0f172a;text-align:left;box-shadow:0 18px 45px rgba(15,23,42,.12);isolation:isolate}.activity-card:nth-child(1),.activity-card:nth-child(4){grid-column:span 7}.activity-card:nth-child(2),.activity-card:nth-child(3){grid-column:span 5}.activity-card img{width:100%;height:100%;min-height:300px;object-fit:cover;transition:transform .45s ease}.activity-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(2,6,23,.9));z-index:1}.activity-card:hover img{transform:scale(1.045)}.activity-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem;color:#fff;display:grid;gap:.35rem}.activity-overlay strong{font-size:1.4rem}.activity-overlay small{max-width:580px;color:#dbeafe}.activity-overlay em{margin-top:.35rem;font-style:normal;font-size:.8rem;font-weight:800;color:#67e8f9}.graduate-section{background:linear-gradient(180deg,#f8fbff,#eef5ff)}.graduate-intro{max-width:850px}.graduate-intro p{color:#64748b;font-size:1.05rem}.graduate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.graduate-card{position:relative;padding:1.5rem;border:1px solid #dbe5f1;border-radius:1.5rem;background:rgba(255,255,255,.9);box-shadow:0 15px 45px rgba(15,23,42,.08)}.graduate-avatar{width:76px;height:76px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;font-size:1.3rem;font-weight:900;box-shadow:0 14px 28px rgba(37,99,235,.25)}.graduate-score{position:absolute;right:1.5rem;top:1.5rem;text-align:right}.graduate-score span{display:block;font-size:.72rem;color:#64748b}.graduate-score strong{font-size:1.35rem;color:#0f766e}.graduate-card h3{margin:1.2rem 0 .15rem;font-size:1.25rem;font-weight:900}.graduate-skill{color:#2563eb;font-weight:800}.graduate-card blockquote{min-height:72px;margin:1rem 0;color:#475569}.graduate-card a{font-weight:900;text-decoration:none}.value-banner{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2rem;border-radius:1.8rem;background:linear-gradient(135deg,#07101f,#12346d);color:#fff;box-shadow:0 24px 60px rgba(7,16,31,.24)}.value-banner span{font-size:.75rem;font-weight:900;letter-spacing:.15em;color:#67e8f9}.value-banner h3{margin:.35rem 0;font-size:clamp(1.55rem,3vw,2.4rem);font-weight:900}.value-banner p{margin:0;max-width:760px;color:#bfdbfe}.gallery-modal-content{overflow:hidden;border:0;border-radius:1.5rem;background:#07101f;color:#fff}.gallery-modal-content img{width:100%;max-height:72vh;object-fit:contain;background:#020617}.gallery-close{position:absolute;z-index:3;right:1rem;top:1rem;padding:.75rem;background-color:rgba(255,255,255,.85);border-radius:50%}.gallery-modal-caption{padding:1.4rem 1.6rem}.gallery-modal-caption p{margin:0;color:#bfdbfe}
@media(max-width:991.98px){.showcase-heading{align-items:flex-start;flex-direction:column}.activity-card:nth-child(n){grid-column:span 6}.graduate-grid{grid-template-columns:1fr 1fr}.graduate-card:last-child{grid-column:1/-1}.value-banner{align-items:flex-start;flex-direction:column}}
@media(max-width:575.98px){.activity-card:nth-child(n){grid-column:1/-1;min-height:250px}.activity-card img{min-height:250px}.graduate-grid{grid-template-columns:1fr}.graduate-card:last-child{grid-column:auto}.value-banner{padding:1.35rem}.showcase-heading h2,.graduate-intro h2{font-size:2rem}}

/* V27 Public Landing Page + lightweight AOS */
html{scroll-behavior:smooth}.landing-body{background:#f8fafc;color:#0f172a;overflow-x:hidden}.landing-body>.public-navbar{display:none!important}.landing-nav{position:fixed;inset:0 0 auto;z-index:1100;background:rgba(7,15,31,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(148,163,184,.18)}.landing-nav-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.landing-brand{display:grid;grid-template-columns:46px auto;grid-template-rows:auto auto;column-gap:.65rem;color:#fff;text-decoration:none}.landing-brand>span{grid-row:1/3;width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#2563eb,#06b6d4);font-weight:900}.landing-brand strong{align-self:end;line-height:1;font-size:1rem}.landing-brand small{align-self:start;font-size:.68rem;letter-spacing:.12em;color:#93c5fd}.landing-menu{display:flex;align-items:center;gap:.35rem}.landing-menu a{padding:.68rem .82rem;border-radius:.8rem;color:#dbeafe;text-decoration:none;font-size:.9rem;font-weight:700}.landing-menu a:hover{background:rgba(255,255,255,.08);color:#fff}.landing-nav-cta{background:#2563eb!important;color:#fff!important}.landing-menu-btn{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font-size:1.3rem}.landing-hero{position:relative;min-height:100svh;padding:130px 0 70px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 15% 20%,rgba(37,99,235,.34),transparent 35%),radial-gradient(circle at 88% 15%,rgba(6,182,212,.25),transparent 32%),linear-gradient(135deg,#050b16,#0b1d3c 52%,#07101f);color:#fff}.landing-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,#000,transparent)}.landing-orb{position:absolute;border-radius:999px;filter:blur(2px);opacity:.5}.landing-orb-one{width:280px;height:280px;left:-120px;top:18%;background:#2563eb}.landing-orb-two{width:200px;height:200px;right:-70px;bottom:15%;background:#06b6d4}.landing-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:center;gap:clamp(2rem,5vw,5rem)}.landing-chip{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .85rem;border:1px solid rgba(125,211,252,.28);border-radius:999px;background:rgba(14,165,233,.08);font-size:.75rem;font-weight:900;letter-spacing:.12em;color:#bae6fd}.landing-chip span{width:8px;height:8px;border-radius:50%;background:#22d3ee;box-shadow:0 0 18px #22d3ee}.landing-copy h1{margin:1.25rem 0;font-size:clamp(2.7rem,6vw,5.7rem);line-height:.96;letter-spacing:-.06em;font-weight:950}.landing-copy h1 em{font-style:normal;background:linear-gradient(90deg,#60a5fa,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}.landing-copy>p{max-width:720px;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.8;color:#cbd5e1}.landing-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}.btn-landing-primary,.btn-landing-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.8rem 1.25rem;border-radius:14px;text-decoration:none;font-weight:900}.btn-landing-primary{background:linear-gradient(135deg,#2563eb,#0284c7);color:#fff;box-shadow:0 15px 35px rgba(37,99,235,.28)}.btn-landing-secondary{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff}.landing-stats{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}.landing-stats>div{min-width:120px;padding:1rem 1.1rem;border:1px solid rgba(148,163,184,.18);border-radius:16px;background:rgba(15,23,42,.45)}.landing-stats strong,.landing-stats span{display:block}.landing-stats strong{font-size:1.25rem}.landing-stats span{color:#93c5fd;font-size:.78rem}.landing-login-card{position:relative;margin:0;max-width:520px;width:100%;justify-self:end;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.97);box-shadow:0 30px 80px rgba(2,6,23,.38)}.login-card-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}.landing-section{padding:clamp(4rem,8vw,7rem) 0;background:#fff}.section-title{max-width:820px;margin-bottom:2rem}.section-title.text-center{margin-left:auto;margin-right:auto}.section-title>span{font-size:.76rem;font-weight:900;letter-spacing:.16em;color:#2563eb}.section-title h2{margin:.6rem 0;font-size:clamp(2rem,4.5vw,3.6rem);line-height:1.05;letter-spacing:-.045em;font-weight:950}.section-title p{color:#64748b;font-size:1.05rem}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.feature-card{padding:1.5rem;border:1px solid #e2e8f0;border-radius:24px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 18px 50px rgba(15,23,42,.06)}.feature-card>div{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:#eff6ff;font-size:1.5rem}.feature-card h3{margin:1rem 0 .5rem;font-size:1.15rem;font-weight:900}.feature-card p{margin:0;color:#64748b;line-height:1.65}.teacher-section{background:linear-gradient(180deg,#fff,#eff6ff)}.teacher-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem}.teacher-card{display:grid;grid-template-columns:210px minmax(0,1fr);overflow:hidden;border:1px solid #dbeafe;border-radius:28px;background:#fff;box-shadow:0 24px 60px rgba(15,23,42,.08)}.teacher-card img{width:100%;height:100%;min-height:330px;object-fit:cover}.teacher-card-body{padding:1.6rem;align-self:center}.teacher-card-body>span{font-size:.72rem;font-weight:900;letter-spacing:.13em;color:#2563eb}.teacher-card h3{margin:.55rem 0;font-size:1.45rem;font-weight:950}.teacher-card p{color:#64748b;line-height:1.7}.teacher-tags,.developer-skills{display:flex;flex-wrap:wrap;gap:.5rem}.teacher-tags b,.developer-skills b{padding:.45rem .7rem;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:.74rem}.graduate-photo-card{padding-top:1rem}.graduate-photo{width:88px;height:88px;border-radius:24px;object-fit:cover;border:4px solid #fff;box-shadow:0 12px 30px rgba(15,23,42,.14)}.developer-section{padding:clamp(4rem,8vw,7rem) 0;background:linear-gradient(135deg,#07101f,#0d2a54);color:#fff}.developer-grid{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,5rem);align-items:center}.developer-photo-wrap{position:relative;max-width:440px}.developer-photo-wrap:before{content:"";position:absolute;inset:8% -8% -8% 8%;border-radius:32px;background:linear-gradient(135deg,#2563eb,#06b6d4);filter:blur(0)}.developer-photo-wrap img{position:relative;width:100%;aspect-ratio:4/4.6;object-fit:cover;border-radius:32px;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 80px rgba(2,6,23,.45)}.developer-copy>span{font-size:.75rem;font-weight:900;letter-spacing:.16em;color:#67e8f9}.developer-copy h2{margin:.55rem 0 .2rem;font-size:clamp(2.4rem,5vw,4.6rem);font-weight:950;letter-spacing:-.05em}.developer-copy h3{color:#93c5fd}.developer-copy p{max-width:760px;color:#cbd5e1;line-height:1.8}.developer-skills{margin:1.3rem 0 1.7rem}.developer-skills b{background:rgba(255,255,255,.08);color:#dbeafe;border:1px solid rgba(255,255,255,.1)}.landing-footer{padding:2.2rem 0;background:#030712;color:#cbd5e1}.landing-footer .container{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}.landing-footer strong{color:#fff}.landing-footer p{margin:.35rem 0 0}.landing-footer a{margin-left:1rem;color:#cbd5e1;text-decoration:none}.landing-footer small{grid-column:1/-1;padding-top:1rem;border-top:1px solid rgba(148,163,184,.14);color:#64748b}
[data-aos]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}[data-aos="fade-left"]{transform:translateX(30px)}[data-aos="fade-right"]{transform:translateX(-30px)}[data-aos="zoom-in"]{transform:scale(.94)}[data-aos].aos-animate{opacity:1;transform:none}.landing-body .public-showcase,.landing-body .graduate-section{scroll-margin-top:78px}
@media(max-width:1199.98px){.landing-menu a{padding:.6rem .55rem;font-size:.82rem}.landing-hero-grid{grid-template-columns:1fr 440px}.feature-grid{grid-template-columns:repeat(2,1fr)}.teacher-card{grid-template-columns:170px 1fr}}
@media(max-width:991.98px){.landing-menu-btn{display:grid;place-items:center}.landing-menu{position:absolute;top:66px;left:12px;right:12px;display:none;flex-direction:column;align-items:stretch;padding:.75rem;border:1px solid rgba(148,163,184,.18);border-radius:18px;background:#07101f;box-shadow:0 24px 60px rgba(2,6,23,.35)}.landing-menu.open{display:flex}.landing-menu a{text-align:center}.landing-hero{padding-top:120px}.landing-hero-grid{grid-template-columns:1fr}.landing-login-card{justify-self:start;max-width:650px}.teacher-grid{grid-template-columns:1fr}.developer-grid{grid-template-columns:1fr}.developer-photo-wrap{max-width:360px}.landing-copy h1{max-width:850px}}
@media(max-width:767.98px){.landing-nav-inner{min-height:66px}.landing-brand{grid-template-columns:40px auto}.landing-brand>span{width:40px;height:40px}.landing-hero{padding:104px 0 48px}.landing-copy h1{font-size:clamp(2.4rem,12vw,4rem)}.landing-actions>a{width:100%}.landing-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}.landing-stats>div{min-width:0;padding:.8rem;text-align:center}.feature-grid{grid-template-columns:1fr}.teacher-card{grid-template-columns:1fr}.teacher-card img{height:340px;min-height:0}.landing-footer .container{grid-template-columns:1fr}.landing-footer a{margin:0 .8rem 0 0}}
@media(max-width:479.98px){.container{--bs-gutter-x:1.2rem}.landing-brand small{font-size:.58rem}.landing-brand strong{font-size:.9rem}.landing-hero{min-height:auto}.landing-chip{font-size:.62rem;letter-spacing:.08em}.landing-copy>p{font-size:.96rem}.landing-stats{grid-template-columns:1fr}.landing-stats>div{display:flex;align-items:center;justify-content:space-between}.landing-login-card{padding:1.15rem!important;border-radius:20px}.login-footer-links{gap:.5rem;flex-direction:column}.teacher-card img{height:300px}.teacher-card-body{padding:1.25rem}.developer-photo-wrap{max-width:100%}.developer-copy h2{font-size:2.3rem}.activity-overlay{padding:1.1rem}.activity-overlay strong{font-size:1.15rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-aos]{opacity:1!important;transform:none!important;transition:none!important}.activity-card img{transition:none}}

/* ATASOGE CODESTUDIO V2 - refined modern landing page */
.landing-body{background:#f5f7fb}.landing-nav{background:rgba(5,13,29,.94);border-bottom-color:rgba(148,163,184,.12)}
.landing-brand>span{background:linear-gradient(135deg,#2563eb,#0ea5e9);box-shadow:0 10px 28px rgba(37,99,235,.24)}
.landing-nav-cta{background:linear-gradient(135deg,#3156d8,#2389d7)!important;box-shadow:0 8px 24px rgba(37,99,235,.22)}
.landing-hero{min-height:920px;background:radial-gradient(circle at 20% 24%,rgba(37,99,235,.20),transparent 33%),radial-gradient(circle at 80% 20%,rgba(14,165,233,.12),transparent 28%),linear-gradient(135deg,#071126 0%,#0b1830 52%,#081321 100%)}
.landing-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 15%,rgba(255,255,255,.018) 48%,transparent 75%);animation:heroSheen 10s linear infinite}
.landing-orb{filter:blur(22px);opacity:.24}.landing-orb-one{width:360px;height:360px}.landing-orb-two{width:260px;height:260px}
.landing-copy h1{font-size:clamp(2.8rem,5.5vw,5.4rem);line-height:1.01}.landing-copy h1 em{background:linear-gradient(90deg,#5b7cfa,#39a9ea);-webkit-background-clip:text;background-clip:text}
.landing-copy>p{max-width:680px;color:#c5d0df}.landing-chip{background:rgba(37,99,235,.09);border-color:rgba(96,165,250,.24);color:#c8ddfb}.landing-chip span{background:#4fd1c5;box-shadow:0 0 12px rgba(79,209,197,.72)}
.landing-login-card{color:#e5edf7;background:linear-gradient(180deg,rgba(18,32,58,.96),rgba(11,24,45,.97));border-color:rgba(125,160,205,.28);box-shadow:0 34px 90px rgba(0,7,20,.42);backdrop-filter:blur(18px)}
.landing-login-card .login-heading{color:#f8fbff}.landing-login-card .text-secondary,.landing-login-card .form-label,.landing-login-card .form-check-label,.landing-login-card .login-status{color:#9fb0c6!important}.landing-login-card .form-control{min-height:52px;color:#f8fbff;background:rgba(4,14,31,.48);border-color:rgba(125,160,205,.30)}.landing-login-card .form-control::placeholder{color:#8190a6}.landing-login-card .form-control:focus{background:rgba(4,14,31,.72);border-color:#4d79e6;box-shadow:0 0 0 .22rem rgba(77,121,230,.13)}
.landing-login-card .border-top{border-color:rgba(148,163,184,.16)!important}.landing-login-card .btn-primary{border:0;background:linear-gradient(135deg,#3156d8,#2389d7);box-shadow:0 14px 30px rgba(37,99,235,.22)}.landing-login-card .login-link{color:#71b7f4}.login-logo{background:linear-gradient(135deg,#3156d8,#0ea5e9);box-shadow:0 12px 28px rgba(37,99,235,.24)}
.btn-landing-primary{background:linear-gradient(135deg,#3156d8,#2389d7);box-shadow:0 12px 30px rgba(37,99,235,.22);transition:transform .25s ease,box-shadow .25s ease}.btn-landing-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 35px rgba(37,99,235,.30)}.btn-landing-secondary{border-color:rgba(148,163,184,.28);background:rgba(255,255,255,.035);transition:.25s ease}.btn-landing-secondary:hover{color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.landing-stats>div{background:rgba(10,24,47,.64);border-color:rgba(148,163,184,.14);transition:transform .25s ease,border-color .25s ease}.landing-stats>div:hover{transform:translateY(-3px);border-color:rgba(96,165,250,.34)}
.coding-preview{position:relative;max-width:690px;margin:1.6rem 0 0;overflow:hidden;border:1px solid rgba(96,165,250,.22);border-radius:18px;background:rgba(3,12,28,.66);box-shadow:0 20px 48px rgba(0,8,25,.28)}
.coding-preview-bar{min-height:42px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.025)}.coding-preview-bar .window-dot{width:8px;height:8px;border-radius:50%;background:#61728a}.coding-preview-bar strong{margin-left:7px;color:#b8c6d9;font-size:.76rem;font-weight:700}.coding-preview-bar em{margin-left:auto;color:#5eb8ef;font-size:.68rem;font-style:normal;letter-spacing:.05em}
.coding-preview pre{margin:0;padding:16px 18px;overflow:hidden;color:#dbe7f6;font:500 .78rem/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.code-muted{color:#7f8da1}.code-blue{color:#67a6ff}.code-cyan{color:#55cbd3}.code-green{color:#7bc89c}.typing-code{display:inline-block;max-width:0;white-space:nowrap;overflow:hidden;vertical-align:bottom;color:#f3f7fb;animation:typeCode 5.5s steps(35,end) infinite}.coding-cursor{position:absolute;right:18px;bottom:18px;width:7px;height:15px;background:#7db5ff;opacity:.72;animation:cursorBlink 1s steps(2,end) infinite}
.feature-card,.teacher-card,.graduate-card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.feature-card:hover,.teacher-card:hover,.graduate-card:hover{transform:translateY(-6px);border-color:#bfd5f5;box-shadow:0 24px 60px rgba(15,23,42,.10)}
.developer-section{background:linear-gradient(135deg,#071126,#0b1c37)}.developer-photo-wrap:before{background:linear-gradient(135deg,#3156d8,#2389d7);opacity:.78}
@keyframes typeCode{0%,12%{max-width:0}48%,78%{max-width:36ch}92%,100%{max-width:0}}@keyframes cursorBlink{50%{opacity:.15}}@keyframes heroSheen{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
@media(max-width:1199.98px){.landing-hero{min-height:auto}.coding-preview{max-width:620px}}
@media(max-width:991.98px){.landing-login-card{max-width:720px}.coding-preview{max-width:100%}}
@media(max-width:575.98px){.coding-preview{border-radius:14px}.coding-preview pre{padding:13px 12px;font-size:.66rem;line-height:1.65}.coding-preview-bar em{display:none}.landing-copy h1{font-size:clamp(2.35rem,12vw,3.45rem)}.landing-login-card .form-control{min-height:48px}}
@media(prefers-reduced-motion:reduce){.landing-hero:after,.typing-code,.coding-cursor{animation:none}.typing-code{max-width:none}}

/* =========================================================
   ATASOGE CODESTUDIO — BLUE / WHITE / VIOLET LANDING V2
   Compact, responsive, layered 3D visual system
   ========================================================= */
.landing-body{background:#f5f9ff;color:#10204a}
.landing-nav{background:rgba(255,255,255,.82)!important;border-bottom:1px solid rgba(59,130,246,.14)!important;box-shadow:0 10px 35px rgba(72,99,160,.08);backdrop-filter:blur(22px) saturate(140%)}
.landing-brand{color:#0b1740}.landing-brand small{color:#2563eb}.landing-brand>span{background:linear-gradient(145deg,#2563eb,#38bdf8);box-shadow:0 10px 24px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.5)}
.landing-menu a{color:#172554}.landing-menu a:hover{background:#edf5ff;color:#2563eb}.landing-nav-cta{background:linear-gradient(135deg,#2563eb,#6d5dfc)!important;color:#fff!important;box-shadow:0 12px 28px rgba(79,70,229,.24)}
.landing-menu-btn{border-color:#dbeafe;background:#fff;color:#1d4ed8;box-shadow:0 8px 20px rgba(37,99,235,.12)}

.landing-hero{min-height:auto!important;padding:112px 0 52px!important;background:radial-gradient(circle at 12% 22%,rgba(56,189,248,.20),transparent 26%),radial-gradient(circle at 82% 17%,rgba(129,140,248,.18),transparent 24%),radial-gradient(circle at 91% 73%,rgba(168,85,247,.13),transparent 24%),linear-gradient(135deg,#f9fcff 0%,#eef6ff 45%,#f5f1ff 100%)!important;color:#0b1740!important}
.landing-hero:before{background-image:linear-gradient(rgba(37,99,235,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.045) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000 0%,transparent 90%)}
.landing-hero:after{background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.75) 48%,transparent 74%);opacity:.7;animation:heroSheen 12s linear infinite}
.landing-orb{filter:blur(1px);opacity:.46;border:1px solid rgba(255,255,255,.72);box-shadow:inset 0 0 35px rgba(255,255,255,.45),0 24px 65px rgba(79,70,229,.18)}
.landing-orb-one{width:190px;height:190px;left:-90px;top:20%;background:linear-gradient(145deg,rgba(56,189,248,.62),rgba(37,99,235,.3))}
.landing-orb-two{width:145px;height:145px;right:-50px;bottom:12%;background:linear-gradient(145deg,rgba(167,139,250,.58),rgba(59,130,246,.28))}
.landing-hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:clamp(1.8rem,4vw,4rem);align-items:center}
.landing-chip{border-color:#bfdbfe;background:rgba(255,255,255,.72);color:#1d4ed8;box-shadow:0 12px 30px rgba(37,99,235,.08)}
.landing-chip span{background:#0ea5e9;box-shadow:0 0 14px rgba(14,165,233,.65)}
.landing-copy h1{margin:1rem 0 .9rem;max-width:760px;font-size:clamp(2.7rem,5.1vw,5rem);line-height:.98;color:#0b1740;text-shadow:0 2px 0 #fff;letter-spacing:-.055em}
.landing-copy h1 em{background:linear-gradient(90deg,#0ea5e9 0%,#2563eb 47%,#8b5cf6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 16px rgba(79,70,229,.13))}
.landing-copy>p{max-width:670px;color:#516184;font-size:clamp(.96rem,1.25vw,1.08rem);line-height:1.7}
.btn-landing-primary{background:linear-gradient(135deg,#2563eb,#0ea5e9 58%,#7c3aed);box-shadow:0 14px 30px rgba(37,99,235,.25),inset 0 1px 0 rgba(255,255,255,.45);transition:.25s transform,.25s box-shadow}.btn-landing-primary:hover{color:#fff;transform:translateY(-3px);box-shadow:0 20px 38px rgba(79,70,229,.3)}
.btn-landing-secondary{border:1px solid #cbdcf7;background:rgba(255,255,255,.72);color:#1e3a8a;box-shadow:0 10px 26px rgba(71,85,105,.08);transition:.25s}.btn-landing-secondary:hover{color:#2563eb;background:#fff;transform:translateY(-3px)}
.landing-stats{margin-top:1.35rem;gap:.65rem}.landing-stats>div{min-width:110px;padding:.78rem .9rem;border-color:rgba(96,165,250,.2);background:rgba(255,255,255,.64);box-shadow:0 12px 28px rgba(59,130,246,.07)}.landing-stats strong{color:#172554}.landing-stats span{color:#64748b}

.coding-preview{max-width:650px;margin:1.2rem 0 0;border:1px solid rgba(96,165,250,.3);background:rgba(255,255,255,.74);box-shadow:0 20px 55px rgba(59,130,246,.14),inset 0 1px 0 #fff;transform:perspective(900px) rotateX(1deg) rotateY(-1.4deg);transition:.35s}.coding-preview:hover{transform:perspective(900px) rotateX(0) rotateY(0) translateY(-4px)}
.coding-preview-bar{background:linear-gradient(180deg,#fff,#eef5ff);border-bottom-color:#dbeafe}.coding-preview-bar strong{color:#334155}.coding-preview-bar em{color:#2563eb}.coding-preview pre{color:#24345e}.code-muted{color:#64748b}.code-blue{color:#2563eb}.code-cyan{color:#0891b2}.code-green{color:#16a34a}.typing-code{color:#111827}.coding-cursor{background:#7c3aed}

.landing-login-card{max-width:500px!important;padding:2rem!important;border:1px solid rgba(255,255,255,.9)!important;border-radius:30px!important;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,246,255,.82))!important;box-shadow:0 32px 80px rgba(76,91,160,.18),0 0 0 1px rgba(96,165,250,.13),inset 0 1px 0 #fff!important;backdrop-filter:blur(20px);transform:perspective(1100px) rotateY(-2deg);transition:.35s}
.landing-login-card:hover{transform:perspective(1100px) rotateY(0) translateY(-5px);box-shadow:0 38px 90px rgba(79,70,229,.22),0 0 0 1px rgba(96,165,250,.2),inset 0 1px 0 #fff!important}
.landing-login-card:before{content:"";position:absolute;inset:-2px;border-radius:31px;padding:2px;background:linear-gradient(135deg,rgba(56,189,248,.75),rgba(255,255,255,.3),rgba(139,92,246,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.landing-login-card:after{content:"</>";position:absolute;right:-26px;top:35px;width:72px;height:72px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(145deg,#fff,#dbeafe);color:#2563eb;font-weight:950;font-size:1.3rem;box-shadow:0 18px 38px rgba(79,70,229,.2);transform:rotate(8deg)}
.login-logo{background:linear-gradient(145deg,#2563eb,#38bdf8)!important;box-shadow:0 12px 28px rgba(37,99,235,.26),inset 0 1px 0 rgba(255,255,255,.55)}
.landing-login-card .login-heading{color:#101b45}.landing-login-card .text-secondary,.landing-login-card .form-check-label,.landing-login-card .login-status{color:#64748b!important}
.landing-login-card .form-control{min-height:52px;border:1px solid #dbe6fb;background:rgba(255,255,255,.88);color:#13234d;box-shadow:inset 0 2px 7px rgba(30,64,175,.04)}
.landing-login-card .form-control:focus{border-color:#60a5fa;box-shadow:0 0 0 4px rgba(59,130,246,.12),inset 0 2px 7px rgba(30,64,175,.03)}
.landing-login-card .btn-primary{border:0;background:linear-gradient(135deg,#2563eb,#0ea5e9 55%,#7c3aed);box-shadow:0 15px 30px rgba(79,70,229,.22)}
.landing-login-card .login-link{color:#2563eb}.password-toggle{color:#64748b}

.landing-section,.public-showcase,.graduate-section{background:linear-gradient(180deg,#fff,#f7fbff)}
.feature-card,.teacher-card,.graduate-card{transition:.3s transform,.3s box-shadow;border-color:#dce9fb}.feature-card:hover,.teacher-card:hover,.graduate-card:hover{transform:translateY(-8px);box-shadow:0 25px 60px rgba(37,99,235,.13)}
.feature-card>div{background:linear-gradient(145deg,#eff6ff,#ede9fe);box-shadow:inset 0 1px 0 #fff,0 10px 22px rgba(59,130,246,.1)}
.teacher-section{background:linear-gradient(180deg,#f8fbff,#f3f0ff)}
.developer-section{background:radial-gradient(circle at 18% 25%,rgba(56,189,248,.22),transparent 25%),radial-gradient(circle at 82% 70%,rgba(139,92,246,.2),transparent 28%),linear-gradient(135deg,#0b1d51,#122968 55%,#301b67)}

@media(max-width:1199.98px){.landing-hero-grid{grid-template-columns:minmax(0,1fr) 430px}.landing-copy h1{font-size:clamp(2.8rem,5vw,4.4rem)}}
@media(max-width:991.98px){
 .landing-nav{background:rgba(255,255,255,.94)!important}.landing-menu{top:70px;background:rgba(255,255,255,.98)!important;border-color:#dbeafe!important;box-shadow:0 25px 55px rgba(37,99,235,.15)!important}.landing-menu a{color:#172554!important}
 .landing-hero{padding:100px 0 46px!important}.landing-hero-grid{grid-template-columns:1fr;gap:1.6rem}.landing-copy{text-align:center}.landing-chip{margin-inline:auto}.landing-copy h1,.landing-copy>p,.coding-preview{margin-left:auto;margin-right:auto}.landing-actions,.landing-stats{justify-content:center}.landing-login-card{justify-self:center;max-width:680px!important;transform:none}.landing-login-card:hover{transform:translateY(-4px)}.landing-login-card:after{right:18px;top:-24px}
}
@media(max-width:767.98px){
 .landing-hero{padding:88px 0 38px!important}.landing-copy h1{font-size:clamp(2.25rem,10.7vw,3.65rem);line-height:1}.landing-copy>p{font-size:.95rem;line-height:1.65}.coding-preview{transform:none;border-radius:16px}.landing-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.landing-actions>a{width:auto!important;min-height:48px}.landing-stats{grid-template-columns:repeat(3,1fr)!important;width:100%}.landing-stats>div{padding:.7rem .45rem}.landing-login-card{padding:1.45rem!important;border-radius:24px!important}.landing-login-card:before{border-radius:25px}.landing-login-card:after{width:58px;height:58px;border-radius:18px;right:16px;top:-18px}.coding-preview pre{font-size:.7rem;white-space:pre-wrap}
}
@media(max-width:479.98px){
 .landing-nav-inner{min-height:62px}.landing-hero{padding-top:82px!important}.landing-brand>span{width:38px;height:38px}.landing-brand{grid-template-columns:38px auto}.landing-copy h1{font-size:clamp(2.05rem,11.2vw,3rem)}.landing-chip{padding:.45rem .65rem}.landing-actions{grid-template-columns:1fr}.landing-stats{grid-template-columns:repeat(3,1fr)!important}.landing-stats>div{display:block!important;text-align:center;padding:.65rem .2rem}.landing-stats strong{font-size:1.05rem}.landing-stats span{font-size:.65rem}.landing-login-card{padding:1.15rem!important}.login-card-top{padding-right:42px}.landing-login-card:after{width:48px;height:48px;font-size:1rem;top:-14px}.coding-preview{display:none}.feature-card,.teacher-card,.graduate-card{border-radius:20px}.teacher-card img{height:260px}
}

/* =========================================================
   ATASOGE CODESTUDIO — SYNCHRONIZED LIGHT GRADIENT V3
   Slim desktop + native-mobile responsive landing page
   ========================================================= */
:root{
  --landing-ink:#10204a;
  --landing-muted:#61708f;
  --landing-blue:#2563eb;
  --landing-cyan:#0ea5e9;
  --landing-violet:#7c3aed;
  --landing-line:#dbe7fb;
  --landing-surface:rgba(255,255,255,.86);
  --landing-shadow:0 18px 48px rgba(48,76,145,.12);
}
.landing-body{
  font-family:Inter,"Plus Jakarta Sans","Segoe UI",Roboto,Arial,sans-serif!important;
  color:var(--landing-ink)!important;
  background:#f7faff!important;
}
.landing-body h1,.landing-body h2,.landing-body h3,.landing-body strong,.landing-body .login-heading{
  font-family:Inter,"Plus Jakarta Sans","Segoe UI",Roboto,Arial,sans-serif;
  text-wrap:balance;
}
.landing-body p{color:var(--landing-muted)}
.landing-nav-inner,.landing-hero-grid,.landing-section>.container,.public-showcase>.container,.teacher-section>.container,.graduate-section>.container,.developer-section>.container,.landing-footer>.container{
  width:min(1180px,calc(100% - 32px));max-width:none!important;margin-inline:auto;
}
.landing-nav-inner{min-height:68px!important}
.landing-brand>span{width:42px!important;height:42px!important;border-radius:13px!important}
.landing-brand{grid-template-columns:42px auto!important;column-gap:.6rem!important}
.landing-brand strong{font-size:.96rem!important;letter-spacing:.01em}
.landing-brand small{font-size:.61rem!important;letter-spacing:.14em!important}
.landing-menu a{font-size:.84rem!important;padding:.58rem .72rem!important}
.landing-nav-cta{padding:.67rem .95rem!important;border-radius:12px!important}

.landing-hero{
  padding:94px 0 44px!important;
  background:
    radial-gradient(circle at 8% 22%,rgba(14,165,233,.13),transparent 24%),
    radial-gradient(circle at 83% 16%,rgba(99,102,241,.12),transparent 24%),
    radial-gradient(circle at 92% 73%,rgba(124,58,237,.10),transparent 24%),
    linear-gradient(135deg,#fbfdff 0%,#eef6ff 48%,#f6f2ff 100%)!important;
}
.landing-hero-grid{grid-template-columns:minmax(0,1.07fr) minmax(360px,.83fr)!important;gap:clamp(1.6rem,3.5vw,3.4rem)!important}
.landing-copy h1{
  margin:.9rem 0 .8rem!important;
  max-width:690px!important;
  font-size:clamp(2.7rem,4.55vw,4.6rem)!important;
  line-height:.99!important;
  letter-spacing:-.052em!important;
  color:var(--landing-ink)!important;
  text-shadow:none!important;
}
.landing-copy h1 em{
  display:inline;
  background:linear-gradient(90deg,#0ea5e9 0%,#2563eb 48%,#7c3aed 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:none!important;text-shadow:none!important;
}
.landing-copy>p{max-width:650px!important;font-size:1rem!important;line-height:1.68!important;margin-bottom:0}
.landing-chip{padding:.48rem .72rem!important;font-size:.68rem!important;letter-spacing:.13em!important}
.landing-actions{margin-top:1.25rem!important;gap:.65rem!important}
.btn-landing-primary,.btn-landing-secondary{min-height:46px!important;padding:.7rem 1.05rem!important;border-radius:12px!important;font-size:.88rem!important}
.landing-stats{margin-top:1rem!important;gap:.55rem!important}
.landing-stats>div{min-width:104px!important;padding:.66rem .78rem!important;border-radius:14px!important}
.landing-stats strong{font-size:1.08rem!important}.landing-stats span{font-size:.69rem!important}

.coding-preview{max-width:620px!important;margin-top:1rem!important;border-radius:16px!important;transform:none!important;box-shadow:0 16px 40px rgba(37,99,235,.11)!important}
.coding-preview:hover{transform:translateY(-3px)!important}
.coding-preview-bar{min-height:38px!important}
.coding-preview pre{padding:13px 16px!important;font-size:.72rem!important;line-height:1.65!important}

.landing-login-card{
  max-width:460px!important;
  padding:1.65rem!important;
  border-radius:24px!important;
  transform:none!important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(243,247,255,.91))!important;
  border:1px solid rgba(255,255,255,.96)!important;
  box-shadow:0 24px 64px rgba(62,82,148,.16),0 0 0 1px rgba(96,165,250,.14),inset 0 1px 0 #fff!important;
}
.landing-login-card:hover{transform:translateY(-4px)!important;box-shadow:0 30px 72px rgba(62,82,148,.2),0 0 0 1px rgba(96,165,250,.18)!important}
.landing-login-card:before{border-radius:25px!important;background:linear-gradient(135deg,rgba(14,165,233,.68),rgba(255,255,255,.78),rgba(124,58,237,.48))!important}
.landing-login-card:after{width:58px!important;height:58px!important;right:-16px!important;top:30px!important;border-radius:18px!important;font-size:1.05rem!important;box-shadow:0 14px 32px rgba(79,70,229,.16)!important}
.login-card-top{margin-bottom:1.05rem!important}.login-logo{width:48px!important;height:48px!important;border-radius:14px!important}
.login-heading{font-size:1.75rem!important;letter-spacing:-.035em!important;color:var(--landing-ink)!important}
.landing-login-card .text-secondary{font-size:.9rem!important}
.landing-login-card .form-label{font-size:.73rem!important;color:#687999!important;margin-bottom:.38rem!important}
.landing-login-card .form-control{min-height:48px!important;border-radius:12px!important;font-size:.92rem!important;background:#f7faff!important}
.landing-login-card .mb-3{margin-bottom:.9rem!important}
.landing-login-card .my-3{margin-block:.85rem!important}
.landing-login-card .btn-primary{min-height:50px!important;border-radius:12px!important;font-size:.9rem!important}
.login-footer-links{font-size:.88rem!important}.login-status{font-size:.71rem!important}

.landing-section{padding:clamp(3.2rem,6vw,5.2rem) 0!important}
.section-title{margin-bottom:1.5rem!important}.section-title h2{font-size:clamp(1.8rem,3.4vw,3rem)!important;line-height:1.08!important}.section-title p{font-size:.98rem!important}
.feature-grid{gap:.8rem!important}.feature-card{padding:1.2rem!important;border-radius:18px!important;box-shadow:0 12px 34px rgba(37,99,235,.07)!important}.feature-card>div{width:46px!important;height:46px!important;border-radius:13px!important}.feature-card h3{font-size:1.04rem!important}.feature-card p{font-size:.9rem!important;line-height:1.55!important}
.teacher-card,.graduate-card{border-radius:20px!important;box-shadow:0 14px 38px rgba(37,99,235,.08)!important}.teacher-card{grid-template-columns:170px minmax(0,1fr)!important}.teacher-card img{min-height:290px!important}.teacher-card-body{padding:1.3rem!important}.teacher-card h3{font-size:1.25rem!important}.teacher-card p{font-size:.92rem!important;line-height:1.58!important}

@media (max-width:1199.98px){
  .landing-hero-grid{grid-template-columns:minmax(0,1fr) 410px!important}
  .landing-copy h1{font-size:clamp(2.55rem,5vw,4rem)!important}
}
@media (max-width:991.98px){
  .landing-nav-inner,.landing-hero-grid,.landing-section>.container,.public-showcase>.container,.teacher-section>.container,.graduate-section>.container,.developer-section>.container,.landing-footer>.container{width:min(100% - 26px,760px)!important}
  .landing-hero{padding:86px 0 34px!important}
  .landing-hero-grid{grid-template-columns:1fr!important;gap:1.25rem!important}
  .landing-copy{text-align:left!important}
  .landing-chip{margin-inline:0!important}
  .landing-copy h1,.landing-copy>p,.coding-preview{margin-left:0!important;margin-right:0!important}
  .landing-actions,.landing-stats{justify-content:flex-start!important}
  .landing-login-card{justify-self:stretch!important;max-width:none!important;width:100%!important}
  .landing-login-card:after{right:18px!important;top:-17px!important}
}
@media (max-width:767.98px){
  .landing-nav-inner{min-height:60px!important}
  .landing-brand{grid-template-columns:36px auto!important}.landing-brand>span{width:36px!important;height:36px!important;border-radius:11px!important}
  .landing-brand strong{font-size:.82rem!important}.landing-brand small{font-size:.52rem!important}
  .landing-menu-btn{width:39px!important;height:39px!important;border-radius:11px!important}
  .landing-menu{top:62px!important;left:10px!important;right:10px!important;border-radius:16px!important;padding:.55rem!important}
  .landing-menu a{padding:.66rem!important;font-size:.82rem!important}
  .landing-hero{padding:76px 0 24px!important}
  .landing-copy h1{font-size:clamp(2.05rem,9.8vw,3.15rem)!important;line-height:1.01!important;max-width:100%!important}
  .landing-copy>p{font-size:.9rem!important;line-height:1.58!important}
  .landing-chip{font-size:.58rem!important;letter-spacing:.1em!important}
  .coding-preview{display:block!important;margin-top:.85rem!important;border-radius:14px!important}
  .coding-preview pre{max-height:150px!important;overflow:hidden!important;padding:10px 12px!important;font-size:.62rem!important;line-height:1.55!important}
  .landing-actions{grid-template-columns:1fr 1fr!important;gap:.55rem!important}
  .landing-actions>a{min-height:44px!important;padding:.62rem .65rem!important;font-size:.8rem!important}
  .landing-stats{grid-template-columns:repeat(3,1fr)!important;gap:.4rem!important}
  .landing-stats>div{padding:.55rem .25rem!important;border-radius:12px!important}.landing-stats strong{font-size:.95rem!important}.landing-stats span{font-size:.6rem!important}
  .landing-login-card{padding:1.15rem!important;border-radius:20px!important}
  .landing-login-card:before{border-radius:21px!important}.landing-login-card:after{display:none!important}
  .login-card-top{gap:.75rem!important;margin-bottom:.85rem!important}.login-logo{width:42px!important;height:42px!important}.login-heading{font-size:1.42rem!important}
  .landing-login-card .form-control{min-height:44px!important;font-size:.88rem!important}.landing-login-card .btn-primary{min-height:46px!important}
  .feature-grid{grid-template-columns:1fr!important}
  .teacher-card{grid-template-columns:104px minmax(0,1fr)!important}.teacher-card img{height:100%!important;min-height:210px!important}.teacher-card-body{padding:1rem!important}.teacher-card h3{font-size:1.02rem!important}.teacher-card p{font-size:.82rem!important}.teacher-tags{gap:.3rem!important}.teacher-tags b{font-size:.62rem!important;padding:.34rem .5rem!important}
}
@media (max-width:479.98px){
  .landing-nav-inner,.landing-hero-grid,.landing-section>.container,.public-showcase>.container,.teacher-section>.container,.graduate-section>.container,.developer-section>.container,.landing-footer>.container{width:calc(100% - 20px)!important}
  .landing-hero{padding-top:70px!important}
  .landing-copy h1{font-size:clamp(1.9rem,10.2vw,2.65rem)!important;letter-spacing:-.045em!important}
  .landing-copy>p{font-size:.86rem!important}
  .landing-actions{grid-template-columns:1fr!important}
  .coding-preview{display:none!important}
  .landing-stats{margin-top:.75rem!important}
  .landing-login-card{padding:1rem!important}
  .landing-login-card .d-flex.justify-content-between{gap:.5rem!important;align-items:flex-start!important}
  .landing-login-card .d-flex.justify-content-between .small{font-size:.66rem!important;text-align:right}
  .login-footer-links{display:grid!important;grid-template-columns:1fr 1fr!important;gap:.5rem!important}.login-footer-links a{text-align:center;padding:.55rem;border-radius:10px;background:#eef5ff}
  .login-status{display:none!important}
  .teacher-card{grid-template-columns:1fr!important}.teacher-card img{height:240px!important;min-height:0!important}.teacher-card-body{padding:1rem!important}
  .section-title h2{font-size:1.72rem!important}.section-title p{font-size:.88rem!important}
}

/* ATASOGE CODESTUDIO LMS — Frontpage V5 Premium Interactive Mobile-First */
.landing-body{--v5-ink:#12204a;--v5-muted:#64759b;--v5-blue:#1677f2;--v5-cyan:#29b6f6;--v5-purple:#7456f6;--v5-line:rgba(65,105,180,.15);--v5-card:rgba(255,255,255,.76);font-family:Inter,"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;background:#f8fbff;color:var(--v5-ink)}
.landing-body h1,.landing-body h2,.landing-body h3,.landing-body .login-heading{font-family:"Plus Jakarta Sans",Inter,"Segoe UI",system-ui,sans-serif;letter-spacing:-.035em}
.landing-nav{background:rgba(255,255,255,.86)!important;border-bottom:1px solid rgba(88,120,190,.12)!important;box-shadow:0 8px 28px rgba(50,86,150,.07);backdrop-filter:blur(22px) saturate(1.25)}
.landing-brand{color:var(--v5-ink)!important}.landing-brand small{color:#3b67cf!important}.landing-brand>span{background:linear-gradient(145deg,#1479f2,#39c0f3)!important;box-shadow:0 10px 25px rgba(30,117,231,.28),inset 0 1px rgba(255,255,255,.55)}
.landing-menu a{color:#23355f!important}.landing-menu a:hover{background:#eef5ff!important;color:#145ed7!important}.landing-nav-cta{background:linear-gradient(135deg,var(--v5-blue),var(--v5-purple))!important;box-shadow:0 12px 28px rgba(73,91,238,.23)}
.landing-hero{background:radial-gradient(circle at 9% 23%,rgba(56,189,248,.25),transparent 27%),radial-gradient(circle at 78% 19%,rgba(99,102,241,.18),transparent 24%),radial-gradient(circle at 94% 74%,rgba(168,85,247,.13),transparent 26%),linear-gradient(135deg,#fbfdff 0%,#eef7ff 46%,#f6f1ff 100%)!important;color:var(--v5-ink)!important;padding:104px 0 42px!important}
.landing-hero:before{background-size:46px 46px!important;opacity:.7}.landing-orb{filter:blur(8px)!important;opacity:.18!important}.landing-copy h1{font-size:clamp(2.75rem,5.1vw,4.85rem)!important;line-height:.98!important;max-width:820px}.landing-copy h1 em{background:linear-gradient(92deg,#0d7bf3 10%,#3aa9ee 43%,#7558f6 78%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}.landing-copy>p{color:#52668e!important;max-width:700px!important;line-height:1.72!important}.landing-chip{background:rgba(255,255,255,.68)!important;color:#1866cf!important;border-color:rgba(28,115,231,.18)!important;box-shadow:0 10px 30px rgba(56,111,189,.08)}
#heroWord{display:inline-block;transition:opacity .25s ease,transform .25s ease;will-change:transform,opacity}.word-out{opacity:0;transform:translateY(-10px)}.word-in{animation:v5WordIn .42s ease both}@keyframes v5WordIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.coding-preview{background:rgba(255,255,255,.72)!important;border-color:rgba(61,116,206,.18)!important;box-shadow:0 24px 65px rgba(42,84,155,.13),inset 0 1px rgba(255,255,255,.8)!important;backdrop-filter:blur(18px);transform:perspective(1100px) rotateX(.8deg) rotateY(-1.2deg);transition:.35s ease}.coding-preview:hover{transform:perspective(1100px) rotateX(0) rotateY(0) translateY(-5px);box-shadow:0 32px 80px rgba(42,84,155,.18)!important}.coding-preview-bar{background:rgba(240,246,255,.88)!important;border-bottom-color:rgba(71,115,187,.12)!important}.coding-preview pre{color:#243a68!important}
.btn-landing-primary{background:linear-gradient(135deg,#1478ef,#28aef1 55%,#7558f6)!important;box-shadow:0 16px 32px rgba(44,104,223,.24)!important}.btn-landing-primary,.btn-landing-secondary{transition:.25s ease}.btn-landing-primary:hover,.btn-landing-secondary:hover{transform:translateY(-3px)}.btn-landing-secondary{background:rgba(255,255,255,.72)!important;color:#19396d!important;border-color:rgba(67,111,185,.18)!important;box-shadow:0 12px 28px rgba(51,88,147,.08)}
.landing-stats>div{background:rgba(255,255,255,.62)!important;border-color:rgba(65,105,180,.14)!important;box-shadow:0 12px 30px rgba(50,85,145,.07)}.landing-stats strong{color:#183569!important}.landing-stats span{color:#64779e!important}
.landing-login-card{background:rgba(255,255,255,.72)!important;border:1px solid rgba(89,129,205,.18)!important;box-shadow:0 34px 90px rgba(49,75,144,.17),inset 0 1px rgba(255,255,255,.96)!important;backdrop-filter:blur(24px) saturate(1.25);transform:perspective(1200px) rotateY(-1.2deg);transition:.35s ease}.landing-login-card:hover{transform:perspective(1200px) rotateY(0) translateY(-5px)}.landing-login-card:before{background:linear-gradient(135deg,rgba(37,145,255,.68),rgba(255,255,255,.25),rgba(122,82,244,.56))!important}.landing-login-card .form-control{background:rgba(245,249,255,.9)!important;border-color:rgba(85,123,188,.16)!important;color:#132751!important;box-shadow:inset 0 1px 3px rgba(76,105,160,.05)}.landing-login-card .form-control:focus{background:#fff!important;border-color:#408ef2!important;box-shadow:0 0 0 .22rem rgba(41,126,239,.12)!important}.landing-login-card .btn-primary{background:linear-gradient(135deg,#1479ef,#2ea9ed 54%,#7456f6)!important;border:0!important;box-shadow:0 16px 32px rgba(60,95,221,.22)!important}
.learning-paths{position:relative;padding:1.2rem 0 3.5rem;background:linear-gradient(180deg,#f7fbff,#fff)}.compact-title{margin-bottom:1.15rem!important}.compact-title h2{font-size:clamp(1.55rem,3vw,2.45rem)!important;max-width:760px}.path-scroller{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}.path-card{display:flex;align-items:center;gap:.72rem;min-width:0;padding:1rem;border:1px solid var(--v5-line);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 13px 34px rgba(51,85,145,.07);transition:.25s ease}.path-card:hover{transform:translateY(-5px);border-color:rgba(42,119,237,.28);box-shadow:0 20px 42px rgba(51,85,145,.12)}.path-card>span{font-size:.67rem;font-weight:900;color:#7c8cac}.path-card div{min-width:0}.path-card h3{font-size:.98rem;margin:0}.path-card p{font-size:.72rem;margin:.15rem 0 0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.path-card>b{margin-left:auto;color:#2d7ce8}
.feature-card,.teacher-card,.graduate-card,.testimonial-grid>article{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,250,255,.92))!important;border:1px solid rgba(70,111,184,.13)!important;box-shadow:0 18px 45px rgba(49,83,143,.075)!important;transition:.28s ease}.feature-card:hover,.teacher-card:hover,.graduate-card:hover,.testimonial-grid>article:hover{transform:translateY(-6px);box-shadow:0 26px 58px rgba(49,83,143,.13)!important}.feature-card>div{background:linear-gradient(145deg,#eef7ff,#f2efff)!important;box-shadow:inset 0 1px #fff}
.testimonial-section{padding:clamp(4rem,7vw,6.5rem) 0;background:linear-gradient(180deg,#fff,#f3f8ff)}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.testimonial-grid>article{padding:1.45rem;border-radius:24px}.quote-mark{font-size:2.8rem;line-height:.65;color:#3687ee;font-weight:900}.testimonial-grid p{font-size:.94rem;line-height:1.7!important}.testimonial-grid footer{display:flex;align-items:center;gap:.75rem;margin-top:1rem}.testimonial-grid footer img{width:46px;height:46px;border-radius:15px;object-fit:cover}.testimonial-grid footer strong,.testimonial-grid footer span{display:block}.testimonial-grid footer span{font-size:.75rem;color:#7180a0}
.mobile-bottom-nav{display:none}
@media(max-width:1199.98px){.path-scroller{grid-template-columns:repeat(3,1fr)}}
@media(max-width:991.98px){.landing-menu{background:rgba(255,255,255,.98)!important;box-shadow:0 24px 65px rgba(44,74,130,.18)!important}.landing-login-card{transform:none!important}.testimonial-grid{grid-template-columns:1fr 1fr}.testimonial-grid>article:last-child{grid-column:1/-1}.path-scroller{overflow-x:auto;display:flex;scroll-snap-type:x mandatory;padding-bottom:.4rem}.path-card{min-width:210px;scroll-snap-align:start}.path-scroller::-webkit-scrollbar{height:5px}.path-scroller::-webkit-scrollbar-thumb{background:#ccdaf1;border-radius:999px}}
@media(max-width:767.98px){.landing-body{padding-bottom:76px}.landing-hero{padding:78px 0 22px!important}.landing-copy{text-align:left!important}.landing-chip{margin-inline:0!important}.landing-copy h1{font-size:clamp(2.15rem,10vw,3.2rem)!important;max-width:560px!important}.landing-copy>p{margin-inline:0!important}.landing-actions,.landing-stats{justify-content:flex-start!important}.landing-login-card{max-width:none!important}.learning-paths{padding:1rem 0 2.6rem}.testimonial-grid{grid-template-columns:1fr}.testimonial-grid>article:last-child{grid-column:auto}.mobile-bottom-nav{position:fixed;left:10px;right:10px;bottom:10px;z-index:1300;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:.45rem .4rem calc(.35rem + env(safe-area-inset-bottom));border:1px solid rgba(74,112,183,.16);border-radius:20px;background:rgba(255,255,255,.93);box-shadow:0 18px 50px rgba(35,66,123,.2);backdrop-filter:blur(20px)}.mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:.1rem;color:#64759a;text-decoration:none;font-weight:750}.mobile-bottom-nav span{font-size:1.05rem}.mobile-bottom-nav small{font-size:.58rem}.mobile-main-action{transform:translateY(-13px);color:#fff!important}.mobile-main-action span{width:48px;height:48px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,#1479ef,#7456f6);box-shadow:0 12px 28px rgba(70,93,228,.32);font-size:1.3rem}.mobile-main-action small{color:#4a5f88}.landing-footer{padding-bottom:5.8rem!important}}
@media(max-width:479.98px){.landing-copy h1{font-size:clamp(1.95rem,10.8vw,2.75rem)!important}.landing-copy>p{font-size:.88rem!important}.path-card{min-width:190px}.testimonial-grid>article{padding:1.15rem}.mobile-bottom-nav{left:7px;right:7px;bottom:7px}.mobile-main-action span{width:45px;height:45px}.landing-login-card{border-radius:22px!important}.landing-section,.testimonial-section{padding:3.25rem 0!important}}
@media(prefers-reduced-motion:reduce){#heroWord,.path-card,.feature-card,.teacher-card,.graduate-card,.testimonial-grid>article,.landing-login-card,.coding-preview{animation:none!important;transition:none!important;transform:none!important}}

/* =========================================================
   FRONTPAGE V6 — PREMIUM CLEAN CODING PLATFORM
   ========================================================= */
.landing-body{background:#f5f8ff!important;color:#0d1b3f!important}
.premium-hero{padding:112px 0 64px!important;background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 45%,#f6f1ff 100%)!important;overflow:hidden}
.hero-mesh{position:absolute;inset:0;background:radial-gradient(circle at 8% 18%,rgba(36,145,255,.16),transparent 26%),radial-gradient(circle at 84% 20%,rgba(114,82,242,.14),transparent 25%),linear-gradient(rgba(49,90,170,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(49,90,170,.035) 1px,transparent 1px);background-size:auto,auto,44px 44px,44px 44px;pointer-events:none}
.premium-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(370px,.72fr)!important;gap:clamp(2rem,4vw,4.3rem)!important;align-items:start!important}
.premium-copy{padding-top:14px}
.premium-copy h1{max-width:760px!important;font-size:clamp(3rem,5.3vw,5.35rem)!important;line-height:.96!important;letter-spacing:-.06em!important;margin:1rem 0 1.1rem!important}
.premium-copy h1 em{display:block;margin-top:.08em}
.premium-copy>p{max-width:680px!important;font-size:1.04rem!important;line-height:1.72!important}
.premium-actions{margin-top:1.4rem!important}.premium-actions a{gap:1rem}.premium-actions b{font-size:1rem}
.hero-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1.25rem 0 1rem;max-width:760px}
.hero-benefits>div{position:relative;padding:.9rem 1rem .9rem 3.1rem;border:1px solid rgba(56,97,169,.12);border-radius:16px;background:rgba(255,255,255,.72);box-shadow:0 12px 30px rgba(56,82,137,.07)}
.hero-benefits span{position:absolute;left:.8rem;top:.85rem;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,#1681ef,#7558f5);color:#fff;font-size:.62rem;font-weight:900}
.hero-benefits strong,.hero-benefits small{display:block}.hero-benefits strong{font-size:.84rem}.hero-benefits small{margin-top:.2rem;color:#7181a2;font-size:.67rem}
.studio-window{margin-top:1rem;max-width:760px;border:1px solid rgba(53,94,167,.15);border-radius:22px;background:rgba(255,255,255,.86);box-shadow:0 26px 68px rgba(48,75,133,.14);overflow:hidden;transform:perspective(1400px) rotateX(1deg) rotateY(-1deg);transition:.35s ease}
.studio-window:hover{transform:translateY(-5px)}
.studio-toolbar{height:48px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:0 1rem;border-bottom:1px solid rgba(55,94,163,.11);background:#f7faff}.studio-dots{display:flex;gap:5px}.studio-dots i{width:8px;height:8px;border-radius:50%;background:#9badc9}.studio-tabs{display:flex;height:100%}.studio-tabs button{border:0;background:transparent;padding:0 .8rem;color:#6a7996;font-size:.72rem;font-weight:800}.studio-tabs button.active{color:#1d5fd1;box-shadow:inset 0 -2px #2e7cf0}.studio-toolbar>span{color:#2b80ed;font-size:.68rem;font-weight:800}
.studio-body{display:grid;grid-template-columns:130px minmax(0,1fr) 205px;min-height:235px}.studio-body aside{padding:.9rem;background:#f4f7fc;border-right:1px solid rgba(55,94,163,.1)}.studio-body aside b{display:block;margin-bottom:.65rem;color:#8190ab;font-size:.58rem;letter-spacing:.12em}.studio-body aside a{display:block;padding:.45rem .55rem;border-radius:8px;color:#5e6e8e;font-size:.66rem}.studio-body aside a.active{background:#e7f0ff;color:#1d5fd1}.studio-body pre{margin:0;padding:1rem 1.1rem;background:#fff;color:#26375e;font-size:.69rem;line-height:1.65;overflow:auto}.studio-result{padding:.9rem;background:linear-gradient(145deg,#eef5ff,#f5efff);border-left:1px solid rgba(55,94,163,.1)}.studio-result>span{font-size:.58rem;font-weight:900;letter-spacing:.12em;color:#7384a4}.preview-card{margin-top:.75rem;padding:1.1rem;border-radius:15px;background:linear-gradient(145deg,#173d8f,#5c47d7);color:#fff;box-shadow:0 14px 32px rgba(43,65,159,.25)}.preview-card b{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:rgba(255,255,255,.12)}.preview-card h3{margin:.8rem 0 .35rem;font-size:1rem;color:#fff}.preview-card p{margin:0 0 .8rem!important;color:#dce6ff!important;font-size:.67rem}.preview-card button{border:0;border-radius:9px;padding:.45rem .75rem;background:#fff;color:#214ba7;font-size:.66rem;font-weight:900}
.hero-side{position:sticky;top:92px;display:grid;gap:1rem}
.premium-login{max-width:none!important;padding:1.55rem!important;border-radius:26px!important;background:rgba(255,255,255,.9)!important;box-shadow:0 30px 80px rgba(43,69,127,.16),inset 0 1px #fff!important;transform:none!important}.premium-login:hover{transform:translateY(-4px)!important}
.premium-login:after{display:none!important}.premium-login .login-heading{font-size:1.65rem!important}.premium-login .btn-primary{display:flex;align-items:center;justify-content:center;gap:.8rem}.premium-login .btn-primary b{font-size:1rem}
.role-shortcuts{margin-top:1rem;text-align:center}.role-shortcuts>span{display:block;margin-bottom:.6rem;color:#8491aa;font-size:.67rem}.role-shortcuts>div{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.role-shortcuts button{min-height:39px;border:1px solid rgba(62,102,174,.13);border-radius:11px;background:#f7faff;color:#536582;font-size:.72rem;font-weight:800}.role-shortcuts button:hover{background:#edf4ff;color:#185fd0}
.hero-mini-dashboard{padding:1rem 1.1rem;border:1px solid rgba(57,97,169,.13);border-radius:20px;background:rgba(255,255,255,.75);box-shadow:0 18px 45px rgba(48,76,137,.1);backdrop-filter:blur(18px)}.mini-dashboard-head{display:flex;align-items:center;justify-content:space-between}.mini-dashboard-head span{font-size:.8rem;font-weight:900}.mini-dashboard-head b{padding:.27rem .55rem;border-radius:999px;background:#e8fff1;color:#179b53;font-size:.58rem}.mini-progress{margin:.8rem 0}.mini-progress>div{display:flex;justify-content:space-between;align-items:center}.mini-progress strong{font-size:1rem}.mini-progress span{color:#7988a4;font-size:.67rem}.mini-progress i{display:block;height:7px;margin-top:.45rem;border-radius:99px;background:#e9eef8;overflow:hidden}.mini-progress em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1a7cf1,#7a55f4)}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.mini-stats>div{padding:.7rem;border-radius:12px;background:#f6f9ff;text-align:center}.mini-stats strong,.mini-stats span{display:block}.mini-stats strong{font-size:.95rem}.mini-stats span{font-size:.61rem;color:#7887a4}
@media(max-width:1199.98px){.premium-hero-grid{grid-template-columns:minmax(0,1fr) 390px!important}.studio-body{grid-template-columns:110px minmax(0,1fr) 175px}}
@media(max-width:991.98px){.premium-hero-grid{grid-template-columns:1fr!important}.hero-side{position:static;grid-template-columns:1fr 1fr;align-items:start}.premium-login{grid-row:1/3}.hero-mini-dashboard{align-self:start}.premium-copy h1{max-width:850px!important}.studio-window{max-width:none}}
@media(max-width:767.98px){.premium-hero{padding:78px 0 30px!important}.premium-copy{padding-top:0}.premium-copy h1{font-size:clamp(2.25rem,10.5vw,3.35rem)!important;line-height:1!important}.premium-copy h1 em{display:inline}.premium-copy>p{font-size:.91rem!important}.hero-benefits{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.35rem}.hero-benefits>div{min-width:235px;scroll-snap-align:start}.studio-window{transform:none;border-radius:18px}.studio-toolbar{grid-template-columns:auto 1fr}.studio-toolbar>span{display:none}.studio-tabs button{padding:0 .5rem}.studio-body{grid-template-columns:1fr}.studio-body aside,.studio-result{display:none}.studio-body pre{min-height:180px;font-size:.64rem}.hero-side{display:block}.hero-mini-dashboard{margin-top:.8rem}.premium-login{padding:1.15rem!important}.role-shortcuts{display:none}}
@media(max-width:479.98px){.premium-copy h1{font-size:clamp(2.05rem,11.2vw,2.85rem)!important}.premium-actions{display:grid!important;grid-template-columns:1fr!important}.hero-benefits>div{min-width:210px}.studio-body pre{min-height:150px;max-height:170px}.hero-mini-dashboard{padding:.9rem}.mini-stats>div{padding:.55rem .25rem}}

/* ==========================================================================\n   ATASOGE CODESTUDIO — FRONTPAGE V7 ENTERPRISE EXPERIENCE\n   ========================================================================== */
:root{
  --fp-ink:#10172f;--fp-muted:#66708d;--fp-blue:#2f6df6;--fp-blue2:#5189ff;
  --fp-purple:#7659ef;--fp-cyan:#4ac7ea;--fp-line:rgba(56,84,147,.13);
  --fp-surface:rgba(255,255,255,.82);--fp-shadow:0 24px 70px rgba(35,57,112,.12);
}
.landing-body{background:#f7f9ff;color:var(--fp-ink);font-family:Inter,"Plus Jakarta Sans","Segoe UI",Roboto,Arial,sans-serif}
.landing-nav{background:rgba(255,255,255,.78)!important;border-bottom:1px solid rgba(63,89,148,.11)!important;box-shadow:0 8px 30px rgba(44,65,117,.06);backdrop-filter:blur(22px) saturate(1.25)}
.landing-brand{color:var(--fp-ink)!important}.landing-brand>span{background:linear-gradient(145deg,var(--fp-blue),var(--fp-purple))!important;box-shadow:0 10px 25px rgba(75,91,229,.25)}
.landing-brand small{color:#62719a!important}.landing-menu a{color:#4a5676!important}.landing-menu a:hover{background:#eef3ff!important;color:#244fb8!important}.landing-nav-cta{background:linear-gradient(135deg,var(--fp-blue),var(--fp-purple))!important;box-shadow:0 10px 24px rgba(72,84,220,.2)}
.landing-menu-btn{background:#fff!important;color:#26395f!important;border-color:#dce5f6!important}
.premium-hero{min-height:auto!important;padding:116px 0 72px!important;background:linear-gradient(125deg,#f8fbff 0%,#eef4ff 44%,#f5f0ff 100%)!important}
.premium-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 12%,rgba(72,128,255,.18),transparent 25%),radial-gradient(circle at 82% 24%,rgba(132,91,239,.16),transparent 28%),linear-gradient(rgba(58,91,168,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(58,91,168,.035) 1px,transparent 1px);background-size:auto,auto,44px 44px,44px 44px;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.65) 70%,transparent 100%)}
.hero-mesh:before,.hero-mesh:after{content:"";position:absolute;border-radius:50%;filter:blur(10px);opacity:.65;animation:fpFloat 10s ease-in-out infinite}.hero-mesh:before{width:260px;height:260px;right:7%;top:11%;background:linear-gradient(135deg,rgba(64,126,255,.22),rgba(123,85,240,.15))}.hero-mesh:after{width:180px;height:180px;left:-3%;bottom:10%;background:rgba(70,197,231,.17);animation-delay:-4s}
@keyframes fpFloat{50%{transform:translate3d(0,-18px,0) scale(1.04)}}
.premium-hero-grid{position:relative;z-index:2;grid-template-columns:minmax(0,1.2fr) minmax(350px,.72fr)!important;gap:clamp(2.2rem,4vw,4.8rem)!important;align-items:center!important}
.landing-chip{background:rgba(255,255,255,.7)!important;border-color:rgba(55,98,189,.15)!important;color:#315fb8!important;box-shadow:0 8px 24px rgba(48,78,142,.06)}
.premium-copy h1{color:#121a35!important;font-size:clamp(3rem,5.4vw,5.35rem)!important;line-height:.98!important;letter-spacing:-.055em!important;max-width:900px!important}.premium-copy h1 em{background:linear-gradient(90deg,#1e67e8 10%,#6857eb 62%,#8b57de)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}.premium-copy>p{color:#5f6d8a!important;max-width:780px!important;font-size:clamp(1rem,1.25vw,1.13rem)!important}
.btn-landing-primary{background:linear-gradient(135deg,#2f6df6,#7357ec)!important;border:0;box-shadow:0 16px 36px rgba(70,83,218,.24)!important;transition:transform .25s ease,box-shadow .25s ease}.btn-landing-primary:hover{transform:translateY(-3px);box-shadow:0 22px 42px rgba(70,83,218,.3)!important;color:#fff}.btn-landing-secondary{background:rgba(255,255,255,.78)!important;color:#334267!important;border:1px solid rgba(58,89,154,.16)!important;box-shadow:0 10px 28px rgba(44,68,123,.07)}
.hero-benefits>div{background:rgba(255,255,255,.72)!important;border:1px solid rgba(57,87,150,.12)!important;box-shadow:0 14px 34px rgba(42,67,124,.07)!important}.hero-benefits strong{color:#1c2949!important}.hero-benefits small{color:#75809a!important}
.studio-window{border:1px solid rgba(48,83,153,.14)!important;border-radius:26px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 32px 80px rgba(50,70,125,.16),inset 0 1px 0 #fff!important;transform:perspective(1600px) rotateX(1.2deg) rotateY(-1.5deg)!important}.studio-window:hover{transform:perspective(1600px) translateY(-7px) rotateX(.5deg) rotateY(-.5deg)!important}.studio-toolbar{background:linear-gradient(180deg,#ffffff,#f4f7fd)!important}.studio-result{background:linear-gradient(145deg,#f7faff,#eef3ff)!important}.preview-card{box-shadow:0 18px 38px rgba(49,76,142,.13)!important}
.premium-login{border:1px solid rgba(53,87,156,.14)!important;border-radius:28px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 34px 90px rgba(47,66,119,.19),inset 0 1px 0 rgba(255,255,255,.95)!important;backdrop-filter:blur(25px) saturate(1.1);padding:1.55rem!important}.premium-login:before{content:"";position:absolute;inset:-1px;border-radius:29px;padding:1px;background:linear-gradient(145deg,rgba(47,109,246,.45),rgba(255,255,255,.2),rgba(118,89,239,.38));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.login-logo{background:linear-gradient(145deg,var(--fp-blue),var(--fp-purple))!important;box-shadow:0 12px 28px rgba(77,85,219,.25)}.premium-login .form-control{min-height:52px;border-radius:14px;border-color:#dfe6f5;background:#fbfcff}.premium-login .form-control:focus{border-color:#7c8ff1;box-shadow:0 0 0 .24rem rgba(72,98,222,.11);background:#fff}.premium-login .btn-primary{border:0;border-radius:15px;background:linear-gradient(135deg,#2f6df6,#7659ef);box-shadow:0 15px 30px rgba(73,87,220,.22)}
.landing-section,.teacher-section,.graduate-section,.testimonial-section{position:relative}.landing-section{background:#fff!important}.teacher-section{background:linear-gradient(180deg,#f7f9ff,#edf3ff)!important}.graduate-section{background:#fff!important}.testimonial-section{background:linear-gradient(180deg,#fbfcff,#f2f5ff)!important}
.section-title h2,.graduate-intro h2{color:#15203d!important}.section-title p,.graduate-intro p{color:#6b7690!important}.feature-card,.teacher-card,.graduate-card,.testimonial-grid>article{border:1px solid rgba(56,84,147,.11)!important;background:linear-gradient(160deg,#fff 0%,#fbfcff 65%,#f2f5ff 100%)!important;box-shadow:0 18px 48px rgba(45,65,118,.08)!important;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.feature-card:hover,.teacher-card:hover,.graduate-card:hover,.testimonial-grid>article:hover{transform:translateY(-7px);box-shadow:0 28px 65px rgba(48,66,121,.14)!important;border-color:rgba(75,103,211,.2)!important}.feature-card>div{background:linear-gradient(145deg,#edf4ff,#f2edff)!important;box-shadow:inset 0 0 0 1px rgba(54,94,181,.08)}
.developer-section{background:linear-gradient(135deg,#101936 0%,#172554 52%,#2d2869 100%)!important}.developer-photo-wrap:before{background:linear-gradient(135deg,#3b82f6,#8b5cf6)!important;opacity:.82}.developer-copy p{color:#cfd8ee!important}
.front-cta{position:relative;padding:4.8rem 0;background:#fff;overflow:hidden}.front-cta:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;right:-180px;top:-230px;background:radial-gradient(circle,rgba(100,91,239,.14),transparent 68%)}.front-cta-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem;padding:clamp(2rem,5vw,4rem);border:1px solid rgba(57,87,150,.12);border-radius:34px;background:linear-gradient(135deg,#f4f8ff 0%,#edf3ff 46%,#f3edff 100%);box-shadow:0 30px 75px rgba(49,68,121,.12)}.front-cta-card span{font-size:.73rem;font-weight:900;letter-spacing:.15em;color:#4366bd}.front-cta-card h2{max-width:850px;margin:.65rem 0;font-size:clamp(2rem,4vw,3.55rem);line-height:1.05;letter-spacing:-.045em;color:#15203d;font-weight:950}.front-cta-card p{margin:0;color:#68748e}.front-cta-actions{display:flex;flex-direction:column;gap:.75rem;min-width:200px}
.premium-footer{position:relative;padding:0!important;background:linear-gradient(145deg,#0d1530 0%,#111d42 52%,#282459 100%)!important;color:#cfd8ef!important;overflow:hidden}.premium-footer:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 4%,rgba(115,87,236,.22),transparent 28%),radial-gradient(circle at 4% 100%,rgba(47,109,246,.16),transparent 32%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,auto,48px 48px,48px 48px}.footer-main{position:relative;display:grid!important;grid-template-columns:1.45fr .7fr .7fr .85fr!important;gap:clamp(2rem,4vw,4rem)!important;align-items:start!important;padding-top:4.7rem!important;padding-bottom:3.6rem!important}.footer-logo{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:#fff}.footer-logo>span{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#3980ff,#7c58ef);font-weight:900;box-shadow:0 14px 28px rgba(52,96,229,.25)}.footer-logo div{display:flex;flex-direction:column}.footer-logo strong{font-size:1.05rem;letter-spacing:.04em}.footer-logo small{color:#aebde4;font-size:.68rem;letter-spacing:.13em}.footer-brand-block>p{max-width:440px;margin:1.25rem 0;color:#aeb9d5;line-height:1.75}.footer-tech{display:flex;flex-wrap:wrap;gap:.45rem}.footer-tech b{padding:.42rem .64rem;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.05);font-size:.68rem;color:#dbe5ff}.footer-column{display:flex;flex-direction:column;gap:.7rem}.footer-column h3{margin:0 0 .45rem;color:#fff;font-size:.94rem}.footer-column a{margin:0!important;color:#aeb9d5!important;text-decoration:none!important;font-size:.87rem;transition:.2s ease}.footer-column a:hover{color:#fff!important;transform:translateX(3px)}.footer-contact>strong{color:#fff}.footer-contact p{margin:.15rem 0 .2rem;color:#aeb9d5;line-height:1.6;font-size:.87rem}.footer-bottom{position:relative;display:flex!important;justify-content:space-between;align-items:center;padding-top:1.2rem!important;padding-bottom:1.35rem!important;border-top:1px solid rgba(255,255,255,.08);font-size:.78rem;color:#8796ba}.footer-bottom>div{display:flex;gap:1rem;align-items:center}.footer-bottom a{margin:0!important;color:#b8c5e4!important;text-decoration:none}.system-ready{color:#7ee0bd}.system-ready::first-letter{filter:drop-shadow(0 0 5px #38d9a9)}
@media(max-width:1199.98px){.premium-hero-grid{grid-template-columns:minmax(0,1fr) 370px!important}.footer-main{grid-template-columns:1.25fr repeat(3,.75fr)!important}}
@media(max-width:991.98px){.premium-hero-grid{grid-template-columns:1fr!important}.hero-side{max-width:680px;width:100%;margin-inline:auto}.footer-main{grid-template-columns:1.35fr 1fr 1fr!important}.footer-contact{grid-column:2/4}.front-cta-card{grid-template-columns:1fr}.front-cta-actions{flex-direction:row;min-width:0}}
@media(max-width:767.98px){.premium-hero{padding:86px 0 38px!important}.premium-copy h1{font-size:clamp(2.35rem,10.8vw,3.5rem)!important;line-height:1.01!important}.premium-copy>p{font-size:.94rem!important;line-height:1.7!important}.premium-actions{display:grid!important;grid-template-columns:1fr!important}.premium-actions a{width:100%}.studio-window{border-radius:20px!important;transform:none!important}.premium-login{border-radius:22px!important;padding:1.15rem!important}.front-cta{padding:3rem 0}.front-cta-card{padding:1.45rem;border-radius:24px}.front-cta-card h2{font-size:clamp(1.8rem,8vw,2.55rem)}.front-cta-actions{flex-direction:column}.footer-main{grid-template-columns:1fr 1fr!important;padding-top:3.4rem!important}.footer-brand-block{grid-column:1/-1}.footer-contact{grid-column:1/-1}.footer-bottom{flex-direction:column;align-items:flex-start;gap:.75rem}.premium-footer{padding-bottom:5.6rem!important}}
@media(max-width:479.98px){.landing-nav-inner{width:calc(100% - 18px)!important}.landing-brand small{font-size:.58rem}.premium-hero-grid{width:calc(100% - 18px)!important}.premium-copy h1{font-size:clamp(2.05rem,10.5vw,2.8rem)!important}.landing-chip{font-size:.64rem;padding:.46rem .65rem}.hero-benefits>div{min-width:205px!important}.studio-body pre{min-height:155px!important}.premium-login .form-control{min-height:49px}.footer-main{grid-template-columns:1fr!important}.footer-column,.footer-contact{grid-column:auto}.footer-bottom>div{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.hero-mesh:before,.hero-mesh:after{animation:none}.feature-card,.teacher-card,.graduate-card,.testimonial-grid>article,.btn-landing-primary{transition:none}}

/* Frontpage V8 — Gamelab-inspired, original ATASOGE implementation */
:root{--gl-blue:#169ddd;--gl-blue-dark:#0c78ba;--gl-navy:#12304a;--gl-yellow:#ffc928;--gl-purple:#7357d9;--gl-text:#22384c;--gl-muted:#6d8090;--gl-soft:#f3f9fc}
.landing-body{font-family:Inter,"Segoe UI",Arial,sans-serif;background:#fff;color:var(--gl-text)}
.gl-nav{background:rgba(255,255,255,.96)!important;border-bottom:1px solid #e7f0f5!important;box-shadow:0 8px 28px rgba(20,77,110,.06)!important}
.gl-brand{color:var(--gl-navy)!important}.gl-brand>span{background:linear-gradient(135deg,var(--gl-blue),#54c9ef)!important}.gl-brand small{color:var(--gl-blue-dark)!important}.gl-login-link{color:var(--gl-blue-dark)!important}.landing-nav-cta{background:var(--gl-yellow)!important;color:#3b3210!important;box-shadow:0 10px 24px rgba(255,190,22,.28)!important}
.gl-hero{position:relative;overflow:hidden;padding:130px 0 92px;background:linear-gradient(115deg,#159ddc 0%,#27afe4 56%,#75d5ef 100%);color:#fff}
.gl-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 20%,rgba(255,255,255,.16),transparent 25%),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:auto,46px 46px,46px 46px}.gl-hero:after{content:"";position:absolute;left:-5%;right:-5%;bottom:-70px;height:150px;border-radius:50% 50% 0 0;background:#fff}
.gl-cloud{position:absolute;background:rgba(255,255,255,.2);border-radius:999px}.gl-cloud:before,.gl-cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.gl-cloud-a{width:150px;height:35px;top:23%;left:4%}.gl-cloud-a:before{width:55px;height:55px;left:22px;bottom:0}.gl-cloud-a:after{width:75px;height:75px;right:18px;bottom:0}.gl-cloud-b{width:180px;height:38px;right:4%;top:17%}.gl-cloud-b:before{width:70px;height:70px;left:25px;bottom:0}.gl-cloud-b:after{width:88px;height:88px;right:20px;bottom:0}
.gl-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center}.gl-eyebrow{display:inline-flex;padding:.48rem .78rem;border-radius:999px;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.3);font-size:.74rem;font-weight:900;letter-spacing:.12em}.gl-copy h1{margin:1.15rem 0;font-size:clamp(3rem,5.4vw,5.25rem);line-height:.99;letter-spacing:-.055em;font-weight:900}.gl-copy h1 em{font-style:normal;color:var(--gl-yellow)}.gl-copy>p{max-width:720px;font-size:1.08rem;line-height:1.75;color:rgba(255,255,255,.92)}.gl-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.65rem}.gl-btn-primary,.gl-btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:.82rem 1.2rem;border-radius:12px;text-decoration:none;font-weight:850}.gl-btn-primary{background:var(--gl-yellow);color:#3d3307;box-shadow:0 14px 30px rgba(126,92,0,.2)}.gl-btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.1)}.gl-proof{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:.4rem .65rem;align-items:center;margin-top:1.6rem;max-width:650px}.gl-proof strong{font-size:1.25rem}.gl-proof span{font-size:.78rem;color:rgba(255,255,255,.84)}
.gl-visual{position:relative;min-height:490px;display:grid;place-items:center}.gl-yellow-orbit{position:absolute;width:390px;height:390px;border-radius:50%;background:var(--gl-yellow);right:3%;top:4%;box-shadow:0 35px 70px rgba(8,85,130,.22)}.gl-browser-card{position:relative;width:min(100%,520px);border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 35px 80px rgba(13,66,102,.28);transform:rotate(-2deg)}.gl-browser-top{height:48px;display:flex;align-items:center;gap:.45rem;padding:0 1rem;background:#eaf5fa;color:#6e8190;font-size:.75rem}.gl-browser-top i{width:10px;height:10px;border-radius:50%;background:#ff6b61}.gl-browser-top i:nth-child(2){background:#ffc542}.gl-browser-top i:nth-child(3){background:#46c77a}.gl-browser-top span{margin-left:.4rem}.gl-browser-body{display:grid;grid-template-columns:1.05fr .95fr;min-height:310px}.gl-code-panel{padding:1.25rem;background:#102b42;color:#d7efff}.gl-code-panel b{display:block;color:#70d0f2;margin-bottom:1.1rem}.gl-code-panel code{display:block;line-height:1.8;font-size:.8rem;color:#b9d6e6}.gl-code-panel button{margin-top:1.25rem;border:0;border-radius:10px;padding:.62rem .8rem;background:var(--gl-yellow);font-weight:800;color:#3d3307}.gl-preview-panel{padding:1.3rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--gl-navy)}.gl-preview-panel>span{font-size:.65rem;font-weight:900;letter-spacing:.13em;color:#7b8e9c}.gl-preview-panel>div{width:72px;height:72px;margin:1rem 0;display:grid;place-items:center;border-radius:22px;background:linear-gradient(135deg,#159ddd,#6ed5ef);color:#fff;font-weight:900;font-size:1.4rem;box-shadow:0 14px 35px rgba(22,157,221,.25)}.gl-preview-panel h3{font-size:1.15rem;font-weight:900}.gl-float-card{position:absolute;display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-radius:15px;background:#fff;color:var(--gl-text);box-shadow:0 16px 35px rgba(10,75,116,.18)}.gl-float-card>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#e6f8ff;color:var(--gl-blue-dark);font-weight:900}.gl-float-card b,.gl-float-card small{display:block}.gl-float-card small{font-size:.7rem;color:var(--gl-muted)}.gl-float-a{left:-8px;bottom:55px}.gl-float-b{right:-6px;top:52px}
.gl-trusted{position:relative;z-index:3;padding:1.2rem 0 2rem;background:#fff}.gl-trusted .container{display:flex;justify-content:space-between;gap:1rem;align-items:center}.gl-trusted>div>span{font-size:.78rem;color:var(--gl-muted);font-weight:800}.gl-trusted .container>div{display:flex;flex-wrap:wrap;gap:.65rem}.gl-trusted b{padding:.5rem .7rem;border-radius:10px;background:#f3f8fb;color:#587083;font-size:.75rem}
.gl-programs{padding:5rem 0;background:#fff}.gl-section-head{text-align:center;max-width:760px;margin:0 auto 2.3rem}.gl-section-head>span,.gl-login-copy>span{font-size:.73rem;font-weight:900;letter-spacing:.15em;color:var(--gl-blue-dark)}.gl-section-head h2,.gl-login-copy h2{margin:.55rem 0;font-size:clamp(2rem,4vw,3.4rem);font-weight:900;letter-spacing:-.04em;color:var(--gl-navy)}.gl-section-head p,.gl-login-copy p{color:var(--gl-muted);line-height:1.7}.gl-program-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.gl-program-card{position:relative;padding:1.5rem;border:1px solid #e4eef4;border-radius:18px;background:#fff;box-shadow:0 12px 34px rgba(20,72,104,.07);transition:.25s ease;overflow:hidden}.gl-program-card:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--accent)}.gl-program-card:hover{transform:translateY(-7px);box-shadow:0 22px 46px rgba(20,72,104,.13)}.gl-program-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:color-mix(in srgb,var(--accent) 14%,white);font-size:1.6rem}.gl-program-card h3{margin:1rem 0 .5rem;color:var(--gl-navy);font-weight:900}.gl-program-card p{min-height:104px;color:var(--gl-muted);line-height:1.65}.gl-program-card a{color:var(--accent);text-decoration:none;font-weight:850}
.gl-login-band{padding:5.5rem 0;background:linear-gradient(135deg,#eef9fd,#f7fbfd)}.gl-login-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,480px);gap:clamp(2rem,6vw,5.5rem);align-items:center}.gl-login-copy ul{display:grid;gap:.7rem;padding:0;list-style:none}.gl-login-copy li{position:relative;padding-left:1.65rem;color:#486276}.gl-login-copy li:before{content:"✓";position:absolute;left:0;color:#15a26d;font-weight:900}.gl-login-card{max-width:none!important;border:1px solid #dceaf1!important;border-radius:22px!important;background:#fff!important;box-shadow:0 26px 60px rgba(16,75,110,.12)!important}.gl-login-card .form-control{min-height:52px;border-radius:12px;border-color:#d6e4ec;background:#f8fbfd}.gl-submit{min-height:52px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--gl-blue),var(--gl-blue-dark));font-weight:850}.gl-login-links{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid #e6eef2}.gl-login-links a{font-weight:800;text-decoration:none;color:var(--gl-blue-dark)}
@media(max-width:991.98px){.gl-hero-grid,.gl-login-grid{grid-template-columns:1fr}.gl-copy{text-align:center}.gl-copy>p,.gl-proof{margin-left:auto;margin-right:auto}.gl-actions{justify-content:center}.gl-visual{min-height:430px}.gl-program-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767.98px){.gl-hero{padding:96px 0 72px}.gl-copy h1{font-size:clamp(2.35rem,11vw,3.65rem)}.gl-copy>p{font-size:.95rem}.gl-actions{display:grid}.gl-actions a{width:100%}.gl-proof{grid-template-columns:auto 1fr auto 1fr}.gl-proof strong:nth-of-type(3),.gl-proof strong:nth-of-type(3)+span{display:none}.gl-visual{min-height:340px;margin-top:1rem}.gl-yellow-orbit{width:275px;height:275px;right:8%}.gl-browser-card{width:94%;transform:none}.gl-browser-body{grid-template-columns:1fr}.gl-preview-panel{display:none}.gl-float-card{transform:scale(.82)}.gl-float-a{left:-12px;bottom:20px}.gl-float-b{right:-12px;top:22px}.gl-trusted .container{display:block;text-align:center}.gl-trusted .container>div{justify-content:center;margin-top:.8rem}.gl-programs,.gl-login-band{padding:3.5rem 0}.gl-program-grid{grid-template-columns:1fr}.gl-program-card p{min-height:auto}.gl-login-grid{width:calc(100% - 22px)!important}.gl-login-card{padding:1.15rem!important}.gl-login-links{font-size:.82rem}}
@media(max-width:420px){.gl-visual{min-height:300px}.gl-browser-body{min-height:235px}.gl-code-panel{padding:1rem}.gl-code-panel code{font-size:.68rem}.gl-float-card{display:none}.gl-program-card{padding:1.25rem}.gl-hero:after{bottom:-90px}}

/* ==========================================================
   FRONTPAGE V9 — GAMELAB-INSPIRED, ORIGINAL & MOBILE APP FIT
   ========================================================== */
:root{
  --v9-blue:#1687d9;
  --v9-blue-2:#23a7e8;
  --v9-blue-3:#eaf8ff;
  --v9-yellow:#ffd338;
  --v9-navy:#102a43;
  --v9-text:#17324d;
  --v9-muted:#667b91;
  --v9-line:#dbeaf4;
  --v9-soft:#f6fbff;
  --v9-card:#ffffff;
  --v9-shadow:0 18px 50px rgba(29,85,126,.12);
  --v9-shadow-hover:0 28px 70px rgba(29,85,126,.18);
  --v9-radius:22px;
}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body.landing-body{background:#fff;color:var(--v9-text);font-family:Inter,"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;overflow-x:hidden}
body.landing-body .container{width:min(1180px,calc(100% - 40px));max-width:none}

/* NAV */
.gl-nav{position:fixed;inset:0 0 auto;z-index:1050;height:78px;background:rgba(255,255,255,.93);border-bottom:1px solid rgba(210,230,244,.9);box-shadow:0 8px 30px rgba(20,72,110,.06);backdrop-filter:blur(16px)}
.gl-nav .landing-nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:22px}
.gl-brand{display:flex;align-items:center;gap:10px;color:var(--v9-navy)!important;text-decoration:none;min-width:max-content}
.gl-brand>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--v9-blue),var(--v9-blue-2));color:white;font-weight:900;box-shadow:0 10px 22px rgba(22,135,217,.25)}
.gl-brand strong{font-size:1rem;letter-spacing:.02em;line-height:1}
.gl-brand small{display:block;font-size:.65rem;font-weight:800;color:#7890a5;letter-spacing:.12em;margin-top:4px}
.gl-nav .landing-menu{display:flex;align-items:center;gap:7px}
.gl-nav .landing-menu>a{padding:11px 12px;border-radius:10px;font-size:.86rem;font-weight:760;color:#35516b;text-decoration:none;transition:.2s ease}
.gl-nav .landing-menu>a:hover{color:var(--v9-blue);background:#edf8ff}
.gl-nav .gl-login-link{margin-left:8px;color:var(--v9-blue)!important}
.gl-nav .landing-nav-cta{background:var(--v9-yellow)!important;color:#594400!important;padding-inline:18px!important;box-shadow:0 10px 22px rgba(205,158,0,.2)}
.gl-nav .landing-nav-cta:hover{transform:translateY(-1px);background:#ffca12!important}
.landing-menu-btn{display:none;width:44px;height:44px;border:1px solid var(--v9-line);border-radius:13px;background:#fff;color:var(--v9-navy);font-size:1.25rem}

/* HERO */
.gl-hero{padding:150px 0 92px;min-height:720px;background:linear-gradient(117deg,#168edb 0%,#21a5e8 55%,#64cceb 100%);color:#fff;position:relative;overflow:hidden}
.gl-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 18%,rgba(255,255,255,.19),transparent 26%),radial-gradient(circle at 82% 20%,rgba(255,211,56,.20),transparent 23%),linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:auto,auto,54px 54px,54px 54px}
.gl-hero:after{content:"";position:absolute;left:-3%;right:-3%;bottom:-98px;height:190px;border-radius:52% 52% 0 0;background:#fff}
.gl-cloud{opacity:.45;filter:blur(.2px)}
.gl-hero-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(460px,.97fr);gap:70px;align-items:center;position:relative;z-index:2}
.gl-copy{max-width:650px}
.gl-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);font-size:.72rem;font-weight:900;letter-spacing:.11em;box-shadow:inset 0 1px 0 rgba(255,255,255,.26)}
.gl-copy h1{margin:20px 0 18px;font-size:clamp(3.1rem,5.1vw,5.15rem);line-height:1.02;letter-spacing:-.058em;font-weight:900;text-wrap:balance}
.gl-copy h1 em{font-style:normal;color:var(--v9-yellow);text-shadow:0 8px 30px rgba(92,68,0,.15)}
.gl-copy>p{font-size:1.08rem;line-height:1.72;color:rgba(255,255,255,.94);max-width:620px}
.gl-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.gl-btn-primary,.gl-btn-ghost{min-height:54px;padding:0 22px;border-radius:13px;font-weight:850;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.25s ease}
.gl-btn-primary{background:var(--v9-yellow);color:#4c3a00;box-shadow:0 16px 34px rgba(95,70,0,.18)}
.gl-btn-primary:hover{transform:translateY(-3px);color:#4c3a00;box-shadow:0 22px 42px rgba(95,70,0,.23)}
.gl-btn-ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.44);color:#fff;backdrop-filter:blur(8px)}
.gl-btn-ghost:hover{background:#fff;color:var(--v9-blue);transform:translateY(-3px)}
.gl-proof{display:flex;align-items:center;gap:12px;margin-top:30px;flex-wrap:wrap}
.gl-proof strong{font-size:1.28rem;line-height:1}.gl-proof span{font-size:.78rem;color:rgba(255,255,255,.85);padding-right:13px;border-right:1px solid rgba(255,255,255,.28)}.gl-proof span:last-child{border:0}

/* HERO VISUAL */
.gl-visual{min-height:470px;position:relative;display:grid;place-items:center;perspective:1200px}
.gl-yellow-orbit{position:absolute;width:430px;height:430px;border-radius:50%;background:linear-gradient(145deg,#ffe771,#ffc823);right:0;top:15px;box-shadow:inset -30px -30px 65px rgba(195,130,0,.15),0 30px 80px rgba(36,104,141,.24);animation:v9Float 6s ease-in-out infinite}
.gl-browser-card{position:relative;width:min(520px,96%);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 35px 100px rgba(12,60,91,.31);border:1px solid rgba(255,255,255,.72);transform:rotateY(-5deg) rotateX(2deg);transition:.35s ease}
.gl-browser-card:hover{transform:rotateY(-1deg) rotateX(0) translateY(-7px)}
.gl-browser-top{height:44px;background:#f4f8fb;border-bottom:1px solid #e3edf4;display:flex;align-items:center;gap:7px;padding:0 14px}.gl-browser-top i{width:10px;height:10px;border-radius:50%;background:#ff6b6b}.gl-browser-top i:nth-child(2){background:#ffd166}.gl-browser-top i:nth-child(3){background:#38c989}.gl-browser-top span{margin-left:9px;font-size:.69rem;font-weight:800;color:#7590a4}
.gl-browser-body{display:grid;grid-template-columns:1.08fr .92fr;min-height:320px}.gl-code-panel{background:#112337;color:#d7e8f4;padding:23px;display:flex;flex-direction:column}.gl-code-panel>b{font-size:.75rem;color:#7dd3fc;margin-bottom:18px}.gl-code-panel code{font-family:"Cascadia Code",Consolas,monospace;font-size:.79rem;line-height:1.85;color:#d9ecf6}.gl-code-panel button{margin-top:auto;border:0;border-radius:10px;padding:11px;background:#27b6e8;color:#fff;font-weight:850;box-shadow:0 10px 22px rgba(0,138,190,.24)}.gl-preview-panel{padding:22px;background:linear-gradient(160deg,#fff,#effaff);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.gl-preview-panel>span{font-size:.62rem;font-weight:900;color:#7993a7;letter-spacing:.12em}.gl-preview-panel>div{display:grid;place-items:center;width:72px;height:72px;margin:18px 0;border-radius:22px;background:linear-gradient(145deg,var(--v9-blue),#54c8ee);color:white;font-size:1.4rem;font-weight:900;box-shadow:0 16px 30px rgba(22,135,217,.24)}.gl-preview-panel h3{font-size:1rem;color:var(--v9-navy);line-height:1.35}
.gl-float-card{position:absolute;z-index:4;display:flex;align-items:center;gap:11px;padding:13px 15px;background:#fff;border-radius:14px;box-shadow:0 18px 45px rgba(12,60,91,.2);color:var(--v9-text);animation:v9Float 5s ease-in-out infinite}.gl-float-card>span{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#e7f8ef;color:#12a65a;font-weight:900}.gl-float-card b{font-size:.82rem;display:block}.gl-float-card small{font-size:.68rem;color:#8195a6}.gl-float-a{left:-14px;bottom:42px}.gl-float-b{right:-12px;top:34px;animation-delay:-2s}.gl-float-b>span{background:#fff5cf;color:#c88e00}
@keyframes v9Float{50%{transform:translateY(-9px)}}

/* TRUST & SECTIONS */
.gl-trusted{position:relative;z-index:3;background:#fff;padding:24px 0 12px}.gl-trusted .container{display:flex;align-items:center;justify-content:space-between;gap:20px}.gl-trusted span{font-size:.82rem;font-weight:800;color:#7c92a4}.gl-trusted .container>div{display:flex;gap:12px;flex-wrap:wrap}.gl-trusted b{padding:8px 12px;border-radius:9px;background:#f2f9fd;color:#4a657a;font-size:.74rem;border:1px solid #e2eef5}
.gl-programs,.landing-section,.public-showcase,.testimonial-section,.developer-section{padding:88px 0}
.gl-programs{background:#fff}.gl-section-head,.section-title{max-width:720px;margin:0 auto 40px}.gl-section-head{text-align:center}.gl-section-head>span,.section-title>span,.section-kicker{display:inline-block;color:var(--v9-blue);font-size:.74rem;font-weight:900;letter-spacing:.13em;margin-bottom:10px}.gl-section-head h2,.section-title h2,.showcase-heading h2{font-size:clamp(2rem,3.4vw,3rem);line-height:1.12;letter-spacing:-.04em;color:var(--v9-navy);font-weight:900;text-wrap:balance}.gl-section-head p,.section-title p{color:var(--v9-muted);line-height:1.75}
.gl-program-grid,.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.gl-program-card,.feature-card{background:#fff;border:1px solid var(--v9-line);border-radius:var(--v9-radius);padding:26px;box-shadow:0 10px 34px rgba(31,89,129,.07);transition:.28s ease;position:relative;overflow:hidden}.gl-program-card:before,.feature-card:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;background:var(--accent,var(--v9-blue))}.gl-program-card:hover,.feature-card:hover{transform:translateY(-8px);box-shadow:var(--v9-shadow-hover);border-color:#cce5f3}.gl-program-icon,.feature-card>div:first-child{width:56px;height:56px;display:grid;place-items:center;border-radius:17px;background:color-mix(in srgb,var(--accent,var(--v9-blue)) 12%,white);font-size:1.55rem}.gl-program-card h3,.feature-card h3{font-size:1.06rem;color:var(--v9-navy);margin:19px 0 10px;font-weight:850}.gl-program-card p,.feature-card p{color:var(--v9-muted);font-size:.88rem;line-height:1.7}.gl-program-card a{font-size:.83rem;font-weight:850;color:var(--accent,var(--v9-blue));text-decoration:none}

/* LOGIN */
.gl-login-band{padding:88px 0;background:linear-gradient(135deg,#eefaff 0%,#f9fcff 53%,#fff8dd 100%);position:relative;overflow:hidden}.gl-login-band:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(63,181,232,.13);filter:blur(10px);right:-150px;top:-170px}.gl-login-grid{position:relative;display:grid;grid-template-columns:1fr 450px;align-items:center;gap:70px}.gl-login-copy>span{font-size:.74rem;letter-spacing:.13em;font-weight:900;color:var(--v9-blue)}.gl-login-copy h2{font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.1;letter-spacing:-.045em;color:var(--v9-navy);font-weight:900;margin:14px 0}.gl-login-copy p{font-size:1rem;line-height:1.75;color:var(--v9-muted);max-width:610px}.gl-login-copy ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}.gl-login-copy li{display:flex;align-items:center;gap:10px;font-weight:750;color:#3f5c74}.gl-login-copy li:before{content:"✓";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#daf6e7;color:#15924e;font-size:.75rem}.gl-login-card{border-radius:26px!important;border:1px solid #d9eaf4!important;background:rgba(255,255,255,.96)!important;box-shadow:0 30px 80px rgba(27,83,123,.17)!important;padding:28px!important}.login-card-top{display:flex;align-items:center;gap:13px;margin-bottom:22px}.login-logo{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:linear-gradient(145deg,var(--v9-blue),var(--v9-blue-2));color:#fff;font-weight:900;box-shadow:0 12px 25px rgba(22,135,217,.25)}.login-heading{font-size:1.15rem;font-weight:900;color:var(--v9-navy)}.gl-login-card .form-control{height:50px;border-radius:12px;border-color:#d4e4ee;background:#fafdff}.gl-login-card .form-control:focus{background:#fff;border-color:#5ab7e7;box-shadow:0 0 0 4px rgba(34,164,231,.12)}.gl-submit{height:52px;border:0!important;border-radius:13px!important;background:linear-gradient(135deg,var(--v9-blue),var(--v9-blue-2))!important;box-shadow:0 14px 28px rgba(22,135,217,.23);font-weight:850}.gl-login-links{display:flex;justify-content:space-between;gap:12px;margin-top:18px}.gl-login-links a{font-size:.8rem;font-weight:760;text-decoration:none;color:var(--v9-blue)}

/* GALLERY / PEOPLE / FOOTER */
.public-showcase{background:var(--v9-soft)}.showcase-heading{display:flex;align-items:end;justify-content:space-between;gap:24px}.showcase-heading>div{max-width:700px}.activity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.activity-card{aspect-ratio:4/3;border:0;padding:0;border-radius:20px;overflow:hidden;position:relative;box-shadow:0 12px 35px rgba(25,77,114,.12);background:#dfeef7}.activity-card img{width:100%;height:100%;object-fit:cover;transition:.45s ease}.activity-card:hover img{transform:scale(1.07)}.activity-overlay{position:absolute;inset:auto 0 0;padding:35px 18px 17px;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(8,34,53,.88));display:grid}.activity-overlay strong{font-size:.98rem}.activity-overlay small{font-size:.72rem;color:rgba(255,255,255,.82)}.activity-overlay em{font-size:.7rem;font-style:normal;color:#ffd954;margin-top:6px}
.teacher-grid,.graduate-grid,.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.teacher-card,.graduate-card,.testimonial-grid>article{background:#fff;border:1px solid var(--v9-line);border-radius:22px;overflow:hidden;box-shadow:0 12px 36px rgba(25,77,114,.08);transition:.28s ease}.teacher-card:hover,.graduate-card:hover,.testimonial-grid>article:hover{transform:translateY(-6px);box-shadow:var(--v9-shadow-hover)}.teacher-card img,.graduate-card img{width:100%;aspect-ratio:16/11;object-fit:cover;background:#eef7fc}.teacher-card-body,.graduate-card-body{padding:22px}.teacher-card h3,.graduate-card h3{font-weight:850;color:var(--v9-navy)}
.testimonial-section{background:#f8fbfd}.testimonial-grid>article{padding:25px}.testimonial-grid footer{display:flex;align-items:center;gap:12px}.testimonial-grid footer img{width:45px;height:45px;border-radius:50%;object-fit:cover}.quote-mark{font-size:2.8rem;line-height:.7;color:#7bc6ed}.testimonial-grid p{color:var(--v9-muted);line-height:1.7}
.developer-section{background:#fff}.developer-grid{display:grid;grid-template-columns:380px 1fr;align-items:center;gap:70px}.developer-photo-wrap{border-radius:28px;overflow:hidden;box-shadow:var(--v9-shadow);background:#eaf6fc}.developer-photo-wrap img{width:100%;display:block}.developer-copy>span{font-size:.74rem;font-weight:900;color:var(--v9-blue);letter-spacing:.13em}.developer-copy h2{font-size:clamp(2.2rem,4vw,3.6rem);font-weight:900;letter-spacing:-.05em;color:var(--v9-navy);margin:10px 0}.developer-copy h3{font-size:1.1rem;color:#49657c}.developer-copy p{color:var(--v9-muted);line-height:1.8}.developer-skills{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}.developer-skills b{font-size:.72rem;padding:8px 11px;border-radius:9px;background:#edf8fe;color:#2979aa}
.front-cta{padding:0 0 72px;background:#fff}.front-cta-card{padding:42px!important;border-radius:26px;background:linear-gradient(135deg,#0f80cf,#25a9e8);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:35px;box-shadow:0 30px 70px rgba(20,119,183,.23);position:relative;overflow:hidden}.front-cta-card:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:var(--v9-yellow);right:-85px;top:-90px;opacity:.92}.front-cta-card>div{position:relative;z-index:1}.front-cta-card span{font-size:.7rem;font-weight:900;letter-spacing:.12em;color:#cfefff}.front-cta-card h2{font-size:clamp(1.8rem,3vw,2.7rem);font-weight:900;max-width:720px;margin:8px 0}.front-cta-card p{margin:0;color:rgba(255,255,255,.84)}.front-cta-actions{display:flex;gap:10px;min-width:max-content}.btn-landing-primary,.btn-landing-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 18px;border-radius:12px;text-decoration:none;font-weight:850}.btn-landing-primary{background:var(--v9-yellow);color:#503c00}.btn-landing-secondary{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff}
.premium-footer{background:#0d2940;color:#d8e9f4;padding:66px 0 0}.footer-main{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:45px}.footer-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}.footer-logo>span{display:grid;place-items:center;width:45px;height:45px;border-radius:13px;background:linear-gradient(145deg,#1687d9,#29b7eb);font-weight:900}.footer-logo strong{display:block}.footer-logo small{font-size:.64rem;color:#9ec0d7;letter-spacing:.12em}.footer-brand-block p,.footer-contact p{color:#9fb9ca;line-height:1.7;font-size:.86rem}.footer-tech{display:flex;flex-wrap:wrap;gap:7px}.footer-tech b{font-size:.65rem;padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.07);color:#bcd6e7}.footer-column{display:flex;flex-direction:column;gap:10px}.footer-column h3{font-size:.86rem;color:#fff;font-weight:850;margin-bottom:8px}.footer-column a{color:#a9c2d3;text-decoration:none;font-size:.82rem}.footer-column a:hover{color:#fff}.footer-bottom{margin-top:48px;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:20px;color:#90aebf;font-size:.76rem}.footer-bottom>div{display:flex;gap:18px}.footer-bottom a{color:#c6dce9;text-decoration:none}.system-ready{color:#65dd9e}
.mobile-bottom-nav{display:none}

/* TABLET */
@media(max-width:1099.98px){
  .gl-nav .landing-menu>a{padding:10px 8px;font-size:.79rem}
  .gl-hero-grid{grid-template-columns:1fr 420px;gap:38px}
  .gl-program-grid,.feature-grid{grid-template-columns:repeat(2,1fr)}
  .activity-grid{grid-template-columns:repeat(2,1fr)}
  .footer-main{grid-template-columns:1.25fr repeat(3,1fr);gap:28px}
}
@media(max-width:991.98px){
  body.landing-body .container{width:min(100% - 30px,760px)}
  .landing-menu-btn{display:grid;place-items:center}
  .gl-nav .landing-menu{position:absolute;left:15px;right:15px;top:68px;display:none;flex-direction:column;align-items:stretch;padding:12px;background:#fff;border:1px solid var(--v9-line);border-radius:18px;box-shadow:0 25px 70px rgba(20,72,110,.2)}
  .gl-nav .landing-menu.open{display:flex}.gl-nav .landing-menu>a{padding:12px 14px}.gl-nav .gl-login-link{margin-left:0}
  .gl-hero{padding:126px 0 90px;min-height:auto}.gl-hero-grid{grid-template-columns:1fr;gap:44px}.gl-copy{text-align:center;margin:auto}.gl-copy>p{margin-inline:auto}.gl-actions,.gl-proof{justify-content:center}.gl-visual{min-height:430px}.gl-yellow-orbit{right:50%;transform:translateX(50%)}
  .gl-trusted .container{display:block;text-align:center}.gl-trusted .container>div{justify-content:center;margin-top:12px}
  .gl-login-grid{grid-template-columns:1fr;gap:36px}.gl-login-copy{text-align:center}.gl-login-copy p{margin-inline:auto}.gl-login-copy ul{max-width:380px;margin-inline:auto;text-align:left}.gl-login-card{width:min(100%,470px);margin:auto}
  .teacher-grid,.graduate-grid,.testimonial-grid{grid-template-columns:repeat(2,1fr)}
  .developer-grid{grid-template-columns:300px 1fr;gap:42px}
  .front-cta-card{display:grid}.front-cta-actions{min-width:0}
  .footer-main{grid-template-columns:1fr 1fr}.footer-brand-block{grid-column:1/-1;max-width:620px}
}

/* MOBILE — APP-LIKE */
@media(max-width:767.98px){
  html{scroll-padding-top:70px}
  body.landing-body{padding-bottom:74px;background:#f7fbfe}
  body.landing-body .container{width:calc(100% - 24px)}
  .gl-nav{height:64px;border-bottom-color:#e5eff5}.gl-brand>span{width:38px;height:38px;border-radius:12px}.gl-brand strong{font-size:.9rem}.gl-brand small{font-size:.56rem}.landing-menu-btn{width:40px;height:40px;border-radius:12px}
  .gl-hero{padding:96px 0 52px;min-height:auto;border-radius:0 0 28px 28px}.gl-hero:after{display:none}.gl-hero-grid{gap:30px}.gl-eyebrow{font-size:.6rem;padding:7px 10px;letter-spacing:.08em}.gl-copy h1{font-size:clamp(2.18rem,11vw,3.15rem);line-height:1.04;margin:16px 0 14px;letter-spacing:-.05em}.gl-copy>p{font-size:.92rem;line-height:1.65}.gl-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:20px}.gl-btn-primary,.gl-btn-ghost{width:100%;min-height:50px;border-radius:13px}.gl-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:20px}.gl-proof strong{font-size:1.05rem}.gl-proof span{padding:0;border:0;font-size:.62rem}.gl-proof strong,.gl-proof span{text-align:center}.gl-proof strong:nth-of-type(1){grid-column:1}.gl-proof span:nth-of-type(1){grid-row:2}.gl-proof strong:nth-of-type(2){grid-column:2}.gl-proof span:nth-of-type(2){grid-row:2}.gl-proof strong:nth-of-type(3){grid-column:3}.gl-proof span:nth-of-type(3){grid-row:2}
  .gl-visual{min-height:300px;margin:0 -4px}.gl-yellow-orbit{width:270px;height:270px;top:10px}.gl-browser-card{width:100%;border-radius:17px;transform:none;box-shadow:0 24px 60px rgba(12,60,91,.28)}.gl-browser-top{height:38px}.gl-browser-body{grid-template-columns:1fr;min-height:220px}.gl-code-panel{padding:17px;min-height:220px}.gl-code-panel code{font-size:.67rem;line-height:1.7}.gl-preview-panel{display:none}.gl-float-card{padding:9px 11px;border-radius:12px;transform:scale(.88)}.gl-float-a{left:-4px;bottom:-15px}.gl-float-b{right:-4px;top:-13px}
  .gl-trusted{padding:18px 0 10px;background:#fff}.gl-trusted .container>div{overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap;padding-bottom:5px;scrollbar-width:none}.gl-trusted b{white-space:nowrap}
  .gl-programs,.landing-section,.public-showcase,.testimonial-section,.developer-section{padding:58px 0}.gl-section-head,.section-title{margin-bottom:26px}.gl-section-head h2,.section-title h2,.showcase-heading h2{font-size:1.8rem}.gl-section-head p,.section-title p{font-size:.88rem}
  .gl-program-grid,.feature-grid{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:none}.gl-program-card,.feature-card{flex:0 0 84%;scroll-snap-align:start;padding:22px;border-radius:20px}.gl-program-card:hover,.feature-card:hover{transform:none}
  .gl-login-band{padding:58px 0}.gl-login-copy h2{font-size:1.9rem}.gl-login-copy p{font-size:.9rem}.gl-login-copy ul{font-size:.86rem}.gl-login-card{padding:20px!important;border-radius:21px!important}.gl-login-card .form-control{height:48px}.gl-login-links{font-size:.76rem}
  .showcase-heading{display:block}.showcase-heading>a{margin-top:15px;width:100%}.activity-grid{display:flex;overflow-x:auto;gap:13px;scroll-snap-type:x mandatory;scrollbar-width:none}.activity-card{flex:0 0 86%;scroll-snap-align:start;border-radius:18px}
  .teacher-grid,.graduate-grid,.testimonial-grid{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:14px}.teacher-card,.graduate-card,.testimonial-grid>article{flex:0 0 84%;scroll-snap-align:start;border-radius:20px}
  .developer-grid{grid-template-columns:1fr;gap:25px}.developer-photo-wrap{width:min(82%,330px);margin:auto;border-radius:24px}.developer-copy{text-align:center}.developer-skills{justify-content:center}.developer-copy .btn-landing-primary{width:100%}
  .front-cta{padding:0 0 30px;background:#f7fbfe}.front-cta-card{width:calc(100% - 24px)!important;padding:27px 20px!important;border-radius:22px}.front-cta-card h2{font-size:1.7rem}.front-cta-card p{font-size:.86rem}.front-cta-actions{display:grid}.btn-landing-primary,.btn-landing-secondary{width:100%}
  .premium-footer{padding:48px 0 0}.footer-main{grid-template-columns:1fr;gap:30px}.footer-brand-block{grid-column:auto}.footer-column{padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08)}.footer-bottom{display:grid;text-align:center;padding-bottom:26px}.footer-bottom>div{justify-content:center;flex-wrap:wrap}
  .mobile-bottom-nav{position:fixed;z-index:1090;left:8px;right:8px;bottom:8px;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;height:62px;padding:7px 6px calc(7px + env(safe-area-inset-bottom));border-radius:20px;background:rgba(255,255,255,.95);border:1px solid #dcebf4;box-shadow:0 16px 45px rgba(23,76,114,.22);backdrop-filter:blur(16px)}.mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:#698196;font-size:.9rem}.mobile-bottom-nav small{font-size:.56rem;font-weight:800}.mobile-bottom-nav .mobile-main-action{transform:translateY(-15px);color:#fff}.mobile-bottom-nav .mobile-main-action>span{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,var(--v9-blue),var(--v9-blue-2));box-shadow:0 12px 26px rgba(22,135,217,.32)}.mobile-bottom-nav .mobile-main-action small{color:var(--v9-blue);margin-top:2px}
}
@media(max-width:389.98px){
  body.landing-body .container{width:calc(100% - 18px)}
  .gl-copy h1{font-size:2.08rem}.gl-copy>p{font-size:.87rem}.gl-proof{gap:3px}.gl-proof strong{font-size:.98rem}.gl-proof span{font-size:.56rem}.gl-visual{min-height:275px}.gl-browser-body{min-height:205px}.gl-code-panel{min-height:205px;padding:14px}.gl-code-panel code{font-size:.61rem}.gl-float-card{display:none}.gl-program-card,.feature-card,.teacher-card,.graduate-card,.testimonial-grid>article{flex-basis:90%}.activity-card{flex-basis:92%}.gl-login-card{padding:17px!important}.front-cta-card{width:calc(100% - 18px)!important}
}
@media(hover:none){.gl-program-card:hover,.feature-card:hover,.teacher-card:hover,.graduate-card:hover,.testimonial-grid>article:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Word Studio Pro V4 active controls */
.word-ribbon{position:sticky;top:0;z-index:5;max-height:190px;overflow:auto}
.word-ribbon-group{align-items:flex-end;flex-wrap:wrap}
.word-ribbon button{min-height:36px;cursor:pointer;transition:.15s ease}
.word-ribbon button:hover{border-color:#2563eb;color:#1d4ed8;background:#eff6ff}
.word-ribbon input[type=color]{width:38px;height:36px;border:1px solid #cbd5e1;border-radius:7px;padding:2px;background:#fff}
.document-page[data-margin="narrow"]{padding:12mm}
.document-page[data-margin="wide"]{padding:32mm}
.word-figure{margin:14px auto;text-align:center}.word-figure figcaption{font-size:.86rem;color:#64748b;margin-top:5px}
.word-page-break{height:12px;margin:28px -20px;border-top:2px dashed #94a3b8;page-break-after:always}
.document-page blockquote{border-left:4px solid #3b82f6;padding:8px 14px;margin:12px 0;background:#eff6ff}
.document-page pre{padding:12px;border-radius:8px;background:#0f172a;color:#e2e8f0;white-space:pre-wrap}
@media print{.word-page-break{border:0;height:0;page-break-after:always}.word-ribbon,.word-side-panel,.page-heading,.studio-title-input{display:none!important}}
@media(max-width:700px){.word-ribbon{flex-wrap:nowrap;overflow-x:auto;max-height:none}.word-ribbon-group{flex:0 0 auto;flex-wrap:nowrap}.word-ribbon label{min-width:92px}.document-page{padding:18px!important}.word-pro-shell{display:block}.word-side-panel{margin-top:12px}}

/* Navigation is native and non-blocking. Prevent stale progress indicators from appearing. */
.global-nav-progress,.global-nav-progress.active{display:none!important;opacity:0!important;pointer-events:none!important}
body.global-nav-loading{cursor:default!important}
body.global-nav-loading a,body.global-nav-loading button,body.global-nav-loading input,body.global-nav-loading select,body.global-nav-loading textarea{pointer-events:auto!important}

/* Student stability hardening: navigation feedback must never cover or lock the UI. */
.global-nav-progress{display:none!important}
body.global-nav-loading,body.global-nav-loading *{pointer-events:auto!important}
form.form-submitting{pointer-events:auto!important;opacity:1!important}

/* Student dashboard: lightweight responsive workspace */
.student-dashboard{max-width:1500px;margin:0 auto}.student-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;margin-bottom:22px;border:1px solid var(--border,#dfe7f2);border-radius:24px;background:linear-gradient(135deg,rgba(27,112,255,.12),rgba(31,205,160,.08))}.student-hero h1{font-size:clamp(1.65rem,3vw,2.6rem);margin:.35rem 0}.student-hero p{max-width:760px;margin:0;color:var(--text-muted,#64748b)}.student-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}.student-stat{display:flex;flex-direction:column;min-height:132px;padding:19px;border:1px solid var(--border,#dfe7f2);border-radius:20px;background:var(--card-bg,#fff);text-decoration:none;color:inherit;transition:transform .18s ease,border-color .18s ease}.student-stat:hover{transform:translateY(-2px);border-color:#77a8ff}.student-stat span,.student-stat small{color:var(--text-muted,#64748b)}.student-stat strong{font-size:2rem;line-height:1.15;margin:.35rem 0}.dashboard-section{border-radius:22px}.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.section-heading h2{font-size:1.25rem;margin:.2rem 0 0}.section-heading>a{text-decoration:none;font-weight:700}.course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.student-course-card{display:flex;flex-direction:column;padding:18px;border:1px solid var(--border,#dfe7f2);border-radius:18px;background:rgba(255,255,255,.02)}.course-card-top,.course-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.student-course-card h3{font-size:1.08rem;margin:14px 0 7px}.student-course-card p{color:var(--text-muted,#64748b);font-size:.92rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.75em}.student-course-card .progress{height:8px;margin:8px 0 13px}.deadline-list,.compact-feed{display:grid;gap:10px}.deadline-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:13px;border:1px solid var(--border,#dfe7f2);border-radius:15px;text-decoration:none;color:inherit}.deadline-item:hover{border-color:#77a8ff}.deadline-item small,.deadline-item time{display:block;color:var(--text-muted,#64748b);font-size:.8rem}.deadline-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(27,112,255,.12);font-weight:800}.compact-feed article,.compact-feed>a{display:block;padding:13px;border:1px solid var(--border,#dfe7f2);border-radius:14px;color:inherit;text-decoration:none}.compact-feed p{font-size:.88rem;color:var(--text-muted,#64748b);margin:.3rem 0}.compact-feed small{color:var(--text-muted,#64748b)}.compact-feed .unread{border-left:4px solid #1b70ff}.studio-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:9px}.studio-shortcuts a{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid var(--border,#dfe7f2);border-radius:13px;text-decoration:none;color:inherit;font-weight:650;font-size:.87rem}.studio-shortcuts a:hover{border-color:#77a8ff}.empty-state{grid-column:1/-1;text-align:center;padding:30px;border:1px dashed var(--border,#dfe7f2);border-radius:16px;color:var(--text-muted,#64748b)}.empty-state.compact{padding:18px}.empty-state p{margin:.35rem 0 0}.profile-chip{text-decoration:none}
@media(max-width:991.98px){.student-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.student-hero{align-items:flex-start;flex-direction:column}.student-hero .btn{width:100%}.course-grid{grid-template-columns:1fr}}
@media(max-width:575.98px){.student-dashboard{margin:-4px}.student-hero{padding:20px;border-radius:18px}.student-stats{gap:9px}.student-stat{min-height:112px;padding:14px;border-radius:16px}.student-stat strong{font-size:1.65rem}.dashboard-section{padding:18px!important}.deadline-item{grid-template-columns:auto minmax(0,1fr)}.deadline-item time{grid-column:2}.studio-shortcuts{grid-template-columns:1fr}.topbar-actions .profile-chip div{display:none}}

/* ATASOGE Graphic Design Lab Studio V3 — inline editor, slides, animation, presentation */
.graphic-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.graphic-slide-actions{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-bottom:.65rem}
.graphic-slide-actions button,.slide-inline-actions button{border:1px solid #2b3d5d;background:#111c31;color:#dbeafe;border-radius:8px;padding:.42rem;font-size:.75rem}
.graphic-slides-list{display:grid;gap:.5rem;max-height:310px;overflow:auto;padding-right:.15rem}
.graphic-slide-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem;border:1px solid #263653;background:#111c31;border-radius:10px;padding:.42rem}
.graphic-slide-item.active{border-color:#38bdf8;background:#12365c;box-shadow:0 0 0 2px rgba(56,189,248,.12)}
.slide-thumb{border:0;background:transparent;color:#fff;display:grid;grid-template-columns:34px minmax(0,1fr);gap:.5rem;align-items:center;text-align:left;min-width:0}
.slide-thumb>span{display:grid;place-items:center;width:34px;height:30px;border-radius:6px;background:#e2e8f0;color:#0f172a;font-weight:800}
.slide-thumb small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#dbeafe}
.slide-inline-actions{display:grid;grid-template-columns:repeat(2,28px);gap:.2rem}.slide-inline-actions button{padding:0;height:28px}
.graphic-animation-timeline{display:grid;gap:.42rem}.graphic-timeline-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 88px auto;align-items:center;gap:.45rem;width:100%;border:1px solid #263653;background:#111c31;color:#dbeafe;border-radius:9px;padding:.5rem;text-align:left;font-size:.72rem}.graphic-timeline-row.active{border-color:#38bdf8}.graphic-timeline-row i{height:7px;border-radius:99px;background:#1e293b;position:relative}.graphic-timeline-row i:after{content:"";position:absolute;left:var(--delay);width:var(--duration);height:100%;border-radius:99px;background:#38bdf8}.graphic-timeline-row small{color:#8ca0c1}
.graphic-layer-item{grid-template-columns:minmax(0,1fr) 30px;padding:.25rem}.graphic-layer-item .layer-main{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:.45rem;border:0;background:transparent;color:inherit;text-align:left;min-width:0}.graphic-layer-item .layer-main>span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-delete{border:0;background:transparent;color:#94a3b8;border-radius:6px;height:28px}.layer-delete:hover{background:rgba(244,63,94,.15);color:#fda4af}
.graphic-inline-editor{position:fixed;z-index:10050;background:#0f172a;border:1px solid #38bdf8;border-radius:12px;padding:.5rem;box-shadow:0 20px 60px rgba(2,6,23,.42)}.graphic-inline-editor textarea{display:block;width:100%;min-height:110px;resize:both;background:#fff;color:#0f172a;border:0;border-radius:7px;padding:.65rem;line-height:1.35;outline:0}.graphic-inline-editor>div{display:flex;justify-content:flex-end;gap:.4rem;margin-top:.45rem}.graphic-inline-editor button{border:1px solid #334155;background:#172033;color:#fff;border-radius:7px;padding:.38rem .7rem}.graphic-inline-editor [data-inline-save]{background:#2563eb;border-color:#2563eb}
.graphic-modal-backdrop{position:fixed;inset:0;z-index:11000;display:grid;place-items:center;padding:1rem;background:rgba(2,6,23,.64);backdrop-filter:blur(4px)}.graphic-modal-backdrop[hidden]{display:none}.graphic-modal-card{width:min(430px,100%);background:#fff;color:#0f172a;border-radius:18px;padding:1.25rem;box-shadow:0 25px 80px rgba(2,6,23,.35)}.graphic-modal-card h3{font-size:1.1rem;font-weight:800}.graphic-modal-card p{color:#64748b;line-height:1.55}.graphic-modal-actions{display:flex;justify-content:flex-end;gap:.55rem;margin-top:1rem}
.graphic-toast-stack{position:fixed;right:1rem;bottom:1rem;z-index:12000;display:grid;gap:.5rem;max-width:min(390px,calc(100vw - 2rem))}.graphic-toast{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:#0f172a;color:#fff;border:1px solid #334155;border-radius:12px;padding:.72rem .85rem;box-shadow:0 14px 40px rgba(2,6,23,.3);font-size:.82rem}.graphic-toast.success{border-color:#22c55e}.graphic-toast.error{border-color:#f43f5e}.graphic-toast.warning{border-color:#f59e0b}.graphic-toast button{border:0;background:transparent;color:#7dd3fc;font-weight:800}
.graphic-presentation{position:fixed;inset:0;z-index:13000;background:#020617;display:grid;grid-template-rows:minmax(0,1fr) auto}.graphic-presentation[hidden]{display:none}.graphic-presentation-stage{display:grid;place-items:center;overflow:hidden;padding:1rem}.graphic-presentation-stage canvas{display:block;max-width:100%;max-height:calc(100vh - 82px);width:auto;height:auto;box-shadow:0 20px 80px rgba(0,0,0,.5);animation:graphicFade .45s ease}.graphic-presentation-controls{display:flex;justify-content:center;align-items:center;gap:.6rem;padding:.7rem;background:rgba(15,23,42,.96);color:#fff}.graphic-presentation-controls button{width:38px;height:38px;border:1px solid #334155;background:#172033;color:#fff;border-radius:50%}.graphic-presentation-controls span{min-width:75px;text-align:center}.graphic-presenting{overflow:hidden}
.graphic-canvas-wrap.slide-transition-active[data-transition="fade"]{animation:graphicFade .45s ease}.graphic-canvas-wrap.slide-transition-active[data-transition="slide-left"]{animation:graphicSlideLeft .45s ease}.graphic-canvas-wrap.slide-transition-active[data-transition="slide-right"]{animation:graphicSlideRight .45s ease}.graphic-canvas-wrap.slide-transition-active[data-transition="zoom"]{animation:graphicZoom .45s ease}
@keyframes graphicFade{from{opacity:.15}to{opacity:1}}@keyframes graphicSlideLeft{from{opacity:.2;transform:translateX(40px)}to{opacity:1;transform:none}}@keyframes graphicSlideRight{from{opacity:.2;transform:translateX(-40px)}to{opacity:1;transform:none}}@keyframes graphicZoom{from{opacity:.2;transform:scale(.88)}to{opacity:1;transform:none}}
@media(max-width:760px){.graphic-inline-editor{left:1rem!important;right:1rem!important;top:auto!important;bottom:1rem!important;width:auto!important}.graphic-slides-list{max-height:none}.graphic-presentation-stage{padding:.4rem}.graphic-toast-stack{left:1rem;right:1rem}.graphic-tabs{grid-template-columns:repeat(3,1fr)}}
/* Photo Studio simplified workflow */
.ps-repairbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.65rem .8rem;background:#0f2747;color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.ps-repairbar>div{margin-right:auto;display:flex;flex-direction:column}.ps-repairbar span{font-size:.72rem;color:#cbd5e1}.ps-repairbar button,.ps-repairbar label{border:1px solid #36506f;background:#13243d;color:#fff;border-radius:.55rem;padding:.48rem .7rem;font-size:.78rem}.ps-repairbar button.active{background:#dc2626;border-color:#dc2626}.ps-repairbar .ps-primary{background:#16a34a;border-color:#16a34a}.ps-repairbar input{width:100px;vertical-align:middle}.ps-inline-notice{position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:9999;padding:.7rem 1rem;border-radius:.75rem;background:#0f172a;color:#fff;box-shadow:0 14px 35px rgba(0,0,0,.25);font-weight:700}.ps-inline-notice.success{background:#166534}.ps-inline-notice.warning{background:#92400e}
.ps-easy-mode .ps-menubar button[data-menu],.ps-easy-mode #psCanvasSetup,.ps-easy-mode #psProjects,.ps-easy-mode #psSubmit,.ps-easy-mode #psQuickNewLayer{display:none!important}.ps-easy-mode .ps-tools button:not([data-tool="move"]):not([data-tool="maskBrush"]):not([data-tool="hand"]):not([data-tool="zoom"]){display:none}.ps-easy-mode .ps-tabs button:not([data-panel="background"]):not([data-panel="adjust"]):not([data-panel="layers"]){display:none}.ps-easy-mode .ps-panel-actions button:not(#psAddImage):not(#psDelete):not(#psDuplicate):not(#psToggleLayer){display:none}.ps-easy-mode .ps-options label:nth-of-type(n+2),.ps-easy-mode #psFg,.ps-easy-mode #psBg{display:none}.ps-easy-mode .ps-menubar{gap:.45rem}.ps-easy-mode .ps-menubar #psTitle{margin-left:0}.ps-easy-mode .ps-quickbar{background:#102a43}.ps-easy-mode .ps-quickbar button{font-weight:800}
@media(max-width:900px){.ps-repairbar{position:sticky;bottom:0;z-index:15}.ps-repairbar>div{width:100%}.ps-repairbar button{flex:1}.ps-easy-mode .ps-panels{width:250px}}