/* STORM ECONOMICS — Dark Theme | Century Gothic */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #1c2333;
    --bg-elevated: #21283b; --bg-cell: #141a24; --bg-cell-selected: #1a2744;
    --bg-cell-hover: #161e30; --bg-header: #131921; --bg-header-hover: #1a2233;
    --accent: #58a6ff; --accent-hover: #79b8ff; --accent-dim: #1f3a5f;
    --accent-glow: rgba(88,166,255,0.15);
    --success: #3fb950; --warning: #d29922; --danger: #f85149;
    --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #484f58;
    --border: #30363d; --border-active: #58a6ff; --border-subtle: #21262d;
    --grid-line: #1e252f; --grid-header-bg: #131921; --grid-header-text: #8b949e;
    --grid-selection: rgba(88,166,255,0.12); --grid-selection-border: #58a6ff;
    --ref-color-1: #58a6ff; --ref-color-2: #f97583; --ref-color-3: #85e89d;
    --ref-color-4: #ffab70; --ref-color-5: #b392f0; --ref-color-6: #79b8ff;
    --ref-color-7: #ffdf5d; --ref-color-8: #f692ce;
    --lock-bg: rgba(248,81,73,0.08); --lock-border: rgba(248,81,73,0.25);
    --header-height: 48px; --toolbar-height: 44px; --formula-bar-height: 34px;
    --sheet-tabs-height: 36px; --cell-default-width: 100px; --cell-default-height: 28px;
    --row-header-width: 46px;
    --font-family: 'Century Gothic','CenturyGothic','AppleGothic','Inter',sans-serif;
    --font-mono: 'Consolas','Monaco',monospace;
    --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.5); --shadow-glow: 0 0 20px rgba(88,166,255,0.15);
    --transition-fast: 0.12s ease; --transition-normal: 0.2s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:var(--font-family);font-size:13px;color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
::-webkit-scrollbar-corner{background:var(--bg-secondary)}

#app{display:flex;flex-direction:column;height:100vh}

/* Login */
#login-screen{display:flex;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,var(--bg-primary) 0%,#0b1929 50%,#0d1117 100%)}
.login-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl);padding:48px 40px;width:400px;box-shadow:var(--shadow-lg),var(--shadow-glow);animation:loginSlideUp .5s ease}
@keyframes loginSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.login-card h1{font-size:20px;font-weight:600;text-align:center;margin-bottom:6px;letter-spacing:1.5px}
.login-card .subtitle{text-align:center;color:var(--text-secondary);font-size:12px;margin-bottom:32px;letter-spacing:.5px}
.login-card .logo-icon{text-align:center;font-size:42px;margin-bottom:16px;filter:drop-shadow(0 0 20px rgba(88,166,255,0.3))}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:11px;font-weight:500;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.8px}
.form-group input{width:100%;padding:10px 14px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-family);font-size:13px;outline:none;transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}
.form-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.form-group input::placeholder{color:var(--text-muted)}
.login-error{color:var(--danger);font-size:12px;text-align:center;margin-bottom:12px;min-height:18px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;font-family:var(--font-family);font-size:12px;font-weight:500;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);outline:none;white-space:nowrap;user-select:none}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 0 20px rgba(88,166,255,0.25)}
.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border)}
.btn-secondary:hover{background:var(--bg-elevated);border-color:var(--text-muted)}
.btn-danger{background:rgba(248,81,73,0.1);color:var(--danger);border-color:rgba(248,81,73,0.3)}
.btn-danger:hover{background:rgba(248,81,73,0.2)}
.btn-sm{padding:4px 10px;font-size:11px}
.btn-icon{padding:6px;min-width:30px;height:30px;background:transparent;border:none;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center}
.btn-icon:hover{background:var(--bg-elevated);color:var(--text-primary)}
.btn-icon.active{background:var(--accent-dim);color:var(--accent)}
.btn-full{width:100%;padding:11px 16px;font-size:13px}

