:root  {

 color-scheme:light;
 --bg:#f6f8fc;
 --surface:#fff;
 --glass:rgba(255,255,255,.82);
 --subtle:#eef2f8;

 --text:#273248;
 --muted:#77859b;
 --line:#e6ebf3;
 --blue:#5775df;
 --blue-soft:#edf1ff;

 --green:#269b83;
 --green-soft:#e9f7f1;
 --red:#cf6678;
 --red-soft:#fff0f2;
 --gold:#ba9153;

 --shadow:0 8px 36px rgba(44,62,99,.045);
 --radius:20px;
 --ease:cubic-bezier(.22,1,.36,1);

 --body-font:"Segoe UI","PingFang SC","Microsoft YaHei UI",sans-serif;

 --display-font:"Bahnschrift","DIN Alternate","Segoe UI",sans-serif;
 --mono:"Cascadia Code",Consolas,monospace;

}


html[data-theme=dark] {
color-scheme:dark;
--bg:#141923;
--surface:#1c2330;
--glass:rgba(24,31,44,.86);
--subtle:#252e3e;
--text:#e2e9f5;
--muted:#9aa8be;
--line:#2b3547;
--blue:#9bb0ff;
--blue-soft:#293453;
--green:#79d6b8;
--green-soft:#203c36;
--red:#ee9cab;
--red-soft:#412b36;
--gold:#e4bf85;
--shadow:0 8px 36px rgba(0,0,0,.1)}


* {
box-sizing:border-box}

html {
min-width:320px;
scroll-behavior:smooth;
scroll-padding-top:90px}

body {
margin:0;
min-height:100vh;
color:var(--text);
background:var(--bg);
font:14px/1.7 var(--body-font);
-webkit-font-smoothing:antialiased;
isolation:isolate}

body.is-api-loading {
overflow:hidden}

body::before {
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background:radial-gradient(ellipse at 15% 5%,rgba(136,181,227,.15),transparent 48%),radial-gradient(ellipse at 88% 25%,rgba(143,212,190,.13),transparent 42%),radial-gradient(ellipse at 50% 80%,rgba(171,173,231,.08),transparent 45%)}


a {
color:inherit;
text-decoration:none}

button,input,select,textarea {
font:inherit}

button,a,input,select {
touch-action:manipulation}

button {
border:0;
cursor:pointer;
color:inherit}

button:disabled {
cursor:not-allowed;
opacity:.45}

h1,h2,h3,p {
margin:0}

h1,h2,h3 {
font-weight:600;
line-height:1.4;
letter-spacing:-.025em}

img {
max-width:100%;
object-fit:cover}

svg {
flex-shrink:0}

small {
font-size:12px}

[hidden] {
display:none!important}

a,button,input,select,summary {
-webkit-tap-highlight-color:transparent}

a,button {
transition:color .2s,background .2s,box-shadow .25s,transform .3s var(--ease)}

:focus-visible {
outline:3px solid var(--blue);
outline-offset:4px}

::selection {
background:var(--blue-soft);
color:var(--blue)}


input,select,textarea {
width:100%;
min-width:0;
min-height:48px;
border:1px solid var(--line);
border-radius:12px;
padding:11px 15px;
background:var(--bg);
color:var(--text);
transition:border-color .2s,box-shadow .2s,background .2s}

input:focus,select:focus,textarea:focus {
outline:none;
border-color:var(--blue);
box-shadow:0 0 0 4px var(--blue-soft);
background:var(--surface)}

input::placeholder {
color:var(--muted);
opacity:.85}

input[type=checkbox] {
width:17px;
height:17px;
min-height:0;
flex:0 0 17px;
accent-color:var(--blue);
margin:4px 0 0}


.icon {
width:20px;
height:20px;
vertical-align:middle}

.blue {
color:var(--blue)}

.muted {
color:var(--muted)}

.mono {
font-family:var(--mono);
font-variant-numeric:tabular-nums}

