:root{--fnf-surface:#fff;--fnf-soft:#f0f6fb;--fnf-popup:#dcebf6;--fnf-text:#182b3b;--fnf-muted:#576f82;--fnf-border:#cbdce8;--fnf-sky:#c8e7f8;--fnf-incoming:#fff;--fnf-outgoing:#dbf2e7;--fnf-accent:#0877df}
:root[data-appearance=dark]{--fnf-surface:#142633;--fnf-soft:#1d3444;--fnf-popup:#253e50;--fnf-text:#eaf3fa;--fnf-muted:#adc2d2;--fnf-border:#365367;--fnf-sky:#122e41;--fnf-incoming:#253e50;--fnf-outgoing:#164e48;--fnf-accent:#79bdff;--ink:var(--fnf-text);--muted:var(--fnf-muted);--line:var(--fnf-border);--rose:#10212e;--white:var(--fnf-surface);--berry:var(--fnf-accent);--wine:#91c9ff}
body[data-page=chat]{background:var(--fnf-soft);color:var(--fnf-text)}
.chat-app,.app-header,.conversation-pane,.message-pane,.conversation-header,.bottom-nav,.fnf-section,.message-composer{background:var(--fnf-surface);color:var(--fnf-text);border-color:var(--fnf-border)}
.message-stream{background-color:var(--fnf-sky);background-image:url('/assets/brand/fnf-sky-doodles.svg');background-repeat:repeat;background-size:320px 320px}
.message-bubble{background:var(--fnf-incoming);color:var(--fnf-text);box-shadow:0 1px 2px #12334815}.message-bubble.mine{background:var(--fnf-outgoing)}
.conversation-search input,.message-composer input,.message-composer textarea,.filter-chips button,.feature-button{background:var(--fnf-soft);color:var(--fnf-text);border-color:var(--fnf-border)}
.conversation-item,.conversation-copy strong,.pane-heading,.conversation-header h2,.fnf-section h2{color:var(--fnf-text)}
.conversation-copy p,.conversation-meta,.message-time,.message-empty,.conversation-empty,.privacy-note,.feature-modal-status{color:var(--fnf-muted)}
.conversation-item:hover,.conversation-item.active,.filter-chips button.active,.bottom-nav button.active{background:var(--fnf-soft);color:var(--fnf-accent)}
dialog,.feature-modal,.people-card,.profile-panel,.conversation-safety-menu{background:var(--fnf-popup);color:var(--fnf-text);border:1px solid var(--fnf-border);box-shadow:0 18px 60px #0a223538}
dialog header,.feature-modal header,.feature-modal-content,.feature-modal-status,.dialog-head{background:transparent;color:inherit}dialog::backdrop{background:#071b32a6}
dialog input,dialog textarea,dialog select{background:var(--fnf-surface);color:var(--fnf-text);border-color:var(--fnf-border)}
dialog .feature-button{background:var(--fnf-surface);color:var(--fnf-accent)}
.appearance-options{display:grid;gap:10px}.appearance-option{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--fnf-border);border-radius:16px;background:var(--fnf-surface);cursor:pointer}.appearance-option:has(input:checked){border-color:var(--fnf-accent);outline:1px solid var(--fnf-accent)}.appearance-option input{width:20px;height:20px;margin:0;accent-color:var(--fnf-accent)}.appearance-option span{display:grid;gap:3px}.appearance-option small{color:var(--fnf-muted);font-size:13px}.appearance-preview{height:110px;background:var(--fnf-sky) url('/assets/brand/fnf-sky-doodles.svg') center/320px;border-radius:16px;margin:0 0 18px;padding:20px}.appearance-preview span{display:inline-block;background:var(--fnf-incoming);color:var(--fnf-text);border-radius:14px;padding:12px 16px}
:root[data-appearance=dark] .auth-card,:root[data-appearance=dark] .login-card{background:var(--fnf-surface);color:var(--fnf-text)}
:root[data-appearance=dark] body[data-page=chat] input::placeholder,:root[data-appearance=dark] textarea::placeholder{color:var(--fnf-muted)}

.feature-modal .appearance-option{display:flex;align-items:center;gap:12px;margin:0}.feature-modal .appearance-option input{width:20px;min-height:20px;height:20px;padding:0;flex:0 0 20px}.feature-modal>.feature-modal-status{background:var(--fnf-soft);color:var(--fnf-text)}
:root[data-appearance=dark] .conversation-search,:root[data-appearance=dark] .security-card,:root[data-appearance=dark] .security-number,:root[data-appearance=dark] .security-keys{background:var(--fnf-soft);color:var(--fnf-text);border-color:var(--fnf-border)}
:root[data-appearance=dark] .security-card small,:root[data-appearance=dark] .feature-modal summary{color:var(--fnf-muted)}
:root[data-appearance=dark] .auth-form input{background:var(--fnf-soft);color:var(--fnf-text)}