/* Header */
.app-header{display:flex;align-items:center;height:var(--header-height);padding:0 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border);gap:16px;flex-shrink:0;z-index:100}
.app-header .logo{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:1px;white-space:nowrap}
.app-header .logo-spark{font-size:20px;filter:drop-shadow(0 0 8px rgba(88,166,255,0.4))}
.workbook-name{padding:4px 10px;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:13px;cursor:text;transition:all var(--transition-fast)}
.workbook-name:hover{border-color:var(--border);background:var(--bg-tertiary)}
.workbook-name:focus{border-color:var(--accent);background:var(--bg-tertiary);outline:none}
.header-spacer{flex:1}
.header-actions{display:flex;align-items:center;gap:8px}
.user-badge{display:flex;align-items:center;gap:8px;padding:4px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:20px;font-size:12px;color:var(--text-secondary)}
.user-badge .user-role{font-size:10px;padding:2px 6px;border-radius:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.user-role.admin{background:rgba(88,166,255,0.15);color:var(--accent)}
.user-role.editor{background:rgba(63,185,80,0.15);color:var(--success)}
.user-role.viewer{background:rgba(139,148,158,0.15);color:var(--text-secondary)}

/* Toolbar */
.toolbar{display:flex;align-items:center;height:var(--toolbar-height);padding:0 8px;background:var(--bg-secondary);border-bottom:1px solid var(--border);gap:2px;flex-shrink:0;overflow-x:auto;overflow-y:hidden}
.toolbar-divider{width:1px;height:24px;background:var(--border);margin:0 4px;flex-shrink:0}
.toolbar select{padding:4px 8px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:12px;outline:none;cursor:pointer;min-width:60px}
.toolbar select:hover{border-color:var(--text-muted)}
.toolbar select:focus{border-color:var(--accent)}
.color-picker-wrap{position:relative;display:inline-flex;align-items:center}
.color-picker-wrap input[type="color"]{width:0;height:0;padding:0;border:none;visibility:hidden;position:absolute}
.color-indicator{width:16px;height:3px;margin-top:2px;border-radius:1px}

/* Formula Bar */
.formula-bar{display:flex;align-items:center;height:var(--formula-bar-height);background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}
.cell-reference{width:80px;min-width:80px;padding:0 10px;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:var(--text-secondary);border-right:1px solid var(--border);background:var(--bg-tertiary);font-family:var(--font-mono);user-select:none}
.formula-icon{padding:0 10px;color:var(--text-muted);font-style:italic;font-weight:600;font-size:14px;user-select:none}
.formula-input{flex:1;height:100%;padding:0 10px;background:transparent;border:none;color:var(--text-primary);font-family:var(--font-family);font-size:13px;outline:none}
.formula-input:focus{background:var(--bg-tertiary)}

/* Grid */
.grid-wrapper{flex:1;overflow:hidden;position:relative;display:flex;flex-direction:column}
.grid-container{flex:1;overflow:auto;position:relative}
.grid-table{border-collapse:collapse;table-layout:fixed;min-width:max-content}
.grid-table th.corner{position:sticky;top:0;left:0;z-index:12;width:var(--row-header-width);min-width:var(--row-header-width);height:var(--cell-default-height);background:var(--grid-header-bg);border-right:1px solid var(--grid-line);border-bottom:2px solid var(--border)}
.grid-table th.col-header{position:sticky;top:0;z-index:10;height:var(--cell-default-height);background:var(--grid-header-bg);color:var(--grid-header-text);font-size:11px;font-weight:500;text-align:center;border-right:1px solid var(--grid-line);border-bottom:2px solid var(--border);user-select:none;cursor:pointer;padding:0 4px;letter-spacing:.3px;transition:background var(--transition-fast);position:relative}
.grid-table th.col-header:hover{background:var(--bg-header-hover);color:var(--text-primary)}
.grid-table th.col-header.selected{background:var(--accent-dim);color:var(--accent)}
.col-resize-handle{position:absolute;right:-2px;top:0;width:5px;height:100%;cursor:col-resize;z-index:11}
.col-resize-handle:hover,.col-resize-handle.resizing{background:var(--accent)}
.grid-table td.row-header{position:sticky;left:0;z-index:8;width:var(--row-header-width);min-width:var(--row-header-width);background:var(--grid-header-bg);color:var(--grid-header-text);font-size:11px;font-weight:500;text-align:center;border-right:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line);user-select:none;cursor:pointer;transition:background var(--transition-fast);position:relative}
.grid-table td.row-header:hover{background:var(--bg-header-hover);color:var(--text-primary)}
.grid-table td.row-header.selected{background:var(--accent-dim);color:var(--accent)}
.row-resize-handle{position:absolute;bottom:-2px;left:0;width:100%;height:5px;cursor:row-resize;z-index:9}
.row-resize-handle:hover,.row-resize-handle.resizing{background:var(--accent)}

/* Data cells */
.grid-table td.cell{padding:0;border-right:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line);background:var(--bg-cell);cursor:cell;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;transition:background var(--transition-fast);position:relative}
.grid-table td.cell .cell-content{padding:4px 6px;width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:20px}
.grid-table td.cell:hover{background:var(--bg-cell-hover)}
.grid-table td.cell.selected{background:var(--bg-cell-selected);outline:2px solid var(--grid-selection-border);outline-offset:-1px;z-index:5}
.grid-table td.cell.in-range{background:var(--grid-selection)}
.grid-table td.cell.editing{padding:0;overflow:visible;z-index:15}
.grid-table td.cell.editing .cell-editor{position:absolute;top:-1px;left:-1px;min-width:calc(100% + 2px);min-height:calc(100% + 2px);padding:4px 6px;background:var(--bg-cell);border:2px solid var(--accent);color:var(--text-primary);font-family:var(--font-family);font-size:13px;outline:none;z-index:20;box-shadow:var(--shadow-md),0 0 15px rgba(88,166,255,0.2);resize:none;overflow:hidden;white-space:pre}
.grid-table td.cell.locked{background:var(--lock-bg)}
.grid-table td.cell.locked::after{content:'🔒';position:absolute;top:1px;right:2px;font-size:8px;opacity:.5}

