:root{color-scheme:dark;--bg:#090a09;--panel:#10120f;--line:#2b2e27;--muted:#92978c;--orange:#f28729}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 0 35%,#26170b55,transparent 40%),var(--bg);color:#f6f6ef;font:14px Arial,sans-serif}header,main,footer{max-width:1260px;margin:auto}header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-weight:900;letter-spacing:1px;font-size:16px;color:white;text-decoration:none}.brand:first-letter{color:var(--orange)}.orange,em,.eyebrow{color:var(--orange)}small,.eyebrow,.sectionline,th{font:10px monospace;letter-spacing:1px}header small{color:var(--orange)}button,select,input{font:inherit;color:inherit;background:#11130f;border:1px solid var(--line);border-radius:7px;padding:12px}button,a,select{cursor:pointer}button:hover{border-color:var(--orange);background:#261b10}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--orange);outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}.hero{padding:45px 20px 36px;display:flex;justify-content:space-between;min-height:290px}h1{font-size:62px;letter-spacing:-3px;line-height:.95;margin:20px 0 14px}em{font-style:normal}.intro{color:#b8bcb1;line-height:1.8}.browse{color:#d0c4b6;text-decoration:none;font-size:12px}.art{width:300px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column}.orb{font-size:95px;filter:drop-shadow(0 0 40px #b84c1238);transform:rotate(-9deg)}.art small{color:var(--orange);margin-top:12px}.art p{font:10px/1.8 monospace;color:var(--muted);border-left:2px solid var(--orange);padding-left:12px;align-self:flex-end}.calculator{background:linear-gradient(140deg,#141710,#0c0e0c);border:1px solid var(--line);border-radius:12px;padding:24px}.sectionline{display:flex;justify-content:space-between;color:#bac0ae;margin-bottom:22px}.offers{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:20px}.offer{border:1px solid var(--line);border-radius:9px;background:#0a0c0a;padding:18px}.offertitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.offertitle h3{font:12px monospace;margin:0 0 8px}.offertitle small{color:var(--muted);font-size:9px}.number{color:var(--orange);margin-right:12px;border:1px solid #775022;padding:10px;border-radius:6px}.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}.slot{min-height:72px;text-align:left;font-size:11px;display:flex;align-items:center;gap:10px;position:relative}.slot .plus{font-size:23px;color:#89907c;border:1px dashed #434936;border-radius:6px;padding:0 7px}.slot small{color:var(--muted);font-size:9px}.slot b{display:block;margin-bottom:5px}.slot.filled{border-color:#654320;background:#1b160e}.remove{margin-left:auto;color:var(--orange);font-size:18px}.totals{border-top:1px solid var(--line);margin-top:15px;padding-top:15px;display:flex;justify-content:space-between}.totals small{color:var(--muted);font-size:9px;display:block;margin-bottom:8px}.totals strong{font-size:22px;font-weight:400}.totals div:last-child{text-align:right}.swap{color:var(--orange);border-color:#7a4819;border-radius:50%;font-size:25px;width:48px;height:48px;padding:0;justify-self:center}.verdict{border:1px solid var(--line);padding:18px;margin-top:14px;border-radius:7px;display:flex;justify-content:space-between;align-items:center}.verdict small{color:var(--muted)}.verdict h3{font-size:14px;margin:10px 0}.verdict p{color:#a4aa99;font-size:12px;margin:0}.difference{text-align:right}.difference strong{display:block;font-size:24px;margin-top:10px}.win{color:#9adf90}.loss{color:#ff8177}.fair{color:var(--orange)}#catalog{padding:65px 0 35px;scroll-margin-top:25px}.catalog-heading{display:flex;justify-content:space-between;align-items:center}h2{font-size:30px;letter-spacing:-1px;margin:12px 0}.muted{color:var(--muted);line-height:1.6}.catalog-heading a{color:var(--orange);font-size:12px}.toolbar{display:flex;gap:10px;margin-top:26px}.toolbar input{flex:1}.statusbar{display:flex;justify-content:space-between;margin:18px 0;color:var(--muted);font:10px monospace}.tablewrap{border:1px solid var(--line);border-radius:9px;overflow:auto}table{width:100%;border-collapse:collapse;text-align:left}th{color:var(--muted);padding:18px;background:#131610}td{border-top:1px solid #25291f;padding:16px 18px;font-size:12px}td:first-child strong{display:block;font-size:14px;margin-bottom:6px}td small{color:var(--muted);font-size:10px}td:nth-child(4){color:#ffac61;font:bold 16px monospace}td button{font-size:11px;padding:8px 11px;margin-right:5px}tbody tr:hover{background:#151810}.note{font-size:11px}footer{padding:30px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}dialog{background:#10130f;color:white;border:1px solid #464c3e;border-radius:12px;width:580px;max-width:95vw;padding:24px}dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.modalhead{display:flex;justify-content:space-between;align-items:center}.modalhead small{color:var(--orange)}#picksearch{width:100%;margin:14px 0}#choices{max-height:52vh;overflow:auto}.choice{width:100%;display:flex;justify-content:space-between;text-align:left;margin:6px 0}.choice small{display:block;color:var(--muted);margin-top:6px}.choice strong{color:var(--orange)}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#302314;border:1px solid var(--orange);border-radius:8px;padding:14px;display:none;z-index:10}@media(max-width:1300px){header,main,footer{margin-left:24px;margin-right:24px}}@media(max-width:760px){header small,.art{display:none}header{height:70px}.hero{padding:30px 0}h1{font-size:52px}.calculator{padding:14px}.offers{grid-template-columns:1fr;gap:12px}.swap{height:35px;font-size:20px}.sectionline{font-size:8px;gap:20px}.toolbar{flex-wrap:wrap}.toolbar input{flex-basis:100%}.toolbar select{flex:1;min-width:120px}.catalog-heading{align-items:flex-start;gap:15px}.catalog-heading a{margin-top:20px}.verdict{gap:12px}.verdict p{max-width:220px}.difference strong{font-size:20px}footer{gap:20px;line-height:1.7}td,th{padding:12px;white-space:nowrap}}

.item-identity{display:flex;align-items:center;gap:14px}.item-picture{width:54px;height:54px;flex:0 0 54px;border:1px solid #343b2b;background:#181d14;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.item-picture img{width:100%;height:100%;object-fit:contain;padding:4px}.image-missing{color:#657055;font-size:23px}.item-picture [hidden]{display:none}.slot .item-picture{width:42px;height:42px;flex-basis:42px}.slot.filled{min-height:80px}.slot.filled>span:nth-child(2){min-width:0;flex:1}.choice{align-items:center;gap:10px}.choice>.item-identity{min-width:0}.choice strong{white-space:nowrap}footer a{color:#b5bda7}td:first-child{min-width:255px}@media(max-width:760px){.slot.filled{flex-wrap:wrap}.slot .item-picture{width:34px;height:34px;flex-basis:34px}.slot.filled b{font-size:10px}.slot.filled small{font-size:8px}.slot.filled{gap:6px}.choice .item-identity{gap:10px}}

/* Monochrome black / white theme */
:root{color-scheme:dark;--bg:#000;--panel:#080808;--line:#fff;--muted:#bcbcbc;--orange:#fff}
body{background:#000;color:#fff}
header,footer{border-color:#fff}
.calculator,.offer,.verdict,dialog,.tablewrap{background:#050505;border-color:#fff}
button,select,input,.choice{background:#050505;color:#fff;border:1px solid #fff}
button:hover,.choice:hover{background:#222;border-color:#fff}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#fff}
.orange,em,.eyebrow,header small,.art small,.catalog-heading a,.choice strong,.remove,.swap,.fair{color:#fff}
.number,.swap,.item-picture,.slot .plus,.slot.filled{border-color:#fff;background:#090909;color:#fff}
.intro,.browse,.sectionline,.verdict p,.muted,.statusbar,td small,.choice small,.offertitle small,.totals small{color:#ddd}
.art p{border-color:#fff}.orb{filter:grayscale(1)}
th{background:#0b0b0b;color:#fff}td{border-top-color:#fff}td:nth-child(4){color:#fff}tbody tr:hover{background:#1c1c1c}
.item-picture{background:#050505}.image-missing{color:#fff}
#toast{background:#111;border-color:#fff}.win,.loss{color:#fff}

/* Collector labels are visual only: original categories, values and sorting remain unchanged. */
.collector-tag{display:inline-block;margin:5px 5px 3px 0;padding:3px 7px;border:1px solid #fff;border-radius:4px;background:#111;color:#fff;font:700 9px monospace;letter-spacing:.6px;vertical-align:middle;white-space:nowrap}

/* Item details and credits */
.item-row{cursor:pointer}.item-row:focus-visible{outline:2px solid white;outline-offset:-3px}.item-row:hover{background:#222}.details-identity{display:flex;align-items:center;gap:18px;margin:20px 0}.details-identity .item-picture{width:90px;height:90px;flex-basis:90px;border-color:#fff}.details-identity p{color:#ddd}.details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.details-grid>div{border:1px solid #fff;border-radius:8px;padding:14px;min-width:0}.details-grid dt{font:11px monospace;color:#ccc;margin-bottom:8px}.details-grid dd{margin:0;font-weight:700;font-size:17px;overflow-wrap:anywhere}.credits-link{border:1px solid #fff;background:#000;color:#fff;padding:9px 14px}#credits-dialog{max-width:95vw}#credits-dialog p{font-size:18px}#item-details{max-height:85vh;overflow:auto}@media(max-width:760px){footer{flex-wrap:wrap}.details-grid{grid-template-columns:1fr 1fr}}

.match-percent{display:block;margin-top:8px;letter-spacing:.08em;color:#fff;font-size:.8rem;font-weight:700}

/* Header credits control */
.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.header-actions .credits-link{border:1px solid #fff;background:#000;color:#fff;padding:10px 15px;border-radius:8px;cursor:pointer}.header-actions .credits-link:hover{background:#222}@media(max-width:640px){header{flex-wrap:wrap;gap:10px}.header-actions{margin-left:auto}}

/* Visible creator credit beside the title, including on mobile */
.header-actions .credits-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;line-height:1.2;white-space:nowrap}.header-actions .credits-link small{display:block;color:#fff;font:11px Arial,sans-serif;letter-spacing:0}.header-actions .credits-link span{font-weight:700}@media(max-width:640px){header{height:auto;min-height:96px;padding:12px 0}.header-actions{justify-content:flex-end}.header-actions .credits-link{padding:8px 10px}.header-actions .credits-link small{font-size:10px}}

/* Credits beside the large headline, in the former hero artwork position */
.hero-credits{display:flex;align-items:center;justify-content:center;flex:0 0 32%;min-width:0}
.hero-credits .old-hero-art{display:none}
.hero-credits .credits-link{display:flex;flex-direction:column;align-items:center;gap:7px;background:#000;border:1px solid #fff;border-radius:12px;padding:17px 14px;max-width:100%;white-space:normal;text-align:center}
.hero-credits .credits-link span{font-size:19px;font-weight:700}
.hero-credits .credits-link small{display:block;color:#fff;font:12px Arial,sans-serif;letter-spacing:0}
@media(max-width:760px){.hero{display:grid;grid-template-columns:minmax(0,1fr) 30%;align-items:start;gap:8px}.hero h1{font-size:clamp(34px,9vw,52px);letter-spacing:-2px}.hero-credits{display:flex!important;width:100%;padding-top:72px}.hero-credits .credits-link{padding:12px 7px}.hero-credits .credits-link span{font-size:14px}.hero-credits .credits-link small{font-size:10px;overflow-wrap:anywhere}.hero .intro,.hero .browse{max-width:100%}}
@media(max-width:400px){.hero{grid-template-columns:minmax(0,1fr) 34%}.hero h1{font-size:clamp(31px,8.5vw,40px)}.hero-credits{padding-top:65px}}

/* Compact mobile trade comparison: your offer, result, then their offer. */
.mobile-verdict{display:none}
@media(max-width:760px){
  .offers{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  #your,#their{width:100%}
  .mobile-verdict{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:18px 12px;border:2px solid #fff;border-radius:12px;text-align:center;background:#050505}
  .mobile-verdict small{font:11px monospace;letter-spacing:2px;color:#ccc}
  .mobile-verdict strong{font-size:clamp(18px,5vw,24px);font-weight:800}
  .mobile-verdict span{font-size:12px;line-height:1.5;color:#ddd}
  .mobile-verdict #mobile-verdict-difference{font:13px monospace}
  .mobile-verdict .win{color:#9adf90}.mobile-verdict .loss{color:#ff8177}.mobile-verdict .fair{color:#fff}
  .calculator>.verdict{display:none}
  #their{display:flex;flex-direction:column}
  #their .totals{order:-1;margin:0 0 18px;padding:0 0 14px;border-top:0;border-bottom:1px solid #fff}
  #their .offertitle{order:0}
  #their .slots{order:1}
  #your .totals{margin-top:15px}
  .swap{align-self:center}
}

.details-add-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 12px}.details-add-actions button{border:2px solid #fff;background:#000;color:#fff;border-radius:12px;padding:16px 8px;font-size:16px;font-weight:700;cursor:pointer}.details-add-actions button:disabled{opacity:.4;cursor:not-allowed}@media(max-width:380px){.details-add-actions button{font-size:14px;padding:14px 5px}}

/* Midnight blue and white redesign */
:root{--bg:#050c1d;--panel:#0b1730;--line:#7db8ff;--muted:#b4c9e8;--orange:#90c8ff;color-scheme:dark}
body{background:radial-gradient(ellipse at 85% 8%,#153a72 0%,transparent 38%),linear-gradient(180deg,#08142c 0%,#040a18 75%);color:#f7fbff}
header,footer{border-color:#6aa8f2}
.calculator{background:linear-gradient(145deg,#102a50,#07152c 65%,#081326);border-color:#83bfff;box-shadow:0 12px 38px #0006}
.offer,.verdict,.tablewrap,dialog{background:#0a1933;border-color:#75b4ff}
button,select,input,.choice{background:#10284c;color:#fff;border-color:#74b5ff}
button:hover,.choice:hover,.item-row:hover{background:#1c467a;border-color:#e8f5ff}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.item-row:focus-visible{outline-color:#b9dcff}
.orange,em,.eyebrow,header small,.art small,.catalog-heading a,.choice strong,.remove,.swap,.fair,.match-percent{color:#a8d6ff}
.number,.swap,.item-picture,.slot .plus,.slot.filled{border-color:#8bc5ff;background:#10294c;color:#fff}
.intro,.browse,.sectionline,.verdict p,.muted,.statusbar,td small,.choice small,.offertitle small,.totals small,.details-identity p{color:#c4d9f3}
.art p{border-color:#91c9ff}th{background:#132f54;color:#fff}td{border-top-color:#4d81b8}td:nth-child(4){color:#d7edff}tbody tr:hover{background:#18365a}
.item-picture{background:#0b1b35}.image-missing{color:#b8dbff}
#toast{background:#102b50;border-color:#a5d6ff}.win{color:#86e8cd}.loss{color:#ffaab9}
.collector-tag{background:#183a65;border-color:#9bcfff;color:#fff}
.details-grid>div{background:#0b2242;border-color:#80b9ff}.details-grid dt{color:#bdd8f7}
.credits-link,.header-actions .credits-link{background:#12345c;border-color:#8bc4ff;color:#fff}.header-actions .credits-link:hover{background:#215083}
footer a{color:#c6e4ff}.slot.filled{background:#12335d}

/* Wider desktop layout: reduce empty side gutters while preserving mobile layout. */
@media (min-width: 1000px) {
  header, main, footer { max-width: 1660px; width: calc(100% - 48px); margin-left: auto; margin-right: auto; }
  .calculator { padding: 22px; }
  .offers { grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr); gap: 16px; }
  .offer { min-width: 0; }
}
@media (min-width: 1600px) {
  header, main, footer { width: calc(100% - 64px); }
}

/* Header language picker */
.language-control{display:inline-flex;align-items:center;gap:8px;color:#e8f3ff;font-size:13px;white-space:nowrap}
.language-control select{background:#071b39;color:#fff;border:1px solid #85baff;border-radius:8px;padding:9px 12px;font:inherit;cursor:pointer}
.header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:640px){.language-control{font-size:12px}.language-control span{display:none}.language-control select{padding:9px 6px}.header-actions{gap:6px}}

/* Compact, screenshot-friendly mobile trade layout. */
@media(max-width:760px){
 .calculator{padding:10px;border-radius:12px}
 .sectionline{margin-bottom:12px;gap:8px}
 .offers{gap:8px}
 .offer{padding:11px;border-radius:10px}
 .offertitle{margin-bottom:10px}
 .offertitle h3{font-size:12px}
 .offertitle small{font-size:9px}
 .number{padding:7px;margin-right:7px}
 .slots{gap:6px}
 .slot,.slot.filled{min-height:57px;padding:8px 7px;gap:7px}
 .slot .plus{font-size:20px;padding:0 6px}
 .slot .item-picture{width:29px;height:29px;flex-basis:29px}
 .slot.filled b{font-size:10px;line-height:1.15}
 .slot.filled small{font-size:8px;line-height:1.15}
 .totals{margin-top:10px;padding-top:10px}
 .totals small{margin-bottom:4px}
 .totals strong{font-size:19px}
 .swap{width:36px;height:36px;font-size:19px}
 .mobile-verdict{padding:10px 12px;gap:4px;border:1px solid #8bc5ff;border-radius:10px;background:#0c2444}
 .mobile-verdict small{font-size:10px;letter-spacing:1.3px}
 .mobile-verdict strong{font-size:clamp(14px,4.4vw,19px);line-height:1.2}
 .mobile-verdict span{font-size:11px;line-height:1.3}
 .mobile-verdict #mobile-verdict-difference{font-size:12px}
}
@media(max-width:390px){
 .slot,.slot.filled{padding:7px 5px;gap:5px;min-height:53px}
 .slot .plus{font-size:18px}
 .slot{font-size:10px}
}

.trade-opinion{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.trade-opinion:empty{display:none}
.opinion-pill{font:700 11px/1.3 monospace;letter-spacing:.06em;padding:5px 9px;border:1px solid #82baff;border-radius:7px;background:#15345e;color:#fff}
.opinion-pill.overpay{border-color:#ffa2a2;color:#ffd4d4}
.opinion-pill.underpaying{border-color:#91dfb8;color:#c8ffe0}
.opinion-pill.upgrade{border-color:#8dbfff;color:#d7eaff}
.opinion-pill.downgrade{border-color:#e5b5ff;color:#f2dcff}
.mobile-verdict .trade-opinion{justify-content:center;margin:3px 0}
@media(max-width:760px){.opinion-pill{font-size:10px;padding:4px 7px}}

/* Colour theme selector */
:root{--theme-bg:#071a35;--theme-accent:#6fb6ff;--theme-light:#d9edff;--orange:var(--theme-accent);--line:color-mix(in srgb,var(--theme-accent) 28%,var(--theme-bg))}
body{background:radial-gradient(ellipse at 8% 12%,color-mix(in srgb,var(--theme-accent) 14%,transparent),transparent 55%),var(--theme-bg);color:#f5f8ff}
.calculator{background:linear-gradient(140deg,color-mix(in srgb,var(--theme-bg) 83%,var(--theme-accent)),var(--theme-bg));border-color:var(--line)}
.offer,.verdict,.mobile-verdict,dialog,.tablewrap{background:color-mix(in srgb,var(--theme-bg) 92%,black);border-color:var(--line)}
button,select,input,.choice{background:color-mix(in srgb,var(--theme-bg) 82%,black);border-color:var(--line);color:#f5f8ff}
button:hover,.choice:hover,tbody tr:hover{background:color-mix(in srgb,var(--theme-bg) 65%,var(--theme-accent));border-color:var(--theme-accent)}
.orange,em,.eyebrow,header small,.catalog-heading a,.choice strong,.remove,.swap,.fair,.brand:first-letter{color:var(--theme-accent)}
.number,.swap,.item-picture,.slot .plus,.slot.filled,.details-grid>div,.credits-link,.details-add-actions button{border-color:var(--line);background:color-mix(in srgb,var(--theme-bg) 85%,black);color:var(--theme-light)}
.intro,.browse,.sectionline,.verdict p,.muted,.statusbar,td small,.choice small,.offertitle small,.totals small{color:color-mix(in srgb,var(--theme-light) 75%,#a1a1a1)}
th{background:color-mix(in srgb,var(--theme-bg) 75%,black);color:var(--theme-light)}
td{border-top-color:var(--line)}td:nth-child(4),.difference strong{color:var(--theme-light)}
.item-picture{background:color-mix(in srgb,var(--theme-bg) 88%,black)}.image-missing{color:var(--theme-accent)}
.collector-tag,.opinion-pill{border-color:var(--theme-accent);background:color-mix(in srgb,var(--theme-bg) 70%,black);color:var(--theme-light)}
#toast{background:var(--theme-bg);border-color:var(--theme-accent)}
#their .totals{border-color:var(--line)}
.mobile-verdict{border-color:var(--theme-accent);background:color-mix(in srgb,var(--theme-bg) 85%,black)}
.credits-link,.hero-credits .credits-link{background:color-mix(in srgb,var(--theme-bg) 80%,black);border-color:var(--line)}
#themes-dialog{width:min(570px,95vw);max-height:85vh;overflow:auto}
.theme-help{font-size:13px;color:var(--theme-light);line-height:1.5}
.theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
.theme-choice{padding:8px;display:flex;flex-direction:column;gap:8px;align-items:stretch;font-size:12px;font-weight:700;text-align:center;border:2px solid var(--line);border-radius:12px}
.theme-choice.selected{border-color:var(--theme-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent) 25%,transparent)}
.theme-preview{height:54px;border-radius:7px;background:var(--preview-bg);display:flex;gap:5px;align-items:flex-end;padding:10px}
.theme-preview span{flex:1;background:var(--preview-accent);height:55%;border-radius:3px}.theme-preview span:nth-child(2){height:85%}.theme-preview span:nth-child(3){height:35%}
.themes-open{white-space:nowrap;border-color:var(--theme-accent)}
@media(max-width:760px){.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-actions{gap:6px}.themes-open{padding:9px 8px;font-size:12px}}
