:root{
  color-scheme: light;
  --bg:#EEF1F4;
  --surface:#FFFFFF;
  --surface-2:#E3E8ED;
  --surface-3:#D8DFE6;
  --ink:#171B20;
  --ink-secondary:#545C66;
  --ink-muted:#828A93;
  --accent:#1D5C99;
  --accent-ink:#FFFFFF;
  --accent-wash:#DCE8F3;
  --line:#D3D9E0;
  --line-strong:#B9C2CB;
  --danger:#B23A3A;
  --good:#0ca30c;

  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a;
  --series-4:#eda100; --series-5:#e87ba4; --series-6:#008300; --series-7:#7c5cbf;

  --shadow: 0 1px 2px rgba(23,27,32,0.06), 0 6px 16px -8px rgba(23,27,32,0.18);
  --radius: 10px;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg:#12161B; --surface:#191E24; --surface-2:#222831; --surface-3:#2B323B;
    --ink:#ECEEF0; --ink-secondary:#A7AFB9; --ink-muted:#767F89;
    --accent:#5B9EDE; --accent-ink:#0B1116; --accent-wash:#1C2C3B;
    --line:#2B323B; --line-strong:#39424D; --danger:#E38686;
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
    --series-4:#c98500; --series-5:#d55181; --series-6:#3dbf3d; --series-7:#a58ddb;
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 10px 24px -10px rgba(0,0,0,0.55);
  }
}

*{box-sizing:border-box;}
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased; display:flex; flex-direction:column;
}

a{ color:var(--accent); }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 20px; border-bottom:1px solid var(--line);
  background:var(--surface); flex-wrap:wrap;
}
.topbar .brand{ display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--ink); }
.topbar .brand .mark{ font-size:18px; }
.topbar .brand .name{ font-weight:700; font-size:16px; }
.topbar nav{ display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.topbar nav a{
  text-decoration:none; color:var(--ink-secondary); font-size:13.5px; font-weight:600;
  padding:7px 11px; border-radius:7px;
}
.topbar nav a:hover{ background:var(--surface-2); color:var(--ink); }
.topbar nav a.active{ background:var(--accent-wash); color:var(--accent); }
.topbar .user{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-muted); }
.lang-switch{
  font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--ink-secondary);
  text-decoration:none; border:1px solid var(--line-strong); border-radius:6px; padding:4px 7px;
}
.lang-switch:hover{ background:var(--surface-2); color:var(--ink); }

main.page{ max-width:1180px; margin:0 auto; padding:24px 20px 64px; width:100%; flex:1; }

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.page-head h1{ margin:0 0 4px; font-size:22px; font-weight:700; }
.page-head p{ margin:0; color:var(--ink-secondary); font-size:13.5px; }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px;
}
.card + .card{ margin-top:16px; }

