/* ===== TOKENS ===== */
:root {
  --text-xs: clamp(0.65rem,0.6rem+0.25vw,0.75rem);
  --text-sm: clamp(0.72rem,0.68rem+0.2vw,0.82rem);
  --text-base: clamp(0.82rem,0.78rem+0.2vw,0.92rem);
  --text-lg: clamp(0.95rem,0.88rem+0.35vw,1.15rem);
  --text-xl: clamp(1.1rem,0.95rem+0.75vw,1.6rem);
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-6:1.5rem;
  --font-body:'General Sans','Helvetica Neue',sans-serif;
  --font-display:'Cabinet Grotesk','General Sans',sans-serif;
  --radius-sm:0.25rem; --radius-md:0.375rem; --radius-lg:0.5rem;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --transition-fast:150ms cubic-bezier(0.16,1,0.3,1);
}
[data-theme="dark"]{
  --c-bg:#0a0b0f; --c-surface:#111219; --c-surface-2:#171920;
  --c-border:#222538; --c-border-light:#1a1d2c;
  --c-text:#dfe1eb; --c-text-muted:#7a7f96; --c-text-faint:#4a4e62;
  --c-accent:#00d4aa; --c-accent-dim:rgba(0,212,170,0.12); --c-accent-glow:rgba(0,212,170,0.06);
  --c-blue:#4a9eff; --c-purple:#a78bfa; --c-orange:#fb923c;
  --c-gold:#fbbf24; --c-red:#f87171; --c-green:#34d399; --c-pink:#f472b6; --c-cyan:#22d3ee;
  --c-shadow:0 2px 12px rgba(0,0,0,0.45);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font-body);font-size:var(--text-base);color:var(--c-text);background:var(--c-bg);line-height:1.45;overflow:hidden;height:100dvh;display:flex;flex-direction:column}

/* ===== HEADER ===== */
.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-1) var(--space-4);background:var(--c-surface);border-bottom:1px solid var(--c-border-light);flex-shrink:0;z-index:100;height:38px}
.header__logo{display:flex;align-items:center;gap:var(--space-2)}
.header__icon{width:22px;height:22px;color:var(--c-accent)}
.header__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--c-text);letter-spacing:-0.02em}
.header__total{display:flex;align-items:center;gap:var(--space-2);position:relative;cursor:pointer;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--c-border);background:var(--c-surface-2);transition:border-color var(--transition-fast),background var(--transition-fast)}
.header__total:hover{border-color:var(--c-accent);background:var(--c-accent-glow)}
.header__disclaimer{font-size:var(--text-xs);font-weight:400;color:var(--c-text-faint);opacity:0.7;letter-spacing:0}
.header__total-label{font-size:var(--text-sm);color:var(--c-text-muted)}
.header__total-value{font-size:var(--text-lg);font-weight:700;color:var(--c-accent);font-variant-numeric:tabular-nums}
.header__actions{display:flex;align-items:center;gap:var(--space-2)}
.reset-btn{
  background:none;
  border:1px solid var(--c-border-light);
  border-radius:var(--radius-md);
  color:var(--c-text-faint);
  cursor:pointer;
  padding:3px 10px;
  font-family:var(--font-body);
  font-size:var(--text-xs);
  transition:color var(--transition-fast),border-color var(--transition-fast);
  opacity:0.5
}
.reset-btn:hover{
  color:var(--c-text-muted);
  border-color:var(--c-border);
  opacity:1
}

