/* PIXEL SKIN — components (shell, buttons, chips, inputs, tabs, cards, menus, sheets, toasts, bars, badges).
   Two frame techniques, both integer-px and blur-free:
   - PANELS: frame drawn OUTSIDE with 4 offset box-shadows (corners stay empty = 1-step stair corner) + 6px hard drop.
   - CONTROLS: frame drawn INSIDE (inset shadows) and corners cut by a stepped clip-path (--px-notch). */
:root[data-skin="pixel"] {
  --px-notch: polygon(3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px),0 3px,3px 3px);
  --px-notch-2: polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px);
}
html[data-skin=pixel] body :not(.cz-device *)::before, html[data-skin=pixel] body :not(.cz-device *)::after { border-radius: 0 !important; }

/* ---------- panels (outside frame + hard drop + bottom bevel) ---------- */
html[data-skin=pixel] :is(.card, .glass2, .glass3, .lite, .paper, .stat, .kcard, .pcard, .tile, .plcard, .tool-host, .isl-head, .me-stage, .video, .novideo, .toast, .menu, .sheet, .app-nav) {
  --pf: var(--px-line); border: 0; background-color: var(--bp-paper);
  box-shadow: 0 -3px 0 0 var(--pf), 0 3px 0 0 var(--pf), -3px 0 0 0 var(--pf), 3px 0 0 0 var(--pf), 6px 6px 0 0 var(--px-drop), inset 0 -3px 0 0 var(--px-lo); }
/* study layer: quieter frame, no drop, still opaque */
html[data-skin=pixel] .q-card { --pf: var(--px-line-2); background: var(--bp-glass-solid); box-shadow: 0 -3px 0 0 var(--pf), 0 3px 0 0 var(--pf), -3px 0 0 0 var(--pf), 3px 0 0 0 var(--pf); margin: 17px 3px; }
html[data-skin=pixel] .card.attn { box-shadow: 0 -3px 0 0 var(--pf), 0 3px 0 0 var(--pf), -3px 0 0 0 var(--pf), 3px 0 0 0 var(--pf), 6px 6px 0 0 var(--px-drop), inset 6px 0 0 0 var(--bp-warn), inset 0 -3px 0 0 var(--px-lo); }
html[data-skin=pixel] :is(.tile, .kcard, a.pcard) { transition: transform 120ms steps(2, end); }
@media (hover: hover) { html[data-skin=pixel] :is(a.tile, .kcard):hover { transform: translate(-2px, -2px); } }
html[data-skin=pixel] :is(.tile, .kcard):active { transform: translate(2px, 2px); }
html[data-skin=pixel] .tile.locked { background: var(--bp-paper-2); --pf: var(--px-line-2); }
html[data-skin=pixel] .tile.done { --pf: var(--bp-pos); }
html[data-skin=pixel] .kthumb { background: var(--px-sky); image-rendering: pixelated; box-shadow: inset -3px 0 0 0 var(--px-line); }
html[data-skin=pixel] :is(.rows a, .prow, .qrow, .lines, .sol, .pick > *, .heat .cell) { clip-path: var(--px-notch); box-shadow: inset 0 -3px 0 0 var(--px-lo); }

/* ---------- shell: top bar = bright sky-blue HUD block ---------- */
html[data-skin=pixel] .app-nav { --pf: var(--px-bar-edge); background: var(--px-bar); color: var(--px-bar-ink);
  box-shadow: 0 -3px 0 0 var(--pf), 0 3px 0 0 var(--pf), -3px 0 0 0 var(--pf), 3px 0 0 0 var(--pf), 6px 6px 0 0 var(--px-drop), inset 0 3px 0 0 var(--px-pri-hi), inset 0 -3px 0 0 var(--px-pri-lo); }
