/* Presentation layer shared by the workbench and account console. */
:root {
    --ui-bg: #fafafa;
    --ui-surface: #ffffff;
    --ui-raised: #f4f4f5;
    --ui-text: #252629;
    --ui-muted: #62656d;
    --ui-subtle: #767981;
    --ui-line: #e6e6e9;
    --ui-hover: #f0f0f2;
    --ui-accent: #c62633;
    --ui-accent-fill: #df303a;
    --ui-accent-hover: #bd2330;
    --ui-accent-soft: #f9e9eb;
    --ui-accent-ring: rgb(223 48 58 / .14);
    --ui-nav: #111214;
    --admin-bg: var(--ui-bg);
    --admin-surface: var(--ui-surface);
    --admin-surface-raised: var(--ui-raised);
    --admin-input: var(--ui-surface);
    --admin-border: var(--ui-line);
    --admin-border-strong: #c8c9ce;
    --admin-text: var(--ui-text);
    --admin-text-muted: var(--ui-muted);
    --admin-text-subtle: var(--ui-subtle);
    --admin-accent: var(--ui-accent);
    --admin-muted: var(--ui-muted);
    --admin-blue: #0369a1;
    --admin-green: #15803d;
    --admin-red: #b91c1c;
    --admin-yellow: #a16207;
    color-scheme: light;
}
:root.dark {
    --ui-bg: #17181a;
    --ui-surface: #202123;
    --ui-raised: #26272a;
    --ui-text: #eeeeef;
    --ui-muted: #a2a4ab;
    --ui-subtle: #92959d;
    --ui-line: #323337;
    --ui-hover: #2b2c2f;
    --ui-accent: #ff7e88;
    --ui-accent-soft: #352226;
    --admin-border-strong: #505158;
    --admin-blue: #7dd3fc;
    --admin-green: #86efac;
    --admin-red: #fca5a5;
    --admin-yellow: #fcd34d;
    color-scheme: dark;
}
body {
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
    font-size: 15px;
    line-height: 1.6;
}
body, button, input, select, textarea, h1, h2, h3, h4 { letter-spacing: 0; }
.bot-message-group .msg-content { background-color: var(--ui-surface); border-color: var(--ui-line); }
.ctx-usage-pop, .dark .ctx-usage-pop {
    background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-line); border-radius: 8px;
}
.ctx-usage-pop :is(.ctx-usage-est, .ctx-usage-label, .ctx-usage-foot, .ctx-usage-empty) { color: var(--ui-muted); }
.ctx-usage-pop .ctx-usage-val { color: var(--ui-text); }
.ctx-usage-pop :is(.ctx-usage-foot, .ctx-usage-actions) { border-color: var(--ui-line); }
.ctx-usage-pop .ctx-act-btn {
    background: var(--ui-raised); color: var(--ui-text); border-color: var(--ui-line); border-radius: 6px;
}
.ctx-usage-pop .ctx-act-btn:hover { background: var(--ui-hover); color: var(--ui-text); border-color: var(--ui-subtle); }
.ctx-usage-pop .ctx-act-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ctx-usage-pop .ctx-usage-loading { background: var(--ui-surface); color: var(--ui-text); border-radius: 8px; }
.ctx-usage-pop .ctx-spinner { border-color: var(--ui-line); border-top-color: var(--ui-accent); }
.composer-chip:disabled { cursor: default; opacity: .7; }
#reasoning-selector-menu { position: fixed; bottom: auto; max-width: calc(100vw - 24px); border-radius: 6px; }
.chat-timeline-rail {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%); z-index: 12;
    width: 24px; max-height: min(320px, 48%); overflow-y: auto; scrollbar-width: none;
    padding: 4px 0; overscroll-behavior: contain;
}
.chat-timeline-rail::-webkit-scrollbar { display: none; }
.chat-timeline-tick {
    display: flex; align-items: center; justify-content: center; width: 24px; height: 12px;
    padding: 0; border: 0; background: transparent; cursor: pointer;
}
.chat-timeline-tick::after {
    content: ""; width: 6px; height: 2px; border-radius: 1px; background: var(--ui-subtle); opacity: .45;
}
.chat-timeline-tick:is(:hover, :focus-visible, .is-active)::after { width: 12px; opacity: 1; background: var(--ui-muted); }
.chat-timeline-tick:focus-visible { outline: 1px solid var(--ui-accent); outline-offset: -1px; }
.chat-timeline-preview {
    position: fixed; z-index: 65; width: 280px; max-width: calc(100vw - 48px);
    padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 6px;
    background: var(--ui-surface); color: var(--ui-text); font-size: 13px; line-height: 1.6;
    overflow-wrap: anywhere; max-height: 180px; overflow: hidden; pointer-events: none;
    box-shadow: 0 6px 24px rgb(0 0 0 / .12);
}
.chat-timeline-rail[hidden], .chat-timeline-preview[hidden] { display: none; }
@media (min-width: 769px) { #timeline-toggle-btn { display: none; } }
@media (max-width: 768px) { .chat-timeline-rail, .chat-timeline-preview { display: none; } }
#main-content, #content-area, #view-chat { background: var(--ui-bg); }
#main-content > header { min-height: 64px; background: var(--ui-surface); border-color: var(--ui-line); }
#sidebar { width: 194px; background: var(--ui-nav); }
.workbench-topbar {
    --topbar-height: 44px;
    display: flex; align-items: center; gap: 16px; height: var(--topbar-height);
    padding: 0 22px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line);
}
body:has(> .workbench-topbar) { --workbench-topbar-height: 44px; }
#app.h-screen, #main-content.h-screen, #session-panel { height: calc(100dvh - var(--workbench-topbar-height, 0px)); }
.workbench-announcement-slot { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.workbench-announcement-slot .system-announcement { min-width: 0; }
.announcement-history { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 36px; flex-shrink: 0; color: var(--ui-muted); }
.announcement-history[hidden] { display: none; }
.workbench-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0;
    min-height: 36px; padding: 0 8px; border: 0; border-radius: 5px;
    color: var(--ui-muted); background: transparent; font-size: 13px; cursor: pointer;
}
.workbench-theme-toggle:hover { background: var(--ui-hover); color: var(--ui-text); }
.workbench-theme-toggle:focus-visible { outline: 2px solid var(--ui-accent); }
.theme-light-label, .dark .theme-dark-label { display: none; }
.dark .theme-light-label { display: inline; }
#sidebar .sidebar-brand { height: 89px; gap: 10px; padding: 0 23px; border-bottom: 0; }
#sidebar-home { width: 38px; height: 38px; border-radius: 50%; object-fit: contain; }
.sidebar-brand .sidebar-brand-text { flex-direction: row; align-items: baseline; gap: 3px; }
.sidebar-brand-name { font-size: 22px; line-height: 1.3; font-weight: 700; }
.sidebar-brand-dot { width: 5px; height: 5px; background: var(--ui-accent-fill); border-radius: 50%; flex-shrink: 0; }
@media (min-width: 1024px) {
    html.sidebar-collapsed #sidebar .sidebar-brand { padding-inline: 13px; }
    html.sidebar-collapsed #sidebar .sidebar-brand-text { display: none; }
}
@media (max-width: 1023px) {
    #sidebar { top: var(--workbench-topbar-height); }
}
@media (max-width: 768px) {
    #session-panel, #session-panel-overlay { top: var(--workbench-topbar-height); }
}
#sidebar-nav { padding: 12px; }
#sidebar-nav .menu-group { margin-top: 0; margin-bottom: 19px; }
#sidebar-nav .menu-group-head { gap: 7px; padding: 8px 11px; margin-bottom: 7px; color: #9499a4; font-size: 12px; line-height: 18px; }
#sidebar-nav .menu-group-items { padding-left: 0; }
#sidebar-nav .sidebar-item {
    position: relative; gap: 12px; height: 44px; min-height: 44px; margin-top: 3px;
    padding: 0 17px; border-radius: 5px; font-size: 14px; line-height: 22px; color: #aeb1b9;
}
#sidebar-nav .sidebar-item.active { color: #f6eff0; background: #2b2227; box-shadow: none; }
#sidebar-nav .sidebar-item.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: #ec424e; }
#sidebar-nav .sidebar-item.active .item-icon { color: #ef5964; }
#sidebar-nav .sidebar-item .item-icon { width: 17px; height: 17px; flex-shrink: 0; }
#sidebar-nav .sidebar-item:hover { background: #242528; color: #f3f3f5; }
@media (min-width: 1024px) {
    html.sidebar-collapsed #sidebar-nav .sidebar-item { padding: 0; gap: 0; }
    html.sidebar-collapsed #sidebar-nav .menu-group { margin-bottom: 16px; }
}
.menu-group-head { font-size: 12px; letter-spacing: 0; }
.session-panel { background: var(--ui-raised); border-color: var(--ui-line); }
.dark .session-panel { background: #1c1d1f; border-color: var(--ui-line); }
#session-panel { width: 236px; }
.session-panel-header, .dark .session-panel-header { height: 69px; padding-inline: 19px; border-bottom: 0; }
.session-panel-title, .dark .session-panel-title { color: var(--ui-text); font-size: 15px; }
.session-panel-close { color: var(--ui-muted); }
.session-panel-new-wrap .session-panel-new, .dark .session-panel-new {
    width: calc(100% - 34px); height: 42px; margin: 0 17px; padding: 0 12px;
    border: 0; border-radius: 5px; background: var(--ui-accent-fill); color: #fff; font-size: 14px;
}
.session-panel-new:hover, .dark .session-panel-new:hover { background: var(--ui-accent-hover); color: #fff; }
.session-panel-new:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.new-chat-menu, .dark .new-chat-menu { left: 17px; right: 17px; top: calc(100% + 6px); border-radius: 8px; background: var(--ui-surface); border-color: var(--ui-line); }
.session-list { padding: 14px 10px; }
.session-group-label, .dark .session-group-label { color: var(--ui-subtle); font-size: 12px; letter-spacing: 0; }
.session-group-project, .dark .session-group-project {
    min-height: 38px; gap: 8px; padding: 8px; color: var(--ui-text);
    font-size: 14px; font-weight: 600; line-height: 22px; align-items: center;
}
.session-group-project .session-group-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--ui-text); }
.session-group-project .session-group-caret { width: 10px; height: 10px; flex-shrink: 0; color: var(--ui-subtle); }
.session-group-project .session-group-count { color: var(--ui-subtle); font-size: 12px; }
#session-list .session-item-indent {
    padding-left: 26px; gap: 8px; line-height: 22px;
}
#session-list:has(.session-group-project) .session-icon { width: 16px; height: 16px; }
.session-group-project.drop-target { box-shadow: inset 0 2px 0 var(--ui-accent-fill); }
.session-item, .dark .session-item { min-height: 42px; border-radius: 5px; font-size: 13px; color: var(--ui-muted); }
.session-item:hover, .dark .session-item:hover { background: var(--ui-hover); color: var(--ui-text); }
.session-item.active, .dark .session-item.active { background: var(--ui-surface); }
.session-item.active, .dark .session-item.active { color: var(--ui-text); }
.session-icon, .dark .session-icon { color: var(--ui-subtle); font-size: 14px; }
.session-item.active .session-icon { color: var(--ui-accent); }
#session-list .session-item .session-icon {
    width: 16px; height: 16px; background: transparent; mask: none; -webkit-mask: none;
    transform: none;
}
#session-list .session-icon::after {
    content: ""; display: block; width: 5px; height: 5px; margin: 5.5px auto;
    border-radius: 50%; background: var(--ui-accent-fill);
}
.system-announcement {
    display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0;
    min-height: 36px; padding: 0; border: 0; border-radius: 5px;
    background: transparent; color: var(--ui-muted); text-align: left; font-size: 13px; cursor: pointer;
}
.system-announcement[hidden] { display: none; }
.system-announcement:hover { background: var(--ui-hover); }
.system-announcement i { color: var(--ui-accent); }
.announcement-label { flex-shrink: 0; color: var(--ui-text); font-size: 13px; }
[data-announcement-title] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-announcement:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.chat-main #welcome-screen > img { width: 56px; height: 56px; margin-bottom: 18px; object-fit: contain; border-radius: 8px; }
.chat-main #welcome-screen h1, .chat-main #welcome-screen h2 { color: var(--ui-text); font-size: 28px; line-height: 1.4; font-weight: 600; }
.chat-main #welcome-screen p { margin-top: 8px; font-size: 15px; color: var(--ui-muted); }
.quick-start h2 { font-size: 13px; }
.quick-start-button { font-size: 13px; }
.chat-composer-dock .composer-card, .dark .chat-composer-dock .composer-card {
    border: 1px solid var(--ui-line); border-radius: 8px; padding: 16px 14px 10px;
    background: var(--ui-surface); box-shadow: 0 4px 18px rgb(0 0 0 / .035);
}
.composer-card:focus-within, .dark .composer-card:focus-within,
.chat-composer-dock .composer-card.drag-over { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-ring); }
#chat-input { min-height: 72px; font-size: 15px; color: var(--ui-text); }
#chat-input::placeholder { color: var(--ui-subtle); }
.composer-chip { font-size: 12px; }
.composer-send-btn, .dark .composer-send-btn { border-radius: 6px; background: var(--ui-accent-fill); color: #fff; }
.composer-send-btn:hover:not(:disabled) { background: var(--ui-accent-hover); }
.msg-content { font-size: 15px; line-height: 1.8; }
.bot-identity, .dark .bot-identity {
    background: linear-gradient(to bottom, var(--ui-bg) 50%, var(--ui-surface) 50%);
}
.bot-identity .bot-speaker, .dark .bot-identity .bot-speaker { color: var(--ui-muted); }
.composer-menu, .dark .composer-menu { background: var(--ui-surface); border-color: var(--ui-line); }
.composer-menu-item.active, .dark .composer-menu-item.active,
.composer-chip.open, .dark .composer-chip.open { color: var(--ui-accent); background: var(--ui-accent-soft); }
.msg-content a, .dark .msg-content a { color: var(--ui-accent); }
.msg-content blockquote, .dark .msg-content blockquote { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.agent-btn-primary, .art-empty-btn, .doc-action-btn-primary, .dark .doc-action-btn-primary { background: var(--ui-accent-fill); color: #fff; }
.agent-btn-primary:hover, .art-empty-btn:hover { background: var(--ui-accent-hover); }
.agent-detail-tab.active, .dark .agent-detail-tab.active { color: var(--ui-accent); border-color: var(--ui-accent); }
.composer-menu-item.current > i.fa-check, .art-pinned-glyph { color: var(--ui-accent); }
.header-view-btn.is-active i, .dark .header-view-btn.is-active i { color: var(--ui-accent) !important; }
.knowledge-rules-nav > [aria-selected="true"], .dark .knowledge-rules-nav > [aria-selected="true"] { color: var(--ui-accent); background: var(--ui-accent-soft); }
/* Explicit brand states; readiness, payment methods and runtime status stay semantic. */
.cfg-input:focus, .cfg-textarea:focus, .cap-input:focus,
.prompt-modal-input:focus, .ws-sel-input-row input:focus,
.me-group-input:focus, .me-input:focus, .me-icon:hover,
.art-search:focus-within, .dark .art-search:focus-within,
.agent-avatar-upload:hover, .dark .file-card:hover, .file-card:hover,
.file-chip:hover, .dark .file-chip:hover, .ws-empty-action:hover, .dark .ws-empty-action:hover {
    border-color: var(--ui-accent);
}
.cfg-dropdown-item.active, .dark .cfg-dropdown-item.active,
.agent-card.selected, .dark .agent-card.selected,
.ws-sel-item.active, .dark .ws-sel-item.active,
.fp-row.selected, .dark .fp-row.selected,
.workspace-tab.active, .dark .workspace-tab.active,
.skill-file-row.active, .dark .skill-file-row.active,
.ws-file-row.active, .dark .ws-file-row.active,
.mention-item.active, .dark .mention-item.active,
.me-icon-cell.active, .dark .me-icon-cell.active,
.skill-source-opt.active, .dark .skill-source-opt.active,
.team-chat-row.on, .dark .team-chat-row.on,
.cap-action-btn, .dark .cap-action-btn {
    background: var(--ui-accent-soft); color: var(--ui-accent);
}
.cfg-dropdown-item.active::after, .skill-source-opt.active i, .dark .skill-source-opt.active i,
.team-chat-row.on .team-chat-check, .session-item.pinned .session-icon,
.session-item.pinned .session-pin, .ws-empty-action i,
.session-rename:hover, .session-pin:hover, .session-group-action:hover,
.dark .session-group-action:hover, .art-link-btn, .dark .art-link-btn,
.art-add-btn i, .art-meta-link:hover, .dark .art-meta-link:hover,
.breadcrumb-external:hover, .dark .breadcrumb-external:hover,
.me-icon:hover, .dark .me-icon-cell.active, .agent-btn-text.agent-btn-sm,
.composer-menu-item.current > i.fa-check { color: var(--ui-accent); }
.new-chat-item:hover, .dark .new-chat-item:hover,
.composer-icon-btn:hover, .dark .composer-icon-btn:hover,
.dark .composer-menu-item.current:hover,
.session-rename:hover, .dark .session-rename:hover,
.session-pin:hover, .dark .session-pin:hover,
.dark .art-add-btn:hover, .dark .fp-btn:hover:not([disabled]) {
    color: var(--ui-accent); background: var(--ui-accent-soft);
}
.team-chat-count, .ws-sel-create-btn, .composer-menu-badge.owner-badge,
.dark .composer-menu-badge.owner-badge, .loading-indicator-bubble .animate-pulse-dot,
.chat-timeline-row.is-active .chat-timeline-row-dash,
.dark .chat-timeline-row.is-active .chat-timeline-row-dash { background: var(--ui-accent-fill); }
.agent-card, .composer-menu, .art-empty-tile, .file-card { border-radius: 8px; }
.agent-card-name { font-size: 14px; }
.agent-card-badge, .agent-chip { font-size: 11px; }
.agent-detail-tab, .agent-btn { font-size: 13px; }
.skill-source-opt.active, .dark .skill-source-opt.active,
.team-chat-row.on, .dark .team-chat-row.on { border-color: var(--ui-accent); }
.msg-content code:not(pre code), .dark .msg-content code:not(pre code),
.bot-message-group .mention-tag, .dark .bot-message-group .mention-tag { color: var(--ui-accent); background: var(--ui-accent-soft); }
.cap-dropzone.dragover, .dark .cap-dropzone.dragover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.composer-agent-btn:hover { box-shadow: 0 0 0 2px var(--ui-accent); }
#timeline-toggle-btn.is-active { background: var(--ui-accent-soft); }
#content-area :is(.bg-white, .bg-slate-50, .bg-gray-50) { background-color: var(--ui-surface); }
#content-area :is(.text-slate-800, .text-slate-900, .text-gray-900) { color: var(--ui-text); }
#content-area :is(.text-slate-500, .text-slate-600, .text-gray-500) { color: var(--ui-muted); }
#content-area :is(.border-slate-200, .border-gray-200) { border-color: var(--ui-line); }
#view-preferences button[type="submit"] { background: var(--ui-accent-fill); }
#view-preferences a[href="/account/security"] { color: var(--ui-accent); }
#view-knowledge .fa-book, #knowledge-dialog-icon { color: var(--ui-accent); }
/* Keep functional status colors separate from branding. */
body[data-page] { font-size: 15px; }
.admin-topbar { min-height: 64px; padding: 10px 24px; background: var(--ui-surface); }
.brand { flex-direction: row; gap: 10px; min-width: 190px; font-size: 19px; text-align: left; }
.brand img { width: 32px; height: 32px; object-fit: contain; border: 0; }
.brand [data-brand-name] { max-width: 220px; }
.admin-page-title { font-size: 14px; }
.admin-account, #session-controls a, td { color: var(--ui-text); }
#session-controls a:hover, #session-controls button:hover { background: var(--ui-hover); }
.admin-sidebar {
    --admin-text: #eeeeef; --admin-text-muted: #b4b5bc; --admin-text-subtle: #93969e;
    --admin-border: #2c2d31; background: var(--ui-nav); padding-top: 24px;
}
.admin-sidebar nav { gap: 24px; }
.admin-nav-label { font-size: 12px; font-weight: 500; padding-bottom: 6px; }
.admin-sidebar a { font-size: 14px; min-height: 40px; border: 0; }
.admin-sidebar a[aria-current="page"] { color: #fff; background: #302024; box-shadow: inset 2px 0 #df303a; }
.admin-sidebar a[aria-current="page"] .admin-nav-dot { background: #ff7e88; box-shadow: none; }
.admin-sidebar-footer { margin-top: 28px; font-size: 12px; }
.admin-workspace { padding-top: 28px; }
body[data-page] h1 { font-size: 24px; font-weight: 600; }
body[data-page] h2 { font-size: 18px; font-weight: 600; }
body[data-page] h3 { font-size: 15px; }
body[data-page] button:hover { background: var(--ui-hover); }
body[data-page] button.primary { background: var(--ui-accent-fill); border-color: var(--ui-accent-fill); color: #fff; font-weight: 600; }
body[data-page] button.primary:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); }
body[data-page] input[type="checkbox"] { accent-color: var(--ui-accent-fill); }
body[data-page] :is(input, select, textarea, button, a):focus-visible { outline-color: var(--ui-accent); }
body[data-page] :is(input, select, textarea):focus { outline-color: var(--ui-accent); }
body[data-page] input, body[data-page] select, body[data-page] textarea { font-size: 15px; }
body[data-page] .tabs button[aria-selected="true"] { border-color: var(--ui-accent); }
body[data-page] #notice.error { color: var(--admin-red); }
body[data-page] #notice.success { color: var(--admin-green); }
body[data-page] th { background: var(--ui-raised); font-size: 12px; }
body[data-page] td { font-size: 13px; }
.admin-eyebrow, .admin-section-note { font-size: 12px; }
.product-card.is-recommended { border-color: var(--ui-accent); }
.product-badge { background: var(--ui-accent-fill); color: #fff; }
/* Account surfaces follow the same neutral palette as the conversation area. */
body[data-page] .account-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; flex: 0 0 40px;
    border-color: transparent; background: transparent; color: var(--ui-muted);
}
body[data-page] .brand img { border-radius: 50%; }
body[data-page] .admin-page-title { padding-left: 18px; border-left: 1px solid var(--ui-line); }
body[data-page] .admin-account { font-size: 14px; }
body[data-page] .admin-workspace { max-width: 1440px; }
body[data-page] .page-heading { margin-bottom: 24px; }
body[data-page] .page-heading h1 { margin-bottom: 8px; }
body[data-page] .admin-eyebrow { color: var(--ui-subtle); font-size: 11px; margin-bottom: 8px; }
body[data-page] .table-wrap { border-color: var(--ui-line); border-radius: 8px; }
body[data-page] th { padding-block: 13px; color: var(--ui-muted); font-size: 13px; }
body[data-page] td { padding-block: 14px; font-size: 14px; }
body[data-page] tbody tr:hover td { background: var(--ui-hover); }
body[data-page] :is(input, select, textarea) { border-color: var(--ui-line); border-radius: 6px; }
body[data-page] :is(.info-badge, .membership-badges .info-badge) {
    border-color: var(--ui-line); border-radius: 4px; background: var(--ui-raised); color: var(--ui-muted);
}
body[data-page] #membership-section .profile {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px;
    padding: 20px 0 24px; border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line);
}
body[data-page] #membership-section .profile > div { min-width: 0; }
body[data-page] #membership-section .profile dd { font-size: 16px; }
body[data-page] #membership-status { margin: 0 0 16px; }
body[data-page] .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; align-items: stretch;
}
body[data-page] .product-card {
    gap: 12px; padding: 28px 24px 24px; border-color: var(--ui-line); background: var(--ui-surface);
    box-shadow: 0 2px 8px rgb(0 0 0 / .025); transition: border-color .15s ease;
}
body[data-page] .product-card:hover { border-color: var(--admin-border-strong); }
body[data-page] .product-card.is-recommended { border-color: var(--ui-accent); }
body[data-page] .product-card.is-current { box-shadow: inset 0 3px var(--ui-accent-fill); }
body[data-page] .product-card h2 { font-size: 19px; padding-right: 44px; margin-bottom: 4px; }
body[data-page] .product-card .product-price {
    font-size: 36px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
body[data-page] .product-card .product-duration { font-size: 13px; color: var(--ui-subtle); }
body[data-page] .product-card .product-credit {
    padding: 14px 0; margin-block: 4px; border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line);
    color: var(--ui-text); font-size: 15px; font-weight: 600;
}
body[data-page] .product-card :is(.product-current, .product-bonus) { color: var(--ui-accent); font-size: 13px; }
body[data-page] .product-badge { top: 16px; right: 16px; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
body[data-page] .product-benefits { display: grid; gap: 12px; margin: 8px 0 16px; padding: 0; list-style: none; }
body[data-page] .product-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.65; }
body[data-page] .product-benefits li i { width: 16px; height: 16px; margin-top: 4px; color: var(--ui-accent); }
body[data-page] .product-benefits li span { min-width: 0; }
body[data-page] .product-card > button { min-height: 44px; white-space: normal; border-radius: 6px; }
body[data-page] .product-purchase:disabled { opacity: .65; background: var(--ui-raised); border-color: var(--ui-line); color: var(--ui-muted); }
body[data-page] #recharge-products .product-card { min-height: 300px; }
@media (min-width: 901px) {
    body[data-page] .admin-sidebar {
        position: sticky; top: 64px; height: calc(100dvh - 64px); overflow-y: auto;
        scrollbar-width: thin; scrollbar-color: #38393e transparent;
    }
}
@media (max-width: 600px) {
    body[data-page] #membership-section .profile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    body[data-page] .product-card { padding: 24px 20px 20px; }
    body[data-page] .admin-page-title { padding-left: 12px; }
}
.notification-list .is-unread h2, #notification-badge:not(:empty) { color: var(--ui-accent); }
#issued-code { color: var(--admin-blue); }
#system-notification-dialog, .dark #system-notification-dialog, body[data-page] #system-notification-dialog {
    --notice-bg: var(--ui-surface); --notice-text: var(--ui-text); --notice-muted: var(--ui-muted);
    --notice-border: var(--ui-line); --notice-accent: var(--ui-accent); font-size: 15px;
}
@media (max-width: 900px) {
    .admin-topbar { padding: 10px 16px; gap: 12px; }
    .brand { min-width: 0; font-size: 18px; }
    .admin-sidebar nav { gap: 20px; }
}
@media (max-width: 640px) {
    #main-content > header { gap: 2px; padding-inline: 8px; }
    #header-account { gap: 2px; font-size: 12px; }
    #header-account-name { max-width: 64px; }
    #header-account-link { font-size: 12px; padding-inline: 6px; }
    body:has(> .workbench-topbar) { --workbench-topbar-height: 42px; }
    .workbench-topbar { --topbar-height: 42px; gap: 8px; padding-inline: 12px; }
    .workbench-theme-toggle { width: 36px; padding: 0; }
    .workbench-theme-toggle .theme-light-label, .workbench-theme-toggle .theme-dark-label { display: none; }
    .chat-main #welcome-screen h1, .chat-main #welcome-screen h2 { font-size: 24px; }
    .chat-main #welcome-screen > img { width: 44px; height: 44px; }
    .chat-main #welcome-screen p { font-size: 14px; }
    .brand { flex-direction: row; font-size: 18px; }
    .brand [data-brand-name] { max-width: 160px; }
    .admin-topbar-actions { gap: 8px; }
    .admin-workspace { padding-inline: 16px; }
}
.account-shortcuts { margin-bottom: 24px; }
.account-shortcuts h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.account-shortcuts .quick-links { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.account-shortcuts .quick-links a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 10px 8px; color: var(--ui-text);
    border: 1px solid var(--ui-line); border-radius: 6px; background: var(--ui-surface);
    font-size: 14px; font-weight: 500; line-height: 20px;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.account-shortcuts .quick-links a i { width: 18px; height: 18px; flex: 0 0 18px; color: var(--ui-muted); }
.account-shortcuts .quick-links a:hover { color: var(--ui-accent); background: var(--ui-accent-soft); border-color: var(--ui-accent); }
.account-shortcuts .quick-links a:hover i { color: var(--ui-accent); }
.account-shortcuts .quick-links a:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
@media (max-width: 1100px) {
    .account-shortcuts .quick-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .account-shortcuts .quick-links a { flex-direction: column; gap: 6px; min-height: 72px; padding: 10px 4px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}