*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --accent: #0891B2;
    --accent-40: rgba(8,145,178,0.25);
    --accent-80: rgba(8,145,178,0.5);
    --bg: #F8FAFC;
    --bg-white: #FFFFFF;
    --border: rgba(0,0,0,0.08);
    --text: #1E293B;
    --text-dim: #64748B;
    --text-light: #94A3B8;
    --output-color: #1D4ED8;
    --error: #DC2626;
    --line: rgba(0,0,0,0.10);
    --line-active: rgba(8,145,178,0.25);
    --font-mono: 'JetBrains Mono','Fira Code','SF Mono','Cascadia Code',monospace;
    --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

html, body { height:100%; font-family:var(--font-sans); background:var(--bg); color:var(--text); overflow:hidden; }
.hidden { display:none !important; }

/* ── Auth ── */
#authScreen {
    display:flex; align-items:center; justify-content:center; height:100vh;
    background:linear-gradient(135deg,#F0F9FF 0%,#E0F2FE 50%,#F0FDFA 100%);
}
.auth-card {
    background:var(--bg-white); border-radius:16px; padding:40px; width:340px; max-width:90vw;
    box-shadow:0 4px 24px rgba(0,0,0,0.08); text-align:center;
}
.auth-logo { font-size:28px; font-weight:800; color:var(--accent); margin-bottom:28px; letter-spacing:-0.5px; }
.auth-field { margin-bottom:14px; }
.auth-field input {
    width:100%; padding:10px 14px; border:1.5px solid rgba(0,0,0,0.12); border-radius:8px;
    font-size:15px; color:var(--text); background:var(--bg); outline:none; transition:border-color 0.15s;
}
.auth-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(8,145,178,0.1); }
.auth-field input::placeholder { color:var(--text-light); }
.auth-error { color:var(--error); font-size:13px; min-height:20px; margin-bottom:6px; }
.auth-btn {
    width:100%; padding:11px; background:var(--accent); color:#fff; border:none; border-radius:8px;
    font-size:15px; font-weight:600; cursor:pointer; transition:background 0.15s;
}
.auth-btn:hover { background:#0E7490; }

/* ── Header ── */
#app { display:flex; flex-direction:column; height:100vh; }
#header {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; height:44px; background:var(--bg-white); border-bottom:1px solid var(--border); flex-shrink:0;
}
.header-left { display:flex; align-items:center; gap:10px; }
.logo { font-weight:800; font-size:17px; color:var(--accent); letter-spacing:-0.3px; }
.header-right { display:flex; align-items:center; gap:8px; }

.icon-btn {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--border); border-radius:6px;
    color:var(--text-dim); cursor:pointer; transition:all 0.15s;
}
.icon-btn:hover { background:rgba(0,0,0,0.04); color:var(--text); }
.logout-icon { color:#DC2626; border-color:rgba(220,38,38,0.15); }
.logout-icon:hover { background:rgba(220,38,38,0.06); }

.user-badge {
    display:flex; align-items:center; gap:7px;
    padding:3px 10px 3px 3px; background:var(--bg); border:1px solid var(--border); border-radius:18px;
}
.user-avatar {
    width:26px; height:26px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent) 0%,#0E7490 100%);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:12px; font-weight:700; line-height:26px; text-align:center; user-select:none;
}
.user-name { font-size:13px; font-weight:600; color:var(--text); }

/* ── Worksheet ── */
#worksheet {
    flex:1; overflow-y:auto; padding:16px 24px;
    display:flex; flex-direction:column; align-items:center;
}
#cells { width:100%; max-width:860px; }

/* ── Cell: triangle + vertical line + content ── */
.cell {
    display:flex; align-items:stretch;
    padding:0 4px; margin-bottom:2px; border-radius:6px;
    transition:background 0.15s;
}
.cell.focused { background:rgba(0,0,0,0.025); }

.cell-gutter {
    display:flex; flex-direction:column; align-items:center;
    width:18px; flex-shrink:0; user-select:none; padding-top:2px;
}
.cell-triangle {
    width:0; height:0; margin-top:6px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:7px solid var(--line);
    transition:border-left-color 0.15s;
}
.cell-triangle.active { border-left-color:var(--accent); }
.cell-triangle.has-output { border-left-color:var(--accent-80); }
.cell-triangle.running {
    border-left-color:var(--accent);
    animation:tri-pulse 0.8s ease-in-out infinite;
}

.cell-line {
    flex:1; width:2px; margin-top:4px; border-radius:1px;
    background:var(--line); transition:background 0.15s; min-height:8px;
}
.cell-line.active { background:var(--accent-40); }
.cell-line.has-output { background:var(--accent-40); }

.cell-content { flex:1; min-width:0; padding-left:8px; }

.cell-input {
    width:100%; background:transparent; border:none; padding:4px 4px;
    color:var(--text); font-size:14px; font-family:var(--font-mono);
    resize:none; overflow:hidden; outline:none; line-height:22px;
}
.cell-input::placeholder { color:var(--text-light); }

/* Output */
.cell-output-text {
    padding:1px 4px 3px 4px; color:var(--output-color); font-size:15px; overflow-x:auto;
}
.cell-output-pre {
    margin:0; padding:1px 4px 3px 4px; color:var(--output-color); font-size:13px;
    white-space:pre-wrap; font-family:var(--font-mono); line-height:1.25;
}
.cell-error {
    padding:4px 4px; margin:2px 0 4px 0;
    color:var(--error); font-size:13px; white-space:pre-wrap; font-family:var(--font-mono);
}
.cell-spinner {
    display:flex; align-items:center; gap:6px; padding:4px 4px;
}
.spinner {
    display:inline-block; width:12px; height:12px;
    border:2px solid var(--accent); border-top-color:transparent;
    border-radius:50%; animation:spin 0.6s linear infinite;
}
.spinner-text { color:var(--text-dim); font-size:12px; }

/* Plot */
.cell-plot { padding:4px 0 6px 0; }
.cell-plot canvas { border-radius:6px; max-width:100%; display:block; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes tri-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.12); border-radius:3px; }

/* KaTeX */
.katex-display { margin:0 !important; }
.katex { font-size:1.15em; }

@media (max-width:640px) {
    #worksheet { padding:10px 12px; }
    .auth-card { padding:28px 20px; }
}