.caps,.eyebrow {
font-size:10px;
font-weight:600;
letter-spacing:.16em;
color:var(--muted)}

.eyebrow {
display:block}

.status-dot {
display:inline-block;
width:6px;
height:6px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 0 4px var(--green-soft);
margin-right:10px;
vertical-align:2px}

.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0}

.skip-link {
position:fixed;
top:-100px;
left:16px;
z-index:200;
background:var(--surface);
padding:12px}

.skip-link:focus {
top:12px}


.site-header {
height:74px;
position:sticky;
top:0;
z-index:40;
background:var(--glass);
backdrop-filter:blur(20px);
border-bottom:1px solid var(--line)}

.header-inner {
height:100%;
max-width:1360px;
margin:auto;
padding:0 40px;
display:flex;
align-items:center;
gap:40px}

.brand {
display:inline-flex;
align-items:center;
gap:10px;
white-space:nowrap;
font:600 18px var(--display-font);
letter-spacing:.01em}

.brand img {
width:32px;
height:32px;
border-radius:10px}

.brand-light {
font-weight:400;
opacity:.65}

.desktop-nav {
display:flex;
gap:6px;
align-items:center}

.desktop-nav a {
font-size:13px;
color:var(--muted);
padding:9px 15px;
border-radius:10px}

.desktop-nav a:hover {
color:var(--text);
background:var(--subtle)}

.desktop-nav a.active {
background:var(--blue-soft);
color:var(--blue)}

.header-actions {
display:flex;
align-items:center;
gap:12px;
margin-left:auto}

.icon-button {
display:inline-flex;
width:38px;
height:38px;
align-items:center;
justify-content:center;
border-radius:12px;
background:transparent;
color:var(--muted)}

.icon-button:hover {
background:var(--subtle);
color:var(--text)}


.button {
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:46px;
padding:11px 22px;
border:1px solid transparent;
border-radius:12px;
background:var(--blue);
color:#fff;
font-size:13px;
font-weight:600;
white-space:nowrap;
box-shadow:0 5px 14px rgba(83,112,210,.13)}

.button:hover {
transform:translateY(-2px);
box-shadow:0 8px 22px rgba(83,112,210,.2)}

.button:active {
transform:translateY(0) scale(.98)}

html[data-theme=dark] .button {
color:#19253e}

.button-small {
min-height:36px;
padding:7px 15px;
font-size:12px}

.button-secondary,.button-ghost {
background:var(--surface);
color:var(--text);
border-color:var(--line);
box-shadow:none}

html[data-theme=dark] .button-secondary,html[data-theme=dark] .button-ghost {
color:var(--text)}

.button-ghost {
background:transparent}

.button-danger {
background:var(--red-soft);
color:var(--red);
box-shadow:none}

.button-block {
width:100%}

.button-row {
display:flex;
gap:12px;
flex-wrap:wrap}

.text-link {
display:inline-flex;
align-items:center;
gap:6px;
font-size:12px;
font-weight:500;
color:var(--blue);
background:transparent}

.text-link .icon {
width:16px;
height:16px}

.account-chip {
display:flex;
align-items:center;
gap:9px;
font-size:12px}

.avatar-letter {
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:12px;
background:var(--blue-soft);
color:var(--blue);
font-weight:600}


.surface {
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow)}

.pill {
display:inline-flex;
align-items:center;
gap:5px;
padding:4px 10px;
border-radius:7px;
font-size:11px;
font-weight:500;
white-space:nowrap;
line-height:1.6}

.pill-win {
background:var(--green-soft);
color:var(--green)}

.pill-loss {
background:var(--red-soft);
color:var(--red)}

.pill-blue {
background:var(--blue-soft);
color:var(--blue)}

.pill-neutral {
background:var(--subtle);
color:var(--muted)}

.section-heading {
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
margin-bottom:22px}

.section-heading h2 {
font-size:19px;
margin-top:4px}

.section-heading h3 {
font-size:16px}

