/* Selectable looks. Applied with <html data-style="rugged|military|spartan">; Modern is the default (no attribute). */
/* ---- rugged ---- */
html[data-style="rugged"]:root {--bg: #0a0a0b; --surface: #141416; --surface-2: #1d1d20; --fg: #efeae2; --muted: #9b958c; --line: rgba(255, 255, 255, 0.10);
  --accent: #e0262b; --accent-2: #a8141a; --accent-fg: #ffffff; --accent-soft: #3a1114; --accent-ink: #ff6b66;
  --pop: #f2b134; --pop-soft: #3a2c0c;
  --shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 14px 30px -12px rgba(0, 0, 0, 0.85);
  --radius: 10px; --radius-sm: 6px; color-scheme: dark;}
html[data-style="rugged"]:root {--stencil: "Saira Stencil One", "Oswald", Impact, sans-serif; --cond: "Oswald", "Arial Narrow", Impact, sans-serif;}
html[data-style="rugged"]:root body {background:
    radial-gradient(520px 320px at 100% -40px, rgba(224, 38, 43, .32), transparent 70%),
    radial-gradient(420px 300px at -10% 100%, rgba(224, 38, 43, .16), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);}
html[data-style="rugged"]:root h1 {font-family: var(--stencil); font-weight: 400; font-size: 26px; letter-spacing: .03em; text-transform: uppercase; color: var(--fg); background: none; -webkit-background-clip: initial; background-clip: initial;}
html[data-style="rugged"]:root h2,
html[data-style="rugged"]:root h3,
html[data-style="rugged"]:root h4,
html[data-style="rugged"]:root .hero h2 {font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;}
html[data-style="rugged"]:root h2 {font-size: 22px;}
html[data-style="rugged"]:root .section-head h2,
html[data-style="rugged"]:root .section-head h3 {position: relative; padding-bottom: 6px;}
html[data-style="rugged"]:root .section-head h2::after,
html[data-style="rugged"]:root .section-head h3::after {content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; background: var(--accent);}
html[data-style="rugged"]:root .card h3 {font-size: 19px; letter-spacing: .04em;}
html[data-style="rugged"]:root .stats {background: transparent; color: var(--accent-ink); border: 1px solid var(--accent-2); border-radius: 4px; font-family: var(--cond); letter-spacing: .08em; text-transform: uppercase; box-shadow: none;}
html[data-style="rugged"]:root .id-bar {border-radius: 10px; background: rgba(20, 20, 22, .9); border: 1px solid var(--line); border-bottom: 2px solid var(--accent);}
html[data-style="rugged"]:root .id-bar .chip.me {background: var(--accent-soft); color: var(--accent-ink); border-radius: 4px; font-family: var(--cond); letter-spacing: .08em; text-transform: uppercase;}
html[data-style="rugged"]:root .dot {background: var(--accent) !important;}
html[data-style="rugged"]:root .icon-btn {background: var(--surface-2); border-radius: 8px;}
html[data-style="rugged"]:root .hero {border-radius: 12px; color: var(--fg); border: 1px solid rgba(224,38,43,.5);
  background:
    repeating-linear-gradient(135deg, rgba(224,38,43,.18) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, #1b0c0d 0%, #0e0e10 70%);
  box-shadow: 0 18px 36px -16px rgba(224, 38, 43, .5);}
html[data-style="rugged"]:root .hero::before {width: 0; height: 0;}
html[data-style="rugged"]:root .hero::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 5px; border-radius: 0; background: repeating-linear-gradient(135deg, var(--accent) 0 10px, #0a0a0b 10px 20px);}
html[data-style="rugged"]:root .hero-hi {color: var(--accent-ink); font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: 12px;}
html[data-style="rugged"]:root .hero h2 {font-family: var(--stencil); font-weight: 400; font-size: 26px; letter-spacing: .03em; line-height: 1.15;}
html[data-style="rugged"]:root .card,
html[data-style="rugged"]:root .new,
html[data-style="rugged"]:root .news,
html[data-style="rugged"]:root .hc,
html[data-style="rugged"]:root .empty,
html[data-style="rugged"]:root .pay,
html[data-style="rugged"]:root .hl {border-radius: 10px; background: linear-gradient(180deg, #19191c, #121214); border: 1px solid var(--line); box-shadow: var(--shadow);}
html[data-style="rugged"]:root .card .when,
html[data-style="rugged"]:root .when {background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; color: var(--fg);}
html[data-style="rugged"]:root .news::before {background: var(--accent);}
html[data-style="rugged"]:root .chip {border-radius: 4px; background: var(--surface-2);}
html[data-style="rugged"]:root .chip.me {background: var(--accent-soft); color: var(--accent-ink);}
html[data-style="rugged"]:root .chip.dim {border-color: var(--line);}
html[data-style="rugged"]:root button.primary,
html[data-style="rugged"]:root .paybtn.on,
html[data-style="rugged"]:root .slotchip.sel,
html[data-style="rugged"]:root #drawer .tabs button[aria-selected="true"] {background: linear-gradient(180deg, #ee3035, #b3161c); color: #fff; border: 1px solid #ff5a55; border-radius: 6px; box-shadow: 0 8px 18px -8px rgba(224,38,43,.7), inset 0 1px 0 rgba(255,255,255,.25);}
html[data-style="rugged"]:root button.primary {font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em; font-weight: 600;}
html[data-style="rugged"]:root button.quiet {border-radius: 6px;}
html[data-style="rugged"]:root input,
html[data-style="rugged"]:root textarea,
html[data-style="rugged"]:root select {background: #0e0e10; border: 1px solid var(--line); border-radius: 6px; color: var(--fg);}
html[data-style="rugged"]:root input:focus,
html[data-style="rugged"]:root textarea:focus,
html[data-style="rugged"]:root select:focus {border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224,38,43,.25); outline: none;}
html[data-style="rugged"]:root .seg button {border-radius: 6px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em;}
html[data-style="rugged"]:root #drawer {background: #0d0d0f; border-right: 3px solid var(--accent); border-radius: 0;}
html[data-style="rugged"]:root #drawer .tabs button {border-radius: 6px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; color: var(--fg);}
html[data-style="rugged"]:root #drawer .tabs .ti {background: var(--surface-2); color: var(--accent-ink); border-radius: 6px;}
html[data-style="rugged"]:root #drawer .tabs button[aria-selected="true"] .ti {background: rgba(0,0,0,.3); color: #fff;}
html[data-style="rugged"]:root .lb li {border-radius: 6px; background: var(--surface-2);}
html[data-style="rugged"]:root .lb li.r1 {background: linear-gradient(90deg, rgba(255,200,60,.22), var(--surface-2) 75%);}
html[data-style="rugged"]:root .lb li.r2 {background: linear-gradient(90deg, rgba(190,200,215,.20), var(--surface-2) 75%);}
html[data-style="rugged"]:root .lb li.r3 {background: linear-gradient(90deg, rgba(225,140,85,.22), var(--surface-2) 75%);}
html[data-style="rugged"]:root .lb li.mine,
html[data-style="rugged"]:root .pod.mine {outline-color: var(--accent);}
html[data-style="rugged"]:root .pod {border-radius: 4px; background: var(--surface-2); font-family: var(--cond); letter-spacing: .04em; text-transform: uppercase;}
html[data-style="rugged"]:root .hl.mini h4 {color: var(--accent-ink);}
html[data-style="rugged"]:root .slotchip {border-radius: 6px; background: var(--surface-2); font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-weight: 500;}
html[data-style="rugged"]:root .slotchip.filled {background: var(--accent-soft); color: var(--accent-ink);}
html[data-style="rugged"]:root .slotchip.addchip {border-color: var(--accent); color: var(--accent-ink); background: transparent;}
html[data-style="rugged"]:root .fee {background: var(--pop-soft); color: var(--pop); border-radius: 4px; font-family: var(--cond);}
html[data-style="rugged"]:root .fee.none {background: var(--surface-2); color: var(--muted);}
html[data-style="rugged"]:root .paybtn {border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;}
html[data-style="rugged"]:root .pchip.ok {background: var(--accent-soft); color: var(--accent-ink);}
html[data-style="rugged"]:root .bar {background: var(--surface-2);}
html[data-style="rugged"]:root .bar > i {background: linear-gradient(90deg, var(--accent-2), var(--accent));}
html[data-style="rugged"]:root .gearwrap {border-color: #3a1214; background: radial-gradient(ellipse at 50% 38%, #1d1214 0%, #0a0a0b 72%);}
html[data-style="rugged"]:root .gearwrap::before,
html[data-style="rugged"]:root .gearwrap::after {border-color: var(--accent);}
html[data-style="rugged"]:root #gear-fig .weap.filled .rifleimg {filter: drop-shadow(0 0 .8px #ff8a80) drop-shadow(0 0 .8px #ff8a80) drop-shadow(0 0 4px rgba(224,38,43,.9));}
html[data-style="rugged"]:root #gear-fig .weap.sel .rifleimg {filter: grayscale(1) brightness(.8) drop-shadow(0 0 .8px #f2b134) drop-shadow(0 0 .8px #f2b134);}
html[data-style="rugged"]:root #gear-fig .weap.filled .frame {stroke: transparent;}
html[data-style="rugged"]:root .gearpill {border-radius: 6px; background: var(--surface);}
html[data-style="rugged"]:root .gearpill .lbl {color: var(--accent-ink); font-family: var(--cond);}
html[data-style="rugged"]:root .guidebtn {border-radius: 6px;}
html[data-style="rugged"]:root .toast {border-radius: 6px; background: #1d1d20; border: 1px solid var(--accent); color: var(--fg);}

/* ---- military ---- */
html[data-style="military"]:root {--bg: #12150d; --surface: #1d2216; --surface-2: #272d1e; --fg: #e8e3cc; --muted: #a29f84; --line: rgba(214, 200, 150, 0.16);
  --accent: #7d9441; --accent-2: #5c7030; --accent-fg: #f4f0dc; --accent-soft: #2c3820; --accent-ink: #c4d77a;
  --pop: #d8a520; --pop-soft: #3a2f10; --khaki: #c9b27a; --steel: #3b402e;
  --shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 26px -12px rgba(0, 0, 0, 0.8);
  --radius: 5px; --radius-sm: 3px; color-scheme: dark;}
html[data-style="military"]:root {--stencil: "Saira Stencil One", "Oswald", Impact, sans-serif; --cond: "Oswald", "Arial Narrow", Impact, sans-serif; --mono: "Share Tech Mono", ui-monospace, "Courier New", monospace;}
html[data-style="military"]:root body {background:
    radial-gradient(520px 340px at 100% -40px, rgba(125, 148, 65, .22), transparent 70%),
    radial-gradient(460px 320px at -10% 100%, rgba(201, 178, 122, .08), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 6px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8  0 0 0 0 .78  0 0 0 0 .55  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);}
html[data-style="military"]:root h1 {font-family: var(--stencil); font-weight: 400; font-size: 26px; letter-spacing: .05em; text-transform: uppercase; color: var(--khaki); background: none; -webkit-background-clip: initial; background-clip: initial;}
html[data-style="military"]:root h2,
html[data-style="military"]:root h3,
html[data-style="military"]:root h4 {font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;}
html[data-style="military"]:root h2 {font-size: 22px;}
html[data-style="military"]:root .section-head h2,
html[data-style="military"]:root .section-head h3 {position: relative; padding-bottom: 6px; color: var(--khaki);}
html[data-style="military"]:root .section-head h2::after,
html[data-style="military"]:root .section-head h3::after {content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: repeating-linear-gradient(90deg, var(--khaki) 0 8px, transparent 8px 11px);}
html[data-style="military"]:root .card h3 {font-size: 19px; letter-spacing: .05em;}
html[data-style="military"]:root .stats {background: transparent; color: var(--khaki); border: 1px solid var(--steel); border-radius: 3px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: none; font-weight: 400;}
html[data-style="military"]:root .meta,
html[data-style="military"]:root small,
html[data-style="military"]:root .lbl,
html[data-style="military"]:root label {font-family: var(--mono); letter-spacing: .02em;}
html[data-style="military"]:root .meta,
html[data-style="military"]:root small {font-size: 12px;}
html[data-style="military"]:root .id-bar {border-radius: 5px; background: rgba(29, 34, 22, .94); border: 1px solid var(--steel); border-top: 2px solid var(--khaki);}
html[data-style="military"]:root .id-bar strong {font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-weight: 600;}
html[data-style="military"]:root .id-bar .chip.me {background: var(--pop-soft); color: var(--pop); border: 1px solid #5a4614; border-radius: 3px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase;}
html[data-style="military"]:root .dot {background: var(--pop) !important;}
html[data-style="military"]:root .icon-btn {background: var(--surface-2); border: 1px solid var(--steel); border-radius: 4px;}
html[data-style="military"]:root .hero {border-radius: 6px; color: var(--fg); border: 0; position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.14) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #3a4526 0%, #232b17 75%);
  box-shadow: 0 16px 30px -14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06);}
html[data-style="military"]:root .hero::before {content: ""; position: absolute; inset: 7px; width: auto; height: auto; border-radius: 3px; border: 1.5px dashed rgba(201,178,122,.65); background: none; pointer-events: none;}
html[data-style="military"]:root .hero::after {display: none;}
html[data-style="military"]:root .hero-hi {color: var(--khaki); font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; font-size: 12px;}
html[data-style="military"]:root .hero-hi::before {content: "// ";}
html[data-style="military"]:root .hero h2 {font-family: var(--stencil); font-weight: 400; font-size: 26px; letter-spacing: .04em; line-height: 1.15; color: #f1ecd4;}
html[data-style="military"]:root .card,
html[data-style="military"]:root .new,
html[data-style="military"]:root .news,
html[data-style="military"]:root .hc,
html[data-style="military"]:root .empty,
html[data-style="military"]:root .pay,
html[data-style="military"]:root .hl {border-radius: 5px; border: 1px solid var(--steel);
  background:
    radial-gradient(circle at 9px 9px, #6f7352 0 1.8px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #6f7352 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 9px calc(100% - 9px), #6f7352 0 1.8px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #6f7352 0 1.8px, transparent 2.4px),
    linear-gradient(180deg, #20261a, #191d13);
  box-shadow: var(--shadow);}
html[data-style="military"]:root .card {padding: 20px 20px;}
html[data-style="military"]:root .hl,
html[data-style="military"]:root .pay {padding: 18px 20px;}
html[data-style="military"]:root .when {background: #151910; border: 1px solid var(--steel); border-radius: 3px; color: var(--khaki);}
html[data-style="military"]:root .when * {font-family: var(--stencil);}
html[data-style="military"]:root .news::before {background: var(--khaki);}
html[data-style="military"]:root .chip {border-radius: 3px; background: #2b3122; border: 1px solid var(--steel); font-family: var(--mono); font-weight: 400; letter-spacing: .02em; color: var(--fg);}
html[data-style="military"]:root .chip.me {background: var(--accent-soft); color: var(--accent-ink); border-color: #44552a;}
html[data-style="military"]:root .chip.dim {background: transparent; border-style: dashed; color: var(--muted);}
html[data-style="military"]:root .eyes.ok,
html[data-style="military"]:root .ok {color: var(--accent-ink);}
html[data-style="military"]:root button.primary,
html[data-style="military"]:root .paybtn.on,
html[data-style="military"]:root .slotchip.sel,
html[data-style="military"]:root #drawer .tabs button[aria-selected="true"] {background: linear-gradient(180deg, #8da44c, #5c7030); color: #f4f0dc; border: 1px solid #a4bb62; border-radius: 4px; box-shadow: 0 8px 16px -8px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.25); text-shadow: 0 1px 0 rgba(0,0,0,.35);}
html[data-style="military"]:root button.primary {font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-weight: 600;}
html[data-style="military"]:root button.quiet {border-radius: 4px; color: var(--khaki);}
html[data-style="military"]:root input,
html[data-style="military"]:root textarea,
html[data-style="military"]:root select {background: #12150d; border: 1px solid var(--steel); border-radius: 4px; color: var(--fg); font-family: var(--mono);}
html[data-style="military"]:root input:focus,
html[data-style="military"]:root textarea:focus,
html[data-style="military"]:root select:focus {border-color: var(--khaki); box-shadow: 0 0 0 3px rgba(201,178,122,.22); outline: none;}
html[data-style="military"]:root .seg button {border-radius: 4px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;}
html[data-style="military"]:root #drawer {background: #0f120a; border-right: 3px solid var(--khaki); border-radius: 0;}
html[data-style="military"]:root #drawer .tabs button {border-radius: 4px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-weight: 500; color: var(--fg);}
html[data-style="military"]:root #drawer .tabs .ti {background: var(--surface-2); color: var(--khaki); border-radius: 4px; border: 1px solid var(--steel);}
html[data-style="military"]:root #drawer .tabs button[aria-selected="true"] .ti {background: rgba(0,0,0,.28); color: #f4f0dc; border-color: transparent;}
html[data-style="military"]:root .lb li {border-radius: 4px; background: var(--surface-2); border: 1px solid var(--steel);}
html[data-style="military"]:root .lb li.r1 {background: linear-gradient(90deg, rgba(226,184,52,.24), var(--surface-2) 75%);}
html[data-style="military"]:root .lb li.r2 {background: linear-gradient(90deg, rgba(190,200,215,.20), var(--surface-2) 75%);}
html[data-style="military"]:root .lb li.r3 {background: linear-gradient(90deg, rgba(210,135,80,.24), var(--surface-2) 75%);}
html[data-style="military"]:root .lb li.mine,
html[data-style="military"]:root .pod.mine {outline-color: var(--khaki);}
html[data-style="military"]:root .pod {border-radius: 3px; background: var(--surface-2); border: 1px solid var(--steel); font-family: var(--cond); letter-spacing: .06em; text-transform: uppercase; font-weight: 500;}
html[data-style="military"]:root .hl.mini h4 {color: var(--khaki);}
html[data-style="military"]:root .slotchip {border-radius: 4px; background: var(--surface-2); border: 1px solid var(--steel); font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-weight: 500;}
html[data-style="military"]:root .slotchip.filled {background: var(--accent-soft); color: var(--accent-ink); border-color: #44552a;}
html[data-style="military"]:root .slotchip.addchip {border: 1px dashed var(--khaki); color: var(--khaki); background: transparent;}
html[data-style="military"]:root .fee {background: var(--pop-soft); color: var(--pop); border-radius: 3px; font-family: var(--mono);}
html[data-style="military"]:root .fee.none {background: var(--surface-2); color: var(--muted);}
html[data-style="military"]:root .paybtn {border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid #44552a; font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;}
html[data-style="military"]:root .pchip.ok {background: var(--accent-soft); color: var(--accent-ink);}
html[data-style="military"]:root .bar {background: #12150d; border: 1px solid var(--steel);}
html[data-style="military"]:root .bar > i {background: linear-gradient(90deg, var(--accent-2), var(--accent-ink));}
html[data-style="military"]:root .se .stp {border-radius: 4px; background: var(--surface-2); border-color: var(--steel); color: var(--khaki);}
html[data-style="military"]:root .gearwrap {border-color: var(--steel); background: radial-gradient(ellipse at 50% 38%, #232a19 0%, #0d0f08 74%);}
html[data-style="military"]:root .gearwrap::before,
html[data-style="military"]:root .gearwrap::after {border-color: var(--khaki);}
html[data-style="military"]:root #gear-fig .weap.filled .rifleimg {filter: drop-shadow(0 0 .8px #e6f58a) drop-shadow(0 0 .8px #e6f58a) drop-shadow(0 0 4px rgba(184,216,58,.85));}
html[data-style="military"]:root #gear-fig .weap.sel .rifleimg {filter: grayscale(1) brightness(.8) drop-shadow(0 0 .8px #d8a520) drop-shadow(0 0 .8px #d8a520);}
html[data-style="military"]:root #gear-fig .weap.filled .frame {stroke: transparent;}
html[data-style="military"]:root .gearpill {border-radius: 4px; background: var(--surface); border-color: var(--steel);}
html[data-style="military"]:root .gearpill .lbl {color: var(--khaki); font-family: var(--mono);}
html[data-style="military"]:root .guidebtn {border-radius: 4px; border-color: var(--steel); color: var(--khaki); font-family: var(--mono);}
html[data-style="military"]:root .toast {border-radius: 4px; background: #232a19; border: 1px solid var(--khaki); color: var(--fg);}
html[data-style="military"]:root .seg button.in,
html[data-style="military"]:root .seg button[aria-pressed="true"].in {background: #55702c; color: #f1edd5; border-color: #7d9441;}
html[data-style="military"]:root .seg button.maybe {background: #3a2f10; color: #e0b43a;}
html[data-style="military"]:root .seg button.out {background: #3a1c18; color: #e0796b;}

/* ---- spartan ---- */
html[data-style="spartan"]:root {--bg: #0f0f12; --surface: #18181d; --surface-2: #222229; --fg: #f4efe6; --muted: #9c9aa3; --line: rgba(255, 255, 255, 0.08);
  --accent: #d63a32; --accent-2: #a1211c; --accent-fg: #fff7ea; --accent-soft: #3a1618; --accent-ink: #ff8b7e;
  --pop: #e3b55c; --pop-soft: #3a2f15; --gold: #e3b55c;
  --shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 34px -14px rgba(0, 0, 0, 0.8);
  --radius: 16px; --radius-sm: 10px; color-scheme: dark;}
html[data-style="spartan"]:root body {background:
    radial-gradient(560px 360px at 100% -60px, rgba(214, 58, 50, .26), transparent 70%),
    radial-gradient(480px 340px at -10% 105%, rgba(227, 181, 92, .10), transparent 70%),
    var(--bg);
  background-attachment: fixed; color: var(--fg);}
html[data-style="spartan"]:root h1 {font-weight: 800; font-size: 24px; letter-spacing: -.01em; text-transform: none; color: var(--fg); background: none; -webkit-background-clip: initial; background-clip: initial;}
html[data-style="spartan"]:root h1::before {content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .45em; vertical-align: -.14em; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='7' fill='%23c0392b'/><path d='M7 17.5L12 6.5L17 17.5' fill='none' stroke='%23fff3dc' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/></svg>") center / contain no-repeat;}
html[data-style="spartan"]:root h2,
html[data-style="spartan"]:root h3,
html[data-style="spartan"]:root h4 {font-weight: 700; letter-spacing: -.005em;}
html[data-style="spartan"]:root .section-head h2,
html[data-style="spartan"]:root .section-head h3 {position: relative; padding-bottom: 8px;}
html[data-style="spartan"]:root .section-head h2::after,
html[data-style="spartan"]:root .section-head h3::after {content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--gold));}
html[data-style="spartan"]:root .stats {background: rgba(255,255,255,.05); color: var(--gold); border: 1px solid var(--line); border-radius: 999px; box-shadow: none; font-weight: 600;}
html[data-style="spartan"]:root .id-bar {border-radius: 16px; background: rgba(24, 24, 29, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line);}
html[data-style="spartan"]:root .id-bar .chip.me {background: var(--accent-soft); color: var(--accent-ink); border: 0; border-radius: 999px; font-weight: 600;}
html[data-style="spartan"]:root .dot {background: var(--accent) !important;}
html[data-style="spartan"]:root .icon-btn {background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;}
html[data-style="spartan"]:root .hero {border-radius: 22px; color: #fff7ea; border: 1px solid rgba(255,255,255,.1); position: relative; overflow: hidden;
  background: radial-gradient(420px 220px at 100% 0%, rgba(227,181,92,.28), transparent 70%), linear-gradient(150deg, #d63a32 0%, #8f1d1c 62%, #4a0f12 100%);
  box-shadow: 0 22px 40px -18px rgba(214, 58, 50, .6);}
html[data-style="spartan"]:root .hero::before {content: ""; position: absolute; right: -26px; top: -18px; left: auto; bottom: auto; inset: auto; width: 150px; height: 150px; border: 0; border-radius: 0; pointer-events: none; opacity: .14;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 21L12 3L20 21' fill='none' stroke='white' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/></svg>") center / contain no-repeat;}
html[data-style="spartan"]:root .hero::after {display: none;}
html[data-style="spartan"]:root .hero-hi {color: #ffe3a8; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;}
html[data-style="spartan"]:root .hero h2 {font-weight: 800; font-size: 25px; letter-spacing: -.015em; line-height: 1.2; color: #fff;}
html[data-style="spartan"]:root .card,
html[data-style="spartan"]:root .new,
html[data-style="spartan"]:root .news,
html[data-style="spartan"]:root .hc,
html[data-style="spartan"]:root .empty,
html[data-style="spartan"]:root .pay,
html[data-style="spartan"]:root .hl {border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);}
html[data-style="spartan"]:root .when {background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; color: var(--fg);}
html[data-style="spartan"]:root .news::before {background: linear-gradient(180deg, var(--accent), var(--gold));}
html[data-style="spartan"]:root .chip {border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 500; color: var(--fg);}
html[data-style="spartan"]:root .chip.me {background: var(--accent-soft); color: var(--accent-ink); border-color: transparent;}
html[data-style="spartan"]:root .chip.dim {background: transparent; border-style: dashed; color: var(--muted);}
html[data-style="spartan"]:root .eyes.ok,
html[data-style="spartan"]:root .ok {color: var(--gold);}
html[data-style="spartan"]:root button.primary,
html[data-style="spartan"]:root .paybtn.on,
html[data-style="spartan"]:root .slotchip.sel,
html[data-style="spartan"]:root #drawer .tabs button[aria-selected="true"] {background: linear-gradient(180deg, #e2463d, #b32922); color: #fff; border: 0; border-radius: 12px; box-shadow: 0 10px 20px -10px rgba(214,58,50,.8), inset 0 1px 0 rgba(255,255,255,.25);}
html[data-style="spartan"]:root button.primary {font-weight: 700; letter-spacing: .01em;}
html[data-style="spartan"]:root button.quiet {border-radius: 12px; color: var(--gold);}
html[data-style="spartan"]:root input,
html[data-style="spartan"]:root textarea,
html[data-style="spartan"]:root select {background: #0c0c0f; border: 1px solid var(--line); border-radius: 12px; color: var(--fg);}
html[data-style="spartan"]:root input:focus,
html[data-style="spartan"]:root textarea:focus,
html[data-style="spartan"]:root select:focus {border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227,181,92,.22); outline: none;}
html[data-style="spartan"]:root .seg button {border-radius: 12px; font-weight: 700;}
html[data-style="spartan"]:root .seg button.in,
html[data-style="spartan"]:root .seg button[aria-pressed="true"].in {background: #2f7d4f; color: #fff; border-color: transparent;}
html[data-style="spartan"]:root .seg button.maybe {background: #3a2f15; color: var(--gold);}
html[data-style="spartan"]:root .seg button.out {background: #3a1618; color: var(--accent-ink);}
html[data-style="spartan"]:root #drawer {background: rgba(15,15,18,.96); border-right: 1px solid var(--line); border-radius: 0 22px 22px 0;}
html[data-style="spartan"]:root #drawer .tabs button {border-radius: 14px; font-weight: 600; color: var(--fg);}
html[data-style="spartan"]:root #drawer .tabs .ti {background: var(--surface-2); color: var(--gold); border-radius: 11px; border: 0;}
html[data-style="spartan"]:root #drawer .tabs button[aria-selected="true"] .ti {background: rgba(0,0,0,.25); color: #fff;}
html[data-style="spartan"]:root .lb li {border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line);}
html[data-style="spartan"]:root .lb li.r1 {background: linear-gradient(90deg, rgba(227,181,92,.26), var(--surface-2) 75%);}
html[data-style="spartan"]:root .lb li.r2 {background: linear-gradient(90deg, rgba(190,200,215,.20), var(--surface-2) 75%);}
html[data-style="spartan"]:root .lb li.r3 {background: linear-gradient(90deg, rgba(210,135,80,.24), var(--surface-2) 75%);}
html[data-style="spartan"]:root .lb li.mine,
html[data-style="spartan"]:root .pod.mine {outline-color: var(--gold);}
html[data-style="spartan"]:root .pod {border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 600;}
html[data-style="spartan"]:root .hl.mini h4 {color: var(--gold);}
html[data-style="spartan"]:root .slotchip {border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 600;}
html[data-style="spartan"]:root .slotchip.filled {background: var(--accent-soft); color: var(--accent-ink); border-color: transparent;}
html[data-style="spartan"]:root .slotchip.addchip {border: 1px dashed var(--gold); color: var(--gold); background: transparent;}
html[data-style="spartan"]:root .fee {background: var(--pop-soft); color: var(--gold); border-radius: 999px;}
html[data-style="spartan"]:root .fee.none {background: var(--surface-2); color: var(--muted);}
html[data-style="spartan"]:root .paybtn {border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700;}
html[data-style="spartan"]:root .pchip.ok {background: var(--accent-soft); color: var(--accent-ink);}
html[data-style="spartan"]:root .bar {background: var(--surface-2);}
html[data-style="spartan"]:root .bar > i {background: linear-gradient(90deg, var(--accent), var(--gold));}
html[data-style="spartan"]:root .se .stp {border-radius: 10px; background: var(--surface-2); border-color: var(--line); color: var(--gold);}
html[data-style="spartan"]:root .gearwrap {border-color: var(--line); border-radius: 20px; background: radial-gradient(ellipse at 50% 38%, #2a2024 0%, #0c0c0f 74%);}
html[data-style="spartan"]:root .gearwrap::before,
html[data-style="spartan"]:root .gearwrap::after {border-color: var(--gold);}
html[data-style="spartan"]:root #gear-fig .weap.filled .rifleimg {filter: drop-shadow(0 0 .8px #ffe9b0) drop-shadow(0 0 .8px #ffe9b0) drop-shadow(0 0 4px rgba(227,181,92,.9));}
html[data-style="spartan"]:root #gear-fig .weap.sel .rifleimg {filter: grayscale(1) brightness(.8) drop-shadow(0 0 .8px #e3b55c) drop-shadow(0 0 .8px #e3b55c);}
html[data-style="spartan"]:root #gear-fig .weap.filled .frame {stroke: transparent;}
html[data-style="spartan"]:root .gearpill {border-radius: 12px; background: var(--surface);}
html[data-style="spartan"]:root .gearpill .lbl {color: var(--gold);}
html[data-style="spartan"]:root .guidebtn {border-radius: 999px; color: var(--gold);}
html[data-style="spartan"]:root .toast {border-radius: 12px; background: var(--surface-2); border: 1px solid var(--gold); color: var(--fg);}

/* gear outline glow colour per style */
html[data-style="rugged"] #gf1 { flood-color: #ff8a80; } html[data-style="rugged"] #gf2 { flood-color: #e0262b; }
html[data-style="military"] #gf1 { flood-color: #e6f58a; } html[data-style="military"] #gf2 { flood-color: #b8d83a; }
html[data-style="spartan"] #gf1 { flood-color: #ffe9b0; } html[data-style="spartan"] #gf2 { flood-color: #e3b55c; }

html[data-style="spartan"]:root h1::before { display: none; }