:root {
  --bg: #000; --panel: rgba(255,255,255,.88); --text: #172033; --muted: #7a8497;
  --key: #fff; --key-hover: #f5f7fb; --border: #dfe5ee; --accent: #5b5ce2;
  --accent2: #7374f4; --operator: #edf0ff; --function: #f3f5f9; --shadow: 0 24px 70px rgba(44,53,78,.13);
}
[data-theme="dark"] {
  --bg: #000; --panel: rgba(24,31,46,.9); --text: #eef2ff; --muted: #929bad;
  --key: #242c3d; --key-hover: #30394d; --border: #343d51; --accent: #818cf8;
  --accent2: #6366f1; --operator: #2d3155; --function: #20283a; --shadow: 0 25px 80px rgba(0,0,0,.38);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: background .25s, color .25s; }
button { font: inherit; }
.app-shell { width: min(1120px, calc(100% - 32px)); margin: 42px auto; display: grid; grid-template-columns: minmax(0, 720px) minmax(270px, 1fr); gap: 22px; align-items: stretch; }
.calculator, .history-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.calculator { padding: 28px; }
.topbar, .history-header, .angle-row { display: flex; align-items: center; justify-content: space-between; }
.header-actions, .user-chip { display: flex; align-items: center; gap: 9px; }
.sign-in-button, .user-chip { min-height: 44px; border: 1px solid var(--border); border-radius: 14px; background: var(--key); color: var(--text); font-size: 13px; font-weight: 700; }
.sign-in-button { padding: 0 15px; cursor: pointer; }
.user-chip { padding: 5px 7px 5px 5px; }
.user-chip img { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; }
.user-chip button { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
h1, h2 { margin: 0; letter-spacing: -.035em; }
h1 { font-size: clamp(21px, 3vw, 28px); } h2 { font-size: 22px; }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 14px; background: var(--key); color: var(--text); cursor: pointer; }
.moon { display: none; } [data-theme="dark"] .sun { display:none; } [data-theme="dark"] .moon { display:inline; }
.display { margin: 24px 0 14px; min-height: 130px; padding: 20px 22px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: color-mix(in srgb, var(--key) 70%, transparent); }
.expression { width: 100%; min-height: 26px; color: var(--muted); font-size: 18px; text-align: right; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.result { max-width: 100%; margin-top: 7px; font-size: clamp(34px, 7vw, 52px); font-weight: 700; letter-spacing: -.045em; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.angle-row { margin-bottom: 14px; }
.segmented { display: flex; padding: 3px; border-radius: 10px; background: var(--function); }
.angle { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; cursor: pointer; }
.angle.active { background: var(--key); color: var(--accent); box-shadow: 0 2px 7px rgba(0,0,0,.08); }
.memory-note, .shortcut { color: var(--muted); font-size: 12px; }
.keypad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.key { min-height: 54px; border: 1px solid var(--border); border-radius: 15px; background: var(--key); color: var(--text); font-size: 16px; font-weight: 650; cursor: pointer; transition: transform .08s, background .15s, border-color .15s; user-select: none; }
.key:hover { background: var(--key-hover); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.key:active, .key.pressed { transform: scale(.95); }
.key.function { background: var(--function); color: color-mix(in srgb, var(--text) 82%, var(--accent)); font-size: 14px; }
.key.utility { color: #e44c64; background: color-mix(in srgb, #e44c64 8%, var(--key)); }
.key.operator { color: var(--accent); background: var(--operator); font-size: 21px; }
.key.equals { grid-row: span 2; background: linear-gradient(145deg, var(--accent), var(--accent2)); border-color: transparent; color: #fff; font-size: 24px; box-shadow: 0 10px 22px rgba(91,92,226,.27); }
.zero { grid-column: span 2; }
.history-panel { padding: 25px; display: flex; flex-direction: column; min-height: 500px; }
.text-button { border: 0; background: transparent; color: var(--accent); font-weight: 700; cursor: pointer; }
.history-list { flex: 1; margin: 22px -5px 16px; max-height: 640px; overflow-y: auto; }
.history-item { width: 100%; margin-bottom: 9px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--key); color: var(--text); text-align: right; cursor: pointer; }
.history-expression { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.history-result { margin-top: 5px; font-size: 20px; font-weight: 750; }
.empty-state { height: 100%; min-height: 260px; display: grid; place-content: center; justify-items: center; color: var(--muted); text-align: center; }
.empty-state span { font-size: 30px; color: var(--accent); opacity: .6; }.empty-state p { max-width: 190px; line-height: 1.5; }
.shortcut { margin: auto 0 0; text-align: center; } kbd { padding: 2px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--function); }
@media (max-width: 820px) { .app-shell { grid-template-columns: 1fr; margin: 20px auto; }.history-panel { min-height: 260px; }.history-list { max-height: 280px; }.empty-state { min-height: 140px; } }
@media (max-width: 520px) { .app-shell { width: 100%; margin: 0; gap: 10px; }.calculator, .history-panel { border-radius: 0; border-left: 0; border-right: 0; }.calculator { padding: 18px 12px; }.topbar { padding: 0 4px; align-items: flex-start; }.topbar h1 { font-size: 18px; }.sign-in-button { width: 44px; padding: 0; font-size: 0; }.sign-in-button::after { content: "G"; font-size: 17px; }.user-chip span { display: none; }.user-chip { padding-right: 3px; }.user-chip button { font-size: 0; }.user-chip button::after { content: "×"; font-size: 18px; }.display { min-height: 112px; margin-top: 18px; }.keypad { gap: 7px; }.key { min-height: 49px; border-radius: 13px; font-size: 15px; }.key.function { font-size: 12px; }.history-panel { padding: 20px 16px; } }