/* ===== Scoped to #sci-calc to avoid WP conflicts ===== */
#sci-calc {
  --bg: #0f1220;
  --panel: #171a2b;
  --muted: #9aa2af;
  --text: #e9edf3;
  --accent: #6be675;
  --accent-2: #56b6ff;
  --danger: #ff6b6b;
  --warn: #ffc857;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius: 18px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  position: relative;
  max-width: 820px;
  margin: 16px auto;
  outline: none;
  z-index: 1;
}
#sci-calc.light {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --text: #10141f;
  --muted: #6b7380;
  --accent: #2bb673;
  --accent-2: #1263d6;
  --danger: #d94242;
  --warn: #e39a00;
  --shadow: 0 10px 24px rgba(16,20,31,.15);
}

/* shell/card */
#sci-calc .sc-shell{
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}

/* header */
#sci-calc .sc-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px; background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
#sci-calc .sc-brand{display:flex; align-items:center; gap:10px}
#sci-calc .sc-logo{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background: radial-gradient(120% 120% at 20% 20%, var(--accent) 0%, var(--accent-2) 70%, transparent 100%);
  color:#0b0e19;font-weight:800;box-shadow: inset 0 0 18px rgba(0,0,0,.25);
}
#sci-calc .sc-title{font-size:1.05rem;letter-spacing:.3px;margin:0}
#sci-calc .sc-controls{display:flex; gap:8px}
#sci-calc .sc-btn{
  border:0;border-radius:12px;padding:10px 12px;cursor:pointer;
  background: #232845; color: var(--text); transition:.2s transform, .2s background;
}
#sci-calc.light .sc-btn{background:#edf1f7;color:#1a2233}
#sci-calc .sc-btn:hover{transform:translateY(-1px)}
#sci-calc .sc-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.15)}
#sci-calc.light .sc-btn.ghost{border-color:#dbe3ef}

/* topbar */
#sci-calc .sc-topbar{
  display:grid; grid-template-columns: 1fr auto auto; gap:12px; padding: 8px 16px 0 16px;
  align-items:center;
}
#sci-calc .sc-memory, #sci-calc .sc-quick{display:flex; gap:6px; flex-wrap:wrap}
#sci-calc .sc-btn.tiny{padding:6px 8px; font-size:.8rem; border-radius:10px}
#sci-calc .sc-btn.tiny.danger{background:rgba(255,0,0,.12); color:var(--danger)}

/* angle switch */
#sci-calc .sc-switch{position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer}
#sci-calc .sc-switch input{display:none}
#sci-calc .sc-switch .slider{
  width:48px;height:26px;border-radius:20px;display:block; background:#313755; position:relative;
}
#sci-calc.light .sc-switch .slider{background:#dfe6f3}
#sci-calc .sc-switch .slider::after{
  content:""; position:absolute; width:20px;height:20px;border-radius:50%;
  top:3px; left:3px; background:var(--accent); transition:.2s;
}
#sci-calc .sc-switch input:checked + .slider::after{left:25px}
#sci-calc .sc-switch .label{font-size:.85rem; color:var(--muted)}

/* display */
#sci-calc .sc-display{display:flex; align-items:stretch; gap:12px; padding: 12px 16px}
#sci-calc .sc-history-toggle{
  user-select:none; white-space:nowrap; align-self:flex-start; cursor:pointer;
  padding:10px 12px; border-radius:10px; border:1px dashed rgba(255,255,255,.12);
  color:var(--muted);
}
#sci-calc.light .sc-history-toggle{border-color:#dbe3ef}
#sci-calc .sc-screen{
  flex:1; background: var(--bg); border-radius:16px; padding:14px 16px;
  display:flex; flex-direction:column; gap:6px; min-height:110px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
#sci-calc.light .sc-screen{box-shadow: inset 0 0 0 1px #eef2f8}
#sci-calc .sc-exp{min-height:24px; color:var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-wrap:break-word}
#sci-calc .sc-out{font-size:2rem; font-weight:700; letter-spacing: .3px; word-wrap:break-word}

/* body layout */
#sci-calc .sc-body{display:grid; grid-template-columns: 1fr 240px; gap:12px; padding: 0 16px 16px}
@media (max-width: 980px){ #sci-calc .sc-body{grid-template-columns:1fr} #sci-calc .sc-history{order:3} }

/* keypad */
#sci-calc .sc-keypad{
  background: var(--bg); border-radius:16px; padding:12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  display:grid; grid-template-columns: repeat(6, 1fr); gap:10px;
}
#sci-calc.light .sc-keypad{box-shadow: inset 0 0 0 1px #eef2f8}
#sci-calc .sc-key{
  background:#1b2038; border:0; border-radius:14px; padding:12px 10px; color:#e8ecf5;
  font-size:1rem; cursor:pointer; transition:.12s transform, .2s background, .1s box-shadow;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
#sci-calc.light .sc-key{background:#ffffff; color:#10141f; box-shadow: 0 2px 0 rgba(0,0,0,.06)}
#sci-calc .sc-key:active{transform:translateY(1px)}
#sci-calc .sc-key.wide{grid-column: span 2}
#sci-calc .sc-key.eq{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0e19; font-weight:800}
#sci-calc .sc-key.op{background:#2a3158}
#sci-calc .sc-key.fn{background:#263152}
#sci-calc .sc-key.warn{background:rgba(255,200,87,.18); color:#ffd88c}

/* history */
#sci-calc .sc-history{
  background: var(--bg); border-radius:16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  padding: 12px; max-height: 420px; overflow:auto; display:none;
}
#sci-calc.light .sc-history{box-shadow: inset 0 0 0 1px #eef2f8}
#sci-calc .sc-history.open{display:block}
#sci-calc .sc-history ul{list-style:none; padding:0; margin:0}
#sci-calc .sc-history li{
  padding:10px; border-radius:10px; background:#13172a; margin-bottom:8px; cursor:pointer;
  display:flex; justify-content:space-between; gap:8px; align-items:baseline;
}
#sci-calc.light .sc-history li{background:#f5f7fb}
#sci-calc .sc-history li .expr{color:var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
#sci-calc .sc-history li .res{font-weight:700}

/* footer */
#sci-calc .sc-footer{padding: 8px 16px 16px; color:var(--muted); font-size:.8rem}