/* Standalone account console. Kept separate from the public-site navigation. */
:root {
    color-scheme: dark;
    --console-bg: #07101f;
    --console-sidebar: rgba(7, 16, 31, .96);
    --console-surface: rgba(12, 27, 49, .72);
    --console-surface-strong: #0b1a30;
    --console-surface-soft: rgba(18, 42, 72, .52);
    --console-border: rgba(111, 164, 230, .14);
    --console-border-strong: rgba(85, 166, 255, .28);
    --console-text: #edf6ff;
    --console-muted: #8194ac;
    --console-dim: #586c85;
    --console-accent: #4da8ff;
    --console-accent-soft: rgba(77, 168, 255, .12);
    --console-violet: #9a8bff;
    --console-green: #34d6a0;
    --console-amber: #f8bd59;
    --console-red: #fb7185;
    --console-shadow: 0 22px 70px rgba(0, 7, 20, .28);
}

html.theme-light-boot { background: #f7f5fc; }

body.console-app {
    min-height: 100vh;
    margin: 0;
    color: var(--console-text);
    background:
        radial-gradient(circle at 88% -10%, rgba(50, 139, 236, .10), transparent 34%),
        linear-gradient(140deg, #07101f 0%, #091426 55%, #0a1120 100%);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

body.console-app::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, rgba(66, 148, 240, .025), transparent 38%, rgba(129, 104, 237, .025));
}

body.console-app * { box-sizing: border-box; }
body.console-app button, body.console-app input { font: inherit; }

body.console-app .console-layout {
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: visible;
}

body.console-app .console-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    width: 292px;
    max-height: 100vh;
    min-height: 100vh;
    padding: 20px 16px 16px;
    border: 0;
    border-right: 1px solid var(--console-border);
    background: var(--console-sidebar);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    overflow-y: auto;
}

.console-sidebar-head {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 18px;
}

.console-back-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--console-muted);
    border: 1px solid var(--console-border);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
    transition: .2s ease;
}

.console-back-btn:hover {
    color: var(--console-text);
    border-color: var(--console-border-strong);
    background: var(--console-accent-soft);
    transform: translateY(-1px);
}


body.console-app .sidebar-profile {
    margin: 0 0 12px;
    padding: 15px;
    border: 1px solid var(--console-border);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(23, 53, 88, .56), rgba(11, 27, 49, .72));
}

body.console-app .sidebar-avatar,
body.console-app .sidebar-avatar-img {
    width: 46px;
    height: 46px;
    box-shadow: 0 8px 22px rgba(65, 113, 237, .18);
}

body.console-app .sidebar-avatar {
    background: linear-gradient(135deg, #4d9fff, #7a68e8);
}

body.console-app .sidebar-profile-info h4 { color: var(--console-text); font-size: 14px; }
body.console-app .sidebar-profile-info span { color: var(--console-muted); }
body.console-app .sidebar-profile-info .sidebar-user-id {
    margin-top: 3px;
    color: var(--console-dim);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 10px;
}

.sidebar-wallet-card {
    margin-bottom: 20px;
    padding: 14px 15px 13px;
    border: 1px solid rgba(60, 205, 159, .15);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(18, 54, 65, .48), rgba(11, 27, 49, .74));
}

.sidebar-wallet-head,
.sidebar-wallet-meta { display: flex; align-items: center; justify-content: space-between; }
.sidebar-wallet-head span,
.sidebar-wallet-meta span { color: var(--console-muted); font-size: 11px; }
.sidebar-wallet-head button {
    padding: 5px 10px;
    border: 1px solid rgba(52, 214, 160, .30);
    border-radius: 7px;
    color: var(--console-green);
    background: rgba(52, 214, 160, .08);
    cursor: pointer;
}
.sidebar-wallet-card > strong {
    display: block;
    margin: 8px 0 12px;
    color: var(--console-green);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 23px;
    letter-spacing: -.04em;
}
.sidebar-wallet-meta { padding-top: 10px; border-top: 1px solid var(--console-border); }
.sidebar-wallet-meta b { color: var(--console-text); font-size: 11px; font-weight: 600; }

