/* Silver light and motion. Kept separate from layout and tweak state styles. */
@property --edge-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root {
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.2, .8, .25, 1.15);
    --motion-fast: 180ms var(--ease-out);
    --motion-base: 320ms var(--ease-out);
    --glow-soft: 0 0 28px #ffffff0a;
    --glow-bright: 0 0 24px #ffffff18, 0 0 60px #ffffff07;
    --line: #ffffff20;
}

/* Only transforms and opacity run continuously; large gradients stay static. */
.ambient-background { background: #101012; }
.ambient-grid {
    inset: 0;
    opacity: .16;
    background-size: 72px 72px;
    mask-image: linear-gradient(transparent 4%, #000 68%, transparent);
    transform: none;
    animation: none;
}
.ambient-light {
    top: -280px;
    right: -100px;
    width: 1000px;
    height: 900px;
    background: radial-gradient(ellipse, #ffffff1b, #ffffff04 45%, transparent 68%);
    animation: light-float 19s ease-in-out infinite alternate;
}
.ambient-orb {
    position: absolute;
    left: 14%;
    bottom: -380px;
    width: 820px;
    height: 820px;
    border-radius: 50%;
    background: radial-gradient(circle, #dce3f012, transparent 66%);
    animation: light-float 23s -8s ease-in-out infinite alternate-reverse;
}
.ambient-horizon {
    position: absolute;
    top: 35%;
    left: 38%;
    width: 58%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffffff32, transparent);
    box-shadow: 0 0 35px 3px #ffffff08;
    transform: rotate(-32deg);
    animation: horizon-drift 22s ease-in-out infinite alternate;
}
.app-container { background: transparent; }
.sidebar { border-right-color: #ffffff19; background: linear-gradient(165deg, #1a1a1cee, #101012f5 70%); }
.sidebar::before { background: radial-gradient(ellipse at 50% 25%, #ffffff14, transparent 62%); filter: none; }
.main-content { background: linear-gradient(135deg, #18181bbf, #17171980 55%, #111113b3); animation: none; }
.brand-logo, .dashboard-logo {
    border-color: #ffffff52;
    box-shadow: 0 0 0 4px #ffffff04, 0 0 26px #ffffff12;
    transition: transform 450ms var(--ease-spring), box-shadow 450ms var(--ease-out);
}
.brand:hover .brand-logo { transform: rotate(-9deg) scale(1.07); box-shadow: 0 0 0 5px #ffffff08, 0 0 30px #ffffff29; }
.brand-copy strong { text-shadow: 0 0 22px #ffffff35; }
.topbar { position: relative; border-bottom-color: #ffffff13; }
.topbar::after {
    position: absolute;
    right: 8%;
    bottom: -1px;
    width: 30%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffffff65, transparent);
    box-shadow: 0 0 12px #ffffff20;
    pointer-events: none;
    content: "";
    animation: topbar-glint 12s ease-in-out infinite alternate;
}
.nav-link { transition: background var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base), transform 250ms var(--ease-spring); }
.nav-link .icon { transition: color var(--motion-base), transform var(--motion-base), filter var(--motion-base); }
.nav-link:hover { transform: translateX(3px); border-color: #ffffff1a; background: #ffffff09; box-shadow: inset 0 0 22px #ffffff07, 0 0 22px #ffffff05; }
.nav-link:hover .icon { transform: scale(1.12); filter: drop-shadow(0 0 5px #ffffff65); color: #fff; }
.nav-link[aria-current="page"] {
    border-color: #ffffff45;
    background: linear-gradient(105deg, #ffffff21, #ffffff08);
    box-shadow: inset 0 1px 0 #ffffff12, 0 0 22px #ffffff0d;
}
.nav-link[aria-current="page"]::after { top: 10px; bottom: 10px; right: auto; left: -1px; width: 2px; border-radius: 3px; box-shadow: 0 0 8px #fff, 0 0 18px #ffffff70; }
.nav-link[aria-current="page"] .icon { filter: drop-shadow(0 0 6px #ffffff70); }
.nav-link:active { transform: translateX(2px) scale(.98); }

/* Shared surface lighting follows the pointer without moving the content. */
:is(.dashboard-heading, .dashboard-panel, .stat-card, .folder-group, .folder-item, .cpu-focus-card, .restore-form, .restore-history) {
    position: relative;
    border-color: #ffffff26;
    background: linear-gradient(135deg, #222225f5, #141416f5 75%);
    box-shadow: inset 0 1px 0 #ffffff07, 0 12px 30px #00000022, var(--glow-soft);
    transition: border-color 300ms var(--ease-out), box-shadow 350ms var(--ease-out), transform 350ms var(--ease-out);
}
:is(.dashboard-heading, .dashboard-panel, .stat-card, .folder-group, .folder-item, .cpu-focus-card, .restore-form, .restore-history)::before {
    position: absolute;
    inset: -1px 15% auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffffff65, transparent);
    pointer-events: none;
    content: "";
}
:is(.dashboard-heading, .dashboard-panel, .stat-card, .folder-item, .cpu-focus-card, .restore-form, .restore-history)::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(340px circle at var(--spot-x, 50%) var(--spot-y, 0%), #ffffff14, transparent 72%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
    content: "";
}
:is(.dashboard-heading, .dashboard-panel, .stat-card, .folder-item, .cpu-focus-card, .restore-form, .restore-history).is-spotlit::after { opacity: 1; }
:is(.dashboard-panel, .stat-card, .cpu-focus-card, .restore-form, .restore-history):hover { border-color: #ffffff48; box-shadow: inset 0 1px 0 #ffffff12, 0 16px 35px #00000035, var(--glow-bright); }

.dashboard-heading { min-height: 130px; gap: 18px; margin-bottom: 18px; padding: 22px; overflow: hidden; border: 1px solid #ffffff30; border-radius: 20px; }
.dashboard-heading-copy { position: relative; z-index: 1; }
.dashboard-heading .dashboard-logo { position: relative; z-index: 1; flex-shrink: 0; width: 62px; height: 62px; }
.dashboard-heading h1 { margin-top: 7px; text-shadow: 0 0 30px #ffffff22; }
.dashboard-heading .eyebrow { color: #dedee4; font-size: 9px; letter-spacing: .23em; }
.dashboard-heading p { max-width: 520px; font-size: 12px; color: #b1b1ba; }
.hero-orbit { position: relative; flex: 0 0 150px; height: 110px; margin: -16px 8px -16px auto; pointer-events: none; }
.hero-orbit::before { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, #ffffff14, transparent 68%); content: ""; animation: core-breathe 6s ease-in-out infinite; }
.orbit-ring { position: absolute; inset: 50%; border: 1px solid #ffffff24; border-radius: 50%; translate: -50% -50%; }
.orbit-ring::after { position: absolute; top: 50%; left: -3px; width: 5px; height: 5px; border-radius: 50%; background: #f2f2f5; box-shadow: 0 0 8px 2px #ffffff70, 0 0 20px #ffffff45; content: ""; }
.orbit-ring-outer { width: 158px; height: 158px; border-style: dashed; border-color: #ffffff12; animation: orbit-turn 48s linear infinite; }
.orbit-ring-outer::after { width: 3px; height: 3px; opacity: .6; }
.orbit-ring-middle { width: 120px; height: 120px; border-top-color: #ffffff69; box-shadow: 0 0 24px #ffffff05; animation: orbit-turn 22s linear infinite reverse; }
.orbit-ring-inner { width: 86px; height: 86px; border-color: #ffffff38; animation: orbit-turn 14s linear infinite; }
.orbit-ring-inner::after { width: 4px; height: 4px; }
.orbit-core { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 54px; height: 54px; translate: -50% -50%; border: 1px solid #ffffff65; border-radius: 16px; background: linear-gradient(145deg, #49494e, #202023); box-shadow: inset 0 1px #ffffff45, 0 0 20px #ffffff14, 0 0 50px #ffffff12; }
.orbit-core .icon { width: 28px; height: 28px; filter: drop-shadow(0 0 5px #ffffff80); }
.pages.is-home, .pages.is-cpu { overflow-y: auto; }
.page.active { animation: none; }
.dashboard-panel { animation: surface-enter 650ms var(--ease-out) backwards; }
.social-panel { animation-delay: 80ms; }
.panel-index { color: #b8b8c2; font-size: 9px; letter-spacing: .19em; }
.panel-heading { border-bottom-color: #ffffff15; }
.tutorial-steps li { animation: surface-enter 550ms var(--ease-out) backwards; }
.tutorial-steps li:nth-child(1) { animation-delay: 100ms; }
.tutorial-steps li:nth-child(2) { animation-delay: 160ms; }
.tutorial-steps li:nth-child(3) { animation-delay: 220ms; }
.tutorial-steps li:nth-child(4) { animation-delay: 280ms; }
.step-number { border-color: #ffffff30; background: linear-gradient(145deg, #ffffff12, #ffffff04); box-shadow: inset 0 1px #ffffff0d, 0 0 14px #ffffff05; transition: transform 300ms var(--ease-spring), box-shadow 300ms ease; }
.tutorial-steps li:hover .step-number { transform: translateY(-2px) rotate(-5deg); box-shadow: 0 0 20px #ffffff20; }
.social-links a { border-color: #ffffff20; background: #ffffff04; transition: transform 300ms var(--ease-spring), border-color var(--motion-base), box-shadow var(--motion-base), background var(--motion-base); }
.social-links a:hover { transform: translateY(-3px); border-color: #ffffff50; background: #ffffff0b; box-shadow: 0 4px 18px #ffffff0c; }
.social-links a .icon { transition: transform var(--motion-base), color var(--motion-base); }
.social-links a:hover .icon { transform: translateX(3px); color: #fff; }
.stat-card { animation: surface-enter 600ms var(--ease-out) backwards; animation-delay: 150ms; }
.stat-card:nth-child(2) { animation-delay: 220ms; }
.stat-card:nth-child(3) { animation-delay: 290ms; }
.stat-card:hover { transform: translateY(-3px); }
.stat-header .icon { filter: drop-shadow(0 0 5px #ffffff45); }
.stat-value strong { text-shadow: 0 0 20px #ffffff25; }
.progress-track { height: 5px; overflow: visible; background: #ffffff0a; }
.progress-fill { position: relative; background: linear-gradient(90deg, #92929e, #f4f4ff); box-shadow: 0 0 10px #ffffff28; transition: width 700ms var(--ease-out); }
.progress-fill::after { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, #ffffffaa); opacity: .8; content: ""; }
.stat-card:nth-child(2) .progress-fill { background: linear-gradient(90deg, #80808c, #dadade); }
.stat-card:nth-child(3) .progress-fill { background: linear-gradient(90deg, #71717d, #babac8); }

.category-intro h1, .section-heading h2 { text-shadow: 0 0 28px #ffffff13; }
.folder-group { box-shadow: inset 0 1px #ffffff08, 0 8px 24px #00000020; }
.folder-group-heading { padding-bottom: 8px; border-bottom: 1px solid #ffffff0f; }
.folder-item { background: linear-gradient(135deg, #303035, #1e1e22); animation: surface-enter 500ms var(--ease-out) backwards; animation-delay: var(--tile-delay, 0ms); }
.folder-item::after { background: radial-gradient(200px circle at var(--spot-x, 50%) var(--spot-y, 0%), #ffffff18, transparent 72%); }
.folder-item:hover, .folder-item:focus-within { transform: translateY(-2px); border-color: #ffffff80; background: linear-gradient(135deg, #37373d, #242429); box-shadow: inset 0 1px #ffffff1a, 0 5px 20px #00000045, 0 0 18px #ffffff10; }
.folder-item:active { transform: scale(.985); transition-duration: 90ms; }
.folder-item.is-applied { border-color: #51df9a55; box-shadow: inset 0 1px #51df9a12, 0 0 15px #51df9a07; }
.folder-item.is-changed { border-color: #8a7043; }
.folder-item-info { transition: transform 250ms var(--ease-spring), box-shadow var(--motion-base), border-color var(--motion-base); }
.folder-item-info:hover { transform: scale(1.1); box-shadow: 0 0 12px #ffffff25; }
.search-box { border-color: #ffffff24; background: #111113c7; transition: border-color var(--motion-base), box-shadow var(--motion-base); }
.search-box:focus-within { border-color: #ffffff85; box-shadow: 0 0 0 3px #ffffff06, 0 0 25px #ffffff09; }
.undo-folder, .restore-tab { transition: background var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base), transform 250ms var(--ease-spring); }
.undo-folder:hover, .restore-tab:hover { transform: translateY(-1px); }
.undo-folder[aria-pressed="true"], .restore-tab[aria-selected="true"] { border-color: #ffffff55; background: linear-gradient(135deg, #ffffff20, #ffffff0b); box-shadow: inset 0 1px #ffffff15, 0 0 18px #ffffff0a; }
.undo-item { transition: border-color var(--motion-base), background var(--motion-base), box-shadow var(--motion-base), transform var(--motion-base); }
.undo-item:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 18px #ffffff12; }
.nav-link, .folder-item-action, .undo-folder, .undo-item, .restore-tab { position: relative; overflow: hidden; }
.cpu-focus-card { animation: surface-enter 650ms var(--ease-out) backwards; }
.cpu-icon { position: relative; background: linear-gradient(145deg, #414148, #202025); border-color: #ffffff65; box-shadow: inset 0 1px #ffffff30, 0 0 30px #ffffff12, 0 0 65px #ffffff08; animation: cpu-float 6s ease-in-out infinite; }
.cpu-icon::before, .cpu-icon::after { position: absolute; inset: -10px; border: 1px solid #ffffff16; border-radius: 29px; pointer-events: none; content: ""; }
.cpu-icon::after { inset: -20px; border-color: #ffffff09; border-radius: 35px; }
.cpu-icon .icon { filter: drop-shadow(0 0 9px #ffffff65); }

:is(.button, .action-button, .warning-toggle, .tutorial-link) { position: relative; overflow: hidden; transition: transform 250ms var(--ease-spring), background var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base); }
.button-secondary, .revert-button, .warning-toggle, .tutorial-link {
    border-color: #ffffff35;
    border-top-color: #ffffff68;
    background: linear-gradient(180deg, #ffffff13, transparent 48%), linear-gradient(135deg, #36363ce8, #212125ed);
    box-shadow: inset 0 1px 0 #ffffff1c, inset 0 -2px 2px #00000038, 0 3px 8px #00000030;
}
.button:hover:not(:disabled), .action-button:hover:not(:disabled), .warning-toggle:hover, .tutorial-link:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 #ffffff30, inset 0 -2px 2px #00000028, 0 6px 16px #00000040, 0 0 22px #ffffff18;
}
.apply-button, .button-primary {
    border-color: #ffffffa6;
    border-top-color: #fff;
    background: linear-gradient(180deg, #ffffff70, transparent 45%, #18182412), linear-gradient(115deg, #d0d0dc, #f7f7fc 55%, #c8c8d4);
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 1px #0000001f, 0 3px 8px #00000035, 0 0 20px #ffffff17;
}
.apply-button:hover:not(:disabled), .button-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffffffa6, transparent 45%, #18182412), linear-gradient(115deg, #dcdce7, #fff 55%, #d1d1dc);
    box-shadow: inset 0 1px #fff, inset 0 -2px 1px #00000018, 0 7px 20px #00000040, 0 0 28px #ffffff30;
}

/* A single light travels along the border on hover or keyboard focus. */
:is(.button, .action-button, .warning-toggle, .tutorial-link, .info-button, .folder-item-info, .folder-item-action, .undo-folder, .undo-item, .restore-tab)::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--edge-angle), transparent 0% 62%, #ffffff18 73%, var(--edge-peak, #fff) 86%, transparent 97%);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    content: "";
}
:is(.button, .action-button, .warning-toggle, .tutorial-link, .info-button, .folder-item-info, .folder-item-action, .undo-folder, .undo-item, .restore-tab):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"])::after {
    animation: edge-orbit 1100ms ease-in-out;
}
.folder-item-action { border-radius: inherit; }
.info-button:not(.cpu-info-button) { position: relative; }
.info-button, .folder-item-info {
    width: 26px;
    height: 26px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ffffff4d;
    border-top-color: #ffffff8c;
    background: linear-gradient(160deg, #ffffff24, #ffffff05 46%, #00000021), #29292f;
    color: #f3f3fa;
    box-shadow: inset 0 1px 1px #ffffff26, inset 0 -2px 2px #00000038, 0 3px 8px #0000003b, 0 0 12px #ffffff08;
    transition: transform 250ms var(--ease-spring), box-shadow var(--motion-base), border-color var(--motion-base), background var(--motion-base);
}
.folder-item-info { z-index: 1; width: 28px; height: 28px; top: 8px; right: 8px; }
.cpu-info-button { width: 32px; height: 32px; }
.info-button .icon, .folder-item-info .icon { width: 14px; height: 14px; transform-origin: center; }
.info-button:hover, .info-button:focus-visible, .folder-item-info:hover, .folder-item-info:focus-visible {
    transform: translateY(-1px) scale(1.06);
    border-color: #ffffffa6;
    background: linear-gradient(160deg, #ffffff38, #ffffff0d 46%, #00000014), #34343c;
    box-shadow: inset 0 1px 1px #ffffff40, inset 0 -2px 2px #00000028, 0 5px 12px #00000045, 0 0 18px #ffffff28;
}
.info-button.has-warning { --edge-peak: var(--amber); color: var(--amber); }
:is(.info-button, .folder-item-info):is(:hover, :focus-visible) .icon { animation: info-peek 600ms var(--ease-out); }
.info-button[aria-expanded="true"] { border-color: #fff; box-shadow: inset 0 1px #ffffff3d, 0 0 18px #ffffff20; }
.info-button:active, .folder-item-info:active { transform: scale(.94); }

/* Decorative masks leave accessible names and loading spinners intact. */
.apply-button { --button-glyph: url("assets/button-mask-1.svg"); }
.revert-button, [data-button-icon="refresh"] { --button-glyph: url("assets/button-mask-2.svg"); }
.apply-button::before, .revert-button::before, [data-button-icon]::before {
    display: block;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-right: 7px;
    background: var(--button-glyph) center / contain no-repeat;
    content: "";
}
.apply-button:is(:hover, :focus-visible):not(:disabled):not(.is-processing)::before { animation: bolt-charge 650ms var(--ease-out); }
:is(.revert-button, [data-button-icon="refresh"]):is(:hover, :focus-visible):not(:disabled):not(.is-processing)::before { animation: undo-turn 700ms var(--ease-out); }
.action-button.is-processing::before { mask: none; background: transparent; }
.tweak-card-actions .action-button::before { width: 11px; height: 11px; margin-right: 4px; }
.app-update [data-button-icon]::before { width: 12px; height: 12px; margin-right: 5px; }

.button-tooltip {
    position: fixed;
    z-index: 180;
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: min(260px, calc(100vw - 24px));
    padding: 8px 11px;
    border: 1px solid #ffffff48;
    border-top-color: #ffffff85;
    border-radius: 9px;
    background: linear-gradient(160deg, #3a3a42f5, #1c1c22fa);
    box-shadow: inset 0 1px #ffffff15, 0 6px 20px #00000060, 0 0 20px #ffffff0b;
    color: #f2f2f8;
    font-size: 11px;
    font-weight: 550;
    line-height: 1.4;
    animation: tooltip-arrive 180ms var(--ease-out) backwards;
}
.button-tooltip .icon { width: 13px; height: 13px; color: #c6c6d2; }
.button-tooltip[data-side="below"] { --tooltip-offset: -4px; }
.warning-toggle[aria-pressed="true"] { border-color: #ffffff50; box-shadow: 0 0 15px #ffffff08; }
.warning-toggle[aria-pressed="true"] .warning-toggle-indicator { box-shadow: 0 0 4px #51df9a99, 0 0 12px #51df9a55; }
.button:active:not(:disabled), .action-button:active:not(:disabled), .warning-toggle:active { transform: scale(.975); }
.motion-ripple { position: absolute; z-index: 2; border-radius: 50%; background: radial-gradient(circle, #ffffff30, #ffffff0a 60%, transparent 72%); pointer-events: none; animation: click-wave 650ms var(--ease-out) forwards; }
.apply-button .motion-ripple, .button-primary .motion-ripple { background: radial-gradient(circle, #00000024, transparent 70%); }
.connection-indicator.is-connected .connection-dot { position: relative; box-shadow: 0 0 8px #51df9a80; }
.connection-indicator.is-connected .connection-dot::after { position: absolute; inset: -3px; border: 1px solid #51df9a60; border-radius: 50%; content: ""; animation: status-halo 3s ease-out infinite; }

.warning-overlay, .operation-toast { background: #050507a3; backdrop-filter: blur(10px); animation-duration: 250ms; }
.warning-dialog, .operation-panel { border-color: #ffffff4d; border-radius: 18px; background: linear-gradient(145deg, #2a2a30, #18181d 75%); box-shadow: 0 30px 100px #00000099, 0 0 60px #ffffff0c, inset 0 1px #ffffff12; animation: dialog-arrive 420ms var(--ease-out) backwards; }
.operation-panel::before { background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 15px #ffffff50; }
.toast-indicator { box-shadow: 0 0 22px #ffffff15; }
.operation-toast.is-success .toast-indicator { box-shadow: 0 0 22px #51df9a25; }
.operation-toast.is-error .toast-indicator { box-shadow: 0 0 22px #ff818b25; }
.operation-toast.is-success .operation-panel::before { box-shadow: 0 0 16px #51df9a55; }
.operation-toast.is-error .operation-panel::before { box-shadow: 0 0 16px #ff818b55; }

@keyframes light-float { from { transform: translate3d(0, 0, 0) scale(1); opacity: .65; } to { transform: translate3d(-90px, 70px, 0) scale(1.12); opacity: 1; } }
@keyframes horizon-drift { from { transform: translateY(-50px) rotate(-32deg); opacity: .25; } to { transform: translateY(100px) rotate(-32deg); opacity: .75; } }
@keyframes topbar-glint { from { transform: translateX(-90%); opacity: .35; } to { transform: translateX(0); opacity: .9; } }
@keyframes surface-enter { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes core-breathe { 50% { opacity: .5; transform: scale(.88); } }
@keyframes cpu-float { 50% { transform: translateY(-5px); } }
@keyframes edge-orbit { 0% { --edge-angle: 0deg; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { --edge-angle: 360deg; opacity: 0; } }
@keyframes bolt-charge { 0%, 100% { transform: scale(1); filter: none; } 35% { transform: scale(1.2) rotate(-12deg); filter: drop-shadow(0 0 4px currentColor); } 65% { transform: scale(1.05) rotate(5deg); } }
@keyframes undo-turn { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes info-peek { 0%, 100% { transform: rotate(0) scale(1); } 35% { transform: rotate(-12deg) scale(1.14); } 65% { transform: rotate(7deg) scale(1.06); } }
@keyframes tooltip-arrive { from { opacity: 0; transform: translateY(var(--tooltip-offset, 4px)); } to { opacity: 1; transform: none; } }
@keyframes click-wave { from { transform: translate(-50%, -50%) scale(.15); opacity: 1; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes status-halo { 0% { transform: scale(.7); opacity: .9; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(18px) scale(.965); } to { opacity: 1; transform: none; } }

/* Pause decorative loops when the WebView is hidden. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
@media (max-height: 740px) {
    .dashboard-heading { min-height: 98px; padding: 15px 18px; margin-bottom: 12px; }
    .dashboard-heading .dashboard-logo { width: 50px; height: 50px; }
    .hero-orbit { height: 94px; scale: .85; }
}
@media (max-height: 700px) and (min-width: 701px) {
    .dashboard-heading { min-height: 86px; padding: 12px 18px; margin-bottom: 10px; }
    .dashboard-heading h1 { margin-top: 4px; font-size: 28px; }
    .dashboard-heading p { font-size: 11px; }
    .dashboard-panel { padding: 12px; }
    .panel-heading { padding-bottom: 8px; }
    .panel-heading h2 { font-size: 18px; }
    .tutorial-steps { gap: 8px; margin-top: 11px; }
    .monitor-section { margin-top: 12px; }
    .section-heading { margin-bottom: 8px; }
    .stat-card { padding: 10px; }
    .dashboard-preferences { margin-top: 6px; }
}
@media (max-width: 1150px) { .hero-orbit { flex-basis: 95px; margin-right: 0; scale: .8; } }
@media (max-width: 1000px) { .hero-orbit { display: none; } }
@media (max-width: 700px) {
    .dashboard-heading { padding: 18px 15px; gap: 12px; }
    .dashboard-heading .dashboard-logo { width: 44px; height: 44px; }
    .dashboard-heading .eyebrow { font-size: 8px; letter-spacing: .15em; }
    .dashboard-heading h1 { font-size: 25px; }
    .dashboard-preferences { flex-wrap: wrap; }
    .tweak-change-banner { flex-wrap: wrap; }
    .ambient-orb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .motion-ripple { display: none; }
    .is-spotlit::after { opacity: 0 !important; }
    .brand:hover .brand-logo, .nav-link:hover, .nav-link:hover .icon,
    .stat-card:hover, .folder-item:hover, .folder-item:focus-within,
    .social-links a:hover, .social-links a:hover .icon,
    .tutorial-steps li:hover .step-number, .folder-item-info:hover,
    .info-button:hover, .info-button[aria-expanded="true"],
    .info-button:focus-visible, .folder-item-info:focus-visible,
    .info-button:active, .folder-item-info:active,
    .undo-folder:hover, .restore-tab:hover, .undo-item:hover:not(:disabled),
    .button:hover:not(:disabled), .action-button:hover:not(:disabled),
    .warning-toggle:hover, .tutorial-link:hover { transform: none; }
}