html[data-skin=pixel] .app-nav .brand { color: var(--px-bar-ink); font: 600 20px/1 var(--px-display); -webkit-font-smoothing: none; }
html[data-skin=pixel] .app-nav .pill.warn { background: #FFC94A; color: #3A2600; }
html[data-skin=pixel] .nav-search { background: var(--bp-field); border: 0; clip-path: var(--px-notch); box-shadow: inset 0 0 0 3px var(--px-bar-edge), inset 0 3px 0 3px var(--px-lo); color: var(--bp-ink-3); }
html[data-skin=pixel] .nav-search:focus-within { outline: 0; box-shadow: inset 0 0 0 3px var(--px-bar-edge), inset 0 0 0 6px #FFC94A; }
html[data-skin=pixel] .sidenav, html[data-skin=pixel] .tabnav { gap: 8px; }
html[data-skin=pixel] .nav-i { font: 600 14px/1.15 var(--px-font); -webkit-font-smoothing: none; color: var(--bp-ink-2); clip-path: var(--px-notch); transition: transform 80ms steps(2, end); }
@media (hover: hover) { html[data-skin=pixel] .nav-i:hover { background: var(--bp-paper-2); box-shadow: inset 0 0 0 3px var(--bp-line); } }
html[data-skin=pixel] .nav-i[aria-current="page"], html[data-skin=pixel] .nav-i[aria-current="page"]:hover { background: var(--bp-primary); color: var(--bp-on-primary); font-weight: 700;
  box-shadow: inset 0 0 0 3px var(--px-pri-edge), inset 0 -6px 0 0 var(--px-pri-lo), inset 0 6px 0 0 var(--px-pri-hi); }
html[data-skin=pixel] .nav-i:active { transform: translateY(2px); }
html[data-skin=pixel] .tabnav .nav-i { font-size: 13px; }

/* avatar, level tag, bell */
html[data-skin=pixel] .avatar-btn .ring { display: none; }
html[data-skin=pixel] .avatar-btn .hs { inset: 2px; background: #CFE6FF; clip-path: var(--px-notch); box-shadow: inset 0 0 0 3px var(--px-bar-edge); }
html[data-skin=pixel] .avatar-btn .lvl { right: -4px; bottom: -4px; font: 600 14px/20px var(--px-font); -webkit-font-smoothing: none; background: #FFC94A; color: #3A2600; box-shadow: 0 0 0 2px var(--px-bar-edge); }
html[data-skin=pixel] .avatar-btn .initials { inset: 2px; font: 600 18px/1 var(--px-font); background: #FFFFFF; color: #10233F; clip-path: var(--px-notch); box-shadow: inset 0 0 0 3px var(--px-bar-edge), inset 0 -6px 0 0 var(--px-lo); }
html[data-skin=pixel] .bell { border: 0; background: #FFFFFF; color: #10233F; clip-path: var(--px-notch); box-shadow: inset 0 0 0 3px var(--px-bar-edge), inset 0 -6px 0 0 #D6E6F8; overflow: visible; }
html[data-skin=pixel] .bell .cnt { font: 600 14px/20px var(--px-font); box-shadow: none; top: 0; right: 0; }

/* ---------- buttons: blocky keys that press down 2px ---------- */
html[data-skin=pixel] .btn { font: 600 16px/1 var(--px-font); -webkit-font-smoothing: none; letter-spacing: .02em; padding-bottom: 3px;
  background: var(--bp-paper); color: var(--bp-ink); clip-path: var(--px-notch);
  box-shadow: inset 0 0 0 3px var(--px-line), inset 0 -6px 0 0 var(--px-lo); transition: transform 80ms steps(2, end); }
html[data-skin=pixel] .btn.pri { background: var(--bp-primary); color: var(--bp-on-primary);
  box-shadow: inset 0 0 0 3px var(--px-pri-edge), inset 0 -6px 0 0 var(--px-pri-lo), inset 0 6px 0 0 var(--px-pri-hi); }
html[data-skin=pixel] .btn.glass { background: var(--bp-paper); }
html[data-skin=pixel] .btn.plain { background: none; clip-path: none; box-shadow: none; color: var(--bp-tint); padding-bottom: 0; }
@media (hover: hover) {
  html[data-skin=pixel] .btn:hover { transform: translateY(-2px); }
  html[data-skin=pixel] .btn:not(.pri):not(.plain):hover { background: var(--bp-paper-2); }
  html[data-skin=pixel] .btn.plain:hover { transform: none; }
}
html[data-skin=pixel] .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 3px var(--px-line), inset 0 -3px 0 0 var(--px-lo); }
html[data-skin=pixel] .btn.pri:active:not(:disabled) { box-shadow: inset 0 0 0 3px var(--px-pri-edge), inset 0 -3px 0 0 var(--px-pri-lo); }
html[data-skin=pixel] .btn.plain:active { box-shadow: none; }
html[data-skin=pixel] :is(.btn, .nav-i, .seg button, .tabbar a, .chipbtn, .bell, .me-tabs button):focus-visible { clip-path: none; outline: 3px solid var(--bp-focus); outline-offset: 2px; }
/* study layer keeps the system font on its controls */
html[data-skin=pixel] :is(.q-card, .tool-host, .cheat, .sol, .kp-dock) .btn { font: 600 15px/1 var(--lg-font); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
html[data-skin=pixel] input[type=file]::file-selector-button { border-radius: 0; background: var(--bp-primary); color: var(--bp-on-primary); font-family: var(--px-font); }

/* ---------- chips, pills, badges ---------- */
html[data-skin=pixel] :is(.pill, .achip, .chip-s, .pillbtn, .xp-chip) { border: 0; clip-path: var(--px-notch-2); box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent); font-family: var(--px-font); font-weight: 600; font-size: 14px; -webkit-font-smoothing: none; letter-spacing: .02em; }
html[data-skin=pixel] .pill::before { border-radius: 0; }
html[data-skin=pixel] .q-card :is(.pill, .achip) { font: 600 13px/1 var(--lg-font); -webkit-font-smoothing: antialiased; letter-spacing: 0; }
html[data-skin=pixel] :is(.hud-chip, .pchip) { border: 0; clip-path: var(--px-notch-2); box-shadow: inset 0 0 0 2px var(--gm-chip-line), inset 0 -5px 0 0 var(--px-lo); }
html[data-skin=pixel] .app-nav .hud-chip { box-shadow: inset 0 0 0 2px var(--px-bar-edge), inset 0 -5px 0 0 #D6E6F8; background: #FFFFFF; color: #10233F; }
html[data-skin=pixel] .app-nav .hud-xp .lv { color: #0F3F86; }
html[data-skin=pixel] :is(.chipbtn, .sym-pill, .me-tile, .me-body) { border: 0; clip-path: var(--px-notch); box-shadow: inset 0 0 0 3px var(--px-line-2), inset 0 -6px 0 0 var(--px-lo); font-family: var(--px-font); font-weight: 600; -webkit-font-smoothing: none; transition: transform 80ms steps(2, end); }
html[data-skin=pixel] :is(.chipbtn, .me-tile, .me-body):active { transform: translateY(2px); }
html[data-skin=pixel] :is(.chipbtn, .me-tile, .me-body)[aria-pressed="true"] { background: var(--bp-tint-soft); color: var(--bp-tint-ink); box-shadow: inset 0 0 0 3px var(--bp-tint), inset 0 -6px 0 0 color-mix(in srgb, var(--bp-tint) 35%, var(--bp-tint-soft)); }
html[data-skin=pixel] .badge3d { background: var(--h2); clip-path: var(--px-notch); font-family: var(--px-font); -webkit-font-smoothing: none;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--h2) 50%, #0B1626), inset 0 6px 0 0 var(--h1), inset 0 -6px 0 0 color-mix(in srgb, var(--h2) 75%, #0B1626); }
html[data-skin=pixel] .badge3d.neu { background: var(--bp-paper-2); box-shadow: inset 0 0 0 3px var(--px-line-2); }
html[data-skin=pixel] .float.badge3d { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--h2) 50%, #0B1626), inset 0 6px 0 0 var(--h1); }
html[data-skin=pixel] .cbadge { box-shadow: 0 0 0 2px var(--px-line); }
html[data-skin=pixel] .cube svg { display: none; }
html[data-skin=pixel] .cube { background: var(--px-block) center / contain no-repeat; image-rendering: pixelated; }
html[data-skin=pixel] .me-sw { border: 3px solid var(--px-line); clip-path: var(--px-notch); }
html[data-skin=pixel] .me-sw[aria-pressed="true"] { outline: 0; box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 6px var(--px-line); border-color: #FFC94A; }

/* ---------- inputs: notched fields, 3px frame, sun-yellow focus ring inside ---------- */
html[data-skin=pixel] :is(.ans, math-field.mf, .txt-in, .form input, .login input:not([type=checkbox]), select, input[type=date], .cz-model, .sym-search, input[type=file]) {
  border: 3px solid var(--bp-field-line); background-color: var(--bp-field); clip-path: var(--px-notch); box-shadow: inset 0 3px 0 0 var(--px-lo); }
html[data-skin=pixel] :is(.ans, .txt-in, .form input, .login input, select, input[type=date], .sym-search):focus-visible,
html[data-skin=pixel] math-field.mf:focus-within { outline: 0; border-color: var(--bp-focus); box-shadow: inset 0 0 0 3px #FFC94A; }
html[data-skin=pixel] input[type=checkbox]::before { border: 3px solid var(--bp-field-line); }
html[data-skin=pixel] input[type=checkbox]:checked::before { background-color: var(--bp-primary); border-color: var(--px-pri-edge); }

/* ---------- tabs + segmented: a framed tray with a raised block for the current item ---------- */
html[data-skin=pixel] .tabbar { gap: 6px; padding: 6px; }
html[data-skin=pixel] .tabbar a { font: 600 16px/1 var(--px-font); -webkit-font-smoothing: none; clip-path: var(--px-notch); color: var(--bp-ink-2); }
html[data-skin=pixel] .tabbar a[aria-current="page"] { background: var(--bp-primary); color: var(--bp-on-primary); box-shadow: inset 0 0 0 3px var(--px-pri-edge), inset 0 -6px 0 0 var(--px-pri-lo), inset 0 6px 0 0 var(--px-pri-hi); }
html[data-skin=pixel] :is(.seg, .tool-tabs) { border: 0; background: var(--bp-paper-2); clip-path: var(--px-notch); box-shadow: inset 0 0 0 3px var(--px-line); padding: 6px; gap: 4px; }
html[data-skin=pixel] :is(.seg button, .me-tabs button) { font: 600 15px/1 var(--px-font); -webkit-font-smoothing: none; clip-path: var(--px-notch); }
html[data-skin=pixel] :is(.seg button[aria-pressed="true"], .me-tabs button[aria-selected="true"], .tool-tabs button[aria-selected="true"]) { background: var(--bp-primary); color: var(--bp-on-primary); clip-path: var(--px-notch);
  box-shadow: inset 0 0 0 3px var(--px-pri-edge), inset 0 -6px 0 0 var(--px-pri-lo); }

/* ---------- menus, sheets, toasts ---------- */
html[data-skin=pixel] .menu { margin-top: 6px; }
html[data-skin=pixel] :is(.menu a, .menu button.mi, .settings-sheet > a[role="menuitem"], .settings-sheet > button.mi) { font: 600 16px/1 var(--px-font); -webkit-font-smoothing: none; clip-path: var(--px-notch); }
@media (hover: hover) { html[data-skin=pixel] :is(.menu a, .menu button.mi, .settings-sheet > a[role="menuitem"], .settings-sheet > button.mi):hover { background: var(--bp-tint-soft); color: var(--bp-tint-ink); } }
html[data-skin=pixel] .menu hr { border-top: 3px dashed var(--bp-line); }
html[data-skin=pixel] dialog.sheet { margin-top: 18px; }
html[data-skin=pixel] dialog.sheet::backdrop { background: repeating-conic-gradient(rgba(11,22,38,.5) 0 25%, rgba(11,22,38,.32) 0 50%) 0 0 / 4px 4px; }
html[data-skin=pixel] .toast { font: 600 16px/1 var(--px-font); -webkit-font-smoothing: none; }
@media (prefers-reduced-motion: no-preference) { html[data-skin=pixel] :is(.menu, dialog.sheet[open], .toast) { animation-timing-function: steps(3, end); } }

/* ---------- progress: framed track, flat fill, segment gaps ---------- */
html[data-skin=pixel] :is(.prog, .bar6) { position: relative; height: 12px; margin: 3px; background: var(--bp-track); box-shadow: 0 0 0 3px var(--px-line); }
html[data-skin=pixel] .prog.sm { height: 9px; }
html[data-skin=pixel] :is(.prog i, .bar6 i) { background: var(--bp-primary); }
html[data-skin=pixel] .prog.ok i { background: #2FA35C; }
html[data-skin=pixel] :is(.prog, .bar6)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 9px, var(--bp-paper) 9px 12px); }
html[data-skin=pixel] .ring .val { stroke-linecap: butt; }
html[data-skin=pixel] .ring { shape-rendering: crispEdges; }

/* ---------- tables (teacher) ---------- */
html[data-skin=pixel] thead th { background: var(--bp-tint-soft); color: var(--bp-tint-ink); border-bottom: 3px solid var(--px-line); }
html[data-skin=pixel] td { border-top: 3px solid var(--bp-paper-2); }
@media (hover: hover) { html[data-skin=pixel] tr.click:hover td { background: var(--bp-tint-soft); } }

/* ---------- modes ---------- */
@media (prefers-reduced-motion: reduce) { html[data-skin=pixel] :is(.btn, .nav-i, .tile, .kcard, .chipbtn, .me-tile):is(:hover, :active) { transform: none !important; } }
@media (forced-colors: active) {
  html[data-skin=pixel] :is(.card, .glass2, .glass3, .lite, .stat, .kcard, .pcard, .tile, .plcard, .q-card, .menu, dialog.sheet, .app-nav, .btn, .seg, .pill) { border: 3px solid CanvasText; box-shadow: none; clip-path: none; }
}
@media (prefers-contrast: more) { html[data-skin=pixel] { --px-line-2: var(--px-line); --bp-line: var(--px-line); } }

/* ---------- readable text: buttons, tabs, nav labels, chips, table heads use the normal UI font (pixel font stays on big headings + HUD numbers) ---------- */
html[data-skin=pixel] :is(.nav-i, .btn, .tabbar a, .seg button, .me-tabs button, .menu a, .menu button.mi, .settings-sheet > a[role="menuitem"], .settings-sheet > button.mi, .toast, .chipbtn, .sym-pill, .me-tile, .pill, .achip, .pillbtn, .xp-chip, th, .eyebrow, .me-gl, .tabnav a) {
  font-family: var(--lg-font); -webkit-font-smoothing: antialiased; letter-spacing: 0; font-weight: 650; }
html[data-skin=pixel] input[type=file]::file-selector-button { font-family: var(--lg-font); font-weight: 650; }
html[data-skin=pixel] :is(.eyebrow, .me-gl, th) { letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
html[data-skin=pixel] .nav-i { font-size: 13px; }
html[data-skin=pixel] .tabnav .nav-i { font-size: 12px; }
html[data-skin=pixel] :is(.sym-pill, .chipbtn) { font-size: 15px; }