/* ── Reset & Base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --body-bg:   #252525;
  --calc-bg:   #333;
  --calc-edge: #1c1c1c;

  --lcd-bg:    #8fa87a;
  --lcd-shade: #6e8a5a;
  --lcd-text:  #141e0c;
  --lcd-dim:   #3a5028;

  --key-bg:       #4a4a4a;
  --key-hi:       #585858;
  --key-shadow:   #1a1a1a;

  --key-tvm-bg:   #404040;
  --key-mem-bg:   #3d4f5a;
  --key-op-bg:    #3a3a3a;
  --key-eq-bg:    #5a3e14;
  --key-func-bg:  #2a4050;
  --key-nav-bg:   #383838;
  --key-2nd-bg:   #7a6010;
  --key-2nd-act:  #c8a030;
  --key-clr-bg:   #3a3030;
  --key-num-bg:   #484848;
  --key-math-bg:  #424242;

  --sec-color: #f5c400;
  --pri-color: #f0f0f0;

  --ws-bg:   #1e2e3a;
  --ws-border: #2d4556;

  --accent:  #4ac0a0;
  --danger:  #e05050;
}

html, body {
  height: 100%;
  background: var(--body-bg);
  font-family: 'Space Grotesk', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* ── App Shell ──────────────────────────────────────── */
.app-shell {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 0.75rem 2rem;
}

@media (max-width: 480px) {
  .app-shell { padding: 0; }
}

/* ── Calculator Body ────────────────────────────────── */
.calculator {
  width: min(420px, 100%);
  background: linear-gradient(175deg, #3d3d3d, #2a2a2a);
  border: 2px solid var(--calc-edge);
  border-radius: 18px;
  padding: 14px 14px 18px;
  box-shadow:
    0 4px 0 1px #111,
    0 30px 60px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.07);
}

@media (max-width: 480px) {
  .calculator {
    border-radius: 0;
    border: none;
    min-height: 100vh;
    padding: 10px 10px 14px;
  }
}

/* ── LCD Display ────────────────────────────────────── */
.display {
  background: linear-gradient(180deg, #9db889 0%, #7e9e6a 100%);
  border: 3px solid var(--lcd-shade);
  border-radius: 8px;
  padding: 10px 14px 12px;
  margin-bottom: 12px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.3),
    0 1px 0 rgba(255,255,255,.08);
  position: relative;
}

.display-status {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--lcd-dim);
  font-weight: 700;
  text-transform: uppercase;
  min-height: 14px;
  margin-bottom: 4px;
}

.display-expr {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: var(--lcd-dim);
  text-align: right;
  min-height: 14px;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.display-screen {
  display: block;
  width: 100%;
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(2rem, 9vw, 2.6rem);
  font-weight: 400;
  text-align: right;
  color: var(--lcd-text);
  letter-spacing: 0.06em;
  line-height: 1.1;
  word-break: break-all;
}

/* ── Worksheets ─────────────────────────────────────── */
.worksheet {
  background: var(--ws-bg);
  border: 1px solid var(--ws-border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 11px;
  animation: slideDown 180ms ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ws-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ws-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sec-color);
  text-transform: uppercase;
}

.ws-close {
  background: none;
  border: none;
  color: #888;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
.ws-close:hover { color: #fff; }

.ws-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 9px;
}

.ws-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ws-field--full { grid-column: 1 / -1; }

.ws-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #a8c0cc;
  letter-spacing: 0.03em;
}

.ws-hint {
  font-size: 0.65rem;
  font-weight: 400;
  color: #607080;
  margin-left: 4px;
}

.ws-field input,
.cf-row input {
  background: rgba(0,0,0,.35);
  border: 1px solid #2d4556;
  border-radius: 5px;
  color: #e8f4f0;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.9rem;
  padding: 5px 8px;
  width: 100%;
  -moz-appearance: textfield;
}
.ws-field input::-webkit-outer-spin-button,
.ws-field input::-webkit-inner-spin-button,
.cf-row input::-webkit-outer-spin-button,
.cf-row input::-webkit-inner-spin-button { -webkit-appearance: none; }

.ws-field input:focus,
.cf-row input:focus {
  outline: 2px solid rgba(74,192,160,.4);
  border-color: transparent;
}

.ws-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.ws-btn {
  background: linear-gradient(180deg, #1e4060, #142d44);
  border: 1px solid #2d5070;
  border-radius: 6px;
  color: #c8e8f8;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 7px 4px;
  cursor: pointer;
  text-align: center;
  transition: filter 100ms;
}
.ws-btn:hover { filter: brightness(1.15); }
.ws-btn:active { filter: brightness(0.9); }

.ws-btn--wide { grid-column: span 2; }

.ws-btn--green {
  background: linear-gradient(180deg, #1a5040, #0e3028);
  border-color: #2a7060;
  color: #88e8c8;
}

.ws-btn--add {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(180deg, #2a3840, #1a2830);
  border-color: #3a5060;
  color: #88aabb;
  font-size: 0.78rem;
}

.ws-note {
  font-size: 0.66rem;
  color: #506070;
  margin-top: 7px;
  line-height: 1.4;
}

/* CF panel */
.cf-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
}

.cf-cpt-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cf-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 200px;
  overflow-y: auto;
}

.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 5px;
  align-items: center;
}

.cf-row-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #7090a0;
  white-space: nowrap;
}

