:root {
  --bg: #0f1117; --surface: #161b26; --surface2: #1c2333; --surface3: #222a3a;
  --border: #2a3040; --border2: #3a4458;
  --text: #e2e8f0; --text2: #94a3b8; --text3: #64748b;
  --accent: #f59e0b; --accent-dk: #d97706; --accent-bg: rgba(245,158,11,.12);
  --green: #10b981; --red: #ef4444; --blue: #3b82f6;
  --r: 10px; --r-sm: 6px; --t: .14s ease; --shadow: 0 4px 20px rgba(0,0,0,.4);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
input, select, textarea, button { font-family: inherit; }

/* Light mode overrides */
html.light {
  --bg: #f0f2f5; --surface: #ffffff; --surface2: #f7f8fa; --surface3: #edf0f4;
  --border: #dde1e7; --border2: #c8cdd6;
  --text: #1a2033; --text2: #4a5568; --text3: #718096;
  --accent-bg: rgba(245,158,11,.10);
  --shadow: 0 4px 20px rgba(0,0,0,.12);
}
html.light .gantt-title-input { color: var(--text); }
html.light input.fi, html.light select.fi, html.light textarea.fi { -webkit-text-fill-color: var(--text) !important; }
html.light .btn { color: var(--text); }
html.light .btn-ghost { color: var(--text2); }
html.light .btn-ghost:hover { color: var(--text); background: var(--surface2); }
html.light .btn-surface { color: var(--text); background: var(--surface2); border-color: var(--border); }
html.light .btn-accent { color: #000; }
html.light .tab-btn { color: var(--text2); }
html.light .tab-btn.active { color: var(--accent); }
html.light .sb-item { color: var(--text2); }
html.light .sb-item.active { color: var(--accent); }
html.light .scale-btn { color: var(--text2); }
html.light .scale-btn.active { color: var(--accent); }
html.light .dtable th { color: var(--text2); background: var(--surface2); }
html.light .dtable td { color: var(--text); }
html.light .card { background: var(--surface); border-color: var(--border); }
html.light .alert { color: var(--text); }
html.light select, html.light input[type="text"], html.light input[type="number"], html.light input[type="date"], html.light input[type="password"], html.light input[type="email"] { color: var(--text); background: var(--surface); }
html.light .dp-title { color: var(--text2); }
html.light .proj-card { color: var(--text); }
html.light .proj-card .proj-name { color: var(--text); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* Layout */
.app { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar { height: 52px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 10px; flex-shrink: 0; }
.content { flex: 1; overflow-y: auto; padding: 20px; }

/* Sidebar */
.sb-logo { display: flex; align-items: center; gap: 9px; padding: 16px 14px; border-bottom: 1px solid var(--border); }
.sb-logo-icon { width: 32px; height: 32px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-logo-text { font-size: 16px; font-weight: 800; color: var(--text); }
.sb-logo-text span { color: var(--accent); }
.sb-section { padding: 8px 0; }
.sb-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; padding: 6px 14px 3px; }
.sb-item { display: flex; align-items: center; gap: 9px; padding: 8px 14px; cursor: pointer; border: none; background: none; color: var(--text2); font-size: 13px; font-weight: 500; width: 100%; text-align: left; border-radius: 6px; margin: 1px 6px; width: calc(100% - 12px); transition: all var(--t); }
.sb-item:hover { background: var(--surface3); color: var(--text); }
.sb-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.sb-item svg { opacity: .7; flex-shrink: 0; }
.sb-item.active svg { opacity: 1; }
.sb-bottom { border-top: 1px solid var(--border); padding: 10px 6px; margin-top: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all var(--t); }
.btn-accent { background: var(--accent); color: #000; } .btn-accent:hover { background: var(--accent-dk); }
.btn-surface { background: var(--surface3); color: var(--text); border: 1px solid var(--border); } .btn-surface:hover { background: var(--surface2); border-color: var(--border2); }
.btn-ghost { background: transparent; color: var(--text2); } .btn-ghost:hover { background: var(--surface3); color: var(--text); }
.btn-danger { background: rgba(239,68,68,.15); color: var(--red); border: 1px solid rgba(239,68,68,.3); } .btn-danger:hover { background: rgba(239,68,68,.25); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 11px 24px; font-size: 14px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* Pages */
.page { display: none; }
.page.active { display: block; }

/* Forms */
.fg { margin-bottom: 14px; }
.fg label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 5px; }
.fi { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 12px; color: var(--text); font-size: 13px; outline: none; transition: border-color var(--t); }
.fi:focus { border-color: var(--accent); }
.fi-sel { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
.fi option { background: var(--surface2); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
.card-sm { padding: 14px; }

/* Alert */
.alert { padding: 10px 14px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 12px; }
.alert-err { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.alert-ok { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.alert-warn { background: rgba(245,158,11,.12); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.alert-info { background: rgba(59,130,246,.12); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }

/* Modal */
.rfq-tab{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:3px 7px;font-size:11px;cursor:pointer;color:var(--text2)}
.rfq-tab.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; align-items: center; justify-content: center; }
.modal-bg.open { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; width: 90%; max-width: 420px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: var(--shadow); }
.modal-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--text3); font-size: 20px; cursor: pointer; line-height: 1; }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.modal-desc { font-size: 13px; color: var(--text2); margin-bottom: 18px; }

/* Spinner */
.spin { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(245,158,11,.3); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.crane-wrap { width:70px;height:70px;position:relative;margin:0 auto; }
.crane-wrap svg { display:block;width:100%;height:100%; }
@keyframes craneSwing { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} }
@keyframes loadBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
.crane-arm { transform-origin:18px 14px;animation:craneSwing 4s ease-in-out infinite; }
.crane-load { animation:loadBob 2s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Step wizard */
.steps { display: flex; align-items: center; gap: 0; margin-bottom: 22px; }
.step { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; }
.step-n { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.step.done .step-n { background: var(--green); color: #fff; }
.step.active .step-n { background: var(--accent); color: #000; box-shadow: 0 0 0 4px rgba(245,158,11,.2); }
.step.pending .step-n { background: var(--surface3); color: var(--text3); }
.step.done .step-lbl,.step.active .step-lbl { color: var(--text); font-weight: 600; }
.step.pending .step-lbl { color: var(--text3); }
.step-line { flex: 1; height: 2px; background: var(--border); margin: 0 8px; min-width: 16px; }
.step-line.done { background: var(--green); }

/* Mode tabs */
.mode-tabs { display: flex; background: var(--surface2); border-radius: var(--r-sm); padding: 3px; margin-bottom: 20px; }
.mode-tab { flex: 1; padding: 8px; text-align: center; border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text2); transition: all var(--t); border: none; background: none; }
.mode-tab.active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* Building type grid */
.btype-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.btype-btn { background: var(--surface2); border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 12px 10px; text-align: center; cursor: pointer; transition: all var(--t); }
.btype-btn:hover { border-color: var(--border2); }
.btype-btn.active { border-color: var(--accent); background: var(--accent-bg); }
.btype-icon { font-size: 24px; margin-bottom: 4px; }
.btype-name { font-size: 12px; font-weight: 600; color: var(--text); }

/* Upload zone */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--r); padding: 32px 20px; text-align: center; cursor: pointer; transition: all var(--t); }
.upload-zone:hover, .upload-zone.drag { border-color: var(--accent); background: var(--accent-bg); }
.upload-zone input { display: none; }

/* Items table */
.items-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.items-table th { text-align: left; padding: 7px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); border-bottom: 1px solid var(--border); }
.items-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text2); }
.items-table tr.section td { color: var(--accent); font-weight: 600; }

/* ── GANTT LAYOUT ─────────────────────────────────────────────────────────── */
.gantt-wrap { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.tb-dd { display: none; position: fixed; min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow); z-index: 9000; padding: 6px; }
.tb-dd .btn { display: flex; width: 100%; justify-content: flex-start; text-align: left; margin: 2px 0; }
.gantt-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; flex-shrink: 0; }
.gantt-toolbar .btn { min-height: 36px; }
.gantt-title-input { background: transparent; border: none; color: var(--text); font-size: 15px; font-weight: 700; outline: none; border-bottom: 1px solid transparent; transition: border-color var(--t); padding: 2px 4px; flex: 1; min-width: 120px; }
.gantt-title-input:focus { border-bottom-color: var(--accent); }
.scale-btns { display: flex; background: var(--surface2); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.scale-btn { padding: 5px 10px; border-radius: 4px; border: none; background: none; color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--t); }
.scale-btn.active { background: var(--surface3); color: var(--accent); }

.gantt-body { flex: 1; display: flex; overflow: hidden; }

/* Left fixed panel */
.gantt-left { flex-shrink: 0; overflow: hidden; position: relative; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.gantt-left-inner { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; flex: 1; min-height: 0; }
.gantt-left-inner::-webkit-scrollbar { display: none; }

/* Right scrollable panel */
.gantt-right { flex: 1; overflow: auto; position: relative; }

/* Tab bar */
.tab-bar { display: flex; border-bottom: 1px solid var(--border); padding: 0 14px; background: var(--surface); flex-shrink: 0; }
.tab-btn { padding: 10px 14px; border: none; background: none; color: var(--text2); font-size: 13px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--t); white-space: nowrap; }
.tab-bar { overflow-x: auto; }
/* Dalinimosi peržiūra (/view/TOKEN): gavėjui rodomas tik grafikas — be meniu, redagavimo
   valdiklių, klaidų widget'o ir slapukų juostos (analitika be sutikimo nekraunama). */
body.share-view #sidebar, body.share-view #hamburger-btn, body.share-view #undo-btn, body.share-view #redo-btn,
body.share-view #add-row-btn, body.share-view .row-drag-handle, body.share-view #fb-btn, body.share-view #gdpr-banner { display: none !important; }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-btn:hover:not(.active) { color: var(--text); }
.tab-content { display: none; padding: 16px; overflow-y: auto; flex: 1; }
.tab-content.active { display: block; }

/* Detail panel */
.detail-panel { width: 280px; flex-shrink: 0; background: var(--surface); border-left: 1px solid var(--border); overflow-y: auto; padding: 14px; }
.detail-panel.hidden { display: none; }
.dp-title { font-size: 13px; font-weight: 700; color: var(--text2); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .05em; }

/* Data tables */
.dtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.dtable th { padding: 8px 10px; background: var(--surface2); color: var(--text3); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-align: left; border: 1px solid var(--border); }
.dtable td { padding: 7px 10px; border: 1px solid var(--border); color: var(--text); }
.dtable tr:nth-child(even) td { background: var(--surface2); }

/* Histogram */
.histogram-wrap { border-top: 1px solid var(--border); flex-shrink: 0; height: 72px; overflow: hidden; }

/* Pricing */
.price-card { border: 1.5px solid var(--border); border-radius: var(--r); padding: 22px; }
.price-card.featured { border-color: var(--accent); }
.price-amt { font-size: 32px; font-weight: 800; margin: 8px 0 4px; }
.price-feat { list-style: none; margin: 14px 0; display: flex; flex-direction: column; gap: 7px; }
.price-feat li { font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 7px; }
.price-feat li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr !important; } }

/* Stepper input */
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper input { width: 44px; text-align: center; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; }
.stepper button { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface3); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Ensure all inputs show text in dark theme */
input.fi, select.fi, textarea.fi { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; }

/* Projects grid */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.proj-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r); padding: 16px; cursor: pointer; transition: all var(--t); }
.proj-card:hover { border-color: var(--accent); transform: translateY(-1px); }

