:root {
  --bg: #07090f;
  --panel: rgba(15, 18, 28, .88);
  --panel-solid: #10131d;
  --panel-soft: #141824;
  --line: rgba(255, 255, 255, .075);
  --line-strong: rgba(255, 255, 255, .14);
  --text: #f7f8fc;
  --muted: #8c94a8;
  --accent: #6d5dfc;
  --accent-2: #38d7ff;
  --green: #4ee6a8;
  --orange: #ffab5c;
  --red: #ff647c;
  --shadow: 0 22px 70px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 1060px; height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  user-select: none;
}
button, input, select { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }

.ambient { position: fixed; border-radius: 50%; filter: blur(100px); pointer-events: none; opacity: .16; }
.ambient-a { width: 460px; height: 460px; left: -180px; top: -130px; background: #6d5dfc; }
.ambient-b { width: 500px; height: 500px; right: -180px; bottom: -220px; background: #19c6ff; }

.brand-mark {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  color: white; font-size: 20px; font-weight: 900; letter-spacing: -.05em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 28px rgba(109, 93, 252, .32);
}
.brand-mark.large { width: 68px; height: 68px; border-radius: 21px; font-size: 30px; }
.eyebrow { font-size: 10px; color: #777f94; letter-spacing: .19em; font-weight: 800; }

.auth-shell { height: 100vh; display: grid; grid-template-columns: 1.08fr .92fr; position: relative; z-index: 1; }
.auth-visual { padding: 9vh 8vw; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 25% 25%, rgba(109,93,252,.16), transparent 32%); }
.auth-visual h1 { font-size: clamp(56px, 6vw, 92px); margin: 24px 0 14px; letter-spacing: -.065em; line-height: .92; }
.auth-visual h1 span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); }
.auth-visual > p { max-width: 610px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.auth-features { display: grid; gap: 12px; margin-top: 42px; max-width: 600px; }
.auth-features div { display: flex; align-items: center; gap: 15px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
.auth-features b { color: var(--accent-2); font-size: 11px; letter-spacing: .12em; }
.auth-features span { color: #cdd2df; font-size: 13px; }
.auth-card { width: 460px; align-self: center; justify-self: center; padding: 36px; border: 1px solid var(--line-strong); border-radius: 26px; background: rgba(14,17,26,.82); backdrop-filter: blur(26px); box-shadow: var(--shadow); }
.api-pill { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--muted); font-size: 11px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,171,92,.1); }
.api-pill.online .pulse-dot, .mini-api-card.online .pulse-dot { background: var(--green); box-shadow: 0 0 0 5px rgba(78,230,168,.1); }
.api-pill.offline .pulse-dot, .mini-api-card.offline .pulse-dot { background: var(--red); box-shadow: 0 0 0 5px rgba(255,100,124,.1); }
.auth-card-header { margin: 34px 0 24px; }
.auth-card-header h2 { font-size: 31px; margin: 0 0 8px; letter-spacing: -.04em; }
.auth-card-header p { margin: 0; color: var(--muted); font-size: 13px; }
.mobile-brand { display: none; }
.field-label { display: block; color: #b2b8c8; font-size: 11px; font-weight: 700; margin: 14px 0 8px; }
.input-wrap { height: 48px; border: 1px solid var(--line-strong); border-radius: 13px; background: rgba(5,7,12,.65); display: flex; align-items: center; overflow: hidden; transition: .2s; }
.input-wrap:focus-within { border-color: rgba(109,93,252,.8); box-shadow: 0 0 0 3px rgba(109,93,252,.12); }
.input-wrap span { width: 44px; text-align: center; color: var(--muted); font-weight: 800; }
.input-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; padding-right: 14px; user-select: text; }
input, select { width: 100%; height: 48px; border: 1px solid var(--line-strong); border-radius: 13px; color: var(--text); background: #0a0d14; padding: 0 14px; outline: 0; user-select: text; }
input:focus, select:focus { border-color: rgba(109,93,252,.8); box-shadow: 0 0 0 3px rgba(109,93,252,.12); }
select option { background: #11141d; }
.inline-error, .modal-error { display: none; color: #ff91a2; border: 1px solid rgba(255,100,124,.26); background: rgba(255,100,124,.08); border-radius: 11px; padding: 11px 13px; font-size: 12px; }
.inline-error.visible, .modal-error.visible { display: block; }
.auth-hint { text-align: center; margin-top: 18px; color: #676f82; font-size: 11px; }
.auth-hint code { color: #aeb5c8; }

.primary-button, .secondary-button, .ghost-button, .logout-button, .icon-button {
  border: 0; outline: 0; cursor: pointer; transition: transform .18s, border-color .18s, background .18s, opacity .18s;
}
.primary-button { min-height: 43px; border-radius: 12px; padding: 0 18px; background: linear-gradient(135deg, var(--accent), #846fff); color: white; font-size: 12px; font-weight: 800; box-shadow: 0 10px 25px rgba(109,93,252,.24); }
.primary-button:hover { transform: translateY(-1px); }
.primary-button:disabled, .secondary-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.primary-button.full, .secondary-button.full { width: 100%; }
.auth-card .primary-button { margin-top: 22px; height: 50px; display: flex; justify-content: space-between; align-items: center; }
.secondary-button { min-height: 41px; border: 1px solid var(--line-strong); border-radius: 11px; padding: 0 15px; background: rgba(255,255,255,.035); color: #d8dce7; font-size: 12px; font-weight: 700; }
.secondary-button:hover, .ghost-button:hover { border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.07); }
.secondary-button.danger { color: #ff8598; border-color: rgba(255,100,124,.24); }
.ghost-button { min-height: 41px; border: 1px solid transparent; border-radius: 11px; padding: 0 15px; background: transparent; color: #aeb5c5; font-size: 12px; font-weight: 700; }
.icon-button { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.045); color: var(--muted); }

.app-shell { display: none; grid-template-columns: 236px 1fr; height: 100vh; position: relative; z-index: 1; }
.sidebar { height: 100vh; padding: 24px 18px 18px; background: rgba(8,10,16,.94); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.sidebar-brand { display: flex; gap: 12px; align-items: center; padding: 0 7px; }
.sidebar-brand strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.sidebar-brand span { display: block; color: #666e82; font-size: 8px; letter-spacing: .18em; margin-top: 4px; }
.sidebar-nav { display: grid; gap: 7px; margin-top: 52px; }
.nav-item { height: 46px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #7e8699; display: flex; align-items: center; gap: 12px; padding: 0 14px; cursor: pointer; font-size: 12px; font-weight: 700; text-align: left; }
.nav-item:hover { color: #d6dbe7; background: rgba(255,255,255,.03); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(109,93,252,.18), rgba(109,93,252,.04)); border-color: rgba(109,93,252,.2); }
.nav-icon { font-size: 17px; width: 19px; color: currentColor; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 12px; }
.mini-api-card { border: 1px solid var(--line); border-radius: 13px; padding: 12px; background: rgba(255,255,255,.02); }
.mini-api-head { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.mini-api-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5e6679; margin-top: 9px; font-size: 9px; }
.sidebar-user { display: flex; gap: 10px; align-items: center; padding: 10px 7px; }
.user-avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(109,93,252,.16); border: 1px solid rgba(109,93,252,.27); color: #c5bdff; font-weight: 900; }
.sidebar-user strong { display: block; font-size: 11px; max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user span { display: block; color: #687084; font-size: 9px; margin-top: 3px; }
.logout-button { height: 42px; border-radius: 11px; background: rgba(255,100,124,.06); border: 1px solid rgba(255,100,124,.16); color: #ff8295; font-size: 11px; font-weight: 800; }
.logout-button:hover { background: rgba(255,100,124,.12); }

.workspace { min-width: 0; height: 100vh; overflow-y: auto; padding: 24px 30px 42px; scrollbar-width: thin; scrollbar-color: #2b3040 transparent; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 23px; }
.topbar h2 { font-size: 24px; margin: 6px 0 0; letter-spacing: -.035em; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.session-state { height: 41px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; padding: 0 13px; color: #a8afbf; font-size: 10px; }
.session-state span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.session-state.running span { background: var(--green); box-shadow: 0 0 0 5px rgba(78,230,168,.09); }
.page { display: none; animation: pageIn .25s ease; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.hero-card { min-height: 255px; border: 1px solid rgba(109,93,252,.22); border-radius: 23px; padding: 35px 40px; background: radial-gradient(circle at 78% 45%, rgba(56,215,255,.15), transparent 22%), radial-gradient(circle at 84% 42%, rgba(109,93,252,.25), transparent 36%), linear-gradient(120deg, #121522, #0d1019); box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 320px; overflow: hidden; }
.hero-copy { align-self: center; max-width: 640px; }
.tag { display: inline-flex; padding: 7px 10px; border: 1px solid rgba(109,93,252,.25); border-radius: 999px; background: rgba(109,93,252,.1); color: #b8afff; font-size: 9px; letter-spacing: .16em; font-weight: 900; }
.hero-copy h3 { font-size: 34px; margin: 18px 0 10px; letter-spacing: -.045em; }
.hero-copy p { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0; }
.hero-actions { display: flex; gap: 9px; margin-top: 25px; }
.hero-orbit { position: relative; display: grid; place-items: center; }
.hero-character { width: 105px; height: 105px; border-radius: 32px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(109,93,252,.9), rgba(56,215,255,.7)); font-size: 42px; font-weight: 950; box-shadow: 0 0 80px rgba(109,93,252,.36); z-index: 2; }
.orbit-ring { position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.ring-one { width: 180px; height: 180px; }
.ring-two { width: 250px; height: 250px; border-style: dashed; animation: spin 28s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit-label { position: absolute; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: #171b28; border: 1px solid var(--line-strong); color: #aeb5c6; font-size: 9px; font-weight: 900; z-index: 3; }
.label-a { top: 17px; right: 55px; }.label-b { left: 16px; bottom: 55px; }.label-c { right: 20px; bottom: 45px; }

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 15px; }
.summary-card { min-width: 0; min-height: 104px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); padding: 17px; display: flex; align-items: center; gap: 13px; }
.summary-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-weight: 900; }
.summary-icon.cyan { color: #70e6ff; background: rgba(56,215,255,.1); }.summary-icon.violet { color: #bcb4ff; background: rgba(109,93,252,.12); }.summary-icon.green { color: #70efbd; background: rgba(78,230,168,.1); }.summary-icon.orange { color: #ffc081; background: rgba(255,171,92,.1); }
.summary-card div { min-width: 0; }
.summary-card small, .summary-card strong, .summary-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-card small { color: #6f778a; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.summary-card strong { font-size: 14px; margin-top: 6px; }
.summary-card span { color: #737b8f; font-size: 9px; margin-top: 4px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 29px 2px 12px; }
.section-heading span, .card-header span, .cfg-character-block span, .step-label + .column-help { color: #687084; font-size: 8px; letter-spacing: .16em; font-weight: 900; }
.section-heading h3, .card-header h3 { margin: 5px 0 0; font-size: 17px; letter-spacing: -.025em; }
.section-heading > small { color: #5e6679; font-size: 9px; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric-card { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 16px; }
.metric-head { display: flex; align-items: center; justify-content: space-between; }
.metric-head span { color: #737b90; font-size: 9px; letter-spacing: .12em; font-weight: 900; }
.metric-head b { font-size: 18px; }
.metric-card small { display: block; color: #687084; font-size: 9px; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-bar { height: 5px; background: rgba(255,255,255,.055); border-radius: 99px; margin-top: 17px; overflow: hidden; }
.metric-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s ease; }
.signal-bars { height: 24px; display: flex; align-items: end; gap: 3px; margin-top: 7px; }
.signal-bars i { width: 5px; border-radius: 2px; background: #2b3040; }.signal-bars i:nth-child(1){height:6px}.signal-bars i:nth-child(2){height:10px}.signal-bars i:nth-child(3){height:15px}.signal-bars i:nth-child(4){height:21px}.signal-bars i.active{background:var(--green)}
.network-strip { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 15px; background: rgba(12,15,23,.78); margin-top: 10px; overflow: hidden; }
.network-strip div { padding: 13px 16px; border-right: 1px solid var(--line); display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; }
.network-strip div:last-child { border-right: 0; }
.network-strip span { grid-row: 1 / 3; align-self: center; color: var(--accent-2); }
.network-strip small { color: #697185; font-size: 8px; }.network-strip b { font-size: 10px; margin-top: 3px; }
.dashboard-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12px; margin-top: 12px; }
.content-card { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 12px 40px rgba(0,0,0,.14); }
.progress-card, .log-card, .matches-card { padding: 19px; }
.card-header { display: flex; align-items: center; justify-content: space-between; }
.card-header > b { font-size: 25px; color: #c5beff; }
.card-header > small { color: #687084; font-size: 9px; }
.large-progress { height: 8px; margin-top: 28px; background: rgba(255,255,255,.055); border-radius: 999px; overflow: hidden; }
.large-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 18px rgba(56,215,255,.3); transition: width .45s ease; }
.progress-numbers { display: flex; justify-content: space-between; color: #727b8e; font-size: 9px; margin-top: 9px; }
.config-preview { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 24px; }
.config-preview div { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(255,255,255,.02); min-width: 0; }
.config-preview small, .config-preview b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.config-preview small { color: #687084; font-size: 8px; }.config-preview b { margin-top: 6px; font-size: 10px; }
.log-container { height: 205px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-right: 5px; user-select: text; }
.log-row { display: grid; grid-template-columns: 58px 1fr; gap: 9px; font-family: Consolas, monospace; font-size: 10px; line-height: 1.45; }
.log-time { color: #596174; }.log-text { color: #aeb5c5; }.log-text.success { color: #72dfb5; }.log-text.error { color: #ff8194; }
.matches-card { margin-top: 12px; }
.table-wrap { margin-top: 13px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: 10px; }
th { text-align: left; color: #5f677a; padding: 11px 12px; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--line); }
td { padding: 13px 12px; color: #aeb5c5; border-bottom: 1px solid rgba(255,255,255,.045); }
tbody tr:last-child td { border-bottom: 0; }.empty-cell { text-align: center; color: #5c6477; padding: 28px; }
.reward { color: #74eabb; font-weight: 800; }

.page-grid { display: grid; gap: 13px; }
.config-page-grid { grid-template-columns: 1fr 330px; }
.cfg-main-card { min-height: 570px; padding: 24px; }
.status-badge { display: inline-flex; min-height: 25px; align-items: center; padding: 0 10px; border: 1px solid rgba(255,171,92,.2); border-radius: 999px; color: #ffbd7b; background: rgba(255,171,92,.07); font-size: 8px !important; letter-spacing: .08em !important; }
.status-badge.success { color: #72e9ba; border-color: rgba(78,230,168,.22); background: rgba(78,230,168,.07); }
.status-badge.error { color: #ff8598; border-color: rgba(255,100,124,.22); background: rgba(255,100,124,.07); }
.empty-state { min-height: 450px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.empty-icon { width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; background: rgba(109,93,252,.1); color: #b7aeff; font-size: 28px; }
.empty-state h4 { font-size: 19px; margin: 20px 0 8px; }.empty-state p { max-width: 390px; color: var(--muted); font-size: 12px; line-height: 1.55; margin: 0 0 22px; }
.cfg-details { padding-top: 42px; }
.cfg-character-block { display: flex; align-items: center; gap: 18px; padding: 23px; border-radius: 18px; background: linear-gradient(110deg, rgba(109,93,252,.13), rgba(56,215,255,.04)); border: 1px solid rgba(109,93,252,.17); }
.cfg-avatar { width: 78px; height: 78px; border-radius: 24px; display: grid; place-items: center; font-size: 30px; font-weight: 950; background: linear-gradient(145deg, var(--accent), var(--accent-2)); box-shadow: 0 15px 34px rgba(109,93,252,.25); }
.cfg-character-block h3 { font-size: 25px; margin: 7px 0 4px; }.cfg-character-block p { color: #788095; font-size: 11px; margin: 0; }
.cfg-fields-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 18px 0; }
.cfg-fields-grid div { padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.cfg-fields-grid .wide { grid-column: 1 / -1; }.cfg-fields-grid small, .cfg-fields-grid b { display: block; }.cfg-fields-grid small { color: #687084; font-size: 8px; }.cfg-fields-grid b { margin-top: 7px; font-size: 12px; }
.config-actions-column { display: grid; gap: 13px; align-content: start; }.action-card { padding: 23px; }.action-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #bcb4ff; background: rgba(109,93,252,.1); font-size: 20px; }.action-card h4 { margin: 19px 0 7px; font-size: 15px; }.action-card p { color: var(--muted); font-size: 11px; line-height: 1.55; min-height: 53px; }.action-card button { margin-top: 12px; }

.profile-grid { grid-template-columns: 1fr 1fr; }
.profile-card { overflow: hidden; }.profile-cover { height: 145px; background: radial-gradient(circle at 75% 30%, rgba(56,215,255,.25), transparent 20%), linear-gradient(120deg, rgba(109,93,252,.44), rgba(56,215,255,.08)); border-bottom: 1px solid var(--line); }
.profile-content { padding: 0 24px 25px; }.profile-avatar { width: 82px; height: 82px; margin-top: -41px; border: 5px solid #10131d; border-radius: 25px; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent), var(--accent-2)); font-size: 30px; font-weight: 950; }
.profile-title { margin-top: 13px; }.profile-title h3 { font-size: 22px; margin: 0; }.profile-title span { color: #71798c; font-size: 10px; }
.profile-info-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 22px; }.profile-info-grid div { border: 1px solid var(--line); border-radius: 13px; padding: 15px; }.profile-info-grid small, .profile-info-grid b { display: block; }.profile-info-grid small { color: #687084; font-size: 8px; }.profile-info-grid b { margin-top: 7px; font-size: 10px; }.success-text { color: #63e3ad; }
.api-card { padding: 24px; }.api-endpoint { padding: 15px; border: 1px solid var(--line); background: #090b11; border-radius: 13px; margin-top: 24px; }.api-endpoint small { color: #687084; font-size: 8px; }.api-endpoint code { display: block; margin-top: 7px; color: #9eeaff; font-size: 10px; user-select: text; }
.binding-details { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 11px; }.binding-details div { padding: 15px; border: 1px solid var(--line); border-radius: 13px; min-width: 0; }.binding-details small, .binding-details b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.binding-details small { color: #687084; font-size: 8px; }.binding-details b { margin-top: 7px; font-size: 10px; }
.api-notice { margin: 15px 0; padding: 13px; border-left: 2px solid var(--orange); background: rgba(255,171,92,.055); color: #a9afbe; font-size: 10px; line-height: 1.55; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(2,3,7,.78); backdrop-filter: blur(10px); padding: 24px; }
.modal-backdrop.open { display: grid; }
.config-modal { width: min(1050px, 94vw); max-height: 92vh; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 24px; background: #10131c; box-shadow: 0 35px 100px rgba(0,0,0,.55); }
.modal-header { display: flex; justify-content: space-between; padding: 24px 26px; border-bottom: 1px solid var(--line); }
.modal-header > div > span { color: #7b8396; font-size: 8px; letter-spacing: .16em; font-weight: 900; }.modal-header h2 { font-size: 23px; margin: 7px 0 5px; }.modal-header p { margin: 0; color: var(--muted); font-size: 11px; }
.modal-close { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); color: #838b9e; font-size: 20px; cursor: pointer; }
.modal-body { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; padding: 25px 26px 18px; }
.setup-column, .character-column { min-width: 0; }.character-column { border-left: 1px solid var(--line); padding-left: 24px; }
.step-label { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }.step-label b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: rgba(109,93,252,.12); color: #b9b0ff; font-size: 9px; }.step-label span { font-size: 11px; font-weight: 800; }.step-label.second { margin-top: 24px; }
.inline-field { display: grid; grid-template-columns: 1fr auto; gap: 8px; }.inline-field .input-wrap { height: 48px; }.verified-account { margin-top: 10px; padding: 12px; border: 1px solid rgba(78,230,168,.17); background: rgba(78,230,168,.055); border-radius: 13px; display: flex; align-items: center; gap: 11px; }.verified-avatar { width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; color: #78edbc; background: rgba(78,230,168,.1); }.verified-account small, .verified-account b, .verified-account span { display: block; }.verified-account small { color: #61c99e; font-size: 7px; letter-spacing: .13em; }.verified-account b { margin-top: 3px; font-size: 11px; }.verified-account span { color: #758095; font-size: 8px; margin-top: 2px; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.column-help { margin: -5px 0 14px; line-height: 1.5; letter-spacing: normal !important; font-weight: 400 !important; font-size: 9px !important; }
.character-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.character-card { min-width: 0; height: 115px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: .18s; }
.character-card:hover { transform: translateY(-2px); border-color: rgba(109,93,252,.35); }.character-card.selected { border-color: rgba(109,93,252,.75); background: rgba(109,93,252,.11); box-shadow: inset 0 0 0 1px rgba(109,93,252,.18); }
.character-card i { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-style: normal; font-size: 17px; font-weight: 950; background: linear-gradient(145deg, rgba(109,93,252,.8), rgba(56,215,255,.55)); }.character-card b { font-size: 10px; margin-top: 8px; }.character-card span { color: #697185; font-size: 7px; margin-top: 3px; }
.modal-error { margin: 0 26px 14px; }.modal-footer { min-height: 74px; border-top: 1px solid var(--line); padding: 15px 26px; display: flex; align-items: center; justify-content: space-between; }.modal-footer > span { color: #687084; font-size: 9px; }.modal-footer > div { display: flex; gap: 8px; }

.toast-container { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: grid; gap: 9px; }
.toast { width: 330px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 13px; background: rgba(17,20,30,.96); box-shadow: 0 18px 55px rgba(0,0,0,.35); animation: toastIn .25s ease; }
.toast b { display: block; font-size: 11px; }.toast span { display: block; color: #8b93a6; font-size: 9px; margin-top: 5px; line-height: 1.4; }.toast.success { border-color: rgba(78,230,168,.25); }.toast.error { border-color: rgba(255,100,124,.3); }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .summary-grid { grid-template-columns: repeat(2,1fr); }
  .hero-card { grid-template-columns: 1fr 250px; }
  .character-grid { grid-template-columns: repeat(3,1fr); }
}

/* =========================================================
   Aurora UI 3.1 — premium redesign layer
   Functional selectors remain unchanged; this layer only
   updates presentation and responsive behavior.
   ========================================================= */
:root {
  --bg: #060b18;
  --panel: rgba(10, 16, 34, .74);
  --panel-solid: #0a1021;
  --panel-soft: rgba(16, 25, 48, .62);
  --line: rgba(156, 175, 221, .12);
  --line-strong: rgba(108, 228, 255, .24);
  --text: #f7fbff;
  --muted: #8f9bb6;
  --accent: #6ce4ff;
  --accent-2: #8f7cff;
  --green: #4fe09d;
  --orange: #ffc86c;
  --red: #ff748a;
  --shadow: 0 24px 70px rgba(0,0,0,.38);
}
body {
  background-color: var(--bg);
  background-image: linear-gradient(135deg, rgba(3,6,16,.88), rgba(7,12,26,.78)), url('bg/cyan.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  letter-spacing: .01em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 12%, rgba(108,228,255,.16), transparent 24%),
    radial-gradient(circle at 18% 88%, rgba(143,124,255,.10), transparent 25%),
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px, 28px 28px;
  z-index: 0;
}
.ambient { opacity: .12; filter: blur(125px); }
.ambient-a { background: var(--accent-2); }
.ambient-b { background: var(--accent); }
.brand-mark {
  color: #031018;
  background: linear-gradient(135deg, #f4feff 0%, #9cecff 38%, var(--accent) 100%);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 42px rgba(108,228,255,.22);
}
.brand-mark.large { border-radius: 24px; }
.auth-shell { position: relative; z-index: 2; }
.auth-visual {
  background:
    radial-gradient(circle at 28% 28%, rgba(108,228,255,.14), transparent 30%),
    linear-gradient(135deg, rgba(9,15,32,.34), rgba(6,10,23,.08));
}
.auth-visual h1 { letter-spacing: -.075em; }
.auth-visual h1 span { color: var(--accent); -webkit-text-stroke: 0; text-shadow: 0 0 34px rgba(108,228,255,.24); }
.auth-features div,
.auth-card,
.content-card,
.summary-card,
.metric-card,
.network-strip,
.hero-card,
.mini-api-card,
.profile-info-grid div,
.binding-details div,
.cfg-fields-grid div,
.api-endpoint {
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}
.auth-features div {
  background: rgba(9,15,31,.48);
  border-color: rgba(255,255,255,.06);
  border-radius: 18px;
}
.auth-card {
  border-radius: 30px;
  border-color: rgba(108,228,255,.16);
  background: linear-gradient(180deg, rgba(13,21,44,.78), rgba(7,12,27,.88));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.input-wrap, input, select {
  border-radius: 15px;
  border-color: rgba(170,188,228,.14);
  background: rgba(4,9,20,.74);
}
.input-wrap:focus-within, input:focus, select:focus {
  border-color: rgba(108,228,255,.5);
  box-shadow: 0 0 0 4px rgba(108,228,255,.10);
}
.primary-button {
  color: #031018;
  background: linear-gradient(135deg, #eafeff 0%, #95eaff 28%, var(--accent) 100%);
  box-shadow: 0 14px 34px rgba(108,228,255,.22);
  border-radius: 14px;
}
.primary-button:hover { box-shadow: 0 18px 42px rgba(108,228,255,.30); }
.secondary-button, .ghost-button, .icon-button {
  border-radius: 13px;
  border-color: rgba(255,255,255,.08);
  background: rgba(13,22,45,.58);
}
.sidebar {
  background: linear-gradient(180deg, rgba(6,11,25,.88), rgba(5,10,23,.78));
  border-right-color: rgba(255,255,255,.05);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}
.sidebar-brand { border-bottom-color: rgba(255,255,255,.06); }
.nav-item { border-radius: 15px; }
.nav-item.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(108,228,255,.16), rgba(108,228,255,.08));
  border-color: rgba(108,228,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(108,228,255,.10);
}
.nav-item.active .nav-icon { color: #04111c; background: linear-gradient(135deg,#fff,var(--accent)); }
.workspace { position: relative; z-index: 1; }
.topbar h2 { letter-spacing: -.045em; }
.session-state, .mini-api-card {
  border-color: rgba(255,255,255,.07);
  background: rgba(9,15,33,.54);
}
.hero-card {
  border-radius: 28px;
  border-color: rgba(108,228,255,.14);
  background:
    radial-gradient(circle at 83% 22%, rgba(108,228,255,.18), transparent 23%),
    radial-gradient(circle at 73% 74%, rgba(143,124,255,.10), transparent 26%),
    linear-gradient(145deg, rgba(14,23,47,.82), rgba(7,12,27,.88));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-card .tag { color: var(--accent); }
.hero-character { background: linear-gradient(145deg, #f3feff, var(--accent)); color:#031018; box-shadow:0 20px 50px rgba(108,228,255,.22); }
.orbit-ring { border-color: rgba(108,228,255,.16); }
.orbit-label { color: var(--accent); background: rgba(7,13,28,.76); border-color: rgba(108,228,255,.18); }
.summary-card, .metric-card, .content-card, .network-strip {
  border-color: rgba(255,255,255,.065);
  background: linear-gradient(180deg, rgba(13,21,43,.68), rgba(8,13,28,.80));
  box-shadow: 0 16px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.summary-card, .metric-card { border-radius: 20px; }
.content-card { border-radius: 24px; }
.summary-card:hover, .metric-card:hover, .content-card:hover { border-color: rgba(108,228,255,.16); }
.summary-icon.cyan { background: rgba(108,228,255,.10); color: var(--accent); }
.summary-icon.violet { background: rgba(143,124,255,.10); color: #b7aaff; }
.metric-bar, .large-progress { background: rgba(255,255,255,.07); }
.metric-bar i, .large-progress i { background: linear-gradient(90deg,var(--accent),#f0fdff); box-shadow:0 0 14px rgba(108,228,255,.32); }
.network-strip { border-radius: 18px; }
.log-row { padding: 8px 10px; border-radius: 12px; background: rgba(4,9,20,.46); border: 1px solid rgba(255,255,255,.04); }
.cfg-character-block {
  background: linear-gradient(110deg, rgba(108,228,255,.11), rgba(143,124,255,.06));
  border-color: rgba(108,228,255,.15);
}
.cfg-avatar, .profile-avatar { color:#031018; background:linear-gradient(145deg,#effdff,var(--accent)); box-shadow:0 18px 42px rgba(108,228,255,.18); }
.config-modal {
  border-color: rgba(108,228,255,.18);
  background: linear-gradient(180deg,#0c1429,#080e1e);
  border-radius: 28px;
}
::-webkit-scrollbar-thumb { background: rgba(145,165,207,.20); }
::-webkit-scrollbar-thumb:hover { background: rgba(108,228,255,.36); }

/* =========================================================
   Player statistics module
   ========================================================= */
.stats-search-card {
  display: grid;
  grid-template-columns: 1fr minmax(420px, .78fr);
  gap: 34px;
  align-items: center;
  padding: 24px 26px;
  margin-bottom: 14px;
  overflow: hidden;
  position: relative;
}
.stats-search-card::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -150px;
  top: -160px;
  border-radius: 50%;
  background: rgba(108,228,255,.10);
  filter: blur(35px);
  pointer-events: none;
}
.stats-search-copy > span,
.player-overview-copy > span {
  color: var(--accent);
  font-size: 8px;
  letter-spacing: .17em;
  font-weight: 900;
}
.stats-search-copy h3 { margin: 7px 0 7px; font-size: 21px; letter-spacing: -.035em; }
.stats-search-copy p { margin: 0; max-width: 610px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.stats-search-form { position: relative; z-index: 1; }
.stats-search-form .field-label { margin-top: 0; }
.stats-inline-field { grid-template-columns: minmax(220px, 1fr) auto; }
.stats-inline-field .primary-button { min-width: 168px; }
.stats-search-form .inline-error { margin-top: 9px; }

.stats-empty-state {
  min-height: 205px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px;
  text-align: left;
  border-style: dashed;
}
.stats-empty-icon {
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 26px;
  background: rgba(108,228,255,.08);
  border: 1px solid rgba(108,228,255,.15);
}
.stats-empty-state h3 { margin: 0 0 7px; font-size: 17px; }
.stats-empty-state p { margin: 0; color: var(--muted); font-size: 10px; }
.stats-result { display: grid; gap: 14px; }

.player-overview-card {
  min-height: 136px;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(105deg, rgba(108,228,255,.11), transparent 38%),
    linear-gradient(180deg, rgba(13,21,43,.78), rgba(8,13,28,.86));
}
.player-overview-glow {
  position: absolute;
  width: 340px;
  height: 220px;
  right: 5%;
  top: -165px;
  background: rgba(143,124,255,.14);
  filter: blur(42px);
  border-radius: 50%;
}
.player-avatar-large {
  width: 82px;
  height: 82px;
  border-radius: 25px;
  display: grid;
  place-items: center;
  color: #031018;
  font-size: 31px;
  font-weight: 950;
  background: linear-gradient(145deg,#f4feff,var(--accent));
  box-shadow: 0 18px 46px rgba(108,228,255,.22);
  position: relative;
  z-index: 1;
}
.player-overview-copy { min-width: 0; position: relative; z-index: 1; }
.player-overview-copy h3 { margin: 7px 0 7px; font-size: 27px; letter-spacing: -.045em; }
.player-tag-line { display: flex; align-items: center; gap: 9px; }
.player-tag-line code { color: #aeefff; font-size: 11px; user-select: text; }
.player-overview-meta { min-width: 190px; text-align: right; position: relative; z-index: 1; }
.player-overview-meta small,
.player-overview-meta b { display: block; }
.player-overview-meta small { color: #76839f; font-size: 8px; }
.player-overview-meta b { margin: 6px 0 10px; font-size: 10px; }
.player-overview-meta .ghost-button { min-height: 34px; padding: 0 12px; }

.player-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.player-stat-card {
  min-width: 0;
  min-height: 128px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 20px;
  padding: 15px 16px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(13,21,43,.68), rgba(8,13,28,.80));
  box-shadow: 0 16px 42px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.player-stat-card::after {
  content: "";
  position: absolute;
  width: 95px;
  height: 95px;
  right: -48px;
  bottom: -54px;
  border-radius: 50%;
  background: rgba(143,124,255,.08);
  filter: blur(8px);
}
.player-stat-card.primary-stat { border-color: rgba(108,228,255,.16); background: linear-gradient(165deg, rgba(108,228,255,.12), rgba(8,13,28,.82) 58%); }
.player-stat-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  margin-bottom: 10px;
  background: rgba(108,228,255,.09);
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}
.player-stat-card small,
.player-stat-card strong,
.player-stat-card em { display: block; position: relative; z-index: 1; }
.player-stat-card small { color: #7f8ba7; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.player-stat-card strong { margin-top: 6px; font-size: 21px; letter-spacing: -.035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-stat-card em { margin-top: 5px; color: #66728e; font-size: 8px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stats-details-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.victory-card,
.player-details-card,
.top-brawlers-card { padding: 22px 24px; }
.victory-row { margin-top: 16px; }
.victory-row > div:first-child { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.victory-row span { color: #aab4cc; font-size: 9px; }
.victory-row b { font-size: 9px; }
.victory-track { height: 7px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.065); }
.victory-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg,var(--accent),#effeff); box-shadow: 0 0 14px rgba(108,228,255,.30); transition: width .32s ease; }
.victory-row:nth-of-type(3) .victory-track i { background: linear-gradient(90deg,#8f7cff,#c8beff); }
.victory-row:nth-of-type(4) .victory-track i { background: linear-gradient(90deg,#4fe09d,#b9fbd8); }
.player-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 17px; }
.player-details-grid div { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(4,9,20,.42); }
.player-details-grid .wide { grid-column: 1 / -1; }
.player-details-grid small,
.player-details-grid b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-details-grid small { color: #6f7b96; font-size: 8px; }
.player-details-grid b { margin-top: 6px; font-size: 10px; }
.top-brawlers-card { margin-bottom: 2px; }
.brawlers-table th:first-child,
.brawlers-table td:first-child { width: 48px; color: #66738f; }
.brawlers-table .brawler-name { color: #eefaff; font-weight: 800; }

@media (max-width: 1260px) {
  .stats-search-card { grid-template-columns: 1fr; gap: 16px; }
  .player-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}