.server-pricing-editor > summary { cursor: pointer; font-weight: 700; }
.server-pricing-editor[hidden], .matrix-group[hidden] { display: none; }
.matrix-editor-body { margin-top: 16px; min-width: 0; }
.matrix-column-editor { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px; }
.matrix-column-editor > label { flex: 1 1 130px; min-width: 0; }
.matrix-column-editor > label:first-child { display: flex; align-items: center; flex: 0 0 auto; }
.matrix-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.matrix-tools > label { flex: 1 1 200px; }
.matrix-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line2); border-radius: 9px; }
.matrix-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.matrix-table th, .matrix-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
.matrix-table th { background: #15253a; color: var(--text2); }
.matrix-table td:nth-child(3) { min-width: 180px; }
.matrix-table input:not([type=checkbox]) { font-size: 13px; padding: 8px; min-width: 90px; }
.matrix-cell { display: flex; align-items: center; gap: 6px; min-width: 130px; }
.matrix-cell input[type=checkbox] { flex: 0 0 18px; }
.matrix-table input:invalid { border-color: var(--red); }
.server-pricing-purchase { display: grid; gap: 16px; min-width: 0; }
.matrix-groups { margin: 0; padding: 0; border: 0; min-width: 0; }
.matrix-groups legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.matrix-group-options { display: flex; flex-wrap: wrap; gap: 8px; }
/* Saved option tones only: never infer a colour from the option's text. */
.matrix-group { position: relative; flex: 1 1 100px; min-width: 0; margin: 0; cursor: pointer; }
.matrix-group, .matrix-tone-purple { --matrix-tone: #B75CFF; --matrix-fill: #3B167B; --matrix-text: #FFFFFF; --matrix-rgb: 183,92,255; --matrix-glow: rgba(183,92,255,.22); }
.matrix-tone-blue { --matrix-tone: #2684FF; --matrix-fill: #0B2D76; --matrix-text: #FFFFFF; --matrix-rgb: 38,132,255; --matrix-glow: rgba(38,132,255,.22); }
.matrix-tone-red { --matrix-tone: #FF315B; --matrix-fill: #351321; --matrix-text: #FF6B80; --matrix-rgb: 255,49,91; --matrix-glow: rgba(255,49,91,.20); }
.matrix-tone-orange { --matrix-tone: #FF8A1F; --matrix-fill: #302017; --matrix-text: #FF9A32; --matrix-rgb: 255,138,31; --matrix-glow: rgba(255,138,31,.20); }
.matrix-group > input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; clip-path: inset(50%); }
.matrix-group > span { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(var(--matrix-rgb),.55); border-radius: 8px; background: color-mix(in srgb, var(--matrix-fill) 60%, #101c30); color: var(--matrix-text); font-size: 13px; text-align: center; overflow-wrap: anywhere; box-shadow: 0 0 8px rgba(var(--matrix-rgb),.06); transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease; }
.matrix-group input:not(:disabled) + span:hover { border-color: rgba(var(--matrix-rgb),.85); background: color-mix(in srgb, var(--matrix-fill) 85%, #101c30); box-shadow: 0 0 14px var(--matrix-glow); }
.matrix-group input:not(:disabled):checked + span { border-color: var(--matrix-tone); background: var(--matrix-fill); box-shadow: inset 0 0 0 1px rgba(var(--matrix-rgb),.18), 0 0 16px var(--matrix-glow); }
.matrix-group input:not(:disabled):checked + span:hover { box-shadow: inset 0 0 0 1px rgba(var(--matrix-rgb),.25), 0 0 18px rgba(var(--matrix-rgb),.28); }
.matrix-group input:focus-visible + span { outline: 2px solid var(--matrix-tone); outline-offset: 3px; }
.matrix-group input:disabled + span { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media(prefers-reduced-motion:reduce){ .matrix-group > span { transition: none; } }
.matrix-group small { font-size: 10px; font-weight: 400; }
.server-pricing-purchase [data-matrix-status] { margin: 0; }
.buybox .product-parameter .dropdown-option[aria-disabled=true] { opacity: .5; cursor: not-allowed; }
.buybox .product-parameter .dropdown-option[hidden] { display: none; }
.matrix-dropdown-search { position: sticky; top: 0; z-index: 1; padding: 8px; background: #15253a; border-bottom: 1px solid #3b82f647; }
.matrix-dropdown-search input { min-height: 40px; font-size: 14px; }
.matrix-dropdown-empty { padding: 10px; font-size: 12px; color: var(--muted); }
@media(max-width:680px){.matrix-editor-body > .grid2 { grid-template-columns: minmax(0,1fr); }.matrix-column-editor { align-items: stretch; }}

/* Region choice sits above Server and Faction. */
.matrix-regions {border:0;margin:0;padding:0;min-width:0;}
.matrix-regions legend {font-size:14px;font-weight:600;margin-bottom:8px;}
.matrix-region-options {display:flex;gap:8px;}
.matrix-region {position:relative;flex:1 1 0;cursor:pointer;}
.matrix-region>input {position:absolute;width:1px;height:1px;clip-path:inset(50%);}
.matrix-region>span {display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:10px 12px;background:#15253a;border:1px solid #324b6b;border-radius:9px;font-weight:700;font-size:14px;}
.matrix-region>span>img {width:22px;height:16px;object-fit:cover;border-radius:3px;}
.matrix-region>input:checked+span {border-color:#3b82f6;background:#1f3c65;color:#fff;}
.matrix-region>input:focus-visible+span {outline:2px solid #93c5fd;outline-offset:2px;}
.matrix-region:hover>span {border-color:#6288bf;}
.matrix-region-admin-wrap {max-width:200px;}
.matrix-table td select {min-width:80px;font-size:12px;padding:7px;}

/* Region UX: edit EU/NA immediately next to each server, without horizontal scrolling. */
.matrix-server-line { display: flex; align-items: center; gap: 8px; min-width: 260px; }
.matrix-server-line > input { min-width: 135px; flex: 1 1 135px; width: 100%; }
.matrix-table .matrix-inline-region { flex: 0 0 105px; width: 105px; min-width: 105px; font-weight: 700; font-size: 12px; }
.matrix-inline-region[data-region="EU"] { color: #a7c7ff; border-color: #4968a7; background: #1c2941; }
.matrix-inline-region[data-region="NA"] { color: #ffd4a2; border-color: #95704b; background: #35291e; }
.matrix-inline-region[data-region=""] { color: #ffd2ad; border-color: #8b5b3b; background: #32261f; }
.matrix-region-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid #334968; background: #142439; }
.matrix-region-toolbar > label { flex: 0 1 200px; }
.matrix-region-toolbar > .muted { flex-basis: 100%; margin: 0; }
.matrix-region-summary { margin: 2px 0 0; padding: 8px 12px; border-radius: 8px; border: 1px solid #345b4b; color: #a7f1cc; background: #172a24; font-size: 13px; }
.matrix-region-summary.matrix-region-warning { border-color: #685334; color: #f4d5a2; background: #30271d; }
.matrix-action-status { min-height: 1.4em; color: #baff7b; margin: 0; font-size: 13px; }
.matrix-action-status.matrix-action-error { color: #ffaaa9; }
@media(max-width:680px) {
  .matrix-server-line { min-width: 220px; flex-wrap: wrap; }
  .matrix-server-line > input { min-width: 120px; }
  .matrix-table .matrix-inline-region { flex-basis: 100%; width: 100%; }
}

/* Compact region control fits inside the Server column; warning stays visible only if the matching JS has not started. */
.matrix-server-line { min-width: 0; display: grid; grid-template-columns: minmax(108px, 1fr) 84px; gap: 7px; }
.matrix-server-line > input { min-width: 0; width: 100%; }
.matrix-table .matrix-inline-region { min-width: 0; width: 84px; padding: 8px 5px; flex: none; }
.matrix-runtime-warning { background: #392519; color: #ffdda6; border: 1px solid #b4782e; padding: 11px; border-radius: 8px; margin: 12px 0; }
.matrix-runtime-warning[hidden] { display: none; }
@media(max-width:680px){ .matrix-server-line { grid-template-columns: minmax(108px, 1fr) 70px; } .matrix-table .matrix-inline-region { width: 70px; } }

/* Admin pricing workspace: keep frequent tasks visible; move rarely-used setup into collapsible sections. */
.server-pricing-editor > summary { padding: 8px 4px; }
.server-pricing-editor .matrix-editor-body { gap: 14px; }
.matrix-intro { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px; border: 1px solid #324a68; border-radius: 14px; background: linear-gradient(125deg,#172a45,#0e1b2f); }
.matrix-intro b { font-size: 17px; color: #f4f8ff; }
.matrix-intro p { margin: 6px 0 0; max-width: 560px; line-height: 1.55; }
.matrix-count { border: 1px solid #455f80; border-radius: 999px; padding: 7px 12px; background: #1b304b; color: #ceddf0; font-size: 12px; font-weight: 700; white-space: nowrap; }
.matrix-advanced, .matrix-columns-panel, .matrix-bulk-panel { min-width: 0; border: 1px solid #324867; border-radius: 12px; background: #17243a; }
.matrix-advanced > summary, .matrix-columns-panel > summary, .matrix-bulk-panel > summary { padding: 14px 16px; font-size: 13px; font-weight: 700; color: #f4f8ff; cursor: pointer; }
.matrix-advanced[open] > summary, .matrix-columns-panel[open] > summary, .matrix-bulk-panel[open] > summary { border-bottom: 1px solid #324b68; }
.matrix-advanced-body, .matrix-bulk-body { display: grid; gap: 14px; min-width: 0; padding: 14px; }
.matrix-columns-panel > [data-matrix-columns] { padding: 14px 14px 0; }
.matrix-columns-panel > [data-matrix-add-column] { margin: 8px 14px 14px; }
.matrix-tools { display: grid; grid-template-columns: minmax(180px,1fr) minmax(136px,180px) auto; gap: 10px; align-items: end; }
.matrix-tools > label { min-width: 0; flex: none; }
.matrix-tools > button { min-height: 42px; }
.matrix-inline-help { margin: 0; font-size: 12px; line-height: 1.45; }
.matrix-table-wrap { background: #0f1d30; border: 1px solid #344b6a; border-radius: 12px; }
.matrix-table { font-size: 13px; min-width: 620px; }
.matrix-table thead th { color: #b8cce6; font-size: 11px; font-weight: 700; letter-spacing: .025em; white-space: nowrap; border-bottom: 1px solid #365272; position: sticky; top: 0; z-index: 1; }
.matrix-table th,.matrix-table td { padding: 10px 9px; border-bottom: 1px solid #2d425e; vertical-align: middle; }
.matrix-table tbody tr:nth-child(2n) { background: #15273f; }
.matrix-table tbody tr:hover { background: #1c3553; }
.matrix-table tbody tr:last-child td { border-bottom: 0; }
.matrix-table td:first-child,.matrix-table td:nth-child(2),.matrix-table th:first-child,.matrix-table th:nth-child(2) { text-align: center; width: 58px; }
.matrix-server-line { grid-template-columns: minmax(122px,1fr) 84px; min-width: 210px; }
.matrix-table td:nth-child(3) { min-width: 230px; }
.matrix-table .matrix-server-line input { min-height: 40px; }
.matrix-table .matrix-inline-region { padding: 8px 5px; min-height: 40px; }
.matrix-cell { min-width: 135px; }
.matrix-cell .matrix-price-input { width: 100%; min-width: 88px; max-width: 145px; font-weight: 600; font-variant-numeric: tabular-nums; }
.matrix-cell .matrix-price-input::placeholder { font-weight: 400; color: #9caec8; }
.matrix-cell .matrix-price-input.matrix-invalid { border-color: #f17575; background: #392128; }
.matrix-table tr.matrix-row-warning td:nth-child(3) { box-shadow: inset 3px 0 #e2ae57; }
.matrix-table tr.matrix-row-error td:nth-child(3) { box-shadow: inset 4px 0 #ef7777; background: #3a222c; }
.matrix-region-toolbar { background: #162a44; }
.matrix-region-summary { margin: 0; }
.matrix-save-bar { position: sticky; bottom: 8px; z-index: 5; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; border: 1px solid #365f91; border-radius: 13px; background: #102644; box-shadow: 0 12px 30px #07070bbb; padding: 14px 16px; }
.matrix-save-bar strong { color: #e2edff; font-size: 14px; }
.matrix-save-bar strong.is-dirty { color: #93c5fd; }
.matrix-save-bar strong.is-error { color: #ffb0b0; }
.matrix-save-bar p { margin: 4px 0 0; font-size: 12px; }
.matrix-save-bar .btn { min-width: 145px; }
.matrix-selection-tools { margin: 0; }
@media(max-width:760px){
  .matrix-tools { grid-template-columns: 1fr 1fr; }
  .matrix-tools > label:first-child { grid-column: 1/-1; }
  .matrix-tools > button { grid-column: 1/-1; }
  .matrix-intro { padding: 14px; }
  .matrix-table th,.matrix-table td { padding: 9px 7px; }
  .matrix-save-bar { bottom: 4px; }
}
@media(max-width:430px){
  .matrix-save-bar .btn { width: 100%; }
}