:root { --bg: #0a0d12; --surface: #11161e; --surface-2: #151c26; --line: #27313e; --text: #e9edf2; --muted: #8b96a6; --gold: #f1b869; --cyan: #81d8cf; --violet: #b4a0ff; --green: #9bd7a4; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 72% -10%, #203342 0, transparent 32rem), var(--bg); font-family: Manrope, system-ui, sans-serif; }
button, select, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; max-width: 1440px; margin: 0 auto; padding: 0 42px 34px; }
.topbar { height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(132,151,171,.18); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); transform: rotate(45deg); font-size: 16px; }.brand-mark::first-letter { transform: rotate(-45deg); }
.brand small, .brand strong { display: block; letter-spacing: .14em; }.brand small { font: 10px 'DM Mono', monospace; color: var(--gold); margin-bottom: 4px; }.brand strong { font-size: 13px; letter-spacing: .18em; }
.topbar-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font: 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.pulse, .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(155,215,164,.09); }.divider { height: 14px; width: 1px; background: var(--line); margin: 0 8px; }
.hero { display: flex; justify-content: space-between; align-items: end; padding: 76px 0 62px; }.eyebrow, .section-kicker { color: var(--gold); font: 11px 'DM Mono', monospace; letter-spacing: .15em; margin: 0 0 14px; }.hero h1 { max-width: 690px; font-size: clamp(38px, 5vw, 72px); line-height: 1.06; letter-spacing: -.06em; margin: 0; font-weight: 700; }.hero h1 em { color: var(--cyan); font-style: normal; }.hero-copy { max-width: 560px; color: var(--muted); line-height: 1.8; font-size: 14px; margin: 24px 0 0; }.hero-note { width: 190px; padding: 18px 0 0 18px; border-left: 1px solid var(--gold); color: var(--muted); }.hero-note span { color: var(--gold); font: 11px 'DM Mono', monospace; }.hero-note p { line-height: 1.7; font-size: 12px; margin: 10px 0 0; }
.control-panel, .card { background: linear-gradient(145deg, rgba(24,31,42,.94), rgba(15,20,28,.94)); border: 1px solid var(--line); }.control-panel { padding: 25px 27px 20px; }.control-heading, .card-header, .drawer-heading { display: flex; justify-content: space-between; align-items: start; }.control-heading h2, .card h2, .drawer-heading h2 { margin: 5px 0 0; font-size: 18px; letter-spacing: -.03em; }.data-chip { background: rgba(129,216,207,.1); border: 1px solid rgba(129,216,207,.3); color: var(--cyan); padding: 8px 11px; font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }.controls { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr auto; gap: 12px; margin-top: 24px; }.controls label, .import-form label { color: var(--muted); font: 10px 'DM Mono', monospace; letter-spacing: .08em; }.controls select, .import-form input, .import-form select { width: 100%; display: block; appearance: none; color: var(--text); background: #0c1118; border: 1px solid #303b49; border-radius: 2px; padding: 13px 12px; margin-top: 8px; outline: none; }.controls select:focus, input:focus { border-color: var(--cyan); }.controls select:disabled { opacity: .65; }.primary-button { align-self: end; border: 0; border-radius: 2px; padding: 13px 19px; background: var(--gold); color: #1b1710; font-weight: 800; white-space: nowrap; }.primary-button:hover { background: #ffd18a; }.primary-button span { font-size: 18px; vertical-align: -1px; margin-right: 3px; }.control-hint { color: #748091; font-size: 11px; margin: 17px 0 0; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 13px 0; }.metric { padding: 23px 24px 20px; background: var(--surface); border: 1px solid var(--line); }.metric-label { color: var(--muted); font: 10px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }.metric-value { font-size: 30px; font-weight: 700; letter-spacing: -.05em; margin-top: 12px; }.metric-sub { margin-top: 9px; font-size: 11px; color: var(--muted); }.metric-sub strong { color: var(--cyan); font-weight: 500; }.metric-bar { height: 3px; background: #28323d; margin-top: 18px; }.metric-bar i { display: block; height: 100%; background: var(--gold); }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 13px; }.card { padding: 26px; }.card-header { margin-bottom: 23px; }.card-header.compact { margin-bottom: 18px; }.ghost-button, .close-button { color: var(--muted); background: transparent; border: 1px solid var(--line); padding: 8px 10px; font-size: 11px; }.ghost-button:hover, .close-button:hover { color: var(--text); border-color: var(--muted); }.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; min-width: 720px; }th { color: #718092; text-align: left; font: 10px 'DM Mono', monospace; letter-spacing: .09em; text-transform: uppercase; padding: 0 11px 13px; border-bottom: 1px solid var(--line); }td { padding: 15px 11px; border-bottom: 1px solid rgba(39,49,62,.62); font-size: 12px; }tbody tr:hover { background: rgba(129,216,207,.035); }td:first-child { color: #657181; font: 11px 'DM Mono', monospace; width: 35px; }.augment-cell { display: flex; align-items: center; gap: 11px; min-width: 190px; }.augment-icon { width: 29px; height: 29px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(241,184,105,.65); background: linear-gradient(135deg, #6c4326, #d5a252); transform: rotate(45deg); position: relative; }.augment-icon img { display: block; width: 145%; height: 145%; object-fit: cover; object-position: 50% 50%; transform: translate(.35px, 1.3px) rotate(-45deg); transform-origin: center; }.augment-icon::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.5); pointer-events: none; }.augment-icon.violet { background: linear-gradient(135deg, #46346c, #ae8cf0); border-color: #b4a0ff; }.augment-icon.cyan { background: linear-gradient(135deg, #22595c, #77d4cc); border-color: #81d8cf; }.augment-icon.blue { background: linear-gradient(135deg, #244f78, #79a8e4); border-color: #8dbbe7; }.augment-icon.pink { background: linear-gradient(135deg, #703e61, #df86b2); border-color: #df86b2; }.augment-icon.red { background: linear-gradient(135deg, #6b2c35, #e0786d); border-color: #e0786d; }.augment-icon.green { background: linear-gradient(135deg, #27533b, #88d298); border-color: #9bd7a4; }.augment-icon.orange { background: linear-gradient(135deg, #704226, #e9a262); border-color: #e9a262; }.augment-name { font-weight: 600; }.augment-name small { display: block; color: #687585; font-size: 10px; font-weight: 400; margin-top: 3px; }.win-rate { color: var(--gold); font-weight: 700; }.positive { color: var(--cyan); }.negative { color: #db8d93; }.ranked-stat { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; white-space: nowrap; }.stat-value { line-height: 1.1; }.same-rarity-rank { color: #748091; font: 9px 'DM Mono', monospace; font-weight: 400; }.timing-cell { display: grid; gap: 3px; min-width: 112px; }.timing-line { display: flex; align-items: baseline; gap: 5px; color: #aab4c0; font-size: 10px; white-space: nowrap; }.timing-line b { width: 26px; color: #718092; font-size: 9px; font-weight: 500; }.timing-line small { color: #687585; font-size: 9px; }.scale-value { justify-self: start; margin-top: 2px; padding: 2px 5px; border-radius: 2px; font: 700 11px 'DM Mono', monospace; }.scale-value.neutral, .scale-empty { color: #9da8b4; background: rgba(157,168,180,.06); }.table-foot { display: flex; justify-content: space-between; color: #6f7c8d; font: 10px 'DM Mono', monospace; padding-top: 15px; }.side-column { display: flex; flex-direction: column; gap: 13px; }.signal-card { min-height: 270px; }.spark-icon { width: 29px; height: 29px; display: grid; place-items: center; color: var(--cyan); border: 1px solid rgba(129,216,207,.25); }.signal-row { padding: 13px 0; border-top: 1px solid var(--line); }.signal-row:first-child { border-top: 0; padding-top: 0; }.signal-label { color: var(--muted); font-size: 11px; }.signal-value { font-size: 22px; font-weight: 700; margin-top: 4px; }.signal-value span { font-size: 11px; color: var(--cyan); margin-left: 6px; font-weight: 500; }.methodology-card p, .connection-card p, .drawer-copy { color: var(--muted); font-size: 11px; line-height: 1.75; }.method-row { display: flex; align-items: center; gap: 9px; color: #aab4c0; font-size: 10px; margin-top: 12px; }.method-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; }.method-dot.gold { background: var(--gold); }.method-dot.violet { background: var(--violet); }.connection-line { display: flex; align-items: center; gap: 9px; color: var(--green); font: 10px 'DM Mono', monospace; margin-top: 18px; }.connection-card .status-dot { background: var(--green); }
.api-drawer { display: block; margin-top: 13px; padding: 25px 27px; background: #101820; border: 1px solid rgba(129,216,207,.35); }.close-button { font-size: 21px; line-height: 20px; border: 0; }.import-form { display: grid; grid-template-columns: 1.3fr 1fr .7fr .7fr .7fr .7fr auto; gap: 12px; align-items: end; }.import-form input, .import-form select, .import-form textarea { padding: 12px; }.import-form textarea { width: 100%; display: block; resize: vertical; color: var(--text); background: #0c1118; border: 1px solid #303b49; border-radius: 2px; margin-top: 8px; outline: none; line-height: 1.5; }.import-form textarea:focus { border-color: var(--cyan); }.seed-field { grid-column: span 2; }.chain-toggle { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; color: var(--text); font: 11px system-ui, sans-serif; letter-spacing: 0; }.chain-toggle input { width: 15px; height: 15px; flex: 0 0 auto; appearance: auto; display: inline-block; padding: 0; margin: 0; accent-color: var(--cyan); }.chain-toggle strong, .chain-toggle small { display: block; }.chain-toggle strong { color: var(--cyan); font-weight: 700; }.chain-toggle small { color: #748091; font-size: 10px; margin-top: 3px; line-height: 1.5; }.import-result { color: var(--gold); font-size: 11px; min-height: 17px; margin: 15px 0 0; }.import-result.error { color: #db8d93; }
footer { display: flex; justify-content: space-between; color: #5f6b7a; font: 10px 'DM Mono', monospace; letter-spacing: .04em; padding: 35px 0 0; }
.progress-panel { margin-top: 18px; padding: 14px 15px; background: rgba(8, 14, 20, .72); border: 1px solid rgba(129,216,207,.2); }.progress-heading, .progress-meta { display: flex; justify-content: space-between; gap: 14px; }.progress-heading { color: var(--text); font: 11px 'DM Mono', monospace; }.progress-heading span:first-child { color: var(--cyan); }.progress-track { height: 7px; margin: 12px 0 10px; background: #26323b; overflow: hidden; }.progress-track i { display: block; height: 100%; min-width: 0; background: linear-gradient(90deg, var(--cyan), var(--gold)); transition: width .25s ease; }.progress-meta { color: #748091; font-size: 10px; line-height: 1.5; flex-wrap: wrap; }.progress-meta span:nth-child(2) { color: var(--gold); text-align: right; }.progress-meta span:last-child { margin-left: auto; }
@media (max-width: 1000px) { .controls { grid-template-columns: repeat(2, 1fr); }.controls .primary-button { grid-column: span 2; }.workspace-grid { grid-template-columns: 1fr; }.side-column { display: grid; grid-template-columns: repeat(3, 1fr); }.import-form { grid-template-columns: repeat(2, 1fr); }.import-form .primary-button { grid-column: span 2; } }
@media (max-width: 680px) { .app-shell { padding: 0 18px 28px; }.topbar { height: 72px; }.topbar-meta { display: none; }.hero { padding: 52px 0 42px; display: block; }.hero h1 { font-size: 42px; }.hero-note { margin-top: 32px; }.controls, .metrics, .side-column, .import-form { grid-template-columns: 1fr; }.seed-field { grid-column: auto; }.controls .primary-button, .import-form .primary-button { grid-column: auto; }.card, .control-panel { padding: 20px 17px; }footer { display: block; line-height: 2; }footer span { display: block; } }

.augment-icon { width: 34px; height: 34px; flex: 0 0 34px; transform: none; border-radius: 2px; background: #0c1118; }
.augment-icon img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; }
.augment-icon::after { display: none; }

.hero h1 em { display: inline-block; white-space: nowrap; }

.stats-caveat { margin-bottom: 16px; padding: 16px 20px; border: 1px solid rgba(241,184,105,.25); border-left: 3px solid var(--gold); background: rgba(241,184,105,.045); }
.stats-caveat strong { color: var(--gold); font-size: 12px; }
.stats-caveat p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }

.exclude-unknown-toggle { display: inline-flex; align-items: center; gap: 9px; margin-top: 15px; color: var(--text); font: 11px system-ui, sans-serif; cursor: pointer; }.exclude-unknown-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--cyan); }
.augment-tooltip-target { cursor: help; }
.augment-tooltip { position: fixed; z-index: 1000; width: min(320px, calc(100vw - 24px)); padding: 9px 10px 10px; color: #f1c977; background: rgba(10, 14, 19, .98); border: 1px solid rgba(241, 184, 105, .9); border-radius: 4px; box-shadow: 0 9px 24px rgba(0, 0, 0, .48), 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none; }.augment-tooltip[hidden] { display: none; }.augment-tooltip strong, .augment-tooltip span { display: block; }.augment-tooltip strong { color: #eef2f5; font-size: 14px; line-height: 1.25; font-weight: 700; }.augment-tooltip span { margin-top: 5px; font-size: 11px; line-height: 1.5; white-space: pre-line; }
.champion-picker { position: relative; }.controls .champion-search { width: 100%; display: block; color: var(--text); background: #0c1118; border: 1px solid #303b49; border-radius: 2px; padding: 13px 12px; margin-top: 8px; outline: none; }.champion-search::placeholder { color: #687585; }.champion-suggestions { position: absolute; z-index: 50; top: calc(100% + 5px); left: 0; right: 0; overflow: hidden; background: #0d1219; border: 1px solid rgba(129, 216, 207, .45); border-radius: 2px; box-shadow: 0 12px 24px rgba(0, 0, 0, .4); }.champion-suggestions[hidden] { display: none; }.champion-suggestion { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; color: var(--text); background: transparent; border: 0; border-bottom: 1px solid rgba(39, 49, 62, .7); text-align: left; cursor: pointer; }.champion-suggestion:last-child { border-bottom: 0; }.champion-suggestion:hover, .champion-suggestion:focus-visible { background: rgba(129, 216, 207, .12); outline: none; }.champion-suggestion span { font: 12px Manrope, system-ui, sans-serif; font-weight: 700; }.champion-suggestion small { color: var(--muted); font: 10px 'DM Mono', monospace; white-space: nowrap; }

.controls { grid-template-columns: repeat(4,minmax(0,1fr)); } @media(max-width:680px){.controls{grid-template-columns:1fr;}}