#configurator { min-width:0; padding:12px 0 28px; }
#configurator *, #configurator *::before, #configurator *::after { box-sizing:border-box; }
#configurator [hidden] { display:none!important; }
#configurator a { color:inherit; }
#configurator button, #configurator input, #configurator select { font:inherit; }
#configurator button { cursor:pointer; }
#configurator button:disabled { opacity:.5; cursor:not-allowed; }
#configurator :focus-visible { outline:2px solid #6ff3b0; outline-offset:4px; }
#configurator .muted { color:#a5b8ac; }
#configurator .small { font-size:13px; }
#configurator h1 { font-size:clamp(28px,4vw,38px); letter-spacing:-.8px; margin:12px 0; overflow-wrap:anywhere; }
#configurator h2 { font-size:21px; margin:0 0 18px; overflow-wrap:anywhere; }
#configurator h3 { font-size:19px; margin:0 0 8px; }
#configurator p { line-height:1.6; }
#configurator .subtitle { margin:0 0 28px; color:#a5b8ac; font-size:15px; }
#configurator .steps { display:flex; justify-content:space-between; gap:20px; margin:8px 0 24px; padding:0; list-style:none; color:#a1b4a8; font-size:14px; }
#configurator .steps li { display:flex; align-items:center; gap:9px; }
#configurator .steps b { flex:0 0 26px; height:26px; border:1px solid #435749; border-radius:50%; display:grid; place-items:center; font-size:12px; }
#configurator .steps .active { color:#86f6b6; }
#configurator .steps .active b { background:#6ff3b0; color:#103221; border-color:#6ff3b0; }
#configurator .steps .complete b { border-color:#6ff3b0; color:#86f6b6; }
#configurator .steps a { text-underline-offset:4px; }
#configurator .back-link { display:inline-block; margin:2px 0 12px; color:#bdd2c5; font-size:13px; text-underline-offset:4px; }
#configurator .banner { position:static; overflow:visible; background:#182b1e; background-image:none; border:1px solid #335740; border-radius:12px; padding:15px 18px; color:#c6ebd2; font-size:14px; line-height:1.55; margin:20px 0; box-shadow:none; }
#configurator .banner p { max-width:none; margin:0; color:inherit; line-height:1.55; }
#configurator .banner p + p { margin-top:8px; }
#configurator .warning { display:flex; flex-wrap:wrap; gap:5px 14px; background:#2a2417; border-color:#695532; color:#f4dcac; font-size:12px; }
#configurator .warning strong { letter-spacing:.04em; }
#configurator .error { background:#361d21; border-color:#a35259; color:#ffd1d1; overflow-wrap:anywhere; }
#configurator .grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
#configurator .card, #configurator .panel { min-width:0; background:rgba(18,29,23,.95); border:1px solid #304337; border-radius:16px; }
#configurator .card { padding:16px; display:flex; flex-direction:column; gap:12px; }
#configurator .card h2 { margin:0; font-size:18px; }
#configurator .card p { margin:0; }
#configurator .card .btn { margin-top:auto; }
#configurator .cover { display:block; width:100%; height:210px; object-fit:contain; background:#0d1510; border-radius:10px; }
#configurator .availability { display:block; font-size:12px; color:#c7bd9f; }
#configurator .availability.available { color:#90efb5; }
#configurator .card-price { font-size:14px; color:#d5e6db; }
#configurator .btn { display:block; width:100%; background:#6ff3b0; color:#102b1c; padding:14px 18px; border:1px solid transparent; border-radius:10px; text-align:center; font-weight:700; text-decoration:none; font-size:14px; line-height:1.4; }
#configurator .btn:hover:not(:disabled) { filter:brightness(1.07); }
#configurator .secondary { background:#1c2a21; color:#d9e7df; border-color:#3b5143; }
#configurator .text-button { background:none; border:0; padding:10px 2px; color:#9aefbd; text-decoration:underline; text-underline-offset:3px; }
#configurator .primary-action { margin-top:24px; }
#configurator .stacked-action { margin-top:12px; }
#configurator .actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
#configurator .actions>* { flex:1; }
#configurator .tag { display:inline-block; max-width:100%; background:#21392a; color:#a1edbf; font-size:11px; letter-spacing:.07em; padding:7px 9px; border-radius:6px; overflow-wrap:anywhere; }
#configurator .twocol { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:24px; align-items:start; }
#configurator .panel { padding:26px; }
#configurator .game { display:flex; align-items:center; gap:18px; padding-bottom:22px; border-bottom:1px solid #2b3b31; font-size:20px; font-weight:600; overflow-wrap:anywhere; }
#configurator .game img { height:86px; width:65px; object-fit:contain; flex-shrink:0; }
#configurator .controls { padding:26px 0 0; }
#configurator .controls:empty { display:none; }
#configurator .resource { margin-bottom:30px; }
#configurator .resource:last-child { margin-bottom:0; }
#configurator .row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
#configurator .resource label { display:block; margin-bottom:4px; font-weight:600; }
#configurator .resource output { font-size:24px; font-weight:700; white-space:nowrap; }
#configurator .resource input[type=range] { width:100%; margin:22px 0 12px; accent-color:#6ff3b0; cursor:pointer; appearance:none; -webkit-appearance:none; height:8px; border-radius:6px; background:linear-gradient(to right,#6ff3b0 0%,#6ff3b0 var(--fill,0%),#344c3e var(--fill,0%),#344c3e 100%); }
#configurator .resource input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:23px; height:23px; background:#bbffd7; border:4px solid #6ff3b0; border-radius:50%; }
#configurator .resource input[type=range]::-moz-range-thumb { width:15px; height:15px; background:#bbffd7; border:4px solid #6ff3b0; border-radius:50%; }
#configurator .ticks { display:flex; justify-content:space-between; color:#a2b6a9; font-size:12px; }
#configurator .price { font-size:clamp(36px,4vw,48px); letter-spacing:-1.5px; font-weight:700; margin:20px 0; overflow-wrap:anywhere; }
#configurator .price small { font-size:16px; letter-spacing:0; color:#a2b6a9; font-weight:400; }
#configurator .line { display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:12px 0; border-bottom:1px solid #304136; color:#c3d2c9; }
#configurator .line span { overflow-wrap:anywhere; }
#configurator .line b { color:#f4fff8; text-align:right; white-space:nowrap; }
#configurator .line:last-child { border:0; font-weight:600; }
#configurator .note { margin-top:20px; font-size:12px; color:#a3b6aa; line-height:1.6; }
#configurator .note a, #configurator .check a { text-decoration:underline; text-underline-offset:3px; }
#configurator .field { width:100%; min-width:0; display:block; border:1px solid #435d4c; background:#0d1710; border-radius:10px; padding:13px 15px; margin:8px 0 20px; color:#e0eee5; }
#configurator .catalog-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-bottom:24px; }
#configurator .search-label { flex:1 1 280px; max-width:480px; font-size:13px; color:#c9dbd0; }
#configurator .search-label .field { margin-bottom:0; }
#configurator .catalog-tools #results-count { margin-left:auto; }
#configurator .check { display:flex; align-items:flex-start; gap:12px; color:#c4d6cb; font-size:14px; line-height:1.6; margin:24px 0; }
#configurator .check input { margin-top:4px; accent-color:#6ff3b0; width:18px; height:18px; flex-shrink:0; }
#configurator .summary-strip { display:flex; flex-wrap:wrap; gap:18px 30px; margin:22px 0; padding:18px; background:#0c1710; border-radius:10px; }
#configurator .summary-strip strong { display:block; margin-top:6px; color:#e1eee5; }
#configurator .status-copy { margin-top:24px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
#configurator .order-list { display:grid; gap:16px; }
#configurator .order-list .btn { width:auto; }
#configurator .empty { padding:32px; text-align:center; }
#configurator .auth-panel { max-width:540px; margin:0 auto; }
#configurator .variant, #configurator .settings, #configurator .requirements { margin-top:24px; }
#configurator .settings, #configurator .requirements { border-top:1px solid #304136; padding-top:24px; }
#configurator .setting-label { display:block; font-size:14px; overflow-wrap:anywhere; }
#configurator .requirement { margin:16px 0; font-size:14px; overflow-wrap:anywhere; }
#configurator .requirements a { text-decoration:underline; text-underline-offset:3px; }
#configurator .settings .note { margin-top:-10px; }
#configurator .settings .note:first-child { margin-top:0; }
#configurator .payment-title { margin:32px 0 10px; padding-top:28px; border-top:1px solid #304136; }
#configurator .payment-title + p { margin:0 0 18px; font-size:14px; }
#configurator .panel .banner { margin:12px 0; font-size:13.5px; }
#configurator #capacity { background:#2a2417; border-color:#695532; color:#f4dcac; }
#configurator #capacity .small { margin-top:8px; padding-top:8px; border-top:1px solid rgba(244,220,172,.2); font-size:12.5px; color:#cdb98a; }
#configurator #refund-policy { background:#142319; border-color:#2f5139; color:#bfe0cb; }
#configurator .requirements h2, #configurator .settings h2 { margin-bottom:14px; }
#configurator .requirements .requirement, #configurator .requirements .check { margin:10px 0; padding:14px 16px; background:#0f1a13; border:1px solid #26382d; border-radius:10px; font-size:14px; line-height:1.55; }
#configurator .requirements .requirement > span, #configurator .requirements .check > span { display:block; color:#e1eee5; }
#configurator .requirements .requirement .small { margin:8px 0 0; font-size:12px; line-height:1.5; }
#configurator .requirements .check { align-items:flex-start; }
#configurator .setting-label { margin-bottom:6px; font-weight:600; }
#configurator .setting-label .field { margin:8px 0 0; }
#configurator .panel > .check { margin:20px 0 4px; padding:16px; background:#0f1a13; border:1px solid #26382d; border-radius:10px; }
#configurator .panel > .note { margin-top:14px; }
#configurator .price-panel { position:sticky; top:20px; }
#configurator .price-panel .note { margin-top:14px; }
#configurator .price-panel .tag { margin-bottom:0; }
#configurator .price-panel .price { margin:16px 0 18px; }
@media(max-width:1000px) {
  #configurator .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  #configurator .twocol { grid-template-columns:minmax(0,1fr); }
  #configurator .steps { gap:10px; font-size:12px; }
  #configurator .panel { padding:22px; }
}
@media(max-width:480px) {
  #configurator .steps { gap:6px; font-size:10px; }
  #configurator .steps li { flex-direction:column; gap:6px; text-align:center; }
  #configurator .steps b { width:24px; height:24px; flex-basis:24px; }
  #configurator .card { padding:12px; gap:10px; }
  #configurator .grid { gap:12px; }
  #configurator .cover { height:150px; }
  #configurator .card h2 { font-size:16px; }
  #configurator .card .btn { padding:12px 8px; font-size:12px; }
  #configurator .availability, #configurator .card-price { font-size:12px; }
  #configurator .catalog-tools #results-count { margin:0; }
  #configurator .resource output { font-size:21px; }
  #configurator .row { flex-wrap:wrap; }
  #configurator .panel { padding:18px; }
}

