/* finesse · register=product · A=silver+system-blue · B=600/400 · C=capsule-nav+wide-ledger · D=press-feedback · E=glass-controls+solid-content · SOUL=5 SPECTACLE=2 DENSITY=6 */
:root {
  color-scheme: light;
  --page:#f5f5f7; --surface:#fefeff; --panel-2:#efeff2; --inset:#f5f5f7;
  --ink:#1d1d1f; --text:#424247; --muted:#6a6a71;
  --accent:#0066cc; --accent-hover:#0058b0; --accent-soft:#e9f2ff; --on-accent:#fefeff;
  --line:rgba(60,60,67,.12); --line-strong:rgba(60,60,67,.22);
  --receipt:#fefeff; --receipt-text:#1d1d1f; --receipt-muted:#6a6a71; --receipt-line:rgba(60,60,67,.12);
  --c1:#0066cc; --c2:#5684be; --c3:#93aac4; --c4:#cbd3df;
  --glass-bg:rgba(250,250,253,.87); --glass-edge:rgba(254,254,255,.94);
  --glass-line:rgba(35,40,55,.14); --selection:rgba(254,254,255,.96);
  --shadow:0 2px 5px rgba(25,35,55,.025),0 12px 28px -20px rgba(25,35,55,.18);
  --glass-shadow:inset 0 1px 0 var(--glass-edge),0 1px 0 var(--glass-line),0 8px 28px -18px rgba(25,35,55,.26);
  --control-shadow:0 1px 4px rgba(25,35,55,.10),inset 0 1px 0 var(--glass-edge);
  --modal-shadow:0 24px 90px -25px rgba(20,25,40,.3); --scrim:rgba(20,25,40,.2);
  --r:22px; --r-sm:12px; --nav-h:78px;
}
body {font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;background:var(--page);color:var(--ink)}
button,a,input,select { -webkit-tap-highlight-color:transparent }
button,.button { transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease,transform 160ms ease }
.button {border-radius:999px;background:var(--panel-2);border:1px solid transparent;min-height:44px;font-weight:550;padding:11px 19px}
.button:hover {background:var(--line)}
.button.primary {background:var(--accent);border-color:transparent;color:var(--on-accent);box-shadow:none}
.button.primary:hover {background:var(--accent-hover)}
.button.ghost {background:transparent;color:var(--muted)}
.button:active,.family-tabs button:active,.site-header nav button:active {transform:scale(.97);transition-duration:80ms}
input,select {border-radius:12px;color:var(--ink)}
.site-header {background:var(--glass-bg);border-bottom:0;box-shadow:var(--glass-shadow);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);gap:30px}
.brand-symbol {background:var(--accent);border-radius:11px;box-shadow:inset 0 1px 0 rgba(254,254,255,.3)}
.site-header .brand strong {font-size:22px;font-weight:650;letter-spacing:-.055em}
.site-header nav {flex:0 1 auto;padding:4px;background:var(--panel-2);border-radius:999px;gap:3px;margin:0 auto}
.site-header nav button {display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 15px;border-radius:999px;color:var(--muted);white-space:nowrap;font-weight:500;font-size:13px}
.site-header nav button.active {background:var(--selection);color:var(--accent);box-shadow:var(--control-shadow);font-weight:600}
.site-header nav button:hover {color:var(--ink);background:var(--selection)}
.site-header nav button.active:hover {color:var(--accent)}
.site-header nav .icon {width:17px;height:17px;stroke-width:1.8}
.nav-short {display:none}
.header-actions {gap:10px;margin-left:auto;flex-shrink:0}
.header-actions .language {color:var(--text)}
.header-actions .button {padding:10px 16px}
.home-main {padding-top:49px}
.home-intro h1 {font-size:44px;letter-spacing:-.045em;font-weight:650;line-height:1.19}
.intro-label {color:var(--muted);font-size:12px;letter-spacing:.055em;font-weight:550}
.home-note {border-left:0;background:transparent;gap:16px}
.home-note .icon {color:var(--accent)}
.selector-panel {border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow)}
.family-tabs {padding:17px 23px;background:var(--surface);gap:5px;border-color:var(--line)}
.family-tabs button {border-radius:999px;min-height:44px;font-weight:550;padding:10px 23px;border-color:transparent;background:transparent}
.family-tabs button.active {background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.home-drawing {background:var(--page);border-color:var(--line)}
.home-selection select,.cable-switch select {background:var(--inset);border-color:transparent;border-radius:12px}
.home-selection h2 {font-weight:600;letter-spacing:-.025em}
.home-selection>small,.drawing-caption,.drawing-footer {color:var(--muted)}
.home-go {padding-left:20px;padding-right:18px;min-height:46px}
.page-head h1 {font-weight:650;letter-spacing:-.03em}
.panel,.selected-cable,.material-panel,.below-calculation .panel {border-color:var(--line);border-radius:22px;box-shadow:var(--shadow);background:var(--surface)}
.selected-diagram {background:var(--page);border-radius:16px}
.selected-cable .cable-type {color:var(--muted);font-weight:550}
.audience-bar .segments,.reference-controls .segments {border-radius:999px;background:var(--panel-2);padding:4px}
.audience-bar .segments button,.reference-controls .segments button {border-radius:999px;font-weight:500;min-height:40px}
.audience-bar .segments button.active,.reference-controls .segments button.active {background:var(--selection);color:var(--ink);box-shadow:var(--control-shadow)}
.receipt {background:var(--receipt);color:var(--ink);border-color:var(--line);border-radius:22px;box-shadow:var(--shadow)}
.receipt-label,.receipt .per-km,.receipt-calculation>label,.receipt-calculation>div,.receipt-disclaimer {color:var(--muted)}
.receipt .currency,.receipt #main-total {color:var(--accent)}
.receipt #main-total {font-size:40px;font-weight:600;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.receipt-calculation {border-color:var(--line)}
.receipt-calculation strong {color:var(--ink);font-size:23px;font-weight:550}
.receipt .length-control input {background:var(--inset);color:var(--ink);border-color:transparent;border-radius:10px;min-height:40px}
.result-icon {background:var(--accent-soft);color:var(--accent);border:0;border-radius:13px}
.receipt-disclaimer {font-size:12px}
.materials th,.reference-table th {background:var(--page);font-weight:500;color:var(--muted)}
.materials tbody tr:hover {background:var(--inset)}
.materials input,.materials .price-input input {background:var(--inset);border:1px solid transparent;border-radius:10px;color:var(--ink);font-variant-numeric:tabular-nums}
.materials input:hover,.materials .price-input input:hover {border-color:var(--line-strong)}
.materials input:focus,.materials .price-input input:focus {background:var(--surface);border-color:var(--accent)}
.price-heading select {border:1px solid transparent;border-radius:999px;background:var(--accent-soft);color:var(--accent);padding:7px 10px;font-weight:600}
.line-total,.table-foot strong {font-variant-numeric:tabular-nums;font-weight:600}
.table-foot {background:var(--page);border-radius:0 0 22px 22px}
.material-panel {overflow:clip}
.reference-version {background:transparent;border:0;padding:0 2px 0;margin-bottom:21px;gap:15px;color:var(--muted)}
.reference-version strong {color:var(--text);font-weight:500}
.reference-version .text-link {border-radius:999px;padding:5px 10px;background:var(--accent-soft)}
.reference-controls .search {background:var(--surface);border-color:var(--line);border-radius:14px;min-height:46px}
.row-action {border-radius:50%}
.contact-icon {background:var(--accent-soft);border-radius:14px;color:var(--accent)}
.contact-card .button {border-radius:999px}
.reference-note {border-color:var(--line)}
.reference-note .icon {color:var(--accent)}
.site-footer {border-color:var(--line)}
.reference-update {border-radius:22px;background:var(--glass-bg);border-color:var(--glass-line);box-shadow:var(--glass-shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
dialog {border-radius:26px;border-color:var(--glass-line);background:var(--glass-bg);backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);box-shadow:var(--modal-shadow)}
dialog::backdrop {background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.dialog-head button {border-radius:50%;background:var(--panel-2);min-width:40px}
.dialog-body .formula {background:var(--accent-soft);color:var(--accent);border-radius:16px}
.dialog-actions {flex-wrap:wrap}
#toast {left:50%;border-radius:999px;box-shadow:var(--modal-shadow)}
@media(min-width:851px) and (max-width:1150px) {
  .site-header {gap:18px}.site-header nav button {padding:9px 12px}.site-header nav .nav-long {display:none}.site-header nav .nav-short {display:inline}
}
@media(min-width:601px) and (max-width:850px) {
  :root {--nav-h:124px}.site-header {row-gap:8px;padding-bottom:12px}.site-header nav {flex:0 1 auto;margin:0 auto;padding:4px;width:100%;justify-content:space-around}.site-header nav button {flex:1}
}
@media(max-width:600px) {
  :root {--nav-h:66px}
  .site-header {height:66px;flex-wrap:nowrap;align-content:normal;align-items:center;padding:10px 18px;gap:12px;isolation:isolate;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .site-header::before {content:"";position:absolute;inset:0;z-index:-1;background:var(--glass-bg);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);box-shadow:var(--glass-shadow)}
  .site-header .brand {height:40px}.site-header .brand strong {font-size:21px}.brand-symbol {width:31px;height:31px}
  .header-actions {margin-left:auto}.header-actions .language {font-size:13px;min-height:44px}
  .site-header nav {position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:auto;max-width:420px;height:67px;margin:0 auto;padding:5px;gap:2px;border-radius:30px;background:var(--glass-bg);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%)}
  .site-header nav button {display:flex;flex-direction:column;gap:4px;min-width:0;min-height:55px;padding:6px 3px;border-radius:24px;line-height:1.15;font-size:10.5px;letter-spacing:0}
  .site-header nav .icon {width:21px;height:21px;stroke-width:1.8}.site-header nav .nav-long {display:none}.site-header nav .nav-short {display:inline}
  .site-header nav button.active {background:var(--accent-soft);box-shadow:none}
  .home-main {padding-top:28px}.home-intro h1 {font-size:33px;line-height:1.2;letter-spacing:-.035em}.home-intro {margin-bottom:24px}
  .selector-panel {border-radius:24px}.family-tabs {padding:11px;gap:3px}.family-tabs button {font-size:13px;padding:9px 8px;min-height:44px}
  .home-selection {padding:22px}.home-selection select {font-size:15px}.home-selection h2 {font-size:18px}
  .main {padding-top:24px;padding-bottom:100px}.page-head h1 {font-size:25px}.page-actions {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px}.page-actions .button {min-height:44px;padding:10px 14px;justify-content:center}.page-actions .button .icon {display:none}
  .selected-cable,.receipt,.material-panel,.below-calculation .panel {border-radius:22px}.selected-diagram {border-radius:12px}
  .receipt {padding:23px}.receipt #main-total {font-size:38px}.receipt-calculation strong {font-size:22px}
  .receipt .length-control input,.materials tbody input {font-size:16px;min-height:44px}
  .materials tbody td:nth-child(5) {font-size:20px}.materials tbody tr {background:var(--surface)}
  .materials tbody .price-input input {width:90px;max-width:calc(100% - 32px);flex:1;min-width:0}.materials tbody input.quantity {width:53px}
  .materials .price-heading select {min-height:44px;font-size:16px}.reference-controls input,.home-selection select,.cable-switch select,.header-actions .language {font-size:16px}
  .reference-version {padding:0 2px;gap:9px}.reference-version .text-link {min-height:36px;padding:5px 12px}
  .reference-controls .segments button {font-size:12px;min-height:44px}
  .mobile-total {left:14px;right:14px;bottom:calc(91px + env(safe-area-inset-bottom,0px));padding:10px 16px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none;gap:10px}
  .mobile-total strong {font-size:19px}.mobile-total .button {font-size:13px;min-height:44px;padding:10px 15px}
  .site-footer,.home-page .site-footer {padding-bottom:calc(106px + env(safe-area-inset-bottom,0px))}
  body:has(.mobile-total) .site-footer {padding-bottom:calc(180px + env(safe-area-inset-bottom,0px))}
  #toast {bottom:calc(170px + env(safe-area-inset-bottom,0px));border-radius:19px;text-align:center}
  .reference-update {bottom:calc(168px + env(safe-area-inset-bottom,0px));border-radius:22px}
  dialog {width:calc(100vw - 24px);max-height:calc(100dvh - 48px);border-radius:26px}
  .dialog-head {padding:20px 20px 10px}.dialog-body {padding:6px 20px 22px}.dialog-head h2 {font-size:18px;line-height:1.5}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .site-header,dialog,.reference-update,.site-header nav,.site-header::before {background:var(--surface)}
}
@media(prefers-reduced-transparency:reduce) {
  .site-header,.site-header::before,.site-header nav,dialog,.reference-update {background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
  dialog::backdrop {backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-contrast:more) {
  :root {--muted:#424247;--line:rgba(29,29,31,.48);--line-strong:rgba(29,29,31,.6);--glass-line:rgba(29,29,31,.6)}
  .site-header,.site-header::before,.site-header nav,dialog,.reference-update {background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
  .button:not(.primary),.materials input,.materials .price-input input {border-color:var(--line-strong)}
}
@media(prefers-reduced-motion:reduce) {
  button,.button,a,input,select {transition:none!important}
  .button:active,.family-tabs button:active,.site-header nav button:active {transform:none}
}