/* Professional responsive UI layer — shared across all pages */
:root{
  --pro-bg:#f6f8fc; --pro-surface:#ffffff; --pro-surface-2:#f9fafb; --pro-text:#111827;
  --pro-muted:#667085; --pro-border:#e5e7eb; --pro-primary:#4f46e5; --pro-primary-strong:#4338ca;
  --pro-success:#059669; --pro-warning:#d97706; --pro-danger:#dc2626; --pro-radius:16px;
  --pro-shadow:0 8px 28px rgba(15,23,42,.07);
  --color-k-bg:var(--pro-bg); --color-k-surface:var(--pro-surface); --color-k-ink:var(--pro-text);
  --color-k-ink-soft:#475467; --color-k-muted:var(--pro-muted); --color-k-border:var(--pro-border);
  --color-k-primary:var(--pro-primary); --color-k-primary-ink:var(--pro-primary-strong);
  --shadow-k:var(--pro-shadow); --shadow-k-soft:0 4px 16px rgba(15,23,42,.06);
}
html.dark{
  --pro-bg:#0b1120; --pro-surface:#111827; --pro-surface-2:#172033; --pro-text:#f8fafc;
  --pro-muted:#9ca3af; --pro-border:#273449; --pro-primary:#818cf8; --pro-primary-strong:#a5b4fc;
  --pro-success:#34d399; --pro-warning:#fbbf24; --pro-danger:#fb7185;
  --color-k-bg:var(--pro-bg); --color-k-surface:var(--pro-surface); --color-k-ink:var(--pro-text);
  --color-k-ink-soft:#cbd5e1; --color-k-muted:var(--pro-muted); --color-k-border:var(--pro-border);
  --color-k-primary:var(--pro-primary); --color-k-primary-ink:var(--pro-primary-strong);
  --shadow-k:0 10px 30px rgba(0,0,0,.28); --shadow-k-soft:0 5px 18px rgba(0,0,0,.22);
}
html,body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--pro-bg);color:var(--pro-text)}
body{min-height:100vh;line-height:1.5}
.device-frame{width:min(100%,1180px)!important;max-width:1180px!important;margin:0 auto!important;background:var(--pro-bg)!important;min-height:100vh;box-shadow:none!important}
.h-display{font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;letter-spacing:-.025em;font-weight:800}
.k-card,.k-card-lg,.setting-row,.stat{border:1px solid var(--pro-border)!important;box-shadow:var(--pro-shadow)!important;background-color:var(--pro-surface)!important}
.k-card,.setting-row,.stat{border-radius:14px!important}.k-card-lg{border-radius:18px!important}
.k-card:hover,.setting-row:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(15,23,42,.10)!important}
html.dark .k-card:hover,html.dark .setting-row:hover{box-shadow:0 12px 32px rgba(0,0,0,.30)!important}
.icon-btn{border:1px solid var(--pro-border)!important;background:var(--pro-surface)!important;box-shadow:0 2px 8px rgba(15,23,42,.05)!important}
.icon-btn:hover{background:var(--pro-surface-2)!important;color:var(--pro-primary)!important}
.btn{border-radius:11px!important;font-weight:700!important}.btn-primary{background:var(--pro-primary)!important}.btn-primary:hover{background:var(--pro-primary-strong)!important}
.input,.input-wrap,input,select,textarea{border-color:var(--pro-border)!important}.input:focus,input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--pro-primary) 24%,transparent)!important;outline-offset:1px}
.tabbar{background:color-mix(in srgb,var(--pro-surface) 93%,transparent)!important;border-color:var(--pro-border)!important;backdrop-filter:blur(14px)}
.tab.active{color:var(--pro-primary)!important}.tab-ico{border-radius:10px!important}
.text-muted{color:var(--pro-muted)!important}.text-ink{color:var(--pro-text)!important}.border-token{border-color:var(--pro-border)!important}.bg-surface{background-color:var(--pro-surface)!important}
.ui-symbol{display:inline-grid;place-items:center;vertical-align:-.16em;line-height:1;color:currentColor;font-size:1em;min-width:1em}
.ui-symbol i{font-size:1.05em;line-height:1}
.tile-emoji,.watermark-emoji{font-size:0!important;display:grid!important;place-items:center}.tile-emoji .ui-symbol,.watermark-emoji .ui-symbol{font-size:28px!important}.watermark-emoji .ui-symbol{font-size:64px!important;opacity:.24}
.tile-violet,.tile-sun,.tile-mint,.tile-coral,.tile-pink,.tile-sky{background-image:none!important}
/* Replace candy-like fills with restrained tinted surfaces while keeping semantic accents. */
.tile-violet{background:color-mix(in srgb,#6366f1 12%,var(--pro-surface))!important}.tile-sun{background:color-mix(in srgb,#f59e0b 13%,var(--pro-surface))!important}.tile-mint{background:color-mix(in srgb,#10b981 12%,var(--pro-surface))!important}.tile-coral{background:color-mix(in srgb,#f43f5e 11%,var(--pro-surface))!important}.tile-pink{background:color-mix(in srgb,#ec4899 10%,var(--pro-surface))!important}.tile-sky{background:color-mix(in srgb,#0ea5e9 11%,var(--pro-surface))!important}
.card-hero-primary{background:linear-gradient(135deg,#4f46e5,#3730a3)!important}.card-hero-success{background:linear-gradient(135deg,#047857,#065f46)!important}
.chip{border-radius:999px!important;font-weight:700!important}
img{object-fit:cover}
@media (min-width:768px){
  .device-frame>header,.device-frame>section{padding-left:28px!important;padding-right:28px!important}
  .tabbar-inner{max-width:760px!important;margin:auto}
  .fixed .max-w-\[430px\],.max-w-\[430px\]{max-width:680px!important}
  .subjects-swiper{padding-left:28px!important;padding-right:28px!important}
}
@media (min-width:1024px){
  .device-frame{padding-bottom:18px}
  .device-frame>header{padding-top:24px!important}
  .device-frame>section{margin-top:22px}
  .grid.grid-cols-2{gap:18px!important}.grid.grid-cols-3{gap:16px!important}
  .tabbar{position:sticky!important;bottom:0!important;max-width:900px;margin:26px auto 0;border:1px solid var(--pro-border)!important;border-radius:18px!important;overflow:hidden}
}
@media (max-width:480px){
  .device-frame>header,.device-frame>section{padding-left:16px!important;padding-right:16px!important}
  .k-card,.k-card-lg{border-radius:13px!important}
  .h-display.text-2xl{font-size:1.35rem!important}
  .btn{min-height:42px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}