.system-page{max-width:1500px;margin:0 auto;padding:4px 0 42px}.system-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:18px 4px 24px;border-bottom:1px solid #273038}.system-eyebrow{color:#71df54;font-weight:800;font-size:.72rem;letter-spacing:.15em}.system-hero h1,.system-result-head h2{margin:4px 0 6px;letter-spacing:-.025em}.system-hero p,.system-result-head p{margin:0;color:#909ca5;max-width:900px}.system-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0}.system-game-tabs{display:flex;gap:8px}.system-config-card,.system-panel,.system-match-card,.system-result-head,.system-stat-grid>div{border:1px solid #2d363e;background:linear-gradient(100deg,#0b1014,#0d1318);border-radius:12px}.system-config-card{padding:17px;margin-bottom:16px}.system-config-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.system-config-head div:first-child{display:flex;gap:12px;align-items:baseline}.system-config-head span,.system-updated{color:#82909a;font-size:.86rem}.system-controls-grid{display:grid;grid-template-columns:1.3fr repeat(6,1fr);gap:9px}.system-controls-grid label{display:flex;flex-direction:column;gap:5px;color:#89969f;font-size:.73rem;text-transform:uppercase;font-weight:700;letter-spacing:.04em}.system-controls-grid input{height:42px;border:1px solid #354049;border-radius:8px;background:#090f13;color:#eef3f5;padding:0 10px;font-size:1rem}.system-actions-row{display:flex;justify-content:flex-end;gap:9px;margin-top:15px}.secondary-system-button,.build-system-button,.download-system-button{border-radius:8px;padding:10px 14px;font-weight:750;cursor:pointer;text-decoration:none}.secondary-system-button{border:1px solid #354049;background:#0e151a;color:#d5dde1}.build-system-button,.download-system-button{border:1px solid #5dcf47;background:#67d950;color:#071006}