body.console-app .sidebar-nav { gap: 4px; }
.sidebar-nav-label {
    padding: 0 12px 8px;
    color: var(--console-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

body.console-app .sidebar-nav-item {
    min-height: 43px;
    margin: 0;
    padding: 10px 13px;
    color: var(--console-muted);
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 13px;
    transition: .2s ease;
}

body.console-app .sidebar-nav-item:hover {
    color: var(--console-text);
    border-color: rgba(88, 164, 247, .09);
    background: rgba(77, 168, 255, .06);
}

body.console-app .sidebar-nav-item.active {
    color: #a8d6ff;
    border-color: rgba(77, 168, 255, .16);
    background: linear-gradient(90deg, rgba(77, 168, 255, .15), rgba(88, 99, 223, .07));
    box-shadow: inset 3px 0 0 var(--console-accent);
}

body.console-app .sidebar-nav-item svg { opacity: .78; }
body.console-app .sidebar-nav-item.active svg { color: var(--console-accent); opacity: 1; }

body.console-app .sidebar-logout {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--console-border);
}

body.console-app .console-content {
    width: 100%;
    min-width: 0;
    max-width: 1680px;
    padding: 46px clamp(28px, 4vw, 68px) 72px;
}

body.console-app .console-section.active { animation: console-section-in .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes console-section-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

body.console-app .console-page-header {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--console-border);
}

body.console-app .console-page-header h1 {
    position: relative;
    margin: 0 0 7px;
    padding-left: 15px;
    color: var(--console-text);
    font-size: clamp(24px, 2vw, 31px);
    letter-spacing: -.04em;
}

body.console-app .console-page-header h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 4px;
    height: 23px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--console-accent), var(--console-violet));
    box-shadow: 0 0 16px rgba(77, 168, 255, .38);
}

body.console-app .console-page-header p { color: var(--console-muted); font-size: 13px; }
body.console-app .usage-page-heading { display: flex; align-items: center; justify-content: space-between; }