/* Breakdown tooltip */
.breakdown-tooltip{position:absolute;top:calc(100% + 6px);right:0;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-3);min-width:300px;max-width:380px;max-height:70vh;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility .2s;z-index:200;box-shadow:var(--c-shadow);pointer-events:none}
.header__total:hover .breakdown-tooltip{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:2px 0;font-size:var(--text-xs);gap:var(--space-3)}
.breakdown-row+.breakdown-row{border-top:1px solid var(--c-border-light)}
.breakdown-row__name{color:var(--c-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.breakdown-row__value{color:var(--c-text);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.breakdown-row--total{border-top:1px solid var(--c-accent)!important;margin-top:2px;padding-top:var(--space-1)}
.breakdown-row--total .breakdown-row__name{color:var(--c-text);font-weight:600}
.breakdown-row--total .breakdown-row__value{color:var(--c-accent);font-weight:700;font-size:var(--text-sm)}
.breakdown-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-right:var(--space-1);display:inline-block}
.breakdown-row__name-wrap{display:flex;align-items:center;min-width:0}

/* ===== GRID ===== */
.grid{display:grid;grid-template-columns:1fr 2fr 1fr;grid-template-rows:1fr 1fr;gap:1px;flex:1;min-height:0;background:var(--c-border-light)}
.panel{background:var(--c-surface);padding:var(--space-2) var(--space-2);min-height:0;overflow:hidden;display:flex;flex-direction:column}
.panel__title{font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-1);flex-shrink:0;display:flex;align-items:center;gap:var(--space-2)}
.panel__subtitle{font-weight:400;color:var(--c-text-faint);text-transform:none;letter-spacing:0;font-size:var(--text-xs)}

/* ===== SETTINGS ===== */
.panel--settings{grid-row:1/3;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--c-border) transparent;padding:var(--space-2) var(--space-2)}
.panel--settings::-webkit-scrollbar{width:3px}
.panel--settings::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:3px}
.settings-group{margin-bottom:var(--space-2)}
.settings-group__header{font-size:var(--text-xs);font-weight:600;color:var(--c-text-faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;padding-bottom:2px;border-bottom:1px solid var(--c-border-light);display:flex;align-items:center;gap:var(--space-2)}
.hint{font-weight:400;color:var(--c-text-faint);text-transform:none;letter-spacing:0;font-size:var(--text-xs);opacity:.7}
.setting{display:flex;align-items:center;gap:4px;padding:3px 4px;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast);position:relative;min-height:22px}
.setting:hover{background:var(--c-accent-glow)}
.setting input[type="checkbox"],.setting input[type="radio"]{display:none}
.setting__check{width:13px;height:13px;border:1.5px solid var(--c-border);border-radius:2px;flex-shrink:0;position:relative;transition:background var(--transition-fast),border-color var(--transition-fast)}
.setting input[type="checkbox"]:checked~.setting__check,.checked-locked{background:var(--c-accent);border-color:var(--c-accent)}
.setting input[type="checkbox"]:checked~.setting__check::after,.checked-locked::after{content:'';position:absolute;left:3px;top:0px;width:4px;height:8px;border:solid var(--c-bg);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.setting input[type="checkbox"]:disabled~.setting__check{opacity:.4}
.setting__radio{width:13px;height:13px;border:1.5px solid var(--c-border);border-radius:50%;flex-shrink:0;position:relative;transition:border-color var(--transition-fast)}
.setting input[type="radio"]:checked~.setting__radio{border-color:var(--c-accent)}
.setting input[type="radio"]:checked~.setting__radio::after{content:'';position:absolute;left:2.5px;top:2.5px;width:6px;height:6px;border-radius:50%;background:var(--c-accent)}
.setting__name{font-size:var(--text-sm);color:var(--c-text);flex-shrink:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setting__name.dim{color:var(--c-text-faint)}
.setting__badge{font-size:var(--text-xs);color:var(--c-text-faint);background:var(--c-surface-2);padding:0 4px;border-radius:var(--radius-sm);flex-shrink:0;white-space:nowrap}
.setting__price{font-size:var(--text-xs);color:var(--c-text-faint);flex-shrink:0;white-space:nowrap;margin-left:auto;padding-right:2px}
.info-btn{background:none;border:2px solid var(--c-border);border-radius:40%;color:var(--c-text-muted);cursor:pointer;padding:0;width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast);margin-left:auto}
.info-btn:hover{color:var(--c-accent);border-color:var(--c-accent);background:var(--c-accent-dim)}

/* Sub-setting */
.sub-setting{padding-left:20px;opacity:.9}
.setting__sub-icon{color:var(--c-text-faint);font-size:var(--text-xs);margin-right:2px}

/* ===== MONTH SHIFTER ===== */
.month-shifter{display:inline-flex;align-items:center;gap:2px;background:var(--c-surface-2);border:1px solid var(--c-border-light);border-radius:var(--radius-sm);padding:0 3px;height:20px;flex-shrink:0}
.month-shifter-row{padding:0 4px 2px 22px}
.ms-btn{background:none;border:none;color:var(--c-text-faint);cursor:pointer;font-size:var(--text-sm);padding:0 2px;line-height:1;transition:color var(--transition-fast)}
.ms-btn:hover{color:var(--c-accent)}
.ms-val{font-size:var(--text-xs);color:var(--c-text);min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.ms-label{font-size:var(--text-xs);color:var(--c-text-faint);margin-right:2px}

/* ===== LICENSE ROW ===== */
.license-row{display:flex;align-items:center;gap:3px;padding:2px 4px;border-radius:var(--radius-sm);transition:background var(--transition-fast);cursor:pointer;min-height:21px}
.license-row:hover{background:var(--c-accent-glow)}
.license-row input{display:none}
.license-row__name{font-size:var(--text-sm);color:var(--c-text);white-space:nowrap}
.license-row input:checked+.setting__check{background:var(--c-accent);border-color:var(--c-accent)}
.license-row input:checked+.setting__check::after{content:'';position:absolute;left:3px;top:0px;width:4px;height:8px;border:solid var(--c-bg);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.license-row__month{flex-shrink:0;display:none}
.license-row.active .license-row__month{display:inline-flex}
.license-row__users{font-size:var(--text-xs);color:var(--c-text-faint);white-space:nowrap;margin-left:auto}
.license-row__price{font-size:var(--text-xs);color:var(--c-text-faint);white-space:nowrap;flex-shrink:0}

/* ===== CHARTS ===== */
.panel--gantt{grid-column:2;grid-row:1;background:linear-gradient(var(--c-border-light) 1px,transparent 1px),linear-gradient(90deg,var(--c-border-light) 1px,transparent 1px),var(--c-surface);background-size:40px 40px;background-position:-1px -1px}
.panel--finance{grid-column:2;grid-row:2;padding-bottom:var(--space-1);background:linear-gradient(var(--c-border-light) 1px,transparent 1px),linear-gradient(90deg,var(--c-border-light) 1px,transparent 1px),var(--c-surface);background-size:40px 40px;background-position:-1px -1px}
.gantt-container,.finance-container{flex:1;min-height:0;position:relative}
.gantt-container canvas,.finance-container canvas{width:100%!important;height:100%!important}

/* ===== FAQ ===== */
.panel--faq{grid-row:1/3;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--c-border) transparent}
.panel--faq::-webkit-scrollbar{width:3px}
.panel--faq::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:3px}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-item__q{font-size:var(--text-sm);color:var(--c-text);padding:4px 4px 4px 14px;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);border-radius:var(--radius-sm);position:relative}
.faq-item__q::before{content:'';position:absolute;left:4px;top:50%;transform:translateY(-50%) rotate(0deg);width:0;height:0;border-left:4px solid var(--c-text-faint);border-top:3px solid transparent;border-bottom:3px solid transparent;transition:transform .3s var(--ease-out),border-color .3s var(--ease-out)}
.faq-item:hover .faq-item__q,.faq-item.open .faq-item__q{background:var(--c-accent-glow);color:var(--c-accent)}
.faq-item.open .faq-item__q::before{transform:translateY(-50%) rotate(90deg);border-left-color:var(--c-accent)}
.faq-item__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out),padding .3s var(--ease-out),opacity .3s var(--ease-out);opacity:0;padding:0 4px}
.faq-item.open .faq-item__a{max-height:200px;opacity:1;padding:2px 4px 4px}
.faq-item__a p{font-size:0.8rem;color:var(--c-text-muted);line-height:1.45}