.cf-row-freq {
  display: flex;
  align-items: center;
  gap: 3px;
}

.cf-row-freq label {
  font-size: 0.65rem;
  color: #506070;
}

.cf-row-freq input {
  width: 44px !important;
}

.cf-remove {
  background: none;
  border: none;
  color: #604040;
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.cf-remove:hover { color: var(--danger); }

/* ── Register Overlay ───────────────────────────────── */
.register-overlay {
  background: linear-gradient(175deg, #1a2f3f, #111e28);
  border: 1px solid #2a4050;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 11px;
  animation: slideDown 150ms ease;
}

.reg-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sec-color);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.reg-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}

.reg-btn {
  background: linear-gradient(180deg, #243444, #18262e);
  border: 1px solid #2d4050;
  border-radius: 6px;
  color: #c8e0ec;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  padding: 6px 2px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.reg-btn:hover { border-color: var(--accent); color: #fff; }

.reg-btn-num  { font-size: 0.95rem; font-weight: 700; color: #fff; }
.reg-btn-val  { font-size: 0.6rem; color: #7090a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 48px; }

.reg-cancel {
  width: 100%;
  background: none;
  border: 1px solid #2a3540;
  border-radius: 5px;
  color: #607080;
  font-size: 0.75rem;
  padding: 5px;
  cursor: pointer;
}
.reg-cancel:hover { color: #aaa; border-color: #404f60; }

/* ── Keypad ─────────────────────────────────────────── */
.keypad {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.krow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.krow-last {
  grid-template-columns: repeat(4, 1fr);
}

/* ── Key base ───────────────────────────────────────── */
.key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 2px 6px;
  height: 54px;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 3px 0 var(--key-shadow);
  transition: transform 80ms ease, filter 80ms ease;
  background: linear-gradient(180deg, var(--key-hi) 0%, var(--key-bg) 100%);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.key:hover  { filter: brightness(1.12); }
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--key-shadow); filter: brightness(0.9); }

/* secondary label */
.ks {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--sec-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  position: absolute;
  top: 6px;
  white-space: nowrap;
  pointer-events: none;
}

/* primary label */
.kp {
  font-size: 15px;
  font-weight: 700;
  color: var(--pri-color);
  line-height: 1;
  pointer-events: none;
  font-family: 'Space Grotesk', sans-serif;
}

/* ── Key type variants ──────────────────────────────── */
.key-nav  { --key-bg: var(--key-nav-bg);  --key-hi: #484848; }
.key-tvm  { --key-bg: var(--key-tvm-bg);  --key-hi: #505050; }
.key-math { --key-bg: var(--key-math-bg); --key-hi: #525252; }
.key-op   { --key-bg: var(--key-op-bg);   --key-hi: #484848; }
.key-num  { --key-bg: var(--key-num-bg);  --key-hi: #585858; }
.key-func {
  --key-bg: var(--key-func-bg);
  --key-hi: #345060;
  border: 1px solid #2d5070;
}
.key-mem  { --key-bg: var(--key-mem-bg);  --key-hi: #4d6070; }
.key-eq   { --key-bg: var(--key-eq-bg);   --key-hi: #6a4a18; }
.key-clr  { --key-bg: var(--key-clr-bg);  --key-hi: #4a3838; }

/* 2ND key */
.key-2nd {
  --key-bg: var(--key-2nd-bg);
  --key-hi: #907020;
}
.key-2nd .kp {
  color: #fff8e0;
  font-size: 16px;
}
.key-2nd.active {
  --key-bg: var(--key-2nd-act);
  --key-hi: #d8b040;
  box-shadow: 0 3px 0 #5a4000, 0 0 10px rgba(200,160,48,.5);
}
.key-2nd.active .kp { color: #fff; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 380px) {
  .key { height: 48px; }
  .kp  { font-size: 13px; }
  .ks  { font-size: 8px; }
  .keypad { gap: 4px; }
  .krow   { gap: 4px; }
  .display-screen { font-size: 1.9rem; }
}

@media (min-width: 600px) {
  .key { height: 58px; }
  .kp  { font-size: 16px; }
}