.console-page-kicker {
    display: block;
    margin: 0 0 8px 15px;
    color: var(--console-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}
.creations-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.creations-start-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    color: #dff2ff;
    border: 1px solid rgba(77, 168, 255, .28);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(39, 141, 233, .24), rgba(111, 99, 232, .20));
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: .2s ease;
}
.creations-start-btn:hover { transform: translateY(-2px); border-color: rgba(77, 168, 255, .46); box-shadow: 0 10px 26px rgba(27, 110, 207, .16); }
.creations-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.creations-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--console-border); border-radius: 11px; background: rgba(4, 13, 26, .36); }
.creations-tab {
    min-width: 62px;
    min-height: 32px;
    padding: 6px 14px;
    color: var(--console-muted);
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 12px;
    cursor: pointer;
    transition: .18s ease;
}
.creations-tab:hover { color: var(--console-text); background: rgba(77, 168, 255, .06); }
.creations-tab.active { color: #dff2ff; background: linear-gradient(135deg, rgba(77, 168, 255, .22), rgba(120, 102, 232, .18)); box-shadow: inset 0 0 0 1px rgba(77, 168, 255, .18); }
.creations-count { color: var(--console-dim); font-size: 11px; }
.creations-retention-notice {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 10px 15px;
    color: #9db4ce;
    border: 1px solid rgba(248, 189, 89, .13);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(248, 189, 89, .075), rgba(77, 168, 255, .035));
    font-size: 12px;
}
.creations-notice-badge { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--console-amber); font-weight: 700; }
.creations-retention-copy { min-width: 0; flex: 1 1 auto; }
.creations-storage-usage { width: min(320px, 34vw); flex: 0 0 auto; margin-left: auto; }
.creations-storage-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.creations-storage-label span { color: var(--console-muted); font-size: 10px; }
.creations-storage-label strong { color: var(--console-text); font-size: 10px; font-variant-numeric: tabular-nums; }
.creations-storage-track { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.075); }
.creations-storage-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4fd5ff, #756bff); transition: width .35s ease; }
.creations-storage-usage.is-near-limit .creations-storage-track > span { background: linear-gradient(90deg, #ffb454, #ff6b75); }
.creations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.creation-record-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--console-border);
    border-radius: 15px;
    background: linear-gradient(155deg, rgba(13, 31, 55, .86), rgba(8, 21, 40, .72));
    box-shadow: 0 16px 44px rgba(0, 8, 24, .18);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.creation-record-card:hover { transform: translateY(-3px); border-color: var(--console-border-strong); box-shadow: 0 20px 52px rgba(0, 8, 24, .28); }
.creation-record-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(77,168,255,.15), transparent 56%), #071425; }
.creation-record-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.creation-record-card:hover .creation-record-media img { transform: scale(1.025); }
.creation-record-media.is-unavailable::after { content: "文件暂不可用"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--console-muted); font-size: 12px; }
.creation-media-fallback { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #6685a8; font-size: 11px; }
.creation-type-badge { position: absolute; left: 10px; top: 10px; padding: 5px 8px; color: #dff2ff; border: 1px solid rgba(144,202,255,.22); border-radius: 7px; background: rgba(4,15,29,.72); backdrop-filter: blur(10px); font-size: 10px; font-weight: 700; }
.creation-play-mark { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(8,20,38,.7); box-shadow: 0 10px 30px rgba(0,0,0,.24); transform: translate(-50%,-50%); backdrop-filter: blur(8px); }
.creation-record-body { padding: 13px 14px 14px; }
.creation-record-body p { min-height: 40px; display: -webkit-box; margin: 0 0 11px; overflow: hidden; color: var(--console-text); font-size: 12px; line-height: 1.65; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.creation-record-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--console-dim); font-size: 10px; }
.creation-record-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creation-record-meta time { flex: 0 0 auto; }
.creations-empty { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 20px; text-align: center; }
.creations-empty[hidden] { display: none; }
.creations-empty-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 17px; color: var(--console-accent); border: 1px solid var(--console-border-strong); border-radius: 17px; background: var(--console-accent-soft); box-shadow: 0 0 38px rgba(77,168,255,.09); }
.creations-empty strong { color: var(--console-text); font-size: 15px; }
.creations-empty p { margin: 8px 0 18px; color: var(--console-muted); font-size: 12px; }
.creations-empty a { padding: 8px 14px; color: #dff2ff; border: 1px solid var(--console-border-strong); border-radius: 9px; background: var(--console-accent-soft); text-decoration: none; font-size: 12px; }

body.console-app .panel,
body.console-app .usage-summary-card,
body.console-app .wallet-card,
body.console-app .shortcut-link {
    border: 1px solid var(--console-border);
    background: linear-gradient(145deg, rgba(14, 32, 57, .82), rgba(9, 23, 43, .70));
    box-shadow: var(--console-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.console-app .panel { border-radius: 17px; padding: 25px 28px; }
body.console-app .panel:hover { border-color: var(--console-border-strong); }
body.console-app .panel-label { color: var(--console-muted); }
body.console-app .info-row { border-color: var(--console-border); }
body.console-app .info-row-label { color: var(--console-muted); }
body.console-app .info-row-value { color: var(--console-text); }
body.console-app .form-group label { color: var(--console-muted); }
body.console-app .form-input {
    color: var(--console-text);
    border-color: var(--console-border);
    background: rgba(6, 18, 35, .52);
}
body.console-app .form-input:focus { border-color: var(--console-accent); box-shadow: 0 0 0 3px rgba(77, 168, 255, .08); }
body.console-app .form-input::placeholder { color: var(--console-dim); }
body.console-app .btn-primary { color: #fff; background: linear-gradient(135deg, #278de9, #6f63e8); }
body.console-app .btn-primary:hover { background: linear-gradient(135deg, #43a5fb, #8275ef); box-shadow: 0 7px 20px rgba(55, 139, 235, .22); }
body.console-app .btn-ghost { color: var(--console-muted); border-color: var(--console-border); background: rgba(255,255,255,.025); }
body.console-app .btn-ghost:hover { color: var(--console-text); border-color: var(--console-border-strong); background: var(--console-accent-soft); }

/* Security surfaces use theme tokens instead of dark-only white text. */
body.console-app .security-status-text {
    color: var(--console-muted);
    font-size: .82rem;
}
body.console-app .security-danger-panel { border-color: rgba(251, 113, 133, .28); }
body.console-app .security-danger-heading,
body.console-app .security-danger-text { color: var(--console-red); }
body.console-app .security-danger-text { font-size: .82rem; }
body.console-app .security-danger-button {
    color: var(--console-red);
    border: 1px solid rgba(251, 113, 133, .28);
    background: rgba(251, 113, 133, .10);
}
body.console-app .security-danger-button:hover {
    color: #ffdce2;
    border-color: rgba(251, 113, 133, .46);
    background: rgba(251, 113, 133, .17);
}
body.console-app .account-delete-warning {
    margin-bottom: 14px;
    padding: 12px 14px;
    color: var(--console-muted);
    border: 1px solid rgba(251, 113, 133, .20);
    border-radius: 8px;
    background: rgba(251, 113, 133, .07);
    font-size: .85rem;
    line-height: 1.6;
}
body.console-app .account-delete-warning strong { color: var(--console-red); }
body.console-app .security-danger-primary { color: #fff; background: #e4556a; }
body.console-app .security-danger-primary:hover { background: #ef6479; }
body.console-app .confirm-message {
    margin: 0 0 20px;
    color: var(--console-muted);
    font-size: .9rem;
    line-height: 1.6;
}

body.console-app .sessions-empty { color: var(--console-muted); }
body.console-app .session-item {
    border-color: var(--console-border);
    background: rgba(77, 168, 255, .025);
}
body.console-app .session-item:hover {
    border-color: var(--console-border-strong);
    background: var(--console-accent-soft);
}
body.console-app .session-info-line { color: var(--console-text); }
body.console-app .session-meta { color: var(--console-muted); }
body.console-app .session-icon {
    color: var(--console-accent);
    background: var(--console-accent-soft);
}
body.console-app .session-item.is-current {
    border-color: rgba(52, 214, 160, .34);
    background: rgba(52, 214, 160, .065);
}
body.console-app .session-tag {
    color: var(--console-green);
    border-color: rgba(52, 214, 160, .28);
    background: rgba(52, 214, 160, .10);
}
body.console-app .session-kick-btn {
    color: var(--console-red);
    border-color: rgba(251, 113, 133, .26);
    background: rgba(251, 113, 133, .08);
}

body.console-app .usage-summary-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 17px;
}

body.console-app .usage-summary-card {
    position: relative;
    min-height: 98px;
    padding: 18px 20px;
    overflow: hidden;
    border-radius: 15px;
}

body.console-app .usage-summary-card::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -45px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: currentColor;
    filter: blur(38px);
    opacity: .09;
}

body.console-app .usage-summary-card:hover { transform: translateY(-2px); border-color: var(--console-border-strong); }
body.console-app .usage-summary-card.accent-emerald { color: var(--console-green); }
body.console-app .usage-summary-card.accent-indigo { color: var(--console-accent); }
body.console-app .usage-summary-card.accent-amber { color: var(--console-amber); }
body.console-app .usage-summary-card.accent-violet { color: var(--console-violet); }
body.console-app .usage-summary-label { color: var(--console-muted); }
body.console-app .usage-summary-value {
    color: inherit;
    background: none;
    -webkit-text-fill-color: currentColor;
    font-size: clamp(22px, 2.1vw, 30px);
}
body.console-app .usage-history-panel { padding: 0; overflow: hidden; }
.usage-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 22px 17px;
}
.usage-history-head h2 { margin: 0 0 5px; color: var(--console-text); font-size: 17px; }
.usage-history-head p { margin: 0; color: var(--console-muted); font-size: 12px; }
.usage-history-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}
.usage-history-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    color: var(--console-green);
    font-size: 11px;
    border: 1px solid rgba(52, 214, 160, .18);
    border-radius: 99px;
    background: rgba(52, 214, 160, .07);
}
.usage-history-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

.usage-notice-strip {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 8px 22px;
    color: var(--console-amber);
    font-size: 11px;
    border-top: 1px solid rgba(248, 189, 89, .13);
    border-bottom: 1px solid rgba(248, 189, 89, .13);
    background: rgba(248, 189, 89, .075);
}

.usage-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--console-border);
}

body.console-app .usage-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; }
.usage-toolbar-filters { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
body.console-app .usage-type-bar { padding: 0; border: 0; }
.usage-filter-divider { width: 1px; height: 22px; flex: 0 0 auto; background: var(--console-border); }
body.console-app .usage-filter-chip,
.usage-range-chip {
    min-height: 32px;
    padding: 6px 12px;
    color: var(--console-muted);
    border: 1px solid var(--console-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .018);
    font-size: 11px;
    cursor: pointer;
    transition: .18s ease;
}
body.console-app .usage-filter-chip:hover,
.usage-range-chip:hover { color: var(--console-text); border-color: var(--console-border-strong); }
body.console-app .usage-filter-chip.active,
.usage-range-chip.active { color: #b9ddff; border-color: rgba(77, 168, 255, .32); background: var(--console-accent-soft); }

.usage-search {
    width: min(240px, 26vw);
    flex: 0 0 auto;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    color: var(--console-dim);
    border: 1px solid var(--console-border);
    border-radius: 9px;
    background: rgba(4, 15, 30, .46);
}
.usage-search:focus-within { color: var(--console-accent); border-color: var(--console-border-strong); }
.usage-search input { width: 100%; min-width: 0; color: var(--console-text); border: 0; outline: 0; background: transparent; font-size: 11px; }
.usage-search input::placeholder { color: var(--console-dim); }

body.console-app .usage-table-shell { width: 100%; overflow-x: auto; }
body.console-app .usage-table { min-width: 920px; }
body.console-app .usage-table th {
    padding: 13px 18px;
    color: #9fb2ca;
    border-color: var(--console-border);
    background: #0b192d;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}
body.console-app .usage-table td {
    padding: 15px 18px;
    color: #c2d1e2;
    border-color: rgba(132, 171, 218, .13);
    background: rgba(8, 21, 39, .34);
}
body.console-app .usage-table tbody tr:nth-child(even) td { background: rgba(12, 29, 51, .48); }
body.console-app .usage-table tbody tr:hover td { background: rgba(32, 67, 105, .42); }
body.console-app .usage-model-tag {
    color: #f4f8fd;
    background: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 650;
}
body.console-app .usage-model-cell small { color: #8fa4bd; font-size: 11px; }
body.console-app .usage-time-cell,
body.console-app .usage-duration-cell { color: #afc0d4 !important; font-size: 12px !important; }
body.console-app .usage-cost-cell {
    color: #38e0ac;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}
body.console-app .usage-money-heading { text-align: left; }
body.console-app .usage-cost-cell.zero,
body.console-app .usage-muted { color: #6f849e; }
body.console-app .usage-error-cell {
    color: #ff8c9d !important;
    font-size: 12px !important;
    line-height: 1.45;
}
body.console-app .usage-pagination { margin: 0; padding: 15px; border-top: 1px solid var(--console-border); }
body.console-app .usage-page-info { color: var(--console-muted); }
body.console-app .ledger-empty { color: var(--console-muted); padding: 54px 20px; }
body.console-app .ledger-history-panel { padding: 0; overflow: hidden; }
body.console-app .ledger-summary-cards { margin-bottom: 18px; }
body.console-app .ledger-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--console-muted);
    font-size: 12px;
    white-space: nowrap;
}
body.console-app .ledger-filter-select {
    min-width: 132px;
    height: 34px;
    padding: 0 28px 0 10px;
    color: var(--console-text);
    border: 1px solid var(--console-border);
    border-radius: 9px;
    outline: 0;
    background: var(--console-surface-soft);
    font-size: 12px;
}
body.console-app .ledger-filter-select:focus { border-color: var(--console-border-strong); }
body.console-app .ledger-table { min-width: 760px; }
body.console-app .ledger-table th {
    padding: 13px 18px;
    color: #9fb2ca;
    border-color: var(--console-border);
    background: #0b192d;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}
body.console-app .ledger-table td {
    padding: 14px 18px;
    color: #c2d1e2;
    border-color: rgba(132, 171, 218, .13);
    background: rgba(8, 21, 39, .34);
    font-size: 12px;
}
body.console-app .ledger-table tbody tr:nth-child(even) td { background: rgba(12, 29, 51, .48); }
body.console-app .ledger-table tbody tr:hover td { background: rgba(32, 67, 105, .42); }
body.console-app .ledger-remark { max-width: 420px; overflow: hidden; color: var(--console-text); text-overflow: ellipsis; white-space: nowrap; }
body.console-app .ledger-balance { color: var(--console-text); text-align: right; font-variant-numeric: tabular-nums; }
body.console-app .ledger-amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
body.console-app .ledger-amount.positive { color: var(--console-green); }
body.console-app .ledger-amount.negative { color: var(--console-red); }

body.console-app .shortcut-link { color: var(--console-text); }
body.console-app .shortcut-text h4 { color: var(--console-text); }
body.console-app .shortcut-text p { color: var(--console-muted); }
body.console-app .shortcut-icon { color: var(--console-accent); border-color: var(--console-border); background: var(--console-accent-soft); }

/* Light mode: purple-tinted neutrals, preserving status colors. */
body.console-app.theme-light {
    color-scheme: light;
    --console-bg: #f7f5fc;
    --console-sidebar: rgba(251, 250, 254, .96);
    --console-surface: rgba(255, 255, 255, .88);
    --console-surface-strong: #fff;
    --console-surface-soft: rgba(244, 240, 252, .78);
    --console-border: rgba(91, 66, 138, .13);
    --console-border-strong: rgba(115, 72, 190, .28);
    --console-text: #302640;
    --console-muted: #756b85;
    --console-dim: #9b92aa;
    --console-accent: #8256d8;
    --console-accent-soft: rgba(130, 86, 216, .09);
    --console-violet: #a057c9;
    --console-green: #159773;
    --console-amber: #b77812;
    --console-red: #d34f65;
    --console-shadow: 0 18px 50px rgba(65, 45, 94, .07);
    background:
        radial-gradient(circle at 92% -5%, rgba(142, 90, 218, .10), transparent 33%),
        linear-gradient(145deg, #faf9fd, #f5f2fa 58%, #f8f7fc);
}

body.console-app.theme-light .sidebar-profile,
body.console-app.theme-light .sidebar-wallet-card,
body.console-app.theme-light .panel,
body.console-app.theme-light .usage-summary-card,
body.console-app.theme-light .wallet-card,
body.console-app.theme-light .shortcut-link {
    background: rgba(255, 255, 255, .83);
}
body.console-app.theme-light .creations-tabs { background: rgba(255,255,255,.64); }
body.console-app.theme-light .creation-record-card { background: rgba(255,255,255,.86); }
body.console-app.theme-light .creations-retention-notice { color: var(--console-muted); }
body.console-app.theme-light .creations-storage-track { background: rgba(80, 61, 116, .1); }
body.console-app.theme-light .sidebar-wallet-card { background: linear-gradient(145deg, rgba(238, 252, 247, .88), rgba(255,255,255,.9)); }
body.console-app.theme-light .form-input,
body.console-app.theme-light .usage-search { background: rgba(255, 255, 255, .72); }
body.console-app.theme-light .usage-table th { color: #665d75; background: #f4f1f8; }
body.console-app.theme-light .usage-table td { color: #4d455a; border-color: rgba(91, 66, 138, .12); background: #fff; }
body.console-app.theme-light .usage-table tbody tr:nth-child(even) td { background: #fbf9fd; }
body.console-app.theme-light .usage-table tbody tr:hover td { background: #f3eef9; }
body.console-app.theme-light .usage-model-tag { color: #2e2639; }
body.console-app.theme-light .usage-model-cell small { color: #746a82; }
body.console-app.theme-light .usage-time-cell,
body.console-app.theme-light .usage-duration-cell { color: #655c73 !important; }
body.console-app.theme-light .usage-cost-cell { color: #078561; }
body.console-app.theme-light .usage-cost-cell.zero,
body.console-app.theme-light .usage-muted { color: #9a91a6; }
body.console-app.theme-light .usage-error-cell { color: #cf3f58 !important; }
body.console-app.theme-light .ledger-table th { color: #665d75; background: #f4f1f8; }
body.console-app.theme-light .ledger-table td { color: #4d455a; border-color: rgba(91, 66, 138, .12); background: #fff; }
body.console-app.theme-light .ledger-table tbody tr:nth-child(even) td { background: #fbf9fd; }
body.console-app.theme-light .ledger-table tbody tr:hover td { background: #f3eef9; }
body.console-app.theme-light .ledger-remark,
body.console-app.theme-light .ledger-balance { color: #3f374d; }
body.console-app.theme-light .ledger-filter-select { background: rgba(255,255,255,.78); }
body.console-app.theme-light .session-item { background: rgba(255, 255, 255, .78); }
body.console-app.theme-light .session-item:hover { background: rgba(130, 86, 216, .06); }
body.console-app.theme-light .session-item.is-current { background: rgba(21, 151, 115, .07); }
body.console-app.theme-light .session-item.is-current .session-icon { color: #118464; background: rgba(21, 151, 115, .12); }
body.console-app.theme-light .session-kick-btn { color: #c53d55; border-color: rgba(197, 61, 85, .25); background: rgba(197, 61, 85, .07); }
body.console-app.theme-light .session-kick-btn:hover { color: #a92f46; border-color: rgba(197, 61, 85, .42); background: rgba(197, 61, 85, .12); }
body.console-app.theme-light .security-danger-button:hover { color: #a92f46; }
body.console-app.theme-light .usage-filter-chip.active,
body.console-app.theme-light .usage-range-chip.active { color: #5d3b9f; border-color: rgba(130, 86, 216, .28); }

@media (max-width: 1280px) {
    .usage-toolbar { align-items: stretch; flex-direction: column; }
    .usage-search { width: 100%; }
}

@media (max-width: 1100px) {
    body.console-app .console-layout { grid-template-columns: 252px minmax(0, 1fr); }
    body.console-app .console-sidebar { width: 252px; }
    body.console-app .usage-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.console-app .console-content { padding-inline: 26px; }
    .usage-history-head { align-items: flex-start; }
    .usage-history-meta { justify-content: flex-start; }
}

@media (max-width: 760px) {
    body.console-app .console-layout { display: block; min-height: 100vh; }
    body.console-app .console-sidebar {
        position: relative;
        width: 100%;
        min-height: 0;
        max-height: none;
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid var(--console-border);
        display: block;
    }
    .console-sidebar-head { margin-bottom: 10px; }
    body.console-app .sidebar-profile,
    body.console-app .sidebar-wallet-card,
    body.console-app .sidebar-nav { display: flex; flex-direction: row; overflow-x: auto; padding-bottom: 2px; }
    .sidebar-nav-label { display: none; }
    body.console-app .sidebar-nav-item { width: auto; min-width: max-content; min-height: 38px; padding: 8px 11px; }
    body.console-app .sidebar-nav-item.active { box-shadow: inset 0 -2px 0 var(--console-accent); }
    body.console-app .sidebar-logout { display: none; }
    body.console-app .console-content { padding: 24px 14px 50px; }
    body.console-app .console-page-header { margin-bottom: 18px; }
    body.console-app .console-page-header h1 { font-size: 23px; }
    body.console-app .usage-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.console-app .panel { padding: 18px; }
    .usage-toolbar { align-items: stretch; flex-direction: column; }
    .usage-search { width: 100%; }
    .usage-filter-divider { display: none; }
    body.console-app .usage-page-heading { align-items: flex-start; }
    .creations-page-heading { align-items: flex-start; }
    .creations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 470px) {
    body.console-app .usage-summary-cards { grid-template-columns: 1fr; }
    body.console-app .usage-summary-card { min-height: 108px; }
    .usage-history-head { align-items: flex-start; }
    .usage-history-meta { width: 100%; justify-content: flex-start; }
    .usage-history-badge { display: none; }
    body.console-app .info-row { align-items: flex-start; gap: 14px; }
    body.console-app .info-row-value { max-width: 68%; flex-wrap: wrap; justify-content: flex-end; }
    .creations-page-heading { align-items: stretch; flex-direction: column; }
    .creations-start-btn { align-self: flex-start; }
    .creations-toolbar { align-items: flex-start; flex-direction: column; }
    .creations-retention-notice { align-items: flex-start; flex-wrap: wrap; }
    .creations-storage-usage { width: 100%; margin: 5px 0 0; }
    .creations-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    body.console-app *, body.console-app *::before, body.console-app *::after { animation: none !important; transition-duration: .01ms !important; }
}