/* Window styles. data-skin on (set by js/lib/theme.js) restyles the
same components four more ways: Retro 95, Luna XP, Glass 7 and Modern.
Frutiger Aero ('aero') is the default look and needs nothing here. */
.line-slot { display: none; }
/* Shared: every non-Aero style drops the liquid rim and bubbly radii. */
:root:not([data-skin='aero']) .modal { border-radius: var(--r-xl); }
:root:not([data-skin='aero']) :is(.menu, .popover) { border-radius: var(--r-md); }
:root:not([data-skin='aero']) .toast { border-radius: var(--r-md); }
:root:not([data-skin='aero']) .dock { border-radius: var(--r-xl); }
:root:not([data-skin='aero']) .topbar { border-radius: var(--r-lg); }
:root:not([data-skin='aero']) :is(.menu-item, .list-item) { border-radius: var(--r-sm); }
/* ========================================================================
Retro 95 — grey bevels, navy title bars, a teal desktop
======================================================================== */
:root[data-skin='classic'] {
--r-xl: 0px;
--r-lg: 0px;
--r-md: 0px;
--r-sm: 0px;
--c-face: #c0c0c0;
--c-hi: #dfdfdf;
--c-shadow: #808080;
--c-dark: #0a0a0a;
--c-title: linear-gradient(90deg, #000080, #1084d0);
--bevel-out: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
--bevel-in: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
--ink: #000000;
--ink-rgb: 0, 0, 0;
--ink-2: #202020;
--ink-3: #505050;
--hair: #808080;
--emboss: none;
--field: #ffffff;
--field-line: transparent;
--accent: #000080;
--accent-rgb: 0, 0, 128;
}
:root[data-skin='classic'] body { text-shadow: none; -webkit-font-smoothing: none; }
:root[data-skin='classic'] :is(h1, h2, h3, h4, .bold, b) { font-weight: 700; }
:root[data-skin='classic'] :is(.btn, .chip, .pill-tab, .feed-ctl, .compose-prompt, .vote-box, .vote, .field, .tag-chip, .lv-pill, .song-card, .daily-card, .poll-opt,
.fab, .icon-btn, .bubbles-chip, .topbar-search, .seg, .seg button, .seg-pill, .list-item, .menu, .popover, .toast, .modal, .well, .theme-tile,
.notif-row, .me-link, .invite-card, .shop-row, .announce, .post, .card, .glass, .reply-bubble, .attach-item, .composer, .pod-card, .song-play,
.level-badge, .topic-chip, .mood-day, .mood-dot, .cal-cell, .me-badge, .avatar-choice, .theme-thumb, .starter, .starter-thumb, .letter-react) {
border-radius: 0 !important;
}
:root[data-skin='classic'] .glass {
background: var(--c-face);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: var(--bevel-out), 2px 2px 0 rgba(0, 0, 0, 0.25);
}
:root[data-skin='classic'] .glass::before,
:root[data-skin='classic'] .glass::after { display: none; }
:root[data-skin='classic'] .card > .card-head:first-child,
:root[data-skin='classic'] .modal-head {
margin: 3px 3px 12px;
padding: 3px 4px 3px 8px;
background: var(--c-title);
color: #fff;
}
:root[data-skin='classic'] .card > .card-head:first-child { margin: -15px -17px 12px; }
:root[data-skin='classic'] :is(.card-head, .modal-head) :is(h2, h3) { color: #fff; font-size: 0.95rem; }
:root[data-skin='classic'] :is(.card-head, .modal-head) .orb { width: 18px; height: 18px; background: none; box-shadow: none; color: #fff; }
:root[data-skin='classic'] .modal-head { margin-bottom: 0; }
:root[data-skin='classic'] .modal-x {
width: 22px;
height: 20px;
background: var(--c-face);
box-shadow: var(--bevel-out);
color: #000;
}
:root[data-skin='classic'] .btn,
:root[data-skin='classic'] .btn.ghost,
:root[data-skin='classic'] .gbtn {
color: #000;
text-shadow: none;
font-weight: 400;
background: var(--c-face);
box-shadow: var(--bevel-out);
-webkit-backdrop-filter: none;
backdrop-filter: none;
padding: 6px 16px;
}
:root[data-skin='classic'] .btn::after { display: none; }
:root[data-skin='classic'] .btn .ic { filter: none; }
:root[data-skin='classic'] .btn:hover { filter: none; transform: none; }
:root[data-skin='classic'] .btn:active { box-shadow: var(--bevel-in); transform: none; padding: 7px 15px 5px 17px; }
:root[data-skin='classic'] :is(.chip, .feed-ctl, .pill-tab, .bubbles-chip) {
color: #000;
text-shadow: none;
background: var(--c-face);
box-shadow: var(--bevel-out);
-webkit-backdrop-filter: none;
backdrop-filter: none;
font-weight: 400;
}
:root[data-skin='classic'] :is(.chip.on, .chip.mine, .pill-tab.on, .feed-ctl.on) {
color: #000;
background: repeating-conic-gradient(#c0c0c0 0 25%, #ffffff 0 50%) 0 0 / 2px 2px;
box-shadow: var(--bevel-in);
text-shadow: none;
font-weight: 700;
}
:root[data-skin='classic'] :is(.field, .compose-prompt, .topbar-search, .well, .vote-box, .song-card, .reply-bubble) {
background: #fff;
border: 0;
box-shadow: var(--bevel-in);
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: #000;
}
:root[data-skin='classic'] .field:focus { outline: 1px dotted #000; outline-offset: -4px; }
:root[data-skin='classic'] .switch-track { width: 20px; height: 20px; background: #fff; box-shadow: var(--bevel-in); }
:root[data-skin='classic'] .switch-track::after {
top: 3px;
left: 7px;
width: 6px;
height: 11px;
border: solid #000;
border-width: 0 2px 2px 0;
border-radius: 0;
background: none;
box-shadow: none;
transform: rotate(45deg);
opacity: 0;
}
:root[data-skin='classic'] .switch input:checked + .switch-track { background: #fff; box-shadow: var(--bevel-in); }
:root[data-skin='classic'] .switch input:checked + .switch-track::after { transform: rotate(45deg); opacity: 1; }
:root[data-skin='classic'] .seg { background: var(--c-face); box-shadow: var(--bevel-out); }
:root[data-skin='classic'] .seg-pill { background: var(--c-hi); box-shadow: var(--bevel-in); }
:root[data-skin='classic'] .orb { background: var(--c-face); box-shadow: var(--bevel-out); color: var(--o); border-radius: 2px; }
:root[data-skin='classic'] .orb::before { display: none; }
:root[data-skin='classic'] .orb > .ic { filter: none; }
:root[data-skin='classic'] .dock-drop { border-radius: 0; background: repeating-conic-gradient(#c0c0c0 0 25%, #ffffff 0 50%) 0 0 / 2px 2px; box-shadow: var(--bevel-in); }
:root[data-skin='classic'] .dock-item, :root[data-skin='classic'] .dock-item.active { color: #000; }
:root[data-skin='classic'] .aero-ic { filter: none; }
:root[data-skin='classic'] .logo-orb { border-radius: 0; background: var(--c-face); box-shadow: var(--bevel-out); }
:root[data-skin='classic'] .logo-orb::before { display: none; }
:root[data-skin='classic'] .logo-orb svg { stroke: #000080; filter: none; }
:root[data-skin='classic'] :is(.list-item, .menu-item):hover { background: #000080; color: #fff; }
:root[data-skin='classic'] :is(.list-item, .menu-item):hover :is(.muted, .faint, .tiny) { color: #fff; }
:root[data-skin='classic'] .list-item.active { background: #000080; color: #fff; box-shadow: none; }
:root[data-skin='classic'] .fab { background: var(--c-face); box-shadow: var(--bevel-out); color: #000; }
:root[data-skin='classic'] .fab::before { display: none; }
:root[data-skin='classic'] .fab .ic { filter: none; }
:root[data-skin='classic'] :is(.tag-chip, .lv-pill, .level-badge, .topic-chip) { background: #000080; box-shadow: none; text-shadow: none; }
:root[data-skin='classic'] .retro-bar {
justify-content: flex-end;
color: #000;
text-shadow: none;
background: var(--c-face);
border-bottom: 0;
box-shadow: var(--bevel-out);
height: 28px;
}
:root[data-skin='classic'] .rb-sep { display: none; }
:root[data-skin='classic'] :is(.rb-time, .rb-date, .rb-cell) { padding: 1px 8px; box-shadow: var(--bevel-in); }
:root[data-skin='classic'] .rb-signal i, :root[data-skin='classic'] .rb-batt::after { background: #000; box-shadow: none; }
:root[data-skin='classic'] .rb-batt { border-color: #000; box-shadow: none; }
:root[data-skin='classic'] ::-webkit-scrollbar { width: 16px; height: 16px; }
:root[data-skin='classic'] ::-webkit-scrollbar-track { background: repeating-conic-gradient(#c0c0c0 0 25%, #ffffff 0 50%) 0 0 / 2px 2px; }
:root[data-skin='classic'] ::-webkit-scrollbar-thumb { background: var(--c-face); box-shadow: var(--bevel-out); border: 0; border-radius: 0; }
:root[data-skin='classic'] * { scrollbar-color: #c0c0c0 #dfdfdf; }
:root[data-skin='classic'] .modal-back { background: rgba(0, 0, 0, 0.2); }
/* ========================================================================
Luna XP — blue title bars, beige windows, a green hill
======================================================================== */
:root[data-skin='luna'] {
--r-xl: 8px;
--r-lg: 8px;
--r-md: 4px;
--r-sm: 3px;
--xp-face: #ece9d8;
--xp-frame: #0831d9;
--xp-title: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
--xp-taskbar: linear-gradient(180deg, #1f2f86 0, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%, #2b71e0 15%, #2663da 18%, #235bd6 20%, #2258d5 23%, #2157d6 38%, #245ddb 54%, #2562df 86%, #245fdc 89%, #2158d4 92%, #1d4ec0 95%, #1941a5 98%);
--ink: #000000;
--ink-rgb: 0, 0, 0;
--ink-2: #333333;
--ink-3: #6b6b6b;
--hair: #aca899;
--emboss: none;
--field: #ffffff;
--field-line: #7f9db9;
}
:root[data-skin='luna'] body { text-shadow: none; }
:root[data-skin='luna'] :is(h1, h2, h3, h4, .bold, b) { font-weight: 700; }
:root[data-skin='luna'] .glass {
background: var(--xp-face);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: inset 0 4px 0 #0058ee, 0 0 0 1px var(--xp-frame), 2px 3px 10px rgba(0, 0, 0, 0.3);
}
:root[data-skin='luna'] .glass::before,
:root[data-skin='luna'] .glass::after { display: none; }
:root[data-skin='luna'] .card > .card-head:first-child,
:root[data-skin='luna'] .modal-head {
background: var(--xp-title);
color: #fff;
text-shadow: 1px 1px #0f1089;
border-radius: 7px 7px 0 0;
padding: 6px 8px 6px 10px;
}
:root[data-skin='luna'] .card > .card-head:first-child { margin: -18px -20px 12px; }
:root[data-skin='luna'] :is(.card-head, .modal-head) :is(h2, h3) { color: #fff; font-size: 1rem; }
:root[data-skin='luna'] .modal-x {
width: 22px;
height: 22px;
border-radius: 3px;
color: #fff;
border: 1px solid #fff;
background: radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 90%, #fff 100%);
}
:root[data-skin='luna'] .btn,
:root[data-skin='luna'] .btn.ghost,
:root[data-skin='luna'] .gbtn {
color: #000;
text-shadow: none;
font-weight: 400;
border-radius: 3px;
border: 1px solid #003c74;
background: linear-gradient(180deg, #ffffff, #ecebe6 86%, #d6d0c5);
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
:root[data-skin='luna'] .btn::after { display: none; }
:root[data-skin='luna'] .btn .ic { filter: none; }
:root[data-skin='luna'] .btn:hover { filter: none; transform: none; box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a; }
:root[data-skin='luna'] .btn:active { transform: none; background: linear-gradient(180deg, #cdcac3, #e3e3db 8%, #e5e5de 94%, #f2f2f1); }
:root[data-skin='luna'] :is(.chip, .feed-ctl, .bubbles-chip) {
color: #000;
text-shadow: none;
font-weight: 400;
border-radius: 3px;
background: linear-gradient(180deg, #ffffff, #ecebe6);
box-shadow: inset 0 0 0 1px #aca899;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
:root[data-skin='luna'] :is(.chip.on, .chip.mine, .feed-ctl.on) { color: #000; background: linear-gradient(180deg, #fdfdfd, #c1d3fb); box-shadow: inset 0 0 0 1px #316ac5; }
:root[data-skin='luna'] .pill-tab {
color: #000;
text-shadow: none;
font-weight: 400;
border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, #ffffff, #ecebe6 90%, #d6d0c5);
box-shadow: inset 0 0 0 1px #919b9c;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
:root[data-skin='luna'] .pill-tab.on { color: #000; background: #fcfcfe; box-shadow: inset 0 3px 0 #ffc83c, inset 0 0 0 1px #919b9c; }
:root[data-skin='luna'] :is(.field, .topbar-search, .compose-prompt, .well, .song-card, .reply-bubble) {
background: #fff;
border: 1px solid #7f9db9;
border-radius: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: #000;
}
:root[data-skin='luna'] .compose-prompt { border-radius: 3px; }
:root[data-skin='luna'] .switch-track { width: 16px; height: 16px; border-radius: 2px; background: linear-gradient(135deg, #dcdcd7, #fff); box-shadow: inset 0 0 0 1px #1c5180; }
:root[data-skin='luna'] .switch-track::after { top: 2px; left: 5px; width: 5px; height: 9px; border: solid #21a121; border-width: 0 2px 2px 0; border-radius: 0; background: none; box-shadow: none; transform: rotate(45deg); opacity: 0; }
:root[data-skin='luna'] .switch input:checked + .switch-track { background: linear-gradient(135deg, #dcdcd7, #fff); box-shadow: inset 0 0 0 1px #1c5180; }
:root[data-skin='luna'] .switch input:checked + .switch-track::after { transform: rotate(45deg); opacity: 1; }
:root[data-skin='luna'] .seg { background: var(--xp-face); box-shadow: inset 0 0 0 1px #aca899; }
:root[data-skin='luna'] .seg-pill { background: linear-gradient(180deg, #fff, #c1d3fb); box-shadow: inset 0 0 0 1px #316ac5; }
:root[data-skin='luna'] :is(.list-item, .menu-item):hover { background: #316ac5; color: #fff; }
:root[data-skin='luna'] :is(.list-item, .menu-item):hover :is(.muted, .faint, .tiny) { color: #fff; }
:root[data-skin='luna'] .list-item.active { background: #316ac5; color: #fff; box-shadow: none; }
/* The dock becomes the taskbar, the top bar a window title bar. */
:root[data-skin='luna'] .dock { background: linear-gradient(90deg, #1941a5, #245ddb 20%, #2562df 70%, #1d4ec0); box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3); }
:root[data-skin='luna'] .dock :is(.dock-item, .dock-item.active) { color: #fff; }
:root[data-skin='luna'] .dock-drop { border-radius: 4px; background: #1e52b7; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.45), inset -1px -1px 0 rgba(255, 255, 255, 0.15); }
:root[data-skin='luna'] .logo-orb { border-radius: 10px; background: radial-gradient(circle at 50% 30%, #6bd46b, #3a9c3a 60%, #247a24); box-shadow: inset 0 -3px 6px rgba(0, 60, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.4); }
:root[data-skin='luna'] .topbar { background: var(--xp-title); box-shadow: 0 0 0 1px var(--xp-frame), 2px 3px 10px rgba(0, 0, 0, 0.3); }
:root[data-skin='luna'] .topbar :is(.topbar-title h1, .icon-btn) { color: #fff; text-shadow: 1px 1px #0f1089; }
:root[data-skin='luna'] .retro-bar {
color: #fff;
text-shadow: none;
background: linear-gradient(180deg, #0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9 100%);
border-bottom: 1px solid #0a3a8a;
justify-content: flex-end;
}
:root[data-skin='luna'] .fab { border-radius: 12px; background: radial-gradient(circle at 50% 30%, #6bd46b, #3a9c3a 60%, #247a24); box-shadow: inset 0 -3px 6px rgba(0, 60, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35); }
:root[data-skin='luna'] :is(.tag-chip, .lv-pill, .level-badge) { background: linear-gradient(180deg, #3d95ff, #0050ee); }
:root[data-skin='luna'] ::-webkit-scrollbar { width: 17px; height: 17px; }
:root[data-skin='luna'] ::-webkit-scrollbar-track { background: #f4f4f0; }
:root[data-skin='luna'] ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #c8d6fb, #b7cafc); border: 1px solid #fff; border-radius: 3px; box-shadow: inset 0 0 0 1px #9eb7f0; }
:root[data-skin='luna'] a.link, :root[data-skin='luna'] .link { color: #0033cc; }
@media (max-width: 820px) {
:root[data-skin='classic'] .dock,
:root[data-skin='luna'] .dock {
left: 0;
right: 0;
bottom: 0;
height: calc(64px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
border-radius: 0;
}
:root[data-skin='luna'] .dock { background: var(--xp-taskbar); }
:root[data-skin='classic'] .main,
:root[data-skin='luna'] .main { padding-bottom: 76px; }
}
/* ========================================================================
Glass 7 — smoky frames, glowing highlights, a glowing taskbar
======================================================================== */
:root[data-skin='glass7'] {
--r-xl: 10px;
--r-lg: 8px;
--r-md: 6px;
--r-sm: 4px;
}
:root[data-skin='glass7'] .glass {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 38%, rgba(255, 255, 255, 0) 60%),
rgba(var(--tint-rgb), calc(var(--glass-a) + 0.1));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
backdrop-filter: blur(var(--glass-blur)) saturate(140%);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45);
}
:root[data-skin='glass7'] .glass::before {
padding: 0;
-webkit-mask: none;
mask: none;
background: linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, 0.14) 23%, rgba(255, 255, 255, 0.04) 42%, transparent 43%);
}
:root[data-skin='glass7'] .glass::after { display: none; }
:root[data-skin='glass7'] body { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
:root[data-skin='glass7'] :is(.card-head, .modal-head) :is(h2, h3) { text-shadow: 0 0 10px rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.6); }
:root[data-skin='glass7'] .modal-x {
width: 44px;
height: 20px;
border-radius: 0 0 5px 5px;
align-self: flex-start;
margin-top: -18px;
color: #fff;
border: 1px solid rgba(0, 0, 0, 0.5);
background: linear-gradient(180deg, #e8a493, #d17156 45%, #c4462f 50%, #d27a5f);
}
:root[data-skin='glass7'] .btn,
:root[data-skin='glass7'] .btn.ghost,
:root[data-skin='glass7'] .gbtn {
color: #000;
text-shadow: none;
font-weight: 400;
border-radius: 3px;
border: 1px solid #707070;
background: linear-gradient(180deg, #f2f2f2, #ebebeb 45%, #dddddd 50%, #cfcfcf);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
:root[data-skin='glass7'] .btn::after { display: none; }
:root[data-skin='glass7'] .btn .ic { filter: none; }
:root[data-skin='glass7'] .btn:hover { filter: none; transform: none; border-color: #3c7fb1; background: linear-gradient(180deg, #eaf6fd, #d9f0fc 45%, #bee6fd 50%, #a7d9f5); }
:root[data-skin='glass7'] .btn:active { transform: none; border-color: #2c628b; background: linear-gradient(180deg, #e5f4fc, #c4e5f6 45%, #98d1ef 50%, #68b3db); }
:root[data-skin='glass7'] :is(.chip, .feed-ctl, .pill-tab, .bubbles-chip) {
border-radius: 4px;
font-weight: 600;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.02) 51%, rgba(255, 255, 255, 0.1));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
:root[data-skin='glass7'] :is(.chip.on, .chip.mine, .pill-tab.on, .feed-ctl.on) {
color: #fff;
background: radial-gradient(ellipse at 50% 110%, rgba(140, 220, 255, 0.9), transparent 70%), linear-gradient(180deg, rgba(80, 160, 240, 0.8), rgba(30, 90, 190, 0.8));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 10px rgba(80, 180, 255, 0.5);
}
:root[data-skin='glass7'] :is(.field, .topbar-search) {
color: #111;
text-shadow: none;
background: #fff;
border: 1px solid #abadb3;
border-top-color: #707070;
border-radius: 3px;
box-shadow: none;
}
:root[data-skin='glass7'] .field::placeholder, :root[data-skin='glass7'] .topbar-search input::placeholder { color: #6d6d6d; }
:root[data-skin='glass7'] .topbar-search :is(input, .ic) { color: #111; }
:root[data-skin='glass7'] select.field option { color: #111; }
:root[data-skin='glass7'] .dock-drop {
border-radius: 4px;
background: radial-gradient(ellipse at 50% 110%, rgba(120, 200, 255, 0.65), transparent 70%), rgba(255, 255, 255, 0.14);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.5);
}
:root[data-skin='glass7'] .retro-bar { background: rgba(10, 25, 50, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.25); justify-content: flex-end; }
:root[data-skin='glass7'] .fab { border-radius: 50%; background: radial-gradient(circle at 50% 30%, #7fd0ff, #1b6fd0 60%, #0b3d8a); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 18px rgba(80, 180, 255, 0.6); }
:root[data-skin='glass7'] .list-item.active,
:root[data-skin='glass7'] :is(.list-item, .menu-item):hover {
background: linear-gradient(180deg, rgba(160, 215, 255, 0.35), rgba(80, 160, 240, 0.22));
box-shadow: inset 0 0 0 1px rgba(160, 215, 255, 0.6);
}
/* ========================================================================
Modern — flat, calm, light or dark
======================================================================== */
:root[data-skin='modern'] {
--r-xl: 20px;
--r-lg: 16px;
--r-md: 12px;
--r-sm: 10px;
--m-surface: #ffffff;
--m-surface-2: #f3f4f8;
--m-line: rgba(15, 23, 42, 0.1);
--m-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 32px -18px rgba(15, 23, 42, 0.3);
--ink: #0f172a;
--ink-rgb: 15, 23, 42;
--ink-2: #475569;
--ink-3: #8a94a6;
--hair: rgba(15, 23, 42, 0.1);
--field: #f3f4f8;
--field-line: rgba(15, 23, 42, 0.12);
--emboss: none;
color-scheme: light;
}
:root[data-skin='modern'][data-mode='dark'] {
--m-surface: #151a2c;
--m-surface-2: #1d2338;
--m-line: rgba(255, 255, 255, 0.09);
--m-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -20px rgba(0, 0, 0, 0.7);
--ink: #e6e8ef;
--ink-rgb: 230, 232, 239;
--ink-2: #a3aabb;
--ink-3: #6f778a;
--hair: rgba(255, 255, 255, 0.09);
--field: #1d2338;
--field-line: rgba(255, 255, 255, 0.12);
color-scheme: dark;
}
:root[data-skin='modern'] body { text-shadow: none; background: var(--m-surface-2); }
:root[data-skin='modern'] :is(h1, h2, h3) { font-weight: 700; letter-spacing: -0.01em; }
:root[data-skin='modern'] .glass {
background: var(--m-surface);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 0 0 1px var(--m-line), var(--m-shadow);
}
:root[data-skin='modern'] .glass::before,
:root[data-skin='modern'] .glass::after { display: none; }
:root[data-skin='modern'] .btn {
text-shadow: none;
font-weight: 600;
border-radius: 10px;
background: var(--b);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
:root[data-skin='modern'] .btn::after { display: none; }
:root[data-skin='modern'] .btn .ic { filter: none; }
:root[data-skin='modern'] .btn:hover { filter: brightness(1.06); transform: none; }
:root[data-skin='modern'] .btn:active { transform: scale(0.98); }
:root[data-skin='modern'] .btn.ghost, :root[data-skin='modern'] .gbtn {
color: var(--ink);
background: var(--m-surface-2);
box-shadow: inset 0 0 0 1px var(--m-line);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
:root[data-skin='modern'] :is(.chip, .feed-ctl, .bubbles-chip) {
color: var(--ink-2);
font-weight: 600;
background: var(--m-surface-2);
box-shadow: inset 0 0 0 1px var(--m-line);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
:root[data-skin='modern'] :is(.chip.on, .chip.mine, .feed-ctl.on) { color: #fff; background: var(--accent); box-shadow: none; text-shadow: none; }
:root[data-skin='modern'] .pill-tab {
color: var(--ink-2);
font-weight: 600;
background: var(--m-surface);
box-shadow: inset 0 0 0 1px var(--m-line);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
:root[data-skin='modern'] .pill-tab.on { color: var(--m-surface); background: var(--ink); box-shadow: none; text-shadow: none; }
:root[data-skin='modern'] :is(.field, .topbar-search, .compose-prompt, .well, .vote-box, .song-card, .reply-bubble) {
background: var(--m-surface-2);
box-shadow: inset 0 0 0 1px var(--m-line);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 0;
}
:root[data-skin='modern'] .field { border-radius: 10px; }
:root[data-skin='modern'] .field:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(var(--accent-rgb), 0.2); }
:root[data-skin='modern'] .switch-track { background: var(--m-line); box-shadow: none; }
:root[data-skin='modern'] .switch-track::after { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
:root[data-skin='modern'] .switch input:checked + .switch-track { background: var(--accent); box-shadow: none; }
:root[data-skin='modern'] .seg { background: var(--m-surface-2); box-shadow: inset 0 0 0 1px var(--m-line); }
:root[data-skin='modern'] .seg-pill { background: var(--m-surface); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15); }
:root[data-skin='modern'] .orb { color: var(--o); background: color-mix(in srgb, var(--o) 14%, transparent); box-shadow: none; border-radius: 12px; }
:root[data-skin='modern'] .orb::before { display: none; }
:root[data-skin='modern'] .orb > .ic { filter: none; }
:root[data-skin='modern'] .aero-slot { display: none; }
:root[data-skin='modern'] .line-slot { display: grid; place-items: center; width: 42px; height: 38px; border-radius: 12px; color: var(--ink-2); transition: background 0.2s, color 0.2s; }
:root[data-skin='modern'] .dock-item.active .line-slot { color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
:root[data-skin='modern'] .dock-item:hover .line-slot { background: var(--m-surface-2); }
:root[data-skin='modern'] .dock-drop { display: none; }
:root[data-skin='modern'] .dock-label { font-weight: 600; }
:root[data-skin='modern'] .logo-orb { background: var(--accent); box-shadow: none; border-radius: 14px; }
:root[data-skin='modern'] .logo-orb::before { display: none; }
:root[data-skin='modern'] .logo-orb svg { filter: none; }
:root[data-skin='modern'] .list-item:hover { background: var(--m-surface-2); }
:root[data-skin='modern'] .list-item.active { background: rgba(var(--accent-rgb), 0.1); box-shadow: none; }
:root[data-skin='modern'] .menu-item:hover { background: var(--m-surface-2); }
:root[data-skin='modern'] .retro-bar { color: var(--ink-2); text-shadow: none; background: var(--m-surface); border-bottom: 1px solid var(--m-line); box-shadow: none; }
:root[data-skin='modern'] .rb-sep { background: var(--m-line); box-shadow: none; }
:root[data-skin='modern'] .rb-signal i, :root[data-skin='modern'] .rb-batt::after { background: var(--ink-2); box-shadow: none; }
:root[data-skin='modern'] .rb-batt { border-color: var(--ink-2); box-shadow: none; }
:root[data-skin='modern'] .fab { background: var(--accent); box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), 0.7); }
:root[data-skin='modern'] .fab::before { display: none; }
:root[data-skin='modern'] :is(.tag-chip, .lv-pill, .level-badge) { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); text-shadow: none; box-shadow: none; }
:root[data-skin='modern'] .avatar-inner::after { opacity: 0.35; }
:root[data-skin='modern'] .modal-back { background: rgba(15, 23, 42, 0.35); }
:root[data-skin='modern'][data-mode='dark'] .modal-back { background: rgba(0, 0, 0, 0.55); }
:root[data-skin='modern'] ::-webkit-scrollbar-thumb { background: var(--m-line); border: 3px solid transparent; background-clip: padding-box; }
/* Window style picker: tiny previews drawn in each style, whatever the
current style is. */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.skin-card { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; border: 0; border-radius: var(--r-md); background: rgba(var(--ink-rgb), 0.05); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform 0.3s var(--spring); }
.skin-card:hover { transform: translateY(-2px); }
.skin-card.on { box-shadow: inset 0 0 0 2.5px var(--accent); }
.skin-name { font-weight: 800; }
.skin-preview { position: relative; display: flex; flex-direction: column; height: 78px; overflow: hidden; }
.skin-preview i { display: block; }
.sp-bar { height: 14px; flex: none; }
.sp-body { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.sp-btn { width: 44px; height: 14px; }
.sp-line { height: 5px; width: 80%; border-radius: 3px; background: rgba(0, 0, 0, 0.18); }
.sp-line.short { width: 50%; }
.sp-aero { border-radius: 12px; background: linear-gradient(180deg, #7fd0ff, #3aa0f0); }
.sp-aero .sp-bar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2)); }
.sp-aero .sp-body { margin: 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.45); box-shadow: inset 0 1px 0 #fff; }
.sp-aero .sp-btn { border-radius: 999px; background: linear-gradient(180deg, #9ee6ff, #1e9bff); box-shadow: inset 0 1px 0 #fff; }
.sp-classic { background: #008080; padding: 6px; }
.sp-classic .sp-bar { background: linear-gradient(90deg, #000080, #1084d0); }
.sp-classic .sp-body { background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff; }
.sp-classic .sp-btn { background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080; }
.sp-luna { background: linear-gradient(180deg, #4e92e8, #8ad63f 70%); padding: 6px; }
.sp-luna .sp-bar { border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #0997ff, #0053ee 30%, #0066ff); }
.sp-luna .sp-body { background: #ece9d8; box-shadow: inset 0 0 0 2px #0053ee; }
.sp-luna .sp-btn { border-radius: 3px; border: 1px solid #003c74; background: linear-gradient(#fff, #d6d0c5); }
.sp-glass7 { background: radial-gradient(circle at 40% 60%, #2f95e8, #0a3572); padding: 6px; }
.sp-glass7 .sp-bar { border-radius: 5px 5px 0 0; background: rgba(40, 80, 130, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.sp-glass7 .sp-body { background: rgba(20, 50, 90, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.sp-glass7 .sp-btn { border-radius: 3px; border: 1px solid #707070; background: linear-gradient(#f2f2f2, #dddddd 50%, #cfcfcf); }
.sp-glass7 .sp-line { background: rgba(255, 255, 255, 0.4); }
.sp-modern { background: linear-gradient(135deg, #e0e7ff, #fce7f3); padding: 8px; }
.sp-modern .sp-bar { display: none; }
.sp-modern .sp-body { border-radius: 10px; background: #fff; box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.3); }
.sp-modern .sp-btn { border-radius: 6px; background: #5b5bf0; }
.sp-modern .sp-line { background: #e2e8f0; }
.inline-select { width: auto; flex: none; }
.screensaver { position: fixed; inset: 0; z-index: 300; width: 100vw; height: 100vh; cursor: none; }
:root[data-skin='classic'] .tag-chip, :root[data-skin='luna'] .tag-chip { color: #fff; text-shadow: none; }
:root[data-skin='modern'] .tag-chip { color: var(--accent); }
:root:not([data-skin='aero']) .retro-bar { font-family: var(--font); text-transform: none; font-size: 12px; letter-spacing: 0; }
:root[data-skin='luna'] :is(.card-head, .modal-head) .orb { width: 24px; height: 24px; }
:root[data-skin='luna'] :is(.card-head, .modal-head) .orb .ic { width: 14px; height: 14px; }
:root[data-skin='glass7'] :is(.name-aqua, .name-lime, .name-sunset, .name-candy, .name-gold, .name-chrome, .name-rainbow, .name-holo, .name-aurora) {
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}
/* Polls in the flat styles */
:root[data-skin='classic'] .poll-opt { background: var(--c-face); border: 0; box-shadow: var(--bevel-out); }
:root[data-skin='classic'] .poll-opt.mine { box-shadow: var(--bevel-in); }
:root[data-skin='classic'] .poll-fill,
:root[data-skin='classic'] .poll-opt.mine .poll-fill { background: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px); opacity: 0.35; }
:root[data-skin='luna'] .poll-opt { border-radius: 3px; border-color: #7f9db9; background: #fff; }
:root[data-skin='luna'] .poll-fill { background: linear-gradient(#e3f0ff, #b9d4f7); }
:root[data-skin='luna'] .poll-opt.mine .poll-fill { background: linear-gradient(#b8f58f, #3ca82f); }
:root[data-skin='modern'] .poll-opt { border-radius: 10px; background: transparent; box-shadow: none; border-color: var(--line, rgba(127, 127, 127, 0.3)); }
:root[data-skin='modern'] .poll-fill { background: rgba(var(--accent-rgb), 0.16); }
:root[data-skin='modern'] .poll-opt.mine .poll-fill { background: rgba(var(--accent-rgb), 0.3); }
/* Pictures, GIFs, Paint and pickers in the flat styles */
:root[data-skin='classic'] :is(.photo-grid, .gif-view, .post-text.bg-card, .attach-photo img, .gif-cell, .paint-tool, .paint-size, .emoji-tab, .emoji-btn, .msg-photo, .lb-img, .gif-search-wrap, .paint-canvas) {
border-radius: 0 !important;
}
:root[data-skin='classic'] :is(.paint-tool, .paint-size) { background: var(--c-face); box-shadow: var(--bevel-out); color: #000; }
:root[data-skin='classic'] :is(.paint-tool.on, .paint-size.on) { background: var(--c-hi, #fff); box-shadow: var(--bevel-in); color: #000; }
:root[data-skin='classic'] .photo-grid { box-shadow: var(--bevel-in); padding: 2px; background: var(--c-face); }
:root[data-skin='classic'] .post-text.bg-card { box-shadow: var(--bevel-in); }
:root[data-skin='luna'] :is(.paint-tool, .paint-size) { border-radius: 3px; background: linear-gradient(#fff, #ece9d8); box-shadow: inset 0 0 0 1px #7f9db9; color: #000; }
:root[data-skin='luna'] :is(.paint-tool.on, .paint-size.on) { background: linear-gradient(#c1d3fb, #fff); box-shadow: inset 0 0 0 1px #316ac5; }
:root[data-skin='luna'] :is(.photo-grid, .gif-view, .post-text.bg-card) { border-radius: 4px; }
:root[data-skin='modern'] :is(.photo-grid, .gif-view, .post-text.bg-card) { border-radius: 12px; box-shadow: none; }