.grid-table td.cell.ref-highlight-1{box-shadow:inset 0 0 0 2px var(--ref-color-1)}
.grid-table td.cell.ref-highlight-2{box-shadow:inset 0 0 0 2px var(--ref-color-2)}
.grid-table td.cell.ref-highlight-3{box-shadow:inset 0 0 0 2px var(--ref-color-3)}
.grid-table td.cell.ref-highlight-4{box-shadow:inset 0 0 0 2px var(--ref-color-4)}
.grid-table td.cell.ref-highlight-5{box-shadow:inset 0 0 0 2px var(--ref-color-5)}
.grid-table td.cell.ref-highlight-6{box-shadow:inset 0 0 0 2px var(--ref-color-6)}
.grid-table td.cell.ref-highlight-7{box-shadow:inset 0 0 0 2px var(--ref-color-7)}
.grid-table td.cell.ref-highlight-8{box-shadow:inset 0 0 0 2px var(--ref-color-8)}

/* Sheet Tabs */
.sheet-tabs-bar{display:flex;align-items:center;height:var(--sheet-tabs-height);background:var(--bg-secondary);border-top:1px solid var(--border);padding:0 8px;gap:2px;flex-shrink:0;overflow-x:auto;overflow-y:hidden}
.sheet-tab-add{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:16px;margin-right:6px;transition:all var(--transition-fast);flex-shrink:0}
.sheet-tab-add:hover{background:var(--bg-elevated);color:var(--accent);border-color:var(--accent)}
.sheet-tab{display:flex;align-items:center;gap:6px;padding:5px 14px;height:28px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px 6px 0 0;color:var(--text-secondary);font-size:11px;font-weight:500;cursor:pointer;user-select:none;white-space:nowrap;transition:all var(--transition-fast);position:relative;flex-shrink:0}
.sheet-tab:hover{background:var(--bg-elevated);color:var(--text-primary)}
.sheet-tab.active{background:var(--bg-cell);color:var(--text-primary);border-bottom-color:var(--bg-cell);font-weight:600}
.sheet-tab .tab-color-strip{position:absolute;bottom:0;left:4px;right:4px;height:3px;border-radius:2px 2px 0 0}
.sheet-tab-name{outline:none;min-width:20px}
.sheet-tab-name[contenteditable="true"]{background:var(--bg-cell);padding:0 4px;border-radius:2px}

/* Context Menu */
.context-menu{position:fixed;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:4px 0;min-width:200px;box-shadow:var(--shadow-lg);z-index:1000;animation:ctxFadeIn .12s ease}
@keyframes ctxFadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.ctx-item{display:flex;align-items:center;gap:10px;padding:7px 14px;font-size:12px;color:var(--text-primary);cursor:pointer;transition:background var(--transition-fast)}
.ctx-item:hover{background:var(--bg-elevated)}
.ctx-item .ctx-shortcut{margin-left:auto;color:var(--text-muted);font-size:11px}
.ctx-item.danger{color:var(--danger)}
.ctx-divider{height:1px;background:var(--border);margin:4px 0}

/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:900;animation:modalFadeIn .2s ease}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);width:520px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg),var(--shadow-glow);animation:modalSlideIn .25s ease}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-header h2{font-size:15px;font-weight:600}
.modal-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-secondary);font-size:18px;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}
.modal-close:hover{background:rgba(248,81,73,0.15);color:var(--danger)}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border)}
.modal-table{width:100%;border-collapse:collapse}
.modal-table th{text-align:left;padding:8px 10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);border-bottom:1px solid var(--border)}
.modal-table td{padding:8px 10px;font-size:12px;color:var(--text-primary);border-bottom:1px solid var(--border-subtle)}
.modal-table tr:hover td{background:var(--bg-tertiary)}
.modal-table .actions{display:flex;gap:4px}

/* Tooltips */
[data-tooltip]{position:relative}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);padding:4px 8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--transition-fast);z-index:500}
[data-tooltip]:hover::after{opacity:1}

/* Status Bar */
.status-bar{display:flex;align-items:center;height:24px;padding:0 12px;background:var(--bg-secondary);border-top:1px solid var(--border);font-size:11px;color:var(--text-muted);gap:16px;flex-shrink:0}
.status-bar .status-item{display:flex;align-items:center;gap:4px}
.status-bar .status-value{color:var(--text-secondary)}

/* Toasts */
.toast-container{position:fixed;bottom:60px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:2000}
.toast{padding:10px 16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:12px;box-shadow:var(--shadow-md);animation:toastIn .3s ease;max-width:320px}
.toast.error{border-color:rgba(248,81,73,0.4);background:rgba(248,81,73,0.1)}
.toast.success{border-color:rgba(63,185,80,0.4);background:rgba(63,185,80,0.1)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* Color Palette */
.color-palette{position:fixed;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px;box-shadow:var(--shadow-lg);z-index:800;display:grid;grid-template-columns:repeat(8,24px);gap:3px}
.color-swatch{width:24px;height:24px;border-radius:3px;cursor:pointer;border:2px solid transparent;transition:all var(--transition-fast)}
.color-swatch:hover{transform:scale(1.15);border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,0.2)}

.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}