/* Sidebar collapsed */
.sidebar { transition: width .18s ease; }
.sidebar.collapsed { width: 54px; }
.sidebar.collapsed .sb-text,
.sidebar.collapsed .sb-label,
.sidebar.collapsed .sb-logo-text { display: none; }
.sidebar.collapsed .sb-item { justify-content: center; padding: 8px 0; margin: 1px 4px; width: calc(100% - 8px); }
.sidebar.collapsed .sb-logo { justify-content: center; padding: 12px 0; }
.sidebar.collapsed .sb-bottom button { font-size: 0; padding: 8px; }
.sb-toggle { background: none; border: 1px solid var(--border); color: var(--text3); cursor: pointer; border-radius: 4px; padding: 3px 7px; font-size: 14px; line-height: 1.4; margin-left: auto; transition: all var(--t); flex-shrink: 0; }
.sb-toggle:hover { background: var(--surface3); color: var(--text); }
.sidebar.collapsed .sb-toggle { margin-left: 0; }
.hamburger-btn { display: none; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; font-size: 18px; padding: 4px 10px; line-height: 1.3; align-items: center; justify-content: center; flex-shrink: 0; }

/* Responsive */
.gantt-scroll-hint { display: none; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(15,23,42,.82); color: #fff; font-size: 11px; padding: 4px 12px; border-radius: 14px; pointer-events: none; z-index: 60; white-space: nowrap; transition: opacity .3s; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
@media(max-width:768px) {
  .sidebar { display: none; } .sidebar.mobile-open { display: flex; position: fixed; inset: 0; z-index: 200; width: 220px; }
  .gantt-scroll-hint { display: block; }
  .hamburger-btn { display: inline-flex; }
  .detail-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 70vh; overflow-y: auto; z-index: 300; border-left: none; border-top: 1px solid var(--border); border-radius: 12px 12px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.4); }
  .detail-panel.hidden { display: none; }
}
@media print {
  /* Hide non-content elements */
  .sidebar, .topbar, .gantt-toolbar, .tab-bar, .detail-panel, .histogram-wrap,
  .sb-toggle, nav, #autosave-banner, #autosave-restore, .modal-bg, .tut-overlay,
  #share-pro-banner, .gantt-hero, .crane-wrap, .tutorial-overlay, .cookie-banner,
  #theme-btn, .onboard-cards, .mode-tabs, .wiz-steps, #wstep1, #wstep2,
  .home-header, #home-recent, .gantt-hero-wrap,
  #p-home, #p-new, #p-projects, #p-account, #p-pricing, #p-help,
  button { display: none !important; }
  /* Body */
  html, body { background: white !important; color: black !important; font-size: 10pt !important; margin: 0 !important; padding: 0 !important; }
  /* Layout reset */
  .app { display: block !important; }
  .main, .main-content, .content { overflow: visible !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  /* Show gantt page */
  .page { display: none !important; }
  .page#p-gantt, .page.active { display: block !important; overflow: visible !important; height: auto !important; padding: 0 !important; }
  /* Gantt containers: remove all overflow clipping */
  .gantt-wrap, .gantt-container { overflow: visible !important; height: auto !important; max-height: none !important; max-width: none !important; width: auto !important; }
  .gantt-body { overflow: visible !important; height: auto !important; display: block !important; }
  .gantt-left, .gantt-left-inner { overflow: visible !important; width: auto !important; height: auto !important; white-space: nowrap !important; }
  .gantt-right { overflow: visible !important; width: auto !important; max-width: none !important; flex: none !important; }
  #gantt-right-svg { width: auto !important; height: auto !important; max-width: none !important; overflow: visible !important; }
  /* Gantt rows */
  .gantt-row { break-inside: avoid; }
  /* Tabs: show only active */
  .tab-content { display: none !important; }
  .tab-content.active { display: block !important; overflow: visible !important; max-height: none !important; max-width: none !important; width: 100% !important; }
  /* Scroll containers */
  [style*="overflow-x: auto"], [style*="overflow-x:auto"] { overflow: visible !important; }
  /* Colors */
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
  .gantt-bar, .bar, [class*="bar"], .histogram, .histogram-bar, .worker-bar { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* Page setup */
  @page { size: A4 landscape; margin: 10mm; }
  /* Scale to fit A4 landscape */
  .page.active { transform: scale(0.65); transform-origin: top left; width: 154% !important; }
  .gantt-container { font-size: 8pt !important; }
  .gantt-row { height: 22px !important; min-height: 22px !important; }
  .gantt-left .row-name { font-size: 8pt !important; }
  /* Page setup */
  @page { size: A4 landscape; margin: 8mm; }
  /* Print header */
  .page.active::before { content: "GrafikasAI \00B7  grafikasai.lt"; display: block; text-align: right; font-size: 8pt; color: #999; margin-bottom: 10px; border-bottom: 0.5pt solid #ddd; padding-bottom: 5px; }
}

/* Gantt hero animation */
.gantt-hero { width:100%;max-width:440px;margin:0 auto 20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;padding:0; }
.gantt-hero svg { display:block;width:100%; }
@keyframes barSlide { 0%{transform:scaleX(0);opacity:0} 60%{transform:scaleX(1);opacity:1} 100%{transform:scaleX(1);opacity:1} }
@keyframes barPulse { 0%,100%{transform:scaleY(1);opacity:.88} 50%{transform:scaleY(1.04);opacity:1} }
@keyframes dashFlow { to{stroke-dashoffset:-12} }
@keyframes progGrow1 { 0%{width:0} 100%{width:100%} }
@keyframes progGrow2 { 0%{width:0} 100%{width:75%} }
@keyframes progGrow3 { 0%{width:0} 100%{width:40%} }
@keyframes progGrow4 { 0%{width:0} 100%{width:10%} }
@keyframes cursorSweep { 0%{transform:translateX(0)} 100%{transform:translateX(310px)} }
@keyframes sparkle { 0%,100%{opacity:0;transform:scale(0)} 50%{opacity:1;transform:scale(1)} }
.gh-bar { transform-origin:left center;animation:barSlide .7s ease-out forwards; opacity:0; }
.gh-bar-wrap { animation:barPulse 2.5s ease-in-out infinite; transform-origin:center center; }
.gh-bar-wrap:nth-child(1) .gh-bar{animation-delay:0s} .gh-bar-wrap:nth-child(2) .gh-bar{animation-delay:.15s} .gh-bar-wrap:nth-child(3) .gh-bar{animation-delay:.3s} .gh-bar-wrap:nth-child(4) .gh-bar{animation-delay:.45s} .gh-bar-wrap:nth-child(5) .gh-bar{animation-delay:.6s}
.gh-bar-wrap:nth-child(1){animation-delay:0s} .gh-bar-wrap:nth-child(2){animation-delay:.3s} .gh-bar-wrap:nth-child(3){animation-delay:.6s} .gh-bar-wrap:nth-child(4){animation-delay:.9s} .gh-bar-wrap:nth-child(5){animation-delay:1.2s}
.gh-dep { stroke-dasharray:4 4;animation:dashFlow .8s linear infinite; }
.gh-prog { opacity:.3;animation-fill-mode:forwards;animation-timing-function:ease-out;animation-duration:1.5s; }
.gh-prog-1{animation:progGrow1 1.5s ease-out .8s forwards;width:0} .gh-prog-2{animation:progGrow2 1.5s ease-out .95s forwards;width:0} .gh-prog-3{animation:progGrow3 1.5s ease-out 1.1s forwards;width:0} .gh-prog-4{animation:progGrow4 1.5s ease-out 1.25s forwards;width:0}
.gh-cursor { animation:cursorSweep 20s linear infinite; }
.gh-spark { animation:sparkle 2s ease-in-out infinite; }
.gh-spark:nth-child(1){animation-delay:0s} .gh-spark:nth-child(2){animation-delay:1.3s} .gh-spark:nth-child(3){animation-delay:2.6s}
@media(max-width:480px) { .gantt-hero { max-width:100%; } }

/* Help accordion */
.help-acc { background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;overflow:hidden; }
.help-acc summary { padding:12px 16px;font-size:14px;font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;user-select:none;color:var(--text);transition:background var(--t); }
.help-acc summary:hover { background:var(--surface2); }
.help-acc summary::after { content:'+';font-size:18px;font-weight:400;color:var(--text3);transition:transform .2s; }
.help-acc[open] summary::after { content:'\2212'; }
.help-acc summary::-webkit-details-marker { display:none; }
.help-body { padding:4px 16px 16px;font-size:13px;color:var(--text2);line-height:1.7; }
.help-body ul { margin:8px 0 8px 18px; }
.help-body li { margin-bottom:4px; }
.help-body p { margin-bottom:8px; }

/* Tutorial overlay */
.tut-overlay { position:fixed;inset:0;z-index:99990;pointer-events:none;transition:opacity .3s; }
.tut-overlay.active { pointer-events:auto; }
.tut-backdrop { position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:99991; }
.tut-spotlight { position:fixed;z-index:99992;box-shadow:0 0 0 9999px rgba(0,0,0,.65);border-radius:8px;transition:all .4s ease;pointer-events:none; }
.tut-card { position:fixed;z-index:99993;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 24px;max-width:380px;width:90vw;box-shadow:0 8px 32px rgba(0,0,0,.5);color:var(--text); }
.tut-card h3 { font-size:15px;font-weight:700;margin-bottom:8px; }
.tut-card p { font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:16px; }
.tut-footer { display:flex;justify-content:space-between;align-items:center;gap:10px; }
.tut-dots { display:flex;gap:5px; }
.tut-dot { width:7px;height:7px;border-radius:50%;background:var(--border2); }
.tut-dot.active { background:var(--accent); }
.tut-skip { font-size:12px;color:var(--text3);cursor:pointer;border:none;background:none;padding:4px 8px; }
.tut-skip:hover { color:var(--text2); }
.tut-next { background:var(--accent);color:#000;border:none;border-radius:6px;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer; }
.tut-next:hover { background:var(--accent-dk); }
.tut-step { font-size:11px;color:var(--text3); }
@media(max-width:640px) { .tut-card { max-width:92vw;padding:16px; } .tut-next { padding:10px 24px;font-size:14px; } }