/* =========================================================
   Skooltime Premium UI System - Full Build 13
   A true SaaS-grade interface layer for public pages,
   authenticated app workspace, sidebar, cards, tables,
   forms, report cards, dashboards and portals.
   ========================================================= */

:root{
  --bg:#f6f8ff;
  --bg-2:#eef4ff;
  --ink:#0b1220;
  --text:#132033;
  --muted:#68758a;
  --soft:#f8fbff;
  --line:#dfe7f3;
  --line-strong:#cbd8ea;
  --panel:#ffffff;
  --panel-2:#fbfdff;
  --brand:#2563eb;
  --brand-2:#7c3aed;
  --brand-3:#06b6d4;
  --accent:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --purple:#7c3aed;
  --navy:#071429;
  --navy-2:#101c33;
  --sidebar:#071225;
  --sidebar-2:#101b35;
  --shadow-sm:0 8px 20px rgba(15, 23, 42, .08);
  --shadow:0 20px 55px rgba(15, 23, 42, .12);
  --shadow-lg:0 32px 90px rgba(15, 23, 42, .18);
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:28px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 5%, rgba(37,99,235,.20), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(124,58,237,.17), transparent 28%),
    radial-gradient(circle at 80% 80%, rgba(6,182,212,.13), transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#f3f7ff 42%,#f7fafc 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 72%);
}

body::after{
  content:"";
  position:fixed;
  width:560px;height:560px;
  right:-260px;top:140px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(37,99,235,.16), rgba(16,185,129,.08));
  filter:blur(4px);
  z-index:-1;
}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:none;color:#1d4ed8}
img{max-width:100%}
button,input,select,textarea{font:inherit}

/* App frame */
.app-shell{min-height:100vh}
.container{width:min(1240px, calc(100% - 40px));margin:0 auto;padding:28px 0}
.public-main{min-height:calc(100vh - 84px)}
.workspace-main{padding:28px}
.content-shell{min-width:0;min-height:100vh;background:rgba(246,248,255,.68)}
.auth-layout{display:grid;grid-template-columns:292px minmax(0,1fr);min-height:100vh}

/* Top navigation */
.top-nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(223,231,243,.9);
  backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 12px 28px rgba(15,23,42,.055);
}
.nav-inner{
  width:min(1240px, calc(100% - 40px));
  min-height:76px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  font-size:22px;
  font-weight:950;
  letter-spacing:-.04em;
}
.logo:hover{color:var(--ink)}
.logo img{
  width:46px;height:46px;
  object-fit:contain;
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 30px rgba(37,99,235,.18);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.nav-links a{
  color:#344155;
  font-weight:800;
  font-size:14px;
  padding:10px 12px;
  border-radius:999px;
  transition:.2s var(--ease);
}
.nav-links a:hover{
  color:var(--brand);
  background:rgba(37,99,235,.08);
}
.inline-form{display:inline-block;margin:0}
.sidebar-toggle{
  border:0;
  background:#fff;
  color:var(--ink);
  border-radius:14px;
  width:44px;height:44px;
  font-size:20px;
  display:none;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}

/* Premium sidebar */
.sidebar-backdrop{display:none}
.app-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  padding:18px 16px;
  background:
    radial-gradient(circle at 20% 0, rgba(37,99,235,.36), transparent 32%),
    radial-gradient(circle at 100% 18%, rgba(124,58,237,.30), transparent 26%),
    linear-gradient(180deg, var(--sidebar), #08101f 60%, #060b16);
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:28px 0 70px rgba(7,18,37,.18);
}
.app-sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(130deg, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:auto, 38px 38px;
  opacity:.72;
}
.app-sidebar > *{position:relative;z-index:1}
.side-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px 18px;
  color:#fff;
}
.side-brand img{
  width:42px;height:42px;
  border-radius:15px;
  background:#fff;
  box-shadow:0 16px 38px rgba(0,0,0,.22);
}
.side-brand strong{display:block;font-size:20px;letter-spacing:-.04em}
.side-brand small{color:#aebbd4;font-weight:700}
.user-box{
  margin:8px 2px 20px;
  padding:16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.06));
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.user-box strong{font-size:15px}
.user-box small{display:block;margin-top:3px;color:#aebbd4;word-break:break-all}
.side-section{
  margin:18px 12px 9px;
  color:#7f8ca8;
  font-size:11px;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.side-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  margin:4px 0;
  border-radius:16px;
  color:#cbd6ec;
  font-weight:800;
  position:relative;
  transition:.22s var(--ease);
}
.side-link:hover{
  color:#fff;
  background:rgba(255,255,255,.09);
  transform:translateX(3px);
}
.side-link.active{
  color:#fff;
  background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(124,58,237,.88));
  box-shadow:0 16px 34px rgba(37,99,235,.22);
}
.side-icon{
  width:34px;height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:rgba(255,255,255,.10);
  color:#fff;
  flex:0 0 auto;
}
.side-link.active .side-icon{background:rgba(255,255,255,.18)}

/* Workspace bar */
.workspace-bar{
  position:sticky;
  top:0;
  z-index:45;
  min-height:76px;
  padding:14px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(223,231,243,.9);
  backdrop-filter:blur(18px) saturate(180%);
}
.workspace-title strong{
  display:block;
  font-size:18px;
  letter-spacing:-.02em;
  color:var(--ink);
}
.workspace-title small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-weight:700;
}
.workspace-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-pill{
  min-width:260px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#8090a7;
  background:#fff;
  font-weight:700;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}

