:root {
  --bg: #0f1117; --bg2: #181b24; --bg3: #1e222e;
  --border: #2a2f3e; --text: #e2e4ea; --text2: #8b90a0;
  --accent: #4e9af5; --accent2: #3b7dd8;
  --green: #34d399; --orange: #f59e0b; --red: #ef4444;
  --radius: 6px;
  --mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Menlo, Consolas, 'Liberation Mono', monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
}
:root[data-theme="light"] {
  --bg: #f5f6f8; --bg2: #ffffff; --bg3: #ebedf2;
  --border: #d1d5de; --text: #1a1d27; --text2: #5f6577;
  --accent: #2563eb; --accent2: #1d4ed8;
  --green: #16a34a; --orange: #d97706; --red: #dc2626;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--sans); background:var(--bg); color:var(--text); min-height:100vh; line-height:1.5; }
.app { max-width:1440px; margin:0 auto; padding:24px; }

header { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; padding-bottom:20px; border-bottom:1px solid var(--border); flex-wrap:wrap; gap:12px; }
header h1 { font-family:var(--mono); font-size:20px; font-weight:700; letter-spacing:-0.5px; }
header h1 span { color:var(--accent); }
.header-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.save-indicator { font-family:var(--mono); font-size:11px; color:var(--text2); display:flex; align-items:center; gap:6px; }
.save-dot { width:6px; height:6px; border-radius:50%; background:var(--green); transition:background .3s; }
.save-dot.saving { background:var(--orange); }
.header-link { font-family:var(--mono); font-size:11px; color:var(--text2); text-decoration:none; display:flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--border); border-radius:var(--radius); transition:all .2s; }
.header-link:hover { color:var(--text); border-color:var(--text2); background:var(--bg3); }
.header-link.paypal-link:hover { color:#0070ba; border-color:#0070ba; }
.lang-toggle { font-family:var(--mono); font-size:11px; font-weight:600; display:flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.lang-toggle button { padding:5px 10px; border:none; background:var(--bg2); color:var(--text2); cursor:pointer; font:inherit; transition:all .15s; }
.lang-toggle button:not(:last-child) { border-right:1px solid var(--border); }
.lang-toggle button.active { background:var(--accent); color:#fff; }
.lang-toggle button:hover:not(.active) { color:var(--text); background:var(--bg3); }

.disclaimer-bar { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--green); background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.35); border-radius:var(--radius); padding:12px 18px; margin-bottom:20px; display:flex; align-items:center; gap:8px; }

/* ── Planning bar (tabs) ── */
.planning-bar { display:flex; gap:4px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.planning-tab { font-family:var(--mono); font-size:12px; padding:6px 14px; border:1px solid var(--border); border-radius:var(--radius) var(--radius) 0 0; background:var(--bg2); color:var(--text2); cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .15s; }
.planning-tab:hover { border-color:var(--text2); color:var(--text); }
.planning-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.planning-tab .tab-name { cursor:pointer; }
.planning-tab .tab-dup, .planning-tab .tab-del { width:18px; height:18px; border:none; background:none; color:inherit; cursor:pointer; border-radius:3px; font-size:13px; display:flex; align-items:center; justify-content:center; opacity:0.5; padding:0; font-family:var(--mono); }
.planning-tab .tab-dup:hover { opacity:1; background:rgba(255,255,255,.2); }
.planning-tab .tab-del:hover { opacity:1; background:rgba(239,68,68,.3); color:var(--red); }
.planning-tab.active .tab-del:hover { background:rgba(255,255,255,.2); color:#fff; }
.planning-add { font-family:var(--mono); font-size:12px; padding:6px 14px; border:2px dashed var(--border); border-radius:var(--radius); background:none; color:var(--text2); cursor:pointer; transition:all .15s; }
.planning-add:hover { border-color:var(--accent); color:var(--accent); }

.toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; align-items:center; }
.btn { font-family:var(--mono); font-size:12px; font-weight:500; padding:8px 16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg2); color:var(--text); cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.btn:hover { border-color:var(--accent); color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent2); }
.btn.danger { border-color:var(--red); color:var(--red); }
.btn.danger:hover { background:var(--red); color:#fff; }

.strategy-toggle { display:flex; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; align-items:stretch; }
.strategy-toggle .btn { border:none; border-radius:0; margin:0; font-size:11px; padding:8px 14px; color:var(--text2); }
.strategy-toggle .btn:not(:last-child) { border-right:1px solid var(--border); }
.strategy-toggle .btn:hover { color:var(--text); background:var(--bg3); border-color:transparent; }
.strategy-toggle .btn.active { background:var(--accent); color:#fff; }

.parallel-n { display:flex; align-items:center; border-right:1px solid var(--border); background:rgba(78,154,245,.12); }
.pn-btn { width:22px; height:100%; border:none; background:none; color:var(--accent); cursor:pointer; font-size:14px; font-family:var(--mono); font-weight:700; line-height:1; padding:0; transition:background .15s; }
.pn-btn:hover:not(:disabled) { background:rgba(78,154,245,.2); }
.pn-btn:disabled { opacity:0.3; cursor:default; }
.pn-val { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--accent); min-width:20px; text-align:center; padding:0 2px; }

.panels { display:grid; grid-template-columns:1fr; gap:24px; }
.panel { background:var(--bg2); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.panel-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); background:var(--bg3); flex-wrap:wrap; gap:8px; }
.panel-header h2 { font-family:var(--mono); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--text2); }
.panel-body { padding:18px; }

