:root { color-scheme: dark; --bg:#080a10; --surface:#050609; --surface-raised:#10141c; --stroke:#34383d; --stroke-soft:#262b33; --text:#f9f9fb; --muted:#a5a5ab; --dim:#818792; --accent:#ff873e; --white:#f9f9fb; }
* {box-sizing:border-box}
html {font-size:16px; scroll-behavior:smooth}
body {margin:0; min-width:310px; background:radial-gradient(ellipse 80% 45% at 50% -25%,#263a56 0%,transparent 100%),var(--bg); color:var(--text); font-family:'Kanit',Tahoma,system-ui,sans-serif; font-weight:400; line-height:1.5}
button,input {font:inherit}
button {cursor:pointer}
button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible {outline:2px solid var(--accent); outline-offset:4px}
.site-shell {max-width:1000px; margin:0 auto; padding:22px clamp(16px,3vw,36px) 24px}
.header,.brand,.free-label,.pricing-heading,.markup-heading,.result-top,.footer,.under-actions {display:flex; align-items:center; justify-content:space-between; gap:14px}
.header {padding:0 2px}
.brand {justify-content:flex-start; color:inherit; text-decoration:none; gap:12px}
.brand-mark {width:45px;height:45px;border-radius:14px;background:linear-gradient(145deg,#ff9c50,#ff6933);display:grid;place-items:center;color:#fff;font-weight:700;font-size:17px;letter-spacing:-.04em;box-shadow:0 5px 16px #fb773623}
.brand-name {display:flex;flex-direction:column;line-height:1.2;letter-spacing:.02em}
.brand-name strong{font-size:17px;letter-spacing:.04em}
.brand-name small{font-size:11px;color:var(--dim);margin-top:4px}
.free-label {justify-content:flex-start;border:1px solid #285947;border-radius:99px;padding:6px 12px;color:#98d6ac;font-size:12px;white-space:nowrap}
.free-dot{width:7px;height:7px;background:#67c890;border-radius:50%;box-shadow:0 0 10px #67c89088}
.page-heading{margin:37px auto 24px;text-align:center}
.eyebrow{font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.15em;margin:0 0 6px}
h1 {font-size:clamp(27px,3.9vw,38px);line-height:1.25;margin:0;font-weight:600}
.page-heading>p:last-child{color:var(--muted);font-size:14px;margin:10px 0 0}
.calculator-card {max-width:860px;margin:0 auto;border:1px solid var(--stroke);border-radius:31px;background:var(--surface);padding:clamp(22px,4vw,44px);box-shadow:0 26px 80px #0007}
.group-title {font-weight:500;font-size:clamp(18px,2.6vw,23px);color:#c2c2c6;margin:0 0 14px}
.materials {border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.material-choice{cursor:pointer;display:flex;gap:10px;align-items:center;font-size:clamp(18px,3vw,25px);white-space:nowrap}
.material-choice input{appearance:none;-webkit-appearance:none;width:28px;height:28px;min-width:28px;border:2px solid #49494d;border-radius:50%;background:transparent;display:grid;place-content:center;margin:0;cursor:pointer;transition:border-color .15s ease}
.material-choice input::before{content:"";width:12px;height:12px;background:#08090c;border-radius:50%;transform:scale(0);transition:transform .13s ease}
.material-choice input:checked{border-color:var(--white);background:var(--white)}
.material-choice input:checked::before{transform:scale(1)}
.two-cols {display:grid;grid-template-columns:1fr 1fr;gap:20px}
.main-fields{margin-top:27px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field-label {font-size:17px;color:#bcbcc1}
.field input{height:57px;width:100%;border-radius:16px;background:#050609;color:#f5f5f5;padding:0 16px;border:1.5px solid #515158;outline:0;font-size:24px;font-weight:400;transition:border-color .2s ease}
.field input:focus{border-color:#f0a371;box-shadow:0 0 0 3px #ff873e25}
.field input::-webkit-inner-spin-button,.field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.field input[type=number]{-moz-appearance:textfield;appearance:textfield}
.field-help{font-size:12px;color:var(--dim);margin-top:-4px}
.divider{height:1px;background:#24262b;margin:28px 0}
.pricing-heading{align-items:flex-start}
.pricing-heading .group-title{margin-bottom:4px}
.muted-caption {color:var(--dim);font-size:13px;margin:0 0 15px;line-height:1.5}
.material-tag{border:1px solid #444957;color:#e4c0a4;background:#15191e;padding:4px 11px;border-radius:99px;font-size:12px;font-weight:600}
.input-with-unit{position:relative}
.input-with-unit input{padding-right:66px}
.input-with-unit>span{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--dim);pointer-events:none}
.cost-strip{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.cost-strip>div{padding:15px 18px;background:#12161c;border:1px solid #292e35;border-radius:16px;display:flex;flex-direction:column;gap:3px}
.cost-strip small{color:#a4aab3;font-size:12px}
.cost-strip strong{font-size:clamp(16px,2.4vw,21px);font-weight:500}
.advanced-settings{border:1px solid #30333a;border-radius:16px;margin-top:18px;overflow:hidden}
.advanced-settings summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;padding:12px 16px;font-size:15px;color:#ddd;user-select:none}
.advanced-settings summary::-webkit-details-marker{display:none}
.advanced-settings summary:after{content:'⌄';font-size:20px;margin-left:auto;transition:transform .2s}
.advanced-settings[open] summary:after{transform:rotate(180deg)}
.settings-icon{font-size:17px;color:var(--accent)}
.summary-more{color:var(--dim);font-size:12px;margin-left:1px}
.advanced-body{padding:0 16px 18px}
.advanced-body .field-label{font-size:14px}
.advanced-body .field input{font-size:20px;height:49px}
.advanced-body .muted-caption{margin:0 0 14px}
.notice{font-size:12px;color:#8999a7;margin:12px 0 0}
.markup-heading{font-size:19px;color:#bcbcc1;margin-bottom:17px}
.markup-heading output{font-size:23px;font-weight:500;color:#fff}
input[type=range] {display:block;cursor:pointer;appearance:none;-webkit-appearance:none;width:100%;height:8px;border-radius:20px;background:linear-gradient(to right,#fafafa 0%,#fafafa var(--percent,0%),#2b2c31 var(--percent,0%),#2b2c31 100%);outline:none;margin:12px 0 0}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:30px;height:30px;border:0;border-radius:100%;background:#fff;box-shadow:0 0 0 2px #eee1}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border:0;border-radius:100%;background:#fff}
.range-labels{display:flex;justify-content:space-between;color:#777a82;font-size:12px;margin-top:16px}
.divider-results{margin-top:32px;margin-bottom:26px}
.result-caption{font-size:17px;color:#b2b2b7;margin:0 0 7px}
.result-number{font-size:clamp(38px,7vw,66px);line-height:1.14;letter-spacing:-.025em;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.result-currency{font-size:.72em}
.copy-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:145px;padding:12px 18px;border:0;background:#f5f5f5;color:#111;border-radius:99px;font-size:18px;font-weight:500;white-space:nowrap;transition:transform .16s ease,background .16s ease}
.copy-button:hover{transform:translateY(-1px);background:#e4e4e4}
.result-breakdown{margin-top:23px;padding:16px 0 6px;border-top:1px dashed #2d3036;display:grid;gap:8px}
.result-breakdown>div{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#aaa;font-size:13px}
.result-breakdown strong{font-size:14px;color:#e6e7e8;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
.disclaimer{color:#93949a;font-size:13px;margin:15px 0 0;line-height:1.7}
.under-actions{max-width:860px;margin:17px auto 0;color:#88929e;font-size:12px}
.secondary-button{background:#121722;color:#c9ced5;border:1px solid #343b47;border-radius:10px;padding:8px 14px;font-size:13px}
.secondary-button:hover{background:#1b2331}
.demo-note{max-width:860px;margin:12px auto 0;font-size:12px;line-height:1.6;color:#737985}
.footer{margin-top:45px;padding:22px 4px 0;border-top:1px solid #2b303a;color:#79818b;font-size:12px}
.toast{position:fixed;z-index:10;bottom:24px;left:50%;transform:translate(-50%,12px);padding:11px 20px;border-radius:12px;background:#f5f5f5;color:#161616;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 12px 30px #0008;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:650px){.site-shell{padding:16px 13px 24px}.page-heading{margin-top:28px}.calculator-card{border-radius:25px;padding:24px 18px}.free-label{font-size:10px;padding:5px 9px}.brand-name strong{font-size:14px}.brand-name small{font-size:10px}.brand-mark{width:39px;height:39px}.materials{gap:5px}.material-choice{font-size:17px;gap:7px}.material-choice input{width:23px;height:23px;min-width:23px}.material-choice input::before{width:10px;height:10px}.field-label{font-size:14px}.field input{font-size:20px;height:54px;padding:0 12px}.two-cols{gap:12px}.result-top{align-items:flex-end;gap:8px}.copy-button{min-width:108px;font-size:15px;padding:11px 12px;gap:6px}.copy-button svg{width:17px;height:17px}.result-caption{font-size:13px}.result-number{font-size:clamp(32px,9vw,51px)}.cost-strip>div{padding:12px}.footer{align-items:flex-start;flex-wrap:wrap}.under-actions{align-items:flex-start;gap:12px}}
@media(max-width:375px){.two-cols.spool-fields{grid-template-columns:1fr}.material-choice{font-size:15px;gap:5px}.materials{gap:3px}.material-choice input{width:21px;min-width:21px;height:21px}.result-number{font-size:34px}.copy-button{min-width:91px;padding:10px 9px;font-size:13px}.calculator-card{padding:20px 14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* V2: hours and minutes directly from slicer. */
.time-duo {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.time-part {display:flex;flex-direction:column;gap:4px;min-width:0}
.time-part input {min-width:0}
.time-part small {font-size:12px;color:var(--dim);padding-left:5px}
.breakdown-detail {color:var(--dim);font-size:12px}
.footer a {color:#b6bac4;text-decoration:none;border-bottom:1px solid #59616e;transition:color .15s ease}
.footer a:hover,.footer a:focus-visible {color:#ffad76;border-bottom-color:#ffad76}
@media(max-width:650px){.time-duo{gap:8px}.time-part input{padding:0 9px}.result-breakdown>div{align-items:flex-start}.breakdown-detail{display:block}}

/* V3: settings are always open; modes are explicit and responsive. */
.settings-heading{display:flex;align-items:center;gap:9px;padding:16px 17px 5px;font-size:17px;font-weight:500;margin:0;color:#f3f3f4}
.advanced-settings .advanced-body{padding-top:9px}
.mode-select{padding:0;margin:0 0 17px;border:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mode-legend{font-size:13px;color:#aeb2ba;margin-bottom:8px}
.mode-option{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid #373c46;border-radius:13px;cursor:pointer;min-width:0;background:#0c0e13}
.mode-option:has(input:checked){background:#21150e;border-color:#eb8d4e}
.mode-option input{width:18px;height:18px;accent-color:#ff873e;flex-shrink:0;cursor:pointer}
.mode-option span{display:flex;flex-direction:column;min-width:0}
.mode-option strong{font-size:14px;font-weight:500;color:#f7f7f8}
.mode-option small{font-size:11px;color:#a6acb5;line-height:1.35}
.mode-fields[hidden],#profitRow[hidden]{display:none!important}
.mode-fields .muted-caption{margin-bottom:11px}
@media(max-width:460px){.mode-select{grid-template-columns:1fr}.mode-option{padding:9px 12px}.mode-option span{flex-direction:row;flex-wrap:wrap;gap:2px 9px}.mode-option small{align-self:center}}