/* JOHN Workshop Theme · V17.9.55
   Screenshot-inspired game UI: industrial / garage dashboard, responsive for desktop + mobile.
   Activated only with html[data-hn-ui-theme="workshop"]. */
html[data-hn-ui-theme="workshop"]{
  --ink:#eee9d9;--muted:#a8a38f;--panel:rgba(12,14,13,.96);--panel2:rgba(22,24,21,.97);
  --accent:#b99b3d;--accent2:#d5b84f;--good:#77a74c;--bad:#c34a37;--cyan:#97aa86;
  --ws-line:rgba(220,211,175,.16);--ws-line2:rgba(220,211,175,.08);--ws-bg:#090b0a;
  color-scheme:dark;
}
html[data-hn-ui-theme="workshop"] body,
html[data-hn-ui-theme="workshop"] #app{background:#090b0a;color:#eee9d9}
html[data-hn-ui-theme="workshop"] #app:before{content:"";position:absolute;inset:0;z-index:-4;pointer-events:none;background:
 radial-gradient(circle at 72% 18%,rgba(142,112,40,.09),transparent 28%),
 linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px);background-size:auto,44px 44px,44px 44px}
html[data-hn-ui-theme="workshop"] .bg{filter:saturate(.62) brightness(.42) contrast(1.08)}
html[data-hn-ui-theme="workshop"] .bg:after{background:linear-gradient(180deg,rgba(5,7,6,.48),rgba(6,7,6,.72) 62%,rgba(4,5,5,.94))}
html[data-hn-ui-theme="workshop"] .scan{opacity:.045;background:repeating-linear-gradient(0deg,rgba(255,240,190,.05),rgba(255,240,190,.05) 1px,transparent 1px,transparent 5px)}