/* ===== MOBILE SUMMARY ===== */
.mobile-summary{display:none;background:var(--c-surface);border-top:1px solid var(--c-accent);padding:var(--space-3) var(--space-4);text-align:center}
.mobile-summary__label{font-size:var(--text-sm);color:var(--c-text-muted)}
.mobile-summary__value{font-size:var(--text-xl);font-weight:700;color:var(--c-accent);font-variant-numeric:tabular-nums}
.mobile-summary__breakdown{margin-top:var(--space-2);text-align:left}

/* ===== TOOLTIP ===== */
.info-tooltip{position:fixed;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--c-text);max-width:240px;line-height:1.45;z-index:999;pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity .15s var(--ease-out),transform .15s var(--ease-out);box-shadow:var(--c-shadow)}
.info-tooltip.visible{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  body{overflow-y:auto;height:auto}
  .grid{grid-template-columns:1fr;grid-template-rows:auto;gap:1px}
  .panel--settings{grid-row:auto;order:1;max-height:none;overflow:visible}
  .panel--gantt{grid-column:1;grid-row:auto;order:2;min-height:280px}
  .panel--finance{grid-column:1;grid-row:auto;order:3;min-height:280px}
  .panel--faq{grid-row:auto;order:4;overflow:visible}
  .header__total{display:none}
  .mobile-summary{display:block;order:5}
}

/* ===== ANIMATIONS ===== */
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 0 var(--c-accent-dim)}50%{box-shadow:0 0 12px 2px var(--c-accent-dim)}}
.header__total-value.updated{animation:pulse-glow .5s var(--ease-out)}
canvas{display:block}