:root{--bg-soft:#eef3f8;--panel:#ffffff;--panel-2:#f8fbff;--line-strong:#c6d3e1;--primary:#0f766e;--primary-2:#14b8a6;--accent-2:#0e7c86;--radius-xl:28px;--radius-md:16px;--btn-text:#fff;--chip:#eff6ff;--chip-border:#d4ecea;--hero:radial-gradient(circle at 0% 0%, rgba(20,184,166,.18), transparent 28%),
      radial-gradient(circle at 100% 0%, rgba(37,99,235,.12), transparent 30%),
      linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);--grid:linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);--card-grad:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);--secondary-btn:#ffffff;--secondary-btn-text:#102a2c;--secondary-btn-border:#d5dee8;--site-header-height:84px;--page-top-gap:18px;--main-top-offset:calc(var(--site-header-height) + var(--page-top-gap))}
html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],.tool-app html.tool-dark,.tool-app body.tool-dark{color-scheme:dark;--bg:#071019;--bg-soft:#0b1522;--panel:#0f1b2d;--panel-2:#132238;--text:#e7edf7;--muted:#9fb0c5;--line:#1f3146;--line-strong:#28405d;--primary:#14b8a6;--primary-2:#2dd4bf;--accent:#4fb3b9;--accent-2:#4fb3b9;--success:#22c55e;--warning:#f59e0b;--danger:#f87171;--shadow:0 16px 46px rgba(2,6,23,.32);--shadow-soft:0 8px 22px rgba(2,6,23,.22);--chip:#12263d;--chip-border:#1f3a5d;--hero:radial-gradient(circle at 0% 0%, rgba(45,212,191,.18), transparent 28%),
      radial-gradient(circle at 100% 0%, rgba(96,165,250,.13), transparent 30%),
      linear-gradient(180deg,#0c1624 0%, #0d1a2a 100%);--grid:linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px);--input-bg:#0c1624;--input-border:#203349;--input-text:#e7edf7;--card-grad:linear-gradient(180deg,#0f1b2d 0%, #132238 100%);--secondary-btn:#122133;--secondary-btn-text:#e7edf7;--secondary-btn-border:#22364e}
.tool-app *{box-sizing:border-box}
.tool-app button,.tool-app input,.tool-app select{font:inherit}
.tool-app button{cursor:pointer}
.tool-app input,.tool-app select{outline:none}
.site-shell{min-height:100vh;display:flex;flex-direction:column}
.shell{max-width:1400px;margin:0 auto;padding:var(--main-top-offset) 18px 18px;width:100%}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding:14px 18px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.6);backdrop-filter:blur(12px);box-shadow:var(--shadow-soft)}
html[data-theme="dark"] .topbar,html[data-theme="dark"] .topbar,html[data-theme="dark"] .topbar,html[data-theme="dark"] .topbar,html[data-theme="dark"] .topbar,html[data-theme="dark"] .topbar,html[data-theme="dark"] .topbar,html[data-theme="dark"] .topbar,.tool-app html.tool-dark .topbar,.tool-app body.tool-dark .topbar{background:rgba(15,27,45,.72)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;color:#fff;font-weight:800;font-size:1rem;box-shadow:0 10px 20px rgba(15,118,110,.22);flex:0 0 auto}
.brand-text{min-width:0}
.brand-text h1{margin:0;font-size:1rem;line-height:1.15}
.brand-text p{margin:3px 0 0;color:var(--muted);font-size:.84rem;line-height:1.3}
.hero{border:1px solid var(--line);background:var(--hero);border-radius:32px;box-shadow:var(--shadow);padding:28px;margin-bottom:18px;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;inset:auto -60px -60px auto;width:220px;height:220px;border-radius:999px;background:radial-gradient(circle, rgba(124,58,237,.13), transparent 62%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--chip);border:1px solid var(--chip-border);color:var(--accent);font-size:.8rem;font-weight:700;margin-bottom:14px}
.hero h2{margin:0;font-size:clamp(2rem,4vw,3.6rem);line-height:1.02;letter-spacing:-.04em}
.hero h2 .grad{background:linear-gradient(90deg,var(--primary),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{margin:14px 0 0;color:var(--muted);font-size:1rem;line-height:1.75;max-width:780px}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hero-pills span{padding:10px 13px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.55);font-size:.85rem;font-weight:700}
html[data-theme="dark"] .hero-pills span,html[data-theme="dark"] .hero-pills span,html[data-theme="dark"] .hero-pills span,html[data-theme="dark"] .hero-pills span,html[data-theme="dark"] .hero-pills span,html[data-theme="dark"] .hero-pills span,html[data-theme="dark"] .hero-pills span,html[data-theme="dark"] .hero-pills span,.tool-app html.tool-dark .hero-pills span,.tool-app body.tool-dark .hero-pills span{background:rgba(15,27,45,.74)}
.hero-side{display:grid;gap:14px}
.hero-stat{border:1px solid var(--line);background:var(--card-grad);border-radius:24px;padding:18px;box-shadow:var(--shadow-soft)}
.hero-stat small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;margin-bottom:8px}
.hero-stat strong{display:block;font-size:1.15rem;line-height:1.35;word-break:break-word}
.layout{display:grid;grid-template-columns:370px 1fr;gap:18px;align-items:start}
.sidebar{position:sticky;top:calc(var(--site-header-height) + 18px);display:grid;gap:18px}
.card{border:1px solid var(--line);background:var(--card-grad);border-radius:28px;box-shadow:var(--shadow)}
.card.pad{padding:18px}
.section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.section-title h3{margin:0;font-size:1.05rem;line-height:1.2}
.section-title p{margin:5px 0 0;color:var(--muted);font-size:.84rem;line-height:1.55}
.status{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--chip);font-size:.78rem;font-weight:800;white-space:nowrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.79rem;font-weight:800;color:var(--text)}
.field input,.field select{width:100%;min-height:48px;border-radius:15px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);padding:12px 14px;transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease}
.field input:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(20,184,166,.14)}
.hint{margin-top:10px;color:var(--muted);font-size:.78rem;line-height:1.55}
.toggle-list{display:grid;gap:10px;margin-top:14px}
.toggle{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:var(--panel-2)}
.toggle input{margin-top:2px;accent-color:var(--primary)}
.toggle strong{display:block;font-size:.88rem;margin-bottom:4px}
.toggle span{color:var(--muted);font-size:.78rem;line-height:1.45;display:block}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.btn{min-height:48px;padding:0 14px;border-radius:15px;font-weight:800;border:1px solid transparent;transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:var(--btn-text);box-shadow:0 12px 24px rgba(15,118,110,.22)}
.btn-soft{background:var(--secondary-btn);color:var(--secondary-btn-text);border-color:var(--secondary-btn-border)}
.btn-wide{grid-column:1/-1}
.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.mini{border:1px solid var(--line);background:var(--card-grad);border-radius:22px;padding:16px;box-shadow:var(--shadow-soft)}
.mini small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;margin-bottom:8px}
.mini strong{display:block;font-size:1rem;line-height:1.35;word-break:break-word}
.results-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:18px}
.big-result{display:grid;gap:14px}
.result-box{border:1px solid var(--line);border-radius:22px;background:var(--panel-2);padding:16px}
.result-box small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;margin-bottom:8px}
.result-box strong{display:block;font-size:1.12rem;line-height:1.45;word-break:break-word}
.result-box p{margin:8px 0 0;color:var(--muted);font-size:.84rem;line-height:1.6}
.split-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.timeline{display:grid;gap:12px}
.timeline-item{border:1px solid var(--line);background:var(--panel-2);border-radius:18px;padding:14px;display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start}
.timeline-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:800;box-shadow:0 10px 18px rgba(37,99,235,.18)}
.timeline-item h4{margin:0 0 4px;font-size:.95rem}
.timeline-item p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.65}
.units-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.unit{border:1px solid var(--line);border-radius:18px;background:var(--panel-2);padding:14px}
.unit small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.67rem;margin-bottom:8px}
.unit strong{display:block;font-size:1rem;line-height:1.35;word-break:break-word}
.summary-box{margin-top:16px;padding:16px;border-radius:18px;border:1px dashed var(--line-strong);background:linear-gradient(180deg, rgba(20,184,166,.06), rgba(37,99,235,.04));white-space:pre-wrap;line-height:1.7;font-size:.92rem}
.preset-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.preset{border:1px solid var(--chip-border);background:var(--chip);color:var(--accent);border-radius:999px;padding:9px 12px;font-size:.78rem;font-weight:800;cursor:pointer}
.footer-note{margin-top:18px;padding:16px 18px;border:1px solid var(--line);border-radius:20px;background:var(--card-grad);color:var(--muted);font-size:.84rem;line-height:1.7}
.layout-placeholder-style{display:none}
@media (max-width:1180px){
.layout{grid-template-columns:1fr}
.sidebar{position:relative;top:auto}
.hero-grid,.results-grid{grid-template-columns:1fr}
.mini-stats,.units-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
:root{--site-header-height:74px;--page-top-gap:14px}
.shell{padding:var(--main-top-offset) 12px 12px}
.hero{padding:20px}
.grid-2,.split-grid,.btn-row,.mini-stats,.units-grid{grid-template-columns:1fr}
.topbar{padding:12px 14px}
}

/* page overrides */
.tool-app .sidebar{position:static}
.tool-app .field input,.tool-app .field select{width:100%;min-height:46px;padding:10px 13px;font-size:16px;border-radius:12px;border:1.5px solid var(--zl-line-2);background-color:var(--zl-surface);color:var(--zl-ink)}
.tool-app .field input:disabled{opacity:.5;cursor:not-allowed}
.tool-app .field label{font:600 14px var(--zl-font-head)}
.tool-app .timeline-icon{background:var(--zl-tint);color:var(--zl-accent-strong);box-shadow:none;font-family:var(--zl-font-head)}
.tool-app .summary-box{background:var(--zl-surface-2);border:1px solid var(--zl-line)}
.tool-app .preset{min-height:44px;background:var(--zl-tint);color:var(--zl-accent-strong);border:0;font-family:var(--zl-font-head);font-weight:500}
.tool-app .hint{font-size:14px;color:var(--zl-muted)}
.tool-app .result-box,.tool-app .mini,.tool-app .unit,.tool-app .timeline-item,.tool-app .toggle{background:var(--zl-surface-2);border-color:var(--zl-line);box-shadow:none}