/* Original matches the existing cascade. System changes presentation only:
   no positioning, visibility, hit targets, scroll, video sizing or pointer rules. */
html[data-ui-skin="glass"] {
    --ui-control:rgba(225,211,242,.12); --ui-border:rgba(255,255,255,.32);
    --ui-hover:rgba(255,255,255,.22); --ui-selected:rgba(224,177,246,.23);
    --ui-accent:#edb1fa; --ui-on-accent:#35213c; --ui-text:#f6f1fa;
    --ui-card:rgba(222,204,242,.04); --ui-radius:24px; --ui-control-radius:24px;
    --ui-blur:blur(18px) saturate(1.25);
}
html[data-ui-skin="material"] {
    --ui-control:#302936; --ui-border:#514655; --ui-hover:#493d52;
    --ui-selected:#51415e; --ui-accent:#d6b8f3; --ui-on-accent:#392647;
    --ui-text:#f0e7f4; --ui-card:#1f1a25; --ui-radius:18px; --ui-control-radius:16px;
    --ui-blur:none;
}
html[data-ui-appearance="system"] {
    --glass:var(--ui-control); --glass-b:var(--ui-border); --glass-h:var(--ui-hover);
    --purple:var(--ui-accent); --purple-g:rgba(205,169,238,.28);
}
html[data-ui-appearance="system"] :is(.btn,.tp,.bdg,.lnk,.chip,.cb,.set-seg button,.filter-btn,.social-tab) {
    border-color:var(--ui-border);
    border-radius:var(--ui-control-radius);
    box-shadow:inset 0 1px 0 #ffffff12;
}
html[data-ui-appearance="system"] :is(.tp,.bdg,.lnk,.chip,.cb,.set-seg button,.filter-btn,.social-tab) {
    background-color:var(--ui-control);
    -webkit-backdrop-filter:var(--ui-blur); backdrop-filter:var(--ui-blur);
}
html[data-ui-appearance="system"] :is(.btn-primary,.btn-purple,.set-seg button.active) {
    background:var(--ui-accent); color:var(--ui-on-accent);
}
html[data-ui-appearance="system"] :is(.tp,.lnk,.chip,.cb,.filter-btn,.social-tab):is(.active,.on,[aria-pressed="true"]) {
    background-color:var(--ui-selected); border-color:var(--ui-accent);
}
html[data-ui-appearance="system"] :is(.cb-exit,.btn-danger,.cb.danger,.cb.off) {
    background-color:#ba2445; border-color:#f36c87; color:#fff;
}
html[data-ui-appearance="system"] :is(.card,.modal-card,.panel-card) {
    background-color:var(--ui-card); border-color:var(--ui-border);
    border-radius:var(--ui-radius); box-shadow:none;
}
html[data-ui-appearance="system"] :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),textarea,select) {
    border-color:var(--ui-border); border-radius:12px;
}
html[data-ui-appearance="system"] :is(.sols-tabbar) {
    background-color:var(--ui-control); border-color:var(--ui-border);
    -webkit-backdrop-filter:var(--ui-blur); backdrop-filter:var(--ui-blur);
}
html[data-ui-appearance="system"] :is(button,a,input,textarea,select):focus-visible {
    outline:2px solid var(--ui-accent); outline-offset:3px;
}
/* The newly added setting is available in either appearance. */
.appearance-options { display:flex; gap:8px; margin-top:8px; }
.appearance-options button { flex:1; padding:12px 18px; border:1px solid var(--glass-b); border-radius:20px; background:var(--glass); color:inherit; cursor:pointer; font:inherit; }
.appearance-options button[aria-checked="true"] { border-color:var(--purple); box-shadow:inset 0 0 0 1px var(--purple); }
.appearance-status:empty { display:none; }
@media(prefers-reduced-transparency:reduce) {
    html[data-ui-skin="glass"] { --ui-control:#2b2632; --ui-card:#1c1821; --ui-blur:none; }
}
@media(prefers-reduced-motion:reduce) {
    html[data-ui-appearance="system"] :is(.btn,.tp,.bdg,.lnk,.chip,.cb) { transition:none; }
}

@font-face { font-family:"SOLS Roboto"; src:url("fonts/Roboto.ttf") format("truetype"); font-style:normal; font-weight:100 900; font-display:swap; }
html[data-ui-skin="material"] { --font-sans:"SOLS Roboto",Roboto,system-ui,sans-serif; }
html[data-ui-skin="glass"] { --font-sans:-apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
html[data-ui-appearance="system"] .sols-tab-ic[data-ui-icon]:not([data-ui-avatar]) { position:relative; }
html[data-ui-appearance="system"] .sols-tab-ic[data-ui-icon]:not([data-ui-avatar])>svg { visibility:hidden; }
html[data-ui-appearance="system"] .sols-tab-ic[data-ui-icon]:not([data-ui-avatar]):has(>svg)::after {
    content:""; position:absolute; inset:0; margin:auto; width:22px; height:22px; background:currentColor;
    -webkit-mask:var(--ui-icon) center/contain no-repeat; mask:var(--ui-icon) center/contain no-repeat;
}
html[data-ui-skin="glass"] [data-ui-icon="media"] { --ui-icon:url("icons/ios/media.png"); }
html[data-ui-skin="material"] [data-ui-icon="media"] { --ui-icon:url("icons/android/media.svg"); }
html[data-ui-skin="glass"] [data-ui-icon="stream"] { --ui-icon:url("icons/ios/stream.png"); }
html[data-ui-skin="material"] [data-ui-icon="stream"] { --ui-icon:url("icons/android/stream.svg"); }
html[data-ui-skin="glass"] [data-ui-icon="social"] { --ui-icon:url("icons/ios/social.png"); }
html[data-ui-skin="material"] [data-ui-icon="social"] { --ui-icon:url("icons/android/social.svg"); }
html[data-ui-skin="glass"] [data-ui-icon="chat"] { --ui-icon:url("icons/ios/chat.png"); }
html[data-ui-skin="material"] [data-ui-icon="chat"] { --ui-icon:url("icons/android/chat.svg"); }
html[data-ui-skin="glass"] [data-ui-icon="bio"] { --ui-icon:url("icons/ios/bio.png"); }
html[data-ui-skin="material"] [data-ui-icon="bio"] { --ui-icon:url("icons/android/bio.svg"); }

html[data-ui-appearance="system"] .sols-tab-ic[data-ui-icon="games"]:not([data-ui-avatar])>svg { visibility:visible; }
html[data-ui-appearance="system"] .sols-tab-ic[data-ui-icon="games"]:not([data-ui-avatar])::after { display:none; }

html[data-ui-appearance="system"] .sols-tab-ic[data-ui-icon="audio"]>svg{visibility:visible}
html[data-ui-appearance="system"] .sols-tab-ic[data-ui-icon="audio"]::after{display:none}

/* Account forms share one surface for backup, recovery and password approval. */
.account-dialog { position:fixed; inset:0; z-index:9999; display:none; align-items:flex-end; justify-content:center; box-sizing:border-box; padding:max(16px,env(safe-area-inset-top)) 13px max(12px,env(safe-area-inset-bottom)); background:#0009; }
.account-dialog.show { display:flex; }
#bkrestore-overlay.account-dialog { z-index:9997; }
#owner-backup-overlay.account-dialog { z-index:9998; }
#pwd-confirm-overlay.account-dialog,#qr-scan-overlay.account-dialog { z-index:10000; }
.account-dialog .account-dialog-panel { box-sizing:border-box; width:100%; max-width:514px; max-height:100%; min-width:0; overflow-y:auto; overscroll-behavior:contain; padding:24px; border:1px solid var(--ui-border,#ffffff30); border-top-color:#ffffff65; border-radius:28px; color:var(--ui-text,#f6f1fa); background:linear-gradient(155deg,#47404ff2,#302a38f5 45%,#51435aed); backdrop-filter:blur(28px) saturate(1.5); -webkit-backdrop-filter:blur(28px) saturate(1.5); box-shadow:inset 0 1px 0 #fff2,0 8px 24px #0005; font:15px/1.5 var(--font-sans,system-ui,sans-serif); }
.account-dialog-panel h2 { color:inherit; margin:0 0 14px; font:600 20px/1.3 var(--font-sans,system-ui,sans-serif); }
.account-dialog-panel p { margin:0 0 16px; font-size:14px; line-height:1.5; color:var(--ui-muted,#bcb5c5); overflow-wrap:anywhere; }
.account-dialog-panel :is(input:not([type="file"]),textarea) { width:100%; box-sizing:border-box; min-height:50px; padding:13px 16px; margin:0 0 12px; border:1px solid var(--ui-border,#ffffff30); border-radius:18px; background:var(--ui-control,#ffffff15); color:inherit; font:inherit; font-size:16px; outline:none; }
.account-dialog-panel textarea { min-height:80px; resize:vertical; }
.account-dialog-panel :is(input,textarea):focus { border-color:var(--ui-accent,#edb1fa); box-shadow:0 0 0 1px var(--ui-accent,#edb1fa); }
.account-dialog-panel :is(button,.account-dialog-upload) { box-sizing:border-box; display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:48px; padding:12px 18px; border:1px solid var(--ui-border,#ffffff30); border-radius:999px; background:var(--ui-control,#ffffff15); color:inherit; font:600 14px/1.4 var(--font-sans,system-ui,sans-serif); cursor:pointer; text-decoration:none; }
.account-dialog-panel :is(.is-primary,.btn-primary) { background:var(--ui-accent,#edb1fa); color:var(--ui-on-accent,#35213c); border-color:transparent; }
.account-dialog-panel :is(button,.account-dialog-upload):focus-visible { outline:2px solid var(--ui-accent,#edb1fa); outline-offset:3px; }
.account-dialog-panel button:disabled { opacity:.45; cursor:default; }
.account-dialog-actions,.account-dialog-panel .modal-actions { display:flex; gap:12px; margin-top:8px; }
.account-dialog-actions>*,.account-dialog-panel .modal-actions>* { flex:1; min-width:0; }
.account-dialog-panel .account-dialog-error { color:#ff9da9; font-size:13px; }
.account-dialog-heading { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.account-dialog-heading h2 { flex:1; margin:0; }
.account-dialog-panel .account-dialog-help { flex:none; width:44px; min-height:44px; padding:0; font-size:20px; }
.account-dialog-panel .qr-box { display:flex; justify-content:center; margin-bottom:16px; }
.account-dialog-panel .qr-box img { width:220px; max-width:100%; height:auto; box-sizing:border-box; background:#fff; padding:8px; border-radius:16px; }
.account-dialog-camera { display:flex; justify-content:center; align-items:center; margin-bottom:16px; min-height:120px; }
.account-dialog-camera video { width:min(240px,100%); height:min(240px,32dvh); object-fit:cover; border-radius:18px; background:#000; }
.account-dialog-camera p { text-align:center; }
.account-dialog-upload { position:relative; overflow:hidden; }
.account-dialog-upload:focus-within { outline:2px solid var(--ui-accent,#edb1fa); outline-offset:3px; }
html[data-ui-skin="material"] .account-dialog-panel { background:var(--ui-card,#241e2a); border-radius:24px; backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-ui-skin="material"] .account-dialog-panel :is(button,.account-dialog-upload) { border-radius:16px; }
@media (min-width:768px) { .account-dialog { align-items:center; } }
@media (prefers-reduced-transparency:reduce) { .account-dialog .account-dialog-panel { background:#302b36; backdrop-filter:none; -webkit-backdrop-filter:none; } }