.section-heading .eyebrow {
font-size:9px}

.count {
display:inline-block;
vertical-align:middle;
font:11px var(--mono);
color:var(--muted);
background:var(--subtle);
border-radius:6px;
padding:4px 7px;
margin-left:7px}

.field {
margin-bottom:20px}

.field label {
display:block;
margin-bottom:8px;
font-size:12px;
font-weight:500}

.field-hint,.help-text {
font-size:12px;
color:var(--muted)}

.field-hint {
margin-top:7px}

.check-line {
display:flex;
align-items:flex-start;
gap:9px;
font-size:12px}

.check-line a {
color:var(--blue)}

.form-message,.notice {
padding:12px 15px;
border-radius:12px;
margin:16px 0;
font-size:12px;
background:var(--red-soft);
color:var(--red);
line-height:1.8}

.form-message.success,.notice-success {
background:var(--green-soft);
color:var(--green)}

.notice-info {
background:var(--blue-soft);
color:var(--blue)}


.site-footer {
max-width:1180px;
margin:64px auto 0;
padding:25px 0 30px;
border-top:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
color:var(--muted);
font-size:11px}

.site-footer>div {
display:flex;
gap:24px}

.site-footer a:hover {
color:var(--blue)}

.footer-dot {
margin:0 9px}

.mobile-nav {
display:none}

.page-shell {
max-width:1180px;
margin:0 auto;
padding:36px 0 0}

.page-title {
margin-bottom:28px}

.page-title h1 {
font-size:28px;
margin:7px 0 9px}

.page-title p {
color:var(--muted);
font-size:13px}

.utility-shell {
max-width:820px;
padding:48px 24px;
margin:auto;
min-height:calc(100vh - 230px)}

.empty-state {
text-align:center;
padding:52px 24px;
color:var(--muted)}

.empty-state>.icon {
width:38px;
height:38px;
color:var(--blue);
margin-bottom:16px}

.empty-state h2 {
font-size:19px;
color:var(--text);
margin-bottom:10px}

.empty-state p {
font-size:13px;
margin-bottom:22px}

.empty-state .button-row {
justify-content:center}

.no-data {
text-align:center;
padding:25px 10px;
color:var(--muted);
font-size:12px}


.tabs {
display:flex;
gap:4px;
padding:4px;
background:var(--subtle);
border-radius:11px;
width:max-content;
max-width:100%;
overflow:auto}

.tabs button,.tabs a {
padding:7px 15px;
border-radius:8px;
white-space:nowrap;
background:transparent;
color:var(--muted);
font-size:12px}

.tabs .active {
background:var(--surface);
color:var(--blue);
box-shadow:0 2px 7px rgba(30,45,65,.05)}

.table-scroll {
overflow:auto;
overscroll-behavior-inline:contain}

.data-table {
width:100%;
border-collapse:collapse;
white-space:nowrap;
text-align:left;
font-size:12px}

.data-table th {
background:var(--bg);
font-size:11px;
color:var(--muted);
font-weight:500}

.data-table th,.data-table td {
padding:16px 20px;
border-bottom:1px solid var(--line)}

.data-table tr:last-child td {
border-bottom:0}

.data-table tbody tr {
transition:background .2s}

.data-table tbody tr:hover {
background:var(--bg)}

.pagination {
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin-top:24px}

.pagination a,.pagination button,.pagination span {
min-width:36px;
min-height:36px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:5px 10px;
border-radius:10px;
border:1px solid var(--line);
background:var(--surface);
font-size:12px}

.pagination .active {
color:var(--blue);
background:var(--blue-soft);
border-color:transparent}

.pagination a:hover,.pagination button:not(:disabled):hover {
background:var(--blue-soft);
color:var(--blue)}

.pagination .muted {
background:transparent;
border:0}