.capacity-grid { display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; }
.cap-card { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); flex:0 1 320px; position:relative; min-width:240px; }
.cap-badge { font-family:var(--mono); font-size:11px; font-weight:700; width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; cursor:pointer; }
.cap-name-input { flex:1; font-family:var(--sans); font-size:13px; font-weight:600; padding:4px 8px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--text); min-width:0; }
.cap-name-input:focus { outline:none; border-color:var(--accent); background:var(--bg); }
.cap-num-input { width:56px; font-family:var(--mono); font-size:13px; padding:4px 6px; border:1px solid var(--border); border-radius:4px; background:var(--bg2); color:var(--text); text-align:right; }
.cap-num-input:focus { outline:none; border-color:var(--accent); }
.cap-unit { font-family:var(--mono); font-size:11px; color:var(--text2); }
.cap-del { width:22px; height:22px; border:none; background:none; color:var(--text2); cursor:pointer; border-radius:4px; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cap-del:hover { background:var(--red); color:#fff; }
.cap-add { display:flex; align-items:center; justify-content:center; min-width:100px; flex:0 0 auto; padding:10px 20px; background:var(--bg); border:2px dashed var(--border); border-radius:var(--radius); cursor:pointer; font-family:var(--mono); font-size:12px; color:var(--text2); transition:all .15s; }
.cap-add:hover { border-color:var(--accent); color:var(--accent); }

/* ── Monthly capacity table (single merged block) ── */
.cap-monthly { overflow-x:auto; }
.cap-monthly table { border-collapse:collapse; font-family:var(--mono); font-size:11px; }
.cap-monthly th { padding:4px 6px; text-align:center; color:var(--text2); font-weight:600; min-width:56px; border-bottom:1px solid var(--border); white-space:nowrap; }
.cap-monthly th:first-child { text-align:left; position:sticky; left:0; background:var(--bg2); z-index:1; min-width:120px; }
.cap-monthly td { padding:2px; text-align:center; border-bottom:1px solid var(--border); }
.cap-monthly td:first-child { text-align:left; position:sticky; left:0; background:var(--bg2); z-index:1; padding:4px 8px; font-weight:600; }
.cap-monthly input { width:48px; font-family:var(--mono); font-size:11px; text-align:center; padding:3px 2px; border:1px solid transparent; border-radius:3px; background:transparent; color:var(--text); }
.cap-monthly input:hover { border-color:var(--border); }
.cap-monthly input:focus { outline:none; border-color:var(--accent); background:var(--bg); }
.cap-monthly input.override { color:var(--orange); font-weight:700; }
.cap-monthly-hint { font-family:var(--mono); font-size:10px; color:var(--text2); margin-top:6px; }

.settings-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.settings-row label { font-size:12px; color:var(--text2); display:flex; align-items:center; gap:6px; }
.settings-row select, .settings-row input[type="number"] { font-family:var(--mono); font-size:12px; padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); }
.settings-row select:focus, .settings-row input:focus { outline:none; border-color:var(--accent); }

.table-wrap { overflow-x:auto; overflow-y:auto; max-height:70vh; margin:0 -18px; padding:0 18px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { font-family:var(--mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text2); text-align:left; padding:10px 12px; border-bottom:2px solid var(--border); white-space:nowrap; position:sticky; top:0; background:var(--bg2); z-index:2; }
tbody td { padding:8px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:hover { background:var(--bg3); }
td input { font-family:var(--mono); font-size:13px; padding:4px 8px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--text); width:100%; }
td input:hover { border-color:var(--border); }
td input:focus { outline:none; border-color:var(--accent); background:var(--bg); }
td input[type="number"] { width:70px; text-align:right; }
.row-del { width:28px; height:28px; border:none; background:none; color:var(--text2); cursor:pointer; border-radius:4px; font-size:16px; display:flex; align-items:center; justify-content:center; }
.row-del:hover { background:var(--red); color:#fff; }

.dep-select { font-family:var(--mono); font-size:11px; padding:3px 6px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text2); max-width:180px; cursor:pointer; }
.dep-select:focus { outline:none; border-color:var(--accent); color:var(--text); }
.dep-select option { background:var(--bg2); }

/* ── Banded project rows ── */
tbody tr.band-even { background:var(--bg2); }
tbody tr.band-odd { background:var(--bg); }
tbody tr.band-even:hover, tbody tr.band-odd:hover { background:var(--bg3); }

/* ── Project summary row ── */
.project-sum-row td { border-bottom:2px solid var(--border); padding:4px 12px; }
.sum-label { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text2); text-align:right; white-space:nowrap; }
.sum-value { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--accent); text-align:right; }