/* Order status page: one centered card, phase hero on top, actions at the bottom */
#configurator[data-view=status] .status-card { max-width:680px; margin:8px auto 0; padding:0; overflow:hidden; --tone:#b7c7bd; }
#configurator[data-view=status] .status-card > * { padding-left:32px; padding-right:32px; }
#configurator[data-view=status] [data-tone=good] { --tone:#6ff3b0; --tone-bg:#17331f; }
#configurator[data-view=status] [data-tone=info] { --tone:#8cc8ff; --tone-bg:#162a3b; }
#configurator[data-view=status] [data-tone=wait] { --tone:#f4cf7a; --tone-bg:#352c16; }
#configurator[data-view=status] [data-tone=bad] { --tone:#ff9a9a; --tone-bg:#3a1d21; }
#configurator[data-view=status] [data-tone=neutral] { --tone:#b7c7bd; --tone-bg:#202c25; }
#configurator[data-view=status] .phase { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding-top:40px; padding-bottom:32px; background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--tone) 14%,transparent),transparent 70%); border-bottom:1px solid #26382d; }
#configurator[data-view=status] .phase-icon { position:relative; width:76px; height:76px; border-radius:50%; border:4px solid color-mix(in srgb,var(--tone) 25%,transparent); display:grid; place-items:center; color:var(--tone); font-size:38px; font-weight:700; line-height:1; }
#configurator[data-view=status] [data-phase=load] .phase-icon { border-top-color:var(--tone); animation:status-spin 1s linear infinite; }
#configurator[data-view=status] [data-phase=ok] .phase-icon { background:var(--tone-bg); border-color:var(--tone); }
#configurator[data-view=status] [data-phase=ok] .phase-icon::after { content:"\2713"; }
#configurator[data-view=status] [data-phase=bad] .phase-icon { background:var(--tone-bg); border-color:var(--tone); }
#configurator[data-view=status] [data-phase=bad] .phase-icon::after, #configurator[data-view=status] [data-phase=stop] .phase-icon::after { content:"\2715"; }
#configurator[data-view=status] [data-phase=stop] .phase-icon { border-color:#44564b; }
#configurator[data-view=status] [data-phase=warn] .phase-icon { background:var(--tone-bg); border-color:var(--tone); }
#configurator[data-view=status] [data-phase=warn] .phase-icon::after { content:"!"; }
@keyframes status-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { #configurator[data-view=status] [data-phase=load] .phase-icon { animation-duration:3s; } }
#configurator[data-view=status] .phase h1 { margin:4px 0 0; font-size:clamp(24px,4vw,30px); }
#configurator[data-view=status] .status-copy { margin:0; padding:0; max-width:520px; color:#c3d2c9; font-size:15px; white-space:normal; background:none; border:0; }
#configurator[data-view=status] .status-copy p { margin:8px 0 0; }
#configurator[data-view=status] .status-copy .small { font-size:13px; color:#a5b8ac; }
#configurator[data-view=status] .tag { display:inline-block; margin-top:4px; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; color:var(--tone); background:var(--tone-bg); border:1px solid color-mix(in srgb,var(--tone) 40%,transparent); }
#configurator[data-view=status] .phase-action { width:auto; min-width:240px; margin-top:8px; padding:14px 28px; }
#configurator[data-view=status] .banner { margin:20px 32px 0; padding:14px 18px; line-height:1.55; }
#configurator[data-view=status] #capacity { background:#2a2417; border-color:#695532; color:#f4dcac; }
#configurator[data-view=status] #capacity .small { margin:6px 0 0; color:#cdb98a; }
#configurator[data-view=status] #refund h2 { font-size:17px; margin:0 0 8px; color:#a1edbf; }
#configurator[data-view=status] #refund p { margin:8px 0 0; }
#configurator[data-view=status] #refund .small { color:#a9c9b4; font-size:13px; }
#configurator[data-view=status] .requirements { margin:20px 0 0; padding-top:20px; border-top:0; }
#configurator[data-view=status] .requirements h2 { font-size:17px; margin-bottom:12px; }
#configurator[data-view=status] .requirement { margin:10px 0; padding:12px 14px; background:#0f1a13; border:1px solid #26382d; border-radius:10px; font-size:14px; }
#configurator[data-view=status] .requirement .small { margin:6px 0 0; font-size:12px; }
#configurator[data-view=status] .order-summary { margin-top:24px; padding-top:4px; }
#configurator[data-view=status] .order-summary h2 { margin:0 0 14px; font-size:13px; font-weight:600; color:#a5b8ac; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all; }
#configurator[data-view=status] .game { padding:0; border:0; font-size:18px; }
#configurator[data-view=status] .game img { height:56px; width:42px; }
#configurator[data-view=status] .summary-strip { gap:10px; padding:0; background:none; margin:14px 0 0; }
#configurator[data-view=status] .summary-strip > * { flex:1 1 90px; background:#0c1710; border:1px solid #26382d; border-radius:10px; padding:10px 14px; font-size:12px; color:#a5b8ac; }
#configurator[data-view=status] .summary-strip strong { font-size:16px; margin-top:4px; }
#configurator[data-view=status] .price-row { margin-top:14px; }
#configurator[data-view=status] .price { font-size:28px; letter-spacing:-.5px; margin:0; }
#configurator[data-view=status] .line { padding:8px 0; }
#configurator[data-view=status] #billing { margin:10px 0 0; font-size:13px; color:#c3d2c9; }
#configurator[data-view=status] #billing p { margin:4px 0 0; }
#configurator[data-view=status] .status-actions { margin-top:24px; padding-top:22px; padding-bottom:28px; background:#0f1a13; border-top:1px solid #26382d; }
#configurator[data-view=status] #cancel { background:#2c1a1d; border-color:#7a3d44; color:#ffc9c9; padding:14px 18px; }
#configurator[data-view=status] [data-phase=ok] ~ .status-actions #cancel, #configurator[data-view=status] [data-phase=ok] .status-actions #cancel { background:none; font-weight:600; }
#configurator[data-view=status] .status-actions .note { margin:12px 0 0; }
#configurator[data-view=status] .status-actions .actions { margin-top:16px; }
#configurator[data-view=status] .status-actions .actions .btn { padding:11px 16px; }
@media(max-width:600px) {
  #configurator[data-view=status] .status-card > * { padding-left:20px; padding-right:20px; }
  #configurator[data-view=status] .banner { margin-left:20px; margin-right:20px; }
  #configurator[data-view=status] .phase { padding-top:32px; }
  #configurator[data-view=status] .phase-action { width:100%; min-width:0; }
}

#configurator .disclosure { width:min(520px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; padding:26px; background:#121d17; color:#e1eee5; border:1px solid #304337; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.6); }
#configurator .disclosure::backdrop { background:rgba(4,9,6,.72); }
#configurator .disclosure h2 { margin:0 0 6px; }
#configurator .disclosure .actions { flex-wrap:wrap-reverse; }