/* Calculator skins: Basic / Scientific GT / Graphing CG.
   Layouts echo the real devices' key arrangement (no trademarked branding). */

.calc-panel { position: fixed; z-index: 60; background: #2a2d34; border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45); color: #fff; touch-action: none; user-select: none;
  display: flex; flex-direction: column; min-width: 220px; }
.calc-titlebar { cursor: move; padding: 7px 10px; font-size: 12px; display: flex; justify-content: space-between;
  align-items: center; background: #1c1e23; border-radius: 14px 14px 0 0; }
.calc-name { font-weight: 600; letter-spacing: .3px; }
.calc-btns { display: flex; gap: 5px; }
.calc-snap, .calc-close { background: #3a3f48; color: #fff; border: 0; border-radius: 6px; width: 26px; height: 22px; cursor: pointer; font-size: 12px; }
.calc-close { background: #5a2b2f; }
.calc-close:hover { background: #e5484d; }
.calc-resize { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; cursor: nwse-resize;
  opacity: .5; background: linear-gradient(135deg, transparent 50%, #888 50%); border-radius: 0 0 6px 0; }

/* Screen */
.calc-screen { margin: 8px; background: #b9c4b0; color: #1b2016; border-radius: 6px; min-height: 64px;
  padding: 6px 8px; font-family: "SF Mono", Menlo, monospace; overflow: hidden; position: relative; }
.calc-panel[data-skin="alevelgraph"] .calc-screen { background: #0d1b2a; color: #dff; min-height: 150px; padding: 0; }

/* ========================================================================
   A-Level skin — Casio fx-CG50 colour graphing calculator (generic branding).
   Black body with a blue edge, colour MAIN-MENU screen, F1–F6 soft keys,
   REPLAY pad, dark function keys + white number keys, yellow SHIFT.
   ===================================================================== */
.calc-panel[data-skin="alevelgraph"] { background: linear-gradient(180deg,#20232a,#0f1013); border: 1.5px solid #2f6db0; border-radius: 16px; box-shadow: 0 20px 56px rgba(0,0,0,.55); }
.calc-panel[data-skin="alevelgraph"] .calc-titlebar { background: #0b0c0f; border-radius: 15px 15px 0 0; }
.calc-panel[data-skin="alevelgraph"] .calc-screen { margin: 12px 12px 8px; border: 3px solid #05070c; border-radius: 4px; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); min-height: 172px; }
.calc-panel[data-skin="alevelgraph"] .calc-keys { padding: 2px 11px 13px; gap: 5px; }
.calc-panel[data-skin="alevelgraph"] .calc-row { gap: 5px; }

/* MAIN MENU icon grid */
.lcd-cg.cg-menu { padding: 0; }
.cg-menubar { background: #1f5fa8; color: #fff; font-size: 10px; font-weight: 700; text-align: center; padding: 2px; letter-spacing: .5px; }
.cg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 8px; }
.cg-ic { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; border: 2px solid transparent; border-radius: 6px; padding: 3px 1px; }
.cg-ic .cg-ic-box { width: 26px; height: 26px; border-radius: 6px; background: var(--ic); box-shadow: inset 0 -3px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.4); }
.cg-ic .cg-ic-lbl { font-size: 8.5px; color: #eaf4ff; text-align: center; line-height: 1.05; }
.cg-ic.off { opacity: .4; cursor: default; }
.cg-ic.sel { border-color: #ffd166; background: rgba(255,209,102,.12); }

/* On-screen soft-menu bar: the F1–F6 function labels along the screen bottom. */
.calc-panel[data-skin="alevelgraph"] .lcd-cg { padding-bottom: 20px; position: relative; height: 100%; box-sizing: border-box; }
.cg-fbar { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 2px 3px; background: rgba(0,0,0,.35); }
.cg-fbar span { font-size: 8px; text-align: center; color: #dff; background: #24405f; border-radius: 3px; padding: 2px 0; min-height: 11px; overflow: hidden; white-space: nowrap; }
.cg-fbar span.on { background: #3f7fd6; color: #fff; font-weight: 700; }
.cg-fbar span:empty { background: transparent; }

/* Mode headers / lines already share .cg-* from the generic block above. */
.calc-panel[data-skin="alevelgraph"] .cg-l2 { color: #eaffff; }
.cg-cols td.sel { background: rgba(120,180,255,.25); }
/* Equation coefficient grid */
.eq-grid { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 2px; }
.eq-grid .eq-c { font-size: 12px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.06); color: #dff; font-family: "SF Mono", Menlo, monospace; }
.eq-grid .eq-c.sel { background: #3f7fd6; color: #fff; }

/* Keys: dark cap with corner labels — yellow SHIFT (top-left), red ALPHA (top-right). */
.calc-panel[data-skin="alevelgraph"] .calc-key { position: relative; background: none; box-shadow: none; border-radius: 0; padding: 0;
  display: flex; flex-direction: column; align-items: stretch; min-height: 36px; }
.calc-panel[data-skin="alevelgraph"] .calc-key .ktop { position: absolute; top: 0; left: 4px; z-index: 2; font-size: 7px; line-height: 8px; font-weight: 700; color: #ffcf4d; }
.calc-panel[data-skin="alevelgraph"] .calc-key .kalpha { position: absolute; top: 0; right: 4px; z-index: 2; font-size: 7px; line-height: 8px; font-weight: 700; color: #ff8a72; }
.calc-panel[data-skin="alevelgraph"] .calc-key .kmain { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-weight: 600; font-size: 12px; padding-top: 5px;
  background: linear-gradient(180deg,#3c414b,#2b2f37); color: #eef2f6; border: 1px solid #191b20; box-shadow: 0 1.5px 1px rgba(0,0,0,.4); }
.calc-panel[data-skin="alevelgraph"] .calc-key:active .kmain, .calc-panel[data-skin="alevelgraph"] .calc-key.pressed .kmain { transform: translateY(1px); filter: brightness(1.25); }
/* Soft keys F1-F6: slim blue-grey pills. */
.calc-panel[data-skin="alevelgraph"] .calc-key.fk .kmain { background: linear-gradient(180deg,#33465f,#243448); color: #cfe4ff; font-size: 10px; border-radius: 10px; border-color: #0e1620; padding-top: 0; }
.calc-panel[data-skin="alevelgraph"] .calc-key.fk.on .kmain { background: linear-gradient(180deg,#3f7fd6,#2f63bd); color: #fff; }
/* Number + operator caps: white (last 4 rows are the number block). */
.calc-panel[data-skin="alevelgraph"] .calc-row:nth-last-child(-n+4) .calc-key:not(.op):not(.del):not(.acon):not(.exe) .kmain,
.calc-panel[data-skin="alevelgraph"] .calc-key.op .kmain { background: linear-gradient(180deg,#f2f3f5,#dfe1e4); color: #16181c; border-color: #b7b9bd; }
.calc-panel[data-skin="alevelgraph"] .calc-key.op .kmain { font-weight: 700; }
/* Blue DEL / AC / EXE, like the device. */
.calc-panel[data-skin="alevelgraph"] .calc-key.del .kmain, .calc-panel[data-skin="alevelgraph"] .calc-key.acon .kmain, .calc-panel[data-skin="alevelgraph"] .calc-key.exe .kmain {
  background: linear-gradient(180deg,#3f7fd6,#2f63bd); color: #fff; font-weight: 800; border-color: #22488f; font-size: 11px; }
/* Yellow SHIFT, red ALPHA control keys. */
.calc-panel[data-skin="alevelgraph"] .calc-key.shift .kmain { background: linear-gradient(180deg,#e7b53a,#caa023); color: #241c00; font-size: 10px; font-weight: 800; border-color: #8a6c10; }
.calc-panel[data-skin="alevelgraph"] .calc-key.shift.on .kmain { box-shadow: 0 0 9px rgba(255,209,102,.8), inset 0 0 0 2px #fff2c0; }
.calc-panel[data-skin="alevelgraph"] .calc-key.alpha .kmain { background: linear-gradient(180deg,#c05a52,#9c3f38); color: #ffecea; font-size: 9px; font-weight: 800; border-color: #6e2a25; }
.calc-panel[data-skin="alevelgraph"] .calc-key.alpha.on .kmain { box-shadow: 0 0 9px rgba(255,120,100,.8), inset 0 0 0 2px #ffb0a5; }
.calc-panel[data-skin="alevelgraph"] .calc-key.fn .kmain { font-size: 9.5px; }

/* Control block: SHIFT OPTN VARS MENU / ALPHA x2 ^ EXIT + REPLAY pad on the right. */
.calc-panel[data-skin="alevelgraph"] .calc-row.ctrl-block { display: grid; grid-template-columns: repeat(4, 1fr) 1.5fr; grid-template-rows: auto auto;
  grid-template-areas: "a b c d rep" "e f g h rep"; gap: 5px; }
.calc-panel[data-skin="alevelgraph"] .ctrl-block > .calc-key:nth-child(1){grid-area:a}
.calc-panel[data-skin="alevelgraph"] .ctrl-block > .calc-key:nth-child(2){grid-area:b}
.calc-panel[data-skin="alevelgraph"] .ctrl-block > .calc-key:nth-child(3){grid-area:c}
.calc-panel[data-skin="alevelgraph"] .ctrl-block > .calc-key:nth-child(4){grid-area:d}
.calc-panel[data-skin="alevelgraph"] .ctrl-block > .calc-key:nth-child(5){grid-area:e}
.calc-panel[data-skin="alevelgraph"] .ctrl-block > .calc-key:nth-child(6){grid-area:f}
.calc-panel[data-skin="alevelgraph"] .ctrl-block > .calc-key:nth-child(7){grid-area:g}
.calc-panel[data-skin="alevelgraph"] .ctrl-block > .calc-key:nth-child(8){grid-area:h}
.calc-panel[data-skin="alevelgraph"] .ctrl-block > .cg-replay { grid-area: rep; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.calc-panel[data-skin="alevelgraph"] .cg-replay::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 96%; height: 92%; border-radius: 999px; background: radial-gradient(120% 120% at 50% 35%, #2a2e35, #17191d); box-shadow: inset 0 2px 4px rgba(0,0,0,.55); }
.calc-panel[data-skin="alevelgraph"] .cg-replay .calc-key { min-height: 0; position: relative; z-index: 1; }
.calc-panel[data-skin="alevelgraph"] .cg-replay .calc-key .kmain { background: none; border: 0; box-shadow: none; color: #d3d7dd; font-size: 12px; padding-top: 0; }
.calc-panel[data-skin="alevelgraph"] .cg-replay .calc-key.cur-up { grid-area: 1 / 2 / 2 / 3; }
.calc-panel[data-skin="alevelgraph"] .cg-replay .calc-key.cur-left { grid-area: 2 / 1 / 3 / 2; }
.calc-panel[data-skin="alevelgraph"] .cg-replay .calc-key.cur-ok { grid-area: 2 / 2 / 3 / 3; }
.calc-panel[data-skin="alevelgraph"] .cg-replay .calc-key.cur-right { grid-area: 2 / 3 / 3 / 4; }
.calc-panel[data-skin="alevelgraph"] .cg-replay .calc-key.cur-down { grid-area: 3 / 2 / 4 / 3; }
.calc-canvas { width: 100%; height: 100%; display: block; border-radius: 6px; }

/* Basic LCD */
.lcd-basic { display: flex; align-items: baseline; justify-content: flex-end; min-height: 48px; }
.lcd-num { font-size: 32px; font-weight: 600; letter-spacing: 1px; }
.calc-flag { font-size: 12px; margin-right: auto; opacity: .7; }

/* Scientific LCD (two-line natural-ish) */
.lcd-sci { min-height: 62px; display: flex; flex-direction: column; }
.lcd-mode { font-size: 10px; opacity: .7; height: 12px; }
.lcd-l1 { font-size: 16px; min-height: 20px; word-break: break-all; }
.lcd-l2 { font-size: 26px; font-weight: 600; text-align: right; margin-top: auto; }
.caret { display: inline-block; width: 1px; height: 15px; background: #1b2016; animation: blink 1s step-start infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }
.stat-tbl, .dist-tbl, .cg-table table, .cg-cols table { width: 100%; font-size: 12px; border-collapse: collapse; }
.stat-tbl td, .dist-tbl td { padding: 0 4px; }
.stat-tbl td:last-child, .dist-tbl td:last-child { text-align: right; font-weight: 600; }
.dist-tbl tr.sel, .cg-cols tr.sel { background: rgba(0,0,0,.12); }
.stat-list { font-size: 11px; opacity: .8; max-height: 34px; overflow: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.stat-entry { font-size: 18px; font-weight: 600; }
.stat-empty { font-size: 11px; opacity: .6; }

/* Graphing text tabs (RUN/TABLE/STAT/DIST) */
.lcd-cg { color: #dff; font-size: 12px; padding: 6px 8px; height: 100%; overflow: auto; box-sizing: border-box; }
.cg-hd { font-size: 10px; opacity: .75; margin-bottom: 4px; }
.cg-l1 { font-size: 15px; word-break: break-all; }
.cg-l2 { font-size: 22px; font-weight: 600; text-align: right; }
.cg-table table, .cg-cols table { color: #cfe; } .cg-table th, .cg-cols th { opacity: .6; font-weight: 500; }
.cg-sum { margin-top: 5px; font-size: 11px; line-height: 1.5; color: #bfe; }

/* Keypad */
.calc-keys { padding: 0 8px 12px; display: flex; flex-direction: column; gap: 5px; }
.calc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
/* All scientific/graphing skins use a 5-column keypad; only Basic is 4-wide. */
.calc-panel:not([data-skin="basic"]) .calc-row { grid-template-columns: repeat(5, 1fr); }
.calc-key { border: 0; border-radius: 8px; background: #3a3f48; color: #fff; font-size: 15px; padding: 10px 0;
  cursor: pointer; transition: transform .05s, background .1s; -webkit-tap-highlight-color: transparent; }
.calc-key:active, .calc-key.pressed { transform: translateY(1px); background: #5a86f0; }
.calc-key.op { background: #464c57; color: #ffd; }
.calc-key.fn { background: #33373f; font-size: 12px; color: #cdd; }
.calc-key.eq { background: #2f6df6; }
.calc-key.ac { background: #e5484d; }
.calc-key.shift { background: #caa23a; color: #1b1b1b; font-size: 11px; }
.calc-key.shift.on, .calc-key.fn.on, .calc-key.tabk.on { outline: 2px solid #ffd166; }
.calc-key.tabk { background: #2b2f36; font-size: 11px; color: #9fb; }
.calc-key.nav { background: #2f333b; color: #cdd; font-size: 13px; }
.calc-key.ok { background: #464c57; color: #ffd; font-weight: 700; }
.calc-panel:not([data-skin="basic"]) .calc-key { font-size: 13px; padding: 9px 0; }

/* Two-label keys: a small secondary above the main cap. Empty label bands
   collapse by default (only the GCSE skin reserves the band for alignment). */
.calc-key .ktop { font-size: 8px; opacity: .8; font-weight: 600; }
.calc-key .ktop:empty { display: none; }
.calc-key.has-top { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.02; padding: 5px 0 6px; }
.calc-key .kmain { font-size: 13px; }

/* ========================================================================
   GCSE skin — Casio fx-83GT CW (ClassWiz) look, generic branding. Charcoal
   moulded body; small domed key caps sitting in the body with the blue
   secondary functions printed on the body just ABOVE each cap; tight spacing.
   ===================================================================== */
.calc-panel[data-skin="alevel"] { background: linear-gradient(180deg,#e7b9cb,#d99cb2); border-radius: 20px 20px 24px 24px;
  box-shadow: 0 20px 56px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); padding-bottom: 2px; }
.calc-panel[data-skin="alevel"] .calc-titlebar { background: #c97fa0; border-radius: 20px 20px 0 0; }
.calc-panel[data-skin="alevel"] .calc-keys { padding: 4px 12px 14px; gap: 3px; background: transparent; }
.calc-panel[data-skin="alevel"] .calc-row { gap: 5px; align-items: stretch; }

/* LCD: compact green-grey natural display with a dark bezel. */
.calc-panel[data-skin="alevel"] .calc-screen { margin: 12px 12px 10px; background: linear-gradient(180deg,#cdd4c6,#bcc4b4); color: #10140d; border-radius: 4px;
  border: 3px solid #0a0b0e; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); padding: 5px 8px; min-height: 48px;
  font-family: "SF Mono", Menlo, monospace; }
.calc-panel[data-skin="alevel"] .lcd-sci { min-height: 40px; }
.calc-panel[data-skin="alevel"] .lcd-mode { font-size: 8px; letter-spacing: .5px; opacity: .8; text-transform: none; }
.calc-panel[data-skin="alevel"] .lcd-l1 { font-size: 15px; min-height: 19px; }
.calc-panel[data-skin="alevel"] .lcd-l2 { font-size: 24px; font-weight: 700; }
.calc-panel[data-skin="alevel"] .caret { background: #10140d; }
/* Natural stacked fraction on the display: numerator over denominator + rule. */
.natfrac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; line-height: 1.15; }
.natfrac .fnum { border-bottom: 1.5px solid currentColor; padding: 0 5px; }
.natfrac .fden { padding: 1px 5px 0; }

/* Every key: a thin label band (on the body) above a MATTE cap. Real Casio
   keys are matte off-white with only a hint of relief — not glossy. */
.calc-panel[data-skin="alevel"] .calc-key { background: none; box-shadow: none; border-radius: 0; padding: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 1px; min-height: 40px; overflow: visible; }
.calc-panel[data-skin="alevel"] .calc-key .ktop { display: block; height: 10px; line-height: 10px; font-size: 8px; font-weight: 700;
  color: #7b5ea8; text-align: center; letter-spacing: .2px; }
/* Light matte caps — numbers, functions, operators, Ans, AC, EXE. */
.calc-panel[data-skin="alevel"] .calc-key .kmain { flex: 1; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg,#ffffff,#f0eef0); color: #33203a; border: 1px solid #cbb8c4; border-radius: 13px; font-weight: 600; font-size: 15px;
  box-shadow: 0 1.5px 1px rgba(90,50,80,.22); }
.calc-panel[data-skin="alevel"] .calc-key:active .kmain, .calc-panel[data-skin="alevel"] .calc-key.pressed .kmain { transform: translateY(1px); box-shadow: 0 0 1px rgba(0,0,0,.3); filter: brightness(.95); }

/* Dark matte utility caps (SETUP / HOME / S⇔D / DEL / cursor) — the top cluster. */
.calc-panel[data-skin="alevel"] .calc-key.fn .kmain, .calc-panel[data-skin="alevel"] .calc-key.nav .kmain {
  background: linear-gradient(180deg,#ffffff,#efeaf0); color: #4a3a54; border-color: #cbb8c4; font-size: 10px; font-weight: 600; box-shadow: 0 1.5px 1px rgba(90,50,80,.22); }
.calc-panel[data-skin="alevel"] .calc-key.nav .kmain { font-size: 13px; }
.calc-panel[data-skin="alevel"] .calc-key.ok .kmain { background: linear-gradient(180deg,#ffffff,#efeaf0); color: #4a3a54; border-color: #c4a9bd; border-radius: 40px; font-weight: 800; }
/* AC keeps a hint of red text like the device; EXE and operators stay matte-light. */
.calc-panel[data-skin="alevel"] .calc-key.ac .kmain { color: #c0392b; font-weight: 700; }
.calc-panel[data-skin="alevel"] .calc-key.eq .kmain { font-weight: 700; }
/* The one accent on the whole calculator: the blue SHIFT key. */
.calc-panel[data-skin="alevel"] .calc-key.shift .kmain { background: linear-gradient(180deg,#9a78d0,#7d5cbb); color: #fff; border-color: #5f43a0; font-size: 11px; font-weight: 700; }
.calc-panel[data-skin="alevel"] .calc-key.shift.on .kmain { box-shadow: 0 0 10px rgba(150,110,210,.85), inset 0 0 0 2px #d8c4f0; }
/* When SHIFT is armed, the printed secondaries glow amber. */
.calc-panel[data-skin="alevel"].shift-on .calc-key .ktop { color: #a07fd8; opacity: 1; }

/* 4-way cursor pad (REPLAY): arrows in a cross with OK in the centre, sitting
   on a round dark housing like the real device. */
.calc-panel[data-skin="alevel"] .calc-row.cursor-pad { display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 26px);
  justify-content: center; align-content: center; gap: 3px; position: relative; margin: 4px 0 6px; }
.calc-panel[data-skin="alevel"] .calc-row.cursor-pad::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 168px; height: 96px; border-radius: 999px; background: radial-gradient(120% 120% at 50% 35%, #efd3df, #e3bcce);
  box-shadow: inset 0 2px 4px rgba(120,70,100,.28); }
.calc-panel[data-skin="alevel"] .cursor-pad .calc-key { min-height: 0; position: relative; z-index: 1; }
.calc-panel[data-skin="alevel"] .cursor-pad .calc-key .ktop { display: none; }
.calc-panel[data-skin="alevel"] .cursor-pad .calc-key .kmain { background: none; border: 0; box-shadow: none; color: #6a4d78; font-size: 13px; }
.calc-panel[data-skin="alevel"] .cursor-pad .calc-key.cur-ok .kmain { background: linear-gradient(180deg,#ffffff,#efeaf0); color: #4a3a54; border: 1px solid #c4a9bd; border-radius: 40px; font-size: 12px; font-weight: 800; box-shadow: 0 1.5px 1px rgba(90,50,80,.3); }
.calc-panel[data-skin="alevel"] .cursor-pad .calc-key.cur-ok .kmain { width: 100%; height: 100%; }
.calc-panel[data-skin="alevel"] .calc-key.cur-up   { grid-area: 1 / 2 / 2 / 3; }
.calc-panel[data-skin="alevel"] .calc-key.cur-left { grid-area: 2 / 1 / 3 / 2; }
.calc-panel[data-skin="alevel"] .calc-key.cur-ok   { grid-area: 2 / 2 / 3 / 3; }
.calc-panel[data-skin="alevel"] .calc-key.cur-right{ grid-area: 2 / 3 / 3 / 4; }
.calc-panel[data-skin="alevel"] .calc-key.cur-down { grid-area: 3 / 2 / 4 / 3; }

/* fx-9910CW top control cluster: ON/HOME/SETTINGS/back + cursor cross + ⌃⌄ scroll */
.calc-panel[data-skin="alevel"] .calc-row.cw-cluster { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr 1fr 1fr;
  grid-template-rows: auto auto auto; gap: 4px 5px; align-items: stretch;
  grid-template-areas: "on home . up . pu" "set back lt ok rt pd" ". . . dn . ."; }
.calc-panel[data-skin="alevel"] .cw-cluster .cw-on { grid-area: on; }
.calc-panel[data-skin="alevel"] .cw-cluster .cw-home { grid-area: home; }
.calc-panel[data-skin="alevel"] .cw-cluster .cw-set { grid-area: set; }
.calc-panel[data-skin="alevel"] .cw-cluster .cw-back { grid-area: back; }
.calc-panel[data-skin="alevel"] .cw-cluster .cur-up { grid-area: up; }
.calc-panel[data-skin="alevel"] .cw-cluster .cur-left { grid-area: lt; }
.calc-panel[data-skin="alevel"] .cw-cluster .cur-ok { grid-area: ok; }
.calc-panel[data-skin="alevel"] .cw-cluster .cur-right { grid-area: rt; }
.calc-panel[data-skin="alevel"] .cw-cluster .cur-down { grid-area: dn; }
.calc-panel[data-skin="alevel"] .cw-cluster .cw-pu { grid-area: pu; }
.calc-panel[data-skin="alevel"] .cw-cluster .cw-pd { grid-area: pd; }
.calc-panel[data-skin="alevel"] .cw-cluster .calc-key { min-height: 26px; }
.calc-panel[data-skin="alevel"] .cw-cluster .calc-key .ktop { display: none; }
/* cluster keys: small round pinkish caps */
.calc-panel[data-skin="alevel"] .cw-cluster .cw .kmain { background: linear-gradient(180deg,#f3dde7,#e9c9d8); color: #6a4d78; border: 1px solid #d8b6c8; border-radius: 40px; font-size: 11px; box-shadow: 0 1px 1px rgba(90,50,80,.2); }
.calc-panel[data-skin="alevel"] .cw-cluster .nav .kmain { background: linear-gradient(180deg,#f6e6ee,#eed3e0); color: #6a4d78; border: 1px solid #dcbcce; border-radius: 40px; font-size: 12px; }
.calc-panel[data-skin="alevel"] .cw-cluster .ok .kmain { background: linear-gradient(180deg,#ffffff,#efeaf0); color: #4a3a54; border: 1px solid #c4a9bd; border-radius: 40px; font-size: 11px; font-weight: 800; }

/* CATALOG / app-menu list */
.calc-panel[data-skin="alevel"] .lcd-sci.catalog { min-height: 62px; }
.calc-panel[data-skin="alevel"] .cat-item { font-size: 12px; line-height: 15px; white-space: nowrap; overflow: hidden; color: #24301c; }
.calc-panel[data-skin="alevel"] .cat-item.sel { background: #10140d; color: #cdd4c6; border-radius: 2px; }
/* Equation coefficient grid, Table/Stat rows — dark text on the pale LCD */
.calc-panel[data-skin="alevel"] .eq-grid .eq-c { background: rgba(0,0,0,.07); color: #24301c; }
.calc-panel[data-skin="alevel"] .eq-grid .eq-c.sel { background: #10140d; color: #cdd4c6; }
.calc-panel[data-skin="alevel"] .stat-tbl td { color: #24301c; }
.calc-panel[data-skin="alevel"] .stat-tbl tr.sel td { background: #10140d; color: #cdd4c6; }

/* ========================================================================
   GCSE skin — Casio fx-83GT CW / fx-85GT CW (ClassWiz), black. Same ClassWiz
   body as the A-Level pink skin, recoloured: charcoal moulded case, light
   matte number caps, dark-grey menu/cluster caps, and the one blue SHIFT key
   with blue secondary labels printed above each cap.
   ===================================================================== */
.calc-panel[data-skin="gcse"] { background: linear-gradient(180deg,#2c2c30,#151517); border-radius: 20px 20px 24px 24px;
  box-shadow: 0 20px 56px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); padding-bottom: 2px; }
.calc-panel[data-skin="gcse"] .calc-titlebar { background: #0e0e11; border-radius: 20px 20px 0 0; }
.calc-panel[data-skin="gcse"] .calc-keys { padding: 4px 12px 14px; gap: 5px; background: transparent; }
.calc-panel[data-skin="gcse"] .calc-row { gap: 6px; align-items: stretch; }

/* LCD: same compact green-grey ClassWiz display with a dark bezel. */
.calc-panel[data-skin="gcse"] .calc-screen { margin: 12px 12px 10px; background: linear-gradient(180deg,#cdd4c6,#bcc4b4); color: #10140d; border-radius: 4px;
  border: 3px solid #060608; box-shadow: inset 0 2px 4px rgba(0,0,0,.45); padding: 5px 8px; min-height: 48px;
  font-family: "SF Mono", Menlo, monospace; }
.calc-panel[data-skin="gcse"] .lcd-sci { min-height: 40px; }
.calc-panel[data-skin="gcse"] .lcd-mode { font-size: 8px; letter-spacing: .5px; opacity: .8; text-transform: none; }
.calc-panel[data-skin="gcse"] .lcd-l1 { font-size: 15px; min-height: 19px; }
.calc-panel[data-skin="gcse"] .lcd-l2 { font-size: 24px; font-weight: 700; }
.calc-panel[data-skin="gcse"] .caret { background: #10140d; }

/* Every key: a blue label band (always reserved, so caps stay uniform whether or
   not a key has a SHIFT secondary) above a round matte cap floating on the body. */
.calc-panel[data-skin="gcse"] .calc-key { position: relative; background: none; box-shadow: none; border-radius: 0;
  padding: 11px 0 0; display: flex; flex-direction: column; align-items: stretch; min-height: 0; overflow: visible; }
.calc-panel[data-skin="gcse"] .calc-key .ktop { position: absolute; top: 0; left: 0; right: 0; height: 10px; line-height: 10px; font-size: 8px; font-weight: 700;
  color: #4a9be8; text-align: center; letter-spacing: .2px; }
/* Light matte CIRCULAR caps — numbers, functions, operators, Ans, AC, EXE. The
   cap is a circle sized off its column width and centred, leaving body gaps. */
.calc-panel[data-skin="gcse"] .calc-key .kmain { flex: none; width: 86%; aspect-ratio: 1 / 1; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg,#fbfbfc,#e6e6ea); color: #1b1b1e; border: 1px solid #b4b4bc; border-radius: 50%; font-weight: 600; font-size: 15px;
  box-shadow: 0 2px 1.5px rgba(0,0,0,.32); }
.calc-panel[data-skin="gcse"] .calc-key:active .kmain, .calc-panel[data-skin="gcse"] .calc-key.pressed .kmain { transform: translateY(1px); box-shadow: 0 0 1px rgba(0,0,0,.35); filter: brightness(.95); }

/* Dark-grey menu caps: VARIABLE / FUNCTION / CATALOG / TOOLS. */
.calc-panel[data-skin="gcse"] .calc-key.fn .kmain, .calc-panel[data-skin="gcse"] .calc-key.nav .kmain {
  background: linear-gradient(180deg,#55555c,#3d3d43); color: #eef0f2; border-color: #2a2a2f; font-size: 10px; font-weight: 600; box-shadow: 0 1.5px 1px rgba(0,0,0,.35); }
.calc-panel[data-skin="gcse"] .calc-key.nav .kmain { font-size: 13px; }
.calc-panel[data-skin="gcse"] .calc-key.ok .kmain { background: linear-gradient(180deg,#fbfbfc,#e9e9ec); color: #24242a; border-color: #b9b9c0; border-radius: 40px; font-weight: 800; }
/* AC keeps a hint of red text; EXE stays matte-light. */
.calc-panel[data-skin="gcse"] .calc-key.ac .kmain { color: #c0392b; font-weight: 700; }
.calc-panel[data-skin="gcse"] .calc-key.eq .kmain { font-weight: 700; }
/* The one accent on the whole calculator: the blue SHIFT key. */
.calc-panel[data-skin="gcse"] .calc-key.shift .kmain { background: linear-gradient(180deg,#2f86d6,#1f68bd); color: #fff; border-color: #164f92; font-size: 11px; font-weight: 700; }
.calc-panel[data-skin="gcse"] .calc-key.shift.on .kmain { box-shadow: 0 0 10px rgba(70,155,232,.9), inset 0 0 0 2px #bcdcff; }
/* When SHIFT is armed, the printed secondaries brighten. */
.calc-panel[data-skin="gcse"].shift-on .calc-key .ktop { color: #6fb4f4; opacity: 1; }

/* Menu strip (SHIFT / VARIABLE / FUNCTION / CATALOG / TOOLS): small icon caps with
   the WORD printed in white on the body above — like the real device. */
.calc-panel[data-skin="gcse"] .calc-key.menu-k .kmain { width: 62%; font-size: 13px; }
.calc-panel[data-skin="gcse"] .calc-key.menu-k .ktop { color: #d3d6dc; font-size: 6.5px; letter-spacing: 0; font-weight: 700; }
.calc-panel[data-skin="gcse"].shift-on .calc-key.menu-k .ktop { color: #d3d6dc; }

/* fx-83GT top control cluster: ON/HOME/SETTINGS/back + cursor cross + scroll */
.calc-panel[data-skin="gcse"] .calc-row.cw-cluster { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr 1fr 1fr;
  grid-template-rows: auto auto auto; gap: 4px 5px; align-items: stretch;
  grid-template-areas: "on home . up . pu" "set back lt ok rt pd" ". . . dn . ."; }
.calc-panel[data-skin="gcse"] .cw-cluster .cw-on { grid-area: on; }
.calc-panel[data-skin="gcse"] .cw-cluster .cw-home { grid-area: home; }
.calc-panel[data-skin="gcse"] .cw-cluster .cw-set { grid-area: set; }
.calc-panel[data-skin="gcse"] .cw-cluster .cw-back { grid-area: back; }
.calc-panel[data-skin="gcse"] .cw-cluster .cur-up { grid-area: up; }
.calc-panel[data-skin="gcse"] .cw-cluster .cur-left { grid-area: lt; }
.calc-panel[data-skin="gcse"] .cw-cluster .cur-ok { grid-area: ok; }
.calc-panel[data-skin="gcse"] .cw-cluster .cur-right { grid-area: rt; }
.calc-panel[data-skin="gcse"] .cw-cluster .cur-down { grid-area: dn; }
.calc-panel[data-skin="gcse"] .cw-cluster .cw-pu { grid-area: pu; }
.calc-panel[data-skin="gcse"] .cw-cluster .cw-pd { grid-area: pd; }
.calc-panel[data-skin="gcse"] .cw-cluster .calc-key { min-height: 26px; padding-top: 0; }
.calc-panel[data-skin="gcse"] .cw-cluster .calc-key .ktop { display: none; }
.calc-panel[data-skin="gcse"] .cw-cluster .calc-key .kmain { width: 100%; aspect-ratio: auto; height: 100%; }
/* cluster keys: small round dark-grey caps */
.calc-panel[data-skin="gcse"] .cw-cluster .cw .kmain { background: linear-gradient(180deg,#4c4c53,#3a3a40); color: #e4e6ea; border: 1px solid #26262b; border-radius: 40px; font-size: 11px; box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.calc-panel[data-skin="gcse"] .cw-cluster .nav .kmain { background: linear-gradient(180deg,#525258,#3f3f45); color: #e4e6ea; border: 1px solid #29292e; border-radius: 40px; font-size: 12px; }
.calc-panel[data-skin="gcse"] .cw-cluster .ok .kmain { background: linear-gradient(180deg,#fbfbfc,#e9e9ec); color: #24242a; border: 1px solid #b9b9c0; border-radius: 40px; font-size: 11px; font-weight: 800; }

/* CATALOG / app-menu list + LCD tables — identical to the pale-LCD styling. */
.calc-panel[data-skin="gcse"] .lcd-sci.catalog { min-height: 62px; }
.calc-panel[data-skin="gcse"] .cat-item { font-size: 12px; line-height: 15px; white-space: nowrap; overflow: hidden; color: #24301c; }
.calc-panel[data-skin="gcse"] .cat-item.sel { background: #10140d; color: #cdd4c6; border-radius: 2px; }
.calc-panel[data-skin="gcse"] .stat-tbl td { color: #24301c; }
.calc-panel[data-skin="gcse"] .stat-tbl tr.sel td { background: #10140d; color: #cdd4c6; }