:root {
  color-scheme: dark;
  --canvas: #1b1430;
  --surface: #221a3a;
  --surface-raised: #2a2045;
  --surface-soft: #35264f;
  --line: rgb(255 255 255 / 12%);
  --text: #fff8fc;
  --muted: rgb(255 248 252 / 68%);
  --subtle: rgb(255 248 252 / 45%);
  --mint: #cf8cff;
  --mint-strong: #ac62f3;
  --amber: #ffd16a;
  --coral: #ff8cad;
  --blue: #55c8ff;
  --green: #42d7ae;
  --danger: #ff668e;
  --shadow: 0 18px 50px rgb(8 4 20 / 45%);
}

:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #f5f2fc;
  --surface: #fff;
  --surface-raised: #f9f6ff;
  --surface-soft: #eee7fb;
  --line: rgb(63 43 97 / 13%);
  --text: #2a2340;
  --muted: #665c78;
  --subtle: #8d849d;
  --mint: #7549d9;
  --mint-strong: #6435ca;
  --amber: #b47b11;
  --coral: #cf5487;
  --blue: #287fb1;
  --green: #198d6e;
  --danger: #c83e66;
  --shadow: 0 14px 36px rgb(45 27 73 / 12%);
}

body {
  background:
    radial-gradient(ellipse at 78% 5%, rgb(113 69 189 / 19%), transparent 35%),
    linear-gradient(155deg, var(--canvas) 0%, #251632 56%, #351333 100%);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
:root[data-theme="light"] body {
  background: linear-gradient(155deg, #f5f7fb 0%, #f4efff 62%, #fff2f8 100%);
}

.shell { min-height: 100vh; }
.sidebar {
  width: 248px;
  border-right-color: rgb(255 255 255 / 10%);
  background: #1b142a;
  padding: 25px 15px 16px;
}
:root[data-theme="light"] .sidebar { background: #fff; }
.brand { flex-direction: column; gap: 5px; padding: 0 10px 17px; text-align: center; }
.brand-logo { display: block; width: auto; max-width: min(184px, 100%); height: 68px; border: 1px solid rgb(255 255 255 / 15%); border-radius: 10px; background: rgb(255 255 255 / 6%); padding: 4px; object-fit: contain; box-shadow: 0 2px 12px rgb(0 0 0 / 24%); }
.brand-copy { gap: 2px; }
.brand-copy strong { color: #ffcc66; font-size: 16px; font-weight: 700; }
.brand-copy small { color: #9486aa; font-size: 9px; letter-spacing: 2.4px; }
.demo-label { display: none; }
.nav-list { gap: 5px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / 10%); }
.nav-link { min-height: 44px; gap: 11px; border-radius: 12px; color: rgb(238 229 250 / 70%); padding: 0 12px; font-size: 12px; transition: color 150ms ease, background 150ms ease, border-color 150ms ease; }
.nav-link:hover { border-color: rgb(255 255 255 / 8%); background: rgb(255 255 255 / 5%); color: var(--text); }
.nav-link.active { border-color: rgb(244 152 218 / 26%); background: linear-gradient(100deg, rgb(205 119 210 / 24%), rgb(147 94 213 / 13%)); color: #f6c5eb; }
.nav-icon, [data-icon] { width: 18px; height: 18px; flex-basis: 18px; }
.nav-icon svg, [data-icon] svg { width: 18px; height: 18px; }
.sidebar-bottom { gap: 10px; }
.sidebar-account { display: flex; min-height: 56px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / 5%); padding: 8px 10px; }
.sidebar-account .avatar { width: 34px; height: 34px; flex: 0 0 34px; border: 0; background: linear-gradient(135deg, #ed8fc6, #b479fc); color: #321b49; }
.sidebar-account .profile-name { min-width: 0; }
.sidebar-account .profile-name strong { max-width: 155px; overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account .profile-name small { color: var(--muted); font-size: 10px; }
.theme-toggle-row { display: inline-flex; width: max-content; min-height: 40px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 4%); color: var(--muted); padding: 0 13px; font-size: 11px; }
.theme-toggle-row:hover { background: rgb(255 255 255 / 9%); color: var(--text); }
.theme-toggle-row [data-icon] { color: var(--amber); }
.gateway-state { display: none; }

.main-column { min-height: 100vh; margin-left: 248px; }
.topbar { height: 68px; border-bottom-color: rgb(255 255 255 / 10%); background: rgb(30 21 45 / 83%); padding: 0 22px 0 26px; backdrop-filter: blur(16px); }
:root[data-theme="light"] .topbar { background: rgb(255 255 255 / 88%); }
.crumb { color: var(--text); font-size: 15px; }
.crumb strong { font-weight: 650; }
.top-actions { gap: 10px; }
.standard-site { display: inline-flex; min-height: 37px; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 5%); color: var(--text); padding: 0 13px; font-size: 11px; }
.standard-site:hover { background: rgb(255 255 255 / 10%); }
.standard-site [data-icon] svg { width: 14px; height: 14px; }
.quick-config { min-height: 38px; border: 0; border-radius: 999px; background: linear-gradient(100deg, #ffb4cf, #d896ef); box-shadow: 0 5px 18px rgb(205 113 201 / 20%); color: #3b2146; padding: 0 15px; font-size: 11px; }
.quick-config:hover { background: linear-gradient(100deg, #ffc1d7, #e6a4fa); }
.profile-button { gap: 5px; padding: 0 0 0 3px; }
.top-avatar { width: 34px; height: 34px; border: 0; background: linear-gradient(135deg, #ef9bcf, #c978ef); color: #342047; }
.profile-button .profile-name { display: none; }
.profile-button .chevron { font-size: 13px; }
.account-menu { top: 60px; right: 14px; border-radius: 12px; backdrop-filter: blur(16px); }
.account-menu button { min-height: 38px; padding: 9px 10px; }
.page-content { width: 100%; max-width: none; margin: 0; padding: 8px 0 36px; }
.page-footer { display: none; }
.page-heading { align-items: center; min-height: 54px; margin: 0 20px 12px; }
.page-heading h1 { font-size: 22px; font-weight: 700; }
.page-heading p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.eyebrow { color: #d8a0ff; font-size: 10px; letter-spacing: 2px; }

.welcome-panel { display: flex; min-height: 145px; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(110deg, rgb(255 255 255 / 6%), rgb(157 90 194 / 8%)); margin: 0 0 17px; padding: 23px 30px; }
.welcome-panel h1 { margin: 0; color: var(--text); font-size: 25px; font-weight: 720; line-height: 1.3; overflow-wrap: anywhere; }
.welcome-panel p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.welcome-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.account-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.account-status .status-dot { background: var(--green); }
.btn-refresh { min-height: 39px; border-radius: 12px; background: rgb(255 255 255 / 7%); padding: 0 13px; }
.kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 17px; }
.kpi-card { min-height: 145px; border-radius: 18px; background: linear-gradient(145deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 3%)); padding: 18px 20px; }
.kpi-top { min-height: 28px; color: var(--muted); font-size: 12px; }
.kpi-icon { width: 34px; height: 34px; border-radius: 10px; background: rgb(255 198 96 / 14%); color: var(--amber); }
.kpi-icon.violet { background: rgb(157 110 255 / 17%); color: #a88cff; }
.kpi-icon.pink { background: rgb(226 120 185 / 16%); color: #ef91c9; }
.kpi-icon.green { background: rgb(65 215 174 / 15%); color: var(--green); }
.kpi-value { margin-top: 12px; font-size: 28px; font-weight: 680; }
.kpi-foot { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.dashboard-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 14px; margin-bottom: 17px; }
.panel { border-color: var(--line); border-radius: 20px; background: linear-gradient(150deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%)); }
.panel-pad { padding: 19px 21px; }
.panel-heading { min-height: 28px; align-items: center; }
.panel-heading h2 { font-size: 13px; font-weight: 650; }
.panel-heading > span, .panel-heading p { color: var(--muted); font-size: 10px; }
.usage-summary { min-height: 246px; }
.quota-meter-labels { display: flex; justify-content: space-between; gap: 12px; margin: 20px 1px 9px; color: var(--muted); font-size: 11px; }
.quota-meter-labels strong { color: var(--text); }
.quota-meter { height: 9px; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / 9%); }
.quota-meter > span { display: block; height: 100%; min-width: 5px; border-radius: inherit; background: linear-gradient(90deg, #ef88cb, #bd7cff); }
.quota-meter-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--muted); font-size: 10px; }
.quota-meter-foot strong { color: #e9a3eb; }
.trend-panel { min-height: 246px; }
.usage-bars { position: relative; display: grid; min-height: 180px; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; margin-top: 13px; }
.usage-bar-grid { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 19px; color: var(--subtle); font-size: 9px; text-align: right; }
.usage-bar-column { display: grid; min-width: 0; grid-template-rows: 19px minmax(80px, 1fr) 19px; justify-items: center; gap: 0; }
.usage-bar-column:first-of-type { grid-column: 2; }
.usage-bars { grid-template-columns: 28px repeat(7, minmax(0, 1fr)); }
.usage-bar-value { height: 19px; color: #f0b9ef; font-size: 9px; white-space: nowrap; }
.usage-bar-track { display: flex; width: min(36px, 66%); height: 100%; align-items: flex-end; overflow: hidden; border-radius: 9px 9px 4px 4px; background: rgb(255 255 255 / 6%); }
.usage-bar { width: 100%; min-height: 4px; border-radius: 9px 9px 3px 3px; background: rgb(193 147 231 / 24%); transition: height 220ms ease; }
.usage-bar[data-current="true"] { background: linear-gradient(180deg, #f09bcf, #9d70f3); }
.usage-bar-date { color: var(--muted); font-size: 9px; white-space: nowrap; }
.shortcut-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 17px; }
.shortcut-card { display: flex; min-width: 0; min-height: 83px; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / 5%); padding: 11px 13px; transition: border-color 150ms ease, background 150ms ease; }
.shortcut-card:hover { border-color: rgb(207 140 255 / 35%); background: rgb(255 255 255 / 8%); }
.shortcut-card > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.shortcut-card strong { font-size: 12px; }
.shortcut-card small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.shortcut-card .chevron { margin-left: auto; }
.shortcut-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 11px; background: rgb(235 132 196 / 12%); color: #ed91c4; }
.shortcut-icon.violet { background: rgb(165 126 242 / 15%); color: #b396fa; }
.shortcut-icon.blue { background: rgb(86 176 234 / 14%); color: #75c8f5; }
.shortcut-icon.amber { background: rgb(242 185 91 / 14%); color: #f2c16d; }
.dashboard-records { border-top: 1px solid var(--line); padding-top: 20px; }
.dashboard-records .section-heading { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 14px; margin-bottom: 13px; }
.dashboard-records .section-heading > div:first-child { display: grid; gap: 3px; }
.dashboard-records .section-heading .eyebrow { margin: 0; color: #43cbb2; font-size: 9px; }
.dashboard-records .section-heading h2 { margin: 0; font-size: 19px; }
.dashboard-records .record-count { color: var(--muted); font-size: 11px; white-space: nowrap; }
.dashboard-records .filter-row { margin: 0; }
.dashboard-records .field { min-height: 34px; border-radius: 999px; font-size: 10px; }
.usage-section { border-top-color: var(--line); }
.table-wrap { border-color: var(--line); border-radius: 14px; background: rgb(255 255 255 / 2%); }
.table-wrap th { background: rgb(255 255 255 / 8%); color: var(--muted); font-size: 10px; }
.table-wrap td { border-top-color: rgb(255 255 255 / 8%); color: var(--muted); font-size: 10px; }
.table-wrap td strong, .table-wrap td .model-name { color: var(--text); }
.table-foot { color: var(--muted); font-size: 10px; }

.model-endpoint-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 0 17px 15px; }
.model-endpoint { min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: rgb(255 255 255 / 4%); padding: 12px; }
.endpoint-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.endpoint-copy { display: flex; min-height: 34px; align-items: center; gap: 8px; border-radius: 7px; background: rgb(126 91 196 / 14%); padding: 0 7px 0 10px; }
.endpoint-copy code { min-width: 0; flex: 1; overflow-wrap: anywhere; color: var(--text); font-size: 10px; }
.endpoint-copy .btn { min-height: 27px; }
.endpoint-note { display: flex; flex-direction: column; justify-content: center; }
.endpoint-note .endpoint-heading { margin: 0; }
.endpoint-note p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.model-toolbar { align-items: center; justify-content: flex-start; margin: 0 17px 12px; }
.model-toolbar .search-field { width: min(300px, 60%); min-height: 36px; border-radius: 999px; }
.model-toolbar .field { min-width: 150px; min-height: 36px; border-radius: 999px; }
.model-table { min-width: 740px; }
.model-table code { color: var(--muted); font-size: 10px; }
.model-table td { max-width: 280px; }
.model-table td:first-child { min-width: 155px; }
.model-table .model-name { gap: 8px; }
.model-table .provider-dot { background: linear-gradient(135deg, #e08cf1, #8f6df2); }

.key-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin: 5px 17px 16px; }
.key-action-card { display: flex; min-height: 176px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 21px; background: linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%)); color: var(--text); cursor: pointer; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; }
.key-action-card:hover { transform: translateY(-1px); border-color: rgb(205 140 255 / 35%); background: rgb(255 255 255 / 7%); }
.key-action-card strong { font-size: 14px; }
.key-action-card small { color: var(--muted); font-size: 10px; }
.key-action-icon { display: grid; width: 42px; height: 42px; place-items: center; color: #a980ff; }
.key-action-icon.green { color: #3ed1ab; }
.key-rules { margin: 0 17px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / 3%); }
.key-rules summary { display: flex; min-height: 47px; align-items: center; justify-content: space-between; padding: 0 14px; cursor: pointer; font-size: 11px; list-style: none; }
.key-rules summary::-webkit-details-marker { display: none; }
.key-rules summary::after { color: var(--muted); content: "+"; font-size: 17px; }
.key-rules[open] summary::after { content: "−"; }
.key-rules summary span { display: inline-flex; align-items: center; gap: 8px; }
.key-rules summary [data-icon] { color: var(--amber); }
.key-rules p { border-top: 1px solid var(--line); margin: 0; padding: 13px 15px; color: var(--muted); font-size: 11px; }
.key-list-panel { border: 1px solid var(--line); border-radius: 19px; background: rgb(255 255 255 / 3%); margin: 0 17px 20px; padding: 15px; }
.key-list-panel .section-heading { margin: 0 0 10px; }
.key-list-panel h2 { font-size: 14px; }
.key-list-panel .table-wrap { border-radius: 12px; }

.config-reference-panel { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 2%)); margin: -8px 0 20px; padding: 25px 4.3% 30px; }
.config-title { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 1px 0 26px; }
.config-title h1 { margin: 0; font-size: 22px; }
.config-title > span { color: #c7a0ff; }
.config-fields { display: grid; gap: 18px; margin: 0 2.2% 15px; }
.config-fields .form-field { gap: 8px; }
.config-fields label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.config-fields label [data-icon] { color: #c99af4; }
.config-fields .field { min-height: 48px; border-radius: 13px; background: rgb(8 7 17 / 28%); font-size: 12px; }
.endpoint-select { display: flex; min-height: 48px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 13px; background: rgb(8 7 17 / 28%); padding: 0 8px 0 13px; }
.endpoint-select code { min-width: 0; flex: 1; overflow-wrap: anywhere; color: var(--text); font-size: 11px; }
.endpoint-select .row-icon { width: 34px; height: 34px; }
.config-advanced { margin: 0 2.2% 24px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 12px; background: rgb(255 255 255 / 2%); }
.config-advanced summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; cursor: pointer; list-style: none; font-size: 11px; }
.config-advanced summary::-webkit-details-marker { display: none; }
.config-advanced summary span:first-child { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.config-advanced summary span:last-child { color: var(--muted); }
.config-advanced .config-status { margin: 0; border-top: 1px solid var(--line); padding: 11px 14px; }
.config-advanced code { color: #d4a7ff; }
.config-mode-title { margin: 0 2.2% 12px; font-size: 15px; }
.config-mode-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 2.2% 20px; }
.config-mode-tabs button { display: inline-flex; min-height: 39px; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; background: rgb(255 255 255 / 3%); color: var(--muted); padding: 0 12px; font-size: 10px; }
.config-mode-tabs button:hover { border-color: rgb(205 140 255 / 35%); color: var(--text); }
.config-mode-tabs button[aria-selected="true"] { border-color: transparent; background: linear-gradient(105deg, #7e52ee, #b147df); box-shadow: 0 5px 16px rgb(133 74 225 / 25%); color: #fff; }
.config-mode-panel { margin: 0 2.2%; }
.config-mode-panel h2 { margin: 0 0 5px; font-size: 14px; }
.config-mode-panel > p { margin: 0 0 14px; color: var(--muted); font-size: 11px; }
.config-preview { min-height: 170px; margin: 0 0 14px; border-radius: 13px; background: rgb(8 7 17 / 35%); color: #eee1fa; font: 11px/1.75 "Cascadia Code", Consolas, monospace; white-space: pre-wrap; }
.btn-config-copy { width: 100%; min-height: 46px; border: 0; border-radius: 12px; background: linear-gradient(100deg, #ffb3d4, #d77bf0); color: #392047; font-size: 12px; }
.btn-config-copy:hover { background: linear-gradient(100deg, #ffc4dd, #e596f7); }
.software-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 18px; }
.software-strip span { display: grid; min-width: 92px; justify-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / 4%); padding: 10px; }
.software-strip img { width: 32px; height: 32px; object-fit: contain; }
.software-strip small { color: var(--muted); font-size: 9px; text-transform: capitalize; }

.software-panel, .faq-section { border: 1px solid var(--line); border-radius: 18px; background: rgb(255 255 255 / 3%); margin: 0 0 15px; padding: 22px; }
.software-panel { margin-top: 12px; }
.software-panel > h2, .faq-section > h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 14px; }
.software-panel > h2 [data-icon], .faq-section > h2 [data-icon] { color: #b38cff; }
.software-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.software-groups article { min-width: 0; border: 1px solid rgb(255 255 255 / 8%); border-radius: 16px; background: rgb(255 255 255 / 2%); padding: 16px; text-align: center; }
.software-group-icon { display: grid; width: 44px; height: 44px; place-items: center; margin: 0 auto 9px; border-radius: 13px; background: rgb(130 87 231 / 15%); color: #a483ff; }
.software-group-icon.terminal-icon { background: rgb(68 156 234 / 13%); color: #65b8f4; }
.software-groups h3 { margin: 0 0 13px; font-size: 12px; }
.software-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.software-card { display: grid; min-width: 64px; min-height: 74px; justify-items: center; align-content: center; gap: 5px; border: 1px solid rgb(255 255 255 / 6%); border-radius: 11px; background: rgb(128 75 221 / 8%); padding: 7px; }
.software-card img { width: 29px; height: 29px; object-fit: contain; }
.software-card span { color: #c3a9e7; font-size: 8px; text-transform: capitalize; }
.software-note { margin: 12px 0 0; border-radius: 10px; background: rgb(45 210 171 / 8%); color: #5be0c1; padding: 11px; font-size: 10px; text-align: center; }
.faq-section { padding: 20px; }
.faq-section .faq-list { gap: 7px; }
.faq-section .faq-item { border-color: rgb(255 255 255 / 8%); border-radius: 14px; background: rgb(12 9 23 / 30%); }
.faq-section .faq-item summary { min-height: 52px; padding: 0 14px; font-size: 11px; }
.faq-section .faq-answer { border-top-color: var(--line); color: var(--muted); }

.recharge-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(245px, .7fr); align-items: start; gap: 14px; margin: 0 17px 20px; }
.recharge-left, .recharge-right { display: grid; min-width: 0; align-content: start; gap: 13px; }
.recharge-card { min-width: 0; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%)); padding: 17px; }
.recharge-card h3, .recharge-card h4 { margin: 0 0 7px; font-size: 13px; }
.recharge-card h4 { font-size: 12px; }
.tip-text { margin: 0 0 13px; color: var(--muted); font-size: 10px; }
.input-row { display: flex; align-items: center; gap: 9px; }
.input-row .field { min-width: 0; min-height: 39px; flex: 1; border-radius: 9px; }
.input-row .btn { min-height: 39px; }
.recharge-card .form-error { min-height: 0; margin: 7px 0 0; }
.amount-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.amount-option { min-width: 76px; min-height: 37px; border: 1px solid var(--line); border-radius: 9px; background: rgb(255 255 255 / 3%); color: var(--text); padding: 0 12px; font-size: 11px; }
.amount-option.active { border-color: #d18cff; background: rgb(175 104 234 / 20%); color: #edc0ff; }
.recharge-card .summary-row { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgb(255 255 255 / 7%); padding: 8px 0; color: var(--muted); font-size: 10px; }
.recharge-card .summary-row strong { color: var(--text); }
.payment-method-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 12px; }
.payment-method-list .tag { border-radius: 999px; padding: 0 10px; }
.full-btn { width: 100%; }
.recharge-history-card { padding: 0; overflow: hidden; }
.recharge-history-card > summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; cursor: pointer; list-style: none; }
.recharge-history-card > summary::-webkit-details-marker { display: none; }
.recharge-history-card > summary h3 { margin: 0; }
.recharge-history-card > summary span { color: var(--muted); font-size: 10px; }
.recharge-history-card[open] > .table-wrap { margin: 0 12px 12px; }
.note-card ul { display: grid; gap: 10px; margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.note-card .quota-row { border-top: 1px solid rgb(255 255 255 / 8%); padding: 11px 0 0; }

.invite-wrap { margin: 0 17px 20px; }
.invite-header { min-height: 34px; margin: 0 0 10px; }
.invite-title { font-size: 18px; font-weight: 700; }
.invite-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.invite-stat-card { display: flex; min-height: 120px; flex-direction: column; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / 4%); padding: 15px; }
.invite-stat-label { color: var(--muted); font-size: 10px; }
.invite-stat-value { color: var(--text); font-size: 21px; font-weight: 700; }
.invite-withdraw-btn { width: max-content; min-height: 29px; border: 1px solid rgb(233 144 207 / 24%); border-radius: 8px; background: rgb(216 125 196 / 12%); color: #f2b5df; padding: 0 9px; font-size: 9px; }
.invite-panel { border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / 3%); margin-bottom: 13px; padding: 16px; }
.invite-panel-title { margin: 0; font-size: 13px; font-weight: 650; }
.invite-panel-desc { margin: 6px 0 13px; color: var(--muted); font-size: 10px; }
.invite-link-row { display: flex; align-items: center; gap: 8px; }
.invite-link-input { min-width: 0; min-height: 39px; flex: 1; border-radius: 9px; color: #e1b2ff; font-size: 10px; }
.invite-user-summary { display: flex; justify-content: space-between; margin-top: 11px; border-top: 1px solid var(--line); padding-top: 11px; color: var(--muted); font-size: 10px; }
.invite-user-summary strong { color: var(--text); font-size: 16px; }

.welfare-wrap { border: 1px solid var(--line); border-radius: 17px; background: rgb(255 255 255 / 3%); margin: 12px 17px 20px; overflow: hidden; }
.welfare-head { display: flex; width: 100%; min-height: 60px; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 3%); color: var(--text); padding: 0 17px; text-align: left; }
.welfare-head > span { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 650; }
.welfare-head > span:first-child svg { color: #d197ff; }
.welfare-head[aria-expanded="false"] { border-bottom: 0; }
.welfare-body { padding: 16px; }
.welfare-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 11px; }
.welfare-tab { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); padding: 0 12px; font-size: 10px; }
.welfare-tab[aria-selected="true"] { border-color: rgb(214 152 255 / 24%); background: rgb(177 117 240 / 15%); color: #e3bcff; }
.welfare-activity { padding: 15px 0 4px; }
.welfare-task-card { display: flex; min-height: 92px; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / 3%); padding: 14px; }
.welfare-task-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 12px; background: rgb(237 168 81 / 15%); color: var(--amber); }
.welfare-task-card > div { min-width: 0; flex: 1; }
.welfare-task-card strong { font-size: 12px; }
.welfare-task-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.welfare-checkin-stats { display: flex; gap: 20px; margin-top: 13px; color: var(--muted); font-size: 10px; }
.welfare-checkin-stats strong { color: var(--text); }
.welfare-empty { border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); padding: 35px 16px; text-align: center; font-size: 11px; }

.recharge-band, .referral-band, .reward-card, .plan-card, .config-panel { border-color: var(--line); border-radius: 18px; background: linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%)); }
.callout { border-color: rgb(153 112 237 / 20%); border-radius: 13px; background: rgb(143 89 220 / 8%); }
.referral-band { margin: 0 17px; }
.content-grid { margin: 0 17px; }
.content-grid .usage-section { grid-column: 1 / -1; }
.usage-section:not(.dashboard-records) { margin: 0 17px 18px; padding-top: 17px; }
.faq-toolbar { margin: 0 17px 13px; }
.auth-mode .sidebar { display: none; }
.auth-mode .main-column { margin-left: 0; }
.auth-mode .page-content { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }
.auth-panel { border-color: var(--line); border-radius: 20px; background: linear-gradient(145deg, var(--surface-raised), var(--surface)); }

@media (max-width: 1100px) {
  .sidebar { width: 220px; }
  .main-column { margin-left: 220px; }
  .dashboard-records .section-heading { grid-template-columns: 1fr auto; }
  .dashboard-records .record-count { display: none; }
  .shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invite-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .sidebar { position: sticky; z-index: 10; inset: auto; width: 100%; height: auto; padding: 8px 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand, .sidebar-account, .gateway-state, .theme-toggle-row { display: none; }
  .nav-list { display: flex; overflow-x: auto; gap: 5px; padding: 2px 0 9px; scrollbar-width: thin; }
  .nav-link { min-width: max-content; min-height: 37px; padding: 0 10px; font-size: 10px; }
  .main-column { margin: 0; }
  .topbar { top: 0; height: 60px; padding: 0 14px; }
  .page-content { padding-top: 8px; }
  .welcome-panel { margin: 0 9px 12px; padding: 19px; }
  .kpi-grid, .dashboard-grid, .model-endpoint-grid, .software-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid, .dashboard-grid, .shortcut-grid { margin-right: 9px; margin-left: 9px; }
  .dashboard-grid > * { min-width: 0; }
  .dashboard-records { margin: 0 9px; }
  .page-heading { margin-right: 12px; margin-left: 12px; }
  .model-endpoint-grid, .model-toolbar { margin-right: 12px; margin-left: 12px; }
  .key-action-grid, .key-rules, .key-list-panel, .software-panel, .faq-section { margin-right: 10px; margin-left: 10px; }
  .recharge-layout, .invite-wrap, .welfare-wrap { margin-right: 10px; margin-left: 10px; }
}
@media (max-width: 560px) {
  .topbar { height: 56px; }
  .crumb { font-size: 13px; }
  .standard-site { min-height: 33px; padding: 0 9px; font-size: 0; }
  .standard-site [data-icon] { width: 16px; height: 16px; }
  .quick-config { width: 37px; min-width: 37px; height: 37px; min-height: 37px; padding: 0; }
  .quick-config span:last-child { display: none; }
  .top-actions { gap: 6px; }
  .welcome-panel { min-height: auto; align-items: flex-start; flex-direction: column; gap: 13px; padding: 16px; }
  .welcome-panel h1 { font-size: 20px; }
  .welcome-actions { width: 100%; justify-content: space-between; }
  .kpi-grid { gap: 8px; }
  .kpi-card { min-height: 121px; padding: 12px; }
  .kpi-value { font-size: 22px; }
  .dashboard-grid, .model-endpoint-grid, .software-groups, .key-action-grid { grid-template-columns: minmax(0, 1fr); }
  .recharge-layout, .invite-stat-row { grid-template-columns: minmax(0, 1fr); }
  .input-row { align-items: stretch; flex-direction: column; }
  .input-row .btn { width: 100%; }
  .welfare-task-card { align-items: flex-start; flex-wrap: wrap; }
  .welfare-task-card .btn { flex: 1 1 100%; }
  .invite-link-row { align-items: stretch; flex-direction: column; }
  .invite-link-row .btn { width: 100%; }
  .dashboard-grid { gap: 9px; }
  .usage-summary, .trend-panel { min-height: 205px; }
  .shortcut-grid { gap: 8px; }
  .shortcut-card { min-height: 73px; gap: 7px; padding: 8px; }
  .shortcut-icon { width: 31px; height: 31px; flex-basis: 31px; }
  .shortcut-card strong { font-size: 10px; }
  .shortcut-card small { font-size: 8px; }
  .dashboard-records .section-heading { grid-template-columns: 1fr; align-items: start; }
  .dashboard-records .filter-row { width: 100%; flex-wrap: wrap; }
  .dashboard-records .filter-row .field { min-width: 0; flex: 1 1 38%; }
  .dashboard-records .filter-row .btn { flex: 1 1 100%; }
  .filter-row .range-sep { display: none; }
  .model-toolbar { align-items: stretch; flex-direction: column; }
  .model-toolbar .search-field, .model-toolbar .field { width: 100%; }
  .config-reference-panel { padding: 20px 11px; }
  .endpoint-select code { font-size: 9px; }
  .config-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .config-mode-tabs button { justify-content: center; padding: 0 6px; font-size: 9px; }
  .page-heading { flex-wrap: wrap; align-items: flex-start; }
  .page-heading .heading-actions { width: 100%; flex-wrap: wrap; }
  .page-heading .heading-actions .btn { flex: 1 1 auto; }
  .referral-band { grid-template-columns: minmax(0, 1fr); }
  .form-grid, .content-grid.three { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}