:root{
  --bg: #0f1226;
  --glass: rgba(255,255,255,0.08);
  --text: #ffffff;
  --muted: #b9c1ff;
  --chip: rgba(255,255,255,0.12);
  --accent1: #ff5b84;
  --accent2: #7c5cff;
  --accent3: #11d3ff;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

.bg-gradient{
  position: fixed; inset:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,91,132,0.25), transparent 60%),
    radial-gradient(1000px 600px at 110% 20%, rgba(17,211,255,0.25), transparent 60%),
    radial-gradient(1000px 600px at 50% 120%, rgba(124,92,255,0.25), transparent 60%);
  filter: blur(10px);
  z-index:-1;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; position:sticky; top:0;
  background: linear-gradient(180deg, rgba(15,18,38,0.9), rgba(15,18,38,0.3));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topbar h1{ margin:0; font-weight:800; letter-spacing:0.3px; }
.top-actions{ display:flex; gap:8px; }

.container{
  max-width:1200px; margin:24px auto; padding:0 16px;
}

.glass{
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}

.display-card{ padding:16px; }

.mode-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.modes{ display:flex; gap:8px; flex-wrap:wrap; }
.mode-btn{
  border:1px solid rgba(255,255,255,0.12); background: var(--chip);
  color: var(--text); border-radius:999px; padding:8px 14px; cursor:pointer;
  font-weight:700; letter-spacing:0.3px;
}
.mode-btn.active{ outline:2px solid var(--accent2); background: rgba(124,92,255,0.25); }

.switch{ position:relative; display:inline-block; width:52px; height:30px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background:#222846; border-radius:999px; transition:.2s;
}
.slider:before{
  content:""; position:absolute; height:22px; width:22px; left:4px; top:4px;
  background:white; border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{ background: linear-gradient(45deg, var(--accent3), var(--accent2)); }
.switch input:checked + .slider:before{ transform: translateX(22px); }
.toggle-label{ margin-left:8px; font-weight:700; color:var(--muted); }

.display-wrap{ display:flex; flex-direction:column; gap:6px; }
.display-input{
  width:100%; padding:14px 16px; font-size:1.25rem; border-radius:14px;
  border:1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.25); color:var(--text);
  outline:none;
}
.display-input::placeholder{ color:#9ca3ff; }
.display-secondary{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:0.95rem; color:var(--muted);
}
.display-actions{ display:flex; gap:8px; }
.chip{
  border:1px solid rgba(255,255,255,0.12); background: var(--chip);
  color:var(--text); border-radius:999px; padding:6px 12px; cursor:pointer; font-weight:700;
}

.layout{
  margin-top:16px;
  display:grid; grid-template-columns: 1.4fr 0.8fr; gap:16px;
}
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .history{ order: 3; }
}

.keypads{ display:flex; flex-direction:column; gap:16px; }

.pad{ padding:16px; }
.hidden{ display:none; }

.keys-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.keys-grid button{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px; padding:14px 10px; font-size:1.05rem; font-weight:800;
  cursor:pointer; color:var(--text);
  transition: transform .08s ease, box-shadow .08s ease, background .2s ease;
}
.keys-grid button:active{ transform: translateY(1px); }
.keys-grid button:hover{ box-shadow: 0 6px 16px rgba(0,0,0,0.25); }

.eq{
  grid-column: span 4;
  background: linear-gradient(45deg, var(--accent1), var(--accent2));
  border: none;
}

.memory-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-top:10px; }
.memory-row button{
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  border-radius:12px; padding:10px; font-weight:700; cursor:pointer; color:var(--text);
}

.sci-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }

.pad-stats .stats-wrap{ display:flex; flex-direction:column; gap:10px; }
#dataset{
  min-height:110px; border-radius:14px; border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25); color:var(--text); padding:12px;
}
.stats-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.stats-actions button{
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  border-radius:999px; padding:8px 12px; font-weight:700; cursor:pointer; color:var(--text);
}
.stats-output{ margin-top:4px; color:#e5e7ff; }

.history{ padding:16px; max-height:560px; overflow:auto; }
.history-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
#historyList{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
#historyList li{
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  padding:10px; border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.hist-exp{ opacity:0.9; }
.hist-res{ font-weight:800; }
.hist-btns{ display:flex; gap:6px; }
.hist-btns button{
  background: var(--chip); color:var(--text); border:1px solid rgba(255,255,255,0.12);
  border-radius:8px; padding:4px 8px; cursor:pointer; font-size:0.85rem;
}

.foot{ text-align:center; color:var(--muted); padding:16px 0 40px; }
.foot code{ background: rgba(255,255,255,0.07); padding:2px 6px; border-radius:6px; }

/* Light theme */
body.light{
  --bg: #f5f7ff;
  --glass: rgba(0,0,0,0.04);
  --text: #0f1226;
  --muted: #4a4f7a;
  --chip: rgba(0,0,0,0.06);
}