/* HUD like a game dashboard */
html[data-hn-ui-theme="workshop"] .topbar{top:max(6px,env(safe-area-inset-top));left:8px;right:8px;gap:4px;min-height:62px;padding:4px;background:rgba(7,9,8,.92);border:1px solid var(--ws-line);box-shadow:0 10px 30px rgba(0,0,0,.42)}
html[data-hn-ui-theme="workshop"] .brand{align-self:stretch;display:flex;align-items:center;padding:0 14px;min-width:220px;color:#ded7bd;font-size:15px;letter-spacing:.065em;text-transform:uppercase;border-right:1px solid var(--ws-line);text-shadow:none;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
html[data-hn-ui-theme="workshop"] .topAvatarDock{height:50px;padding:3px 8px;border-left:1px solid var(--ws-line);border-right:1px solid var(--ws-line)}
html[data-hn-ui-theme="workshop"] .topAvatar{border-radius:2px!important;border-color:rgba(206,190,133,.28)!important;background:#151713!important}
html[data-hn-ui-theme="workshop"] .v12Hud{gap:0;flex:1;max-width:none;overflow-x:auto;scrollbar-width:none}
html[data-hn-ui-theme="workshop"] .v12Hud::-webkit-scrollbar{display:none}
html[data-hn-ui-theme="workshop"] .hudChip{align-self:stretch;min-width:115px;border:0;border-right:1px solid var(--ws-line);border-radius:0;background:rgba(255,255,255,.018);box-shadow:none;padding:7px 12px}
html[data-hn-ui-theme="workshop"] .hudChip span{filter:sepia(.3);opacity:.9}
html[data-hn-ui-theme="workshop"] .hudChip b{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#e5dec8;font-size:15px;font-weight:800}
html[data-hn-ui-theme="workshop"] .hudChip small{color:#8e8a79;font-size:8px;letter-spacing:.11em}
html[data-hn-ui-theme="workshop"] .xpChip{min-width:160px}
html[data-hn-ui-theme="workshop"] .xpMini{background:#1b1e1a;border:1px solid rgba(255,255,255,.05)}
html[data-hn-ui-theme="workshop"] .xpMini i{background:linear-gradient(90deg,#6f853d,#b99b3d)}
html[data-hn-ui-theme="workshop"] .iconbtn{border-radius:2px;width:46px;height:50px;background:#111411;border-color:var(--ws-line);color:#cfc7a9}

/* Panels / dialogs */
html[data-hn-ui-theme="workshop"] .screen{padding:78px 12px 112px}
html[data-hn-ui-theme="workshop"] .card,
html[data-hn-ui-theme="workshop"] .v12ModalCard,
html[data-hn-ui-theme="workshop"] .overlayCard,
html[data-hn-ui-theme="workshop"] .minibox{border-radius:3px!important;border:1px solid var(--ws-line)!important;background:
 linear-gradient(180deg,rgba(28,30,26,.98),rgba(10,12,11,.98))!important;box-shadow:0 24px 70px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.025)!important;backdrop-filter:blur(4px)}
html[data-hn-ui-theme="workshop"] .card{width:min(1180px,97vw);max-height:calc(100dvh - 196px)}
html[data-hn-ui-theme="workshop"] .v12ModalCard{width:min(1180px,97vw);max-height:calc(100dvh - 116px);padding:16px}
html[data-hn-ui-theme="workshop"] .v12Modal{background:rgba(3,5,4,.88);backdrop-filter:blur(4px)}
html[data-hn-ui-theme="workshop"] .v12ModalHead{padding:0 0 10px;border-bottom:1px solid var(--ws-line);margin-bottom:10px}
html[data-hn-ui-theme="workshop"] .v12ModalHead h2{font-size:22px!important;letter-spacing:.04em;text-transform:uppercase;color:#ded6b9}
html[data-hn-ui-theme="workshop"] h1{font-size:clamp(30px,5vw,60px);letter-spacing:.015em;color:#ddd4b9}
html[data-hn-ui-theme="workshop"] h2{font-size:clamp(22px,3.2vw,34px);color:#ded7be}
html[data-hn-ui-theme="workshop"] h3{color:#d8cfb2}
html[data-hn-ui-theme="workshop"] .sub,
html[data-hn-ui-theme="workshop"] .storyline{font-size:clamp(15px,1.4vw,18px)!important;line-height:1.52!important;color:#b6b19e!important}
html[data-hn-ui-theme="workshop"] .kicker{color:#b69a40;font-size:10px;letter-spacing:.16em}
html[data-hn-ui-theme="workshop"] .infoCard,
html[data-hn-ui-theme="workshop"] .v12Panel,
html[data-hn-ui-theme="workshop"] .stat{border-radius:2px!important;background:rgba(255,255,255,.025)!important;border:1px solid var(--ws-line2)!important;color:#d9d2bd!important;box-shadow:none!important}
html[data-hn-ui-theme="workshop"] .infoCard span,
html[data-hn-ui-theme="workshop"] .infoCard small{color:#a29d8a!important}

/* Buttons */
html[data-hn-ui-theme="workshop"] button,
html[data-hn-ui-theme="workshop"] .primary,
html[data-hn-ui-theme="workshop"] .secondary,
html[data-hn-ui-theme="workshop"] .miniBtn,
html[data-hn-ui-theme="workshop"] .choice{border-radius:2px!important;text-transform:none;box-shadow:none;transition:background .13s,border-color .13s,filter .1s}
html[data-hn-ui-theme="workshop"] .primary{background:linear-gradient(180deg,#65763b,#435026)!important;color:#f2ecd9!important;border:1px solid #7d8f49!important}
html[data-hn-ui-theme="workshop"] .secondary,
html[data-hn-ui-theme="workshop"] .miniBtn,
html[data-hn-ui-theme="workshop"] .choice,
html[data-hn-ui-theme="workshop"] button.infoCard{background:linear-gradient(180deg,#20231f,#131613)!important;color:#d8d1bc!important;border:1px solid var(--ws-line)!important}
html[data-hn-ui-theme="workshop"] button:hover{filter:brightness(1.13)}
html[data-hn-ui-theme="workshop"] button:active{transform:none!important;filter:brightness(1.18);box-shadow:inset 0 0 0 1px rgba(220,211,175,.16)!important}
html[data-hn-ui-theme="workshop"] button:disabled{filter:grayscale(.8);opacity:.43}
html[data-hn-ui-theme="workshop"] .xbtn{border-radius:2px;background:#171a17;border-color:var(--ws-line);color:#d5ccb0}

/* Workshop home: standalone game dashboard, original home remains as action source. */
#hnWorkshopHome{display:none}
html[data-hn-ui-theme="workshop"] #start .card{width:min(1500px,98vw);max-height:calc(100dvh - 184px);padding:10px;overflow:auto;background:linear-gradient(180deg,rgba(20,22,19,.98),rgba(7,9,8,.985))!important}
html[data-hn-ui-theme="workshop"] #start .card> :not(#hnWorkshopHome):not(#menuAdSlot):not(#v148LiveOpsBar){display:none!important}
html[data-hn-ui-theme="workshop"] #menuAdSlot{display:none!important}
html[data-hn-ui-theme="workshop"] #start #hnWorkshopHome{display:grid;gap:8px}
.hnWsHomeTop{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;gap:8px;min-height:430px}
.hnWsPanel{border:1px solid var(--ws-line);background:linear-gradient(180deg,rgba(26,28,24,.96),rgba(12,14,12,.97));padding:12px;min-width:0}
.hnWsPanelTitle{font-size:10px;letter-spacing:.14em;color:#918b77;text-transform:uppercase;margin-bottom:8px;border-bottom:1px solid var(--ws-line2);padding-bottom:7px}
.hnWsPlayer{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--ws-line)}
.hnWsPlayer img{width:64px;height:64px;object-fit:cover;border:1px solid var(--ws-line);filter:saturate(.7) contrast(1.05)}
.hnWsPlayer b{display:block;font-size:19px;color:#e3dcc5}.hnWsPlayer small{display:block;color:#8f8a78;margin-top:3px}
.hnWsObjective{margin-top:12px}.hnWsObjective b{display:block;font-size:17px;color:#d8cfb1;line-height:1.2}.hnWsObjective p{margin:6px 0 0;font-size:12px;color:#a59f8b;line-height:1.45}
.hnWsProgress{height:8px;background:#0d100d;border:1px solid var(--ws-line2);margin-top:10px}.hnWsProgress i{display:block;height:100%;background:linear-gradient(90deg,#758541,#bc9d3e)}
.hnWsHero{position:relative;overflow:hidden;min-height:430px;background:radial-gradient(circle at 50% 20%,rgba(178,145,57,.12),transparent 34%),linear-gradient(180deg,#1a1e1b,#0c0f0d);border:1px solid var(--ws-line);display:flex;flex-direction:column;justify-content:flex-end}
.hnWsHeroHeading{position:relative;z-index:3;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 12px;background:#0b0e0c;border-bottom:1px solid var(--ws-line2);text-align:left}.hnWsHeroHeading span{font-size:8px;letter-spacing:.14em;color:#a88d3b}.hnWsHeroHeading b{font-size:14px;color:#e0d9c2}.hnWsHeroHeading small{font-size:9px;color:#858171}.hnWsHeroSliderSlot{position:relative;flex:1;min-height:0}.hnWsHeroShade{flex:0 0 auto}
.hnWsHero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.025) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(255,255,255,.02) 50%,transparent 50.2%);background-size:82px 82px;opacity:.6}
.hnWsHero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 42%;filter:saturate(.65) contrast(1.12) brightness(.78);opacity:.88;padding:20px 20px 85px}
.hnWsHeroShade{position:relative;z-index:2;padding:18px;background:linear-gradient(0deg,rgba(4,5,4,.97),rgba(4,5,4,.18));border-top:1px solid var(--ws-line2)}
.hnWsHeroShade .eyebrow{font-size:9px;letter-spacing:.15em;color:#b49943;text-transform:uppercase}.hnWsHeroShade h2{margin:4px 0 4px;font-size:clamp(25px,3vw,42px)!important}.hnWsHeroShade p{margin:0;color:#aaa48f;font-size:13px;line-height:1.4}
.hnWsHeroActions{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(120px,.7fr);gap:7px;margin-top:12px}.hnWsHeroActions button{min-height:54px;font-weight:850}
.hnWsTelemetry{display:grid;gap:7px}.hnWsTelemetryRow{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:center;padding:9px;border:1px solid var(--ws-line2);background:rgba(255,255,255,.018)}.hnWsTelemetryRow .ico{font-size:19px;text-align:center}.hnWsTelemetryRow b{font-size:12px;color:#d0c8ae}.hnWsTelemetryRow small{display:block;color:#858171;font-size:9px;margin-top:1px}.hnWsTelemetryRow strong{font:800 13px ui-monospace,Consolas,monospace;color:#c8b569}
.hnWsQuick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.hnWsQuick button{min-height:66px;display:grid;place-items:center;gap:3px;font-weight:800}.hnWsQuick button span{font-size:22px}.hnWsQuick button small{font-size:9px;color:#8c8878}
.hnWsHomeFooter{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:9px 11px;border:1px solid var(--ws-line);background:#0b0e0c;color:#918b79;font-size:10px}.hnWsHomeFooter b{color:#c6b77e}

/* Bottom navigation */
#hnWorkshopNav{display:none;position:fixed;left:8px;right:8px;bottom:max(7px,env(safe-area-inset-bottom));z-index:99850;height:66px;background:rgba(8,10,9,.97);border:1px solid var(--ws-line);box-shadow:0 -12px 35px rgba(0,0,0,.38);grid-template-columns:repeat(5,1fr)}
html[data-hn-ui-theme="workshop"] #hnWorkshopNav{display:grid}
#hnWorkshopNav button{border:0!important;border-right:1px solid var(--ws-line2)!important;background:transparent!important;color:#9d9887!important;min-width:0;padding:5px!important;font-size:10px!important;display:grid;place-items:center;gap:2px}
#hnWorkshopNav button:last-child{border-right:0!important}#hnWorkshopNav button span{font-size:20px;color:#c6b16a}#hnWorkshopNav button.active{background:rgba(184,153,59,.07)!important;color:#e0d9c2!important}#hnWorkshopNav button small{font-size:8px;color:#777468}
html[data-hn-ui-theme="workshop"] .v12Footer{bottom:calc(77px + env(safe-area-inset-bottom))!important;opacity:.8}

/* Garage gets the screenshot-like full game screen treatment. */
html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage .v12ModalCard{width:min(1500px,99vw);max-height:calc(100dvh - 94px);background:linear-gradient(180deg,#151815,#080a09)!important}
html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage #v12ModalBody{display:grid;grid-template-columns:260px minmax(540px,1fr) 330px;grid-template-areas:"hero car damage" "stats car damage" "info log damage";gap:8px;align-items:start}
html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage .hn1780CarHero{grid-area:hero;margin:0;border-radius:2px;background:#111410;border-color:var(--ws-line);min-height:140px}
html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage .hn1780CarStage{grid-area:car;height:100%;min-height:520px;border-radius:2px;background:radial-gradient(circle at 30% 25%,rgba(183,145,58,.1),transparent 24%),linear-gradient(180deg,#1b201c 0,#0e120f 61%,#080a09 61%);border-color:var(--ws-line);display:flex;align-items:center;justify-content:center}
html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage .hn1780CarStage svg{max-height:620px;width:100%}
html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage .hn1780DamagePanel{grid-area:damage;grid-template-columns:1fr;margin:0;gap:8px}html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780DamageSummary,html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780Subsystems{border-radius:2px;background:#111410;border-color:var(--ws-line)}
html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage .hn1780CarStats{grid-area:stats;grid-template-columns:1fr;margin:0}html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780CarStats div{border-radius:2px;text-align:left;border:1px solid var(--ws-line2);background:#111410}html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780CarStats b{font-family:ui-monospace,monospace;color:#c5ae5d}
html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage #hn1780CarPartInfo{grid-area:info;margin:0;padding:10px;border:1px solid var(--ws-line2);background:#111410;color:#a9a28c}
html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage h4{grid-area:log;margin:0!important;padding:9px 10px;border:1px solid var(--ws-line2);background:#111410}
html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage .hn1780ServiceLog{grid-column:1;grid-row:auto;margin-top:0}
html[data-hn-ui-theme="workshop"] .hn1780PlateChip{border-radius:1px}
html[data-hn-ui-theme="workshop"] .hn1780Part circle{fill:rgba(34,38,32,.9);stroke:#baa053}.hn1780Part.warn circle{stroke:#d5a841}.hn1780Part.critical circle,.hn1780Part.bad circle{stroke:#c54d39}

/* Map / game content readability */
html[data-hn-ui-theme="workshop"] .v17920MapCard,
html[data-hn-ui-theme="workshop"] .v1788Card,
html[data-hn-ui-theme="workshop"] .v1783PressCard,
html[data-hn-ui-theme="workshop"] .v1785Staff{border-radius:2px!important;background:linear-gradient(180deg,#1b1e1a,#101310)!important;border-color:var(--ws-line)!important}
html[data-hn-ui-theme="workshop"] .progress>i{background:linear-gradient(90deg,#74833f,#b99b3d)}
html[data-hn-ui-theme="workshop"] #hud .hudbox{border-radius:2px;background:rgba(8,10,8,.96);border-color:var(--ws-line)}

/* Theme center + MMO-style unlock notice */
.hnThemeCenterGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hnThemeCard{position:relative;overflow:hidden;padding:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:14px}.hnThemeCard.active{border-color:rgba(211,180,76,.52);box-shadow:inset 0 0 0 1px rgba(211,180,76,.13)}.hnThemeCard.locked{opacity:.62}.hnThemePreview{height:120px;border-radius:10px;margin-bottom:10px;border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;background:#171726}.hnThemePreview.classic{background:radial-gradient(circle at 68% 18%,rgba(155,84,255,.35),transparent 26%),linear-gradient(145deg,#261b40,#090a12)}.hnThemePreview.workshop{background:linear-gradient(180deg,#20241f,#090b0a)}.hnThemePreview.workshop:before{content:"JOHN   AKKU   CASH   ORT";position:absolute;left:8px;right:8px;top:8px;height:24px;border:1px solid rgba(222,210,170,.19);color:#b7ad8b;font:700 7px ui-monospace;padding:7px;letter-spacing:.1em}.hnThemePreview.workshop:after{content:"KLAPPERKISTE     ZUSTAND 59%";position:absolute;left:8px;right:8px;bottom:8px;top:39px;border:1px solid rgba(222,210,170,.14);display:grid;place-items:center;color:#c7b56b;font:800 12px ui-monospace;background:radial-gradient(circle at 55% 45%,rgba(161,130,54,.14),transparent 28%)}.hnThemeCard h3{margin:0 0 4px}.hnThemeMeta{font-size:11px;color:#aaa;margin-bottom:9px}.hnThemeCard button{width:100%;min-height:46px}
#hnThemeUnlockStack{position:fixed;right:16px;top:max(82px,calc(env(safe-area-inset-top) + 72px));z-index:100500;display:grid;gap:9px;width:min(390px,calc(100vw - 24px));pointer-events:none}.hnThemeUnlock{pointer-events:auto;transform:translateX(30px);opacity:0;transition:transform .24s ease,opacity .24s ease;padding:12px;border:1px solid rgba(214,183,78,.5);background:linear-gradient(145deg,rgba(21,24,20,.98),rgba(8,10,9,.98));box-shadow:0 20px 55px rgba(0,0,0,.55),inset 3px 0 #b89c3c;color:#eee7cf}.hnThemeUnlock.show{transform:none;opacity:1}.hnThemeUnlock.closing{pointer-events:none}.hnThemeUnlockHead{display:flex;align-items:flex-start;gap:8px}.hnThemeUnlock .top{flex:1;font-size:9px;letter-spacing:.16em;color:#bd9f3e;font-weight:900;padding-top:5px}.hnThemeUnlock b{display:block;font-size:17px;margin:3px 0}.hnThemeUnlock p{font-size:11px;color:#aaa38c;margin:0 0 10px}.hnThemeUnlock button{min-height:40px;padding:8px 11px;border-radius:2px;color:white;border:1px solid #768746;font-weight:800;touch-action:manipulation}.hnThemeUnlock .hnThemeUnlockClose{flex:0 0 38px;width:38px;height:38px;min-height:38px;padding:0;margin:-5px -4px 0 0;border-radius:6px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);font-size:25px;line-height:1}.hnThemeUnlockActions{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);gap:8px}.hnThemeUnlock .hnThemeUnlockLater{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#ddd}.hnThemeUnlock .hnThemeUnlockActivate{background:#566533;border-color:#768746}.hnThemeUnlock button:focus-visible{outline:2px solid #d7bd64;outline-offset:2px}

@media(max-width:900px){
 html[data-hn-ui-theme="workshop"] .brand{min-width:154px;font-size:11px;padding:0 8px}.hnWsHomeTop{grid-template-columns:210px 1fr}.hnWsTelemetry{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}
 html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage #v12ModalBody{grid-template-columns:220px minmax(480px,1fr);grid-template-areas:"hero car" "stats car" "damage damage" "info info" "log log"}html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780DamagePanel{grid-template-columns:1fr 1.4fr!important}
}
@media(max-width:680px){
 html[data-hn-ui-theme="workshop"] .topbar{left:4px;right:4px;min-height:56px;padding:2px}html[data-hn-ui-theme="workshop"] .topAvatarDock{display:none!important}
 html[data-hn-ui-theme="workshop"] .brand{display:flex!important;min-width:108px;max-width:108px;font-size:9px;line-height:1.2;white-space:normal}html[data-hn-ui-theme="workshop"] .spacer{display:none}html[data-hn-ui-theme="workshop"] .stressChip{display:none!important}
 html[data-hn-ui-theme="workshop"] .hudChip{min-width:72px;padding:5px 7px}html[data-hn-ui-theme="workshop"] .hudChip small{display:block!important;font-size:7px!important}html[data-hn-ui-theme="workshop"] .hudChip b{font-size:11px!important}html[data-hn-ui-theme="workshop"] .xpChip{min-width:98px!important}
 html[data-hn-ui-theme="workshop"] .iconbtn{width:38px;height:46px;font-size:15px}html[data-hn-ui-theme="workshop"] .screen{padding:68px 6px 126px!important}
 html[data-hn-ui-theme="workshop"] #start .card{width:100%;max-height:calc(100dvh - 194px);padding:6px}.hnWsHomeTop{grid-template-columns:1fr;min-height:auto}.hnWsPlayer{grid-template-columns:54px 1fr}.hnWsPlayer img{width:54px;height:54px}
 .hnWsHero{min-height:360px;order:-1}.hnWsHeroHeading{grid-template-columns:1fr;padding:7px 9px;gap:2px}.hnWsHeroHeading span{font-size:7px}.hnWsHeroHeading b{font-size:12px}.hnWsHeroHeading small{display:none}.hnWsHero img{padding:8px 8px 88px}.hnWsHeroShade{padding:10px}.hnWsHeroActions{grid-template-columns:1fr}.hnWsTelemetry{grid-template-columns:1fr 1fr}.hnWsQuick{grid-template-columns:1fr 1fr}.hnWsHomeFooter{grid-template-columns:1fr}
 html[data-hn-ui-theme="workshop"] #hnWorkshopNav{left:3px;right:3px;height:64px;grid-template-columns:repeat(5,minmax(0,1fr));overflow-x:hidden}html[data-hn-ui-theme="workshop"] .v12Footer{bottom:calc(72px + env(safe-area-inset-bottom))!important}
 .hnThemeCenterGrid{grid-template-columns:1fr}.hnThemePreview{height:92px}#hnThemeUnlockStack{right:7px;top:max(70px,calc(env(safe-area-inset-top) + 62px));width:calc(100vw - 14px)}.hnThemeUnlock{padding:11px}.hnThemeUnlockActions{grid-template-columns:1fr 1.25fr}.hnThemeUnlock button{min-height:44px}
 html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage .v12ModalCard{width:100%;max-height:90dvh;padding:8px}
 html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage #v12ModalBody{display:block}html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780CarHero,html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780CarStage,html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780DamagePanel,html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780CarStats,html[data-hn-ui-theme="workshop"] .hnWsGarage #hn1780CarPartInfo{margin-bottom:7px!important}
 html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage .hn1780CarStage{min-height:330px;overflow-x:auto;justify-content:flex-start}html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780CarStage svg{min-width:620px!important;max-height:390px!important}html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780DamagePanel{grid-template-columns:1fr!important}html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780CarStats{grid-template-columns:1fr 1fr!important}
}
@media(max-width:430px){html[data-hn-ui-theme="workshop"] .hnWsTelemetry{grid-template-columns:1fr}html[data-hn-ui-theme="workshop"] .hnWsQuick{grid-template-columns:1fr 1fr}html[data-hn-ui-theme="workshop"] #hnWorkshopNav button{font-size:8px!important}html[data-hn-ui-theme="workshop"] #hnWorkshopNav button span{font-size:17px}html[data-hn-ui-theme="workshop"] .hnWsGarage .hn1780CarStats{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){#hnThemeUnlockStack .hnThemeUnlock{transition:none!important}}

/* V17.9.50 · truly free hero media: captions live outside the slider container */
html[data-hn-ui-theme="workshop"] .hnHeroSlider{width:100%;height:100%;min-height:0;margin:0;border:0;border-radius:0;box-shadow:none;background:#0b0d0b;display:block}
html[data-hn-ui-theme="workshop"] .hnHeroMedia{aspect-ratio:auto;min-height:220px}
html[data-hn-ui-theme="workshop"] .hnHeroSlide img{filter:saturate(.78) contrast(1.07) brightness(.84);object-position:center 34%}
html[data-hn-ui-theme="workshop"] .hnHeroSlide:after{background:linear-gradient(90deg,rgba(5,7,6,.2),transparent 15% 85%,rgba(5,7,6,.2))}
html[data-hn-ui-theme="workshop"] .hnWsHeroShade .hnHeroMetaRail{width:100%;min-height:42px;margin:0 0 9px;padding:0 0 9px;background:transparent;border:0;border-bottom:1px solid var(--ws-line2);border-radius:0}
html[data-hn-ui-theme="workshop"] .hnWsHeroShade .hnHeroMetaRail span{color:#c1a64c}html[data-hn-ui-theme="workshop"] .hnWsHeroShade .hnHeroMetaRail b{color:#e1dac4}html[data-hn-ui-theme="workshop"] .hnWsHeroShade .hnHeroMetaRail small{color:#858171}
html[data-hn-ui-theme="workshop"] .hnHeroArrow{border-radius:2px!important;background:rgba(8,10,8,.78)!important;border-color:rgba(199,178,101,.36)!important}.hnHeroSlider.workshop .hnHeroArrow:hover,.hnHeroSlider.workshop .hnHeroArrow:focus-visible{background:#171b17!important;border-color:#d0b658!important}.hnHeroSlider.workshop .hnHeroDots{bottom:8px;background:rgba(8,10,8,.56)}

/* Header: career mode + integrated live status, no floating badge. */
html[data-hn-ui-theme="workshop"] .brand{display:grid!important;align-content:center;gap:1px}html[data-hn-ui-theme="workshop"] .brand>span{display:block}html[data-hn-ui-theme="workshop"] .brand>small{display:block;font-size:8px;font-weight:700;letter-spacing:.12em;opacity:.58;text-transform:uppercase}
html[data-hn-ui-theme="workshop"] #hnLiveDock{display:flex;align-items:center;min-width:max-content}
html[data-hn-ui-theme="workshop"] #hnLiveDock #v176LiveBadge{position:static!important;inset:auto!important;display:flex!important;opacity:1!important;transform:none!important;max-width:none!important;width:auto!important;height:auto!important;padding:6px 9px!important;margin:0!important;border-radius:999px!important;z-index:auto!important;pointer-events:none!important}
html[data-hn-ui-theme="workshop"] #hnLiveDock #v176LiveBadge span{display:inline!important;font-size:9px!important;white-space:nowrap!important}
html[data-hn-ui-theme="workshop"] #hnLiveDock{padding:0 7px;border-right:1px solid var(--ws-line)}
html[data-hn-ui-theme="workshop"] #hnLiveDock #v176LiveBadge{background:transparent!important;border:0!important;box-shadow:none!important;padding:4px!important;color:#9e9a89!important}
html[data-hn-ui-theme="workshop"] #hnLiveDock #v176LiveBadge i{width:7px!important;height:7px!important}

/* Workshop dashboard geometry: fill browser cleanly, scrollbar hidden. */
html[data-hn-ui-theme="workshop"] #start .card{width:min(1560px,calc(100vw - 20px));max-height:calc(100dvh - 154px);padding:8px;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none!important}
html[data-hn-ui-theme="workshop"] #start .card::-webkit-scrollbar{width:0;height:0}
html[data-hn-ui-theme="workshop"] #start #hnWorkshopHome{grid-template-rows:auto auto auto auto;gap:7px}
.hnWsHomeTop{grid-template-columns:minmax(210px,245px) minmax(480px,1fr) minmax(250px,300px);min-height:410px}
.hnWsProfilePanel,.hnWsStatusPanel{min-height:0}.hnWsHero{min-height:410px}.hnWsHeroSliderSlot{position:relative;inset:auto;z-index:0;flex:1 1 auto;min-height:250px;overflow:hidden}.hnWsHeroShade{padding:11px 15px;background:#0b0e0c;border-top:1px solid var(--ws-line2)}.hnWsHeroShade h2{margin:2px 0 3px;font-size:clamp(20px,2.1vw,30px)!important}.hnWsHeroShade p{margin:0 0 9px;font-size:11px;color:#aaa48e}.hnWsHeroActions{display:grid;grid-template-columns:1.55fr .65fr;gap:6px}.hnWsHeroActions button{min-height:44px!important}
.hnWsLocationCard{display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;padding:11px;border:1px solid rgba(202,180,101,.25);background:linear-gradient(135deg,rgba(181,145,49,.09),rgba(255,255,255,.015));margin-bottom:8px;min-width:0}.hnWsLocationCard>span{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--ws-line);font-size:20px;color:#c3aa57}.hnWsLocationCard small{display:block;font-size:8px;letter-spacing:.13em;color:#8d8878}.hnWsLocationCard b{display:block;font-size:19px;line-height:1.05;color:#e2dbc5;overflow-wrap:anywhere}.hnWsLocationCard em{display:block;margin-top:3px;font-style:normal;font-size:9px;color:#9c967f;line-height:1.25}
.hnWsTelemetry{display:grid;grid-template-columns:1fr;gap:5px}.hnWsTelemetryRow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:7px;align-items:center;padding:7px 8px;border:1px solid var(--ws-line2);background:#111410}.hnWsTelemetryRow .ico{font-size:16px}.hnWsTelemetryRow b{display:block;font-size:10px;letter-spacing:.08em;color:#b5ae95}.hnWsTelemetryRow small{display:block;font-size:8px;color:#777466}.hnWsTelemetryRow strong{font:800 12px ui-monospace,Consolas,monospace;color:#d3c17b;white-space:nowrap}
.hnWsQuick{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hnWsQuick button{position:relative;min-height:72px!important;padding:8px 10px!important;border-left:3px solid #877331!important;background:linear-gradient(180deg,#20231f,#111411)!important;text-align:left!important;display:grid!important;grid-template-columns:34px 1fr;grid-template-areas:"ico title" "ico sub";align-content:center;justify-content:start;column-gap:8px}.hnWsQuick button span{grid-area:ico;font-size:24px!important;color:#c0a64e}.hnWsQuick button b{grid-area:title;font-size:12px;color:#e2dbc7}.hnWsQuick button small{grid-area:sub;font-size:8px!important;color:#878273!important}.hnWsQuick button:hover{border-left-color:#d2b74f!important;background:linear-gradient(180deg,#292d26,#151815)!important}
.hnWsReviews{padding:9px 10px;border:1px solid var(--ws-line);background:#0e110f}.hnWsReviewHead{display:flex;align-items:center;justify-content:space-between;gap:8px}.hnWsReviewHead small{display:block;font-size:8px;letter-spacing:.15em;color:#858071}.hnWsReviewHead b{display:block;font-size:15px;color:#d6ccb0}.hnWsReviewHead button{min-height:36px!important;padding:6px 10px!important}.hnWsReviewGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:7px}.hnWsReviewGrid article{min-width:0;padding:7px 8px;border:1px solid var(--ws-line2);background:#151815}.hnWsReviewGrid article>div{color:#d7b849;font-size:10px;letter-spacing:.04em}.hnWsReviewGrid p{margin:3px 0;font-size:9px;line-height:1.32;color:#aaa48e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hnWsReviewGrid small{font-size:8px;color:#777366}.hnWsReviewGrid .empty{grid-column:1/-1;text-align:center}.hnWsReviewGrid .empty p{white-space:normal}
.hnWsHomeFooter{padding:5px 8px;font-size:8px;opacity:.62;border-color:var(--ws-line2);background:transparent}.hnWsHomeFooter b{font-size:8px}


.hnWsRadioSlot{min-width:0}.hnWsRadioSlot:empty{display:none}
html[data-hn-ui-theme="workshop"] .hnWsRadioSlot .hnHomeRadio1794{margin:0!important}
/* Workshop footer: only one quiet legal hub above the game nav. Version lives inside the dashboard. */
html[data-hn-ui-theme="workshop"] .v12Footer{position:fixed!important;left:auto!important;right:12px!important;transform:none!important;bottom:calc(78px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:45vw!important;display:flex!important;justify-content:flex-end!important;gap:0!important;z-index:99840!important;opacity:.56!important;pointer-events:none!important}
html[data-hn-ui-theme="workshop"] .v12Footer>*{display:none!important}
html[data-hn-ui-theme="workshop"] .v12Footer .v1785LegalHub{display:inline-flex!important;pointer-events:auto!important;min-height:26px!important;padding:4px 8px!important;font-size:8px!important;border-radius:2px!important;background:rgba(8,10,9,.82)!important;border:1px solid var(--ws-line2)!important;color:#8c8879!important}
html[data-hn-ui-theme="workshop"] .v12Footer .hnVersionFooter{display:none!important}

/* Garage: use the exact supplied design sheet as a clipped inlay and place live damage hotspots above it. */
html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage .hn1780CarStage{position:relative;overflow:hidden!important;justify-content:stretch!important;align-items:stretch!important;background:radial-gradient(circle at 35% 35%,rgba(88,128,164,.12),transparent 34%),linear-gradient(180deg,#141a1d,#080b0c)!important}
html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage .hn1780CarStage>svg{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
html[data-hn-ui-theme="workshop"] .hnWsCarInlay{position:absolute;inset:0;overflow:hidden;background:#11171a}html[data-hn-ui-theme="workshop"] .hnWsCarInlay>img{position:absolute;max-width:none!important;width:255%;height:auto;left:-2%;top:-9%;filter:saturate(.78) contrast(1.08) brightness(.78);user-select:none;pointer-events:none}html[data-hn-ui-theme="workshop"] .hnWsCarInlay:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,9,.04),rgba(5,8,9,.12) 62%,rgba(5,8,9,.58)),radial-gradient(circle at 50% 45%,transparent 42%,rgba(0,0,0,.35))}html[data-hn-ui-theme="workshop"] .hnWsCarHotspots{position:absolute;z-index:3;inset:0}html[data-hn-ui-theme="workshop"] .hnWsHotspot{position:absolute!important;transform:translate(-50%,-50%)!important;width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;background:rgba(18,25,27,.9)!important;border:2px solid #91b35d!important;color:#fff!important;box-shadow:0 0 0 5px rgba(145,179,93,.12),0 8px 18px rgba(0,0,0,.4)!important;display:grid!important;place-items:center!important}html[data-hn-ui-theme="workshop"] .hnWsHotspot span{font-size:17px}html[data-hn-ui-theme="workshop"] .hnWsHotspot.warn{border-color:#d2a842!important;box-shadow:0 0 0 5px rgba(210,168,66,.13)!important}html[data-hn-ui-theme="workshop"] .hnWsHotspot.critical{border-color:#d94d3e!important;box-shadow:0 0 0 5px rgba(217,77,62,.14)!important}html[data-hn-ui-theme="workshop"] .hnWsHotspot.selected{outline:3px solid rgba(255,255,255,.65)!important;outline-offset:3px!important}

html[data-hn-ui-theme="workshop"] .hnWsSystemGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html[data-hn-ui-theme="workshop"] .hnWsSystemGrid button{min-height:82px!important;padding:10px!important;display:grid!important;grid-template-columns:28px 1fr;grid-template-areas:"icon title" "icon sub";text-align:left!important;align-content:center;column-gap:8px}
html[data-hn-ui-theme="workshop"] .hnWsSystemGrid b{grid-area:title}html[data-hn-ui-theme="workshop"] .hnWsSystemGrid small{grid-area:sub;color:#918b79}
html[data-hn-ui-theme="workshop"] .hnWsChoiceProxy{display:grid;gap:8px}html[data-hn-ui-theme="workshop"] .hnWsChoiceProxy button{min-height:52px!important}

@media(max-width:1180px){
 .hnWsHomeTop{grid-template-columns:210px minmax(420px,1fr) 250px}.hnWsLocationCard b{font-size:16px}.hnWsTelemetryRow{padding:6px}.hnWsReviewGrid p{font-size:8px}
}
@media(max-width:900px){
 html[data-hn-ui-theme="workshop"] #hnLiveDock #v176LiveBadge span{display:none!important}html[data-hn-ui-theme="workshop"] #hnLiveDock #v176LiveBadge{padding:6px!important}
 .hnWsHomeTop{grid-template-columns:200px minmax(0,1fr)}.hnWsStatusPanel{grid-column:1/-1}.hnWsStatusPanel{display:grid;grid-template-columns:220px 1fr;gap:8px}.hnWsStatusPanel>.hnWsPanelTitle{grid-column:1/-1}.hnWsTelemetry{grid-template-columns:repeat(3,1fr)}.hnWsReviewGrid{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:680px){
 html.hnThemeBooting body{visibility:visible}
 .hnHeroSlider{border-radius:13px}.hnHeroMedia{aspect-ratio:16/10;min-height:210px}.hnHeroMetaRail{grid-template-columns:1fr;grid-template-areas:"label" "title" "sub";gap:1px;min-height:58px}.hnHeroMetaRail small{text-align:left}.hnHeroArrow{width:48px;height:58px;min-width:48px!important;min-height:58px!important}.hnHeroDots{bottom:7px}
 html[data-hn-ui-theme="workshop"] .topbar{display:grid!important;grid-template-columns:minmax(118px,1fr) auto auto;align-items:center;overflow:visible!important}html[data-hn-ui-theme="workshop"] .spacer{display:none!important}html[data-hn-ui-theme="workshop"] .brand{min-width:0!important;max-width:none!important;width:auto!important;padding:0 7px!important;border-right:1px solid var(--ws-line)!important}html[data-hn-ui-theme="workshop"] .brand>span{font-size:9px}html[data-hn-ui-theme="workshop"] .brand>small{font-size:6px}html[data-hn-ui-theme="workshop"] .topAvatarDock{display:none!important}html[data-hn-ui-theme="workshop"] #hnLiveDock{padding:0 3px!important;border-right:0!important}html[data-hn-ui-theme="workshop"] .v12Hud{grid-column:1/-1;order:3;width:100%;max-width:100%!important;overflow-x:auto!important}html[data-hn-ui-theme="workshop"] .hudChip{flex:0 0 auto!important;min-width:70px!important}html[data-hn-ui-theme="workshop"] .screen{padding-top:112px!important}
 html[data-hn-ui-theme="workshop"] #start .card{max-height:calc(100dvh - 188px);padding:5px!important}.hnWsHomeTop{display:flex!important;flex-direction:column;min-height:0}.hnWsHero{order:-2;min-height:300px}.hnWsHeroSliderSlot{inset:auto}.hnHeroSlider.workshop .hnHeroDots{bottom:8px}.hnWsHeroShade .hnHeroMetaRail{min-height:0;margin-bottom:7px;padding-bottom:7px}.hnWsHeroShade h2{font-size:19px!important}.hnWsHeroShade p{display:none}.hnWsHeroActions{grid-template-columns:1fr 110px}.hnWsProfilePanel{order:-1}.hnWsStatusPanel{display:block;order:0}.hnWsLocationCard{grid-template-columns:34px 1fr;padding:8px}.hnWsLocationCard>span{width:34px;height:34px}.hnWsLocationCard b{font-size:16px}.hnWsTelemetry{grid-template-columns:1fr 1fr!important}.hnWsTelemetryRow{padding:6px}.hnWsQuick{grid-template-columns:1fr 1fr!important}.hnWsQuick button{min-height:62px!important}.hnWsReviews{padding:8px}.hnWsReviewGrid{grid-template-columns:1fr!important}.hnWsReviewGrid article:nth-child(n+2){display:none}.hnWsReviewGrid p{white-space:normal}.hnWsHomeFooter{display:none!important}
 html[data-hn-ui-theme="workshop"] .v12Footer{right:6px!important;bottom:calc(70px + env(safe-area-inset-bottom))!important;max-width:55vw!important}html[data-hn-ui-theme="workshop"] .v12Footer .v1785LegalHub{font-size:7px!important;min-height:23px!important;padding:3px 6px!important}
 html[data-hn-ui-theme="workshop"] #hnWorkshopNav{height:60px!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;overflow-x:hidden!important}html[data-hn-ui-theme="workshop"] #hnWorkshopNav::-webkit-scrollbar{display:none}html[data-hn-ui-theme="workshop"] .hnWsSystemGrid{grid-template-columns:1fr 1fr}
 html[data-hn-ui-theme="workshop"] #v12Modal.hnWsGarage .hn1780CarStage{min-height:285px!important;overflow:hidden!important}.hnWsCarInlay>img{width:295%;left:-5%;top:-4%}.hnWsHotspot{width:34px!important;height:34px!important;min-height:34px!important}.hnWsHotspot span{font-size:14px}
}
@media(max-width:430px){
 .hnWsTelemetry{grid-template-columns:1fr!important}.hnWsHero{min-height:280px}.hnWsHeroActions{grid-template-columns:1fr}.hnHeroSlider.workshop .hnHeroDots{bottom:8px}.hnWsQuick button{grid-template-columns:28px 1fr;column-gap:6px}.hnWsQuick button span{font-size:20px!important}.hnWsQuick button b{font-size:11px}.hnWsQuick button small{font-size:7px!important}.hnWsCarInlay>img{width:325%;left:-7%;top:0}
}
@media(prefers-reduced-motion:reduce){.hnHeroSlide{transition:none!important}}

/* V17.9.38 · dynamic Workshop Klapperkiste damage art (driven by existing vehicle state) */
html[data-hn-ui-theme="workshop"] .hnWsCarDamageHost{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt{position:absolute;inset:0;pointer-events:none}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt i{position:absolute;display:block;pointer-events:none}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .rust{border-radius:48% 52% 42% 58%;background:radial-gradient(circle at 35% 35%,rgba(224,126,61,.78),rgba(111,53,24,.78) 46%,rgba(44,28,20,.08) 72%);mix-blend-mode:multiply;filter:blur(.2px);opacity:.9}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .r1{left:20%;top:64%;width:16%;height:9%;transform:rotate(-6deg)}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .r2{left:62%;top:49%;width:11%;height:7%;transform:rotate(12deg)}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .dent{left:58%;top:57%;width:13%;height:8%;border:3px solid rgba(20,24,24,.72);border-left-color:rgba(255,255,255,.18);border-radius:50%;transform:rotate(-12deg);box-shadow:inset 7px 6px 10px rgba(0,0,0,.34)}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .scratch{left:34%;top:59%;width:25%;height:2px;background:rgba(235,231,211,.55);box-shadow:0 5px 0 rgba(52,31,25,.55),8px 10px 0 rgba(221,215,194,.35);transform:rotate(-8deg)}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .glassCrack{left:49%;top:24%;width:13%;height:16%;background:linear-gradient(62deg,transparent 46%,rgba(230,247,250,.8) 48% 50%,transparent 52%),linear-gradient(118deg,transparent 46%,rgba(230,247,250,.6) 48% 50%,transparent 52%),linear-gradient(20deg,transparent 47%,rgba(230,247,250,.52) 49% 50%,transparent 52%);filter:drop-shadow(0 0 2px rgba(255,255,255,.6))}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .steam{left:67%;top:18%;font-style:normal;font-size:34px;color:rgba(218,231,226,.78);filter:blur(.2px);text-shadow:0 0 10px rgba(220,240,235,.4);animation:hnWsSteam 1.8s ease-in-out infinite}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .st2{left:72%;top:11%;font-size:27px;animation-delay:.55s}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .sparks{left:60%;top:40%;font-style:normal;font-size:28px;color:#ffd764;text-shadow:0 0 8px #ff9a36,0 0 16px #f04;animation:hnWsSpark 1.05s steps(2,end) infinite}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .flatTire{left:61%;top:75%;width:15%;height:7%;border-radius:50%;background:rgba(12,12,12,.9);box-shadow:0 -5px 0 rgba(38,38,38,.72),0 4px 8px rgba(0,0,0,.6);transform:rotate(-3deg)}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .engineShake{left:66%;top:48%;font-style:normal;font-size:28px;color:rgba(255,194,91,.84);animation:hnWsShake .24s linear infinite}
html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt.severe:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 67% 42%,rgba(84,84,78,.2),transparent 24%),linear-gradient(100deg,transparent 58%,rgba(15,15,15,.22));mix-blend-mode:multiply}
@keyframes hnWsSteam{0%,100%{transform:translate(0,8px) scale(.9);opacity:.25}50%{transform:translate(-5px,-10px) scale(1.12);opacity:.9}}
@keyframes hnWsSpark{0%,44%{opacity:.2;transform:scale(.7) rotate(-8deg)}45%,100%{opacity:1;transform:scale(1.15) rotate(7deg)}}
@keyframes hnWsShake{0%,100%{transform:translateX(-1px)}50%{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .steam,html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .sparks,html[data-hn-ui-theme="workshop"] .hnWsCarDamageArt .engineShake{animation:none!important}}
/* V17.9.38 package preview is UI-only and does not alter Classic/Workshop layouts. */
.hnThemePreview.package{background:radial-gradient(circle at 22% 18%,var(--hn-theme-accent,#55e8ff),transparent 24%),radial-gradient(circle at 78% 20%,var(--hn-theme-accent2,#ff4fd8),transparent 27%),linear-gradient(145deg,#07101e,#160b26 62%,#050811);border-color:var(--hn-theme-accent,#55e8ff);box-shadow:inset 0 0 0 1px var(--hn-theme-accent2,#ff4fd8)}
.hnThemePreview.package:before{content:"CREATOR   LIVE   STORY";position:absolute;left:8px;right:8px;top:8px;height:24px;border:1px solid color-mix(in srgb,var(--hn-theme-accent,#55e8ff) 50%,transparent);color:#effcff;font:800 7px ui-monospace;padding:7px;letter-spacing:.1em;background:rgba(5,9,20,.72)}
.hnThemePreview.package:after{content:"JOHN // THEME PACKAGE";position:absolute;left:8px;right:8px;bottom:8px;top:39px;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:#fff;font:900 12px ui-monospace;background:linear-gradient(135deg,rgba(85,232,255,.08),rgba(255,79,216,.08))}


/* V17.9.55 · Workshop home/slider geometry lock */
html[data-hn-ui-theme="workshop"] #start .card{
  overflow-anchor:none!important;scrollbar-gutter:stable;overscroll-behavior-y:contain!important;
}
html[data-hn-ui-theme="workshop"] #hnWorkshopHome,
html[data-hn-ui-theme="workshop"] .hnWsHomeTop,
html[data-hn-ui-theme="workshop"] .hnWsHero,
html[data-hn-ui-theme="workshop"] .hnWsHeroSliderSlot,
html[data-hn-ui-theme="workshop"] .hnWsHeroShade,
html[data-hn-ui-theme="workshop"] .hnWsTelemetry,
html[data-hn-ui-theme="workshop"] .hnWsReviews{overflow-anchor:none}
html[data-hn-ui-theme="workshop"] .hnWsHeroSliderSlot{
  flex:1 1 0;min-height:clamp(220px,32vw,310px);contain:layout paint;overflow:hidden;
}
html[data-hn-ui-theme="workshop"] .hnHeroSlider,
html[data-hn-ui-theme="workshop"] .hnHeroMedia{height:100%;min-height:0}
/* Old Workshop hero-image padding belonged to the pre-slider overlay. Slider media must use the full free viewport. */
html[data-hn-ui-theme="workshop"] .hnHeroSlide img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  padding:0!important;margin:0!important;opacity:1!important;object-fit:cover!important;
}
html[data-hn-ui-theme="workshop"] .hnHeroArrow:active{transform:translateY(-50%)!important;box-shadow:0 8px 24px rgba(0,0,0,.25)!important}
html[data-hn-ui-theme="workshop"] .hnWsHotspot:active{transform:translate(-50%,-50%)!important}
@media(max-width:680px){
  html[data-hn-ui-theme="workshop"] .hnWsHeroSliderSlot{min-height:220px}
  html[data-hn-ui-theme="workshop"] .hnHeroSlider,html[data-hn-ui-theme="workshop"] .hnHeroMedia{height:220px}
}
@media(max-width:430px){
  html[data-hn-ui-theme="workshop"] .hnWsHeroSliderSlot{min-height:210px}
  html[data-hn-ui-theme="workshop"] .hnHeroSlider,html[data-hn-ui-theme="workshop"] .hnHeroMedia{height:210px}
}

/* V17.9.55 · late-data space reservation: prevent review/radio reflow after first paint */
html[data-hn-ui-theme="workshop"] .hnWsRadioSlot{display:block!important;min-height:64px;contain:layout;overflow-anchor:none}
html[data-hn-ui-theme="workshop"] .hnWsReviews{min-height:86px;contain:layout;overflow-anchor:none}
html[data-hn-ui-theme="workshop"] .hnWsReviewGrid{min-height:38px}
@media(max-width:680px){
  html[data-hn-ui-theme="workshop"] .hnWsRadioSlot{min-height:54px}
  html[data-hn-ui-theme="workshop"] .hnWsReviews{min-height:112px}
  html[data-hn-ui-theme="workshop"] .hnWsReviewGrid{min-height:62px}
}

/* V46.76 · coherent phone navigation + true viewport layout */
#hnWorkshopNav{border-radius:16px;padding:5px;gap:4px;background:rgba(8,11,9,.965);border-color:rgba(202,177,91,.24)}
#hnWorkshopNav button{border:0!important;border-radius:11px!important;min-height:52px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px!important;color:#a8a390!important;background:transparent!important;font-size:8px!important;letter-spacing:.08em}
#hnWorkshopNav button span{display:grid;place-items:center;width:26px;height:24px;border-radius:8px;font-size:16px!important;color:#d0b963;background:rgba(202,177,91,.07);border:1px solid rgba(202,177,91,.08)}
#hnWorkshopNav button b{font-size:8px;font-weight:900;line-height:1}
#hnWorkshopNav button.active{background:linear-gradient(180deg,rgba(190,159,64,.15),rgba(190,159,64,.045))!important;color:#f0e8cb!important;box-shadow:inset 0 0 0 1px rgba(211,180,76,.18)}
#hnWorkshopNav button.active span{background:rgba(211,180,76,.16);border-color:rgba(211,180,76,.26);color:#f3d979}
@media(max-width:680px){html,body,html[data-hn-ui-theme="workshop"] body{width:100%;max-width:100%;overflow:hidden!important}html[data-hn-ui-theme="workshop"] #app{width:100vw;max-width:100vw;overflow:hidden}html[data-hn-ui-theme="workshop"] .screen{width:100vw;max-width:100vw;left:0;right:0;overflow:hidden}html[data-hn-ui-theme="workshop"] .screen>.card{width:100%!important;max-width:100%!important;margin:0!important}html[data-hn-ui-theme="workshop"] #hnWorkshopNav{left:7px!important;right:7px!important;height:64px!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;overflow:hidden!important}html[data-hn-ui-theme="workshop"] #hnWorkshopNav button{min-width:0!important;white-space:nowrap!important}}
@media(max-width:390px){html[data-hn-ui-theme="workshop"] #hnWorkshopNav{left:4px!important;right:4px!important;padding:4px;gap:2px}html[data-hn-ui-theme="workshop"] #hnWorkshopNav button span{width:24px;height:22px;font-size:15px!important}html[data-hn-ui-theme="workshop"] #hnWorkshopNav button b{font-size:7px}}