/* V3: en match per fullbreddsrad. 1/X/2 är oberoende toggles. */
.system-match-list{display:grid;grid-template-columns:1fr;gap:8px}.system-match-card{display:grid;grid-template-columns:minmax(300px,1.55fr) minmax(360px,1fr) auto;align-items:center;gap:28px;padding:13px 18px;min-height:78px}.system-match-title{display:flex;align-items:center;gap:14px;min-width:0}.system-match-title strong{display:block;font-size:1rem;line-height:1.25}.system-match-title .match-number{flex:0 0 auto}.system-outcomes{display:grid;gap:3px;min-width:340px}.outcome-labels,.outcome-row{display:grid;grid-template-columns:72px repeat(3,minmax(62px,1fr));align-items:center;column-gap:9px}.outcome-labels{color:#78858e;font-size:.68rem;font-weight:800;text-align:center}.outcome-row{font-size:.79rem}.outcome-name{color:#82909a}.outcome-row b{text-align:center;color:#e5ecef;font-variant-numeric:tabular-nums}.selection-buttons{display:grid;grid-template-columns:repeat(3,48px);gap:7px;justify-content:end}.selection-buttons button{width:48px;height:42px;padding:0;border:1px solid #354049;border-radius:8px;background:#10171c;color:#b8c2c8;cursor:pointer;font-size:1rem;font-weight:750}.selection-buttons button.selected{border-color:#69da50;background:#18331b;color:#8ff17a;box-shadow:0 0 0 1px rgba(105,218,80,.15)}

.system-result-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px;margin-top:22px}.system-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:9px 0}.system-stat-grid>div{padding:15px}.system-stat-grid small{display:block;color:#7f8b94;text-transform:uppercase;font-size:.68rem}.system-stat-grid strong{display:block;font-size:1.5rem;margin-top:4px}.system-two-cols{display:grid;grid-template-columns:1fr 1fr;gap:9px}.system-panel{padding:16px;margin-top:9px}.system-panel h3{margin:0 0 10px}.system-table{width:100%;border-collapse:collapse}.system-table th,.system-table td{padding:8px 9px;border-bottom:1px solid #202a31;text-align:left}.system-table th{color:#7f8b94;font-size:.72rem;text-transform:uppercase}.system-table td{font-size:.89rem}.exposure-table td:nth-child(n+3),.exposure-table th:nth-child(n+3){text-align:right}.import-preview summary{cursor:pointer;font-weight:700}.import-preview textarea{width:100%;margin-top:12px;background:#070c0f;color:#dce6ea;border:1px solid #2d363e;border-radius:8px;padding:12px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.system-error{border:1px solid #7e3737;background:#271313;color:#ffb6b6;border-radius:10px;padding:13px;margin:14px 0}.table-scroll{overflow-x:auto}

.system-archive-card{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #2d363e;background:linear-gradient(100deg,#0b1014,#0d1318);border-radius:12px;padding:15px 17px;margin:0 0 16px}.system-archive-copy{display:flex;flex-direction:column;gap:3px;max-width:760px}.system-archive-copy strong{font-size:.95rem}.system-archive-copy span{color:#85939c;font-size:.82rem;line-height:1.4}.system-archive-controls{display:flex;align-items:center;gap:9px;min-width:min(520px,48vw)}.system-archive-controls select{flex:1;min-width:250px;height:42px;border:1px solid #354049;border-radius:8px;background:#090f13;color:#eef3f5;padding:0 10px}.system-mode-badge{display:inline-flex!important;align-items:center;padding:3px 7px;border-radius:999px;font-size:.64rem!important;font-weight:850;letter-spacing:.06em}.system-mode-badge.live{color:#89ee73!important;border:1px solid #4e9f41;background:#122415}.system-mode-badge.archived{color:#ffd28a!important;border:1px solid #8d6830;background:#271d0e}.system-source-note{margin:-5px 0 14px;padding:9px 11px;border-left:3px solid #5d6870;background:#0a1014;color:#93a0a9;font-size:.82rem}.loading-panel{border:1px solid #2d363e;background:#0b1014;border-radius:12px;padding:18px;color:#9ba7ae}

@media(max-width:1050px){.system-controls-grid{grid-template-columns:repeat(4,1fr)}.system-match-card{grid-template-columns:minmax(250px,1.2fr) minmax(320px,1fr) auto;gap:16px}}
@media(max-width:800px){.system-hero,.system-toolbar,.system-result-head{align-items:flex-start;flex-direction:column}.system-controls-grid{grid-template-columns:repeat(2,1fr)}.system-actions-row{flex-direction:column}.system-match-card{grid-template-columns:1fr;gap:12px}.system-outcomes{min-width:0;width:100%}.selection-buttons{justify-content:start}.system-two-cols,.system-stat-grid{grid-template-columns:1fr 1fr}.system-archive-card,.system-archive-controls{align-items:stretch;flex-direction:column}.system-archive-controls{min-width:0;width:100%}.system-archive-controls select{min-width:0;width:100%}}
@media(max-width:500px){.system-stat-grid{grid-template-columns:1fr}.system-controls-grid{grid-template-columns:1fr 1fr}.outcome-labels,.outcome-row{grid-template-columns:58px repeat(3,1fr);column-gap:5px}}

/* V5 match+tecken-försäkring */
.sign-control-stack{display:flex;align-items:flex-end;justify-content:flex-end;gap:14px}.sign-control-label{display:block;margin:0 0 5px;color:#78858e;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.insurance-buttons{display:grid;grid-template-columns:repeat(3,42px);gap:6px}.insurance-buttons button{width:42px;height:42px;padding:0;border:1px dashed #49545c;border-radius:8px;background:#0d1419;color:#9ba7ae;cursor:pointer;font-size:1rem;font-weight:750}.insurance-buttons button.insured{border-style:solid;border-color:#e8bd4c;background:#392f13;color:#ffe082;box-shadow:0 0 0 1px rgba(232,189,76,.14)}.insurance-buttons button:disabled{opacity:.24;cursor:not-allowed}.insurance-preview-card{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;margin:16px 0;padding:17px 18px;border:1px solid #4b4329;background:linear-gradient(100deg,#151309,#11160f);border-radius:12px}.insurance-preview-card h3{margin:3px 0 5px;font-size:1.35rem}.insurance-preview-card p{margin:0;color:#9ca6a8;max-width:650px}.insurance-preview-card .table-scroll{min-width:470px}.insurance-table td,.insurance-table th{white-space:nowrap}
@media(max-width:1050px){.sign-control-stack{gap:8px}.insurance-preview-card{flex-direction:column}.insurance-preview-card .table-scroll{min-width:0;width:100%}}
@media(max-width:800px){.sign-control-stack{justify-content:flex-start}.insurance-preview-card{padding:14px}}

.base-size-hint {
    display: block;
    margin-top: .45rem;
    opacity: .72;
    font-size: .78rem;
}

/* V7: custom reduction groups */
.reduction-editor { margin-top: 18px; display: grid; gap: 12px; }
.reduction-editor-head { display:flex; gap:16px; align-items:flex-end; justify-content:space-between; }
.reduction-editor-head > div { display:grid; gap:4px; }
.reduction-editor-head span { opacity:.72; font-size:.86rem; }
.reduction-group-card { border:1px solid rgba(126,153,210,.22); border-radius:14px; padding:14px; background:rgba(10,23,49,.45); display:grid; gap:12px; }
.reduction-group-top { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.reduction-group-top label { display:flex; gap:6px; align-items:center; }
.reduction-group-top input[type=number] { width:72px; }
.reduction-name { min-width:180px; }
.reduction-token-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:7px; }
.reduction-token-row { display:grid; grid-template-columns:30px repeat(3,1fr); gap:4px; align-items:center; }
.reduction-token-row span { font-size:.78rem; opacity:.72; }
.reduction-token-row button { min-width:0; padding:6px 4px; border-radius:8px; border:1px solid rgba(126,153,210,.25); background:rgba(21,40,76,.72); color:#dce8ff; }
.reduction-token-row button.selected { background:#316de8; border-color:#6b9aff; color:white; }
.history-row b { opacity:.82; font-weight:600; }
@media (max-width:760px) { .reduction-editor-head { align-items:stretch; flex-direction:column; } }

/* V7.2: colour-style reduction editor */
.colour-reduction-editor { margin-top: 20px; padding: 16px; border: 1px solid rgba(126,153,210,.20); border-radius: 16px; background: rgba(9,20,39,.52); display:grid; gap:14px; }
.colour-reduction-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.colour-reduction-head > div { display:grid; gap:5px; }
.colour-reduction-head span { opacity:.72; font-size:.86rem; max-width:850px; }
.colour-clear-button { border:1px solid rgba(126,153,210,.28); background:rgba(28,48,78,.62); color:#dce8ff; padding:9px 13px; border-radius:10px; cursor:pointer; }
.colour-reduction-groups { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:10px; }
.colour-group-card { padding:13px; border:1px solid rgba(126,153,210,.20); border-radius:14px; background:rgba(21,37,59,.72); display:grid; gap:10px; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.colour-group-card:hover { transform:translateY(-1px); }
.colour-group-card.active-colour { box-shadow:0 0 0 2px rgba(255,255,255,.10) inset; }
.colour-group-card.cyan.active-colour { border-color:#19c8df; }
.colour-group-card.yellow.active-colour { border-color:#f4c514; }
.colour-group-card.red.active-colour { border-color:#ff5a4e; }
.colour-group-card.green.active-colour { border-color:#20c875; }
.colour-group-title { display:flex; align-items:center; gap:8px; }
.colour-ring { width:20px; height:20px; border-radius:50%; border:3px solid currentColor; display:inline-block; flex:0 0 auto; }
.colour-ring.cyan, .colour-dot.cyan { color:#19c8df; background:#19c8df; }
.colour-ring.yellow, .colour-dot.yellow { color:#f4c514; background:#f4c514; }
.colour-ring.red, .colour-dot.red { color:#ff5a4e; background:#ff5a4e; }
.colour-ring.green, .colour-dot.green { color:#20c875; background:#20c875; }
.colour-ring { background:transparent !important; }
.colour-enable { display:flex; align-items:center; gap:8px; font-size:.86rem; opacity:.92; }
.colour-enable input { width:18px; height:18px; accent-color:#22d3ee; }
.colour-minmax { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.colour-minmax label { display:grid; gap:4px; font-size:.78rem; opacity:.85; }
.colour-minmax select { width:100%; border-radius:9px; padding:7px 8px; background:#26394a; color:#eef7ff; border:1px solid rgba(147,175,199,.27); }
.colour-group-card small { opacity:.63; }
.colour-reduction-help { font-size:.84rem; opacity:.82; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.colour-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.colour-token-control { display:grid; gap:6px; margin-top:10px; }
.colour-token-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.colour-token { position:relative; min-width:40px; min-height:34px; border-radius:9px; border:1px solid rgba(126,153,210,.22); background:rgba(21,40,76,.58); color:#cfdaeb; cursor:pointer; }
.colour-token .colour-dot { position:absolute; right:5px; top:5px; width:7px; height:7px; }
.colour-token.cyan { border-color:#19c8df; box-shadow:inset 0 -3px 0 #19c8df; }
.colour-token.yellow { border-color:#f4c514; box-shadow:inset 0 -3px 0 #f4c514; }
.colour-token.red { border-color:#ff5a4e; box-shadow:inset 0 -3px 0 #ff5a4e; }
.colour-token.green { border-color:#20c875; box-shadow:inset 0 -3px 0 #20c875; }
@media (max-width:980px) { .colour-reduction-groups { grid-template-columns:repeat(2,minmax(150px,1fr)); } }
@media (max-width:620px) { .colour-reduction-head { align-items:stretch; flex-direction:column; } .colour-reduction-groups { grid-template-columns:1fr; } }