.modal {
border:1px solid var(--line);
border-radius:12px;
padding:20px;
width:min(420px,calc(100vw - 32px));
max-width:calc(100vw - 32px);
max-height:min(90vh,620px);
overflow:auto;
background:var(--surface);
color:var(--text);
box-shadow:0 24px 70px rgba(0,0,0,.32)}

html[data-theme=dark] .modal,
html[data-theme=dark] .app-modal-card {
background:#171c23;
border-color:#303740}

.modal[open] {
animation:dialog-in .25s var(--ease)}

.modal::backdrop {
background:rgba(3,8,15,.76);
backdrop-filter:blur(4px)}

html[data-theme=light] .modal::backdrop {
background:rgba(20,29,49,.35)}

.modal-heading {
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
margin-bottom:14px}

.modal-heading h2 {
display:flex;
align-items:center;
gap:9px;
font-size:16px}

.modal:not(.announcement-dialog) .modal-heading h2::before {
content:"";
width:8px;
height:8px;
flex:0 0 8px;
border-radius:50%;
background:var(--blue);
box-shadow:0 0 10px rgba(92,169,255,.35)}

html[data-theme=dark] .modal:not(.announcement-dialog) .modal-heading h2::before,
html[data-theme=dark] .app-modal-dot {
background:#5ca9ff}

.modal-heading .icon-button {
width:26px;
height:26px;
padding:0;
border-radius:7px;
color:var(--muted);
font-size:18px}

.modal-heading .icon-button:hover {
background:var(--subtle);
color:var(--text)}

.modal .button {
min-height:38px;
border-radius:8px;
border:1px solid transparent;
box-shadow:none;
transform:none}

.modal .button:hover {
box-shadow:none;
transform:none}

.modal:not(.announcement-dialog) .button:not(.button-secondary):not(.button-ghost):not(.button-danger) {
background:var(--blue);
color:#fff}

html[data-theme=dark] .modal:not(.announcement-dialog) .button:not(.button-secondary):not(.button-ghost):not(.button-danger) {
background:#5ca9ff;
color:#102235}

html[data-theme=dark] .app-modal-actions .button:not(.button-secondary):not(.button-ghost):not(.button-danger) {
background:#5ca9ff;
color:#102235}

.modal .button-secondary,
.modal .button-ghost {
background:var(--subtle);
border-color:transparent;
color:var(--text)}

.modal .button-danger {
background:var(--red-soft);
border-color:transparent;
color:var(--red)}

html[data-theme=dark] .modal:not(.announcement-dialog) .button-secondary:not(.active),
html[data-theme=dark] .modal:not(.announcement-dialog) .button-ghost:not(.active),
html[data-theme=dark] .app-modal-actions .button-secondary:not(.active),
html[data-theme=dark] .app-modal-actions .button-ghost:not(.active) {
background:#aab9ca;
border-color:transparent;
color:#142031}

.two-fields {
display:grid;
grid-template-columns:1fr 1fr;
gap:16px}


.toast {
position:fixed;
top:92px;
left:50%;
right:auto;
bottom:auto;
margin:0;
transform:translateX(-50%);
z-index:1000;
display:flex;
align-items:center;
gap:11px;
padding:14px 16px 14px 20px;
max-width:min(460px,calc(100% - 32px));
width:max-content;
border:1px solid var(--line);
border-radius:16px;
background:var(--surface);
color:var(--text);
box-shadow:0 16px 50px rgba(30,45,80,.14);
font-size:13px;
animation:toast-in .3s var(--ease)}

.app-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    padding: 20px;
}

.app-modal[hidden] {
    display: none;
}

.app-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 8, 15, .76);
    backdrop-filter: blur(4px);
}

html[data-theme=light] .app-modal-backdrop {
    background: rgba(20, 29, 49, .35);
}

.app-modal-card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    max-height: min(90vh, 620px);
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
    text-align: left;
    animation: dialog-in .22s var(--ease);
}

.app-modal-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.app-modal-heading h2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    font-size: 16px;
}

.app-modal-title-note {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    white-space: nowrap;
}

.app-modal-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 10px rgba(92, 169, 255, .35);
}

