/* ================================================================
   Scientific Calculator — Industrial Dark Aesthetic
   Gunmetal body · Amber LCD display · Tactile button grid
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@400;500;600;700&display=swap');

/* ── Tokens ────────────────────────────────────────────────────── */
:root {
  --sci-body:         #1c1f24;
  --sci-body-mid:     #23272e;
  --sci-body-light:   #2e333d;
  --sci-edge:         #0f1115;
  --sci-chrome:       #3a4050;
  --sci-chrome-hi:    #4e5666;

  --sci-display-bg:   #1a2510;
  --sci-display-on:   #b8cc6e;
  --sci-display-dim:  #4a5830;
  --sci-amber:        #c8a84b;
  --sci-amber-bright: #f0cc6a;

  --sci-num-bg:       #2a2f3a;
  --sci-num-top:      #353b48;
  --sci-num-text:     #e8ecf0;
  --sci-num-shadow:   #14171d;

  --sci-op-bg:        #1e4a7a;
  --sci-op-top:       #2560a0;
  --sci-op-text:      #c8dff5;

  --sci-fn-bg:        #1a1d22;
  --sci-fn-top:       #23272e;
  --sci-fn-text:      #8a9bb0;
  --sci-fn-shift:     #d4892a;

  --sci-mem-bg:       #2a1a0a;
  --sci-mem-top:      #3d2810;
  --sci-mem-text:     #d4892a;

  --sci-mode-bg:      #141620;
  --sci-mode-top:     #1c2030;
  --sci-mode-text:    #9eb0c8;

  --sci-eq-bg:        #1a3d1a;
  --sci-eq-top:       #246824;
  --sci-eq-text:      #7cfc7c;

  --sci-ac-bg:        #4a1010;
  --sci-ac-top:       #781818;
  --sci-ac-text:      #ffaaaa;

  --sci-shift-active: #d4892a;
  --sci-key-radius:   4px;
  --sci-font-main:    'Rajdhani', sans-serif;
  --sci-font-display: 'Share Tech Mono', monospace;
  --sci-font-brand:   'Orbitron', sans-serif;
  --sci-w:            320px;
}

/* ── Wrapper & Alignment ───────────────────────────────────────── */
.sci-calc-wrap { display: block; padding: 16px 0; }
.sci-align-center { display: flex; justify-content: center; }
.sci-align-right  { display: flex; justify-content: flex-end; }
.sci-align-left   { display: flex; justify-content: flex-start; }

/* ── Calculator Body ───────────────────────────────────────────── */
.sci-calc {
  width: var(--sci-w);
  background: linear-gradient(170deg, var(--sci-body-mid) 0%, var(--sci-body) 60%, var(--sci-edge) 100%);
  border-radius: 14px 14px 20px 20px;
  border: 1.5px solid var(--sci-chrome);
  box-shadow:
    0 0 0 1px var(--sci-edge),
    4px 8px 32px rgba(0,0,0,0.7),
    0 2px 4px rgba(255,255,255,0.04) inset,
    -1px -2px 8px rgba(0,0,0,0.5) inset;
  padding: 14px 12px 18px;
  user-select: none;
  position: relative;
  overflow: hidden;
}

/* Subtle texture overlay */
.sci-calc::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.012) 2px,
      rgba(255,255,255,0.012) 3px
    );
  pointer-events: none;
  border-radius: inherit;
}

/* Top curve groove */
.sci-calc::after {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--sci-chrome-hi) 20%,
    var(--sci-chrome-hi) 80%,
    transparent 100%);
  border-radius: 0 0 4px 4px;
}

/* ── Brand Strip ───────────────────────────────────────────────── */
.sci-brand-strip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 6px 10px;
}
.sci-brand-name {
  font-family: var(--sci-font-brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sci-amber);
  text-shadow: 0 0 8px rgba(200,168,75,0.4);
}
.sci-brand-sub {
  font-family: var(--sci-font-brand);
  font-size: 6.5px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--sci-chrome-hi);
  text-transform: uppercase;
}

/* ── Display ───────────────────────────────────────────────────── */
.sci-display {
  background: var(--sci-display-bg);
  border-radius: 6px;
  border: 2px solid var(--sci-edge);
  box-shadow:
    0 0 0 1px rgba(184,204,110,0.08) inset,
    0 4px 16px rgba(0,0,0,0.6) inset,
    0 1px 2px rgba(255,255,255,0.06);
  padding: 10px 12px 12px;
  margin-bottom: 12px;
  min-height: 86px;
  position: relative;
  overflow: hidden;
}

/* Scanline on display */
.sci-display::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
}

.sci-display-inner { position: relative; z-index: 1; }

.sci-mode-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
}
.sci-indicator {
  font-family: var(--sci-font-display);
  font-size: 8px;
  color: var(--sci-display-dim);
  letter-spacing: 0.05em;
  transition: color 0.15s, text-shadow 0.15s;
}
.sci-indicator.sci-active {
  color: var(--sci-display-on);
  text-shadow: 0 0 6px rgba(184,204,110,0.5);
}
.sci-hidden { display: none !important; }

