/* theme-components — domain styles; order is declared in index.html. */
/* —— 全局主题、智能体头像与管理端宫卦选位 —— */
.theme-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; border: 0; }
.theme-picker legend { grid-column: 1 / -1; margin-bottom: 6px; color: var(--text); font-size: .8125rem; font-weight: 700; }
.theme-card { position: relative; display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--text); cursor: pointer; }
.theme-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--focus-ring); }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card strong { font-size: .8125rem; }
.theme-card small { color: var(--muted); font-size: .6875rem; }
.theme-swatches { display: grid; grid-template-columns: repeat(3, 1fr); height: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; }
.theme-swatches.paper i:nth-child(1) { background: #f5f0e1; }
.theme-swatches.paper i:nth-child(2) { background: #b8860b; }
.theme-swatches.paper i:nth-child(3) { background: #1a110b; }
.theme-swatches.ink i:nth-child(1) { background: #12130f; }
.theme-swatches.ink i:nth-child(2) { background: #d1a84c; }
.theme-swatches.ink i:nth-child(3) { background: #eee7d7; }

.agent-avatar-rendered { position: relative; overflow: hidden; isolation: isolate; }
.agent-avatar-rendered > img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.agent-avatar-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font: 800 1em/1 var(--zs-serif); }
.agent-avatar-rendered[data-avatar-tone="0"] .agent-avatar-fallback { background: #8b6508; }
.agent-avatar-rendered[data-avatar-tone="1"] .agent-avatar-fallback { background: #7d4535; }
.agent-avatar-rendered[data-avatar-tone="2"] .agent-avatar-fallback { background: #426756; }
.agent-avatar-rendered[data-avatar-tone="3"] .agent-avatar-fallback { background: #586082; }
.agent-avatar-rendered[data-avatar-tone="4"] .agent-avatar-fallback { background: #75527a; }
.agent-avatar-rendered[data-avatar-tone="5"] .agent-avatar-fallback { background: #796244; }
.feature-avatar-editor { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.feature-avatar-picker { width: 92px; flex: 0 0 92px; display: grid; gap: 5px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-soft); color: var(--muted); cursor: pointer; }
.feature-avatar-picker > span { width: 74px; height: 74px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; font-size: 2rem; }
.feature-avatar-picker small, .feature-avatar-controls small { font-size: .6875rem; }
.feature-avatar-controls { min-width: 0; display: grid; justify-items: start; gap: 5px; color: var(--muted); }
.feature-avatar-url { margin: 0 0 14px; color: var(--muted); font-size: .75rem; }
.feature-avatar-url summary { cursor: pointer; }
.feature-avatar-url .field { margin-top: 10px; }
.feature-agent-list-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 8px; font-size: 1rem; }
.feature-agent-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.recent-agent-card { display: flex; align-items: center; gap: 8px; }
.recent-agent-avatar { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 6px; font-size: .75rem; }

.management-load-status, .admin-room-slot-details { margin: 0 0 12px; color: var(--muted); font-size: .75rem; }
.management-load-status button { margin-left: 6px; }
.admin-room-slot-map { max-height: 440px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow-y: auto; margin-bottom: 12px; padding: 2px; }
.admin-room-palace { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--surface-soft) 88%, var(--primary) 12%); }
.admin-room-palace > strong { display: block; margin-bottom: 7px; color: var(--text); font: 700 .75rem/1.4 var(--zs-serif); }
.admin-room-slot-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.admin-room-slot { min-width: 0; aspect-ratio: 1; display: grid; place-items: center; padding: 3px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--hexagram-color) 52%, var(--line)); border-radius: 5px; background: var(--surface); color: var(--text); cursor: pointer; }
.admin-room-slot svg { width: 18px; height: 18px; }
.admin-room-slot span { min-width: 0; display: none; }
.admin-room-slot.selected { outline: 3px solid var(--focus-ring); border-color: var(--primary); background: var(--primary-soft); }
.admin-room-slot.occupied { filter: grayscale(.75); background: var(--surface-soft); cursor: not-allowed; opacity: .56; }
.feedback-management-panel td:last-child { display: flex; flex-wrap: wrap; gap: 6px; }

html[data-theme="xuan_mo"] .auth-side,
html[data-theme="xuan_mo"] .workspace-home,
html[data-theme="xuan_mo"] .agents-lobby,
html[data-theme="xuan_mo"] .management-nav,
html[data-theme="xuan_mo"] .reading-room-modal,
html[data-theme="xuan_mo"] .bookshelf-panel,
html[data-theme="xuan_mo"] .notes-panel { background: var(--bg); color: var(--text); }
html[data-theme="xuan_mo"] .auth-card,
html[data-theme="xuan_mo"] .auth-tab.active,
html[data-theme="xuan_mo"] .agreement-dialog,
html[data-theme="xuan_mo"] .avatar-preview-dialog,
html[data-theme="xuan_mo"] .chat-room-composer textarea,
html[data-theme="xuan_mo"] .bookshelf-toolbar select,
html[data-theme="xuan_mo"] .reading-search,
html[data-theme="xuan_mo"] .reader-search-panel input,
html[data-theme="xuan_mo"] .reader-chat-form textarea,
html[data-theme="xuan_mo"] .reader-selection-popover,
html[data-theme="xuan_mo"] .reader-selection-popover textarea { background: var(--surface); color: var(--text); border-color: var(--line); }
html[data-theme="xuan_mo"] .auth-tabs,
html[data-theme="xuan_mo"] .auth-card .password-visibility-toggle:hover,
html[data-theme="xuan_mo"] .auth-card .password-visibility-toggle:focus-visible,
html[data-theme="xuan_mo"] .home-card-icon,
html[data-theme="xuan_mo"] .agent-gallery-card.placeholder,
html[data-theme="xuan_mo"] .lobby-composer-disabled { background: var(--surface-soft); color: var(--text); }
html[data-theme="xuan_mo"] .auth-card-heading strong,
html[data-theme="xuan_mo"] .field > span,
html[data-theme="xuan_mo"] .checkbox-field,
html[data-theme="xuan_mo"] .home-heading p:last-child,
html[data-theme="xuan_mo"] .lobby-heading p { color: var(--muted); }
html[data-theme="xuan_mo"] .mobile-workspace-nav { background: color-mix(in srgb, var(--surface) 96%, transparent); }
.modal-backdrop { background: var(--overlay); }

@media (max-width: 820px) {
    .theme-picker { grid-template-columns: 1fr; }
    .admin-room-slot-map { grid-template-columns: 1fr; max-height: 52dvh; }
    .admin-room-slot-grid { grid-template-columns: repeat(6, minmax(36px, 1fr)); }
}

@keyframes blink { 50% { opacity: .18; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toast-in { from { transform: translateY(-7px); opacity: 0; } }