:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172033; background: #eff7f7; --border:#dbe2ee; --input:#fff; --text:#172033; --panel:#fff; }
[data-theme="dark"] { color-scheme: dark; color: #e6edf8; background: #0c1422; --border:#34445d; --input:#0f1929; --text:#e6edf8; --panel:#151f30; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background:#eff7f7; color: #172033; transition: background .2s ease, color .2s ease; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; }
.app-shell { min-height: 100vh; }
.loading { padding: 48px; text-align: center; color: #65728a; }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, #dceaff, transparent 35%), #f5f7fb; }
.auth-card { width: min(440px, 100%); background: white; border: 1px solid #e5eaf2; border-radius: 18px; box-shadow: 0 16px 50px #25365b18; padding: 32px; }
.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 26px; }
.brand-home-link { color: inherit; text-decoration: none; cursor: pointer; }
.brand-home-link:focus-visible { outline: 2px solid #5b7cff; outline-offset: 4px; border-radius: 8px; }
.auth-card .brand { justify-content: center; }
.brand-logo { width: 54px; height: 54px; border-radius: 14px; display: block; object-fit: cover; flex: 0 0 auto; }
.sidebar .brand-logo { width: 38px; height: 38px; border-radius: 10px; }
h1, h2, h3 { margin: 0; }
h1 { font-size: 23px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
.muted { color: #738097; font-size: 13px; }
.field { display: grid; gap: 7px; margin: 15px 0; }
.field label { color: #46526a; font-size: 13px; font-weight: 600; }
.setting-hint { min-height: 42px; display: flex; align-items: center; padding: 10px 12px; border: 1px solid #dbe2ee; border-radius: 9px; color: #738097; font-size: 13px; }
input, textarea, select { width: 100%; border: 1px solid #dbe2ee; border-radius: 9px; padding: 10px 12px; outline: none; background: #fff; color: #172033; }
input:focus, textarea:focus, select:focus { border-color: #5b7cff; box-shadow: 0 0 0 3px #5b7cff20; }
textarea { min-height: 82px; resize: vertical; }
.btn { border-radius:9px; padding:10px 14px; font-weight:650; text-decoration:none; transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease; box-shadow:0 2px 4px #0f172a18,0 5px 12px #0f172a0a; }
.btn:hover { transform:translateY(-1px); box-shadow:0 3px 6px #0f172a1c,0 7px 15px #0f172a0e; }
.btn:active { transform:translateY(0); box-shadow:inset 0 1px 2px #0f172a20,0 1px 2px #0f172a10; }
.btn:disabled { transform:none; box-shadow:none; opacity:.55; cursor:not-allowed; }
.btn-primary { background:#177e72; color:#fff; box-shadow:0 2px 5px #177e7245,0 6px 14px #177e7224; }
.btn-primary:hover { background:#126f65; box-shadow:0 3px 7px #177e7250,0 8px 17px #177e722b; }
.btn-secondary { border:1px solid #cbd5e1; background:#e2e8f0; color:#1e293b; }
.btn-secondary:hover { background:#cbd5e1; border-color:#94a3b8; }
.btn-danger { background:#fff0f0; color:#d33d47; border:1px solid #ffd3d6; }
.btn-warning { background:#fff4df; color:#b96f00; border:1px solid #f5dba8; }
.btn-small { padding: 7px 10px; font-size: 12px; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.error { background: #fff0f0; color: #c93642; border: 1px solid #ffd3d6; padding: 10px 12px; border-radius: 9px; font-size: 13px; margin: 12px 0; }
.notice { background: #eff8ff; color: #25638e; border: 1px solid #cae8fb; padding: 11px 13px; border-radius: 9px; font-size: 13px; margin: 12px 0; white-space: pre-wrap; word-break: break-word; }
.layout { min-height: 100vh; display: grid; grid-template-columns: 232px 1fr; }
.sidebar { background: #111a2a; color: #d8e1f0; padding: 22px 14px; display: flex; flex-direction: column; }
.sidebar .brand { margin: 0 10px 30px; }
.nav { display: grid; gap: 5px; }
.nav button { text-align: left; color: #afbad0; background: transparent; border-radius: 8px; padding: 11px 12px; }
.nav .sidebar-nav-link { border-radius:8px; color:#afbad0; padding:11px 12px; text-align:left; text-decoration:none; }
.sidebar .nav button,
.sidebar .nav .sidebar-nav-link,
.sidebar .sidebar-footer button { display:flex; align-items:center; gap:11px; }
.sidebar-nav-icon { width:18px; height:18px; flex:0 0 18px; pointer-events:none; }
.nav .sidebar-nav-link:hover { background:#243452; color:#fff; }
.nav button.active, .nav button:hover { background: #243452; color: #fff; }
.sidebar-footer { margin-top: auto; display: grid; gap: 10px; padding: 12px 10px 0; }
.sidebar-footer button { color: #aeb9ce; background: transparent; text-align: left; padding: 7px 0; }
.layout > .sidebar:not(.user-sidebar) .sidebar-footer { gap: 4px; padding: 18px 14px; border-top: 1px solid #26354c; }
.layout > .sidebar:not(.user-sidebar) #user-label { overflow: hidden; padding: 4px 10px 8px; color: #8fa0b8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.layout > .sidebar:not(.user-sidebar) #logout { width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; color: #aebdd1; background: transparent; text-align: left; cursor: pointer; }
.layout > .sidebar:not(.user-sidebar) #logout:hover { color: #fff; background: #2a3d5f; }
.layout > .sidebar:not(.user-sidebar) .sidebar-version,
.user-sidebar .sidebar-version { padding: 2px 10px 0; color: #71809a; font-size: 12px; }
.main { padding: 28px clamp(18px, 4vw, 50px); overflow: auto; }
.topbar { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 23px; }
.topbar h1 { font-size: 25px; }
.gateway-endpoint { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: #56647d; font-size: 13px; }
.gateway-endpoint code { color: #1e5ee8; background: #eaf1ff; border: 1px solid #c9dcff; border-radius: 7px; padding: 6px 10px; font-size: 14px; font-weight: 750; letter-spacing: 0; }
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dashboard-stat { height: 92px; min-height: 92px; display: flex; align-items: center; gap: 14px; padding: 18px; background: #fff; border: 1px solid #e6ebf3; border-radius: 14px; box-shadow: 0 4px 14px #25365b08; overflow: hidden; }
.stat-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; font-size: 10px; font-weight: 800; letter-spacing: .4px; }
.stat-label { color: #65728a; font-size: 13px; }
.stat-value { margin-top: 3px; font-size: 29px; line-height: 1.05; font-weight: 780; }
.accent-blue .stat-icon { background: #e9f1ff; color: #2868df; }
.accent-green .stat-icon { background: #e8faef; color: #16834d; }
.accent-violet .stat-icon { background: #f0ecff; color: #7050d8; }
.accent-amber .stat-icon { background: #fff4df; color: #bd7a0b; }
.dashboard-health { padding-bottom: 16px; }
.dashboard-today-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:12px 0; }
.dashboard-grid .panel { margin-top:0; }
.dashboard-grid + .quick-actions { margin-top:20px; }
.dashboard-today-stat { height:92px; min-height:92px; display:grid; align-content:center; gap:8px; padding:16px 20px; border:1px solid #e6ebf3; border-radius:10px; background:#fff; box-shadow:0 4px 14px #25365b08; }
.dashboard-today-stat > span { color:#65728a; font-size:13px; }
.dashboard-today-stat > strong { font-size:24px; line-height:1.1; font-variant-numeric:tabular-nums; }
.channel-failover-control { min-height:42px; display:flex; align-items:center; gap:10px; padding:6px 12px; border:1px solid #cbd5e1; border-radius:9px; background:#e2e8f0; color:#1e293b; font-size:13px; font-weight:650; white-space:nowrap; box-shadow:0 2px 4px #0f172a18,0 5px 12px #0f172a0a; }
[data-theme="dark"] .channel-failover-control { border-color:#34445d; background:#1d2a40; color:#e6edf8; }
[data-theme="dark"] .dashboard-today-stat { background:#151f30; border-color:#2b3a52; box-shadow:0 8px 24px #00000035; }
[data-theme="dark"] .dashboard-today-stat > span { color:#9eacc3; }
.health-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #edf0f5; }
.health-summary > div { display: grid; gap: 7px; padding: 16px 18px 2px; border-right: 1px solid #edf0f5; }
.health-summary > div:first-child { padding-left: 0; }
.health-summary > div:last-child { border-right: 0; align-items: start; }
.health-summary span { color: #718097; font-size: 12px; }
.health-summary strong { font-size: 22px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 17px; }
.dashboard-panel { min-width: 0; height: 372px; overflow: hidden; }
.health-list, .request-list { display: grid; }
.health-row, .request-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; border-top: 1px solid #edf0f5; }
.health-row > div:first-child, .request-row > div:first-child { min-width: 0; display: grid; gap: 4px; }
.health-row strong, .request-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.health-row span:not(.badge), .request-row span { color: #748299; font-size: 12px; }
.health-metrics, .request-metrics { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.status-code { width: 34px; font-weight: 750; text-align: right; }
.status-good { color: #198450 !important; }
.status-bad { color: #c93642 !important; }
.quick-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.quick-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.stat, .panel, .channel-card { background:#fff; border:1px solid #e1e8f0; border-radius:14px; box-shadow:0 2px 5px #25365b0b,0 9px 22px #25365b0c; }
.stat, .panel, .channel-card, .user-stats article { transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease; }
.channel-card:hover, .user-stats article:hover { transform:translateY(-1px); box-shadow:0 3px 7px #25365b10,0 11px 26px #25365b12; }
.stat { padding: 18px; }
.stat .number { font-size: 26px; font-weight: 750; margin-top: 6px; }
.panel { padding: 20px; margin-top: 17px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.channel-card { padding: 17px; }
.channel-card-active { border-color: #28b779; background: linear-gradient(135deg, #f4fffa 0%, #ffffff 72%); box-shadow: 0 0 0 2px #28b77928, 0 10px 26px #168a5520; }
.channel-card-active .channel-title h3 { color: #11794d; }
.channel-title { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.channel-title h3 { word-break: break-word; }
.channel-state { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex: 0 0 auto; min-height: 27px; }
.badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 11px; background: #eef2f8; color: #66738b; }
.badge-on { background:#d1fae5; color:#047857; border:1px solid #a7f3d0; }
.badge-off { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; }
.badge-banned { background:#fee2e2; color:#b4232f; border:1px solid #f6aeb5; }
.badge-running { background: #e9f9ef; color: #18854a; }
.badge-paused { background: #fff0f0; color: #c93642; }
.safety-panel { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.switch { position: relative; display: inline-block; width: 48px; height: 27px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #cbd3df; transition: .2s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 21px; height: 21px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px #1d2c4928; transition: .2s; }
.switch input:checked + span { background:#177e72; }
.switch input:checked + span::before { transform: translateX(21px); }
.switch input:disabled + span { cursor: wait; opacity: .65; }
.error-row { color: #c93642; }
.channel-meta { display: grid; gap: 9px; margin: 18px 0; font-size: 13px; }
.meta-row { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed #edf0f5; padding-bottom: 7px; }
.meta-row span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 68%; }
.card-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.channel-modal-actions { justify-content: flex-start; align-items: center; }
.form-action-spacer { flex: 1; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #edf0f5; vertical-align: top; white-space: nowrap; }
th { color:#526176; font-weight:600; background:#eff7f7; }
.empty { padding: 34px 12px; text-align: center; color: #7a869c; font-size: 13px; }
.modal-backdrop { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 1000; background: #10203b75; display: grid; place-items: center; padding: 18px; }
.notice-overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: #10203b66; }
.notice-dialog { width: min(360px, 100%); padding: 24px; border: 1px solid #dce4f0; border-radius: 15px; background: #fff; color: #172033; box-shadow: 0 20px 70px #10203b40; text-align: center; }
.notice-dialog-title { font-size: 18px; font-weight: 750; }
.notice-dialog-message { margin: 9px 0 18px; color: #62708a; font-size: 14px; }
.modal { background: #fff; border-radius: 15px; width: min(700px, 100%); max-height: 92vh; overflow: auto; padding: 23px; box-shadow: 0 20px 70px #10203b40; }
.modal-backdrop.user-management-modal .modal { width: min(1800px, calc(100vw - 32px)); max-height: calc(100vh - 36px); overflow-x: hidden; }
.modal-backdrop.user-usage-modal .modal { width:min(1800px, calc(100vw - 32px)); max-height:calc(100vh - 36px); overflow-x:hidden; }
.user-detail-section-title { display:flex; align-items:center; gap:14px; min-width:0; }
.user-detail-section-title h3 { margin:0; }
.user-usage-modal .table-wrap { overflow-x:auto; }
.user-usage-modal .request-log-table { min-width:1200px; }
.user-usage-modal .log-pagination { margin-top:14px; }
.user-management-modal > .panel { min-width: 0; }
.user-management-modal .table-wrap { overflow-x: hidden; }
.user-management-modal table { width: 100%; table-layout: fixed; font-size: 12px; }
.user-management-modal th, .user-management-modal td { min-width: 0; overflow-wrap: anywhere; }
.user-management-modal th:nth-child(1), .user-management-modal td:nth-child(1) { width: 17%; }
.user-management-modal th:nth-child(2), .user-management-modal td:nth-child(2) { width: 20%; }
.user-management-modal th:nth-child(3), .user-management-modal td:nth-child(3) { width: 11%; }
.user-management-modal th:nth-child(4), .user-management-modal td:nth-child(4) { width: 14%; }
.user-management-modal th:nth-child(5), .user-management-modal td:nth-child(5) { width: 11%; }
.user-management-modal th:nth-child(6), .user-management-modal td:nth-child(6) { width: 9%; }
.user-management-modal th:nth-child(7), .user-management-modal td:nth-child(7) { width: 10%; }
.user-management-modal th:nth-child(8), .user-management-modal td:nth-child(8) { width: 8%; }
.user-management-modal .user-detail-key-table { min-width:0; table-layout:fixed; }
.user-management-modal .user-detail-key-table th,
.user-management-modal .user-detail-key-table td { width:auto; padding:8px 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.user-management-modal .user-detail-key-table th:nth-child(1), .user-management-modal .user-detail-key-table td:nth-child(1) { width:6%; }
.user-management-modal .user-detail-key-table th:nth-child(2), .user-management-modal .user-detail-key-table td:nth-child(2) { width:16%; }
.user-management-modal .user-detail-key-table th:nth-child(3), .user-management-modal .user-detail-key-table td:nth-child(3) { width:7%; }
.user-management-modal .user-detail-key-table th:nth-child(4), .user-management-modal .user-detail-key-table td:nth-child(4),
.user-management-modal .user-detail-key-table th:nth-child(5), .user-management-modal .user-detail-key-table td:nth-child(5) { width:6%; }
.user-management-modal .user-detail-key-table th:nth-child(6), .user-management-modal .user-detail-key-table td:nth-child(6),
.user-management-modal .user-detail-key-table th:nth-child(7), .user-management-modal .user-detail-key-table td:nth-child(7) { width:8%; }
.user-management-modal .user-detail-key-table th:nth-child(8), .user-management-modal .user-detail-key-table td:nth-child(8),
.user-management-modal .user-detail-key-table th:nth-child(9), .user-management-modal .user-detail-key-table td:nth-child(9),
.user-management-modal .user-detail-key-table th:nth-child(10), .user-management-modal .user-detail-key-table td:nth-child(10),
.user-management-modal .user-detail-key-table th:nth-child(11), .user-management-modal .user-detail-key-table td:nth-child(11) { width:5%; }
.user-management-modal .user-detail-key-table th:nth-child(12), .user-management-modal .user-detail-key-table td:nth-child(12) { width:8%; }
.user-management-modal .user-detail-key-table th:nth-child(13), .user-management-modal .user-detail-key-table td:nth-child(13) { width:8%; }
.user-management-modal .user-detail-key-table th:nth-child(14), .user-management-modal .user-detail-key-table td:nth-child(14) { width:15%; }
.user-management-modal .user-detail-key-table .key-secret-content { min-width:0; gap:4px; }
.user-management-modal .user-detail-key-table .key-secret-content > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.user-management-modal .user-detail-key-table .btn { padding:5px 6px; font-size:11px; }
.modal-backdrop { align-items: center; justify-items: center; }
.modal form { margin: 0; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 7px; }
.modal-close { background: transparent; color: #758199; font-size: 24px; line-height: 1; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; align-items:stretch; }
.settings-grid .panel { margin-top:0; }
.settings-cleanup, .settings-request { height:332px; }
.settings-fields,.settings-password-fields { display:grid; grid-template-columns:1fr; gap:0; }
.settings-cleanup .settings-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.settings-card .field { margin:10px 0; }
.settings-card .form-actions { margin-top:16px; }
.cleanup-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; }
.settings-cleanup .cleanup-footer .form-actions { margin-top:0; flex:0 0 auto; }
.settings-security { grid-column:1; }
.settings-branding { grid-column:2; }
.settings-communication { grid-column:1 / -1; }
.settings-branding-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 14px; }
.branding-logo-field { grid-column:1 / -1; }
.branding-contact-field { grid-column:1 / -1; }
.branding-contact-field > label { display:none; }
.branding-logo-control { display:flex; align-items:center; gap:12px; }
.branding-logo-control input { min-width:0; }
.branding-logo-preview { width:44px; height:44px; flex:0 0 auto; object-fit:cover; border:1px solid #2b3a52; border-radius:8px; background:#0e1727; }
.settings-inline-control { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
.settings-inline-control .btn { min-width:76px; }
.announcement-settings-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; }
.announcement-settings-layout > * { min-width:0; }
.announcement-new-column { min-width:0; }
.announcement-column-head { min-height:54px; margin-bottom:12px; }
.announcement-column-head h2 { margin:0 0 4px; }
.settings-communication textarea { min-height:160px; line-height:1.65; }
.announcement-meta { display:flex; justify-content:space-between; gap:14px; align-items:center; }
.announcement-admin-history { min-width:0; border:1px solid #dbe2ee; border-radius:9px; overflow:hidden; }
.announcement-admin-history-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; border-bottom:1px solid #e5eaf2; }
.announcement-admin-history-head h3 { margin:0; font-size:15px; }
.announcement-admin-history-list { max-height:340px; overflow:auto; }
.announcement-admin-item { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 15px; border-bottom:1px solid #e5eaf2; }
.announcement-admin-item:last-child { border-bottom:0; }
.announcement-admin-item > div:first-child { display:grid; min-width:0; gap:5px; }
.announcement-admin-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.announcement-admin-item small { color:#71809a; font-size:12px; }
.announcement-admin-item.is-hidden { opacity:.58; }
.announcement-admin-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.announcement-admin-actions .btn { min-width:0; padding:7px 10px; }
.announcement-admin-actions .btn:disabled { cursor:not-allowed; opacity:.42; }
.admin-announcement-detail { min-height:180px; padding:22px 0; }
.admin-announcement-detail h3 { margin:0 0 14px; font-size:20px; }
.admin-announcement-detail p { margin:0; color:#42545b; line-height:1.8; overflow-wrap:anywhere; white-space:pre-wrap; }
[data-theme="dark"] .admin-announcement-detail p { color:#c7d3e5; }
.communication-preview-bar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; min-height:62px; margin:20px 0; padding:14px 18px; border:1px solid #dbe2ee; border-radius:10px; background:#f8fbfc; }
.communication-preview-announcement { display:flex; min-width:0; align-items:center; gap:6px; }
.communication-preview-announcement strong { flex:0 0 auto; white-space:nowrap; }
.communication-preview-announcement span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.communication-preview-support { white-space:nowrap; }
.communication-preview-empty { padding:36px 12px; }
.checkbox-field { display: flex; gap: 8px; align-items: center; margin: 15px 0; font-size: 13px; }
.checkbox-field input { width: auto; }
.key-box { padding: 13px; background: #f7f9fd; border-radius: 9px; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.key-row-active { background: linear-gradient(135deg, #f4fffa 0%, #ffffff 72%); box-shadow: inset 4px 0 #28b779, 0 0 14px #168a5515; }
.key-row-active td:first-child { color: #11794d; font-weight: 700; }
.key-row-user { background:#f3f7ff; box-shadow:inset 4px 0 #4c82e8; }
.key-row-user td:first-child { color:#315fae; font-weight:700; }
.key-row-user-active { background:linear-gradient(135deg,#edf5ff 0%,#ffffff 74%); box-shadow:inset 4px 0 #4c82e8,0 0 14px #326ac218; }
.key-row-banned { background:linear-gradient(135deg,#fff1f2 0%,#ffffff 74%); box-shadow:inset 4px 0 #dc4655,0 0 14px #dc465514; }
.key-row-banned td:first-child { color:#b4232f; font-weight:700; }
.quota-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
.quota-card { border:1px solid #e6ebf3; border-radius:12px; padding:16px; background:#fbfcff; }
.quota-card-active { border-color:#28b779; box-shadow:0 0 14px #168a5515; }
.quota-card-head,.quota-meta,.quota-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.quota-card-head { margin-bottom:12px; }
.quota-meta { padding:7px 0; border-top:1px dashed #e6ebf3; font-size:12px; }
.quota-meta > div { flex:1; max-width:200px; }
.quota-progress { height:6px; background:#e8edf5; border-radius:99px; overflow:hidden; }
.quota-progress span { display:block; height:100%; background:#3b7cff; border-radius:99px; }
.quota-line { display:flex; justify-content:space-between; color:#748299; margin-top:3px; font-size:11px; }
.quota-actions { justify-content:flex-start; margin-top:12px; }
[data-theme="dark"] .quota-card { background:#111b2b; border-color:#2b3a52; }
[data-theme="dark"] .quota-card-active { border-color:#35d493; box-shadow:0 0 18px #0abd7220; }
[data-theme="dark"] .quota-meta { border-color:#2b3a52; }
[data-theme="dark"] .quota-progress { background:#26354c; }
.key-actions { display: flex; align-items: center; gap: 12px; }
.key-table { width: 100%; min-width: 1200px; max-width: none; table-layout: fixed; }
.key-table th, .key-table td { padding: 8px 7px; vertical-align: middle; text-align:center !important; font-size: 12px; }
.key-table th { text-align:center !important; }
.key-table td { text-align:center !important; }
.key-table th + th, .key-table td + td { border-left: 1px solid #dbe3ee; }
[data-theme="dark"] .key-table th + th, [data-theme="dark"] .key-table td + td { border-left-color: #2b3a52; }
.key-table td { white-space: nowrap; }
.key-table td:nth-child(2), .key-table td:nth-child(10) { overflow: hidden; text-overflow: ellipsis; }
.key-status-cell { display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.key-status-cell .switch { width:48px; height:27px; }
.key-status-text { color:#9fb0c8; font-size:12px; }
.key-status-text.is-enabled { color:#6ce0bb; }
.key-secret-content { display:flex; align-items:center; justify-content:center; gap:8px; }
.channel-summary { min-width:72px; padding:0; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; cursor:default; }
.channel-popover { position:fixed; z-index:100; width:230px; padding:14px 15px; border:1px solid #d8e2ef; border-radius:8px; background:#fff; color:#172033; box-shadow:0 12px 32px #0f172a2e; pointer-events:none; font-size:13px; }
.channel-popover > strong { display:block; margin-bottom:8px; font-size:14px; }
.channel-popover > div { padding:3px 0; }
.key-table .key-actions { justify-content:center; gap:7px; flex-wrap:nowrap; }
.key-table .channel-summary { display:inline-flex; justify-content:center; }
.admin-key-group-cell { min-width:110px; overflow:visible !important; white-space:nowrap !important; text-align:center !important; }
.admin-key-group-button { max-width:100%; padding:0; border:0; background:transparent; color:#57d6b0; font:inherit; font-weight:650; cursor:pointer; text-decoration:underline; text-underline-offset:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-key-group-button.is-empty { color:var(--muted); font-weight:400; }
.key-group-select-list { grid-template-columns:1fr; max-height:320px; }
.key-group-select-list .channel-check strong { margin-left:auto; color:#57d6b0; }
.quota-modal-actions { align-items: center; flex-wrap: wrap; }
.quota-modal-actions > span { flex: 1; }
.quota-limit-note { margin-top: 2px; }
.quota-danger-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.channel-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; padding: 10px 12px; border: 1px solid #dce4f0; border-radius: 9px; max-height: 180px; overflow-y: auto; }
.channel-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.channel-check input { width: auto; margin: 0; }
.channel-check-all { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid #dce4f0; font-weight: 700; }
[data-theme="dark"] .channel-check-list { border-color: #2b3a52; }
[data-theme="dark"] .channel-check-all { border-color: #2b3a52; }
.channel-check-list.key-group-select-list { grid-template-columns: 1fr; gap: 0; max-height: 360px; padding: 6px; overflow-y: auto; }
.key-group-select-list .channel-check { min-height: 42px; box-sizing: border-box; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; }
.key-group-select-list .channel-check + .channel-check { margin-top: 3px; }
.key-group-select-list .channel-check input { accent-color: #1aa88d; }
.key-group-select-list .channel-check:has(input:checked) { border-color: #25c9a6; background: #dff8f1; color: #08705e; box-shadow: inset 3px 0 #1aa88d; font-weight: 700; }
.key-group-select-list .channel-check:has(input:checked) strong { color: #08705e; }
[data-theme="dark"] .key-group-select-list .channel-check:has(input:checked) { border-color: #35d493; background: #164b4a; color: #d9fff4; box-shadow: inset 3px 0 #35d493, 0 0 0 1px #35d49330; }
[data-theme="dark"] .key-group-select-list .channel-check:has(input:checked) strong { color: #68e5c3; }
.modal.key-group-modal { width: min(460px, calc(100vw - 36px)); min-height: 560px; max-height: 86vh; box-sizing: border-box; }
.key-group-modal .key-group-select-list { max-height: 520px; }
.key-usage-cell { line-height: 1.55; color: #6d7990; font-size: 12px; min-width: 225px; }
.key-usage-cell div + div { margin-top: 2px; }
[data-theme="dark"] .key-usage-cell { color: #9aabc5; }
.confirm-message { margin: 12px 0 4px; color: #53617a; font-size: 14px; }
.setup-guide { max-width: 980px; }
.setup-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: 24px; }
.setup-guide-grid .setup-guide { max-width: none; margin-top: 0; min-width: 0; }
.setup-guide-grid .setup-guide .panel-head { align-items: flex-start; }
.setup-guide-grid .setup-guide .code-block,
.user-setup-guide-grid .setup-guide .code-block { height: 340px; min-height: 340px; max-height: 340px; overflow: auto; box-sizing: border-box; }
.setup-guide-grid .setup-guide .panel-head,
.user-setup-guide-grid .setup-guide .panel-head { min-height: 58px; }
.setup-guide-grid .setup-guide:nth-child(2) .setup-steps,
.user-setup-guide-grid .setup-guide:nth-child(2) .setup-steps { margin-top: -22px; }
.setup-steps { display: grid; gap: 6px; margin: 0 0 16px; padding-left: 22px; color: #53617a; font-size: 13px; }
.code-block { margin: 0; padding: 16px; overflow-x: auto; border: 1px solid #20324c; border-radius: 9px; background: #0c1422; color: #d6e6ff; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
.guide-controls { display: flex; gap: 9px; align-items: center; margin: 15px 0 10px; }
.guide-controls select { max-width: 370px; }
.copy-two-line { min-width: 145px; min-height: 48px; line-height: 1.15; text-align: center; white-space: normal; }
.copy-two-line .copy-label { display: block; }
.copy-button-copied { background: #16a66a !important; border-color: #3ddc97 !important; color: #fff !important; box-shadow: 0 0 0 2px #35d49355, 0 0 18px #35d49355; }
.copy-two-line { min-width: 145px; min-height: 48px; line-height: 1.15; text-align: center; white-space: normal; }
.copy-two-line .copy-label, .copy-two-line span:first-child { display: block; }
.copy-button-copied { background: #16a66a !important; border-color: #3ddc97 !important; color: #fff !important; box-shadow: 0 0 0 2px #35d49355, 0 0 18px #35d49355; }
.user-setup-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.user-setup-guide-grid .setup-guide { max-width: none; margin: 0; min-width: 0; }
@media (max-width: 900px) { .user-setup-guide-grid { grid-template-columns: 1fr; } }
@media (max-width: 1080px) { .setup-guide-grid { grid-template-columns: 1fr; } }
[data-theme="dark"] body, [data-theme="dark"] .main { background: #0c1422; color: #e6edf8; }
[data-theme="dark"] .auth-wrap { background: radial-gradient(circle at 20% 10%, #1b3152, transparent 35%), #0c1422; }
[data-theme="dark"] .auth-card, [data-theme="dark"] .stat, [data-theme="dark"] .panel, [data-theme="dark"] .channel-card, [data-theme="dark"] .modal { background:#151f30; border-color:#2b3a52; box-shadow:0 2px 5px #00000030,0 10px 24px #00000028; }
[data-theme="dark"] .dashboard-stat { background: #151f30; border-color: #2b3a52; box-shadow: 0 8px 24px #00000035; }
[data-theme="dark"] .accent-blue .stat-icon { background: #18345e; color: #8db8ff; }
[data-theme="dark"] .accent-green .stat-icon { background: #153d32; color: #70dfae; }
[data-theme="dark"] .accent-violet .stat-icon { background: #30275c; color: #b7a5ff; }
[data-theme="dark"] .accent-amber .stat-icon { background: #4a371b; color: #f2c16c; }
[data-theme="dark"] .stat-label, [data-theme="dark"] .health-summary span, [data-theme="dark"] .health-row span:not(.badge), [data-theme="dark"] .request-row span { color: #9eacc3; }
[data-theme="dark"] .health-summary, [data-theme="dark"] .health-summary > div, [data-theme="dark"] .health-row, [data-theme="dark"] .request-row { border-color: #2a3850; }
[data-theme="dark"] .channel-card-active { background: linear-gradient(135deg, #15372f 0%, #152538 72%); border-color: #35d493; box-shadow: 0 0 0 2px #35d49338, 0 10px 30px #0abd7230; }
[data-theme="dark"] .channel-card-active .channel-title h3 { color: #85efbf; }
[data-theme="dark"] .channel-card-deepseek { border-color: #a86bff; background: linear-gradient(135deg, #302054 0%, #17253c 72%); box-shadow: 0 0 0 2px #a86bff35, 0 10px 30px #7139bc2e; }
[data-theme="dark"] .channel-card-deepseek .channel-title h3 { color: #d7bcff; }
[data-theme="dark"] .channel-card-deepseek.channel-card-active { border-color: #c78cff; background: linear-gradient(135deg, #3b245d 0%, #1b2d48 72%); box-shadow: 0 0 0 2px #c78cff48, 0 12px 34px #7d3fd33d; }
[data-theme="dark"] .channel-card-deepseek .meta-row { border-color: #a86bff2b; }

.channel-card-deepseek { border-color: #9460d8; background: linear-gradient(135deg, #faf6ff 0%, #ffffff 74%); box-shadow: 0 0 0 2px #9460d81e, 0 10px 26px #7448b41f; }
.channel-card-deepseek .channel-title h3 { color: #6e3aab; }
.channel-card-deepseek.channel-card-active { border-color: #8053c9; background: linear-gradient(135deg, #f4edff 0%, #ffffff 72%); box-shadow: 0 0 0 2px #8053c936, 0 12px 30px #6c41aa28; }
.adapter-badge { margin-top: 5px; display: inline-flex; align-items: center; color: #718096; font-size: 12px; font-weight: 700; }
.channel-card-deepseek .adapter-badge { color: #8a50d1; }
[data-theme="dark"] .adapter-badge { color: #9eacc3; }
[data-theme="dark"] .channel-card-deepseek .adapter-badge { color: #d7bcff; }
.protocol-hint { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.55; }
[data-theme="dark"] .muted, [data-theme="dark"] .gateway-endpoint { color: #9eacc3; }
[data-theme="dark"] .field label { color: #c1cde0; }
[data-theme="dark"] .setting-hint { background: #0f1929; border-color: #34445d; color: #9eacc3; }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: #0f1929; color: #e6edf8; border-color: #34445d; }
[data-theme="dark"] .btn { box-shadow:0 2px 5px #00000045,0 6px 14px #0000002b; }
[data-theme="dark"] .btn:hover { box-shadow:0 3px 7px #00000050,0 8px 17px #00000032; }
[data-theme="dark"] .btn:active { box-shadow:inset 0 1px 3px #00000070,0 1px 2px #00000035; }
[data-theme="dark"] .btn:disabled { box-shadow:none; }
[data-theme="dark"] .btn-primary { box-shadow:0 2px 5px #0b48c34d,0 7px 16px #00000030; }
[data-theme="dark"] .btn-secondary { background:#26354c; color:#dbe6f7; border-color:#40516b; }
[data-theme="dark"] .btn-secondary:hover { background:#31425d; border-color:#587090; }
[data-theme="dark"] .gateway-endpoint code { color: #8db8ff; background: #182d4d; border-color: #31588e; }
[data-theme="dark"] .badge { background: #26354c; color: #b7c5da; }
[data-theme="dark"] .badge-on, [data-theme="dark"] .badge-running { background:#153d32; color:#70dfae; border-color:transparent; }
[data-theme="dark"] .badge-off, [data-theme="dark"] .badge-paused { background:#49262f; color:#ff9ca5; border-color:transparent; }
[data-theme="dark"] .badge-banned { background:#512630; color:#ff9ca5; border-color:#7b3745; }
[data-theme="dark"] .meta-row, [data-theme="dark"] th, [data-theme="dark"] td { border-color: #2a3850; }
[data-theme="dark"] th { color:#a8b6cb; background:#0c1422; }
[data-theme="dark"] .empty { color: #9aa9bf; }
[data-theme="dark"] .key-box { background: #0f1929; }
[data-theme="dark"] .key-row-active { background: linear-gradient(135deg, #15372f 0%, #152538 72%); box-shadow: inset 4px 0 #35d493, 0 0 18px #0abd7220; }
[data-theme="dark"] .key-row-active td:first-child { color: #85efbf; }
[data-theme="dark"] .key-row-user { background:#14233b; box-shadow:inset 4px 0 #5f9cff; }
[data-theme="dark"] .key-row-user td:first-child { color:#91bcff; }
[data-theme="dark"] .key-row-user-active { background:linear-gradient(135deg,#162b49 0%,#152538 74%); box-shadow:inset 4px 0 #5f9cff,0 0 18px #2c70db28; }
[data-theme="dark"] .key-row-banned { background:linear-gradient(135deg,#35202a 0%,#151f30 74%); box-shadow:inset 4px 0 #ef6674,0 0 18px #ef667421; }
[data-theme="dark"] .key-row-banned td:first-child { color:#ff9ca5; }
[data-theme="dark"] .btn-warning { background:#4a371b; color:#f2c16c; }
[data-theme="dark"] .channel-card:hover, [data-theme="dark"] .user-stats article:hover { box-shadow:0 3px 7px #00000038,0 12px 28px #0000002c; }
[data-theme="dark"] .confirm-message { color: #aab8cd; }
[data-theme="dark"] .setup-steps { color: #aab8cd; }
[data-theme="dark"] .notice { background: #17334a; color: #9fd4ff; border-color: #2b5e83; }
[data-theme="dark"] .error { background: #48252e; color: #ffabb2; border-color: #783b46; }
[data-theme="dark"] .modal-backdrop { background: #020713b8; }
[data-theme="dark"] .notice-overlay { background: #020713b8; }
[data-theme="dark"] .notice-dialog { background: #151f30; border-color: #2b3a52; color: #e6edf8; box-shadow: 0 20px 70px #00000060; }
[data-theme="dark"] .notice-dialog-message { color: #aab8cd; }
[data-theme="dark"] .modal-close { color: #aebbd0; }
@media (max-width: 1280px) { .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-stats, .dashboard-today-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .three-col { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .layout { grid-template-columns: 1fr; } .sidebar { padding: 12px; } .sidebar .brand { margin-bottom: 12px; } .nav { display: flex; overflow-x: auto; } .nav button { white-space: nowrap; } .sidebar-footer { display: flex; justify-content: space-between; } .main { padding: 20px 14px; } .grid-3, .grid-4, .dashboard-stats, .dashboard-today-stats, .dashboard-grid, .two-col, .channel-grid, .health-summary { grid-template-columns: 1fr; } .topbar { flex-direction: column; } .health-summary > div, .health-summary > div:first-child { padding: 13px 0; border-right: 0; border-bottom: 1px solid #edf0f5; } .quick-actions { align-items: flex-start; flex-direction: column; } .quick-action-buttons { justify-content: flex-start; } }
@media (max-width: 760px) { .layout > .sidebar:not(.user-sidebar) .sidebar-footer { display:grid; justify-content:stretch; } }
.request-status { display:inline-flex; align-items:center; min-width:72px; padding:3px 8px; border-radius:4px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.request-status-success { color:#047857; background:#d1fae5; border:1px solid #a7f3d0; }
.request-status-warning { color:#a16207; background:#fef3c7; border:1px solid #fde68a; }
.request-status-error { color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; }
.token-meter,.cost-meter { display:inline-flex; align-items:center; gap:6px; }
.token-info,.cost-info { width:18px; height:18px; display:inline-grid; place-items:center; flex:0 0 18px; padding:0; border:2px solid #5b9dff; border-radius:50%; background:#eef6ff; color:#2774de; font:700 11px/1 ui-sans-serif,system-ui,sans-serif; box-shadow:none; }
.token-info:hover,.token-info:focus-visible,.cost-info:hover,.cost-info:focus-visible { background:#dbeeff; border-color:#2774de; outline:none; transform:none; box-shadow:0 0 0 3px #5b9dff25; }
.token-popover,.cost-popover { position:fixed; z-index:1100; width:230px; padding:14px 15px; border:1px solid #d8e2ef; border-radius:8px; background:#fff; color:#172033; box-shadow:0 12px 32px #0f172a2e; pointer-events:none; font-size:13px; }
.cost-popover { width:292px; }
.token-popover > strong,.cost-popover > strong { display:block; margin-bottom:8px; font-size:14px; }
.token-popover > div,.cost-popover > div { display:flex; justify-content:space-between; gap:18px; padding:3px 0; }
.token-popover > div span,.cost-popover > div span { color:#738097; }
.token-popover > div b,.cost-popover > div b { font-variant-numeric:tabular-nums; white-space:nowrap; }
.token-popover-total { margin-top:8px; padding-top:10px !important; border-top:1px solid #e3e9f2; }
.token-popover-total b { color:#177e72; }
.cost-popover-prices { margin-top:8px; padding-top:10px !important; border-top:1px solid #e3e9f2; }
.cost-popover-total { margin-top:8px; padding-top:10px !important; border-top:1px solid #e3e9f2; }
.cost-popover-total b { color:#177e72; }
.price-input-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; }
.price-input-row > span { color:var(--muted); white-space:nowrap; }
.channel-pricing-modal { width:min(820px,100%); min-height:min(620px,calc(100vh - 36px)); display:flex; flex-direction:column; }
.channel-pricing-form { display:flex; flex:1; flex-direction:column; min-height:0; }
.model-price-tabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:8px; margin:18px 0 22px; }
.model-price-tab { min-height:40px; padding:8px 11px; border:1px solid var(--border); border-radius:6px; background:#f5f8fb; color:var(--text); font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.model-price-tab:hover { border-color:#54a99f; background:#edf8f6; }
.model-price-tab.active { border-color:#177e72; background:#177e72; color:#fff; box-shadow:0 3px 10px #177e7230; }
.model-price-editor { flex:1; padding-top:20px; border-top:1px solid var(--border); }
.model-price-editor h3 { margin-bottom:18px; color:var(--text); font-size:16px; }
.model-price-fields { display:grid; gap:14px; }
.model-price-row { display:grid; grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr); gap:14px; align-items:end; }
.model-price-row .field { margin:0; }
.model-price-row .field label { display:block; margin-bottom:7px; }
.model-price-current input { background:#f5f8fb; color:#177e72; font-weight:650; }
.channel-pricing-form > .form-actions { margin-top:auto; padding-top:24px; }
[data-theme="dark"] .model-price-tab { background:#111b2b; }
[data-theme="dark"] .model-price-tab:hover { border-color:#4da99e; background:#172b34; }
[data-theme="dark"] .model-price-tab.active { background:#177e72; border-color:#2bc7ad; color:#fff; }
[data-theme="dark"] .model-price-current input { background:#0f1929; color:#55d6c0; }
[data-theme="dark"] .token-info,[data-theme="dark"] .cost-info { background:#17263b; border-color:#5b9dff; color:#8fc0ff; }
[data-theme="dark"] .token-info:hover,[data-theme="dark"] .token-info:focus-visible,[data-theme="dark"] .cost-info:hover,[data-theme="dark"] .cost-info:focus-visible { background:#203653; border-color:#8fc0ff; }
[data-theme="dark"] .token-popover,[data-theme="dark"] .cost-popover { border-color:#34445d; background:#111a2a; color:#e6edf8; box-shadow:0 14px 38px #00000070; }
[data-theme="dark"] .channel-popover { border-color:#34445d; background:#111a2a; color:#e6edf8; box-shadow:0 14px 38px #00000070; }
[data-theme="dark"] .token-popover > div span,[data-theme="dark"] .cost-popover > div span { color:#9eacc3; }
[data-theme="dark"] .token-popover-total { border-color:#34445d; }
[data-theme="dark"] .token-popover-total b { color:#55d6c0; }
[data-theme="dark"] .cost-popover-prices,[data-theme="dark"] .cost-popover-total { border-color:#34445d; }
[data-theme="dark"] .cost-popover-total b { color:#55d6c0; }
[data-theme="dark"] .request-status-success { color:#66dfad; background:rgba(39,189,119,.14); border-color:transparent; }
[data-theme="dark"] .request-status-warning { color:#ffc776; background:rgba(238,169,48,.14); border-color:transparent; }
[data-theme="dark"] .request-status-error { color:#ff929e; background:rgba(232,79,94,.14); border-color:transparent; }
.log-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 6px 2px; color:#6d7990; font-size:13px; }
.log-pagination-summary { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.log-pagination-summary label { display:flex; align-items:center; gap:7px; }
.log-pagination-summary select { width:72px; padding:7px 9px; }
.log-pagination-pages { display:flex; align-items:center; }
.log-pagination-pages button { width:36px; height:36px; border:1px solid #dce4f0; border-right:0; border-radius:0; background:#fff; color:#53617a; }
.log-pagination-pages button:first-child { border-radius:6px 0 0 6px; }
.log-pagination-pages button:last-child { border-right:1px solid #dce4f0; border-radius:0 6px 6px 0; }
.log-pagination-pages button.active { background:#177e72; border-color:#177e72; color:#fff; }
.log-pagination-pages button:disabled { opacity:.4; cursor:not-allowed; }
.log-page-gap { display:inline-grid; width:28px; height:36px; place-items:center; border-top:1px solid #dce4f0; border-bottom:1px solid #dce4f0; color:#6d7990; }
.request-log-table { width:100%; min-width:1200px; max-width:none; table-layout:fixed; }
.request-log-table col:nth-child(1) { width:13%; }.request-log-table col:nth-child(2) { width:8%; }.request-log-table col:nth-child(3) { width:9%; }.request-log-table col:nth-child(4) { width:11%; }.request-log-table col:nth-child(5) { width:11%; }.request-log-table col:nth-child(6) { width:8%; }.request-log-table col:nth-child(7) { width:8%; }.request-log-table col:nth-child(8) { width:8%; }.request-log-table col:nth-child(9) { width:7%; }.request-log-table col:nth-child(10) { width:6%; }.request-log-table col:nth-child(11) { width:11%; }
.request-log-table th, .request-log-table td { overflow:hidden; padding:8px 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.request-log-table th + th, .request-log-table td + td { border-left:1px solid #dbe3ee; }
[data-theme="dark"] .request-log-table th + th, [data-theme="dark"] .request-log-table td + td { border-left-color:#2b3a52; }
.request-log-table tbody td { transition:background-color .16s ease; }
.request-log-table tbody tr:hover td, .request-log-table tbody tr:focus-within td { background:#e3f5f1; }
.request-log-table tbody tr:hover td:first-child, .request-log-table tbody tr:focus-within td:first-child { box-shadow:inset 3px 0 #1aa58e; }
[data-theme="dark"] .request-log-table tbody tr:hover td, [data-theme="dark"] .request-log-table tbody tr:focus-within td { background:rgba(35,190,163,.14); }
[data-theme="dark"] .request-log-table tbody tr:hover td:first-child, [data-theme="dark"] .request-log-table tbody tr:focus-within td:first-child { box-shadow:inset 3px 0 #42d2b8; }
.request-log-table .request-channel, .request-log-table .request-location, .request-log-table .request-client { cursor:help; }
.request-log-table th:nth-child(7), .request-log-table td:nth-child(7), .request-log-table th:nth-child(8), .request-log-table td:nth-child(8) { overflow:visible; text-overflow:clip; }
.user-usage-record-table col:nth-child(1) { width:14%; }
.user-usage-record-table col:nth-child(2) { width:8%; }
.user-usage-record-table col:nth-child(3) { width:10%; }
.user-usage-record-table col:nth-child(4) { width:12%; }
.user-usage-record-table col:nth-child(5) { width:9%; }
.user-usage-record-table col:nth-child(6) { width:9%; }
.user-usage-record-table col:nth-child(7) { width:9%; }
.user-usage-record-table col:nth-child(8) { width:8%; }
.user-usage-record-table col:nth-child(9) { width:7%; }
.user-usage-record-table col:nth-child(10) { width:14%; }
.user-usage-record-table th:nth-child(6), .user-usage-record-table td:nth-child(6), .user-usage-record-table th:nth-child(7), .user-usage-record-table td:nth-child(7) { overflow:visible; text-overflow:clip; }
.user-usage-record-table th:nth-child(8), .user-usage-record-table td:nth-child(8) { overflow:hidden; text-overflow:ellipsis; }
.log-filters { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:14px; padding:4px 0 16px; }
.log-filter-fields { display:grid; grid-template-columns:13fr 8fr 9fr 9fr 11fr 9fr 7fr 9fr 7fr 18fr; gap:10px 0; }
.log-filter-fields > label { display:grid; gap:5px; padding-right:12px; color:var(--muted); font-size:12px; min-width:0; }
.log-filter-fields input, .log-filter-fields select, .time-range-trigger { width:100%; height:34px; padding:6px 9px; }
.log-filter-time { grid-column:1; }.log-filter-status { grid-column:2; }.log-filter-key { grid-column:3; }.log-filter-channel { grid-column:4; }.log-filter-model { grid-column:5; }.log-filter-reasoning { grid-column:6; }.log-filter-ip { grid-column:7 / span 2; }.log-filter-user { grid-column:9 / span 2; }
.log-filter-actions { display:flex; gap:8px; flex:0 0 auto; }
.time-range-picker { position:relative; }.time-range-trigger { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--border); border-radius:6px; background:var(--input); color:var(--text); text-align:left; }.time-range-menu { position:absolute; z-index:20; top:calc(100% + 8px); left:0; width:400px; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); box-shadow:0 14px 35px #00000035; }.time-range-presets { display:grid; grid-template-columns:1fr 1fr; gap:4px; }.time-range-presets button { padding:9px 10px; border-radius:5px; background:transparent; color:var(--text); }.time-range-presets button:hover, .time-range-presets button.active { background:#1a9e8b22; color:#16a892; }.time-range-dates { display:grid; grid-template-columns:1fr auto 1fr auto; align-items:end; gap:8px; margin:10px -10px -10px; padding:12px 10px; border-top:1px solid var(--border); }.time-range-dates label { display:grid; gap:5px; font-size:12px; color:var(--muted); }.time-range-dates input { min-width:0; }.time-range-dates > span { padding-bottom:8px; color:var(--muted); }
.user-log-filters { grid-template-columns:76fr 24fr; gap:0; }
.user-log-filter-fields { grid-template-columns:20fr 12fr 14fr 14fr; max-width:none; }
.user-usage-record-filter-fields { grid-template-columns:16fr 10fr 12fr 15fr 12fr 35fr; }
.user-usage-record-filter-fields .log-filter-model { grid-column:4; }
.user-usage-record-filter-fields .log-filter-reasoning { grid-column:5; }
.user-usage-record-filter-fields .log-filter-ip { grid-column:6; }
.user-request-log-table { table-layout:fixed; width:100%; }
.user-request-log-table th:nth-child(1),.user-request-log-table td:nth-child(1){width:17%;}.user-request-log-table th:nth-child(2),.user-request-log-table td:nth-child(2){width:11%;}.user-request-log-table th:nth-child(3),.user-request-log-table td:nth-child(3){width:12%;}.user-request-log-table th:nth-child(4),.user-request-log-table td:nth-child(4){width:13%;}.user-request-log-table th:nth-child(5),.user-request-log-table td:nth-child(5){width:11%;}.user-request-log-table th:nth-child(6),.user-request-log-table td:nth-child(6){width:8%;}.user-request-log-table th:nth-child(7),.user-request-log-table td:nth-child(7){width:10%;}.user-request-log-table th:nth-child(8),.user-request-log-table td:nth-child(8){width:8%;}.user-request-log-table th:nth-child(9),.user-request-log-table td:nth-child(9){width:10%;}
.user-request-log-table .request-client { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:help; }
.audit-filter-fields { grid-template-columns:14fr 18fr 34fr 34fr; }
.hidden { display:none !important; }
[data-theme="dark"] .log-pagination { color:#9eacc3; }
[data-theme="dark"] .log-pagination-pages button { background:#1d2a3d; border-color:#34445d; color:#c8d4e6; }
[data-theme="dark"] .log-pagination-pages button:last-child { border-right-color:#34445d; }
[data-theme="dark"] .log-pagination-pages button.active { background:#177e72; border-color:#2bc7ad; color:#fff; }
@media (max-width:960px) { .log-filters { grid-template-columns:1fr; } .log-filter-actions { justify-content:flex-end; } }
@media (max-width:760px) { .log-pagination { align-items:flex-start; flex-direction:column; } .log-filter-fields { min-width:780px; } .time-range-menu { position:fixed; top:max(12px, env(safe-area-inset-top)); right:14px; bottom:max(12px, env(safe-area-inset-bottom)); left:14px; width:auto; max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y:auto; } }
.user-auth-card { width:min(480px,100%); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:16px; padding:4px; border-radius:9px; background:#eef2f8; }
.auth-tabs button { padding:9px; border-radius:7px; background:transparent; color:#66738b; }
.auth-tabs button.active { background:#fff; color:#172033; box-shadow:0 2px 8px #25365b18; }
.auth-tabs button:disabled { opacity:.45; cursor:not-allowed; }
.user-wide { width:100%; }
.email-code-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.user-auth-note { margin-top:14px; text-align:center; }
.user-modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:18px; background:#020713b8; }
.user-modal { width:min(460px,100%); padding:24px; border:1px solid #2f425f; border-radius:14px; background:#151f30; color:#e6edf8; box-shadow:0 24px 80px #00000070; animation:user-modal-in .16s ease-out; }
.announcement-modal .user-modal { width:min(760px,calc(100vw - 36px)); padding:28px; }
.user-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.user-modal-head h2 { margin:0 0 6px; }
.user-modal-close { padding:0 4px; background:transparent; color:#aab8cd; font-size:25px; line-height:1; }
.user-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.user-modal-warning { padding:13px 14px; border:1px solid #70404a; border-radius:9px; background:#3b222b; color:#ffb4bb; line-height:1.5; }
.user-key-management-modal .user-modal { width:min(700px,100%); padding:23px; border-radius:15px; }
.user-key-management-modal .user-modal-actions > span { flex:1; }
@keyframes user-modal-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }

.admin-link { display:block; margin-top:18px; color:#738097; text-align:center; font-size:12px; }
.auth-user-entry { display:flex; width:100%; margin-top:12px; justify-content:center; text-decoration:none; }
.user-layout { min-height:100vh; background:#0c1422; }
.user-header { min-height:82px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px; padding:14px clamp(18px,5vw,70px); border-bottom:1px solid #26354c; background:#111a2a; }
.user-header .brand { margin:0; }
.user-header-actions { display:flex; gap:16px; }
.user-header-info { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; }
.user-header-info-empty { display:block; min-height:0; }
.user-header-info-support-only { grid-template-columns:1fr; justify-items:end; }
.user-announcement { display:flex; min-width:0; align-items:center; padding:0; border:0; color:#dce7f6; background:transparent; font:inherit; text-align:left; cursor:pointer; }
.user-announcement-icon { flex:0 0 auto; margin-right:6px; font-size:17px; line-height:1; }
.user-announcement > strong { flex:0 0 auto; margin-right:7px; color:#77d7c7; white-space:nowrap; }
.user-support-wechat { padding:8px 12px; border:1px solid #35506b; border-radius:8px; color:#aebdd1; background:#0f1929; white-space:nowrap; }
.user-support-wechat strong { color:#e6edf8; }
.user-main { width:min(1500px,100%); margin:0 auto; padding:28px clamp(16px,4vw,48px); }
.user-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.user-stats article { display:grid; gap:6px; padding:18px; border:1px solid #2b3a52; border-radius:9px; background:#151f30; box-shadow:0 2px 5px #0000002b,0 9px 22px #00000020; }
.user-stat-pair { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 !important; }
.user-stat-pair > div { display:grid; gap:6px; min-width:0; }
.user-stat-pair > div + div { padding-left:18px; border-left:1px solid #2b3a52; text-align:right; }
.user-balance-stat { grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px !important; }
.user-balance-stat > div { display:grid; gap:6px; min-width:0; }
.user-recharge-button { min-width:88px; }
.user-stats span { color:#9eacc3; font-size:12px; }
.user-stats strong { color:#e6edf8; font-size:22px; }
.user-key-panel > h2 { margin-bottom:16px; }
.user-key-header,.user-key-row { display:grid; grid-template-columns:minmax(150px,.9fr) minmax(280px,1.7fr) minmax(180px,1fr) minmax(150px,.75fr) minmax(130px,auto); gap:0 24px; }
.user-key-header { margin:0 -12px; padding:7px 12px; color:#526176; background:#eff7f7; font-size:13px; font-weight:600; }
.user-key-row { align-items:center; padding-top:7px; }
.user-key-row > div { display:grid; min-width:0; min-height:40px; align-items:center; }
.user-key-row strong,.user-key-row code { align-self:center; }
.user-key-row code { word-break:break-all; }
.user-key-used strong { white-space:nowrap; }
.user-key-toggle { display:flex; align-items:center; gap:10px; height:40px; }
.user-key-actions { white-space:nowrap; }
.user-key-actions .btn { align-self:center; justify-self:start; height:40px; }
.user-empty-key { text-align:center; padding:44px 20px; }
.user-empty-key p { margin:9px 0 18px; }
[data-theme="light"] .user-layout { background:#eff7f7; color:#172033; }
[data-theme="light"] .user-header { border-bottom-color:#e5eaf2; background:#fff; }
[data-theme="light"] .user-announcement { color:#344054; }
[data-theme="light"] .user-announcement > strong { color:#177e72; }
[data-theme="light"] .user-support-wechat { border-color:#cfe3e1; color:#526176; background:#eff7f7; }
[data-theme="light"] .user-support-wechat strong { color:#172033; }
[data-theme="light"] .user-stats article { border-color:#e1e8f0; background:#fff; box-shadow:0 2px 5px #25365b0b,0 9px 22px #25365b0c; }
[data-theme="light"] .user-stat-pair > div + div { border-color:#e1e8f0; }
[data-theme="light"] .user-stats span { color:#65728a; }
[data-theme="light"] .user-stats strong { color:#172033; }
[data-theme="light"] .user-modal-backdrop { background:#10203b75; }
[data-theme="light"] .user-modal { border-color:#dce4f0; background:#fff; color:#172033; box-shadow:0 20px 70px #10203b40; }
[data-theme="light"] .user-modal-close { color:#758199; }
[data-theme="light"] .user-modal-warning { border-color:#ffd3d6; background:#fff0f0; color:#c93642; }
[data-theme="dark"] .auth-tabs { background:#0f1929; }
[data-theme="dark"] .auth-tabs button.active { background:#26354c; color:#fff; }
[data-theme="dark"] .user-key-header { color:#a8b6cb; background:#0c1422; }
[data-theme="dark"] .settings-divider { background:#2a3850; }
[data-theme="dark"] .announcement-admin-history { border-color:#2b3a52; }
[data-theme="dark"] .announcement-admin-history-head, [data-theme="dark"] .announcement-admin-item { border-color:#26354c; }
[data-theme="dark"] .announcement-admin-item small { color:#8fa0b8; }
[data-theme="dark"] .communication-preview-bar { border-color:#34445d; background:#0f1929; }
[data-theme="dark"] .layout > .sidebar:not(.user-sidebar) .sidebar-footer { border-top-color:#26354c; }
@media (max-width:1100px) { .user-key-header { display:none; } .user-key-row { grid-template-columns:1fr 1.5fr 1fr; gap:12px 18px; } .user-key-row > div::before { color:#738097; font-size:12px; font-weight:600; } .user-key-name::before { content:'名称'; } .user-key-value::before { content:'密钥'; } .user-key-used::before { content:'最后使用'; } .user-key-state::before { content:'状态'; } .user-key-actions::before { content:'操作'; } .user-key-row > div { align-items:start; gap:5px; } .user-key-state,.user-key-actions { grid-column:auto; } }
@media (max-width:1180px) { .user-header { grid-template-columns:minmax(0,1fr) auto; } .user-header-info { grid-column:1 / -1; grid-row:2; } .user-header-actions { grid-column:2; grid-row:1; } .user-main { padding-top:150px; } }
@media (max-width:900px) { .settings-grid { grid-template-columns:1fr; } .settings-cleanup, .settings-request { height:auto; } .settings-cleanup .settings-fields, .settings-branding-grid, .announcement-settings-layout { grid-template-columns:1fr; } .cleanup-footer { align-items:flex-start; flex-direction:column; } .settings-security,.settings-communication,.settings-branding { grid-column:auto; } }
@media (max-width:760px) { .user-header { grid-template-columns:1fr; align-items:flex-start; gap:12px; } .user-header-actions { grid-column:1; grid-row:2; flex-wrap:wrap; } .user-header-info { grid-column:1; grid-row:3; width:100%; grid-template-columns:1fr; gap:10px; } .user-header-info-support-only { justify-items:start; } .user-stats,.user-key-row { grid-template-columns:1fr; } .user-key-state,.user-key-actions { grid-column:auto; } .email-code-row,.settings-inline-control { grid-template-columns:1fr; } .announcement-meta { align-items:flex-start; flex-direction:column; } }
@media (max-width:760px) { .user-console-topbar { grid-template-columns:1fr; } .user-console-notice { width:100%; } .user-console-notice .user-header-info { grid-template-columns:1fr; gap:10px; } .user-console-notice .user-support-wechat { margin-left:0; justify-self:start; } }
@media (max-width:700px) { .model-price-row { grid-template-columns:1fr; gap:10px; } }

/* 固定导航：滚动主内容时，顶部导航和管理员侧栏保持原位。 */
.layout { display:block; min-height:100vh; }
.layout > .sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:232px;
  height:100vh;
  overflow-y:auto;
  z-index:20;
}
.layout > .main {
  min-height:100vh;
  margin-left:232px;
  overflow:visible;
}
.user-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
}
.user-main { padding-top:110px; }

@media (min-width:761px) and (max-width:1180px) {
  .user-main { padding-top:150px; }
}

@media (max-width:760px) {
  .layout > .sidebar {
    position:static;
    width:auto;
    height:auto;
    overflow:visible;
  }
  .layout > .main { margin-left:0; }
  .user-main { padding-top:230px; }
}

/* Usage scenario management */
.scenario-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.scenario-card { position:relative; display:flex; min-width:0; min-height:310px; flex-direction:column; padding:18px 18px 64px; border:1px solid #2b3a52; border-radius:8px; background:#111c2e; }
.scenario-card .panel-head { margin-bottom:12px; }
.scenario-card h3 { margin:0; font-size:18px; }
.scenario-card .switch { margin-left:auto; }
.scenario-channel-list { display:grid; gap:2px; margin:0; padding:0; list-style:none; counter-reset:scenario-channel; }
.scenario-channel-list li { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; min-height:36px; border-top:1px solid #283951; color:#e6edf8; }
.scenario-channel-list li::before { counter-increment:scenario-channel; content:counter(scenario-channel); display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#243b5b; color:#9cc5ff; font-size:12px; font-weight:700; }
.scenario-channel-list li span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scenario-channel-list li .muted { grid-column:2; font-size:12px; }
.scenario-card [data-scenario-edit] { position:absolute; left:18px; bottom:18px; margin:0; }
.scenario-card [data-scenario-delete] { position:absolute; right:18px; bottom:18px; width:auto; min-height:30px; padding:4px 9px; font-size:12px; }
.modal #scenario-form .channel-check-list { grid-template-columns:1fr; gap:0; max-height:360px; padding:0; counter-reset:scenario-editor-channel; }
.modal #scenario-form .channel-check { min-height:46px; display:grid; grid-template-columns:24px 22px minmax(0,1fr) 34px 34px; gap:8px; padding:0 10px; border-bottom:1px solid #2b3a52; }
.modal #scenario-form .channel-check::before { counter-increment:scenario-editor-channel; content:counter(scenario-editor-channel); color:#82b5ff; font-size:12px; font-weight:700; text-align:center; }
.modal #scenario-form .channel-check:last-child { border-bottom:0; }
.modal #scenario-form .channel-check span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal #scenario-form .channel-check .btn { width:30px; min-width:30px; height:30px; padding:0; }
[data-theme="light"] .scenario-card { border-color:#dce4f0; background:#fff; }
[data-theme="light"] .scenario-channel-list li { border-color:#e6edf3; color:#172033; }
[data-theme="light"] .modal #scenario-form .channel-check { border-color:#e1e8f0; }
@media (max-width:1180px) { .scenario-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .scenario-list { grid-template-columns:1fr; } .scenario-card { min-height:0; } }

/* Scenario key alignment and selection actions */
.user-key-panel table th, .user-key-panel table td { vertical-align:middle; }
.user-key-panel table th:nth-child(4), .user-key-panel table th:nth-child(5), .user-key-panel table th:nth-child(6), .user-key-panel table td:nth-child(4), .user-key-panel table td:nth-child(5), .user-key-panel table td:nth-child(6) { text-align:center; }
.user-key-panel .switch { display:inline-flex; vertical-align:middle; }
.user-key-status { display:inline-block; min-width:48px; margin-left:8px; color:#9fb0c8; font-size:12px; vertical-align:middle; }
.user-key-status.is-enabled { color:#6ce0bb; }
.user-key-status.is-disabled { color:#aebbd0; }
.user-key-status.is-banned { color:#ff9da6; }
.user-key-status.is-expired { color:#ffca6d; }
.user-key-panel .switch.is-disabled span { cursor:not-allowed; opacity:.58; }
.user-key-copy-cell { text-align:center; }
.key-status-toggle { position:relative; display:inline-block; width:48px; height:27px; padding:0; border:0; border-radius:999px; background:#cbd3df; vertical-align:middle; cursor:pointer; }
.key-status-toggle span { position:absolute; inset:3px auto auto 3px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:0 2px 6px #1d2c4928; transition:.2s; }
.key-status-toggle.is-on { background:#177e72; }
.key-status-toggle.is-on span { transform:translateX(21px); }
.key-status-toggle.is-disabled { cursor:not-allowed; opacity:.58; }
.scenario-key-name { white-space:nowrap; font-weight:600; }
.scenario-picker { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.scenario-picker .btn { min-width:132px; min-height:44px; }

.user-balance-form { display:grid; gap:16px; }
.user-balance-form label { display:grid; gap:8px; color:#d8e3f4; font-weight:600; }
.user-balance-form input, .user-balance-form select { width:100%; box-sizing:border-box; }
.user-balance-form small { color:#9fb0c8; font-weight:400; line-height:1.5; }
.user-key-panel table th:nth-child(5), .user-key-panel table th:nth-child(6), .user-key-panel table th:nth-child(7), .user-key-panel table td:nth-child(5), .user-key-panel table td:nth-child(6), .user-key-panel table td:nth-child(7) { text-align:center; }
.user-key-panel table { table-layout:fixed; }
.user-key-panel table th:nth-child(2), .user-key-panel table td:nth-child(2) { width:18%; }
.user-key-panel table th:nth-child(3), .user-key-panel table td:nth-child(3) { width:25%; }
.user-key-panel table th:nth-child(4), .user-key-panel table td:nth-child(4) { width:10%; }
.user-key-panel table th:nth-child(5), .user-key-panel table td:nth-child(5) { width:14%; }
.user-key-panel table th:nth-child(6), .user-key-panel table td:nth-child(6) { width:12%; }
.user-key-panel table th:nth-child(7), .user-key-panel table td:nth-child(7) { width:10%; }
.user-key-panel table th:nth-child(8), .user-key-panel table td:nth-child(8) { width:21%; }
.user-key-panel table td:nth-child(8) { white-space:nowrap; }
.user-key-panel table td:last-child .btn + .btn { margin-left:8px; }
[data-theme="light"] .user-balance-form label { color:#26344b; }
[data-theme="light"] .user-balance-form small { color:#6d7b91; }

/* Public homepage and unified account entry */
.public-page, .login-page { min-height:100vh; background:#f4f7f8; color:#142126; }
.public-header, .login-header { width:min(1180px,calc(100% - 40px)); height:76px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid #d8e1e3; }
.public-brand { display:flex; align-items:center; gap:11px; color:#142126; text-decoration:none; font-size:16px; font-weight:750; }
.public-brand img { width:38px; height:38px; display:block; object-fit:cover; border-radius:8px; }
.public-nav { display:flex; align-items:center; gap:22px; }
.public-nav-link { color:#52636a; text-decoration:none; font-size:14px; font-weight:650; }
.public-nav-link:hover, .public-nav-link.active { color:#177e72; }
.public-main { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.public-hero { min-height:calc(100vh - 178px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:72px 0 88px; }
.public-hero-logo { width:82px; height:82px; display:block; margin-bottom:28px; border-radius:8px; object-fit:cover; box-shadow:0 12px 30px #1421261f; }
.public-kicker { margin:0 0 14px; color:#177e72; font-size:13px; font-weight:750; }
.public-hero h1 { max-width:760px; font-size:54px; line-height:1.1; letter-spacing:0; }
.public-summary { max-width:640px; margin:20px 0 0; color:#52636a; font-size:19px; line-height:1.7; }
.public-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.public-actions .btn { min-width:126px; text-align:center; text-decoration:none; }
.public-primary-action { background:#177e72; }

[data-theme="dark"] .public-page { background:#0c1422; color:#e6edf8; }
[data-theme="dark"] .public-header { border-bottom-color:#26354c; }
[data-theme="dark"] .public-brand { color:#e6edf8; }
[data-theme="dark"] .public-nav-link { color:#aebdd1; }
[data-theme="dark"] .public-nav-link:hover,
[data-theme="dark"] .public-nav-link.active { color:#55d6c0; }
[data-theme="dark"] .public-kicker { color:#55d6c0; }
[data-theme="dark"] .public-summary { color:#aebdd1; }

.login-header { border-bottom:0; }
.login-main { min-height:calc(100vh - 76px); display:grid; place-items:center; padding:32px 20px 76px; }
.unified-auth-card { width:min(430px,100%); min-height:442px; border-radius:8px; box-shadow:0 18px 48px #14212614; }
.login-brand { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.login-brand img { width:52px; height:52px; border-radius:8px; object-fit:cover; }
.login-brand span { display:block; margin-bottom:3px; color:#738097; font-size:12px; }
.login-brand h1 { font-size:22px; }
.login-feedback { margin:14px 0; }
.login-text-button { display:block; margin:14px auto 0; padding:4px; background:transparent; color:#177e72; font-size:13px; }
.login-back-button { width:34px; height:34px; margin:0 0 16px; padding:0; border:1px solid #dbe2ee; border-radius:8px; background:#fff; color:#34444b; font-size:18px; }
.unified-auth-card form[hidden], .unified-auth-card .auth-tabs[hidden] { display:none; }

@media (max-width:700px) {
  .public-header, .login-header, .public-main { width:min(100% - 28px,1180px); }
  .public-header, .login-header { height:66px; }
  .public-brand span { font-size:14px; }
  .public-nav { gap:12px; }
  .public-nav-link.active { display:none; }
  .public-hero { min-height:calc(100vh - 130px); padding:48px 0 64px; }
  .public-hero-logo { width:68px; height:68px; margin-bottom:24px; }
  .public-hero h1 { font-size:38px; }
  .public-summary { font-size:16px; }
  .public-actions { width:100%; }
  .public-actions .btn { flex:1 1 130px; }
  .login-main { min-height:calc(100vh - 66px); padding:20px 14px 46px; align-items:start; }
  .unified-auth-card { min-height:0; margin-top:12px; padding:24px 20px; }
  .email-code-row { grid-template-columns:minmax(0,1fr) auto; }
}

/* User center mobile layout */
.user-layout { width:100%; max-width:100vw; overflow-x:hidden; }
.user-main, .user-main > * { min-width:0; max-width:100%; }

/* Public orbit homepage */
.public-orbit-page { min-height:100svh; overflow:hidden; background:#060b11; color:#edf5ff; }
.orbit-backdrop { position:fixed; inset:0; z-index:0; overflow:hidden; background:#060b11; }
#network-scene { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
.orbit-grid { position:absolute; inset:-12%; opacity:.2; pointer-events:none; transform:perspective(900px) rotateX(2deg); background-size:56px 56px; background-image:repeating-linear-gradient(0deg,transparent 0,transparent 55px,rgba(127,169,187,.18) 56px),repeating-linear-gradient(90deg,transparent 0,transparent 55px,rgba(127,169,187,.18) 56px); }
.orbit-vignette { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 180px 64px rgba(0,0,0,.74); }
.public-orbit-page .orbit-header { position:fixed; top:0; left:50%; z-index:5; width:min(1560px,calc(100% - 80px)); height:82px; transform:translateX(-50%); border-bottom:0; }
.public-orbit-page .public-brand { color:#f4f8ff; font-size:18px; }
.public-orbit-page .public-brand img { width:42px; height:42px; border:1px solid rgba(144,220,255,.28); box-shadow:0 0 22px rgba(91,193,236,.18); }
.public-orbit-page .public-nav-link { color:#a9b8c8; }
.public-orbit-page .public-nav-link:hover,
.public-orbit-page .public-nav-link.active { color:#7ce6d1; }
.orbit-nav-action { min-width:76px; border:1px solid rgba(172,204,220,.28); background:rgba(9,18,28,.72); color:#f2f7ff; text-align:center; text-decoration:none; }
.orbit-nav-action:hover { border-color:rgba(112,229,207,.7); background:rgba(25,62,67,.72); }
.orbit-home { position:relative; z-index:2; width:min(1640px,calc(100% - 88px)); min-height:100svh; margin:0 auto; padding:104px 0 86px; display:grid; grid-template-columns:minmax(190px,1fr) minmax(480px,660px) minmax(190px,1fr); align-items:center; gap:44px; pointer-events:none; }
.orbit-home > * { pointer-events:auto; }
.orbit-home .orbit-hero { pointer-events:none; }
.orbit-home .public-actions { pointer-events:auto; }
.public-orbit-page .orbit-hero { min-height:0; padding:28px 0; align-items:center; justify-content:center; text-align:center; }
.public-orbit-page .public-hero-logo { width:68px; height:68px; margin:0 0 18px; border:1px solid rgba(140,229,255,.3); border-radius:8px; box-shadow:0 0 34px rgba(92,205,239,.26); }
.public-orbit-page .public-kicker { margin:0 0 15px; color:#71e4ce; font-size:13px; text-transform:uppercase; }
.public-orbit-page .orbit-hero h1 { max-width:660px; margin:0; color:#f6f9ff; font-size:64px; line-height:1.06; letter-spacing:0; text-shadow:0 6px 30px rgba(0,0,0,.7); }
.public-orbit-page .public-summary { margin:18px 0 0; color:#b8c8d7; font-size:17px; line-height:1.6; text-shadow:0 2px 15px #000; }
.public-orbit-page .public-actions { justify-content:center; margin-top:28px; }
.public-orbit-page .public-actions .btn { min-width:124px; min-height:44px; padding:10px 18px; border-color:rgba(170,205,220,.3); background:rgba(8,17,27,.76); color:#e8f0fa; box-shadow:none; backdrop-filter:blur(8px); }
.public-orbit-page .public-actions .btn:hover { border-color:rgba(125,225,207,.72); background:rgba(19,45,49,.84); transform:translateY(-1px); }
.public-orbit-page .public-actions .public-primary-action { border-color:#55d6c0; background:#168a7d; color:#fff; }
.public-orbit-page .public-actions .public-primary-action:hover { background:#1b9b8c; }
.orbit-feature { max-width:250px; color:#dce7f2; text-shadow:0 2px 15px #000; }
.orbit-feature-left { justify-self:start; }
.orbit-feature-right { justify-self:end; text-align:right; }
.orbit-feature-index { display:block; margin-bottom:14px; color:#71e4ce; font:700 12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; }
.orbit-feature h2 { margin:0; color:#f0f5fb; font-size:21px; line-height:1.25; letter-spacing:0; }
.orbit-status { position:fixed; left:50%; bottom:24px; z-index:4; display:flex; align-items:center; gap:22px; min-height:34px; padding:0 16px; transform:translateX(-50%); border:1px solid rgba(151,190,207,.18); border-radius:6px; background:rgba(6,13,20,.72); color:#788b9b; font:600 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; backdrop-filter:blur(8px); white-space:nowrap; }
.orbit-status span { display:inline-flex; align-items:center; gap:7px; }
.orbit-status i { width:7px; height:7px; border-radius:50%; background:#50dab0; box-shadow:0 0 10px #50dab0; }
.orbit-tooltip { position:fixed; z-index:7; min-width:92px; padding:8px 10px; border:1px solid rgba(134,223,218,.38); border-radius:6px; background:rgba(5,13,22,.9); color:#edf7ff; font-size:12px; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(4px); transition:opacity .16s ease,transform .16s ease; }
.orbit-tooltip.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.orbit-static-fallback .orbit-backdrop::after { content:""; position:absolute; left:50%; top:50%; width:min(62vw,620px); aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid rgba(135,226,247,.34); border-radius:50%; box-shadow:0 0 90px rgba(83,185,218,.2),inset 0 0 70px rgba(83,185,218,.1); }

@media (max-width:1100px) {
  .orbit-home { width:min(100% - 48px,1040px); grid-template-columns:180px minmax(420px,1fr) 180px; gap:18px; }
  .orbit-feature h2 { font-size:18px; }
  .public-orbit-page .orbit-hero h1 { font-size:52px; }
}

@media (max-width:820px) {
  .public-orbit-page { overflow:auto; }
  .public-orbit-page .orbit-header { width:calc(100% - 28px); height:66px; }
  .public-orbit-page .public-brand img { width:36px; height:36px; }
  .public-orbit-page .public-brand span { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .public-orbit-page .public-nav-link { display:none; }
  .orbit-home { width:calc(100% - 28px); min-height:100svh; padding:86px 0 78px; grid-template-columns:minmax(0,1fr); }
  .orbit-feature { display:none; }
  .public-orbit-page .orbit-hero { width:100%; }
  .public-orbit-page .public-hero-logo { width:58px; height:58px; }
  .public-orbit-page .orbit-hero h1 { font-size:40px; }
  .public-orbit-page .public-summary { font-size:15px; }
  .public-orbit-page .public-actions { width:min(100%,360px); gap:9px; }
  .public-orbit-page .public-actions .btn { flex:1 1 46%; min-width:0; }
  .orbit-status { bottom:16px; max-width:calc(100% - 28px); gap:12px; }
  .orbit-status span:nth-child(n+4) { display:none; }
  .orbit-grid { background-size:42px 42px; }
}

@media (prefers-reduced-motion:reduce) {
  .orbit-tooltip { display:none; }
  .public-orbit-page .public-actions .btn { transition:none; }
}

@media (max-width:760px) {
  .user-header {
    position:static;
    min-height:0;
    padding:16px;
  }
  .user-header .brand { min-width:0; }
  .user-header .brand > div { min-width:0; }
  .user-header .brand .muted { overflow-wrap:anywhere; }
  .user-header-actions {
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .user-header-actions .btn {
    display:flex;
    min-width:0;
    padding:9px 8px;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.2;
  }
  .user-header-info { min-width:0; }
  .user-announcement { width:100%; }
  .user-support-wechat { width:100%; white-space:normal; overflow-wrap:anywhere; }
  .user-main {
    width:100%;
    padding:16px 12px 28px;
  }
  .user-stats { gap:12px; }
  .user-stats article { width:100%; padding:16px; }
  .panel { min-width:0; max-width:100%; margin-top:12px; padding:16px; }
  .panel-head { min-width:0; gap:12px; }
  .panel-head > div { min-width:0; }
  .user-key-panel .panel-head > .btn { min-width:72px; flex:0 0 auto; white-space:nowrap; }
  .user-key-panel .table-wrap,
  #user-log-panel .table-wrap {
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .user-key-panel table { width:760px; min-width:760px; }
  .user-request-log-table { width:760px; min-width:760px; table-layout:auto; }
  .user-usage-record-filters { width:100%; min-width:0; overflow-x:auto; }
  .user-usage-record-filter-fields { min-width:780px; }
  .user-log-filters {
    width:100%;
    min-width:0;
    grid-template-columns:1fr;
    gap:12px;
  }
  .user-log-filter-fields {
    min-width:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .user-log-filter-fields > label { min-width:0; padding-right:0; }
  .user-log-filter-fields input,
  .user-log-filter-fields select { min-width:0; }
  .user-log-filters .log-filter-actions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .user-log-filters .log-filter-actions .btn { width:100%; }
  .log-pagination { gap:12px; }
  .log-pagination-pages { max-width:100%; overflow-x:auto; }
  .user-setup-guide-grid { grid-template-columns:1fr; }
  .user-setup-guide-grid .setup-guide { min-width:0; padding:16px; }
  .user-setup-guide-grid .setup-guide .panel-head {
    min-height:0;
    align-items:stretch;
    flex-direction:column;
  }
  .user-setup-guide-grid .setup-guide .panel-head .btn { width:100%; }
  .user-setup-guide-grid .setup-guide:nth-child(2) .setup-steps { margin-top:0; }
  .user-setup-guide-grid .setup-guide .code-block {
    width:100%;
    height:260px;
    min-height:260px;
    max-height:260px;
    font-size:12px;
  }
}

@media (max-width:420px) {
  .user-header .brand h2 { font-size:18px; }
  .user-header-actions .btn { font-size:13px; }
  .user-stat-pair > div + div { padding-left:12px; }
  .user-stats strong { font-size:20px; }
}

/* User center sidebar workspace */
.user-console-layout { min-height:100vh; background:#0c1422; }
.user-console-layout > .user-sidebar { display:flex; flex-direction:column; }
.user-sidebar .brand { margin:0 10px 30px; padding:0; }
.user-sidebar .brand h3 { margin:0; color:#eef4ff; font-size:17px; }
.user-sidebar .brand > div { min-width:0; }
.user-sidebar .brand .muted { margin-top:3px; overflow:hidden; color:#8fa0b8; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.user-sidebar .nav { padding-top:8px; }
.user-sidebar .nav button,
.user-sidebar .nav .sidebar-nav-link,
.user-sidebar .sidebar-home-link,
.user-sidebar .sidebar-footer-button { width:100%; border:0; border-radius:6px; background:transparent; color:#aebdd1; font:inherit; text-align:left; text-decoration:none; cursor:pointer; }
.user-sidebar .nav button { padding:11px 14px; }
.user-sidebar .nav button:hover,
.user-sidebar .nav button.active,
.user-sidebar .nav .sidebar-nav-link:hover,
.user-sidebar .sidebar-home-link:hover,
.user-sidebar .sidebar-footer-button:hover { background:#2a3d5f; color:#fff; }
.user-sidebar .nav .user-workbench-link { color:#d8e6ff; }
.user-sidebar .sidebar-footer { margin-top:auto; display:grid; gap:4px; padding:18px 14px; border-top:1px solid #26354c; }
.user-sidebar .sidebar-account { overflow:hidden; padding:4px 10px 8px; color:#8fa0b8; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.user-sidebar .sidebar-home-link,
.user-sidebar .sidebar-footer-button { padding:9px 10px; }
.user-console-main { min-height:100vh; padding:28px clamp(24px,4vw,56px) 48px; background:#0c1422; }
.user-console-topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:20px; margin:0 0 24px; }
.user-console-notice { min-width:0; width:100%; }
.user-console-notice .user-header-info { display:grid; grid-template-columns:auto auto; justify-content:end; gap:16px; width:100%; min-height:0; margin:0; padding:0; border:0; background:transparent; }
.user-console-notice .user-announcement { min-width:0; width:auto; }
.user-console-notice .user-support-wechat { flex:0 0 auto; margin-left:24px; }
.user-console-notice .user-header-info-empty { display:none; }
.user-console-top-actions { display:flex; flex:0 0 auto; gap:10px; }
.user-console-top-actions .btn { text-decoration:none; white-space:nowrap; }
.user-console-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }
.user-console-heading h1 { margin:0; color:#eef4ff; font-size:28px; }
.user-console-heading p { margin:7px 0 0; color:#8fa0b8; font-size:14px; }
.announcement-history-list { margin:0 -26px; max-height:min(52vh,440px); overflow:auto; }
.announcement-history-item { display:flex; width:100%; align-items:center; gap:16px; padding:16px 26px; border:0; border-top:1px solid #26354c; color:#dce7f6; background:transparent; font:inherit; text-align:left; cursor:pointer; }
.announcement-history-item:hover { background:#1b2940; }
.announcement-history-copy { display:grid; min-width:0; flex:1; gap:5px; }
.announcement-history-copy strong { overflow:hidden; color:#e6edf8; font-size:14px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.announcement-history-copy small { color:#8fa0b8; font-size:12px; }
.announcement-history-arrow { color:#8fa0b8; font-size:28px; line-height:1; }
.announcement-detail { min-height:180px; padding:22px 0; color:#c7d3e5; line-height:1.8; }
.announcement-detail h3 { margin:0 0 14px; color:#eef4ff; font-size:20px; }
.user-password-hint { margin-left:6px; color:#ff8f9a; font-style:normal; }
.user-profile-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.user-profile-summary > div { display:grid; gap:7px; padding:4px 0; }
.user-profile-summary span, .user-recharge-balance span { color:#9eacc3; font-size:13px; }
.user-profile-summary strong, .user-recharge-balance strong { color:#eef4ff; font-size:18px; }
.user-password-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.user-password-form label, .user-recharge-toolbar label { display:grid; gap:7px; color:#c7d3e5; font-weight:650; font-size:13px; }
.user-password-form input, .user-recharge-toolbar select { width:100%; box-sizing:border-box; }
.user-password-form .form-actions { grid-column:1 / -1; margin-top:4px; }
.user-recharge-panel { display:grid; gap:20px; }
.user-recharge-balance { display:grid; gap:7px; }
.user-recharge-toolbar { display:flex; align-items:end; gap:12px; }
.user-recharge-toolbar label { width:min(240px,100%); }
.user-recharge-table { width:100%; }
.recharge-order-status { display:inline-flex; align-items:center; min-width:52px; justify-content:center; padding:3px 8px; border-radius:999px; font-size:12px; }
.recharge-order-status.is-pending { color:#f3c778; background:#5a431f; }
.recharge-order-status.is-paid { color:#79e1b8; background:#134b40; }
.recharge-order-status.is-failed { color:#ff9da6; background:#542b37; }
.recharge-order-status.is-refunded { color:#b8c8dd; background:#32445d; }
.user-sidebar-stats { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:0; }
.user-sidebar-stats article { min-width:0; }
.user-console-quick { margin-top:20px; }
.user-quick-actions { display:flex; flex-wrap:wrap; gap:10px; }
.user-console-layout .user-key-panel { margin-top:0; }
.user-console-layout .user-key-panel .table-wrap { overflow-x:auto; }
.user-console-layout .user-key-panel .user-key-table { min-width:1500px; table-layout:auto; }
.user-console-layout .user-key-panel .user-key-table th,
.user-console-layout .user-key-panel .user-key-table td { width:auto; }
.user-console-layout .user-key-panel table { width:auto; min-width:0; table-layout:auto; }
.user-console-layout .user-key-panel table th,
.user-console-layout .user-key-panel table td { width:auto; padding:12px 14px; white-space:nowrap; }
.user-console-layout .user-key-panel table th:nth-child(1) { min-width:110px; text-align:left; }
.user-console-layout .user-key-panel table th:nth-child(2) { min-width:230px; text-align:left; }
.user-console-layout .user-key-panel table th:nth-child(3) { min-width:150px; }
.user-console-layout .user-key-panel table th:nth-child(4) { min-width:130px; }
.user-console-layout .user-key-panel table th:nth-child(5) { min-width:170px; }
.user-console-layout .user-key-panel table th:nth-child(6) { min-width:250px; }
.user-console-layout .user-key-panel table td:last-child .btn { margin:0 2px; }
[data-theme="light"] .user-console-layout,
[data-theme="light"] .user-console-main { background:#f4f7f8; }
[data-theme="light"] .user-sidebar { background:#fff; border-right-color:#d8e1e3; }
[data-theme="light"] .user-sidebar .brand h3,
[data-theme="light"] .user-console-heading h1 { color:#142126; }
[data-theme="light"] .user-sidebar .nav button,
[data-theme="light"] .user-sidebar .nav .sidebar-nav-link,
[data-theme="light"] .user-sidebar .sidebar-home-link,
[data-theme="light"] .user-sidebar .sidebar-footer-button { color:#52636a; }
[data-theme="light"] .user-sidebar .nav button:hover,
[data-theme="light"] .user-sidebar .nav button.active,
[data-theme="light"] .user-sidebar .nav .sidebar-nav-link:hover,
[data-theme="light"] .user-sidebar .sidebar-home-link:hover,
[data-theme="light"] .user-sidebar .sidebar-footer-button:hover { background:#e7eef1; color:#142126; }
[data-theme="light"] .user-sidebar .sidebar-footer { border-top-color:#d8e1e3; }
[data-theme="light"] .user-sidebar .sidebar-account { color:#687980; }
[data-theme="light"] .user-sidebar .sidebar-version { color:#7b8a90; }
[data-theme="light"] .user-console-heading p { color:#687980; }
[data-theme="light"] .announcement-history-item { border-top-color:#e5ebee; color:#42545b; }
[data-theme="light"] .announcement-history-item:hover { background:#eef4f5; }
[data-theme="light"] .announcement-history-copy strong, [data-theme="light"] .announcement-detail h3 { color:#142126; }
[data-theme="light"] .announcement-history-copy small, [data-theme="light"] .announcement-history-arrow { color:#71828a; }
[data-theme="light"] .announcement-detail { color:#42545b; }
[data-theme="light"] .user-password-hint { color:#c53d4b; }
[data-theme="light"] .user-profile-summary span, [data-theme="light"] .user-recharge-balance span { color:#687980; }
[data-theme="light"] .user-profile-summary strong, [data-theme="light"] .user-recharge-balance strong { color:#142126; }
[data-theme="light"] .user-password-form label, [data-theme="light"] .user-recharge-toolbar label { color:#42545b; }
[data-theme="light"] .recharge-order-status.is-pending { color:#9b6a16; background:#fff2d6; }
[data-theme="light"] .recharge-order-status.is-paid { color:#117359; background:#ddf7ef; }
[data-theme="light"] .recharge-order-status.is-failed { color:#b53d4b; background:#ffeaed; }
[data-theme="light"] .recharge-order-status.is-refunded { color:#52636a; background:#e7eef1; }

@media (max-width:760px) {
  .user-console-layout > .user-sidebar { position:static; width:100%; min-height:0; }
  .user-sidebar .brand { margin:0 10px 12px; padding:0; }
  .user-sidebar .nav { display:flex; gap:4px; padding:0 12px 12px; overflow-x:auto; }
  .user-sidebar .nav button { width:auto; flex:0 0 auto; padding:9px 12px; white-space:nowrap; }
  .user-sidebar .nav .sidebar-nav-link { width:auto; flex:0 0 auto; padding:9px 12px; white-space:nowrap; }
  .user-sidebar .sidebar-footer { display:flex; margin:0; padding:10px 12px; border-top:1px solid #26354c; }
  .user-sidebar .sidebar-account { display:none; }
  .user-sidebar .sidebar-footer { display:grid; justify-content:stretch; }
  .user-sidebar .sidebar-home-link,
  .user-sidebar .sidebar-footer-button { width:auto; padding:8px; white-space:nowrap; }
  .user-console-main { margin-left:0; padding:20px 12px 32px; }
  .user-console-topbar { align-items:stretch; flex-direction:column; gap:12px; }
  .user-console-top-actions { width:100%; }
  .user-console-top-actions .btn { flex:1; text-align:center; }
  .user-console-heading { align-items:stretch; flex-direction:column; }
  .user-console-heading .btn { width:100%; }
  .user-sidebar-stats { grid-template-columns:1fr; }
  .user-profile-summary, .user-password-form { grid-template-columns:1fr; }
  .user-console-layout .user-key-panel table { width:100%; min-width:970px; }
  .user-console-layout .user-key-panel .user-key-table { min-width:1500px; }
}

/* Keep the desktop user-key table on one line without a horizontal scrollbar. */
@media (min-width:761px) {
  .user-console-layout .user-key-panel .table-wrap { overflow-x:visible; }
  .user-console-layout .user-key-panel .user-key-table {
    width:100%;
    min-width:0;
    table-layout:fixed;
  }
  .user-console-layout .user-key-panel .user-key-table th,
  .user-console-layout .user-key-panel .user-key-table td {
    width:auto;
    min-width:0;
    padding:9px 5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
  }
  .user-console-layout .user-key-panel .user-key-table th:nth-child(1),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(1) { width:6%; }
  .user-console-layout .user-key-panel .user-key-table th:nth-child(2),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(2) { width:16%; }
  .user-console-layout .user-key-panel .user-key-table th:nth-child(3),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(3) { width:9%; }
  .user-console-layout .user-key-panel .user-key-table th:nth-child(4),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(4),
  .user-console-layout .user-key-panel .user-key-table th:nth-child(5),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(5) { width:4%; }
  .user-console-layout .user-key-panel .user-key-table th:nth-child(6),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(6),
  .user-console-layout .user-key-panel .user-key-table th:nth-child(7),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(7) { width:6%; }
  .user-console-layout .user-key-panel .user-key-table th:nth-child(8),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(8),
  .user-console-layout .user-key-panel .user-key-table th:nth-child(9),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(9),
  .user-console-layout .user-key-panel .user-key-table th:nth-child(10),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(10),
  .user-console-layout .user-key-panel .user-key-table th:nth-child(11),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(11) { width:4%; }
  .user-console-layout .user-key-panel .user-key-table th:nth-child(12),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(12) { width:6%; }
  .user-console-layout .user-key-panel .user-key-table th:nth-child(13),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(13) { width:10%; }
  .user-console-layout .user-key-panel .user-key-table th:nth-child(14),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(14) { width:7%; }
  .user-console-layout .user-key-panel .user-key-table th:nth-child(15),
  .user-console-layout .user-key-panel .user-key-table td:nth-child(15) { width:10%; overflow:visible; white-space:nowrap; }
  .user-console-layout .user-key-panel .user-key-table .key-secret-content { gap:4px; min-width:0; }
  .user-console-layout .user-key-panel .user-key-table .key-secret-content > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .user-console-layout .user-key-panel .user-key-table .btn { padding:5px 6px; font-size:11px; }
  .user-console-layout .user-key-panel .user-key-table .key-actions { gap:3px; flex-wrap:nowrap; }
  .user-console-layout .user-key-panel .user-key-table td:last-child .btn { margin:0; }
}

.user-key-group-cell { display:table-cell !important; min-width:110px; overflow:visible !important; white-space:nowrap !important; text-align:left; vertical-align:middle; }
.user-key-group-cell .btn { display:inline-block; width:auto !important; min-width:72px; white-space:nowrap !important; word-break:keep-all; writing-mode:horizontal-tb; }
.user-key-group-name { display:inline-block; max-width:110px; margin:0; padding:0; overflow:hidden; border:0; color:#7be7c4; background:transparent; font:inherit; font-size:11px; text-align:left; text-decoration:underline; text-overflow:ellipsis; vertical-align:middle; cursor:pointer; }

/* Match the current administrator key table, excluding its channel column. */
.user-console-layout .user-key-panel .table-wrap { overflow-x:auto; }
.user-console-layout .user-key-panel .user-key-table { width:100%; min-width:1200px; max-width:none; table-layout:fixed; }
.user-console-layout .user-key-panel .user-key-table th,
.user-console-layout .user-key-panel .user-key-table td { width:auto; min-width:0; padding:8px 7px; vertical-align:middle; text-align:center !important; font-size:12px; white-space:nowrap; }
.user-console-layout .user-key-panel .user-key-table th:nth-child(1),
.user-console-layout .user-key-panel .user-key-table td:nth-child(1) { width:7.26%; }
.user-console-layout .user-key-panel .user-key-table th:nth-child(2),
.user-console-layout .user-key-panel .user-key-table td:nth-child(2) { width:17.81%; }
.user-console-layout .user-key-panel .user-key-table th:nth-child(3),
.user-console-layout .user-key-panel .user-key-table td:nth-child(3) { width:7.92%; }
.user-console-layout .user-key-panel .user-key-table th:nth-child(4),
.user-console-layout .user-key-panel .user-key-table td:nth-child(4) { width:8.25%; }
.user-console-layout .user-key-panel .user-key-table th:nth-child(5),
.user-console-layout .user-key-panel .user-key-table td:nth-child(5) { width:7.92%; }
.user-console-layout .user-key-panel .user-key-table th:nth-child(6),
.user-console-layout .user-key-panel .user-key-table td:nth-child(6),
.user-console-layout .user-key-panel .user-key-table th:nth-child(7),
.user-console-layout .user-key-panel .user-key-table td:nth-child(7) { width:7.26%; }
.user-console-layout .user-key-panel .user-key-table th:nth-child(8),
.user-console-layout .user-key-panel .user-key-table td:nth-child(8) { width:7.26%; }
.user-console-layout .user-key-panel .user-key-table th:nth-child(9),
.user-console-layout .user-key-panel .user-key-table td:nth-child(9) { width:11.88%; }
.user-console-layout .user-key-panel .user-key-table th:nth-child(10),
.user-console-layout .user-key-panel .user-key-table td:nth-child(10) { width:7.26%; }
.user-console-layout .user-key-panel .user-key-table th:nth-child(11),
.user-console-layout .user-key-panel .user-key-table td:nth-child(11) { width:9.90%; overflow:visible; }
.user-console-layout .user-key-panel .user-key-table .key-status-cell,
.user-console-layout .user-key-panel .user-key-table .key-actions { justify-content:center; }
.user-console-layout .user-key-panel .user-key-table .user-key-group-cell,
.user-console-layout .user-key-panel .user-key-table .user-key-group-name { text-align:center !important; }

.modal-backdrop .modal:has(#key-form) { width:min(460px, 100%); }

.routing-group-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.routing-group-card { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; min-height:96px; align-items:stretch; gap:8px; padding:14px 18px; border:1px solid var(--border); border-radius:6px; background:var(--panel); }
.routing-group-topline { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; min-width:0; align-items:center; gap:12px; }
.routing-group-card strong { overflow:hidden; color:var(--text); font-size:18px; text-overflow:ellipsis; white-space:nowrap; }
.routing-group-card ol { display:grid; gap:4px; min-height:18px; margin:0; padding-left:0; color:var(--text); font-size:14px; list-style:none; }
.routing-group-card ol li { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.routing-group-card.is-disabled { opacity:.62; }
.routing-group-card .btn { min-width:54px; }
.routing-group-card .badge { white-space:nowrap; }
.routing-group-channel-list .channel-check { grid-template-columns:22px minmax(0,1fr) 30px 30px; }
.routing-group-channel-list .channel-check .btn { width:28px; min-width:28px; height:28px; padding:0; }
.routing-group-picker { display:grid; gap:10px; }
.routing-group-picker .btn { width:100%; min-height:42px; text-align:left; }
.routing-group-picker .btn { display:flex; align-items:center; gap:8px; }
.routing-group-picker .btn strong { margin-left:auto; color:#7be7c4; }
.group-multiplier { color:#7be7c4; font-size:12px; font-weight:700; white-space:nowrap; }
.channel-pricing-form .model-price-row > .field:nth-child(2),
.channel-pricing-form .model-price-current { display:none; }
@media (max-width:1180px) { .routing-group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .routing-group-grid { grid-template-columns:1fr; } .routing-group-card { min-height:110px; gap:10px; padding:14px; } .routing-group-topline { grid-template-columns:minmax(0,1fr) auto auto; gap:8px; } .routing-group-topline .group-multiplier { grid-column:2 / -1; justify-self:end; } }