.tk{--c:#21706e}.tk-shell{background:var(--surface,#fff);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 30px 80px #0b1f2e24}.tk-top{color:#fff;background:#0e2a3f;justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}.tk-brand{align-items:center;gap:.75rem;display:flex}.tk-brand img{background:#fff;border-radius:9px;padding:3px}.tk-name{font-weight:700;font-family:var(--display,inherit);margin:0}.tk-sub{font:500 .72rem var(--mono);color:#a5b3c0;margin:0}.tk-tabs{border-bottom:1px solid var(--line);background:var(--bg-soft,#f4f6f8);top:var(--header-h,64px);z-index:5;scrollbar-width:none;gap:.75rem;padding:.75rem;display:flex;position:sticky;overflow-x:auto}.tk-grp{background:color-mix(in srgb, var(--ink) 4%, transparent);border-radius:16px;flex:1 0 auto;gap:.3rem;padding:.35rem;display:grid}.tk-gl{font:600 .66rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);white-space:nowrap;padding-left:.4rem}.tk-gtabs{grid-auto-columns:minmax(72px,1fr);grid-auto-flow:column;gap:.25rem;display:grid}.tk-tabs a{color:var(--ink-2);border-radius:14px;justify-items:center;gap:.3rem;min-height:44px;padding:.5rem .25rem;text-decoration:none;display:grid}.tk-ic{background:color-mix(in srgb, var(--c) 14%, transparent);width:44px;height:44px;color:var(--c);border-radius:12px;place-items:center;transition:transform .15s;display:grid}.tk-ic svg{width:24px;height:24px}.tk-lbl{font:600 .74rem var(--mono)}.tk-tabs a[aria-selected=true]{background:var(--surface,#fff);color:var(--ink);box-shadow:0 2px 10px #00000014}.tk-tabs a[aria-selected=true] .tk-ic{background:var(--c);color:#fff;transform:scale(1.05)}.tk-body{padding:1.25rem}@media (width>=760px){.tk-body{padding:2rem}}.tk-head h2{margin:0 0 .4rem;font-size:1.6rem}.tk-head p{max-width:70ch;margin:0 0 1.5rem}.tk-grid{gap:1.25rem;display:grid}@media (width>=900px){.tk-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}.tk-out{top:calc(var(--header-h,64px) + 120px);position:sticky}}.tk-in{border-radius:20px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.9rem;padding:1.25rem;display:grid}.tk-in>.seg,.tk-in>.rows,.tk-in>.tk-actions{grid-column:1/-1}.fld label{color:var(--ink-2);margin-bottom:.35rem;font-size:.85rem;font-weight:600;display:block}.fld .hint{color:var(--ink-3);margin-top:.3rem;font-size:.78rem;display:block}.u{position:relative}.u input,.tk select,.rows input,.rows select{width:100%;min-height:48px;font:inherit;background:var(--surface,#fff);color:var(--ink);border:1px solid #8796a5;border-radius:12px;padding:.6rem .8rem;font-size:1.05rem}.u[data-u=\$] input{padding-left:1.6rem}.u[data-u]:not([data-u=""]):not([data-u=\$]) input{padding-right:3rem}.u[data-u=\$]:before{content:"$";color:var(--ink-3);font-family:var(--mono);position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}.u[data-u]:not([data-u=""]):not([data-u=\$]):after{content:attr(data-u);color:var(--ink-3);font:.85rem var(--mono);position:absolute;top:50%;right:.8rem;transform:translateY(-50%)}.tk input:focus,.tk select:focus{outline:2px solid var(--c);outline-offset:1px}.seg{background:var(--bg-soft,#f4f6f8);border-radius:14px;flex-wrap:wrap;gap:.4rem;padding:.3rem;display:flex}.seg label{text-align:center;cursor:pointer;border-radius:10px;flex:1;min-width:120px;padding:.65rem .5rem;font-size:.9rem;font-weight:600}.seg input{opacity:0;position:absolute}.seg label:has(input:checked){background:var(--surface,#fff);color:var(--c);box-shadow:0 1px 6px #0000001a}.seg label:has(input:focus-visible){outline:2px solid var(--c)}.rows-h{margin:0 0 .5rem;font-weight:700}.rows .row{grid-template-columns:1.3fr 1fr .8fr .8fr .6fr 44px;align-items:center;gap:.4rem;margin-bottom:.5rem;display:grid}.rows[data-rows=turtle] .row{grid-template-columns:2fr 1fr 44px}@media (width<=600px){.rows .row{border:1px solid var(--line);border-radius:12px;grid-template-columns:1fr 1fr;padding:.6rem}.rows[data-rows=turtle] .row{grid-template-columns:1fr 1fr}}.rows .del{min-height:44px;color:var(--ink-3);cursor:pointer;background:0 0;border:0;font-size:1.3rem}.tk-actions{justify-content:flex-end;display:flex}.res{border-top:6px solid var(--c);border-radius:20px;padding:1.25rem}.res .big{font:700 clamp(2rem, 6vw, 2.8rem)/1.05 var(--display,inherit);color:var(--ink);margin:.2rem 0 .3rem}.res .cap{font:600 .74rem var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:0}.res .kv{border-top:1px solid var(--line);grid-template-columns:1fr auto;gap:.45rem 1rem;margin-top:1rem;padding-top:1rem;font-size:.95rem;display:grid}.res .kv b{font-family:var(--mono);text-align:right}.res .warn{color:#8a1f11;background:#fdecea;border-radius:12px;margin-top:1rem;padding:.75rem 1rem;font-weight:600}.res .ok{color:#1e5b3a;background:#e6f4ec;border-radius:12px;margin-top:1rem;padding:.75rem 1rem;font-weight:600}.res table{border-collapse:collapse;width:100%;margin-top:1rem;font-size:.9rem}.res th,.res td{text-align:left;border-bottom:1px solid var(--line);padding:.45rem .3rem}.res td.n{text-align:right;font-family:var(--mono)}.disc{color:var(--ink-2);background:var(--bg-soft,#f4f6f8);border-radius:12px;margin:.9rem 0 0;padding:.75rem 1rem;font-size:.84rem}.tk-share{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}.tk-app{color:var(--ink);border-radius:16px;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;padding:1rem 1.25rem;font-size:.92rem;text-decoration:none;display:flex}.tk-f{margin-top:1.5rem}.tk-f summary{cursor:pointer;align-items:center;min-height:44px;font-weight:600;display:flex}.tk-f ul{gap:.4rem;padding-left:1.1rem;font-size:.82rem;display:grid}.tk-note{max-width:85ch;margin-top:1.25rem;font-size:.84rem}@media (width<=760px){.tk-shell{margin-inline:calc(-1 * var(--gutter,20px));border-inline:0;border-radius:0}.tk-gtabs{grid-auto-columns:72px}}@media print{header.gh,footer,.no-print,.tk-tabs,.tk-share,.tk-app,.tk-actions,.tk-top,.seg,.tk-page-extra{display:none!important}.tk-shell{box-shadow:none;border:0}.tk-panel[hidden]{display:none!important}.tk-grid{grid-template-columns:1fr 1fr}.tk-f{display:block}.tk-f ul{display:grid}}
/* Retrostack dark skin for the Dealer Toolkit, the margin-leak calculator and the product hubs. */
.tk { --surface: var(--surf); --bg-soft: #0C1118; --ink: var(--text); --ink-2: #C9D5E0; --ink-3: var(--muted); --header-h: var(--top); --gutter: 16px; }
.tk-shell { box-shadow: 0 30px 90px -30px rgba(0,229,255,.25); border-color: var(--line-2); }
.tk-top { background: linear-gradient(90deg, #0A1420, #0E2A3F); border-bottom: 1px solid var(--line-2); }
.tk-brand img { background: none; padding: 0; }
.tk-name { font: 800 1.3rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.tk-tabs a[aria-selected=true] { background: var(--surf-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 8px 24px -10px var(--c); }
.tk-tabs a[aria-selected=true] .tk-ic { color: #04060B; }
.tk-head h2 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.tk .card { background: var(--surf-2); border: 1px solid var(--line); }
.tk .fld label, .tk .rows label { display: block; font-size: .86rem; font-weight: 600; color: var(--ink-2); margin-bottom: .35rem; }
.tk .hint { color: var(--muted); }
.tk input, .tk select, .tk .input { width: 100%; min-height: 46px; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line-2); background: #070A10; color: var(--text); font: 500 1rem var(--mono); }
.tk input:focus, .tk select:focus { border-color: var(--c); }
.tk .seg label { color: var(--ink-2); }
.tk .seg label:has(input:checked) { background: var(--surf); color: var(--c); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent); }
.tk .res { background: linear-gradient(170deg, color-mix(in srgb, var(--c) 10%, var(--surf-2)), var(--surf-2) 60%); }
.tk .res .big { font-family: var(--display); color: var(--c); }
.tk .res .warn { color: #FFD3DA; background: rgba(255,77,106,.14); border: 1px solid rgba(255,77,106,.45); }
.tk .res .ok { color: #C9F7DF; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.4); }
.tk .disc { background: #0C1118; color: var(--ink-2); }
.tk .btn-sm { padding: .6rem .9rem; font-size: .9rem; }
.tk .btn-primary { background: var(--c); color: #04060B; }
.tk .mono { font-family: var(--mono); }
.tk-app { background: var(--surf-2); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); }
.tk-app strong { color: var(--c); white-space: nowrap; }
.tk-f summary { color: var(--ink); }
.tk-f ul { color: var(--ink-2); }
.tk-note { color: var(--muted); }

/* Tools hub strip, shared by the three tool pages */
.toolstrip { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 28px; }
.toolstrip a { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; text-decoration: none; color: var(--text); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, var(--surf)), var(--surf) 65%); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); transition: transform .2s, border-color .2s; }
.toolstrip a:hover { transform: translateY(-3px); border-color: var(--c); }
.toolstrip a[aria-current] { box-shadow: 0 0 0 2px var(--c); }
.toolstrip small { font: 500 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.toolstrip b { font: 800 1.35rem/1 var(--display); text-transform: uppercase; }
.toolstrip span { color: var(--muted); font-size: .92rem; }

/* Margin-leak calculator */
.leak { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .leak { grid-template-columns: minmax(0, 1.3fr) minmax(320px, .9fr); } .leak .total { position: sticky; top: calc(var(--top) + 20px); } }
.leak .inputs { display: grid; gap: 14px; }
.leak fieldset { margin: 0; padding: 20px; border-radius: 18px; background: var(--surf); border: 1px solid var(--line); }
.leak .g-head { display: flex; gap: 10px; align-items: baseline; font: 800 1.35rem/1 var(--display); text-transform: uppercase; }
.leak .g-head span { font: 500 .8rem var(--mono); color: var(--stop); }
.leak .g-note { color: var(--muted); font-size: .92rem; margin: 6px 0 14px; }
.leak .g-fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.leak label { display: block; font-size: .86rem; font-weight: 600; color: #C9D5E0; margin-bottom: 6px; }
.leak .unit { position: relative; }
.leak .unit::before, .leak .unit::after { position: absolute; top: 50%; transform: translateY(-50%); font: 500 .9rem var(--mono); color: var(--muted); pointer-events: none; }
.leak .unit.pre::before { content: "$"; left: 12px; }
.leak .unit.post::after { content: "%"; right: 12px; }
.leak input { width: 100%; min-height: 46px; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line-2); background: #070A10; color: var(--text); font: 500 1rem var(--mono); }
.leak .unit.pre input { padding-left: 26px; }
.leak input:focus { outline: 2px solid var(--stop); border-color: var(--stop); }
.leak .g-sub { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.leak .g-sub strong { font-family: var(--mono); color: var(--text); }
.leak .bar { display: flex; gap: 8px; }
.leak .total { padding: 24px; border-radius: 20px; background: linear-gradient(170deg, rgba(255,77,106,.16), var(--surf) 60%); border: 1px solid rgba(255,77,106,.45); }
.leak .big { font: 900 clamp(3rem, 9vw, 4.6rem)/1 var(--display); color: var(--stop); margin: 10px 0; text-shadow: 0 0 30px rgba(255,77,106,.35); }
.leak .breakdown { display: grid; gap: 8px; margin: 18px 0; padding-block: 12px; border-block: 1px solid var(--line); }
.leak .breakdown div { display: flex; justify-content: space-between; font-size: .92rem; }
.leak .breakdown strong { font-family: var(--mono); }
.formulas { display: grid; gap: 8px; padding-left: 1.1rem; font: 500 .86rem/1.5 var(--mono); color: #C9D5E0; }

/* Product hubs */
.hubgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.hubgrid a { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 16px; text-decoration: none; color: var(--text); background: var(--surf); border: 1px solid var(--line); transition: transform .2s, border-color .2s, box-shadow .2s; }
.hubgrid a:hover { transform: translateY(-3px); border-color: var(--sky); box-shadow: 0 14px 40px -18px var(--sky); }
.hubgrid .top { display: flex; justify-content: space-between; font: 500 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.hubgrid .top em { font-style: normal; color: var(--art); }
.hubgrid b { font: 800 1.6rem/1 var(--display); text-transform: uppercase; }
.hubgrid p { color: var(--muted); font-size: .92rem; }
.hubgrid .go { color: var(--sky); font-weight: 600; }
.fineprint { margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: var(--surf); border: 1px solid var(--line); color: var(--muted); font-size: .86rem; }
.fineprint b { color: var(--text); }
@media print { .topbar, .foot, .toolstrip, .no-print { display: none !important; } body::before { display: none; } }