button, .btn{
  appearance:none; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink); font-size:13px; font-weight:600; padding:9px 14px; border-radius:8px;
  cursor:pointer; font-family:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{ background:var(--surface-2); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.primary:hover{ filter:brightness(1.06); }
.btn.danger{ color:var(--danger); border-color:var(--danger); background:transparent; }
.btn.danger:hover{ background:var(--danger); color:#fff; }
.btn.small{ padding:6px 10px; font-size:12px; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

label.std{ display:block; font-size:12px; font-weight:600; color:var(--ink-secondary); margin-bottom:5px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea{
  width:100%; font-family:var(--font-sans); font-size:13.5px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:7px; padding:9px 10px;
}
input[type="number"]{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
textarea{ resize:vertical; min-height:70px; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:14px; }
.field.full{ grid-column:1/-1; }

.form-actions{ display:flex; gap:10px; margin-top:18px; }

table.list{ width:100%; border-collapse:collapse; }
table.list th{
  text-align:left; font-size:10.5px; font-weight:600; color:var(--ink-muted);
  text-transform:uppercase; letter-spacing:.03em; padding:0 10px 8px 0; border-bottom:1px solid var(--line);
}
table.list td{ padding:10px 10px 10px 0; font-size:13.5px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.list tr:last-child td{ border-bottom:none; }
table.list td.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
table.list .row-actions{ display:flex; gap:6px; justify-content:flex-end; }

.badge{
  display:inline-flex; align-items:center; font-size:11px; font-weight:600;
  padding:3px 8px; border-radius:999px; background:var(--surface-2); color:var(--ink-secondary);
}
.badge.drill{ background:var(--accent-wash); color:var(--accent); }
.badge.mill{ background:#FCE9CE; color:#8a5210; }
.badge.tap{ background:#EBE2FA; color:#5B3B9E; }
@media (prefers-color-scheme: dark){
  .badge.mill{ background:#3a2c17; color:#e0a862; }
  .badge.tap{ background:#2c2340; color:#b79fe6; }
}

.empty-state{ text-align:center; padding:40px 20px; color:var(--ink-muted); }
.empty-state p{ margin:0 0 14px; font-size:13.5px; }

.alert{
  font-size:13px; padding:10px 12px; border-radius:8px; margin-bottom:14px;
  background:#FBE7E7; color:var(--danger); border:1px solid #EBC3C3;
}
@media (prefers-color-scheme: dark){ .alert{ background:#2A1717; border-color:#4a2323; } }

.auth-wrap{ max-width:380px; margin:64px auto; padding:0 16px; }
.auth-wrap h1{ font-size:22px; margin:0 0 4px; }
.auth-wrap p.sub{ color:var(--ink-secondary); font-size:13px; margin:0 0 20px; }
.auth-wrap .switch{ margin-top:16px; font-size:13px; color:var(--ink-secondary); text-align:center; }

.hint{ font-size:11.5px; color:var(--ink-muted); margin-top:4px; }

.pw-field{ position:relative; }
.pw-field input{ padding-right:38px; }
.pw-toggle{
  position:absolute; top:50%; right:3px; transform:translateY(-50%);
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--ink-muted); font-size:15px;
  cursor:pointer; border-radius:6px; padding:0;
}
.pw-toggle:hover{ color:var(--ink); background:var(--surface-2); }

.checkbox-label{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-secondary); cursor:pointer; }
.checkbox-label input[type="checkbox"]{ width:auto; accent-color:var(--accent); cursor:pointer; }

.tool-params-table input{ padding:7px 8px; font-size:13px; }
.tool-params-row{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr auto; gap:8px; align-items:end;
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:10px; margin-bottom:8px;
}
@media (max-width:720px){ .tool-params-row{ grid-template-columns:1fr 1fr; } }
.tool-params-row .rm{ align-self:center; }

/* ---- calculator page ---- */
.calc-layout{
  display:grid; grid-template-columns:1fr; grid-template-areas:"summary" "form"; gap:20px; align-items:start;
}
@media (min-width:960px){
  .calc-layout{ grid-template-columns:1.6fr 1fr; grid-template-areas:"form summary"; gap:24px; }
}
.calc-form-col{ grid-area:form; display:flex; flex-direction:column; gap:16px; min-width:0; }
.calc-summary-col{ grid-area:summary; }
@media (min-width:960px){ .calc-summary-col{ position:sticky; top:20px; } }

.job-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:6px; }
@media (max-width:720px){ .job-grid{ grid-template-columns:1fr; } }

.table-header{ display:grid; gap:8px; padding:0 34px 6px 2px; font-size:10.5px; font-weight:600; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.03em; }
.rows{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.row{ position:relative; display:grid; gap:8px; align-items:end; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:9px 34px 9px 9px; }
.field-label{ font-size:10px; font-weight:600; color:var(--ink-muted); margin-bottom:3px; display:block; }
@media (min-width:820px){ .field-label{ display:none; } }
@media (max-width:819px){ .table-header{ display:none; } .row{ grid-template-columns:repeat(auto-fit,minmax(96px,1fr)) !important; } }

.row select{ font-size:12.5px; padding:8px 9px; }
.field output{
  display:block; width:100%; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:13px; font-weight:600; color:var(--accent); background:var(--surface);
  border:1px dashed var(--line-strong); border-radius:7px; padding:8px 9px;
}

.row-remove{
  position:absolute; top:9px; right:9px; width:22px; height:22px; border-radius:6px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-secondary);
  font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.row-remove:hover{ background:var(--danger); border-color:var(--danger); color:#fff; }

.row-drilling{ grid-template-columns:1.3fr 0.8fr 0.7fr 0.9fr 0.8fr 0.9fr; }
.row-contour{ grid-template-columns:1.3fr 1fr 0.9fr 0.7fr 0.9fr; }
.row-roughing{ grid-template-columns:1.3fr 1fr 1fr 0.9fr; }
.row-tapping{ grid-template-columns:1.3fr 0.8fr 0.7fr 0.8fr 0.9fr 0.9fr; }

.add-row{
  width:100%; border:1.5px dashed var(--line-strong); background:transparent; color:var(--ink-secondary);
  font-size:12.5px; font-weight:600; border-radius:8px; padding:9px; cursor:pointer;
}
.add-row:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-wash); }

.hero{ text-align:left; }
.hero .hero-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); }
.hero .hero-value{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:40px; font-weight:700; color:var(--ink); line-height:1.05; margin-top:4px; }
.hero .hero-sub{ font-size:12.5px; color:var(--ink-secondary); margin-top:4px; }
.hero .hero-sub b{ color:var(--ink); font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

.bar{ display:flex; width:100%; height:26px; border-radius:6px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); }
.bar .seg{ min-width:0; cursor:default; }
.bar .seg:not(:last-child){ border-right:2px solid var(--surface); }
.bar.empty{ background:var(--surface-3); }
.seg-1{ background:var(--series-1); } .seg-2{ background:var(--series-2); }
.seg-3{ background:var(--series-3); } .seg-4{ background:var(--series-4); }
.seg-5{ background:var(--series-5); } .seg-6{ background:var(--series-6); }
.seg-7{ background:var(--series-7); }

.legend{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:8px; }
.legend .item{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-secondary); }
.swatch{ width:9px; height:9px; border-radius:2px; flex:none; }

table.breakdown{ width:100%; border-collapse:collapse; margin-top:10px; }
table.breakdown th{ text-align:left; font-size:10.5px; font-weight:600; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.03em; padding:0 6px 6px 0; border-bottom:1px solid var(--line); }
table.breakdown td{ padding:7px 6px; font-size:12.5px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.breakdown td.num, table.breakdown th.num{ text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
table.breakdown tr:last-child td{ border-bottom:none; }
table.breakdown td.total-row{ font-weight:700; }
.op-label{ display:flex; align-items:center; gap:7px; }

.note-box{ font-size:12px; color:var(--ink-secondary); background:var(--accent-wash); border:1px solid var(--line); border-radius:8px; padding:10px 11px; line-height:1.5; margin-top:12px; }

#tooltip{
  position:fixed; pointer-events:none; z-index:50; background:var(--ink); color:var(--bg);
  font-size:11.5px; font-weight:600; padding:6px 9px; border-radius:6px; white-space:nowrap;
  opacity:0; transform:translate(-50%,-130%); transition:opacity .08s ease;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}
#tooltip.show{ opacity:1; }

.autofill-note{ font-size:10.5px; color:var(--good); margin-top:2px; }

/* ---- landing page ---- */
.landing-hero{ max-width:680px; margin:48px auto 8px; padding:0 16px; text-align:center; }
.landing-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px;
}
.landing-hero h1{ font-size:36px; font-weight:700; margin:0 0 14px; }
.landing-tagline{ font-size:15px; color:var(--ink-secondary); line-height:1.55; margin:0 0 24px; }
.landing-cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.landing-cta .btn{ padding:11px 20px; font-size:14px; }

.landing-section{ max-width:1020px; margin:56px auto 0; padding:0 16px; }
.landing-section h2{ text-align:center; font-size:22px; font-weight:700; margin:0 0 24px; }

.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:860px){ .feature-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px;
}
.feature-card .feature-icon{ font-size:22px; display:block; margin-bottom:10px; }
.feature-card h3{ font-size:14.5px; margin:0 0 6px; }
.feature-card p{ font-size:13px; color:var(--ink-secondary); line-height:1.5; margin:0; }

.how-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; max-width:640px; margin-inline:auto; }
.how-steps li{
  display:flex; align-items:flex-start; gap:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px;
}
.how-steps .step-num{
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center;
}
.how-steps .step-text{ font-size:13.5px; color:var(--ink); padding-top:3px; line-height:1.5; }

.landing-final{ max-width:560px; margin:64px auto 0; padding:0 16px; text-align:center; }
.landing-final h2{ font-size:22px; font-weight:700; margin:0 0 8px; }
.landing-final p{ font-size:13.5px; color:var(--ink-secondary); margin:0 0 20px; }

.trust-section{ max-width:720px; margin:0 auto; padding:0 16px 56px; }
.trust-card{
  background:var(--accent-wash); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px;
}
.trust-card h2{ font-size:16px; margin:0 0 10px; }
.trust-card p{ font-size:13px; color:var(--ink-secondary); line-height:1.6; margin:0 0 8px; }
.trust-card p:last-child{ margin-bottom:0; }

.landing-footer{
  max-width:1020px; margin:56px auto 0; padding:20px 16px; text-align:center;
  border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-muted);
}
.landing-footer p{ margin:0; }