.app-modal-dismiss {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    margin: -4px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.app-modal-dismiss:hover {
    background: var(--subtle);
    color: var(--text);
}

.app-modal-dismiss:focus,
.app-modal-dismiss:focus-visible {
    outline: none;
}

.app-modal-card p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-line;
}

.app-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.app-modal-actions .button {
    min-width: 92px;
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 12px;
    box-shadow: none;
    transform: none;
}

.app-modal-actions .button:not(.button-secondary):not(.button-ghost):not(.button-danger) {
    background: var(--blue);
    color: #fff;
}

html[data-theme=dark] .app-modal-actions .button:not(.button-secondary):not(.button-ghost):not(.button-danger) {
    color: #102235;
}

.app-modal-actions .button-secondary,
.app-modal-actions .button-ghost {
    background: var(--subtle);
    border-color: transparent;
    color: var(--text);
}

.app-modal-actions .button-danger {
    background: var(--red-soft);
    border-color: transparent;
    color: var(--red);
}

.button-danger {
    background: var(--red);
    color: #fff;
}

.toast::backdrop {
    background: transparent;
    pointer-events: none;
}

.toast[data-type=error] {
border-color:var(--red);
color:var(--red)}

.toast-symbol {
display:grid;
place-items:center;
width:24px;
height:24px;
border-radius:50%;
background:var(--green-soft);
color:var(--green);
flex-shrink:0}

.toast[data-type=error] .toast-symbol {
background:var(--red-soft);
color:var(--red)}

.toast-close {
padding:2px 5px;
background:transparent;
color:var(--muted);
font-size:20px;
margin-left:6px}

.global-progress {
position:fixed;
top:0;
left:0;
right:0;
z-index:150;
height:3px;
pointer-events:none;
overflow:hidden;
opacity:0;
transition:opacity .2s}

.global-progress span {
display:block;
width:38%;
height:100%;
background:var(--blue);
border-radius:3px;
animation:loading-line 1.2s ease-in-out infinite}

.global-progress.active {
opacity:1}

.loading-backdrop {
position:fixed;
inset:0;
z-index:110;
display:grid;
place-items:center;
background:rgba(18,28,48,.18);
backdrop-filter:blur(3px);
}

html[data-theme=dark] .loading-backdrop {
background:rgba(0,0,0,.3);
}

.loading-status {
position:relative;
z-index:1;
display:flex;
gap:12px;
align-items:center;
background:var(--glass);
backdrop-filter:blur(16px);
border:1px solid var(--line);
padding:12px 19px;
border-radius:40px;
box-shadow:var(--shadow);
font-size:12px;
color:var(--muted)}

.spinner {
display:inline-block;
width:17px;
height:17px;
border:2px solid var(--line);
border-top-color:var(--blue);
border-radius:50%;
animation:spin .7s linear infinite}

.is-busy {
pointer-events:none}

.is-busy::after {
content:"";
width:14px;
height:14px;
border:2px solid currentColor;
border-right-color:transparent;
border-radius:50%;
animation:spin .7s linear infinite}

.page-enter {
animation:page-in .5s var(--ease) both}


@keyframes spin {
to {
transform:rotate(360deg)}

}

@keyframes page-in {
from {
opacity:0;
transform:translateY(12px)}

to {
opacity:1;
transform:translateY(0)}

}

@keyframes dialog-in {
from {
opacity:0;
transform:translateY(12px) scale(.97)}

to {
opacity:1;
transform:none}

}

@keyframes toast-in {
from {
opacity:0;
translate:0 -8px}

to {
opacity:1;
translate:0 0}

}

@keyframes loading-line {
from {
transform:translateX(-110%)}

to {
transform:translateX(365%)}

}


@media(prefers-reduced-motion:reduce) {
*,*::before,*::after {
animation:none!important;
transition:none!important;
scroll-behavior:auto!important}

}