/* ── Row action buttons ── */
.row-actions { display:flex; gap:2px; align-items:center; }
.row-insert { width:28px; height:28px; border:none; background:none; color:var(--text2); cursor:pointer; border-radius:4px; font-size:16px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; }
.row-insert:hover { background:var(--accent); color:#fff; }
.row-insert-project { font-family:var(--mono); font-size:10px; font-weight:600; padding:3px 8px; border:1px dashed var(--border); border-radius:4px; background:none; color:var(--text2); cursor:pointer; white-space:nowrap; transition:all .15s; }
.row-insert-project:hover { border-color:var(--accent); color:var(--accent); }

.ms-lock { width:28px; height:28px; border:none; background:none; cursor:pointer; border-radius:4px; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.ms-lock.locked { color:var(--orange); }
.ms-lock.unlocked { color:var(--green); }
.ms-lock:hover { background:var(--bg3); }
.ms-lock.first { color:var(--border); cursor:default; }

.prio-cell { display:flex; align-items:center; gap:2px; }
.prio-num { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text2); width:18px; text-align:center; }
.prio-btn { width:22px; height:18px; border:none; background:none; color:var(--text2); cursor:pointer; border-radius:3px; font-size:12px; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; }
.prio-btn:hover { background:var(--accent); color:#fff; }
.prio-btn:disabled { opacity:0.15; cursor:default; background:none; color:var(--text2); }

.gantt-container { overflow-x:auto; padding-bottom:12px; }
.gantt { min-width:800px; }
.gantt-header { display:flex; border-bottom:2px solid var(--border); margin-left:220px; }
.gantt-month { flex:0 0 80px; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--text2); text-align:center; padding:8px 0; border-left:1px solid var(--border); }
.gantt-row { display:flex; align-items:center; min-height:36px; border-bottom:1px solid var(--border); }
.gantt-label { flex:0 0 220px; font-size:12px; padding:4px 12px; display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gantt-label .proj-tag { font-family:var(--mono); font-size:10px; font-weight:700; padding:2px 6px; border-radius:3px; background:var(--bg3); color:var(--text2); border:1px solid var(--border); flex-shrink:0; }
.gantt-bars { flex:1; display:flex; min-height:28px; position:relative; }
.gantt-cell { flex:0 0 80px; border-left:1px solid var(--border); min-height:28px; }
.gantt-bar { position:absolute; top:4px; height:20px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; font-weight:600; color:#fff; z-index:2; box-shadow:0 1px 3px rgba(0,0,0,.3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 6px; }

.capacity-overview { margin-top:24px; min-width:800px; }
.cap-row { display:flex; align-items:center; margin-bottom:6px; }
.cap-row-label { flex:0 0 220px; font-family:var(--mono); font-size:11px; font-weight:600; padding:0 12px; display:flex; align-items:center; gap:6px; }
.cap-cells { display:flex; flex:1; }
/* no cursor:pointer — cells are informational only, edit via capacity panel above */
.cap-cell { flex:0 0 80px; border-left:1px solid var(--border); padding:2px 4px; height:24px; position:relative; }
.cap-cell.has-override::after { content:''; position:absolute; top:2px; right:2px; width:5px; height:5px; border-radius:50%; background:var(--orange); }
.cap-fill { height:100%; border-radius:2px; transition:width .3s; position:relative; }
.cap-pct { font-family:var(--mono); font-size:9px; font-weight:600; color:#fff; position:absolute; right:4px; top:50%; transform:translateY(-50%); text-shadow:0 1px 2px rgba(0,0,0,.5); }

.warning-list { list-style:none; padding:0; }
.warning-list li { font-size:12px; padding:6px 10px; margin-bottom:4px; border-radius:4px; display:flex; align-items:center; gap:8px; }
.warning-list li.over { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:var(--red); }
.warning-list li.ok { background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3); color:var(--green); }
.warning-list li.info { background:rgba(78,154,245,.1); border:1px solid rgba(78,154,245,.3); color:var(--accent); }

/* ── Bottleneck analysis ── */
.bottleneck-section { margin-top:16px; padding:10px 10px 6px !important; border:none !important; background:none !important; display:flex; flex-direction:column; gap:4px; }
.bottleneck-section strong { font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--accent); }
.bottleneck-hint { font-family:var(--mono); font-size:10px; color:var(--text2); }
.bottleneck-item { font-size:12px; padding:6px 10px; margin-bottom:4px; border-radius:4px; display:block; }
.bottleneck-item.improvement { background:rgba(78,154,245,.1); border:1px solid rgba(78,154,245,.3); color:var(--accent); }
.bottleneck-item.neutral { background:none; border:1px solid var(--border); color:var(--text2); }
.bottleneck-detail { font-family:var(--mono); font-size:10px; color:var(--text2); margin-top:3px; padding-left:22px; }

.empty-state { text-align:center; padding:48px 24px; color:var(--text2); font-size:14px; }
.empty-state code { font-family:var(--mono); background:var(--bg); padding:2px 6px; border-radius:3px; font-size:12px; }

input[type="file"] { display:none; }
.toast { position:fixed; bottom:24px; right:24px; background:var(--bg3); border:1px solid var(--border); padding:10px 18px; border-radius:var(--radius); font-family:var(--mono); font-size:12px; color:var(--green); opacity:0; transform:translateY(10px); transition:all .3s; z-index:100; pointer-events:none; display:flex; align-items:center; gap:12px; }
.toast.show { opacity:1; transform:translateY(0); }
.toast.show.has-action { pointer-events:auto; }
.toast-undo { background:var(--accent); color:#fff; border:none; padding:4px 10px; border-radius:var(--radius); font-family:var(--mono); font-size:11px; cursor:pointer; white-space:nowrap; transition:background .15s; }
.toast-undo:hover { filter:brightness(1.2); }

.app-footer { margin-top:32px; padding:16px 0; border-top:1px solid var(--border); text-align:center; font-family:var(--mono); font-size:11px; color:var(--text2); line-height:1.6; }
.footer-links { margin-top:8px; display:flex; justify-content:center; gap:16px; }
.footer-links a { color:var(--text2); text-decoration:none; font-family:var(--mono); font-size:11px; cursor:pointer; transition:color .15s; }
.footer-links a:hover { color:var(--accent); }

/* ── Theme toggle button ── */
.theme-toggle { font-family:var(--mono); font-size:11px; font-weight:600; display:flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.theme-toggle button { padding:5px 10px; border:none; background:var(--bg2); color:var(--text2); cursor:pointer; font:inherit; transition:all .15s; }
.theme-toggle button:not(:last-child) { border-right:1px solid var(--border); }
.theme-toggle button.active { background:var(--accent); color:#fff; }
.theme-toggle button:hover:not(.active) { color:var(--text); background:var(--bg3); }

.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:200; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg2); border:1px solid var(--border); border-radius:10px; max-width:680px; width:90vw; max-height:80vh; overflow-y:auto; padding:32px; position:relative; }
.modal h2 { font-family:var(--mono); font-size:16px; font-weight:700; margin-bottom:16px; color:var(--text); }
.modal h3 { font-family:var(--mono); font-size:13px; font-weight:600; margin:20px 0 8px; color:var(--accent); }
.modal p, .modal li { font-size:13px; line-height:1.7; color:var(--text2); margin-bottom:8px; }
.modal ul { padding-left:20px; }
.modal a { color:var(--accent); }
.modal-close { position:sticky; top:0; float:right; width:32px; height:32px; border:none; background:var(--bg3); color:var(--text2); border-radius:6px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:1; }
.modal-close:hover { background:var(--red); color:#fff; }
.placeholder { background:var(--bg); border:1px dashed var(--orange); border-radius:4px; padding:8px 12px; font-family:var(--mono); font-size:12px; color:var(--orange); margin:8px 0; }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text2); }

/* ── Light mode overrides for elements with hardcoded colors ── */
:root[data-theme="light"] .gantt-bar { box-shadow:0 1px 3px rgba(0,0,0,.15); }
:root[data-theme="light"] .disclaimer-bar { background:rgba(22,163,74,.1); border-color:rgba(22,163,74,.4); }
:root[data-theme="light"] .modal-overlay { background:rgba(0,0,0,.35); }
:root[data-theme="light"] .toast { background:var(--bg2); border-color:var(--border); }
:root[data-theme="light"] .parallel-n { background:rgba(37,99,235,.08); }
:root[data-theme="light"] .dep-select option { background:var(--bg2); }

@media (max-width:768px) { .app { padding:12px; } header { flex-direction:column; align-items:flex-start; } .toolbar { gap:4px; } .btn { padding:6px 10px; font-size:11px; } }