.sci-expr-line {
  font-family: var(--sci-font-display);
  font-size: 11px;
  color: var(--sci-display-dim);
  min-height: 16px;
  text-align: right;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.sci-result-line {
  font-family: var(--sci-font-display);
  font-size: 28px;
  color: var(--sci-display-on);
  text-align: right;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(184,204,110,0.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: font-size 0.1s;
}

.sci-result-line.sci-result-long {
  font-size: 18px;
}

/* ── Keyboard ──────────────────────────────────────────────────── */
.sci-keyboard {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sci-row {
  display: grid;
  gap: 5px;
}
.sci-row-mode   { grid-template-columns: repeat(5, 1fr); }
.sci-row        { grid-template-columns: repeat(5, 1fr); }
.sci-row-num    { grid-template-columns: repeat(3, 1fr) 1fr; }
.sci-row-bottom { grid-template-columns: 1fr 2fr; gap: 5px; }

/* ── Base Key ──────────────────────────────────────────────────── */
.sci-key {
  position: relative;
  border: none;
  border-radius: var(--sci-key-radius);
  cursor: pointer;
  font-family: var(--sci-font-main);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0;
  height: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.07s, box-shadow 0.07s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* 3D button effect via box-shadow */
.sci-key::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 50%);
  pointer-events: none;
}

.sci-key:active {
  transform: translateY(1px);
}

/* Shift/secondary label above main label */
.sci-shift-label {
  position: absolute;
  top: 1px;
  font-size: 7px;
  color: var(--sci-fn-shift);
  font-family: var(--sci-font-main);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
  opacity: 0.85;
}
.sci-main-label {
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}

/* ── Key Type Styles ───────────────────────────────────────────── */

/* Number keys */
.sci-key-num {
  background: linear-gradient(180deg, var(--sci-num-top) 0%, var(--sci-num-bg) 100%);
  color: var(--sci-num-text);
  font-size: 15px;
  font-weight: 700;
  box-shadow:
    0 3px 0 var(--sci-num-shadow),
    0 4px 6px rgba(0,0,0,0.4),
    0 1px 0 rgba(255,255,255,0.06) inset;
  border: 1px solid rgba(255,255,255,0.05);
}
.sci-key-num:active {
  box-shadow:
    0 1px 0 var(--sci-num-shadow),
    0 1px 2px rgba(0,0,0,0.4);
  background: linear-gradient(180deg, var(--sci-num-bg) 0%, var(--sci-num-top) 100%);
}
.sci-key-num:hover { background: linear-gradient(180deg, #3d4558 0%, #333848 100%); }

/* Operator keys */
.sci-key-op {
  background: linear-gradient(180deg, var(--sci-op-top) 0%, var(--sci-op-bg) 100%);
  color: var(--sci-op-text);
  font-size: 16px;
  font-weight: 700;
  box-shadow:
    0 3px 0 #0d2a4a,
    0 4px 8px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.08) inset;
  border: 1px solid rgba(100,160,255,0.1);
}
.sci-key-op:active {
  box-shadow: 0 1px 0 #0d2a4a, 0 1px 4px rgba(0,0,0,0.4);
  background: linear-gradient(180deg, var(--sci-op-bg) 0%, var(--sci-op-top) 100%);
}
.sci-key-op:hover { background: linear-gradient(180deg, #2d70b8 0%, #1e5090 100%); }

/* Function keys */
.sci-key-fn {
  background: linear-gradient(180deg, var(--sci-fn-top) 0%, var(--sci-fn-bg) 100%);
  color: var(--sci-fn-text);
  font-size: 11px;
  box-shadow:
    0 2px 0 #0a0b0e,
    0 3px 5px rgba(0,0,0,0.4),
    0 1px 0 rgba(255,255,255,0.04) inset;
  border: 1px solid rgba(255,255,255,0.04);
}
.sci-key-fn:active {
  box-shadow: 0 0px 0 #0a0b0e, 0 1px 3px rgba(0,0,0,0.4);
  background: linear-gradient(180deg, var(--sci-fn-bg) 0%, var(--sci-fn-top) 100%);
}
.sci-key-fn:hover { background: linear-gradient(180deg, #2d3240 0%, #1e2330 100%); color: #b0c0d8; }

/* Memory keys */
.sci-key-mem {
  background: linear-gradient(180deg, var(--sci-mem-top) 0%, var(--sci-mem-bg) 100%);
  color: var(--sci-mem-text);
  font-size: 10px;
  box-shadow:
    0 2px 0 #100800,
    0 3px 5px rgba(0,0,0,0.4),
    0 1px 0 rgba(255,200,100,0.05) inset;
  border: 1px solid rgba(212,137,42,0.1);
}
.sci-key-mem:active {
  box-shadow: 0 0px 0 #100800, 0 1px 2px rgba(0,0,0,0.4);
  background: linear-gradient(180deg, var(--sci-mem-bg) 0%, var(--sci-mem-top) 100%);
}
.sci-key-mem:hover { background: linear-gradient(180deg, #4d3010 0%, #3a2008 100%); }

/* Mode keys */
.sci-key-mode {
  background: linear-gradient(180deg, var(--sci-mode-top) 0%, var(--sci-mode-bg) 100%);
  color: var(--sci-mode-text);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  box-shadow:
    0 2px 0 #080a10,
    0 3px 5px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.04) inset;
  border: 1px solid rgba(100,120,180,0.12);
}
.sci-key-mode:active {
  box-shadow: 0 0px 0 #080a10, 0 1px 3px rgba(0,0,0,0.4);
  background: var(--sci-mode-bg);
}
.sci-key-mode:hover { background: linear-gradient(180deg, #242840 0%, #181c2a 100%); color: #b8ccee; }

/* SHIFT active glow */
.sci-key-mode[data-action="shift"].sci-shift-on {
  background: linear-gradient(180deg, #5a3a08 0%, #3a2305 100%);
  color: var(--sci-amber-bright);
  box-shadow:
    0 2px 0 #1a0c00,
    0 0 10px rgba(200,160,40,0.3),
    0 3px 5px rgba(0,0,0,0.5);
}

/* AC key — red danger */
.sci-key-ac {
  background: linear-gradient(180deg, var(--sci-ac-top) 0%, var(--sci-ac-bg) 100%) !important;
  color: var(--sci-ac-text) !important;
  box-shadow:
    0 2px 0 #2a0808,
    0 3px 5px rgba(0,0,0,0.5),
    0 0 6px rgba(255,80,80,0.1) !important;
  border: 1px solid rgba(255,100,100,0.1) !important;
}
.sci-key-ac:hover { background: linear-gradient(180deg, #901c1c 0%, #5c1010 100%) !important; }
.sci-key-ac:active { background: linear-gradient(180deg, var(--sci-ac-bg) 0%, var(--sci-ac-top) 100%) !important; }

/* Equals key — green wide */
.sci-key-eq {
  background: linear-gradient(180deg, var(--sci-eq-top) 0%, var(--sci-eq-bg) 100%);
  color: var(--sci-eq-text);
  font-size: 20px;
  font-weight: 700;
  box-shadow:
    0 3px 0 #0a1e0a,
    0 4px 10px rgba(0,0,0,0.5),
    0 0 8px rgba(60,200,60,0.08),
    0 1px 0 rgba(100,255,100,0.06) inset;
  border: 1px solid rgba(100,200,100,0.1);
  height: 34px;
}
.sci-key-eq:active {
  box-shadow: 0 1px 0 #0a1e0a, 0 1px 4px rgba(0,0,0,0.5);
  background: linear-gradient(180deg, var(--sci-eq-bg) 0%, var(--sci-eq-top) 100%);
}
.sci-key-eq:hover { background: linear-gradient(180deg, #2e7a2e 0%, #1a4a1a 100%); }

/* Negate key */
.sci-key-neg {
  font-size: 10px !important;
  height: 34px;
}

/* ── Shift mode: highlight shift labels ────────────────────────── */
.sci-calc.sci-shift-mode .sci-shift-label {
  color: var(--sci-amber-bright);
  opacity: 1;
  text-shadow: 0 0 5px rgba(240,200,80,0.4);
}
.sci-calc.sci-shift-mode .sci-key-fn {
  border-color: rgba(212,137,42,0.3);
  box-shadow:
    0 2px 0 #0a0b0e,
    0 3px 5px rgba(0,0,0,0.4),
    0 0 4px rgba(212,137,42,0.15);
}

/* ── Error state ───────────────────────────────────────────────── */
.sci-result-line.sci-error {
  color: #ff6666;
  font-size: 16px;
  text-shadow: 0 0 10px rgba(255,80,80,0.4);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 380px) {
  :root { --sci-w: 290px; }
  .sci-result-line { font-size: 24px; }
  .sci-key { height: 30px; }
  .sci-key-eq { height: 30px; }
}

/* ── Light theme override ──────────────────────────────────────── */
.sci-theme-light {
  background: linear-gradient(170deg, #dde2ec 0%, #c8cdd8 60%, #b0b8c8 100%);
  border-color: #8090a8;
  box-shadow:
    0 0 0 1px #7080a0,
    4px 8px 32px rgba(0,0,0,0.25),
    0 2px 4px rgba(255,255,255,0.7) inset;
}
.sci-theme-light .sci-brand-name { color: #2244aa; text-shadow: none; }
.sci-theme-light .sci-brand-sub  { color: #6070a0; }
.sci-theme-light .sci-display    { background: #c8d0a0; border-color: #8090a0; }
.sci-theme-light .sci-display-on  { color: #1a2e00; text-shadow: none; }
.sci-theme-light .sci-result-line { color: #1a3000; text-shadow: 0 1px 0 rgba(255,255,255,0.3); }
.sci-theme-light .sci-expr-line   { color: #4a5830; }
.sci-theme-light .sci-indicator   { color: #7a8870; }
.sci-theme-light .sci-indicator.sci-active { color: #1a3000; text-shadow: none; }