/* Looks, chosen in Settings > Theme.
Each look only sets tokens (see :root in styles.css) plus a few signature
touches; the shared polish at the bottom (hover lighting, motion) uses the
--glow and --ring tokens so it adapts to every look and mode. */
/* ============================== Aurora ============================== */
html[data-theme="aurora"][data-mode="dark"] {
--bg: #07060f; --bg-2: rgba(14, 11, 30, 0.72);
--panel: rgba(23, 19, 46, 0.62); --panel-2: rgba(32, 27, 62, 0.55); --card: rgba(30, 25, 58, 0.7);
--border: rgba(160, 150, 255, 0.14); --border-soft: rgba(160, 150, 255, 0.08);
--text: #eeebff; --text-dim: #a7a2c9; --text-faint: #6f6a93;
--accent: #9b8cff; --accent-2: #2dd4e6;
--green: #4ade9b; --amber: #fbbf5a; --red: #ff6b8a; --pink: #f472d0;
--on-accent: #0c0820; --solid-bg: #eeebff; --solid-text: #120e2a;
--overlay: rgba(6, 4, 16, 0.6); --topbar-bg: rgba(10, 8, 24, 0.55); --tip-bg: rgba(20, 16, 40, 0.95);
--switch-off: rgba(160, 150, 255, 0.18); --hover-border: rgba(155, 140, 255, 0.4); --dot-off: rgba(160, 150, 255, 0.3);
--amber-text: #fcd58e; --green-text: #a7f3cf;
--glow-1: rgba(155, 140, 255, 0.22); --glow-2: rgba(45, 212, 230, 0.14);
--chart-grid: rgba(160, 150, 255, 0.1); --chart-label: #6f6a93;
--glow: rgba(155, 140, 255, 0.35); --ring: rgba(155, 140, 255, 0.55);
--shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.6); --shadow-lg: 0 40px 100px -20px rgba(0, 0, 0, 0.7);
--radius: 16px;
color-scheme: dark;
}
html[data-theme="aurora"][data-mode="light"] {
--bg: #f4f2ff; --bg-2: rgba(255, 255, 255, 0.6);
--panel: rgba(255, 255, 255, 0.72); --panel-2: rgba(245, 242, 255, 0.85); --card: rgba(255, 255, 255, 0.85);
--border: rgba(109, 93, 252, 0.16); --border-soft: rgba(109, 93, 252, 0.09);
--text: #1c1838; --text-dim: #5d5880; --text-faint: #8f8ab0;
--accent: #6d5dfc; --accent-2: #0ea5c0;
--green: #059669; --amber: #c27a06; --red: #e11d48; --pink: #d946ef;
--on-accent: #ffffff; --solid-bg: #1c1838; --solid-text: #ffffff;
--overlay: rgba(40, 30, 90, 0.25); --topbar-bg: rgba(244, 242, 255, 0.6); --tip-bg: #ffffff;
--switch-off: #d9d4f5; --hover-border: rgba(109, 93, 252, 0.45); --dot-off: #cfc9ee;
--amber-text: #8a5a00; --green-text: #046c4e;
--glow-1: rgba(109, 93, 252, 0.18); --glow-2: rgba(14, 165, 192, 0.14);
--chart-grid: rgba(109, 93, 252, 0.1); --chart-label: #8f8ab0;
--glow: rgba(109, 93, 252, 0.25); --ring: rgba(109, 93, 252, 0.45);
--shadow: 0 18px 40px -16px rgba(60, 40, 160, 0.25); --shadow-lg: 0 40px 90px -30px rgba(60, 40, 160, 0.35);
--radius: 16px;
color-scheme: light;
}
html[data-theme="aurora"] body {
background:
radial-gradient(1100px 700px at 8% -10%, var(--glow-1), transparent 60%),
radial-gradient(900px 600px at 100% 0%, var(--glow-2), transparent 60%),
radial-gradient(800px 600px at 50% 120%, var(--glow-1), transparent 60%),
var(--bg);
background-attachment: fixed;
}
html[data-theme="aurora"] .sidebar,
html[data-theme="aurora"] .panel,
html[data-theme="aurora"] .banner,
html[data-theme="aurora"] .statbar,
html[data-theme="aurora"] .domain-row,
html[data-theme="aurora"] .folder-card,
html[data-theme="aurora"] .modal,
html[data-theme="aurora"] .login-card,
html[data-theme="aurora"] .toast { backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
html[data-theme="aurora"] .logo-mark,
html[data-theme="aurora"] .btn.accent,
html[data-theme="aurora"] .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
html[data-theme="aurora"] .topbar h1,
html[data-theme="aurora"] .brand-title {
background: linear-gradient(90deg, var(--text), var(--accent) 60%, var(--accent-2));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ============================= Neon Grid ============================ */
html[data-theme="neon"][data-mode="dark"] {
--bg: #020406; --bg-2: #04080c;
--panel: #060c11; --panel-2: #08121a; --card: #07101a;
--border: #0f2a33; --border-soft: #0a1c24;
--text: #d9fbff; --text-dim: #6fa3ad; --text-faint: #3f6a73;
--accent: #00f0ff; --accent-2: #00a6ff;
--green: #39ff88; --amber: #ffd23f; --red: #ff3b6b; --pink: #ff2bd6;
--on-accent: #001417; --solid-bg: #00f0ff; --solid-text: #001417;
--overlay: rgba(0, 6, 10, 0.75); --topbar-bg: rgba(2, 4, 6, 0.82); --tip-bg: #04090d;
--switch-off: #12303a; --hover-border: #00f0ff; --dot-off: #1b3f49;
--amber-text: #ffe27a; --green-text: #8dffbd;
--glow-1: rgba(0, 240, 255, 0.08); --glow-2: rgba(255, 43, 214, 0.06);
--chart-grid: #0b222b; --chart-label: #3f6a73;
--glow: rgba(0, 240, 255, 0.45); --ring: rgba(0, 240, 255, 0.8);
--grid-line: rgba(0, 240, 255, 0.05);
--shadow: 0 0 0 1px #0f2a33, 0 20px 50px -20px rgba(0, 0, 0, 0.9); --shadow-lg: 0 0 60px -20px rgba(0, 240, 255, 0.35);
--radius: 8px;
color-scheme: dark;
}
html[data-theme="neon"][data-mode="light"] {
--bg: #eef6f8; --bg-2: #e5f1f4;
--panel: #ffffff; --panel-2: #f2f9fb; --card: #ffffff;
--border: #c6e0e6; --border-soft: #dcecf0;
--text: #062027; --text-dim: #3f6670; --text-faint: #7d9ca4;
--accent: #008ea3; --accent-2: #0066cc;
--green: #00a352; --amber: #b07800; --red: #d6204d; --pink: #c0189e;
--on-accent: #ffffff; --solid-bg: #062027; --solid-text: #e6fdff;
--overlay: rgba(6, 32, 39, 0.3); --topbar-bg: rgba(238, 246, 248, 0.85); --tip-bg: #ffffff;
--switch-off: #c3dbe1; --hover-border: #008ea3; --dot-off: #b7d3da;
--amber-text: #7a5300; --green-text: #00703a;
--glow-1: rgba(0, 142, 163, 0.08); --glow-2: rgba(192, 24, 158, 0.05);
--chart-grid: #dcecf0; --chart-label: #7d9ca4;
--glow: rgba(0, 142, 163, 0.28); --ring: rgba(0, 142, 163, 0.6);
--grid-line: rgba(0, 90, 110, 0.06);
--shadow: 0 0 0 1px #c6e0e6, 0 16px 40px -20px rgba(0, 60, 80, 0.25); --shadow-lg: 0 30px 70px -30px rgba(0, 80, 100, 0.35);
--radius: 8px;
color-scheme: light;
}
html[data-theme="neon"] body {
background:
linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 36px 36px,
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 36px 36px,
radial-gradient(1000px 600px at 50% -20%, var(--glow-1), transparent 70%),
var(--bg);
background-attachment: fixed;
}
html[data-theme="neon"] .topbar h1,
html[data-theme="neon"] .section-name,
html[data-theme="neon"] .panel-head h2,
html[data-theme="neon"] .folder-name,
html[data-theme="neon"] .vt-title { font-family: var(--mono); letter-spacing: 1px; text-transform: uppercase; }
html[data-theme="neon"] .topbar h1 { font-size: 17px; text-shadow: 0 0 18px var(--glow); }
html[data-theme="neon"] .btn.accent,
html[data-theme="neon"] .btn-primary,
html[data-theme="neon"] .logo-mark { background: var(--accent); box-shadow: 0 0 18px var(--glow); }
html[data-theme="neon"] .switch.on { background: var(--accent); }
html[data-theme="neon"] .panel,
html[data-theme="neon"] .banner,
html[data-theme="neon"] .statbar { position: relative; }
/* Corner brackets on the big surfaces */
html[data-theme="neon"] .panel::before,
html[data-theme="neon"] .banner::before,
html[data-theme="neon"] .statbar::before {
content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
background:
linear-gradient(var(--accent), var(--accent)) top left / 14px 1px no-repeat,
linear-gradient(var(--accent), var(--accent)) top left / 1px 14px no-repeat,
linear-gradient(var(--accent), var(--accent)) bottom right / 14px 1px no-repeat,
linear-gradient(var(--accent), var(--accent)) bottom right / 1px 14px no-repeat;
opacity: .55; transition: opacity .2s;
}
html[data-theme="neon"] .panel:hover::before,
html[data-theme="neon"] .banner:hover::before,
html[data-theme="neon"] .statbar:hover::before { opacity: 1; }
/* ============================= Mono Luxe ============================ */
html[data-theme="luxe"][data-mode="dark"] {
--bg: #0b0b0c; --bg-2: #0f0f11;
--panel: #141416; --panel-2: #1a1a1d; --card: #17171a;
--border: #242428; --border-soft: #1c1c1f;
--text: #f3f2ef; --text-dim: #a19f9a; --text-faint: #6c6a66;
--accent: #d8b46a; --accent-2: #b8924a;
--green: #7fcf9b; --amber: #e3b75c; --red: #ef7b7b; --pink: #d7a1c6;
--on-accent: #1a1406; --solid-bg: #f3f2ef; --solid-text: #0b0b0c;
--overlay: rgba(0, 0, 0, 0.6); --topbar-bg: rgba(11, 11, 12, 0.8); --tip-bg: #19191c;
--switch-off: #2b2b30; --hover-border: #3a3a40; --dot-off: #34343a;
--amber-text: #efd29a; --green-text: #b6e6c6;
--glow-1: rgba(216, 180, 106, 0.06); --glow-2: rgba(255, 255, 255, 0.03);
--chart-grid: #1f1f23; --chart-label: #6c6a66;
--glow: rgba(216, 180, 106, 0.18); --ring: rgba(216, 180, 106, 0.5);
--shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 20px 40px -20px rgba(0, 0, 0, 0.8);
--shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
--radius: 18px;
color-scheme: dark;
}
html[data-theme="luxe"][data-mode="light"] {
--bg: #f6f5f2; --bg-2: #fbfaf8;
--panel: #ffffff; --panel-2: #f7f6f3; --card: #ffffff;
--border: #e9e7e2; --border-soft: #f0eee9;
--text: #191817; --text-dim: #6b6862; --text-faint: #a29f98;
--accent: #a8822f; --accent-2: #8c6a22;
--green: #2f8a57; --amber: #b07a12; --red: #c94848; --pink: #a4508a;
--on-accent: #ffffff; --solid-bg: #191817; --solid-text: #ffffff;
--overlay: rgba(25, 24, 23, 0.22); --topbar-bg: rgba(246, 245, 242, 0.82); --tip-bg: #ffffff;
--switch-off: #dedbd4; --hover-border: #d6d2c8; --dot-off: #dcd9d2;
--amber-text: #7d5608; --green-text: #1f6b40;
--glow-1: rgba(168, 130, 47, 0.06); --glow-2: rgba(0, 0, 0, 0.02);
--chart-grid: #efede8; --chart-label: #a29f98;
--glow: rgba(168, 130, 47, 0.16); --ring: rgba(168, 130, 47, 0.45);
--shadow: 0 1px 2px rgba(25, 24, 23, 0.04), 0 18px 36px -22px rgba(25, 24, 23, 0.25);
--shadow-lg: 0 40px 80px -36px rgba(25, 24, 23, 0.35);
--radius: 18px;
color-scheme: light;
}
html[data-theme="luxe"] body { background: var(--bg); }
html[data-theme="luxe"] .panel,
html[data-theme="luxe"] .banner,
html[data-theme="luxe"] .statbar,
html[data-theme="luxe"] .domain-row,
html[data-theme="luxe"] .folder-card { box-shadow: var(--shadow); }
html[data-theme="luxe"] .view { padding: 32px 36px 72px; }
html[data-theme="luxe"] .topbar h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; }
html[data-theme="luxe"] .btn.accent,
html[data-theme="luxe"] .btn-primary,
html[data-theme="luxe"] .logo-mark { background: linear-gradient(160deg, var(--accent), var(--accent-2)); }
html[data-theme="luxe"] .switch.on { background: var(--accent); }
/* ============================ Shared polish ============================ */
html[data-theme] body { transition: background-color .3s ease, color .3s ease; }
html[data-theme] .app { background: transparent; }
/* Smooth state changes everywhere you can point at */
html[data-theme] :is(.panel, .banner, .statbar, .domain-row, .folder-card, .tpl-item, .move-opt, .vt-domain,
.btn, .pill-btn, .act, .seg, .range-tab, .nav-item, .icon-btn, .switch, .status-pill, .vt-toggle,
.newsection-btn, input, select, textarea, tr) {
transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}
/* Surfaces light up on hover */
html[data-theme] :is(.panel, .banner, .statbar):hover {
border-color: var(--hover-border);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 18px 50px -24px var(--glow);
}
html[data-theme] :is(.domain-row, .folder-card):hover {
border-color: var(--hover-border);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 14px 36px -16px var(--glow);
transform: translateY(-2px);
}
html[data-theme] .folder-card:hover .folder-ic { filter: drop-shadow(0 0 10px var(--glow)); }
/* Buttons glow and press */
html[data-theme] :is(.btn, .pill-btn, .icon-btn, .newsection-btn):hover {
border-color: var(--hover-border);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent), 0 6px 18px -8px var(--glow);
}
html[data-theme] :is(.btn.accent, .btn-primary, .pill-btn.solid):hover { box-shadow: 0 8px 26px -6px var(--glow); filter: brightness(1.08); }
html[data-theme] :is(.btn.danger, .pill-btn.danger):hover { box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--red) 60%, transparent); border-color: var(--red); }
html[data-theme] .btn.approve:hover { box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--green) 60%, transparent); border-color: var(--green); }
html[data-theme] :is(.btn, .pill-btn, .icon-btn, .act, .seg, .range-tab, .switch, .folder-card, .move-opt, .tpl-item):active { transform: scale(.97); }
html[data-theme] .act:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); opacity: 1; }
/* Sidebar */
html[data-theme] .nav-item { position: relative; }
html[data-theme] .nav-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); }
html[data-theme] .nav-item:hover .ic { color: var(--accent); text-shadow: 0 0 12px var(--glow); }
html[data-theme] .nav-item.active {
background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 85%);
box-shadow: inset 2px 0 0 var(--accent);
}
html[data-theme] .nav-item.active .ic { color: var(--accent); text-shadow: 0 0 14px var(--glow); }
/* Rows, lists, pickers */
html[data-theme] tr.clickable:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
html[data-theme] :is(.tpl-item, .vt-domain):hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
html[data-theme] .move-opt:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
html[data-theme] .seg:hover:not(.disabled), html[data-theme] .range-tab:hover { color: var(--accent); }
/* Inputs: glowing focus ring */
html[data-theme] :is(input, select, textarea):focus,
html[data-theme] .dom-search:focus {
outline: none; border-color: var(--accent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
html[data-theme] :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* Switches and live indicators */
html[data-theme] .switch.on { box-shadow: 0 0 14px -2px var(--glow); }
html[data-theme] .switch:hover:not(:disabled) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
html[data-theme] .live-dot.on { animation: livePulse 2s ease-in-out infinite; }
html[data-theme] .nav-badge { box-shadow: 0 0 12px -2px color-mix(in srgb, var(--amber) 70%, transparent); animation: badgeGlow 2.4s ease-in-out infinite; }
html[data-theme] .badge.pending::before { animation: blink 1.6s ease-in-out infinite; }
@keyframes livePulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 0%, transparent); }
}
@keyframes badgeGlow { 50% { box-shadow: 0 0 18px 0 color-mix(in srgb, var(--amber) 55%, transparent); } }
@keyframes blink { 50% { opacity: .35; } }
/* Motion: content eases in, lists cascade, modals zoom */
html[data-theme] #view > * { animation: riseIn .35s cubic-bezier(.2, .7, .2, 1) backwards; }
html[data-theme] #view > *:nth-child(2) { animation-delay: .04s; }
html[data-theme] #view > *:nth-child(3) { animation-delay: .08s; }
html[data-theme] #view > *:nth-child(4) { animation-delay: .12s; }
html[data-theme] :is(.section-rows > .domain-row, .folder-grid > .folder-card, .tpl-list > .tpl-item, .vt-domains > .vt-domain, .move-list > *) {
animation: riseIn .4s cubic-bezier(.2, .7, .2, 1) backwards;
}
html[data-theme] :is(.section-rows > .domain-row, .folder-grid > .folder-card, .tpl-list > .tpl-item, .vt-domains > .vt-domain, .move-list > *):nth-child(2) { animation-delay: .04s; }
html[data-theme] :is(.section-rows > .domain-row, .folder-grid > .folder-card, .tpl-list > .tpl-item, .vt-domains > .vt-domain, .move-list > *):nth-child(3) { animation-delay: .08s; }
html[data-theme] :is(.section-rows > .domain-row, .folder-grid > .folder-card, .tpl-list > .tpl-item, .vt-domains > .vt-domain, .move-list > *):nth-child(4) { animation-delay: .12s; }
html[data-theme] :is(.section-rows > .domain-row, .folder-grid > .folder-card, .tpl-list > .tpl-item, .vt-domains > .vt-domain, .move-list > *):nth-child(n+5) { animation-delay: .16s; }
html[data-theme] .modal-overlay { animation: fadeIn .2s ease both; }
html[data-theme] .modal-overlay > * { animation: zoomIn .28s cubic-bezier(.2, .8, .2, 1.1) backwards; box-shadow: var(--shadow-lg); }
html[data-theme] .toast { animation: toastIn .35s cubic-bezier(.2, .8, .2, 1.2) backwards; box-shadow: var(--shadow); }
html[data-theme] .login-card { animation: zoomIn .5s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: none; } }
/* Chart line glow */
html[data-theme="neon"] .tc-svg path[style*="stroke"],
html[data-theme="aurora"] .tc-svg path[style*="stroke"] { filter: drop-shadow(0 0 5px var(--glow)); }
/* Top bar controls (light/dark + sound) */
.topbar-right { display: flex; align-items: center; gap: 8px; }
.tb-btn {
width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
background: var(--panel); border: 1px solid var(--border); color: var(--text-dim);
}
.tb-btn svg { width: 17px; height: 17px; }
.tb-btn:hover { color: var(--accent); }
/* Settings > Theme */
.settings { max-width: 980px; }
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.look-card {
text-align: left; padding: 0; overflow: hidden; cursor: pointer; font-family: var(--sans); color: var(--text);
background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.look-card:hover { border-color: var(--hover-border); box-shadow: 0 14px 36px -16px var(--glow); transform: translateY(-2px); }
.look-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 36px -16px var(--glow); }
.look-meta { padding: 12px 14px 14px; }
.look-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.look-check { font-size: 11px; font-weight: 600; color: var(--accent); }
.look-desc { font-size: 12px; margin-top: 3px; line-height: 1.45; }
/* Miniature of the panel drawn in the look's own colours */
.look-preview { display: flex; height: 120px; background: var(--p-bg); border-bottom: 1px solid var(--border); }
.lp-side { width: 26%; background: var(--p-side); border-right: 1px solid var(--p-line); padding: 10px 7px; display: flex; flex-direction: column; gap: 6px; }
.lp-side i { display: block; height: 5px; border-radius: 3px; background: var(--p-line); }
.lp-side .lp-logo { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--p-accent), var(--p-accent2)); margin-bottom: 4px; }
.lp-side .lp-on { background: var(--p-accent); opacity: .8; }
.lp-main { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.lp-bar { height: 7px; width: 40%; border-radius: 4px; background: linear-gradient(90deg, var(--p-accent), var(--p-accent2)); opacity: .8; }
.lp-row { display: flex; gap: 7px; flex: 1; }
.lp-card { flex: 1; border-radius: 6px; background: var(--p-panel); border: 1px solid var(--p-line); position: relative; overflow: hidden; }
.lp-chart { flex: 1.7; }
.lp-chart i { position: absolute; left: 8%; right: 8%; bottom: 22%; height: 45%; border-bottom: 2px solid var(--p-accent); border-right: 2px solid var(--p-accent); border-radius: 0 0 40% 0; opacity: .85; }
.lp-wide { flex: none; height: 18px; display: flex; align-items: center; padding: 0 8px; }
.lp-wide b { display: block; width: 26px; height: 9px; border-radius: 9px; background: var(--p-accent); margin-left: auto; }
.settings-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after {
animation: none !important; transition: none !important;
}
html[data-theme] :is(.domain-row, .folder-card):hover { transform: none; }
}