/* Typography */
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.035em}
h1{font-size:clamp(34px,4.6vw,64px);line-height:.98;margin:0 0 16px;font-weight:950}
h2{font-size:clamp(26px,2.8vw,38px);line-height:1.05}
h3{font-size:20px}
p{line-height:1.7}
.muted{color:var(--muted)}
.gradient-text{
  background:linear-gradient(115deg,#06152f 0%,#1d4ed8 38%,#7c3aed 72%,#06b6d4 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.kicker,.badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
  color:#1d4ed8;
  background:#eaf1ff;
  border:1px solid #cfe0ff;
}
.badge.green{color:#047857;background:#ecfdf5;border-color:#b7f4d7}
.badge.yellow{color:#92400e;background:#fffbeb;border-color:#fde68a}
.badge.red{color:#991b1b;background:#fef2f2;border-color:#fecaca}
.badge.purple{color:#6d28d9;background:#f3e8ff;border-color:#ddd6fe}
.badge.dark{color:#fff;background:#0f172a;border-color:#334155}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  cursor:pointer;
  min-height:44px;
  padding:12px 18px;
  border-radius:14px;
  font-size:14px;
  font-weight:950;
  color:#fff!important;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  box-shadow:0 16px 34px rgba(37,99,235,.24);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn:hover{transform:translateY(-2px);filter:saturate(1.05);box-shadow:0 22px 48px rgba(37,99,235,.30)}
.btn.secondary{background:#e9eef8;color:#132033!important;box-shadow:none}
.btn.ghost{background:#fff;color:#1d4ed8!important;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.05)}
.btn.green{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 16px 34px rgba(16,185,129,.22)}
.btn.danger{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 16px 34px rgba(239,68,68,.20)}
.btn.small{min-height:36px;padding:8px 12px;border-radius:12px;font-size:12px}

/* Layout helpers */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.stack{display:grid;gap:18px}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.split-header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.section-title{margin-top:0}

/* Cards and surfaces */
.card,.module-tile,.quick-tile,.soft-card,.surface{
  position:relative;
  border:1px solid rgba(223,231,243,.92);
  background:rgba(255,255,255,.90);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card{
  padding:24px;
  backdrop-filter:blur(10px);
}
.card::before,.module-tile::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 34%);
}
.glass-card{
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  backdrop-filter:blur(20px) saturate(160%);
}
.soft-card,.surface{
  padding:18px;
  background:linear-gradient(180deg,#fff,#f8fbff);
}
.quick-tile{
  overflow:hidden;
  padding:30px;
  color:#fff;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.18), transparent 24%),
    radial-gradient(circle at 86% 20%, rgba(6,182,212,.24), transparent 25%),
    linear-gradient(135deg,#06152f 0%,#123a7c 48%,#2e1065 100%);
  box-shadow:var(--shadow-lg);
}
.quick-tile h1,.quick-tile h2,.quick-tile h3{color:#fff}
.quick-tile p,.quick-tile .muted{color:#d5e3ff}
.quick-tile .kicker{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#fff}
.module-card,.module-tile{
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.module-card:hover,.module-tile:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:#c7d8ff;
}
.module-tile{
  padding:24px;
  display:block;
  color:inherit;
  overflow:hidden;
}
.tile-icon,.module-icon{
  width:56px;height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  margin-bottom:14px;
  font-size:26px;
  background:linear-gradient(135deg,#eaf1ff,#f5f3ff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.stat{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:22px;
  border:1px solid rgba(223,231,243,.92);
  background:linear-gradient(180deg,#fff,#f8fbff);
  box-shadow:var(--shadow-sm);
}
.stat::after{
  content:"";
  position:absolute;
  width:90px;height:90px;
  right:-30px;top:-30px;
  border-radius:50%;
  background:rgba(37,99,235,.10);
}
.stat .value{
  font-size:34px;
  font-weight:950;
  letter-spacing:-.05em;
  color:var(--ink);
}
.stat .label,.stat div:last-child{color:var(--muted);font-weight:800}

/* Hero public site */
.hero{
  position:relative;
  padding:72px 0 36px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  width:720px;height:720px;
  left:-390px;top:-260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.22), transparent 65%);
  animation:floaty 8s ease-in-out infinite;
}
.hero::after{
  content:"";
  position:absolute;
  width:520px;height:520px;
  right:-220px;bottom:-160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,.18), transparent 65%);
  animation:floaty 9s ease-in-out infinite reverse;
}
.hero .container{position:relative;z-index:1}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  gap:28px;
  align-items:center;
}
.hero-panel{
  min-height:610px;
  padding:44px;
  border-radius:34px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.70)),
    radial-gradient(circle at 0 0,rgba(37,99,235,.12),transparent 35%);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.hero-panel h1{font-size:clamp(42px,6vw,78px)}
.hero-panel p{font-size:18px;color:#526176;max-width:720px}
.hero-proof{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:24px 0;
}
.proof-pill{
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  color:#334155;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}
.hero-visual{
  position:relative;
  min-height:610px;
  padding:22px;
  border-radius:34px;
  background:
    linear-gradient(135deg,rgba(7,20,41,.94),rgba(24,32,72,.92)),
    radial-gradient(circle at 15% 0,rgba(37,99,235,.52),transparent 32%);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:conic-gradient(from 120deg, transparent, rgba(37,99,235,.24), transparent, rgba(6,182,212,.20), transparent);
  animation:spinSlow 15s linear infinite;
}
.mock-dashboard{
  position:relative;
  z-index:1;
  border-radius:26px;
  background:rgba(255,255,255,.92);
  padding:18px;
  box-shadow:0 26px 70px rgba(0,0,0,.30);
  transform:rotate(-2deg);
  animation:floatCard 6s ease-in-out infinite;
}
.mock-top{
  display:flex;
  gap:6px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.dot{width:10px;height:10px;border-radius:50%;background:#ef4444}.dot:nth-child(2){background:#f59e0b}.dot:nth-child(3){background:#10b981}
.mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.mock-metric{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#f8fbff);
  border:1px solid var(--line);
}
.mock-metric strong{display:block;font-size:26px;color:var(--ink)}
.mock-bar{height:10px;border-radius:999px;background:#e2e8f0;overflow:hidden;margin-top:8px}
.mock-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#7c3aed)}
.mock-list{display:grid;gap:10px;margin-top:14px}
.mock-row{height:44px;border-radius:16px;background:#f8fafc;border:1px solid var(--line);display:flex;align-items:center;padding:0 14px;gap:10px}
.mock-avatar{width:26px;height:26px;border-radius:10px;background:linear-gradient(135deg,#2563eb,#06b6d4)}

/* Forms */
.form-group{margin-bottom:16px}
label{
  display:block;
  margin-bottom:7px;
  color:#314158;
  font-size:13px;
  font-weight:950;
}
input,select,textarea{
  width:100%;
  border:1px solid #cfdaea;
  background:#fff;
  border-radius:14px;
  padding:12px 13px;
  font-size:15px;
  color:var(--text);
  outline:none;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
input:hover,select:hover,textarea:hover{border-color:#afc1db}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(37,99,235,.13);
}
textarea{resize:vertical}
input.score-input{width:86px;text-align:center;padding:9px}

/* Tables */
.table-wrap{overflow-x:auto}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 26px rgba(15,23,42,.045);
}
.table th,.table td{
  text-align:left;
  padding:13px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.table th{
  color:#42526a;
  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;
  background:#f7faff;
}
.table tbody tr{transition:background .15s ease}
.table tbody tr:hover{background:#f8fbff}
.table tr:last-child td{border-bottom:0}
.broadsheet-table th,.broadsheet-table td{font-size:13px;white-space:nowrap}

/* Alerts */
.alert{
  padding:13px 15px;
  border-radius:16px;
  margin-bottom:16px;
  font-weight:800;
}
.alert.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.alert.success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.alert.info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}

/* Utilities / module specifics */
.feature-list{display:grid;gap:13px;margin-top:20px}
.feature-item{display:flex;gap:12px;align-items:flex-start}
.feature-dot{
  width:34px;height:34px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:#1d4ed8;
  background:#eaf1ff;
  font-weight:950;
}
.quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.portal-hero{min-height:calc(100vh - 84px);display:grid;align-items:center}
.portal-card{max-width:620px;margin:0 auto}
.login-shell,.register-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.72fr);
  gap:28px;
  align-items:center;
  min-height:calc(100vh - 160px);
}
.auth-copy{
  padding:38px;
  border-radius:34px;
  color:#fff;
  background:
    radial-gradient(circle at 15% 10%,rgba(255,255,255,.18),transparent 24%),
    radial-gradient(circle at 85% 20%,rgba(6,182,212,.24),transparent 28%),
    linear-gradient(135deg,#06152f,#173f88 55%,#2e1065);
  box-shadow:var(--shadow-lg);
}
.auth-copy h1{color:#fff}
.auth-copy p,.auth-copy .muted{color:#d8e5ff}
.auth-form-card{padding:30px;border-radius:30px}
.pin-box{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  color:#dbeafe;
  background:#0f172a;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-weight:900;
}
.report-card{max-width:960px;margin:0 auto;background:#fff}
.report-card h1,.report-card h2{text-align:center}
.report-line{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:8px 0}
.ajax-status{position:fixed;right:20px;bottom:20px;z-index:9999;max-width:360px;display:none;box-shadow:var(--shadow)}
.ajax-status.show{display:block;animation:toastIn .24s var(--ease)}
.score-cell{white-space:nowrap}
.score-save-state{font-size:12px;color:var(--muted);margin-left:6px;font-weight:800}
.score-save-state.saved{color:#047857}
.score-save-state.error{color:#991b1b}
.radio-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.radio-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:800}
.radio-pill input{width:auto;margin:0}

/* Sidebars used inside existing super admin pages */
.sidebar-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px}
.sidebar-layout .sidebar{
  position:sticky;
  top:96px;
  align-self:start;
  padding:18px;
}
.sidebar-layout .side-link{
  color:#334155;
  background:#f8fafc;
}
.sidebar-layout .side-link.active{
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
}

/* Footers */
.page-footer{
  margin:0 28px 28px;
  padding:18px 22px;
  color:#6b7890;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-sm);
}
.public-footer{
  margin-top:70px;
  padding:56px 0 28px;
  color:#cbd5e1;
  background:
    radial-gradient(circle at 16% 0, rgba(37,99,235,.28), transparent 26%),
    linear-gradient(135deg,#06152f,#08101f 65%,#120a2a);
}
.public-footer h3{color:#fff}
.public-footer a{color:#dbeafe;font-weight:800}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin-top:24px}

/* Animations */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .68s var(--ease), transform .68s var(--ease)}
.reveal.in-view{opacity:1;transform:translateY(0)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(22px)}}
@keyframes floatCard{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-12px)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}

/* Print */
.print-only{display:none}
@media print{
  body{background:#fff!important}
  body::before,body::after,.top-nav,.app-sidebar,.workspace-bar,.page-footer,.public-footer,.btn,.no-print{display:none!important}
  .auth-layout{display:block}
  .content-shell,.workspace-main,.container{padding:0!important;width:100%!important}
  .card{box-shadow:none!important;border:0!important}
  .print-only{display:block}
}

/* Responsive */
@media(max-width:1100px){
  .auth-layout{grid-template-columns:1fr}
  .app-sidebar{
    position:fixed;
    left:-310px;
    top:0;
    width:292px;
    z-index:100;
    transition:left .24s var(--ease);
  }
  body.sidebar-open .app-sidebar{left:0}
  .sidebar-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:90;
    background:rgba(2,6,23,.48);
    backdrop-filter:blur(3px);
  }
  body.sidebar-open .sidebar-backdrop{display:block}
  .sidebar-toggle{display:inline-flex;align-items:center;justify-content:center}
  .workspace-bar{top:76px}
  .login-shell,.register-shell,.hero-grid{grid-template-columns:1fr}
  .hero-visual{min-height:520px}
}
@media(max-width:820px){
  .container{width:min(100% - 28px,1240px);padding:20px 0}
  .workspace-main{padding:18px}
  .workspace-bar{align-items:flex-start;flex-direction:column}
  .search-pill{min-width:0;width:100%}
  .nav-inner{width:min(100% - 28px,1240px);min-height:auto;padding:12px 0;align-items:flex-start;flex-direction:column}
  .nav-links{width:100%}
  .grid,.grid-2,.grid-3,.grid-5,.quick-actions,.sidebar-layout{grid-template-columns:1fr}
  .split-header{align-items:flex-start;flex-direction:column}
  .hero{padding-top:34px}
  .hero-panel,.auth-copy{padding:26px;border-radius:26px}
  .hero-visual{min-height:420px}
}


/* =========================================================
   Full Build 14 - Dynamic UI + Report Card Designer
   ========================================================= */
:root{--motion-fast:180ms;--motion-med:420ms;--motion-slow:900ms}
body::before{content:"";position:fixed;inset:-20%;z-index:-3;background:
 radial-gradient(circle at 8% 14%,rgba(37,99,235,.22),transparent 28%),
 radial-gradient(circle at 88% 8%,rgba(124,58,237,.20),transparent 30%),
 radial-gradient(circle at 72% 92%,rgba(16,185,129,.16),transparent 34%);
 animation:auroraDrift 18s ease-in-out infinite alternate}
@keyframes auroraDrift{0%{transform:translate3d(-1%,0,0) rotate(0deg)}100%{transform:translate3d(1.5%,1%,0) rotate(2deg)}}
.premium-hero,.hero{position:relative;overflow:hidden}.hero::after{content:"";position:absolute;right:6%;top:12%;width:240px;height:240px;border-radius:50%;background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(6,182,212,.1));filter:blur(2px);animation:floatOrb 7s ease-in-out infinite;z-index:-1}
@keyframes floatOrb{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.04)}}
.card,.module-card,.stat,.portal-card{animation:revealUp .55s var(--ease) both}.grid>.card:nth-child(2),.grid-2>.card:nth-child(2),.grid-3>.card:nth-child(2){animation-delay:.06s}.grid>.card:nth-child(3),.grid-3>.card:nth-child(3){animation-delay:.12s}
@keyframes revealUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.btn{position:relative;overflow:hidden;transition:transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease}.btn::after{content:"";position:absolute;inset:-50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform:translateX(-70%) rotate(18deg);transition:transform .65s ease}.btn:hover::after{transform:translateX(70%) rotate(18deg)}
.nav{box-shadow:0 10px 35px rgba(15,23,42,.06)}.side-link{transition:transform .18s ease,background .18s ease,border-color .18s ease}.side-link:hover{transform:translateX(4px)}.app-sidebar::after{content:"";position:absolute;inset:auto -90px 8% auto;width:200px;height:200px;background:rgba(37,99,235,.28);filter:blur(60px);border-radius:50%;pointer-events:none}.table tbody tr{transition:background .18s ease,transform .18s ease}.table tbody tr:hover{transform:scale(1.002)}
.sk-progress{height:9px;background:#e2e8f0;border-radius:999px;overflow:hidden}.sk-progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--accent));border-radius:999px;animation:progressGrow .7s ease both}@keyframes progressGrow{from{width:0}}
.report-designer-grid{display:grid;grid-template-columns:380px 1fr;gap:20px;align-items:start}.designer-panel{position:sticky;top:92px}.color-dot{width:32px;height:32px;border-radius:999px;border:3px solid #fff;box-shadow:0 6px 16px rgba(15,23,42,.18);display:inline-block}.report-template-card{border:2px solid var(--line);border-radius:20px;padding:16px;background:#fff;cursor:pointer;transition:.2s ease}.report-template-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.result-dossier{--rc-primary:#1d4ed8;--rc-secondary:#0f766e;--rc-accent:#f59e0b;background:#fff;color:#111827;border:1px solid #dbe3ef;border-radius:26px;overflow:hidden;box-shadow:0 28px 90px rgba(15,23,42,.16)}
.result-dossier.watermark::before{content:"SKOOLTIME";position:absolute;inset:auto 0 38% 0;text-align:center;font-size:82px;font-weight:900;color:rgba(15,23,42,.035);transform:rotate(-18deg);pointer-events:none}
.dossier-wrap{position:relative}.dossier-header{display:grid;grid-template-columns:110px 1fr 160px;gap:18px;align-items:center;padding:26px;color:#fff;background:
 linear-gradient(135deg,var(--rc-primary),var(--rc-secondary));position:relative;overflow:hidden}.dossier-header::after{content:"";position:absolute;right:-40px;top:-50px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.16)}.dossier-logo{width:96px;height:96px;object-fit:contain;background:#fff;border-radius:22px;padding:10px;box-shadow:0 18px 38px rgba(0,0,0,.16)}.dossier-title h1{margin:0;font-size:30px;letter-spacing:-.02em}.dossier-title p{margin:6px 0 0;opacity:.92}.dossier-badge{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:18px;padding:12px;text-align:center;font-weight:800}.dossier-body{padding:24px}.dossier-section{border:1px solid #e2e8f0;border-radius:18px;background:#fff;margin-bottom:18px;overflow:hidden}.dossier-section-title{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:13px 16px;font-weight:900;color:#0f172a}.dossier-section-body{padding:16px}.dossier-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.dossier-meta-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:11px}.dossier-meta-item span{display:block;font-size:12px;color:#64748b;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.dossier-meta-item strong{display:block;margin-top:3px}.result-table{width:100%;border-collapse:collapse}.result-table th,.result-table td{border:1px solid #dbe3ef;padding:9px;text-align:center}.result-table th{background:linear-gradient(180deg,#f8fafc,#eef4ff);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#334155}.result-table td:first-child,.result-table th:first-child{text-align:left}.grade-pill{display:inline-block;border-radius:999px;padding:4px 9px;background:var(--rc-primary);color:#fff;font-weight:900}.dossier-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.dossier-stat{background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid #e2e8f0;border-radius:16px;padding:13px;text-align:center}.dossier-stat strong{display:block;font-size:24px}.rating-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.rating-item{display:flex;justify-content:space-between;gap:12px;border:1px solid #e2e8f0;border-radius:14px;padding:10px;background:#f8fafc}.signature-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}.signature-box{min-height:90px;border-top:2px solid #94a3b8;padding-top:8px;text-align:center}.signature-img{max-width:140px;max-height:58px;object-fit:contain;display:block;margin:0 auto 6px}.dossier-footer{padding:14px 24px;background:#0f172a;color:#cbd5e1;text-align:center;font-size:13px}.template-classic .dossier-header{background:linear-gradient(135deg,var(--rc-primary),#0f172a)}.template-modern .dossier-header{background:linear-gradient(135deg,var(--rc-primary),var(--rc-secondary),var(--rc-accent))}.template-ministry .dossier-header{background:#fff;color:#0f172a;border-bottom:6px solid var(--rc-primary)}.template-ministry .dossier-badge{background:#f8fafc;border-color:#e2e8f0}
@media(max-width:1050px){.report-designer-grid{grid-template-columns:1fr}.designer-panel{position:static}.dossier-header,.dossier-meta,.dossier-stats,.signature-row{grid-template-columns:1fr}.rating-grid{grid-template-columns:1fr}}
@media print{body::before,.hero::after{display:none}.result-dossier{box-shadow:none;border:0;border-radius:0}.dossier-body{padding:12px}.dossier-section{break-inside:avoid}.result-table th,.result-table td{padding:6px;font-size:11px}}


/* =========================================================
   Full Build 16 - Executive UI Motion Layer
   Adds dynamic SaaS polish: cursor glow, animated hero,
   premium footer, license command table, richer CTAs.
   ========================================================= */
body::before{
  content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 18% 12%, rgba(37,99,235,.22), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(124,58,237,.18), transparent 26%),
    radial-gradient(circle at 50% 86%, rgba(16,185,129,.14), transparent 32%);
  animation:skAurora 18s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(to bottom, #000, transparent 86%);
}
@keyframes skAurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,1%,0) scale(1.05)}100%{transform:translate3d(2%,-1%,0) scale(1.02)}}
.cursor-glow{position:fixed;width:420px;height:420px;border-radius:999px;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(37,99,235,.16),rgba(124,58,237,.08) 35%,transparent 70%);filter:blur(10px);transform:translate(-50%,-50%);opacity:0;transition:opacity .3s ease}
body.is-public .cursor-glow,body.is-authenticated .cursor-glow{opacity:1}.top-nav{box-shadow:0 12px 40px rgba(15,23,42,.06)}.top-nav.nav-scrolled{background:rgba(255,255,255,.78);box-shadow:0 18px 55px rgba(15,23,42,.14)}
.logo span{letter-spacing:-.03em}.logo img{animation:skLogoFloat 5s ease-in-out infinite}@keyframes skLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.hero{position:relative;overflow:hidden;padding:96px 0 70px}.hero::before{content:"";position:absolute;right:-170px;top:40px;width:560px;height:560px;border-radius:999px;background:conic-gradient(from 180deg,rgba(37,99,235,.28),rgba(124,58,237,.2),rgba(6,182,212,.22),rgba(37,99,235,.28));filter:blur(25px);opacity:.55;animation:spinSlow 24s linear infinite}@keyframes spinSlow{to{transform:rotate(360deg)}}
.hero-grid{position:relative;z-index:1}.hero-panel{border:1px solid rgba(255,255,255,.7);box-shadow:0 40px 110px rgba(15,23,42,.18);background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(248,251,255,.82));backdrop-filter:blur(24px)}
.gradient-text{background-size:240% 240%;animation:gradientShift 8s ease infinite}@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.btn{position:relative;overflow:hidden;transition:transform .25s var(--ease), box-shadow .25s var(--ease)}.btn::after{content:"";position:absolute;inset:-120% -40%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-120%);transition:transform .65s ease}.btn:hover::after{transform:translateX(120%)}.btn:hover{box-shadow:0 20px 44px rgba(37,99,235,.24)}
.btn-ripple{position:absolute;border-radius:999px;transform:translate(-50%,-50%);background:rgba(255,255,255,.45);pointer-events:none;animation:rippleOut .65s ease forwards}@keyframes rippleOut{from{width:0;height:0;opacity:.8}to{width:320px;height:320px;opacity:0}}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .7s var(--ease)}.reveal.is-visible{opacity:1;transform:none}
.dynamic-section{margin-top:28px}.section-shell{padding:26px;border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(248,251,255,.78));border:1px solid rgba(226,232,240,.85);box-shadow:0 26px 85px rgba(15,23,42,.10)}
.product-showcase{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.showcase-card{position:relative;min-height:190px;overflow:hidden;border-radius:26px;padding:22px;background:linear-gradient(145deg,#071429,#12213c);color:#fff;box-shadow:0 24px 65px rgba(15,23,42,.2)}.showcase-card:nth-child(2){background:linear-gradient(145deg,#1e1b4b,#312e81)}.showcase-card:nth-child(3){background:linear-gradient(145deg,#064e3b,#065f46)}.showcase-card::after{content:"";position:absolute;right:-54px;bottom:-54px;width:160px;height:160px;border-radius:999px;background:rgba(255,255,255,.14)}.showcase-card h3{font-size:23px;margin:0 0 10px}.showcase-card p{color:rgba(255,255,255,.78);line-height:1.65}.showcase-number{font-size:48px;font-weight:950;letter-spacing:-.05em;opacity:.2;position:absolute;right:22px;top:12px}
.portal-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.portal-chip{padding:18px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-sm);transition:.25s var(--ease)}.portal-chip:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.portal-chip strong{display:block;font-size:16px}.portal-chip span{color:var(--muted);font-size:13px}
.app-sidebar{background:
  radial-gradient(circle at 10% 0%,rgba(37,99,235,.32),transparent 28%),
  linear-gradient(180deg,#071225,#0b1529 48%,#050a16)!important;
  box-shadow:22px 0 60px rgba(15,23,42,.22)}
.side-link{position:relative}.side-link::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;background:linear-gradient(var(--brand),var(--brand-2));border-radius:999px;transform:translateY(-50%);transition:.25s var(--ease)}.side-link.active::before,.side-link:hover::before{height:62%}.side-link:hover{transform:translateX(4px)}
.workspace-bar{background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border:1px solid rgba(226,232,240,.8);border-radius:22px;margin:16px 18px 0;padding:14px 18px;box-shadow:0 15px 45px rgba(15,23,42,.08)}
.card,.stat,.quick-tile,.surface,.soft-card{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}.card:hover,.stat:hover,.quick-tile:hover,.surface:hover{transform:translateY(-2px);box-shadow:0 30px 75px rgba(15,23,42,.13)}
.license-toolbar{display:grid;grid-template-columns:1.4fr .8fr .8fr auto;gap:12px;align-items:end}.license-status-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.license-card{position:relative;overflow:hidden}.license-card::after{content:"";position:absolute;right:-45px;top:-45px;width:120px;height:120px;border-radius:999px;background:rgba(37,99,235,.08)}.token-full-list .table td{vertical-align:middle}.token-actions{display:flex;gap:8px;flex-wrap:wrap}.copy-pill{cursor:pointer}.mini-muted{font-size:12px;color:var(--muted)}
.license-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.code-block{display:block;background:#071429;color:#dbeafe;padding:14px;border-radius:16px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.public-footer{position:relative;overflow:hidden;background:linear-gradient(145deg,#050b18,#071429 52%,#101b35);color:#dbeafe;margin-top:60px;padding:64px 0 0}.public-footer::before{content:"";position:absolute;inset:auto -10% -45% -10%;height:380px;background:radial-gradient(circle,rgba(37,99,235,.26),transparent 58%)}.footer-grid{display:grid;grid-template-columns:1.25fr .7fr .7fr .9fr;gap:28px;position:relative;z-index:1}.footer-brand{font-size:30px;font-weight:950;color:#fff;margin:0 0 12px}.footer-title{color:#fff;margin:0 0 14px}.footer-link{display:block;color:#b9c7dc;margin:9px 0;font-weight:650}.footer-link:hover{color:#fff}.footer-cta{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:22px}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:38px;padding:20px 0;color:#9fb0c9;position:relative;z-index:1}.page-footer{margin:22px 18px 0!important;border:1px solid rgba(226,232,240,.85);border-radius:22px;background:rgba(255,255,255,.78);backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(15,23,42,.08)}.page-footer .footer-kpis{display:flex;gap:10px;flex-wrap:wrap}.footer-kpis span{padding:8px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-weight:800;font-size:12px}
.page-loader{position:fixed;inset:0;background:#050b18;z-index:99999;display:grid;place-items:center;color:#fff;transition:opacity .55s ease,visibility .55s ease}.page-loader.done{opacity:0;visibility:hidden}.loader-orb{width:72px;height:72px;border-radius:999px;background:conic-gradient(var(--brand),var(--brand-2),var(--accent),var(--brand));animation:spinSlow 1.2s linear infinite;box-shadow:0 0 50px rgba(37,99,235,.55)}.loader-orb::after{content:"";display:block;width:48px;height:48px;margin:12px;border-radius:999px;background:#050b18}
.toast-stack{position:fixed;right:18px;top:88px;z-index:9000;display:grid;gap:10px}.sk-toast{padding:12px 14px;border-radius:14px;background:#071429;color:#fff;box-shadow:0 22px 60px rgba(15,23,42,.24);animation:toastIn .35s ease}@keyframes toastIn{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:1100px){.product-showcase,.footer-grid,.license-status-grid{grid-template-columns:1fr 1fr}.portal-strip{grid-template-columns:1fr 1fr}.license-toolbar,.license-detail-grid{grid-template-columns:1fr}}
@media(max-width:700px){.product-showcase,.footer-grid,.portal-strip,.license-status-grid{grid-template-columns:1fr}.hero{padding:54px 0 40px}.workspace-bar{margin:10px;border-radius:18px}.cursor-glow{display:none}}

/* ========================================================================
   SKOOLTIME SAAS OS 2.1 - REVOLUTION SHELL
   Tailwind/Preline-ready semantic fallback layer for zero-build hosting.
   ======================================================================== */

:root {
  --sk-bg: #f4f7fb;
  --sk-bg-elevated: #ffffff;
  --sk-bg-soft: #eef3f9;
  --sk-sidebar: #07111f;
  --sk-sidebar-soft: #0d1a2d;
  --sk-text: #111827;
  --sk-muted: #64748b;
  --sk-border: #dfe7f0;
  --sk-border-strong: #cbd7e5;
  --sk-primary: #635bff;
  --sk-primary-strong: #5148e5;
  --sk-cyan: #08a7c7;
  --sk-success: #0f9f6e;
  --sk-warning: #d98b12;
  --sk-danger: #dc3545;
  --sk-shadow-sm: 0 4px 16px rgba(16, 24, 40, .06);
  --sk-shadow: 0 18px 50px rgba(17, 24, 39, .10);
  --sk-shadow-xl: 0 32px 90px rgba(4, 10, 24, .22);
  --sk-radius: 18px;
  --sk-radius-lg: 26px;
  --sk-sidebar-width: 282px;
  --sk-sidebar-mini: 88px;
  --sk-topbar-height: 82px;
}

html.dark {
  --sk-bg: #07101d;
  --sk-bg-elevated: #0e1929;
  --sk-bg-soft: #101d2f;
  --sk-text: #edf3fb;
  --sk-muted: #98a8bd;
  --sk-border: #203047;
  --sk-border-strong: #31445f;
  --panel: #0e1929;
  --panel-2: #101d2f;
  --text: #dbe7f5;
  --ink: #f8fbff;
  --muted: #98a8bd;
  --line: #203047;
  --line-strong: #31445f;
  --bg: #07101d;
  --bg-2: #101d2f;
}

[x-cloak] { display: none !important; }

body.is-authenticated {
  background: var(--sk-bg);
  color: var(--sk-text);
}

body.is-authenticated::before,
body.is-authenticated::after {
  display: none;
}

.sk-app-shell { min-height: 100vh; }
.sk-icon { width: 20px; height: 20px; display: block; }
.sk-auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sk-sidebar-width) minmax(0, 1fr);
  transition: grid-template-columns .28s cubic-bezier(.22,.8,.22,1);
}

.sk-content-shell {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 96% 0%, rgba(99,91,255,.08), transparent 26%),
    var(--sk-bg);
}

.sk-sidebar {
  position: sticky;
  top: 0;
  z-index: 70;
  height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #d7e2f0;
  background:
    radial-gradient(circle at 20% -5%, rgba(99,91,255,.43), transparent 28%),
    radial-gradient(circle at 105% 32%, rgba(8,167,199,.18), transparent 30%),
    linear-gradient(180deg, #091525 0%, #07111f 55%, #050c17 100%);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 14px 0 42px rgba(5,12,23,.10);
}

.sk-sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 100% 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.sk-sidebar > * { position: relative; z-index: 1; }
.sk-sidebar-head {
  height: var(--sk-topbar-height);
  flex: 0 0 var(--sk-topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 17px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sk-sidebar-brand,
.sk-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  min-width: 0;
}
.sk-sidebar-brand:hover { color: #fff; }
.sk-sidebar-logo,
.sk-wordmark-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.sk-sidebar-logo img,
.sk-wordmark-mark img { width: 100%; height: 100%; object-fit: contain; }
.sk-sidebar-brand-copy,
.sk-wordmark > span:last-child { min-width: 0; display: grid; line-height: 1.08; }
.sk-sidebar-brand-copy strong,
.sk-wordmark strong { font-size: 19px; letter-spacing: -.04em; color: #fff; }
.sk-sidebar-brand-copy small { margin-top: 5px; color: #8293ac; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.sk-collapse-button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #a8b7ca;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: .2s ease;
}
.sk-collapse-button:hover { color: #fff; background: rgba(255,255,255,.12); }
.sk-collapse-button .sk-icon { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .25s ease; }

.sk-sidebar-scroll {
  min-height: 0;
  flex: 1 1 auto;
  padding: 16px 13px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
}

.sk-workspace-card {
  min-height: 65px;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.sk-workspace-avatar,
.sk-profile-avatar {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  background: linear-gradient(135deg, #635bff, #08a7c7);
  box-shadow: 0 8px 22px rgba(99,91,255,.28);
}
.sk-workspace-copy { min-width: 0; flex: 1; display: grid; }
.sk-workspace-copy strong { color: #f7faff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-workspace-copy small { color: #91a1b7; font-size: 11px; margin-top: 3px; }
.sk-live-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #22c98b; box-shadow: 0 0 0 5px rgba(34,201,139,.10); }

.sk-nav-section {
  height: 28px;
  display: flex;
  align-items: flex-end;
  padding: 0 11px 5px;
  margin-top: 15px;
  color: #62728b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.sk-nav-link {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 3px 0;
  padding: 6px 10px;
  border-radius: 13px;
  color: #aebdd0;
  font-size: 13.5px;
  font-weight: 760;
  white-space: nowrap;
  position: relative;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.sk-nav-link:hover { color: #fff; background: rgba(255,255,255,.075); transform: translateX(2px); }
.sk-nav-link.is-active { color: #fff; background: linear-gradient(110deg, rgba(99,91,255,.95), rgba(76,75,205,.74)); box-shadow: 0 10px 25px rgba(49,45,160,.23); }
.sk-nav-link.is-active::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #7de2f0;
  box-shadow: 0 0 13px rgba(125,226,240,.7);
}
.sk-nav-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #99abc1;
  background: rgba(255,255,255,.055);
}
.sk-nav-icon .sk-icon { width: 17px; height: 17px; }
.sk-nav-link:hover .sk-nav-icon,
.sk-nav-link.is-active .sk-nav-icon { color: #fff; background: rgba(255,255,255,.13); }
.sk-nav-label { overflow: hidden; text-overflow: ellipsis; }
.sk-nav-hint { margin-left: auto; padding: 3px 7px; border-radius: 999px; color: #9fc5ff; background: rgba(99,91,255,.15); font-size: 9px; }

.sk-sidebar-foot { flex: 0 0 auto; padding: 12px 13px 15px; border-top: 1px solid rgba(255,255,255,.07); }
.sk-security-chip { min-height: 54px; display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 15px; color: #9eafc4; background: rgba(255,255,255,.045); }
.sk-security-chip > span:first-child { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 10px; color: #93e8f2; background: rgba(8,167,199,.12); }
.sk-security-chip .sk-icon { width: 17px; height: 17px; }
.sk-security-chip strong { display: block; color: #dce6f3; font-size: 11px; }
.sk-security-chip small { display: block; margin-top: 2px; color: #71839c; font-size: 9px; }

.sk-topbar {
  min-height: var(--sk-topbar-height);
  position: sticky;
  top: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 27px;
  border-bottom: 1px solid color-mix(in srgb, var(--sk-border) 80%, transparent);
  background: color-mix(in srgb, var(--sk-bg-elevated) 88%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
}
.sk-topbar-left,
.sk-topbar-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sk-page-heading { min-width: 0; }
.sk-breadcrumb { display: flex; align-items: center; gap: 6px; color: var(--sk-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.sk-breadcrumb b { color: var(--sk-border-strong); }
.sk-page-heading h1 { margin: 3px 0 0; color: var(--sk-text); font-size: clamp(19px, 2vw, 24px); line-height: 1.15; letter-spacing: -.035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sk-icon-button {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--sk-border);
  border-radius: 13px;
  color: var(--sk-muted);
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-sm);
  cursor: pointer;
  transition: .18s ease;
}
.sk-icon-button:hover { color: var(--sk-primary); border-color: color-mix(in srgb, var(--sk-primary) 34%, var(--sk-border)); transform: translateY(-1px); }
.sk-icon-button .sk-icon { width: 19px; height: 19px; }
.sk-accent-button { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--sk-primary), #8078ff); box-shadow: 0 10px 24px rgba(99,91,255,.25); }
.sk-accent-button:hover { color: #fff; }
.sk-mobile-toggle { display: none; }

.sk-command-trigger {
  min-width: 258px;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border: 1px solid var(--sk-border);
  border-radius: 13px;
  color: var(--sk-muted);
  background: var(--sk-bg-soft);
  cursor: pointer;
  transition: .18s ease;
}
.sk-command-trigger:hover { border-color: color-mix(in srgb, var(--sk-primary) 35%, var(--sk-border)); background: var(--sk-bg-elevated); box-shadow: var(--sk-shadow-sm); }
.sk-command-trigger .sk-icon { width: 17px; height: 17px; }
.sk-command-trigger span { flex: 1; text-align: left; font-size: 12px; font-weight: 700; }
kbd { min-width: 22px; padding: 3px 6px; display: inline-grid; place-items: center; border: 1px solid var(--sk-border-strong); border-bottom-width: 2px; border-radius: 6px; color: var(--sk-muted); background: var(--sk-bg-elevated); font: 800 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: 0 1px 1px rgba(15,23,42,.04); }

.sk-profile-trigger {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 4px 4px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: var(--sk-text);
  background: transparent;
  cursor: pointer;
}
.sk-profile-trigger:hover { border-color: var(--sk-border); background: var(--sk-bg-elevated); }
.sk-profile-copy { min-width: 0; display: grid; text-align: left; }
.sk-profile-copy strong { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.sk-profile-copy small { color: var(--sk-muted); font-size: 10px; margin-top: 2px; }
.sk-profile-chevron { color: var(--sk-muted); font-size: 13px; }
.sk-dropdown { position: relative; }
.sk-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 90;
  width: 290px;
  padding: 8px;
  border: 1px solid var(--sk-border);
  border-radius: 18px;
  color: var(--sk-text);
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-xl);
}
.sk-dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 8px; border-bottom: 1px solid var(--sk-border); }
.sk-dropdown-head strong { font-size: 13px; }
.sk-dropdown-head span { color: var(--sk-muted); font-size: 10px; }
.sk-dropdown-link {
  min-height: 49px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 9px;
  margin-top: 3px;
  border-radius: 12px;
  color: var(--sk-text);
}
.sk-dropdown-link:hover { color: var(--sk-primary); background: var(--sk-bg-soft); }
.sk-dropdown-link > .sk-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.sk-dropdown-link > span:last-child { min-width: 0; display: grid; }
.sk-dropdown-link strong { font-size: 12px; }
.sk-dropdown-link small { margin-top: 2px; color: var(--sk-muted); font-size: 10px; }
.sk-mini-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 10px; color: var(--sk-primary); background: color-mix(in srgb, var(--sk-primary) 10%, transparent); font-size: 14px; font-weight: 900; }
.sk-profile-menu { width: 310px; }
.sk-profile-summary { display: flex; align-items: center; gap: 11px; padding: 10px; margin-bottom: 5px; border-bottom: 1px solid var(--sk-border); }
.sk-profile-avatar.large { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; }
.sk-profile-summary > div { min-width: 0; display: grid; }
.sk-profile-summary strong { font-size: 13px; }
.sk-profile-summary small { max-width: 205px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sk-muted); font-size: 10px; margin-top: 3px; }
.sk-logout-form { margin: 5px 0 0; padding-top: 5px; border-top: 1px solid var(--sk-border); }
.sk-logout-form button { width: 100%; min-height: 43px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 11px; color: var(--sk-danger); background: transparent; font-weight: 800; cursor: pointer; }
.sk-logout-form button:hover { background: color-mix(in srgb, var(--sk-danger) 8%, transparent); }
.sk-logout-form .sk-icon { width: 18px; height: 18px; }

.workspace-main {
  width: 100%;
  max-width: 1640px;
  flex: 1 1 auto;
  margin: 0 auto;
  padding: 25px 27px 38px;
}
.workspace-main > .container { width: 100%; max-width: none; padding: 0; }
.sk-app-footer { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 12px 26px; border-top: 1px solid var(--sk-border); color: var(--sk-muted); background: var(--sk-bg-elevated); font-size: 10px; }
.sk-app-footer a { color: var(--sk-muted); font-weight: 800; }
.sk-app-footer a:hover { color: var(--sk-primary); }
.sk-footer-status { display: inline-flex; align-items: center; gap: 7px; }
.sk-footer-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--sk-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-success) 12%, transparent); }

.sk-offline-banner { position: fixed; left: 50%; top: 14px; z-index: 200; transform: translateX(-50%); max-width: min(620px, calc(100% - 30px)); padding: 10px 15px; border-radius: 12px; color: #fff; background: #9a6810; box-shadow: var(--sk-shadow-xl); font-size: 12px; font-weight: 800; }
.sk-mobile-backdrop { display: none; }

/* Command center */
.sk-command-overlay { position: fixed; inset: 0; z-index: 160; display: grid; place-items: start center; padding: min(14vh, 120px) 18px 30px; background: rgba(3,8,18,.65); backdrop-filter: blur(10px); }
.sk-command-panel { width: min(720px, 100%); max-height: min(680px, 76vh); display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb, var(--sk-border) 80%, transparent); border-radius: 23px; color: var(--sk-text); background: var(--sk-bg-elevated); box-shadow: 0 45px 120px rgba(0,0,0,.42); }
.sk-command-input-wrap { min-height: 68px; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--sk-border); }
.sk-command-input-wrap > .sk-icon { width: 22px; height: 22px; color: var(--sk-primary); }
.sk-command-input-wrap input { flex: 1; height: 46px; padding: 0; border: 0 !important; outline: 0 !important; color: var(--sk-text); background: transparent !important; box-shadow: none !important; font-size: 17px; font-weight: 650; }
.sk-command-input-wrap input::placeholder { color: var(--sk-muted); }
.sk-command-input-wrap button { border: 1px solid var(--sk-border); border-radius: 7px; padding: 5px 7px; color: var(--sk-muted); background: var(--sk-bg-soft); font-size: 9px; font-weight: 900; cursor: pointer; }
.sk-command-body { min-height: 180px; padding: 10px; overflow-y: auto; }
.sk-command-label { padding: 8px 10px 6px; color: var(--sk-muted); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.sk-command-state { min-height: 155px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px; color: var(--sk-muted); text-align: center; font-size: 12px; }
.sk-spinner { width: 18px; height: 18px; border: 2px solid var(--sk-border); border-top-color: var(--sk-primary); border-radius: 50%; animation: sk-spin .7s linear infinite; }
.sk-command-result { width: 100%; min-height: 61px; display: flex; align-items: center; gap: 12px; padding: 9px 11px; margin: 2px 0; border: 0; border-radius: 14px; color: var(--sk-text); background: transparent; text-align: left; cursor: pointer; }
.sk-command-result:hover,
.sk-command-result.is-selected { background: var(--sk-bg-soft); }
.sk-command-result.is-selected { box-shadow: inset 3px 0 var(--sk-primary); }
.sk-command-result-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; color: var(--sk-primary); background: color-mix(in srgb, var(--sk-primary) 10%, transparent); font-size: 16px; font-weight: 900; }
.sk-command-result > span:nth-child(2) { min-width: 0; flex: 1; display: grid; }
.sk-command-result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.sk-command-result small { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sk-muted); font-size: 10px; }
.sk-command-result b { color: var(--sk-muted); font-size: 12px; }
.sk-command-footer { min-height: 42px; display: flex; align-items: center; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--sk-border); color: var(--sk-muted); background: var(--sk-bg-soft); font-size: 9px; }
.sk-command-footer span { display: inline-flex; align-items: center; gap: 4px; }

/* Public navigation and footer */
.sk-public-nav { position: sticky; top: 0; z-index: 80; border-bottom: 1px solid transparent; background: rgba(247,250,255,.76); backdrop-filter: blur(18px) saturate(160%); transition: .2s ease; }
.sk-public-nav.is-scrolled { border-bottom-color: rgba(203,215,229,.75); background: rgba(255,255,255,.92); box-shadow: 0 10px 30px rgba(15,23,42,.06); }
html.dark .sk-public-nav { background: rgba(7,16,29,.84); }
.sk-public-nav-inner { width: min(1240px, calc(100% - 38px)); min-height: 78px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sk-wordmark { color: #111827; }
.sk-wordmark:hover { color: #111827; }
html.dark .sk-wordmark { color: #fff; }
.sk-wordmark-mark { width: 43px; height: 43px; flex-basis: 43px; border-radius: 14px; box-shadow: 0 10px 24px rgba(99,91,255,.18); }
.sk-wordmark strong { color: currentColor; font-size: 18px; }
.sk-wordmark small { margin-top: 3px; color: #718096; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.sk-public-links { display: flex; align-items: center; gap: 4px; }
.sk-public-links > a:not(.btn) { padding: 9px 12px; border-radius: 10px; color: #4c596b; font-size: 12px; font-weight: 800; }
.sk-public-links > a:not(.btn):hover { color: var(--sk-primary); background: rgba(99,91,255,.07); }
html.dark .sk-public-links > a:not(.btn) { color: #b8c4d3; }
.sk-public-menu { display: none; }
.sk-mobile-public-links { display: none; }

.sk-public-footer { padding: 58px max(20px, calc((100% - 1200px)/2)) 25px; color: #b7c4d6; background: linear-gradient(145deg,#07111f,#0b1830); }
.sk-public-footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 42px; }
.sk-public-footer-grid > div { display: grid; align-content: start; gap: 10px; }
.sk-public-footer-grid > div > strong { color: #fff; font-size: 12px; }
.sk-public-footer-grid a:not(.btn) { color: #91a2b9; font-size: 11px; font-weight: 700; }
.sk-public-footer-grid a:not(.btn):hover { color: #fff; }
.sk-wordmark.inverse { color: #fff; }
.sk-footer-intro p { max-width: 430px; margin: 10px 0 0; color: #91a2b9; font-size: 12px; line-height: 1.75; }
.sk-footer-launch { padding: 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(255,255,255,.045); }
.sk-footer-launch span { color: #fff; font-weight: 850; }
.sk-public-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 45px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); color: #71839b; font-size: 10px; }

/* Generic product components: improves every existing module */
body.is-authenticated .card,
body.is-authenticated .surface,
body.is-authenticated .soft-card,
.sk-dashboard-card {
  border-color: var(--sk-border);
  color: var(--sk-text);
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-sm);
}
body.is-authenticated .card { border-radius: var(--sk-radius); }
body.is-authenticated .surface,
body.is-authenticated .soft-card { border-radius: 15px; background: var(--sk-bg-soft); }
body.is-authenticated .muted { color: var(--sk-muted); }
body.is-authenticated h1,
body.is-authenticated h2,
body.is-authenticated h3,
body.is-authenticated h4,
body.is-authenticated strong { color: var(--sk-text); }

.btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 9px 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--sk-primary), #756df5);
  box-shadow: 0 9px 22px rgba(99,91,255,.18);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  cursor: pointer;
  transition: .18s ease;
}
.btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(99,91,255,.24); }
.btn.small { min-height: 35px; padding: 7px 11px; border-radius: 10px; font-size: 10.5px; }
.btn.secondary { color: #fff; background: linear-gradient(135deg,#0b8fab,#08a7c7); box-shadow: 0 9px 22px rgba(8,167,199,.18); }
.btn.green { color: #fff; background: linear-gradient(135deg,#0f9f6e,#12b981); }
.btn.ghost { color: var(--sk-text); border-color: var(--sk-border); background: var(--sk-bg-elevated); box-shadow: none; }
.btn.ghost:hover { color: var(--sk-primary); border-color: color-mix(in srgb, var(--sk-primary) 38%, var(--sk-border)); background: color-mix(in srgb, var(--sk-primary) 5%, var(--sk-bg-elevated)); }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin: 0 0 7px; color: var(--sk-text); font-size: 11px; font-weight: 850; letter-spacing: .01em; }
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 45px;
  border: 1px solid var(--sk-border);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--sk-text);
  background: var(--sk-bg-elevated);
  outline: none;
  box-shadow: 0 1px 2px rgba(15,23,42,.02);
  font-size: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
input:focus,
select:focus,
textarea:focus { border-color: color-mix(in srgb, var(--sk-primary) 70%, white); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-primary) 10%, transparent); }
input::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--sk-muted) 75%, transparent); }
select { appearance: auto; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sk-primary); }
.sk-file-field { position: relative; padding: 12px; border: 1px dashed var(--sk-border-strong); border-radius: 14px; background: var(--sk-bg-soft); }
.sk-file-field.is-dragging { border-color: var(--sk-primary); background: color-mix(in srgb, var(--sk-primary) 7%, var(--sk-bg-soft)); }
.sk-file-field[data-file-name]:not([data-file-name=""])::after { content: attr(data-file-name); display: block; margin-top: 8px; color: var(--sk-success); font-size: 10px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sk-table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--sk-border); border-radius: 15px; background: var(--sk-bg-elevated); }
.sk-table-scroll > table { min-width: 720px; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--sk-text); background: var(--sk-bg-elevated); }
th { padding: 12px 13px; border-bottom: 1px solid var(--sk-border); color: var(--sk-muted); background: var(--sk-bg-soft); font-size: 9.5px; font-weight: 900; letter-spacing: .065em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 13px; border-bottom: 1px solid color-mix(in srgb, var(--sk-border) 78%, transparent); color: var(--sk-text); font-size: 11.5px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .14s ease; }
tbody tr:hover td { background: color-mix(in srgb, var(--sk-primary) 3.5%, var(--sk-bg-elevated)); }

.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid; border-radius: 13px; font-size: 11px; font-weight: 750; line-height: 1.5; }
.alert.success { color: color-mix(in srgb, var(--sk-success) 82%, var(--sk-text)); border-color: color-mix(in srgb, var(--sk-success) 24%, var(--sk-border)); background: color-mix(in srgb, var(--sk-success) 8%, var(--sk-bg-elevated)); }
.alert.error { color: color-mix(in srgb, var(--sk-danger) 85%, var(--sk-text)); border-color: color-mix(in srgb, var(--sk-danger) 25%, var(--sk-border)); background: color-mix(in srgb, var(--sk-danger) 7%, var(--sk-bg-elevated)); }
.badge { border-radius: 999px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--sk-primary) 18%, var(--sk-border)); color: var(--sk-primary); background: color-mix(in srgb, var(--sk-primary) 7%, var(--sk-bg-elevated)); font-size: 9px; font-weight: 900; letter-spacing: .035em; }
.badge.green { color: var(--sk-success); border-color: color-mix(in srgb, var(--sk-success) 20%, var(--sk-border)); background: color-mix(in srgb, var(--sk-success) 7%, var(--sk-bg-elevated)); }
.badge.yellow { color: var(--sk-warning); border-color: color-mix(in srgb, var(--sk-warning) 23%, var(--sk-border)); background: color-mix(in srgb, var(--sk-warning) 8%, var(--sk-bg-elevated)); }
.badge.purple { color: #745bea; border-color: color-mix(in srgb, #745bea 22%, var(--sk-border)); background: color-mix(in srgb, #745bea 7%, var(--sk-bg-elevated)); }

/* Toasts */
.sk-toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 220; width: min(390px, calc(100% - 36px)); display: grid; gap: 9px; }
.sk-toast { min-height: 54px; display: grid; grid-template-columns: 30px 1fr 24px; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--sk-border); border-radius: 15px; color: var(--sk-text); background: var(--sk-bg-elevated); box-shadow: var(--sk-shadow-xl); opacity: 0; transform: translateY(12px) scale(.98); transition: .2s ease; }
.sk-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.sk-toast-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--sk-success); font-size: 11px; font-weight: 900; }
.sk-toast-error .sk-toast-mark { background: var(--sk-danger); }
.sk-toast > span:nth-child(2) { font-size: 11px; font-weight: 750; line-height: 1.45; }
.sk-toast button { border: 0; color: var(--sk-muted); background: transparent; font-size: 18px; cursor: pointer; }

/* Collapsed state */
.sk-sidebar-collapsed .sk-auth-layout { grid-template-columns: var(--sk-sidebar-mini) minmax(0,1fr); }
.sk-sidebar-collapsed .sk-sidebar-brand-copy,
.sk-sidebar-collapsed .sk-workspace-copy,
.sk-sidebar-collapsed .sk-workspace-card .sk-live-dot,
.sk-sidebar-collapsed .sk-nav-label,
.sk-sidebar-collapsed .sk-nav-section span,
.sk-sidebar-collapsed .sk-nav-hint { width: 0; opacity: 0; pointer-events: none; }
.sk-sidebar-collapsed .sk-sidebar-head { justify-content: center; padding-inline: 12px; }
.sk-sidebar-collapsed .sk-sidebar-brand { gap: 0; }
.sk-sidebar-collapsed .sk-collapse-button { position: absolute; right: -13px; background: #111f33; }
.sk-sidebar-collapsed .sk-collapse-button .sk-icon { transform: rotate(0deg); }
.sk-sidebar-collapsed .sk-workspace-card { justify-content: center; padding-inline: 7px; background: transparent; border-color: transparent; }
.sk-sidebar-collapsed .sk-nav-section { height: 12px; margin-top: 8px; padding: 0; }
.sk-sidebar-collapsed .sk-nav-link { justify-content: center; gap: 0; padding-inline: 7px; }
.sk-sidebar-collapsed .sk-nav-link:hover { transform: none; }
.sk-sidebar-collapsed .sk-nav-link.is-active::before { left: -13px; }
.sk-sidebar-collapsed .sk-nav-icon { width: 38px; height: 38px; flex-basis: 38px; }
.sk-sidebar-collapsed .sk-sidebar-foot { padding-inline: 15px; }
.sk-sidebar-collapsed .sk-security-chip { justify-content: center; padding: 7px; }

/* New dashboard building blocks */
.sk-dashboard { display: grid; gap: 20px; }
.sk-dashboard-hero {
  position: relative;
  min-height: 240px;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr);
  gap: 24px;
  overflow: hidden;
  padding: clamp(25px,4vw,42px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 25px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 10%, rgba(103,232,249,.22), transparent 24%),
    radial-gradient(circle at 10% 110%, rgba(99,91,255,.42), transparent 35%),
    linear-gradient(135deg,#071525 0%,#142654 60%,#1b2a66 100%);
  box-shadow: 0 24px 64px rgba(7,17,31,.19);
}
.sk-dashboard-hero::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 360px; height: 360px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.025), 0 0 0 90px rgba(255,255,255,.018); }
.sk-dashboard-hero > * { position: relative; z-index: 1; }
.sk-hero-kicker { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #c9d8ed; background: rgba(255,255,255,.07); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sk-hero-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #5ee8bc; box-shadow: 0 0 0 4px rgba(94,232,188,.12); }
.sk-dashboard-hero h2 { max-width: 760px; margin: 17px 0 10px; color: #fff !important; font-size: clamp(28px,4vw,48px); line-height: 1.03; letter-spacing: -.055em; }
.sk-dashboard-hero p { max-width: 700px; margin: 0; color: #b9c8dd; font-size: 13px; line-height: 1.75; }
.sk-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.sk-hero-actions .btn.ghost { color: #fff; border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.07); }
.sk-hero-side { align-self: stretch; display: grid; align-content: center; gap: 11px; padding: 17px; border: 1px solid rgba(255,255,255,.10); border-radius: 20px; background: rgba(255,255,255,.065); backdrop-filter: blur(10px); }
.sk-hero-side-head { display: flex; align-items: center; justify-content: space-between; color: #c9d7e9; font-size: 10px; font-weight: 850; }
.sk-readiness-ring { --progress: 0; width: 112px; height: 112px; margin: 6px auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#62e6c0 calc(var(--progress) * 1%), rgba(255,255,255,.10) 0); position: relative; }
.sk-readiness-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #132552; }
.sk-readiness-ring span { position: relative; display: grid; text-align: center; color: #fff; font-size: 24px; font-weight: 950; }
.sk-readiness-ring small { color: #9eb0c9; font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.sk-readiness-list { display: grid; gap: 7px; }
.sk-readiness-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #b8c8dd; font-size: 9.5px; }
.sk-readiness-item b { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: rgba(255,255,255,.08); font-size: 8px; }
.sk-readiness-item.is-done b { color: #07231b; background: #61e1b8; }

.sk-metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.sk-metric-card { min-width: 0; display: grid; grid-template-columns: 45px 1fr; gap: 12px; padding: 17px; border: 1px solid var(--sk-border); border-radius: 18px; background: var(--sk-bg-elevated); box-shadow: var(--sk-shadow-sm); }
.sk-metric-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--sk-primary); background: color-mix(in srgb, var(--sk-primary) 9%, var(--sk-bg-elevated)); }
.sk-metric-icon .sk-icon { width: 20px; height: 20px; }
.sk-metric-card:nth-child(2) .sk-metric-icon { color: var(--sk-success); background: color-mix(in srgb, var(--sk-success) 9%, var(--sk-bg-elevated)); }
.sk-metric-card:nth-child(3) .sk-metric-icon { color: var(--sk-cyan); background: color-mix(in srgb, var(--sk-cyan) 9%, var(--sk-bg-elevated)); }
.sk-metric-card:nth-child(4) .sk-metric-icon { color: var(--sk-warning); background: color-mix(in srgb, var(--sk-warning) 9%, var(--sk-bg-elevated)); }
.sk-metric-copy { min-width: 0; display: grid; }
.sk-metric-copy span { color: var(--sk-muted); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.sk-metric-copy strong { margin-top: 2px; font-size: 26px; line-height: 1; letter-spacing: -.04em; }
.sk-metric-copy small { margin-top: 5px; color: var(--sk-muted); font-size: 9px; }

.sk-dashboard-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 18px; }
.sk-dashboard-card { padding: 20px; border: 1px solid var(--sk-border); border-radius: 20px; }
.sk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.sk-card-head h3 { margin: 0; font-size: 17px; letter-spacing: -.025em; }
.sk-card-head p { margin: 5px 0 0; color: var(--sk-muted); font-size: 10.5px; line-height: 1.55; }
.sk-module-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.sk-module-card { min-height: 137px; display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--sk-border); border-radius: 15px; color: var(--sk-text); background: var(--sk-bg-soft); transition: .18s ease; }
.sk-module-card:hover { color: var(--sk-text); border-color: color-mix(in srgb, var(--sk-primary) 35%, var(--sk-border)); background: var(--sk-bg-elevated); box-shadow: var(--sk-shadow-sm); transform: translateY(-2px); }
.sk-module-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sk-module-card-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--sk-primary); background: color-mix(in srgb, var(--sk-primary) 10%, var(--sk-bg-elevated)); }
.sk-module-card-icon .sk-icon { width: 18px; height: 18px; }
.sk-module-card-top > span:last-child { color: var(--sk-muted); font-size: 15px; }
.sk-module-card h4 { margin: 13px 0 4px; font-size: 12px; }
.sk-module-card p { margin: 0; color: var(--sk-muted); font-size: 9.5px; line-height: 1.5; }
.sk-license-panel { display: grid; gap: 11px; }
.sk-license-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sk-border); }
.sk-license-row:last-child { border-bottom: 0; }
.sk-license-row span { color: var(--sk-muted); font-size: 10px; }
.sk-license-row strong { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; text-align: right; }
.sk-health-bar { height: 7px; overflow: hidden; border-radius: 99px; background: var(--sk-bg-soft); }
.sk-health-bar i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,var(--sk-primary),var(--sk-cyan)); }

.sk-reveal { opacity: 0; transform: translateY(10px); transition: opacity .42s ease, transform .42s ease; }
.sk-reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes sk-spin { to { transform: rotate(360deg); } }

@media (max-width: 1220px) {
  .sk-command-trigger { min-width: 210px; }
  .sk-command-trigger span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sk-dashboard-hero { grid-template-columns: minmax(0,1fr) 300px; }
  .sk-module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 1023px) {
  .sk-auth-layout,
  .sk-sidebar-collapsed .sk-auth-layout { display: block; }
  .sk-sidebar { position: fixed; left: 0; top: 0; width: min(var(--sk-sidebar-width), calc(100vw - 44px)); transform: translateX(-105%); box-shadow: 30px 0 80px rgba(0,0,0,.38); transition: transform .25s ease; }
  .sk-sidebar-mobile-open .sk-sidebar { transform: translateX(0); }
  .sk-sidebar-mobile-open { overflow: hidden; }
  .sk-mobile-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(3,8,18,.6); backdrop-filter: blur(3px); }
  .sk-collapse-button { display: none; }
  .sk-mobile-toggle { display: grid; }
  .sk-sidebar-collapsed .sk-sidebar-brand-copy,
  .sk-sidebar-collapsed .sk-workspace-copy,
  .sk-sidebar-collapsed .sk-workspace-card .sk-live-dot,
  .sk-sidebar-collapsed .sk-nav-label,
  .sk-sidebar-collapsed .sk-nav-section span,
  .sk-sidebar-collapsed .sk-nav-hint { width: auto; opacity: 1; pointer-events: auto; }
  .sk-sidebar-collapsed .sk-sidebar-head { justify-content: space-between; padding-inline: 17px; }
  .sk-sidebar-collapsed .sk-sidebar-brand { gap: 12px; }
  .sk-sidebar-collapsed .sk-workspace-card { justify-content: flex-start; padding-inline: 11px; border-color: rgba(255,255,255,.09); background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045)); }
  .sk-sidebar-collapsed .sk-nav-section { height: 28px; margin-top: 15px; padding: 0 11px 5px; }
  .sk-sidebar-collapsed .sk-nav-link { justify-content: flex-start; gap: 11px; padding-inline: 10px; }
  .sk-sidebar-collapsed .sk-nav-icon { width: 32px; height: 32px; flex-basis: 32px; }
  .sk-profile-copy { display: none; }
  .sk-dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .sk-topbar { padding-inline: 17px; }
  .workspace-main { padding: 19px 17px 30px; }
  .sk-command-trigger { min-width: 43px; width: 43px; padding: 0; justify-content: center; background: var(--sk-bg-elevated); }
  .sk-command-trigger span,
  .sk-command-trigger kbd { display: none; }
  .sk-dashboard-hero { grid-template-columns: 1fr; }
  .sk-hero-side { max-width: 100%; grid-template-columns: 140px 1fr; align-items: center; }
  .sk-hero-side-head { grid-column: 1 / -1; }
  .sk-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sk-public-links { display: none; }
  .sk-public-menu { display: grid; }
  .sk-mobile-public-links { display: grid; width: min(100% - 38px, 600px); margin: 0 auto 14px; padding: 9px; border: 1px solid var(--sk-border); border-radius: 16px; background: var(--sk-bg-elevated); box-shadow: var(--sk-shadow); }
  .sk-mobile-public-links a { padding: 11px 12px; border-radius: 10px; color: var(--sk-text); font-size: 12px; font-weight: 800; }
  .sk-mobile-public-links a:hover { color: var(--sk-primary); background: var(--sk-bg-soft); }
  .sk-public-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .sk-footer-launch { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  :root { --sk-topbar-height: 70px; }
  .sk-topbar { gap: 8px; padding: 10px 12px; }
  .sk-breadcrumb { display: none; }
  .sk-page-heading h1 { margin: 0; max-width: 145px; font-size: 18px; }
  .sk-topbar-actions { gap: 5px; }
  .sk-icon-button,
  .sk-command-trigger { width: 39px; height: 39px; flex-basis: 39px; border-radius: 11px; }
  .sk-profile-trigger { height: 42px; padding: 2px; }
  .sk-profile-avatar { width: 37px; height: 37px; flex-basis: 37px; border-radius: 11px; }
  .sk-profile-chevron { display: none; }
  .workspace-main { padding: 14px 12px 26px; }
  .sk-dashboard { gap: 13px; }
  .sk-dashboard-hero { min-height: auto; padding: 23px 19px; border-radius: 19px; }
  .sk-dashboard-hero h2 { font-size: 31px; }
  .sk-dashboard-hero p { font-size: 11px; }
  .sk-hero-side { grid-template-columns: 1fr; }
  .sk-readiness-ring { width: 100px; height: 100px; }
  .sk-metric-grid { gap: 9px; }
  .sk-metric-card { grid-template-columns: 38px 1fr; gap: 9px; padding: 13px 11px; border-radius: 15px; }
  .sk-metric-icon { width: 38px; height: 38px; border-radius: 11px; }
  .sk-metric-copy strong { font-size: 21px; }
  .sk-dashboard-card { padding: 15px; border-radius: 17px; }
  .sk-module-grid { grid-template-columns: 1fr; }
  .sk-module-card { min-height: 118px; }
  .sk-command-overlay { padding: 10px; place-items: center; }
  .sk-command-panel { max-height: 88vh; border-radius: 18px; }
  .sk-command-input-wrap { min-height: 60px; padding-left: 13px; }
  .sk-command-input-wrap input { font-size: 14px; }
  .sk-command-footer { display: none; }
  .sk-app-footer { flex-wrap: wrap; gap: 8px 14px; }
  .sk-public-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .sk-footer-intro,
  .sk-footer-launch { grid-column: 1 / -1; }
  .sk-public-footer-bottom { align-items: flex-start; flex-direction: column; }
  .grid,
  .grid-2,
  .grid-3 { grid-template-columns: 1fr !important; }
}

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

@media print {
  .no-print,
  .sk-sidebar,
  .sk-topbar,
  .sk-app-footer,
  .sk-command-overlay { display: none !important; }
  .sk-auth-layout { display: block !important; }
  .workspace-main { max-width: none; padding: 0; }
  body.is-authenticated { background: #fff !important; }
}

/* Public product experience v2 */
.sk-public-hero { padding: clamp(58px,8vw,108px) max(20px,calc((100% - 1240px)/2)) 70px; overflow: hidden; }
.sk-public-hero-grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(520px,1.08fr); align-items: center; gap: clamp(38px,6vw,82px); }
.sk-public-hero-copy { position: relative; z-index: 2; }
.sk-public-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid rgba(99,91,255,.18); border-radius: 999px; color: #5148e5; background: rgba(99,91,255,.06); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sk-public-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #0fba85; box-shadow: 0 0 0 4px rgba(15,186,133,.11); }
.sk-public-hero h1 { max-width: 660px; margin: 20px 0 18px; color: #0b1323; font-size: clamp(44px,5.6vw,76px); line-height: .98; letter-spacing: -.065em; }
html.dark .sk-public-hero h1 { color: #f4f8fd; }
.sk-public-hero-copy > p { max-width: 630px; margin: 0; color: #66748a; font-size: clamp(14px,1.4vw,17px); line-height: 1.75; }
html.dark .sk-public-hero-copy > p { color: #98a8bd; }
.sk-public-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.sk-text-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 7px; color: #334155; font-size: 11px; font-weight: 850; }
.sk-text-link span { transition: transform .18s ease; }
.sk-text-link:hover { color: var(--sk-primary); }
.sk-text-link:hover span { transform: translateX(3px); }
html.dark .sk-text-link { color: #bdc9d8; }
.sk-public-proof { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 28px; color: #64748b; font-size: 9.5px; font-weight: 750; }
.sk-public-proof span { display: inline-flex; align-items: center; gap: 6px; }
.sk-public-proof b { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 6px; color: #087f5b; background: #dff9ee; font-size: 8px; }

.sk-product-stage { min-height: 560px; display: grid; place-items: center; position: relative; }
.sk-stage-glow { position: absolute; border-radius: 50%; filter: blur(3px); }
.sk-stage-glow.one { width: 430px; height: 430px; background: rgba(99,91,255,.16); }
.sk-stage-glow.two { width: 260px; height: 260px; right: 0; bottom: 20px; background: rgba(8,167,199,.13); }
.sk-browser-frame { width: min(710px,100%); position: relative; z-index: 2; overflow: hidden; border: 1px solid rgba(33,49,76,.14); border-radius: 22px; background: #fff; box-shadow: 0 38px 100px rgba(18,31,54,.22); transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.sk-browser-bar { height: 37px; display: flex; align-items: center; gap: 5px; padding: 0 11px; border-bottom: 1px solid #e5ebf3; background: #f8fafc; }
.sk-browser-bar > span { width: 7px; height: 7px; border-radius: 50%; background: #d5dce7; }
.sk-browser-bar > span:first-child { background: #fa6b65; }.sk-browser-bar > span:nth-child(2) { background: #f6be4f; }.sk-browser-bar > span:nth-child(3) { background: #4dce7d; }
.sk-browser-bar div { width: 48%; margin: 0 auto; padding: 4px 10px; border: 1px solid #e4e9f1; border-radius: 6px; color: #9ba7b7; background: #fff; font-size: 7px; text-align: center; }
.sk-browser-body { min-height: 420px; display: grid; grid-template-columns: 82px 1fr; background: #f5f7fb; }
.sk-demo-sidebar { padding: 15px 10px; background: linear-gradient(180deg,#071525,#0b1930); }
.sk-demo-brand { display: grid; justify-items: center; gap: 5px; margin-bottom: 24px; color: #fff; font-size: 7px; }.sk-demo-brand img { width: 28px; height: 28px; border-radius: 8px; background: #fff; }
.sk-demo-sidebar > i { width: 42px; height: 26px; display: block; margin: 7px auto; border-radius: 8px; background: rgba(255,255,255,.055); }
.sk-demo-sidebar > i.active { background: linear-gradient(135deg,#635bff,#746df5); }
.sk-demo-main { padding: 17px; overflow: hidden; }
.sk-demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.sk-demo-top div { display: grid; }.sk-demo-top small { color: #8a98aa; font-size: 7px; text-transform: uppercase; letter-spacing: .07em; }.sk-demo-top strong { margin-top: 3px; color: #172033; font-size: 12px; }.sk-demo-top > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#635bff,#08a7c7); font-size: 7px; font-weight: 900; }
.sk-demo-hero { margin-top: 14px; padding: 18px; border-radius: 15px; color: #fff; background: radial-gradient(circle at 90% 0,rgba(103,232,249,.24),transparent 30%),linear-gradient(135deg,#0a1a31,#21346d); }.sk-demo-hero small { color: #9fb2ca; font-size: 7px; text-transform: uppercase; }.sk-demo-hero strong { max-width: 320px; display: block; margin-top: 6px; font-size: 19px; line-height: 1.15; letter-spacing: -.03em; }.sk-demo-hero > div { height: 5px; margin-top: 17px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.11); }.sk-demo-hero > div i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#67e8c0,#71c8f8); }.sk-demo-hero > span { display: block; margin-top: 6px; color: #a9bad0; font-size: 7px; }
.sk-demo-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }.sk-demo-metrics > div { padding: 11px; border: 1px solid #e4eaf2; border-radius: 11px; background: #fff; }.sk-demo-metrics small { display: block; color: #8794a5; font-size: 6px; text-transform: uppercase; }.sk-demo-metrics strong { display: block; margin-top: 3px; color: #172033; font-size: 15px; }
.sk-demo-bottom { display: grid; grid-template-columns: 1.4fr .8fr; gap: 8px; margin-top: 9px; }.sk-demo-bottom > div { min-height: 85px; padding: 11px; border: 1px solid #e4eaf2; border-radius: 11px; background: #fff; }.sk-demo-bottom b { display: block; color: #303a4b; font-size: 7px; }.sk-demo-bottom div:first-child span { height: 11px; display: block; margin-top: 7px; border-radius: 5px; background: #eef2f7; }.sk-demo-bottom em { display: inline-block; margin-top: 10px; padding: 3px 5px; border-radius: 99px; color: #07825e; background: #e1f9ef; font-size: 6px; font-style: normal; font-weight: 900; }.sk-demo-bottom p { margin: 7px 0 0; color: #8996a8; font-size: 6px; }
.sk-floating-card { position: absolute; z-index: 3; min-width: 220px; display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid rgba(255,255,255,.8); border-radius: 14px; color: #253047; background: rgba(255,255,255,.91); box-shadow: 0 18px 45px rgba(24,38,64,.16); backdrop-filter: blur(12px); }.sk-floating-card > span { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg,#635bff,#817aff); font-weight: 900; }.sk-floating-card div { display: grid; }.sk-floating-card b { font-size: 9px; }.sk-floating-card small { margin-top: 3px; color: #7c8a9f; font-size: 7px; }.sk-floating-results { right: -8px; top: 67px; }.sk-floating-attendance { left: -20px; bottom: 58px; }.sk-floating-attendance > span { background: linear-gradient(135deg,#0f9f6e,#25c48e); }

.sk-signal-strip { width: min(1240px,calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--sk-border); border-radius: 18px; background: var(--sk-bg-elevated); box-shadow: var(--sk-shadow-sm); }.sk-signal-strip > div { min-height: 82px; display: grid; align-content: center; padding: 18px; border-right: 1px solid var(--sk-border); }.sk-signal-strip > div:last-child { border: 0; }.sk-signal-strip strong { color: var(--sk-text); font-size: 12px; }.sk-signal-strip span { margin-top: 4px; color: var(--sk-muted); font-size: 9px; }
.sk-public-section { width: min(1240px,calc(100% - 40px)); margin: 0 auto; padding: clamp(75px,9vw,125px) 0; }.sk-section-heading { max-width: 780px; margin: 0 auto 40px; text-align: center; }.sk-section-heading.left { max-width: 760px; margin-inline: 0; text-align: left; }.sk-section-heading > span,.sk-bento-card > span { color: var(--sk-primary); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.sk-section-heading h2 { margin: 13px 0; color: var(--sk-text); font-size: clamp(34px,4.2vw,56px); line-height: 1.04; letter-spacing: -.055em; }.sk-section-heading p { margin: 0; color: var(--sk-muted); font-size: 13px; line-height: 1.75; }
.sk-bento-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.sk-bento-card { min-height: 315px; position: relative; overflow: hidden; padding: 25px; border: 1px solid var(--sk-border); border-radius: 21px; color: var(--sk-text); background: var(--sk-bg-elevated); box-shadow: var(--sk-shadow-sm); }.sk-bento-wide { grid-column: span 2; }.sk-bento-card h3 { max-width: 620px; margin: 12px 0 9px; color: var(--sk-text); font-size: 24px; line-height: 1.12; letter-spacing: -.04em; }.sk-bento-card p { max-width: 650px; margin: 0; color: var(--sk-muted); font-size: 11px; line-height: 1.7; }.sk-bento-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 23px; border-radius: 14px; color: var(--sk-primary); background: color-mix(in srgb,var(--sk-primary) 10%,var(--sk-bg-elevated)); }.sk-bento-icon.green { color: var(--sk-success); background: color-mix(in srgb,var(--sk-success) 10%,var(--sk-bg-elevated)); }.sk-bento-icon.cyan { color: var(--sk-cyan); background: color-mix(in srgb,var(--sk-cyan) 10%,var(--sk-bg-elevated)); }.sk-bento-icon.amber { color: var(--sk-warning); background: color-mix(in srgb,var(--sk-warning) 10%,var(--sk-bg-elevated)); }
.sk-chart-mock { height: 105px; display: flex; align-items: flex-end; gap: 9px; margin-top: 24px; padding: 15px 18px 0; border-top: 1px solid var(--sk-border); background-image: linear-gradient(var(--sk-border) 1px,transparent 1px); background-size: 100% 27px; }.sk-chart-mock i { flex: 1; max-width: 48px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg,#7770ff,#635bff); opacity: .88; }
.sk-person-stack { display: flex; margin-top: 42px; }.sk-person-stack b { width: 40px; height: 40px; display: grid; place-items: center; margin-left: -7px; border: 3px solid var(--sk-bg-elevated); border-radius: 50%; color: #fff; background: linear-gradient(135deg,#1c3456,#49739d); font-size: 8px; }.sk-person-stack b:first-child { margin-left: 0; }.sk-person-stack b:last-child { background: #635bff; }
.sk-attendance-mock { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 38px; }.sk-attendance-mock i { height: 32px; border: 1px solid var(--sk-border); border-radius: 9px; background: var(--sk-bg-soft); }.sk-attendance-mock i.yes { border-color: rgba(15,159,110,.16); background: linear-gradient(135deg,#dff8ef,#c8f2e4); }.sk-attendance-mock i.yes::after { content:"✓"; height: 100%; display: grid; place-items: center; color: #0f9368; font-size: 10px; font-style: normal; font-weight: 900; }
.sk-brand-swatches { display: flex; align-items: center; gap: 9px; margin-top: 45px; }.sk-brand-swatches i { width: 34px; height: 34px; border-radius: 10px; background: #635bff; }.sk-brand-swatches i:nth-child(2) { background:#08a7c7; }.sk-brand-swatches i:nth-child(3) { background:#0f9f6e; }.sk-brand-swatches span { margin-left: auto; color: var(--sk-text); font-size: 32px; font-weight: 900; letter-spacing: -.08em; }
.sk-bento-card.dark-card { color: #fff; border-color: rgba(255,255,255,.08); background: radial-gradient(circle at 90% 0,rgba(99,91,255,.35),transparent 32%),linear-gradient(145deg,#071525,#132956); }.sk-bento-card.dark-card h3 { color:#fff; }.sk-bento-card.dark-card p { color:#aebed2; }.sk-bento-card.dark-card > span { color:#73e3ed; }.sk-license-mock { margin-top: 25px; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.055); }.sk-license-mock > div { display:flex; justify-content:space-between; gap:15px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08); color:#b8c8db; font-size:9px; }.sk-license-mock > div:last-child { border:0; }.sk-license-mock b { padding:3px 7px; border-radius:99px; color:#5ee3b6; background:rgba(94,227,182,.1); font-size:7px; }.sk-license-mock strong { color:#fff; font-size:10px; }
.sk-role-section { border-top: 1px solid var(--sk-border); }.sk-role-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.sk-role-grid article { min-height:220px; padding:22px; border:1px solid var(--sk-border); border-radius:18px; background:var(--sk-bg-elevated); }.sk-role-grid b { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--sk-primary); background:color-mix(in srgb,var(--sk-primary) 9%,var(--sk-bg-elevated)); font-size:9px; }.sk-role-grid h3 { margin:32px 0 9px; color:var(--sk-text); font-size:17px; letter-spacing:-.03em; }.sk-role-grid p { margin:0; color:var(--sk-muted); font-size:10.5px; line-height:1.65; }
.sk-launch-section { width:min(1240px,calc(100% - 40px)); margin:0 auto 100px; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:clamp(30px,5vw,58px); border:1px solid rgba(255,255,255,.09); border-radius:26px; color:#fff; background:radial-gradient(circle at 84% 0,rgba(103,232,249,.2),transparent 28%),linear-gradient(135deg,#071525,#1b2f65); box-shadow:0 28px 74px rgba(7,17,31,.18); }.sk-launch-section > div:first-child { max-width:760px; }.sk-launch-section span { color:#72e6ef; font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.sk-launch-section h2 { margin:12px 0 9px; color:#fff; font-size:clamp(30px,4vw,50px); line-height:1.05; letter-spacing:-.055em; }.sk-launch-section p { margin:0; color:#afbed2; font-size:12px; line-height:1.7; }.sk-launch-actions { min-width:230px; display:grid; gap:9px; }.sk-launch-actions .btn.ghost { color:#fff; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); }

@media(max-width:1050px){.sk-public-hero-grid{grid-template-columns:1fr}.sk-public-hero-copy{text-align:center}.sk-public-eyebrow{margin:auto}.sk-public-hero h1,.sk-public-hero-copy>p{margin-inline:auto}.sk-public-hero-actions,.sk-public-proof{justify-content:center}.sk-product-stage{width:min(760px,100%);margin:auto}.sk-role-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.sk-product-stage{min-height:450px}.sk-browser-frame{transform:none}.sk-floating-card{display:none}.sk-signal-strip{grid-template-columns:repeat(2,1fr)}.sk-signal-strip>div:nth-child(2){border-right:0}.sk-signal-strip>div:nth-child(-n+2){border-bottom:1px solid var(--sk-border)}.sk-bento-grid{grid-template-columns:1fr}.sk-bento-wide{grid-column:auto}.sk-launch-section{align-items:flex-start;flex-direction:column}.sk-launch-actions{width:100%}}
@media(max-width:540px){.sk-public-hero{padding-top:50px}.sk-public-hero h1{font-size:42px}.sk-product-stage{min-height:360px}.sk-browser-body{grid-template-columns:54px 1fr}.sk-demo-sidebar{padding-inline:5px}.sk-demo-sidebar>i{width:30px}.sk-demo-main{padding:10px}.sk-demo-hero strong{font-size:14px}.sk-demo-bottom{display:none}.sk-signal-strip{grid-template-columns:1fr}.sk-signal-strip>div{border-right:0;border-bottom:1px solid var(--sk-border)!important}.sk-signal-strip>div:last-child{border-bottom:0!important}.sk-role-grid{grid-template-columns:1fr}.sk-public-section{width:min(100% - 28px,1240px)}.sk-launch-section{width:min(100% - 28px,1240px)}}

/* ========================================================================
   SKOOLTIME SAAS OS 2.1 - ENGAGEMENT, AUTOMATION & BRAND SYSTEM
   ======================================================================== */

.sk-sidebar-logo img,
.sk-wordmark-mark img { padding: 3px; }

.sk-page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 28px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  background:
    radial-gradient(circle at 92% 15%, rgba(14,165,233,.14), transparent 28%),
    radial-gradient(circle at 68% -20%, rgba(99,91,255,.14), transparent 30%),
    var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-sm);
}
.sk-page-intro::after { content:""; position:absolute; width:220px; height:220px; right:-120px; bottom:-150px; border:32px solid rgba(99,91,255,.06); border-radius:50%; }
.sk-page-intro > * { position:relative; z-index:1; }
.sk-page-intro h1 { margin:5px 0 8px; font-size:clamp(30px,4vw,46px); letter-spacing:-.045em; color:var(--sk-text); }
.sk-page-intro p { margin:0; max-width:760px; color:var(--sk-muted); font-size:15px; line-height:1.7; }
.sk-eyebrow,.sk-card-kicker { display:inline-flex; align-items:center; gap:8px; color:var(--sk-primary); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.sk-eyebrow::before,.sk-card-kicker::before { content:""; width:22px; height:2px; border-radius:999px; background:linear-gradient(90deg,var(--sk-primary),var(--sk-cyan)); }
.sk-page-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.sk-notification-button { position:relative; }
.sk-notification-badge { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; border:2px solid var(--sk-bg-elevated); border-radius:999px; background:#ef4444; color:#fff; font-size:9px; font-weight:900; box-shadow:0 4px 12px rgba(239,68,68,.35); }
.sk-notification-menu { width:min(420px,calc(100vw - 24px)); padding:0; overflow:hidden; }
.sk-notification-menu .sk-dropdown-head { padding:16px 18px; border-bottom:1px solid var(--sk-border); }
.sk-notification-menu .sk-dropdown-head > span { display:flex; flex-direction:column; gap:2px; }
.sk-notification-menu .sk-dropdown-head small { color:var(--sk-muted); font-size:11px; }
.sk-notification-menu .sk-dropdown-head button { border:0; background:transparent; color:var(--sk-primary); font-weight:800; font-size:12px; cursor:pointer; }
.sk-notification-dropdown-list { max-height:440px; overflow:auto; }
.sk-notification-dropdown-item { display:grid; grid-template-columns:38px 1fr; gap:11px; padding:13px 16px; border-bottom:1px solid var(--sk-border); color:var(--sk-text); transition:.2s ease; }
.sk-notification-dropdown-item:hover { background:var(--sk-bg-soft); }
.sk-notification-dropdown-item.is-unread { background:linear-gradient(90deg,rgba(99,91,255,.09),transparent); }
.sk-notification-dropdown-item.is-unread::after { content:""; position:absolute; right:12px; width:7px; height:7px; border-radius:50%; background:var(--sk-primary); }
.sk-notification-dropdown-item > span:last-child { min-width:0; display:flex; flex-direction:column; gap:3px; }
.sk-notification-dropdown-item strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-notification-dropdown-item small { color:var(--sk-muted); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sk-notification-dropdown-item time { color:#94a3b8; font-size:10px; font-weight:700; }
.sk-notification-footer-link { display:block; padding:13px 16px; text-align:center; color:var(--sk-primary); font-size:12px; font-weight:900; background:var(--sk-bg-soft); }
.sk-dropdown-empty { padding:34px 18px; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; color:var(--sk-muted); }
.sk-dropdown-empty strong { color:var(--sk-text); }

.sk-calendar-metrics,.sk-notification-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.sk-calendar-metrics article,.sk-notification-summary article { min-width:0; display:flex; align-items:center; gap:14px; padding:19px; border:1px solid var(--sk-border); border-radius:20px; background:var(--sk-bg-elevated); box-shadow:var(--sk-shadow-sm); }
.sk-calendar-metrics article:nth-child(1) { background:linear-gradient(145deg,rgba(236,72,153,.08),var(--sk-bg-elevated)); }
.sk-calendar-metrics article:nth-child(2) { background:linear-gradient(145deg,rgba(14,165,233,.08),var(--sk-bg-elevated)); }
.sk-calendar-metrics article:nth-child(3) { background:linear-gradient(145deg,rgba(245,158,11,.09),var(--sk-bg-elevated)); }
.sk-calendar-metrics article:nth-child(4) { background:linear-gradient(145deg,rgba(16,185,129,.09),var(--sk-bg-elevated)); }
.sk-metric-symbol { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:15px; color:var(--sk-primary); background:rgba(99,91,255,.1); }
.sk-calendar-metrics small,.sk-notification-summary span { display:block; color:var(--sk-muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.sk-calendar-metrics strong,.sk-notification-summary strong { display:block; margin-top:2px; color:var(--sk-text); font-size:25px; letter-spacing:-.04em; }
.sk-calendar-metrics p,.sk-notification-summary small { margin:2px 0 0; color:var(--sk-muted); font-size:11px; }
.sk-notification-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sk-notification-summary article { display:block; }

.sk-tabbar { display:flex; gap:7px; padding:6px; margin-bottom:18px; overflow:auto; border:1px solid var(--sk-border); border-radius:16px; background:var(--sk-bg-elevated); box-shadow:var(--sk-shadow-sm); }
.sk-tabbar button { display:flex; align-items:center; gap:8px; padding:10px 16px; border:0; border-radius:11px; background:transparent; color:var(--sk-muted); font-weight:800; white-space:nowrap; cursor:pointer; transition:.2s ease; }
.sk-tabbar button span { min-width:22px; height:22px; padding:0 6px; display:grid; place-items:center; border-radius:999px; background:var(--sk-bg-soft); font-size:10px; }
.sk-tabbar button:hover,.sk-tabbar button.is-active { color:#fff; background:linear-gradient(135deg,var(--sk-primary),#4f46e5); box-shadow:0 10px 22px rgba(99,91,255,.22); }
.sk-tabbar button.is-active span { background:rgba(255,255,255,.18); }

.sk-calendar-overview { display:grid; gap:18px; }
.sk-celebration-stage { overflow:hidden; background:radial-gradient(circle at 100% 0%,rgba(236,72,153,.12),transparent 30%),radial-gradient(circle at 0% 100%,rgba(99,91,255,.1),transparent 35%),var(--sk-bg-elevated); }
.sk-birthday-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.sk-birthday-card { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:11px; min-width:0; padding:14px; border:1px solid var(--sk-border); border-radius:18px; background:rgba(255,255,255,.62); box-shadow:0 8px 20px rgba(15,23,42,.04); transition:.2s ease; }
html.dark .sk-birthday-card { background:rgba(16,29,47,.72); }
.sk-birthday-card:hover { transform:translateY(-2px); border-color:rgba(99,91,255,.32); box-shadow:var(--sk-shadow-sm); }
.sk-birthday-card.is-today { border-color:rgba(236,72,153,.36); background:linear-gradient(135deg,rgba(236,72,153,.12),rgba(99,91,255,.08)); }
.sk-person-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:#fff; font-size:16px; font-weight:950; background:linear-gradient(145deg,#6366f1,#0ea5e9); box-shadow:0 8px 20px rgba(99,102,241,.22); }
.sk-person-avatar.is-student { background:linear-gradient(145deg,#0ea5e9,#2563eb); }
.sk-person-avatar.is-teacher { background:linear-gradient(145deg,#10b981,#0f766e); }
.sk-person-avatar.is-school_head { background:linear-gradient(145deg,#f59e0b,#d97706); }
.sk-birthday-card > div { min-width:0; }
.sk-birthday-card strong { display:block; overflow:hidden; color:var(--sk-text); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.sk-birthday-card small { display:block; margin-top:3px; overflow:hidden; color:var(--sk-muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.sk-birthday-date { min-width:60px; color:var(--sk-text); font-size:12px; font-weight:900; text-align:right; }
.sk-birthday-date small { color:#ec4899; }

.sk-calendar-two-column,.sk-community-pulse { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr); gap:18px; }
.sk-event-timeline { display:grid; }
.sk-event-item { display:grid; grid-template-columns:52px 2px minmax(0,1fr); gap:13px; min-height:88px; }
.sk-event-item time { width:50px; height:55px; display:grid; place-content:center; border:1px solid var(--sk-border); border-radius:15px; background:var(--sk-bg-soft); text-align:center; }
.sk-event-item time strong { color:var(--sk-text); font-size:20px; line-height:1; }
.sk-event-item time span { color:var(--sk-muted); font-size:9px; font-weight:900; text-transform:uppercase; }
.sk-event-line { width:2px; height:100%; background:linear-gradient(var(--sk-primary),rgba(99,91,255,.08)); }
.sk-event-item:last-child .sk-event-line { background:linear-gradient(var(--sk-primary),transparent); }
.sk-event-item h3 { margin:7px 0 3px; color:var(--sk-text); font-size:14px; }
.sk-event-item p { margin:0; color:var(--sk-muted); font-size:11px; line-height:1.5; }
.sk-event-item .badge { font-size:8px; }

.sk-automation-card { background:linear-gradient(160deg,#071526,#0c1c33 72%,#14284a); color:#dce8f7; }
.sk-automation-card h2,.sk-automation-card .sk-card-head h3 { color:#fff; }
.sk-automation-card .sk-card-head p { color:#93a7c1; }
.sk-live-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid rgba(16,185,129,.25); border-radius:999px; background:rgba(16,185,129,.1); color:#6ee7b7; font-size:10px; font-weight:900; }
.sk-live-pill i { width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 0 5px rgba(52,211,153,.08); animation:skPulse 2s infinite; }
@keyframes skPulse { 50% { box-shadow:0 0 0 9px rgba(52,211,153,0); } }
.sk-automation-list { display:grid; gap:9px; margin:18px 0; }
.sk-automation-list > div { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:15px; background:rgba(255,255,255,.04); }
.sk-automation-list > div > span { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#7dd3fc; background:rgba(14,165,233,.12); }
.sk-automation-list p { margin:0; }
.sk-automation-list strong { display:block; color:#f8fbff; font-size:12px; }
.sk-automation-list small { color:#93a7c1; font-size:10px; }
.sk-automation-list b { color:#6ee7b7; font-size:10px; }

.sk-birthday-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sk-birthday-directory > article { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:12px; padding:14px; border:1px solid var(--sk-border); border-radius:17px; background:var(--sk-bg-elevated); }
.sk-birthday-directory > article > div { min-width:0; }
.sk-birthday-directory strong { display:block; color:var(--sk-text); font-size:13px; }
.sk-birthday-directory small { display:block; color:var(--sk-muted); font-size:10px; }
.sk-birthday-directory > article > div > span { display:inline-block; margin-top:6px; padding:4px 7px; border-radius:999px; color:var(--sk-primary); background:rgba(99,91,255,.09); font-size:8px; font-weight:900; text-transform:uppercase; }
.sk-birthday-directory time { text-align:right; }
.sk-birthday-directory time strong { font-size:12px; }
.sk-birthday-directory time small { color:#ec4899; }
.sk-compact-search { width:min(240px,100%); padding:9px 12px; border:1px solid var(--sk-border); border-radius:12px; background:var(--sk-bg-soft); color:var(--sk-text); }

.sk-event-board { display:grid; gap:10px; }
.sk-event-board > article { display:grid; grid-template-columns:78px minmax(0,1fr) auto; align-items:center; gap:16px; padding:15px; border:1px solid var(--sk-border); border-radius:18px; background:var(--sk-bg-elevated); transition:.2s ease; }
.sk-event-board > article:hover { border-color:rgba(99,91,255,.3); box-shadow:var(--sk-shadow-sm); }
.sk-event-board-date { padding:10px; border-radius:14px; background:var(--sk-bg-soft); text-align:center; }
.sk-event-board-date strong { display:block; color:var(--sk-text); font-size:24px; line-height:1; }
.sk-event-board-date span { color:var(--sk-muted); font-size:9px; font-weight:900; text-transform:uppercase; }
.sk-event-board-copy { min-width:0; }
.sk-event-board-copy h3 { margin:5px 0 3px; color:var(--sk-text); font-size:15px; }
.sk-event-board-copy p { margin:0; color:var(--sk-muted); font-size:11px; }
.sk-event-board-copy > small { display:block; margin-top:7px; color:#94a3b8; font-size:9px; }

.sk-modal-backdrop { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; overflow:auto; background:rgba(3,8,18,.68); backdrop-filter:blur(10px); }
.sk-modal-panel { width:min(650px,100%); max-height:calc(100vh - 40px); overflow:auto; position:relative; padding:28px; border:1px solid var(--sk-border); border-radius:26px; background:var(--sk-bg-elevated); box-shadow:0 40px 120px rgba(0,0,0,.35); }
.sk-modal-panel.is-wide { width:min(820px,100%); }
.sk-modal-panel > h2 { margin:6px 0; color:var(--sk-text); font-size:27px; letter-spacing:-.03em; }
.sk-modal-panel > p { margin:0 0 20px; color:var(--sk-muted); }
.sk-modal-close { position:absolute; top:15px; right:15px; width:36px; height:36px; border:1px solid var(--sk-border); border-radius:12px; background:var(--sk-bg-soft); color:var(--sk-text); font-size:23px; line-height:1; cursor:pointer; }
.sk-checkbox-line { display:flex; align-items:center; gap:9px; margin:0 0 16px; color:var(--sk-text); font-size:12px; font-weight:700; }
.sk-settings-block { padding:17px; margin-bottom:13px; border:1px solid var(--sk-border); border-radius:18px; background:var(--sk-bg-soft); }
.sk-settings-block h3 { margin:0 0 13px; color:var(--sk-text); font-size:14px; }
.sk-check-card { display:flex; align-items:center; gap:8px; padding:12px; border:1px solid var(--sk-border); border-radius:14px; background:var(--sk-bg-elevated); color:var(--sk-text); font-size:12px; font-weight:800; cursor:pointer; }

.sk-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; color:var(--sk-text); cursor:pointer; }
.sk-toggle-row + .sk-toggle-row { border-top:1px solid var(--sk-border); }
.sk-toggle-row > span { display:flex; flex-direction:column; gap:3px; }
.sk-toggle-row strong { font-size:12px; }
.sk-toggle-row small { color:var(--sk-muted); font-size:10px; font-weight:500; }
.sk-toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.sk-toggle-row i { width:42px; height:24px; flex:0 0 42px; position:relative; border-radius:999px; background:#cbd5e1; transition:.2s ease; }
.sk-toggle-row i::after { content:""; position:absolute; width:18px; height:18px; top:3px; left:3px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:.2s ease; }
.sk-toggle-row input:checked + i { background:linear-gradient(90deg,var(--sk-primary),var(--sk-cyan)); }
.sk-toggle-row input:checked + i::after { transform:translateX(18px); }

.sk-notification-list { display:grid; gap:10px; }
.sk-notification-row { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:start; gap:14px; padding:17px; border:1px solid var(--sk-border); border-radius:19px; background:var(--sk-bg-elevated); box-shadow:var(--sk-shadow-sm); transition:.2s ease; }
.sk-notification-row.is-unread { border-color:rgba(99,91,255,.28); background:linear-gradient(90deg,rgba(99,91,255,.07),var(--sk-bg-elevated) 35%); }
.sk-notification-row:hover { transform:translateY(-1px); box-shadow:var(--sk-shadow); }
.sk-notification-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:15px; color:var(--sk-primary); background:rgba(99,91,255,.1); }
.sk-notification-icon.is-birthday { color:#db2777; background:rgba(236,72,153,.1); }
.sk-notification-icon.is-holiday,.sk-notification-icon.is-event { color:#0284c7; background:rgba(14,165,233,.1); }
.sk-notification-icon.is-announcement { color:#059669; background:rgba(16,185,129,.1); }
.sk-notification-copy { min-width:0; }
.sk-notification-titleline { display:flex; align-items:center; gap:8px; }
.sk-notification-titleline h2 { margin:0; color:var(--sk-text); font-size:14px; }
.sk-unread-dot { width:7px; height:7px; border-radius:50%; background:var(--sk-primary); box-shadow:0 0 0 5px rgba(99,91,255,.08); }
.sk-notification-copy p { margin:5px 0 8px; color:var(--sk-muted); font-size:12px; line-height:1.55; }
.sk-notification-meta { display:flex; gap:8px; flex-wrap:wrap; }
.sk-notification-meta span { padding:4px 7px; border-radius:999px; color:#64748b; background:var(--sk-bg-soft); font-size:9px; font-weight:700; }
.sk-notification-actions { display:flex; gap:7px; align-items:center; }

.sk-empty-state { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:240px; padding:32px; text-align:center; border:1px dashed var(--sk-border-strong); border-radius:20px; background:var(--sk-bg-soft); }
.sk-empty-state h2 { margin:12px 0 5px; color:var(--sk-text); font-size:17px; }
.sk-empty-state p { margin:0; color:var(--sk-muted); font-size:12px; }
.sk-empty-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:17px; color:var(--sk-primary); background:rgba(99,91,255,.1); }
.sk-empty-inline { grid-column:1/-1; display:flex; flex-direction:column; gap:4px; padding:20px; border:1px dashed var(--sk-border); border-radius:16px; color:var(--sk-muted); text-align:center; }
.sk-empty-inline strong { color:var(--sk-text); font-size:12px; }
.sk-empty-inline span { font-size:10px; }

.sk-profile-grid { display:grid; grid-template-columns:300px minmax(0,1fr); gap:18px; align-items:start; }
.sk-profile-card { position:sticky; top:104px; padding:27px; border:1px solid var(--sk-border); border-radius:24px; background:linear-gradient(160deg,#071526,#102442); color:#fff; box-shadow:var(--sk-shadow); text-align:center; }
.sk-profile-avatar { overflow:hidden; }
.sk-profile-card .sk-profile-avatar { width:90px; height:90px; margin:0 auto 14px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:27px; background:linear-gradient(145deg,#6366f1,#0ea5e9); font-size:28px; font-weight:950; box-shadow:0 18px 44px rgba(14,165,233,.22); }
.sk-profile-card h2 { margin:0 0 4px; color:#fff; font-size:19px; }
.sk-profile-card > p { margin:0; color:#9fb1c8; font-size:11px; }
.sk-profile-facts { display:grid; gap:8px; margin-top:23px; text-align:left; }
.sk-profile-facts span { padding:11px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(255,255,255,.04); }
.sk-profile-facts small { display:block; color:#8297b2; font-size:8px; font-weight:900; text-transform:uppercase; }
.sk-profile-facts strong { display:block; margin-top:3px; overflow:hidden; color:#e8f0fa; font-size:11px; text-overflow:ellipsis; }
.sk-profile-form { padding:26px; }
.sk-preference-panel { padding:18px; margin:12px 0 18px; border:1px solid var(--sk-border); border-radius:18px; background:var(--sk-bg-soft); }

.sk-community-pulse { margin-top:18px; }
.sk-dashboard-celebrations,.sk-dashboard-events { display:grid; gap:9px; }
.sk-dashboard-person,.sk-dashboard-events > a { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px; border:1px solid var(--sk-border); border-radius:15px; color:var(--sk-text); background:var(--sk-bg-soft); transition:.2s ease; }
.sk-dashboard-person:hover,.sk-dashboard-events > a:hover { transform:translateX(3px); border-color:rgba(99,91,255,.3); }
.sk-dashboard-person > span { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,#6366f1,#0ea5e9); font-weight:900; }
.sk-dashboard-person strong,.sk-dashboard-events strong { display:block; font-size:12px; }
.sk-dashboard-person small,.sk-dashboard-events small { display:block; margin-top:2px; color:var(--sk-muted); font-size:9px; }
.sk-dashboard-person time { color:var(--sk-primary); font-size:10px; font-weight:900; }
.sk-dashboard-events > a > time { width:40px; height:40px; display:grid; place-content:center; border-radius:12px; background:var(--sk-bg-elevated); text-align:center; }
.sk-dashboard-events > a > time strong { font-size:16px; line-height:1; }
.sk-dashboard-events > a > time span { color:var(--sk-muted); font-size:8px; font-weight:900; text-transform:uppercase; }
.sk-notification-kpi { padding:7px 10px; border-radius:999px; color:var(--sk-primary); background:rgba(99,91,255,.09); font-size:10px; font-weight:900; }
.sk-dashboard-notification-link { margin-top:10px; padding-top:10px; border-top:1px solid var(--sk-border); }
.sk-dashboard-notification-link a { display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:9px; color:var(--sk-text); }
.sk-dashboard-notification-link strong { display:block; font-size:11px; }
.sk-dashboard-notification-link small { display:block; color:var(--sk-muted); font-size:9px; }
.sk-dashboard-notification-link b { color:var(--sk-primary); font-size:10px; }

.sk-button-spinner { width:14px; height:14px; display:inline-block; vertical-align:-2px; margin-right:6px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:skSpin .7s linear infinite; }
@keyframes skSpin { to { transform:rotate(360deg); } }
button.is-loading { cursor:wait; opacity:.82; }
form[aria-busy="true"] { opacity:.88; }

@media (max-width:1180px) {
  .sk-calendar-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sk-birthday-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sk-calendar-two-column,.sk-community-pulse { grid-template-columns:1fr; }
}
@media (max-width:800px) {
  .sk-page-intro { align-items:flex-start; flex-direction:column; padding:22px; }
  .sk-page-actions { width:100%; justify-content:flex-start; }
  .sk-page-actions .btn { flex:1; }
  .sk-notification-summary,.sk-profile-grid { grid-template-columns:1fr; }
  .sk-profile-card { position:static; }
  .sk-birthday-directory { grid-template-columns:1fr; }
  .sk-event-board > article { grid-template-columns:62px 1fr; }
  .sk-event-board > article > form { grid-column:1/-1; }
  .sk-notification-row { grid-template-columns:42px minmax(0,1fr); }
  .sk-notification-actions { grid-column:2; }
}
@media (max-width:560px) {
  .sk-calendar-metrics,.sk-notification-summary,.sk-birthday-strip { grid-template-columns:1fr; }
  .sk-page-actions { display:grid; grid-template-columns:1fr; }
  .sk-tabbar button { padding:9px 12px; }
  .sk-modal-backdrop { padding:8px; align-items:end; }
  .sk-modal-panel { max-height:94vh; padding:22px 17px; border-radius:24px 24px 8px 8px; }
  .sk-birthday-card { grid-template-columns:40px minmax(0,1fr); }
  .sk-birthday-date { grid-column:2; text-align:left; }
  .sk-notification-actions { flex-wrap:wrap; }
}

.sk-student-birthday-radar { margin-top:18px; padding:20px; border:1px solid var(--sk-border); border-radius:23px; background:radial-gradient(circle at 95% 0%,rgba(14,165,233,.11),transparent 26%),var(--sk-bg-elevated); box-shadow:var(--sk-shadow-sm); }
.sk-teacher-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr); gap:18px; margin-top:18px; }
.sk-assignment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sk-assignment-grid > a { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; align-items:center; padding:14px; border:1px solid var(--sk-border); border-radius:17px; color:var(--sk-text); background:var(--sk-bg-soft); transition:.2s ease; }
.sk-assignment-grid > a:hover { transform:translateY(-2px); border-color:rgba(99,91,255,.32); box-shadow:var(--sk-shadow-sm); }
.sk-assignment-grid > a > span { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; color:var(--sk-primary); background:rgba(99,91,255,.1); }
.sk-assignment-grid > a > div { min-width:0; }
.sk-assignment-grid strong { display:block; font-size:12px; }
.sk-assignment-grid small { display:block; margin-top:3px; overflow:hidden; color:var(--sk-muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.sk-assignment-grid b { grid-column:2; color:var(--sk-primary); font-size:9px; }
.sk-teacher-load-orb { width:130px; height:130px; margin:8px auto 14px; display:grid; place-content:center; border:12px solid rgba(99,91,255,.12); border-top-color:var(--sk-primary); border-right-color:var(--sk-cyan); border-radius:50%; text-align:center; box-shadow:inset 0 0 0 1px var(--sk-border); }
.sk-teacher-load-orb strong { color:var(--sk-text); font-size:34px; line-height:1; }
.sk-teacher-load-orb small { margin-top:5px; color:var(--sk-muted); font-size:8px; font-weight:900; text-transform:uppercase; }
@media(max-width:1000px){.sk-teacher-grid{grid-template-columns:1fr}.sk-assignment-grid{grid-template-columns:1fr}}

/* Skooltime Offline Intelligence 3.0 */
.sk-sync-trigger{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line,rgba(148,163,184,.22));border-radius:999px;text-decoration:none;color:inherit;background:var(--surface,#fff);font-size:12px;font-weight:800;white-space:nowrap}.sk-sync-trigger .sk-live-dot{position:static;display:inline-block;flex:0 0 auto}.sk-offline-hub{padding-bottom:32px}.sk-offline-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.65fr);gap:32px;align-items:center;padding:clamp(28px,5vw,62px);border-radius:30px;background:radial-gradient(circle at 85% 20%,rgba(56,189,248,.3),transparent 32%),linear-gradient(135deg,#061427,#0a2d50 52%,#063d5d);color:#fff;box-shadow:0 28px 80px rgba(2,12,27,.25)}.sk-offline-hero h1{max-width:900px;margin:10px 0 16px;font-size:clamp(36px,5vw,68px);line-height:1.02;letter-spacing:-.04em}.sk-offline-hero p{max-width:820px;margin:0;color:#c8d9eb;font-size:17px;line-height:1.75}.sk-offline-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.sk-offline-hero .btn.secondary{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}.sk-offline-orbit{position:relative;aspect-ratio:1;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;background:rgba(6,20,39,.36);box-shadow:inset 0 0 60px rgba(56,189,248,.16)}.sk-offline-orbit:before,.sk-offline-orbit:after{content:"";position:absolute;border:1px dashed rgba(125,211,252,.38);border-radius:50%}.sk-offline-orbit:before{inset:13%}.sk-offline-orbit:after{inset:27%}.sk-offline-orbit span{font-size:30px;font-weight:900}.sk-offline-orbit b,.sk-offline-orbit i{position:absolute;padding:7px 10px;border-radius:999px;background:#0ea5e9;color:#03111d;font-size:11px;font-style:normal}.sk-offline-orbit b{top:12%;right:5%}.sk-offline-orbit i{bottom:15%;left:2%;background:#5eead4}.sk-offline-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.sk-offline-stats article{padding:18px;border:1px solid var(--line,rgba(148,163,184,.2));border-radius:17px;background:var(--card,#fff)}.sk-offline-stats span,.sk-offline-stats small{display:block;color:var(--muted,#64748b);font-size:12px}.sk-offline-stats strong{display:block;margin:8px 0;font-size:25px}.sk-offline-stats strong.is-date{font-size:15px;line-height:1.35}.sk-offline-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr);gap:18px}.sk-prepare-card,.sk-offline-safety{margin:0}.sk-prepare-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}.sk-step-badge{padding:7px 10px;border-radius:999px;background:rgba(14,165,233,.12);color:#0284c7;font-size:11px;font-weight:900}.sk-offline-safety ul{display:grid;gap:12px;padding-left:20px;color:var(--muted,#64748b);line-height:1.55}.sk-offline-safety .btn{width:100%;margin-top:9px}.sk-offline-capabilities{margin-top:18px}.sk-capability-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.sk-capability-grid article{padding:18px;border:1px solid var(--line,rgba(148,163,184,.2));border-radius:16px;background:var(--surface-subtle,#f8fafc)}.sk-capability-grid b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#082f49;color:#67e8f9}.sk-capability-grid h3{margin:12px 0 6px}.sk-capability-grid p{margin:0;color:var(--muted,#64748b);line-height:1.55;font-size:13px}.sk-conflict-list{display:grid;gap:16px;margin-top:18px}.sk-conflict-card{border-left:4px solid #94a3b8}.sk-conflict-card.is-open{border-left-color:#f59e0b}.sk-conflict-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.sk-conflict-compare>div{min-width:0;padding:15px;border:1px solid var(--line,rgba(148,163,184,.2));border-radius:14px;background:var(--surface-subtle,#f8fafc)}.sk-conflict-compare h3{margin:0 0 10px}.sk-conflict-compare pre{max-height:300px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:12px}.sk-conflict-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.score-save-state.pending{color:#d97706}.status-badge.warning{background:#fef3c7;color:#92400e}.btn.danger{background:#be123c;color:#fff}.btn.warning{background:#d97706;color:#fff}
@media(max-width:1100px){.sk-offline-hero{grid-template-columns:1fr}.sk-offline-orbit{display:none}.sk-offline-stats,.sk-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sk-offline-grid{grid-template-columns:1fr}}
@media(max-width:720px){.sk-sync-trigger{display:none}.sk-offline-hero{padding:28px 22px;border-radius:22px}.sk-offline-hero h1{font-size:38px}.sk-offline-stats,.sk-capability-grid{grid-template-columns:1fr}.sk-conflict-compare{grid-template-columns:1fr}}

/* ================================================================
   Skooltime SaaS OS 3.1 — Premium shell, Report Studio and form QA
   ================================================================ */
[x-cloak] { display: none !important; }

/* Universal layout safety: prevent grid/flex children and form controls from
   overflowing, overlapping or forcing horizontal page scroll. */
:where(form, fieldset, .form-group, .grid, .grid-2, .grid-3, .grid-4, .grid-5, .actions, .split-header) > * { min-width: 0; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
:where(select) { text-overflow: ellipsis; padding-right: 2.6rem !important; }
:where(textarea) { resize: vertical; overflow-wrap: anywhere; }
:where(input[type="file"]) { overflow: hidden; white-space: normal; }
:where(input[type="color"]) { width: 100% !important; min-height: 48px; padding: 5px !important; }
:where(.actions, .split-header, .workspace-actions, .sk-toolbar-actions) { flex-wrap: wrap; }
:where(.table-wrap, .sk-table-scroll, .report-table-wrap) { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
:where(.btn) { max-width: 100%; white-space: normal; text-align: center; }
.form-action-group { align-self: end; }
.form-action-group .btn { width: 100%; min-height: 48px; }

@media (max-width: 1180px) {
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .grid, .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: minmax(0, 1fr) !important; }
  .split-header { align-items: flex-start !important; }
  .actions { width: 100%; }
  .actions > .btn, .actions > form, .actions > form .btn { width: 100%; }
}

/* Result workflow cards */
.results-workflow-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 18px; }
.workflow-card { display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.workflow-card::after { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 999px; right: -80px; top: -80px; background: color-mix(in srgb, var(--primary, #2563eb) 13%, transparent); pointer-events: none; }
.workflow-icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(145deg, #0f766e, #14b8a6); color: white; font-size: 1.35rem; box-shadow: 0 12px 28px rgba(15,118,110,.2); }
.report-studio-card .workflow-icon { background: linear-gradient(145deg, #4338ca, #7c3aed); box-shadow: 0 12px 28px rgba(79,70,229,.2); }
.workflow-inline-form { margin-top: auto; }
@media (max-width: 980px) { .results-workflow-grid { grid-template-columns: 1fr; } }

/* Personalised remarks workspace */
.report-remarks-page { padding-bottom: 56px; }
.remarks-hero { background: radial-gradient(circle at 90% 10%, rgba(20,184,166,.13), transparent 35%), var(--card-bg, #fff); }
.remarks-filter-card { margin-top: 18px; position: sticky; top: 78px; z-index: 12; backdrop-filter: blur(18px); }
.remarks-toolbar { margin-top: 18px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.remarks-toolbar > div:first-child { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.remarks-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .84rem; }
.status-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; margin-right: 6px; }
.status-ready { background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.12); }
.status-draft { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.12); }
.remarks-list { display: grid; gap: 18px; margin-top: 18px; }
.student-remark-card { padding: 0 !important; overflow: hidden; }
.student-remark-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--border, #e2e8f0); background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg, #fff) 94%, #eff6ff), var(--card-bg, #fff)); }
.student-remark-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.student-avatar { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 17px; object-fit: cover; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 8px 22px rgba(15,23,42,.12); }
.student-avatar-fallback { display: grid; place-items: center; background: linear-gradient(145deg,#1d4ed8,#7c3aed); color: white; font-weight: 800; }
.student-remark-identity h2 { margin: 2px 0 3px; font-size: 1.15rem; line-height: 1.2; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 800; color: var(--muted, #64748b); }
.student-remark-meta { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.remark-editor-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.remark-editor-grid.single-column { grid-template-columns: minmax(0,1fr); }
.remark-editor { padding: 22px; min-width: 0; }
.remark-editor + .remark-editor { border-left: 1px solid var(--border, #e2e8f0); }
.remark-editor-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 8px; }
.remark-editor-heading > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.remark-role-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #dbeafe; color: #1d4ed8; font-size: .78rem; font-weight: 900; }
.remark-role-icon.leadership { background: #ede9fe; color: #6d28d9; }
.field-help { color: var(--muted, #64748b); font-size: .82rem; margin: 0 0 10px; }
.remark-editor textarea { min-height: 142px; line-height: 1.55; }
.remark-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.save-state { font-size: .78rem; }
.save-state.error { color: #dc2626 !important; }
.remarks-empty { margin-top: 18px; text-align: center; padding: 52px 24px !important; }
.empty-state-icon { font-size: 2.2rem; margin-bottom: 12px; }
@media (max-width: 860px) {
  .remarks-filter-card { position: static; }
  .remark-editor-grid { grid-template-columns: 1fr; }
  .remark-editor + .remark-editor { border-left: 0; border-top: 1px solid var(--border, #e2e8f0); }
  .student-remark-header { align-items: flex-start; flex-direction: column; }
  .student-remark-meta { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .student-remark-header, .remark-editor { padding: 17px; }
  .remark-editor-actions { align-items: stretch; flex-direction: column; }
  .remark-editor-actions .btn { width: 100%; }
}

/* Report Studio */
.report-studio-page { max-width: 1680px !important; padding-bottom: 64px; }
.report-studio-hero { background: radial-gradient(circle at 85% 20%, rgba(99,102,241,.14), transparent 30%), radial-gradient(circle at 70% 90%, rgba(20,184,166,.1), transparent 28%), var(--card-bg, #fff); }
.report-studio-layout { display: grid; grid-template-columns: minmax(390px, 520px) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.studio-control-panel { padding: 0 !important; overflow: clip; }
.studio-control-panel form { display: flex; flex-direction: column; min-height: 780px; }
.studio-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 8px; gap: 5px; border-bottom: 1px solid var(--border, #e2e8f0); background: color-mix(in srgb,var(--card-bg,#fff) 90%,#f8fafc); }
.studio-tabs button { border: 0; background: transparent; border-radius: 10px; padding: 10px 8px; font: inherit; font-weight: 750; color: var(--muted,#64748b); cursor: pointer; font-size: .78rem; }
.studio-tabs button.is-active { background: var(--card-bg,#fff); color: var(--text,#0f172a); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.studio-tab-panel { padding: 22px; display: grid; gap: 17px; }
.studio-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.studio-section-heading h2 { margin: 3px 0 0; font-size: 1.22rem; }
.studio-step { font-size: 2.2rem; font-weight: 900; color: color-mix(in srgb,var(--muted,#64748b) 20%,transparent); line-height: 1; }
.template-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.studio-template-card { min-width: 0; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; border: 1px solid var(--border,#e2e8f0); border-radius: 14px; padding: 11px; background: var(--card-bg,#fff); color: var(--text,#0f172a); cursor: pointer; transition: .18s ease; }
.studio-template-card:hover { transform: translateY(-1px); border-color: #93c5fd; }
.studio-template-card.is-active { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.11); }
.studio-template-card strong { font-size: .86rem; }
.studio-template-card small { grid-column: 2; color: var(--muted,#64748b); line-height: 1.3; }
.template-swatch { grid-row: 1 / span 2; width: 34px; height: 45px; border-radius: 7px; background: linear-gradient(145deg,#1d4ed8 0 26%,#fff 26% 78%,#0f766e 78%); border: 1px solid rgba(15,23,42,.12); }
.template-swatch-modern { background: linear-gradient(145deg,#4f46e5 0 35%,#eef2ff 35% 72%,#14b8a6 72%); }
.template-swatch-classic { background: linear-gradient(145deg,#7c2d12 0 17%,#fff7ed 17% 82%,#ca8a04 82%); }
.template-swatch-ministry { background: linear-gradient(145deg,#166534 0 17%,#fff 17% 82%,#166534 82%); }
.template-swatch-minimal { background: linear-gradient(145deg,#111827 0 9%,#fff 9% 92%,#94a3b8 92%); }
.color-control-grid { gap: 10px !important; }
.color-control { min-width: 0; border: 1px solid var(--border,#e2e8f0); padding: 9px; border-radius: 12px; display: grid; grid-template-columns: 1fr 38px; align-items: center; gap: 7px; }
.color-control span { font-size: .75rem; font-weight: 800; }
.color-control input { grid-column: 2; grid-row: 1 / span 2; width: 38px !important; height: 38px; min-height: 0; padding: 2px !important; border-radius: 10px; }
.color-control code { color: var(--muted,#64748b); font-size: .67rem; overflow: hidden; }
.range-control { display: grid; gap: 8px; }
.range-control > div { display: flex; justify-content: space-between; gap: 12px; }
.range-control label { font-weight: 700; }
.range-control output { color: #2563eb; font-weight: 800; }
.range-control input[type="range"] { width: 100%; accent-color: #2563eb; }
.toggle-list { display: grid; gap: 8px; }
.toggle-list.two-column { grid-template-columns: repeat(2,minmax(0,1fr)); }
.studio-toggle { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--border,#e2e8f0); border-radius: 12px; cursor: pointer; background: color-mix(in srgb,var(--card-bg,#fff) 96%,#f8fafc); }
.studio-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.studio-toggle > span { width: 34px; height: 20px; border-radius: 99px; background: #cbd5e1; padding: 3px; transition: .18s ease; flex: 0 0 34px; }
.studio-toggle > span::after { content:""; width: 14px; height: 14px; border-radius: 50%; display: block; background: #fff; box-shadow: 0 2px 5px rgba(15,23,42,.18); transition: transform .18s ease; }
.studio-toggle input:checked + span { background: #2563eb; }
.studio-toggle input:checked + span::after { transform: translateX(14px); }
.studio-toggle strong { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.watermark-controls { display: grid; gap: 12px; padding: 14px; border-radius: 14px; border: 1px dashed #94a3b8; }
.studio-save-bar { margin-top: auto; position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--border,#e2e8f0); background: color-mix(in srgb,var(--card-bg,#fff) 92%,transparent); backdrop-filter: blur(18px); }
.studio-save-bar > div { display: grid; }
.studio-save-bar small { color: var(--muted,#64748b); }
.studio-preview-column { min-width: 0; position: sticky; top: 78px; }
.studio-preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 16px !important; margin-bottom: 10px; }
.studio-preview-toolbar > div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.preview-dimensions span { text-transform: capitalize; font-size: .68rem; padding: 5px 8px; border: 1px solid var(--border,#e2e8f0); border-radius: 999px; color: var(--muted,#64748b); }
.studio-preview-stage { min-height: 760px; border-radius: 22px; padding: clamp(14px,2.2vw,30px); background-color: #dce4ef; background-image: radial-gradient(circle at 1px 1px,rgba(51,65,85,.15) 1px,transparent 0); background-size: 18px 18px; overflow: auto; }
.studio-report-preview { transform-origin: top center; margin-inline: auto; box-shadow: 0 25px 70px rgba(15,23,42,.22); }
.studio-preview-column:not(.is-print-mode) .studio-report-preview { max-width: 900px; }
.studio-preview-column.is-print-mode .studio-report-preview { transform: scale(.82); margin-bottom: -14%; }
@media (max-width: 1200px) {
  .report-studio-layout { grid-template-columns: minmax(340px,440px) minmax(0,1fr); }
  .studio-preview-column.is-print-mode .studio-report-preview { transform: scale(.7); margin-bottom: -30%; }
}
@media (max-width: 980px) {
  .report-studio-layout { grid-template-columns: 1fr; }
  .studio-preview-column { position: static; }
  .studio-control-panel form { min-height: auto; }
}
@media (max-width: 560px) {
  .studio-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .template-picker, .toggle-list.two-column { grid-template-columns: 1fr; }
  .studio-tab-panel { padding: 17px; }
  .studio-save-bar { align-items: stretch; flex-direction: column; }
  .studio-save-bar .btn { width: 100%; }
}

/* Premium report document shared by staff and parent portal */
.report-card-page { padding-bottom: 64px; }
.report-card-toolbar { margin-bottom: 18px; }
.report-document-stage { display: flex; justify-content: center; width: 100%; overflow-x: auto; padding: clamp(8px,2vw,22px); border-radius: 20px; background: #dce4ef; }
.report-document {
  --rc-primary: #1d4ed8; --rc-secondary: #0f766e; --rc-accent: #f59e0b; --rc-font-scale: 1; --rc-page-margin: 12mm; --rc-watermark-opacity: .08;
  position: relative; isolation: isolate; width: 210mm; min-height: 297mm; padding: var(--rc-page-margin); background: #fff; color: #172033; font-size: calc(12px * var(--rc-font-scale)); line-height: 1.42; overflow: hidden; box-shadow: 0 24px 70px rgba(15,23,42,.2);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.report-document.paper-letter { width: 216mm; min-height: 279mm; }
.report-document.orientation-landscape.paper-a4 { width: 297mm; min-height: 210mm; }
.report-document.orientation-landscape.paper-letter { width: 279mm; min-height: 216mm; }
.report-document.font-source-serif { font-family: Georgia, "Times New Roman", serif; }
.report-document.font-nunito { font-family: Nunito, ui-rounded, "Arial Rounded MT Bold", sans-serif; }
.report-document.font-system { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.report-watermark { position: absolute; z-index: -1; inset: 42% auto auto 50%; transform: translate(-50%,-50%) rotate(-31deg); width: 140%; text-align: center; font-size: 54px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; color: var(--rc-primary); opacity: var(--rc-watermark-opacity); white-space: nowrap; }
.report-document-header { display: grid; grid-template-columns: 88px minmax(0,1fr) auto; gap: 18px; align-items: center; padding-bottom: 18px; border-bottom: 3px solid var(--rc-primary); position: relative; }
.report-document-header::after { content:""; position: absolute; bottom: -7px; left: 0; width: 35%; height: 3px; background: var(--rc-accent); }
.report-brand-mark { width: 78px; height: 78px; border-radius: 17px; border: 1px solid #dbe3ee; display: grid; place-items: center; overflow: hidden; background: #fff; }
.report-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.report-brand-fallback { font-size: 1.45rem; font-weight: 950; color: var(--rc-primary); background: color-mix(in srgb,var(--rc-primary) 9%,#fff); }
.report-school-identity { text-align: center; min-width: 0; }
.report-school-identity h1 { margin: 0; color: var(--rc-primary); font-size: calc(23px * var(--rc-font-scale)); letter-spacing: .035em; line-height: 1.05; text-transform: uppercase; }
.report-school-identity h2 { margin: 8px 0 0; color: #111827; font-size: calc(14px * var(--rc-font-scale)); text-transform: uppercase; letter-spacing: .16em; }
.report-school-identity p { margin: 4px 0 0; color: #475569; font-size: calc(9px * var(--rc-font-scale)); }
.report-motto { font-style: italic; }
.report-contact-line { overflow-wrap: anywhere; }
.report-term-chip { min-width: 104px; border-radius: 14px; padding: 12px; background: linear-gradient(145deg,var(--rc-primary),color-mix(in srgb,var(--rc-primary) 70%,#111827)); color: #fff; display: grid; gap: 4px; text-align: center; box-shadow: 0 9px 24px color-mix(in srgb,var(--rc-primary) 25%,transparent); }
.report-term-chip strong { font-size: .76rem; }
.report-term-chip span { font-size: .68rem; opacity: .85; }
.report-document.header-split .report-school-identity { text-align: left; }
.report-document.header-compact .report-document-header { grid-template-columns: 58px minmax(0,1fr) auto; gap: 12px; padding-bottom: 11px; }
.report-document.header-compact .report-brand-mark { width: 52px; height: 52px; border-radius: 10px; }
.report-document.header-compact .report-school-identity h1 { font-size: calc(18px * var(--rc-font-scale)); }
.report-section { margin-top: 15px; border: 1px solid #dce3ed; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.84); break-inside: avoid; }
.report-section-heading { min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; background: color-mix(in srgb,var(--rc-primary) 8%,#f8fafc); border-bottom: 1px solid #dce3ed; }
.report-section-heading strong { color: var(--rc-primary); text-transform: uppercase; letter-spacing: .09em; font-size: calc(9px * var(--rc-font-scale)); }
.report-section-heading span { color: #64748b; font-size: calc(8px * var(--rc-font-scale)); }
.report-profile-content { display: flex; align-items: center; gap: 14px; padding: 12px; }
.report-student-photo { width: 76px; height: 86px; flex: 0 0 76px; object-fit: cover; border-radius: 11px; border: 1px solid #dbe3ee; }
.report-student-photo-fallback { display: grid; place-items: center; background: linear-gradient(145deg,var(--rc-primary),var(--rc-secondary)); color: white; font-weight: 900; font-size: 1.3rem; }
.report-profile-grid { flex: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.report-profile-grid > div { min-width: 0; padding: 8px 9px; border-radius: 8px; background: #f8fafc; border: 1px solid #e7edf4; display: grid; gap: 2px; }
.report-profile-grid span { color: #64748b; font-size: calc(7.5px * var(--rc-font-scale)); text-transform: uppercase; letter-spacing: .08em; }
.report-profile-grid strong { font-size: calc(9.5px * var(--rc-font-scale)); overflow-wrap: anywhere; }
.report-table-wrap { overflow-x: visible; }
.report-academic-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: calc(8px * var(--rc-font-scale)); }
.report-academic-table th { background: var(--rc-primary); color: white; padding: 7px 5px; text-align: center; font-size: calc(7.4px * var(--rc-font-scale)); letter-spacing: .03em; }
.report-academic-table th:first-child, .report-academic-table td:first-child { text-align: left; }
.report-academic-table td { padding: 7px 5px; border-bottom: 1px solid #e4eaf1; text-align: center; vertical-align: middle; }
.report-academic-table tbody tr:nth-child(even) { background: #f8fafc; }
.report-academic-table tbody tr:last-child td { border-bottom: 0; }
.report-grade-chip { display: inline-grid; place-items: center; min-width: 25px; height: 23px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb,var(--rc-secondary) 13%,#fff); color: var(--rc-secondary); font-weight: 900; }
.report-empty-row { padding: 24px !important; color: #64748b; text-align: center !important; }
.report-summary-block { margin-top: 15px; break-inside: avoid; }
.report-summary-heading { margin-bottom: 7px; color: #64748b; font-size: calc(8px * var(--rc-font-scale)); text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.report-summary-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-radius: 12px; overflow: hidden; background: linear-gradient(130deg,var(--rc-primary),color-mix(in srgb,var(--rc-secondary) 75%,var(--rc-primary))); color: #fff; }
.report-summary-strip > div { padding: 11px 8px; display: grid; gap: 2px; text-align: center; border-right: 1px solid rgba(255,255,255,.2); }
.report-summary-strip > div:last-child { border-right: 0; }
.report-summary-strip strong { font-size: calc(14px * var(--rc-font-scale)); }
.report-summary-strip span { font-size: calc(7px * var(--rc-font-scale)); opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.report-metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 10px; gap: 8px; }
.report-metric-grid > div { text-align: center; padding: 8px; border: 1px solid #e3e9f1; border-radius: 8px; background: #f8fafc; display: grid; gap: 1px; }
.report-metric-grid strong { color: var(--rc-primary); font-size: calc(13px * var(--rc-font-scale)); }
.report-metric-grid span { color: #64748b; font-size: calc(7px * var(--rc-font-scale)); }
.grade-legend-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(80px,1fr)); gap: 7px; padding: 10px; }
.grade-legend-grid > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; padding: 7px; border: 1px solid #e3e9f1; border-radius: 8px; }
.grade-legend-grid b { grid-row: 1 / span 2; display: grid; place-items: center; width: 27px; border-radius: 7px; background: var(--rc-primary); color: #fff; }
.grade-legend-grid span, .grade-legend-grid small { font-size: calc(7px * var(--rc-font-scale)); }
.grade-legend-grid small { color: #64748b; }
.report-rating-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.report-rating-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; padding: 6px 10px; }
.report-rating-list > div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 5px; border-bottom: 1px dashed #dbe3ed; font-size: calc(8px * var(--rc-font-scale)); }
.report-rating-list strong { color: var(--rc-primary); }
.report-comment-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 11px; }
.report-comment-card { min-height: 76px; padding: 10px; border-radius: 9px; border: 1px solid #e0e7ef; background: #f8fafc; }
.report-comment-card span { display: block; color: var(--rc-primary); font-size: calc(7.2px * var(--rc-font-scale)); font-weight: 850; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.report-comment-card p { margin: 0; font-size: calc(8.7px * var(--rc-font-scale)); line-height: 1.55; }
.report-signature-row { margin-top: 20px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; break-inside: avoid; }
.report-signature-box { min-height: 61px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 5px; font-size: calc(8px * var(--rc-font-scale)); }
.report-signature-box img { max-width: 100px; max-height: 44px; object-fit: contain; }
.signature-line { width: 88%; height: 1px; background: #64748b; display: block; margin-top: auto; }
.report-document-footer { margin-top: 18px; padding-top: 9px; border-top: 1px solid #cbd5e1; display: flex; justify-content: space-between; gap: 12px; color: #64748b; font-size: calc(7px * var(--rc-font-scale)); }
.report-document.template-modern .report-document-header { border-radius: 14px; padding: 14px; border: 0; background: linear-gradient(130deg,color-mix(in srgb,var(--rc-primary) 10%,#fff),color-mix(in srgb,var(--rc-secondary) 9%,#fff)); }
.report-document.template-modern .report-document-header::after { display: none; }
.report-document.template-classic { color: #2b2118; }
.report-document.template-classic .report-document-header { border: 4px double var(--rc-primary); padding: 13px; }
.report-document.template-classic .report-section { border-radius: 0; }
.report-document.template-ministry .report-document-header { border-bottom: 4px double var(--rc-secondary); }
.report-document.template-ministry .report-section { border-radius: 2px; }
.report-document.template-minimal .report-section { border-left: 0; border-right: 0; border-radius: 0; }
.report-document.template-minimal .report-section-heading { background: transparent; padding-left: 0; padding-right: 0; }
.report-document.borders-ruled .report-section { border-radius: 0; border-color: #64748b; }
.report-document.borders-ruled .report-academic-table td, .report-document.borders-ruled .report-academic-table th { border: 1px solid #94a3b8; }
.report-document.borders-minimal .report-section { border-left: 0; border-right: 0; border-radius: 0; }
.report-document.density-compact .report-academic-table td, .report-document.density-compact .report-academic-table th { padding: 4px; }
.report-document.density-spacious .report-academic-table td, .report-document.density-spacious .report-academic-table th { padding: 10px 6px; }
@media (max-width: 850px) {
  .report-document-stage { justify-content: flex-start; }
}
@media print {
  @page { margin: 0; size: A4 portrait; }
  body { background: #fff !important; }
  .report-document-stage { display: block; padding: 0; background: #fff; overflow: visible; }
  .report-document { width: 100% !important; min-height: 0 !important; box-shadow: none !important; margin: 0 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .report-document.orientation-landscape { width: 100% !important; }
  .report-section, .report-summary-block, .report-signature-row { break-inside: avoid; }
}

/* Premium public homepage */
.sk-home-premium { background: #f7f9fd; color: #0f172a; overflow: hidden; }
.premium-hero { position: relative; min-height: 790px; padding: 132px clamp(22px,5vw,76px) 90px; background: #06101f; color: #fff; overflow: hidden; }
.premium-hero::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(148,163,184,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.055) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom,black,transparent 82%); }
.premium-hero-orb { position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; }
.orb-one { width:580px;height:580px;right:-180px;top:-210px;background:radial-gradient(circle,rgba(59,130,246,.28),transparent 68%); }
.orb-two { width:520px;height:520px;left:36%;bottom:-370px;background:radial-gradient(circle,rgba(20,184,166,.25),transparent 68%); }
.premium-hero-grid { position:relative; z-index:1; max-width:1480px; margin:0 auto; display:grid; grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr); gap:clamp(38px,5vw,78px); align-items:center; }
.premium-announce { display:inline-flex; align-items:center; gap:9px; padding:6px 10px 6px 6px; border:1px solid rgba(148,163,184,.22); border-radius:999px; background:rgba(15,23,42,.68); backdrop-filter:blur(12px); font-size:.76rem; color:#cbd5e1; }
.premium-announce span { padding:4px 7px; border-radius:999px; background:#2563eb; color:white; font-size:.65rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.premium-announce i { color:#60a5fa; }
.premium-eyebrow { margin:24px 0 10px; text-transform:uppercase; letter-spacing:.16em; font-weight:850; font-size:.7rem; color:#60a5fa; }
.premium-hero h1 { margin:0; max-width:780px; font-size:clamp(3rem,5.6vw,6.4rem); line-height:.96; letter-spacing:-.055em; font-weight:850; }
.premium-hero h1 em { font-style:normal; color:transparent; background:linear-gradient(90deg,#93c5fd,#5eead4); background-clip:text; -webkit-background-clip:text; }
.premium-lead { margin:27px 0 0; max-width:700px; font-size:clamp(1rem,1.25vw,1.22rem); line-height:1.72; color:#aebdd0; }
.premium-hero-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:32px; }
.btn.premium-primary { background:linear-gradient(135deg,#2563eb,#4f46e5); color:white; border-color:transparent; box-shadow:0 14px 35px rgba(37,99,235,.28); }
.btn.premium-primary:hover { transform:translateY(-2px); box-shadow:0 20px 42px rgba(37,99,235,.36); }
.btn.premium-secondary { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); color:inherit; backdrop-filter:blur(10px); }
.premium-trust-row { display:flex; gap:16px 25px; flex-wrap:wrap; margin-top:27px; color:#8fa2bb; font-size:.76rem; }
.premium-trust-row i { color:#5eead4; font-style:normal; margin-right:5px; }
.premium-product-visual { position:relative; min-width:0; }
.premium-window { border:1px solid rgba(148,163,184,.22); border-radius:22px; background:rgba(15,23,42,.72); box-shadow:0 45px 100px rgba(0,0,0,.42); overflow:hidden; transform:perspective(1300px) rotateY(-3deg) rotateX(1deg); }
.premium-window-bar { height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 13px; border-bottom:1px solid rgba(148,163,184,.14); color:#71839b; font-size:.63rem; }
.premium-window-bar > div { display:flex; gap:5px; }.premium-window-bar i { width:7px;height:7px;border-radius:50%;background:#475569;display:block; }.premium-window-bar b { color:#5eead4; font-weight:700; }
.premium-window-shell { display:grid; grid-template-columns:138px minmax(0,1fr); min-height:510px; }
.premium-demo-nav { padding:16px 10px; background:#081321; border-right:1px solid rgba(148,163,184,.12); display:flex; flex-direction:column; gap:5px; }
.premium-demo-logo { display:flex; align-items:center; gap:8px; margin:2px 7px 16px; }.premium-demo-logo img{width:28px;height:28px;border-radius:9px}.premium-demo-logo strong{font-size:.78rem}
.premium-demo-nav > span { display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;color:#71839b;font-size:.63rem; }.premium-demo-nav > span.active{background:rgba(37,99,235,.17);color:#93c5fd}.premium-demo-nav > span b{font-weight:650}
.premium-demo-sync { margin-top:auto;padding:9px;border:1px solid rgba(20,184,166,.18);background:rgba(20,184,166,.07);border-radius:9px;display:flex;gap:7px;align-items:center}.premium-demo-sync i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.12)}.premium-demo-sync div{display:grid}.premium-demo-sync b{font-size:.55rem;color:#d5faf1}.premium-demo-sync small{font-size:.48rem;color:#6ee7b7}
.premium-demo-content { padding:18px; background:linear-gradient(145deg,#0b1727,#0c1421); min-width:0; }
.premium-demo-content header { display:flex;justify-content:space-between;align-items:center;gap:10px}.premium-demo-content header small{color:#60738e;font-size:.52rem}.premium-demo-content header h3{font-size:.84rem;margin:2px 0 0}.premium-demo-actions{display:flex;gap:6px;align-items:center}.premium-demo-actions span,.premium-demo-actions b{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#132237;color:#9ab0ca;font-size:.56rem}.premium-demo-actions b{border-radius:50%;background:#2563eb;color:#fff}
.premium-demo-banner { display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px;margin-top:16px;border-radius:14px;background:linear-gradient(120deg,rgba(37,99,235,.24),rgba(20,184,166,.11));border:1px solid rgba(96,165,250,.15)}.premium-demo-banner small{font-size:.5rem;color:#7dd3fc}.premium-demo-banner strong{display:block;font-size:.84rem;margin-top:4px}.premium-demo-banner p{font-size:.51rem;color:#7f93ad;margin:4px 0 0;max-width:280px}.readiness-ring{width:63px;height:63px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#34d399 0 92%,rgba(255,255,255,.08) 92%);position:relative}.readiness-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#102033}.readiness-ring span{position:relative;font-size:.78rem;font-weight:850}.readiness-ring small{font-size:.45rem;color:#9fb0c4}
.premium-demo-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:11px}.premium-demo-metrics article{padding:10px;border:1px solid rgba(148,163,184,.11);border-radius:10px;background:rgba(15,29,47,.86)}.premium-demo-metrics span,.premium-demo-metrics small{font-size:.45rem;color:#667b95}.premium-demo-metrics strong{display:block;font-size:.9rem;margin:4px 0 2px}.premium-demo-metrics small{color:#4f647d}
.premium-demo-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:9px;margin-top:9px}.premium-demo-grid article{min-width:0;padding:11px;border:1px solid rgba(148,163,184,.11);border-radius:11px;background:rgba(15,29,47,.82)}.demo-card-title{display:flex;justify-content:space-between;gap:8px;align-items:center}.demo-card-title b{font-size:.58rem}.demo-card-title span{font-size:.44rem;color:#5e738d}.premium-bars{height:90px;display:flex;align-items:flex-end;gap:6px;padding-top:15px}.premium-bars i{height:var(--h);flex:1;border-radius:4px 4px 1px 1px;background:linear-gradient(#60a5fa,#2563eb)}.demo-card-foot{display:flex;justify-content:space-between;gap:7px;font-size:.43rem;color:#60738e}.demo-card-foot b{color:#34d399}.premium-community-list{list-style:none;padding:6px 0 0;margin:0;display:grid;gap:7px}.premium-community-list li{display:flex;gap:7px;align-items:center;padding:6px;border-radius:8px;background:#101f32}.premium-community-list li>i{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:#182b43;font-style:normal;font-size:.66rem}.premium-community-list div{display:grid}.premium-community-list b{font-size:.52rem}.premium-community-list small{font-size:.43rem;color:#5e738d}
.premium-float-card { position:absolute;display:flex;gap:10px;align-items:center;padding:12px 13px;border:1px solid rgba(148,163,184,.25);border-radius:13px;background:rgba(8,19,33,.88);backdrop-filter:blur(16px);box-shadow:0 18px 45px rgba(0,0,0,.32)}.premium-float-card>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:rgba(52,211,153,.12);color:#5eead4}.premium-float-card div{display:grid}.premium-float-card b{font-size:.66rem}.premium-float-card small{color:#71849c;font-size:.52rem}.premium-float-card>i{margin-left:8px;color:#5eead4;font-size:.55rem;font-style:normal;font-weight:800}.float-offline{left:-38px;bottom:-34px}.float-report{right:-22px;top:72px}.float-report>span{background:rgba(99,102,241,.14);color:#a5b4fc}.float-report>i{color:#a5b4fc}
.premium-signal-bar { max-width:1280px;margin:-34px auto 0;position:relative;z-index:3;display:flex;justify-content:space-around;align-items:center;gap:18px;padding:21px 28px;border:1px solid #e1e8f2;border-radius:18px;background:#fff;box-shadow:0 20px 55px rgba(15,23,42,.09)}.premium-signal-bar div{display:grid;gap:3px}.premium-signal-bar small{font-size:.65rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.1em}.premium-signal-bar strong{font-size:.86rem}.premium-signal-bar>i{width:1px;height:30px;background:#e2e8f0}
.premium-section { max-width:1380px;margin:0 auto;padding:110px clamp(22px,4vw,56px); }.premium-section-heading{max-width:800px;margin:0 auto 48px;text-align:center}.premium-section-heading.left{margin-left:0;text-align:left}.premium-section-heading>span{display:block;color:#2563eb;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;font-weight:850}.premium-section-heading h2{font-size:clamp(2.2rem,4vw,4.3rem);line-height:1.04;letter-spacing:-.045em;margin:10px 0 18px}.premium-section-heading p{color:#64748b;font-size:1.05rem;line-height:1.7}
.persona-console{border:1px solid #dfe7f1;border-radius:24px;background:#fff;box-shadow:0 30px 80px rgba(15,23,42,.09);overflow:hidden}.persona-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #e5ebf3;padding:8px;background:#f8fafc}.persona-tabs button{border:0;background:transparent;padding:14px 10px;border-radius:12px;font:inherit;font-weight:750;color:#64748b;cursor:pointer}.persona-tabs button.active{background:#fff;color:#1d4ed8;box-shadow:0 7px 20px rgba(15,23,42,.08)}.persona-content{display:grid;grid-template-columns:.82fr 1.18fr;min-height:480px}.persona-copy{padding:clamp(30px,5vw,70px);display:flex;flex-direction:column;justify-content:center;position:relative}.persona-number{position:absolute;right:30px;top:24px;font-size:4rem;font-weight:950;color:#eef2f7}.persona-copy h3{font-size:clamp(2rem,3.4vw,3.7rem);line-height:1.02;letter-spacing:-.045em;margin:0 0 18px}.persona-copy>p:not(.premium-eyebrow){color:#64748b;line-height:1.7;font-size:1rem}.persona-copy .btn{align-self:flex-start;margin-top:20px}.persona-screen{margin:28px;background:#071422;border-radius:18px;color:#fff;overflow:hidden;box-shadow:0 30px 60px rgba(15,23,42,.25)}.persona-screen-top{height:39px;display:flex;align-items:center;gap:5px;padding:0 12px;border-bottom:1px solid rgba(148,163,184,.13)}.persona-screen-top span{width:7px;height:7px;border-radius:50%;background:#334155}.persona-screen-top b{margin-left:auto;color:#64748b;font-size:.6rem}.persona-dashboard{padding:28px}.persona-kpi{padding:22px;border-radius:15px;background:linear-gradient(135deg,rgba(37,99,235,.25),rgba(20,184,166,.12));border:1px solid rgba(96,165,250,.15)}.persona-kpi span{color:#93c5fd;font-size:.7rem}.persona-kpi strong{display:block;font-size:2.3rem;margin:8px 0}.persona-kpi i{display:block;height:6px;border-radius:99px;background:linear-gradient(90deg,#60a5fa 0 86%,rgba(255,255,255,.09) 86%)}.persona-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.persona-mini-grid article{padding:16px;border-radius:12px;background:#102033;border:1px solid rgba(148,163,184,.1);display:grid}.persona-mini-grid b{font-size:1.1rem}.persona-mini-grid small{color:#64748b}.persona-task-list{display:grid;gap:8px;margin-top:13px}.persona-task-list span{padding:11px;border-radius:10px;background:#0d1c2d;color:#a7b8cb;font-size:.75rem}.persona-task-list i{font-style:normal;color:#5eead4;margin-right:8px}.offline-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border-radius:999px;background:rgba(20,184,166,.11);color:#5eead4;font-size:.65rem}.offline-pill i{width:7px;height:7px;border-radius:50%;background:#34d399}.persona-dashboard h4{font-size:1.2rem;margin:22px 0}.teacher-score-row{display:grid;grid-template-columns:130px minmax(0,1fr) 35px;gap:10px;align-items:center;padding:15px 0;border-bottom:1px solid rgba(148,163,184,.11)}.teacher-score-row>span{font-size:.75rem}.teacher-score-row input{accent-color:#34d399}.teacher-score-row>b{font-size:.8rem}.teacher-score-row>em{grid-column:2 / -1;color:#5eead4;font-style:normal;font-size:.6rem}.attendance-pills{display:flex;gap:5px;flex-wrap:wrap}.attendance-pills i{font-style:normal;padding:6px 8px;border-radius:7px;background:#172a40;color:#6f849c;font-size:.58rem}.attendance-pills i.active{background:rgba(52,211,153,.13);color:#5eead4}.report-mini-head{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px}.report-mini-head>span{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#2563eb;font-weight:900}.report-mini-head div{display:grid}.report-mini-head small{color:#64748b}.report-mini-head em{font-style:normal;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#0f766e;font-weight:900}.report-mini-student{margin-top:20px;padding:14px;border-radius:10px;background:#102033;display:grid}.report-mini-student span{color:#64748b;font-size:.65rem}.report-mini-table{display:grid;gap:7px;margin-top:12px}.report-mini-table i{height:18px;border-radius:4px;background:linear-gradient(90deg,#1d4ed8 0 35%,#172a40 35%)}.report-mini-comment{margin-top:14px;padding:13px;border-left:3px solid #5eead4;background:#102033}.report-mini-comment small{color:#5eead4}.report-mini-comment p{font-size:.72rem;line-height:1.5;color:#a8b8ca}.operator-map{padding:20px;border-radius:14px;background:radial-gradient(circle at center,rgba(37,99,235,.25),transparent 66%),#0d1c2d}.operator-map>span{font-size:.7rem;color:#93c5fd}.operator-map>div{height:130px;position:relative}.operator-map i{position:absolute;width:10px;height:10px;border-radius:50%;background:#34d399;box-shadow:0 0 0 7px rgba(52,211,153,.1)}.operator-map i:nth-child(1){left:18%;top:42%}.operator-map i:nth-child(2){left:45%;top:20%}.operator-map i:nth-child(3){left:70%;top:48%}.operator-map i:nth-child(4){left:37%;top:75%}.operator-map i:nth-child(5){left:83%;top:18%}.license-row{margin-top:12px;padding:13px;border-radius:11px;background:#102033;display:grid;grid-template-columns:1fr auto;gap:4px}.license-row span{font-size:.72rem}.license-row b{color:#5eead4;font-size:.65rem}.license-row em{grid-column:1 / -1;color:#64748b;font-size:.6rem;font-style:normal}
.premium-offline-section{max-width:none;background:#06101f;color:#fff}.offline-story{max-width:1380px;margin:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(450px,1.1fr);gap:70px;align-items:center}.offline-story-copy h2{font-size:clamp(2.5rem,4.5vw,5rem);letter-spacing:-.05em;line-height:.99;margin:10px 0 24px}.offline-story-copy>p{color:#9fb0c4;line-height:1.75;font-size:1.04rem}.offline-feature-list{display:grid;gap:13px;margin:28px 0}.offline-feature-list>div{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(148,163,184,.12)}.offline-feature-list i{font-style:normal;color:#5eead4;font-size:.7rem;font-weight:850}.offline-feature-list span{display:grid}.offline-feature-list b{font-size:.9rem}.offline-feature-list small{color:#71849b;margin-top:3px}.offline-story .sk-text-link{color:#93c5fd}.offline-device-stage{position:relative;min-height:560px;display:grid;place-items:center}.offline-phone{width:260px;border:7px solid #1e293b;border-radius:36px;background:#050b14;box-shadow:0 40px 90px rgba(0,0,0,.48);padding:7px;position:relative;z-index:2}.phone-speaker{width:74px;height:18px;background:#111827;border-radius:0 0 12px 12px;position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:2}.phone-screen{min-height:500px;border-radius:25px;padding:19px 14px;background:linear-gradient(165deg,#0c1a2b,#07111d)}.phone-status{display:flex;justify-content:space-between;font-size:.58rem;color:#7f93a9}.phone-status b{color:#fbbf24}.phone-brand{display:flex;align-items:center;gap:9px;margin-top:25px}.phone-brand img{width:35px;height:35px;border-radius:11px}.phone-brand div{display:grid}.phone-brand b{font-size:.8rem}.phone-brand small{color:#64748b;font-size:.56rem}.phone-class{margin-top:20px;padding:16px;border-radius:14px;background:linear-gradient(135deg,rgba(37,99,235,.27),rgba(20,184,166,.12));display:grid}.phone-class small{color:#93c5fd;font-size:.56rem}.phone-class strong{font-size:1.45rem;margin-top:4px}.phone-class span{font-size:.6rem;color:#7f93a9}.phone-attendance{display:grid;gap:8px;margin-top:13px}.phone-attendance>div{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:11px;border-radius:10px;background:#102033;font-size:.63rem}.phone-attendance b{font-size:.52rem;padding:5px 7px;border-radius:999px;color:#5eead4;background:rgba(52,211,153,.1)}.phone-attendance b.late{color:#fbbf24;background:rgba(251,191,36,.1)}.phone-screen button{margin-top:16px;width:100%;border:0;padding:11px;border-radius:10px;background:rgba(20,184,166,.12);color:#5eead4;font-size:.62rem}.sync-orbit{position:absolute;left:8%;top:22%;width:110px;height:110px;border-radius:50%;border:1px dashed rgba(94,234,212,.38);display:grid;place-items:center;text-align:center;background:rgba(7,17,29,.75);box-shadow:0 0 0 20px rgba(20,184,166,.03)}.sync-orbit i{position:absolute;inset:12px;border-radius:50%;border:2px solid transparent;border-top-color:#5eead4;border-right-color:#5eead4}.sync-orbit span{font-size:1.6rem;font-weight:900}.sync-orbit small{position:absolute;bottom:24px;color:#64748b;font-size:.55rem}.offline-cloud{position:absolute;right:1%;bottom:13%;padding:18px;border:1px solid rgba(148,163,184,.18);border-radius:15px;background:rgba(13,28,45,.82);backdrop-filter:blur(15px);display:grid;min-width:190px}.offline-cloud span{font-size:1.5rem}.offline-cloud b{font-size:.75rem;margin-top:5px}.offline-cloud small{color:#71849b;font-size:.55rem;margin-top:3px}
.premium-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.module-feature{min-height:350px;border:1px solid #e0e7f0;border-radius:20px;padding:26px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.055);display:flex;flex-direction:column;overflow:hidden;position:relative}.module-feature:hover{transform:translateY(-4px);box-shadow:0 25px 60px rgba(15,23,42,.09);transition:.2s ease}.module-feature>span{margin-top:20px;color:#2563eb;font-size:.67rem;font-weight:850;text-transform:uppercase;letter-spacing:.11em}.module-feature h3{font-size:1.5rem;line-height:1.15;margin:8px 0 12px;letter-spacing:-.025em}.module-feature>p{color:#64748b;line-height:1.65;font-size:.88rem}.module-feature-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#dbeafe;color:#1d4ed8;font-size:1.1rem;font-weight:900}.module-feature-icon.green{background:#d1fae5;color:#047857}.module-feature-icon.amber{background:#fef3c7;color:#b45309}.module-feature-icon.cyan{background:#cffafe;color:#0e7490}.module-feature-icon.violet{background:#ede9fe;color:#6d28d9}.module-feature-icon.blue{background:#e0f2fe;color:#0369a1}.module-visual-bars{height:90px;margin-top:auto;display:flex;gap:7px;align-items:flex-end}.module-visual-bars i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(#93c5fd,#2563eb)}.module-visual-bars i:nth-child(1){height:42%}.module-visual-bars i:nth-child(2){height:68%}.module-visual-bars i:nth-child(3){height:55%}.module-visual-bars i:nth-child(4){height:88%}.module-visual-bars i:nth-child(5){height:76%}.comment-bubbles{margin-top:auto;display:grid;gap:8px}.comment-bubbles p{margin:0;padding:10px 12px;border-radius:12px 12px 12px 3px;background:#f0fdf4;color:#166534;font-size:.72rem}.comment-bubbles p:last-child{background:#eef2ff;color:#3730a3;border-radius:12px 12px 3px 12px}.studio-mini-palettes{display:flex;align-items:center;gap:8px;margin-top:auto}.studio-mini-palettes i{width:38px;height:38px;border-radius:10px;background:#2563eb}.studio-mini-palettes i:nth-child(2){background:#0f766e}.studio-mini-palettes i:nth-child(3){background:#f59e0b}.studio-mini-palettes b{margin-left:auto;font-size:2rem;color:#334155}.community-mini{margin-top:auto;padding:15px;border-radius:14px;background:#ecfeff;display:grid;grid-template-columns:auto 1fr;gap:0 10px}.community-mini b{font-size:2rem;color:#0e7490;grid-row:1 / span 2}.community-mini span{font-weight:800}.community-mini p{grid-column:1 / -1;color:#64748b;font-size:.7rem}.license-mini{margin-top:auto;padding:14px;border-radius:13px;background:#f5f3ff;display:grid;grid-template-columns:1fr auto;gap:8px}.license-mini span{font-size:.75rem}.license-mini b{color:#6d28d9;font-size:.67rem}.license-mini i{grid-column:1 / -1;height:5px;border-radius:999px;background:linear-gradient(90deg,#8b5cf6 0 82%,#ddd6fe 82%)}.operation-checks{margin-top:auto;display:flex;gap:7px;flex-wrap:wrap}.operation-checks span{padding:7px 9px;border-radius:999px;background:#f0f9ff;color:#0369a1;font-size:.65rem}.operation-checks i{font-style:normal;color:#0ea5e9}
.premium-report-section{max-width:none;background:#edf2fa}.premium-report-showcase{max-width:1380px;margin:auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.report-showcase-copy h2{font-size:clamp(2.4rem,4.5vw,4.9rem);line-height:1;letter-spacing:-.05em;margin:10px 0 22px}.report-showcase-copy>p{color:#64748b;line-height:1.7}.report-showcase-copy ul{padding:0;list-style:none;display:grid;gap:10px;margin:25px 0}.report-showcase-copy li::before{content:"✓";display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#d1fae5;color:#047857;margin-right:9px;font-size:.68rem;font-weight:900}.report-showcase-paper{background:#fff;border-radius:4px;padding:36px;box-shadow:0 35px 85px rgba(15,23,42,.18);transform:rotate(1deg);border-top:7px solid #1d4ed8}.showcase-paper-head{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;padding-bottom:17px;border-bottom:2px solid #1d4ed8}.showcase-paper-head>span{width:58px;height:58px;display:grid;place-items:center;border-radius:12px;background:#1d4ed8;color:#fff;font-weight:900}.showcase-paper-head div{display:grid}.showcase-paper-head b{font-size:1.03rem;color:#1d4ed8;letter-spacing:.05em}.showcase-paper-head small{color:#64748b}.showcase-paper-head em{font-style:normal;font-size:.68rem;text-align:center;padding:9px;border-radius:9px;background:#eff6ff;color:#1d4ed8}.showcase-student-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.showcase-student-grid span{padding:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:7px;display:grid}.showcase-student-grid small{color:#64748b;font-size:.6rem;text-transform:uppercase}.showcase-student-grid b{font-size:.78rem}.showcase-table{margin-top:13px;border:1px solid #dbe3ed;border-radius:7px;overflow:hidden}.showcase-table>div{display:grid;grid-template-columns:2fr repeat(4,1fr)}.showcase-table i{font-style:normal;padding:8px;border-bottom:1px solid #e2e8f0;text-align:center;font-size:.66rem}.showcase-table i:first-child{text-align:left}.showcase-table .head{background:#1d4ed8;color:#fff;font-weight:800}.showcase-remarks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:13px}.showcase-remarks div{padding:12px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc}.showcase-remarks small{color:#1d4ed8;font-size:.56rem;text-transform:uppercase;font-weight:800}.showcase-remarks p{font-size:.68rem;line-height:1.45}.report-showcase-paper footer{display:flex;justify-content:space-between;margin-top:17px;padding-top:9px;border-top:1px solid #cbd5e1;color:#64748b;font-size:.58rem}.report-showcase-paper footer b{color:#0f766e}
.premium-faq-section{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px}.premium-faq-grid{display:grid;gap:10px}.premium-faq{border:1px solid #dfe7f1;border-radius:15px;background:#fff;overflow:hidden}.premium-faq button{width:100%;border:0;background:transparent;padding:19px 20px;display:flex;justify-content:space-between;gap:15px;text-align:left;font:inherit;font-weight:800;cursor:pointer}.premium-faq button i{font-style:normal;font-size:1.35rem;color:#2563eb;transition:.2s}.premium-faq.open button i{transform:rotate(45deg)}.premium-faq div p{margin:0;padding:0 20px 20px;color:#64748b;line-height:1.7}.premium-final-cta{max-width:1380px;margin:30px auto 100px;padding:clamp(36px,6vw,80px);border-radius:28px;background:radial-gradient(circle at 90% 20%,rgba(59,130,246,.28),transparent 35%),#06101f;color:#fff;display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center}.premium-final-cta span{color:#5eead4;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:850}.premium-final-cta h2{font-size:clamp(2.2rem,4vw,4.4rem);line-height:1;letter-spacing:-.045em;margin:10px 0 17px;max-width:880px}.premium-final-cta p{color:#8fa2bb;max-width:780px;line-height:1.7}.premium-final-cta>div:last-child{display:grid;gap:10px;min-width:240px}
@media(max-width:1150px){.premium-hero-grid{grid-template-columns:1fr}.premium-product-visual{max-width:900px;margin:auto;width:100%}.premium-hero h1{max-width:900px}.premium-window{transform:none}.premium-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.offline-story,.premium-report-showcase{grid-template-columns:1fr}.offline-story-copy{max-width:850px}.offline-device-stage{max-width:700px;width:100%;margin:auto}.premium-faq-section{grid-template-columns:1fr}.premium-faq-section .premium-section-heading{margin-bottom:0}.premium-final-cta{grid-template-columns:1fr}.premium-final-cta>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.premium-hero{padding-top:105px}.premium-hero-grid{gap:55px}.premium-window-shell{grid-template-columns:85px minmax(0,1fr)}.premium-demo-nav>span b,.premium-demo-logo strong,.premium-demo-sync div{display:none}.premium-demo-logo{justify-content:center;margin-inline:0}.premium-demo-nav>span{justify-content:center;font-size:.8rem}.premium-demo-metrics{grid-template-columns:repeat(2,1fr)}.premium-demo-grid{grid-template-columns:1fr}.premium-signal-bar{margin:0;border-radius:0;display:grid;grid-template-columns:repeat(2,1fr)}.premium-signal-bar>i{display:none}.persona-tabs{grid-template-columns:repeat(2,1fr)}.persona-content{grid-template-columns:1fr}.persona-screen{margin-top:0}.premium-module-grid{grid-template-columns:1fr}.premium-report-showcase{gap:40px}.report-showcase-paper{padding:20px;transform:none}.premium-final-cta{border-radius:0;margin-bottom:0}.premium-faq-section{gap:30px}}
@media(max-width:560px){.premium-hero{padding-inline:18px}.premium-hero h1{font-size:2.75rem}.premium-hero-actions .btn{width:100%}.premium-window-shell{grid-template-columns:58px minmax(0,1fr)}.premium-demo-content{padding:11px}.premium-demo-banner{padding:12px}.premium-demo-banner p{display:none}.premium-demo-metrics{gap:5px}.premium-demo-metrics article{padding:7px}.premium-float-card{display:none}.premium-signal-bar{grid-template-columns:1fr}.premium-section{padding:78px 18px}.persona-tabs{grid-template-columns:1fr}.persona-copy{padding:35px 22px}.persona-screen{margin:12px}.persona-dashboard{padding:18px}.persona-mini-grid{grid-template-columns:1fr}.teacher-score-row{grid-template-columns:1fr}.teacher-score-row>em{grid-column:auto}.offline-device-stage{transform:scale(.9);margin-block:-25px}.sync-orbit{left:-4%}.offline-cloud{right:-8%}.showcase-student-grid,.showcase-remarks{grid-template-columns:1fr}.report-showcase-paper{overflow:auto}.premium-final-cta{padding:55px 20px}.premium-final-cta>div:last-child{grid-template-columns:1fr}}

.dark .sk-home-premium { background:#07111e; color:#e5edf7; }

/* Skooltime 2026 visual refinement */
body { font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif; font-size: 16px; letter-spacing: -.012em; }
.sk-public-nav { background: rgba(248, 251, 255, .78); border-bottom: 1px solid rgba(15, 23, 42, .07); backdrop-filter: blur(20px); }
.sk-public-nav-inner { max-width: 1420px; min-height: 78px; padding-inline: clamp(20px, 4vw, 64px); }
.sk-public-links { gap: 28px; font-size: .91rem; font-weight: 600; }
.sk-public-links > a:not(.btn) { color: #334155; }
.sk-public-links > a:not(.btn):hover { color: #0e7490; }
.sk-wordmark strong { font-size: 1.18rem; letter-spacing: -.045em; }
.sk-wordmark small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.premium-hero { min-height: 820px; padding-top: 156px; background: radial-gradient(circle at 80% 18%, rgba(45, 212, 191, .20), transparent 26%), radial-gradient(circle at 16% 2%, rgba(59, 130, 246, .23), transparent 30%), #06101f; }
.premium-hero h1 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(3.4rem, 6.1vw, 7.1rem); font-weight: 700; line-height: .94; letter-spacing: -.06em; }
.premium-hero h1 em { background-image: linear-gradient(95deg, #d9f99d 0%, #67e8f9 58%, #93c5fd 100%); }
.premium-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a5f3fc; }
.premium-hero .premium-lead { max-width: 600px; font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.72; color: #cbd5e1; }
.premium-announce { border-color: rgba(165, 243, 252, .22); background: rgba(15, 23, 42, .42); box-shadow: 0 12px 36px rgba(0, 0, 0, .16); }
.premium-hero-actions .btn { min-height: 50px; padding-inline: 22px; font-weight: 700; border-radius: 14px; }
.premium-hero-actions .premium-primary { box-shadow: 0 18px 38px rgba(45, 212, 191, .18); }
.premium-product-visual { filter: drop-shadow(0 32px 60px rgba(2, 8, 23, .32)); }
.premium-window { border-color: rgba(148, 163, 184, .24); border-radius: 24px; }
.premium-section { padding-block: 112px; }
.premium-section-heading h2, .premium-final-cta h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; letter-spacing: -.045em; }
.premium-section-heading h2 { font-size: clamp(2.45rem, 4vw, 4.5rem); line-height: 1.02; }
.premium-module-card, .persona-copy, .premium-faq-item { border-radius: 20px; }
.sk-public-footer-bottom { gap: 18px; line-height: 1.55; }
.sk-app-footer { font-size: .76rem; }
@media (max-width: 820px) { .sk-public-nav-inner { min-height: 68px; } .premium-hero { min-height: auto; padding-top: 118px; } .premium-section { padding-block: 78px; } }

/* Shared premium surfaces: access, result portal and application workspace */
body.is-public { background: #f5f8fc; }
body.is-public .public-main { min-height: calc(100vh - 78px); }
.login-shell, .register-shell { max-width: 1220px; margin-inline: auto; padding: clamp(28px, 5vw, 74px) clamp(20px, 4vw, 56px); }
.auth-copy { background: linear-gradient(145deg, #071a35 0%, #0f766e 100%); box-shadow: 0 28px 75px rgba(15, 23, 42, .22); }
.auth-copy h1 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.7rem, 4vw, 4.6rem); line-height: 1; letter-spacing: -.05em; }
.auth-form-card, .portal-card { border: 1px solid rgba(148, 163, 184, .24); box-shadow: 0 24px 70px rgba(15, 23, 42, .10); }
.auth-form-card h1, .portal-card h1, .portal-card h2 { font-family: "Playfair Display", Georgia, serif; letter-spacing: -.04em; }
.auth-form-card input, .auth-form-card select, .auth-form-card textarea, .portal-card input, .portal-card select { min-height: 50px; border-radius: 12px; border-color: #d7e0ec; font-size: 1rem; }
.auth-form-card input:focus, .auth-form-card select:focus, .portal-card input:focus, .portal-card select:focus { border-color: #0d9488; box-shadow: 0 0 0 4px rgba(13, 148, 136, .12); }
.portal-hero { padding: clamp(46px, 8vw, 100px) 20px; background: radial-gradient(circle at 85% 10%, rgba(20, 184, 166, .16), transparent 28%), linear-gradient(180deg, #eef7ff 0%, #f8fafc 70%); }
.portal-card { max-width: 720px; padding: clamp(28px, 5vw, 52px); border-radius: 28px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(16px); }
.portal-card .btn, .auth-form-card .btn { min-height: 50px; border-radius: 13px; font-weight: 700; }
body.is-authenticated { font-size: 15px; }
body.is-authenticated h1 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 3.2vw, 3.3rem); letter-spacing: -.045em; }
body.is-authenticated h2 { font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.035em; }
body.is-authenticated .card { border: 1px solid rgba(148, 163, 184, .18); box-shadow: 0 14px 34px rgba(15, 23, 42, .055); }
body.is-authenticated .btn { border-radius: 11px; font-weight: 700; }
.sk-app-footer { flex-wrap: wrap; gap: 12px 22px; line-height: 1.5; }
@media (max-width: 700px) { .login-shell, .register-shell { padding: 24px 16px; } .portal-card { border-radius: 20px; } }

/* Beta launch and hero readability */
.premium-hero { min-height: 710px; padding-top: 96px; padding-bottom: 70px; }
.premium-hero-grid { align-items: start; }
.premium-hero h1 { color: #f8fafc !important; text-shadow: 0 2px 20px rgba(2, 6, 23, .28); }
.premium-hero h1 em { color: transparent !important; }
.premium-pricing-section { background: linear-gradient(180deg, #f8fbff 0%, #eef9f8 100%); }
.beta-pricing-card { max-width: 1120px; margin: 48px auto 0; display: grid; grid-template-columns: 1fr 1.15fr auto; gap: 34px; align-items: center; padding: clamp(26px, 5vw, 52px); border: 1px solid rgba(13, 148, 136, .22); border-radius: 28px; background: #fff; box-shadow: 0 28px 70px rgba(15, 118, 110, .12); }
.beta-plan-label { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: #ccfbf1; color: #115e59; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.beta-pricing-card h3 { margin: 16px 0 5px; font-family: "Playfair Display", Georgia, serif; font-size: 2.35rem; letter-spacing: -.05em; }
.beta-price { margin: 0 0 12px; color: #0f766e; font-size: 3.1rem; font-weight: 800; letter-spacing: -.07em; }
.beta-price small { color: #64748b; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.beta-pricing-card ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; color: #334155; }
.beta-pricing-card li { position: relative; padding-left: 25px; line-height: 1.45; }
.beta-pricing-card li::before { content: "✓"; position: absolute; left: 0; color: #0d9488; font-weight: 900; }
@media (max-width: 900px) { .beta-pricing-card { grid-template-columns: 1fr; } .premium-hero { min-height: auto; padding-top: 82px; } }

/* Keep access pages compact and visually anchored at every viewport scale. */
.login-shell, .register-shell { align-items: start; min-height: 0; padding-block: 42px 72px; }
.login-shell .auth-copy, .register-shell .auth-copy { position: sticky; top: 102px; }
.login-shell .auth-form-card, .register-shell .auth-form-card { margin-top: 0; }
@media (max-width: 900px) { .login-shell .auth-copy, .register-shell .auth-copy { position: static; } }

.beta-countdown { display:flex; align-items:center; flex-wrap:wrap; gap:9px 14px; width:max-content; max-width:100%; margin:22px 0 26px; padding:11px 14px; border:1px solid rgba(165,243,252,.30); border-radius:14px; background:rgba(8,47,73,.48); color:#e0f2fe; font-size:.82rem; backdrop-filter:blur(10px); }
.beta-countdown span { color:#a5f3fc; font-weight:700; }
.beta-countdown strong { color:#fff; font-size:.9rem; }
.beta-countdown a { color:#d9f99d; font-weight:800; text-decoration:none; }
.beta-countdown.compact { display:flex; width:100%; margin:18px 0; border-color:rgba(13,148,136,.22); background:#f0fdfa; color:#115e59; }
.beta-countdown.compact span, .beta-countdown.compact strong { color:#115e59; }
.sk-tenant-announcement{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px clamp(18px,4vw,44px);background:#ecfeff;border-bottom:1px solid #99f6e4;color:#134e4a;font-size:.86rem}.sk-tenant-announcement div{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.sk-tenant-announcement strong{font-weight:800}.sk-tenant-announcement span{line-height:1.45}.sk-tenant-announcement button{border:0;background:transparent;color:#0f766e;font-size:1.45rem;line-height:1;cursor:pointer;padding:2px 5px}.sk-tenant-announcement.is-high{background:#fff7ed;border-color:#fdba74;color:#7c2d12}.sk-tenant-announcement.is-high button{color:#c2410c}
@media(max-width:700px){.sk-tenant-announcement{align-items:flex-start;padding:10px 16px}.sk-tenant-announcement div{display:grid;gap:3px}}
.dark .premium-signal-bar,.dark .persona-console,.dark .module-feature,.dark .premium-faq { background:#0d1a2a; border-color:#203047; color:#e5edf7; }
.dark .persona-tabs { background:#0a1625; border-color:#203047; }.dark .persona-tabs button.active{background:#15243a}.dark .premium-report-section{background:#091522}.dark .premium-section-heading p,.dark .module-feature>p,.dark .report-showcase-copy>p,.dark .premium-faq div p{color:#93a4ba}