:root {
    --ui-bg: #0b0e0f;
    --ui-bg-soft: #101416;
    --ui-surface: #151a1c;
    --ui-surface-raised: #1a2022;
    --ui-glass: rgba(21, 27, 29, 0.72);
    --ui-glass-strong: rgba(18, 23, 25, 0.9);
    --ui-text: #e8edeb;
    --ui-heading: #f6f8f7;
    --ui-muted: #98a29f;
    --ui-subtle: #68736f;
    --ui-border: rgba(221, 235, 230, 0.12);
    --ui-border-strong: rgba(221, 235, 230, 0.22);
    --ui-accent: #73c3a5;
    --ui-accent-strong: #a8dbc8;
    --ui-accent-soft: rgba(115, 195, 165, 0.12);
    --ui-accent-contrast: #08130f;
    --ui-coral: #ef9c7c;
    --ui-warning: #e5c46c;
    --ui-danger: #ef8e91;
    --ui-success: #78c99a;
    --ui-shadow: 0 18px 55px rgba(0, 0, 0, 0.24);
    --ui-shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.16);
    --ui-radius: 8px;
    --ui-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --ui-mono: "Cascadia Code", Consolas, monospace;
    --ui-control-height: 42px;
    --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --pointer-x: 50vw;
    --pointer-y: 50vh;
}

html[data-theme="light"] {
    --ui-bg: #f3f6f4;
    --ui-bg-soft: #edf1ef;
    --ui-surface: #ffffff;
    --ui-surface-raised: #f8faf9;
    --ui-glass: rgba(255, 255, 255, 0.72);
    --ui-glass-strong: rgba(255, 255, 255, 0.9);
    --ui-text: #28312f;
    --ui-heading: #121a18;
    --ui-muted: #63706c;
    --ui-subtle: #87918e;
    --ui-border: rgba(24, 49, 41, 0.12);
    --ui-border-strong: rgba(24, 49, 41, 0.22);
    --ui-accent: #237b62;
    --ui-accent-strong: #155b49;
    --ui-accent-soft: rgba(35, 123, 98, 0.1);
    --ui-accent-contrast: #ffffff;
    --ui-coral: #c76749;
    --ui-warning: #a37413;
    --ui-danger: #bd4c54;
    --ui-success: #27824e;
    --ui-shadow: 0 18px 55px rgba(30, 55, 47, 0.12);
    --ui-shadow-soft: 0 8px 28px rgba(30, 55, 47, 0.09);
}

html[data-ui-page] {
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--ui-font);
    letter-spacing: 0;
    accent-color: var(--ui-accent);
}

html[data-ui-page] body {
    color: var(--ui-text);
    letter-spacing: 0;
    transition: background-color 320ms ease, color 240ms ease;
}

html[data-ui-page] button,
html[data-ui-page] input,
html[data-ui-page] textarea,
html[data-ui-page] select {
    letter-spacing: 0;
}

html[data-ui-page] ::selection {
    color: var(--ui-heading);
    background: color-mix(in srgb, var(--ui-accent) 32%, transparent);
}

html[data-ui-page] :focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 3px;
}

html[data-ui-page] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-ui-page] ::-webkit-scrollbar-track { background: transparent; }
html[data-ui-page] ::-webkit-scrollbar-thumb { background: var(--ui-border-strong); border-radius: 8px; }
html[data-ui-page] ::-webkit-scrollbar-thumb:hover { background: var(--ui-subtle); }

.site-theme-toggle {
    position: fixed;
    z-index: 20000;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    display: grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    background: var(--ui-glass);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-soft), inset 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    cursor: pointer;
    transition: transform 220ms var(--ui-ease), border-color 220ms ease, background 220ms ease;
}

.site-theme-toggle:hover { transform: translateY(-2px); border-color: var(--ui-border-strong); }
.site-theme-toggle:active { transform: translateY(0) scale(0.96); }
.site-theme-toggle svg { width: 19px; height: 19px; }

/* Home */
html[data-ui-page="index"] body {
    height: 100dvh;
    min-height: 560px;
    overflow: hidden;
    background: var(--ui-bg);
    color: var(--ui-text);
}

html[data-ui-page="index"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 71px, var(--ui-border) 72px),
        repeating-linear-gradient(90deg, transparent 0, transparent 71px, var(--ui-border) 72px);
    background-position: calc(var(--pointer-x) * 0.015) calc(var(--pointer-y) * 0.015);
    transition: opacity 260ms ease;
}

html[data-ui-page="index"] body::after {
    content: "";
    position: fixed;
    z-index: 0;
    width: 420px;
    height: 420px;
    right: 4vw;
    top: 50%;
    transform: translateY(-50%);
    background: url("SY3_256x256.ico") center / 280px no-repeat;
    opacity: 0.035;
    filter: grayscale(1) contrast(1.2);
    pointer-events: none;
}

html[data-theme="light"][data-ui-page="index"] body::before { opacity: 0.72; }
html[data-theme="light"][data-ui-page="index"] body::after { display: none; }

html[data-ui-page="index"] .site-theme-toggle { left: max(78px, calc(env(safe-area-inset-left) + 74px)); right: auto; }

html[data-ui-page="index"] .login-entry {
    top: max(18px, env(safe-area-inset-top));
    left: max(18px, env(safe-area-inset-left));
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-text);
    font-family: inherit;
}

html[data-ui-page="index"] .login-icon {
    width: 44px;
    height: 44px;
    background: var(--ui-glass);
    border-color: var(--ui-border);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(135%);
}

html[data-ui-page="index"] .login-icon svg { stroke: var(--ui-muted); }
html[data-ui-page="index"] .login-entry:hover .login-icon { background: var(--ui-glass-strong); border-color: var(--ui-border-strong); }
html[data-ui-page="index"] .login-entry:hover .login-icon svg { stroke: var(--ui-heading); }
html[data-ui-page="index"] .login-text { color: var(--ui-text); font-size: 0.86rem; letter-spacing: 0; }

html[data-ui-page="index"] .user-area {
    top: max(18px, env(safe-area-inset-top));
    right: max(76px, calc(env(safe-area-inset-right) + 74px));
    min-height: 44px;
    padding: 5px 8px;
    border: 1px solid var(--ui-border);
    border-radius: 24px;
    background: var(--ui-glass);
    box-shadow: var(--ui-shadow-soft);
    backdrop-filter: blur(18px) saturate(135%);
}

html[data-ui-page="index"] .user-name { color: var(--ui-text); font-size: 0.86rem; letter-spacing: 0; }
html[data-ui-page="index"] .user-avatar { width: 34px; height: 34px; border-color: var(--ui-border-strong); }
html[data-ui-page="index"] .notify-bell {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ui-text);
}

html[data-ui-page="index"] .notify-badge { background: var(--ui-coral); }
html[data-ui-page="index"] .user-dropdown {
    top: 50px;
    overflow: hidden;
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-glass-strong);
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(20px);
}
html[data-ui-page="index"] .user-dropdown a,
html[data-ui-page="index"] .user-dropdown button {
    width: 100%;
    min-height: 38px;
    padding: 0.6rem 1.2rem;
    color: var(--ui-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
html[data-ui-page="index"] .user-dropdown a:hover,
html[data-ui-page="index"] .user-dropdown button:hover { background: var(--ui-accent-soft); color: var(--ui-heading); }

html[data-ui-page="index"] .hero-section { width: min(760px, calc(100vw - 40px)); }
html[data-ui-page="index"] .hero-title {
    font-size: 5.5rem;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--ui-heading);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: 0 16px 55px rgba(0, 0, 0, 0.12);
}
html[data-ui-page="index"] .hero-title.shimmer { animation: none; }

html[data-ui-page="index"] .search-wrapper {
    width: min(620px, calc(100vw - 40px));
    min-height: 58px;
    margin-top: 1.8rem;
    gap: 8px;
    padding: 7px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-glass);
    box-shadow: var(--ui-shadow-soft), inset 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}

html[data-ui-page="index"] .search-input {
    width: 100%;
    max-width: none;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-heading);
    box-shadow: none;
}
html[data-ui-page="index"] .search-input:focus { background: var(--ui-accent-soft); border: 0; }
html[data-ui-page="index"] .search-input::placeholder { color: var(--ui-subtle); }
html[data-ui-page="index"] .search-mode-btn {
    min-height: 42px;
    padding: 0 16px;
    border-color: var(--ui-border-strong);
    border-radius: 6px;
    color: var(--ui-muted);
    background: var(--ui-surface-raised);
}
html[data-ui-page="index"] .search-mode-btn.station-search { color: var(--ui-accent-strong); border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent); }
html[data-ui-page="index"] .search-mode-btn:hover { color: var(--ui-heading); border-color: var(--ui-accent); background: var(--ui-accent-soft); }

html[data-ui-page="index"] .search-results { width: min(720px, calc(100vw - 36px)); }
html[data-ui-page="index"] .search-results-inner {
    padding: 10px;
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-glass-strong);
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(24px) saturate(140%);
}
html[data-ui-page="index"] .result-item { padding: 12px; border-color: var(--ui-border); border-radius: 6px; }
html[data-ui-page="index"] .result-item:hover { background: var(--ui-accent-soft); }
html[data-ui-page="index"] .result-item a { color: var(--ui-accent-strong); }
html[data-ui-page="index"] .result-snippet { color: var(--ui-muted); }

html[data-ui-page="index"] .slide-item {
    align-items: flex-end;
    padding: 2rem max(5vw, 32px) 7rem;
}
html[data-ui-page="index"] .slide-item::before {
    content: "0" attr(data-index);
    position: absolute;
    left: max(5vw, 32px);
    top: 24%;
    color: var(--ui-subtle);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
}
html[data-ui-page="index"] .slide-content {
    width: min(1240px, 100%);
    margin: 0 auto;
    gap: 2rem;
}
html[data-ui-page="index"] .slide-text h2 {
    margin: 0 0 0.7rem;
    padding: 0;
    border: 0;
    color: var(--ui-heading);
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: 0;
}
html[data-ui-page="index"] .slide-text p { color: var(--ui-muted); font-size: 1rem; line-height: 1.7; }
html[data-ui-page="index"] .slide-line { background: var(--ui-border-strong); }
html[data-ui-page="index"] .slide-btn {
    min-height: 44px;
    padding: 0 22px;
    border-color: var(--ui-border-strong);
    border-radius: 6px;
    color: var(--ui-heading);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-soft);
}
html[data-ui-page="index"] .slide-btn:hover { color: var(--ui-accent-contrast); border-color: var(--ui-accent); background: var(--ui-accent); transform: translateY(-2px); }

html[data-ui-page="index"] .lock-notice {
    bottom: 3.25rem;
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-muted);
    background: var(--ui-glass);
    backdrop-filter: blur(14px);
    letter-spacing: 0;
}
html[data-ui-page="index"] .footer-quote { bottom: 1rem; color: var(--ui-subtle); font-weight: 300; letter-spacing: 0; }
html[data-ui-page="index"] .page-transition { background: var(--ui-bg); }
html[data-ui-page="index"] .notify-modal { background: rgba(4, 7, 8, 0.62); backdrop-filter: blur(10px); }
html[data-ui-page="index"] .notify-modal-content {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-glass-strong);
    box-shadow: var(--ui-shadow);
}
html[data-ui-page="index"] .notify-modal-content h3 { color: var(--ui-heading); }
html[data-ui-page="index"] .notify-item { border-color: var(--ui-border); }
html[data-ui-page="index"] .notify-item:hover { background: var(--ui-accent-soft); }
html[data-ui-page="index"] .notify-item.unread { border-left-color: var(--ui-coral); }
html[data-ui-page="index"] .toast { border-color: var(--ui-border-strong); border-radius: 6px; background: var(--ui-glass-strong); color: var(--ui-text); box-shadow: var(--ui-shadow); }

/* Tool workbench */
html[data-ui-page="tools"] {
    --bg-primary: var(--ui-surface);
    --bg-secondary: var(--ui-bg);
    --bg-panel: var(--ui-surface);
    --bg-hover: var(--ui-accent-soft);
    --bg-active: var(--ui-accent-soft);
    --bg-input: var(--ui-bg-soft);
    --border-color: var(--ui-border);
    --border-light: var(--ui-border);
    --text-primary: var(--ui-text);
    --text-secondary: var(--ui-muted);
    --text-heading: var(--ui-heading);
    --text-muted: var(--ui-muted);
    --accent: var(--ui-accent);
    --accent-hover: var(--ui-heading);
    --danger: var(--ui-danger);
    --success: var(--ui-success);
    --warning: var(--ui-warning);
    --scrollbar-thumb: var(--ui-border-strong);
    --scrollbar-thumb-hover: var(--ui-subtle);
}

html[data-ui-page="tools"] body { background: var(--ui-bg); }
html[data-ui-page="tools"] .site-theme-toggle { top: 20px; right: 24px; }
html[data-ui-page="tools"] .sidebar {
    width: 300px;
    padding: 0 0 1.5rem;
    border-right-color: var(--ui-border);
    background: var(--ui-glass);
    box-shadow: 14px 0 42px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px) saturate(135%);
}
html[data-ui-page="tools"] .sidebar-title {
    position: sticky;
    z-index: 5;
    top: 0;
    margin: 0;
    padding: 1.4rem 1.25rem;
    border-color: var(--ui-border);
    background: var(--ui-glass-strong);
    backdrop-filter: blur(20px);
}
html[data-ui-page="tools"] .sidebar-title a { color: var(--ui-heading); font-weight: 400; letter-spacing: 0; }
html[data-ui-page="tools"] .tool-shell-toolbar { padding: 0.85rem 0.85rem 0.65rem; border-color: var(--ui-border); }
html[data-ui-page="tools"] .tool-shell-search {
    height: 40px;
    border-color: var(--ui-border);
    border-radius: 6px;
    background: var(--ui-bg-soft);
    color: var(--ui-text);
}
html[data-ui-page="tools"] .tool-shell-search:focus { border-color: var(--ui-accent); background: var(--ui-surface-raised); }
html[data-ui-page="tools"] .tool-shell-modes button {
    height: 34px;
    border-color: var(--ui-border);
    border-radius: 5px;
    color: var(--ui-muted);
}
html[data-ui-page="tools"] .tool-shell-modes button.active { border-color: var(--ui-accent); color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
html[data-ui-page="tools"] .tool-group-title { color: var(--ui-subtle); padding-top: 1.4rem; font-size: 0.68rem; letter-spacing: 0; }
html[data-ui-page="tools"] .tool-list li {
    min-height: 42px;
    margin: 2px 8px;
    padding: 0.62rem 0.8rem;
    border-left: 0;
    border-radius: 6px;
    color: var(--ui-muted);
    letter-spacing: 0;
}
html[data-ui-page="tools"] .tool-list li:hover { color: var(--ui-heading); background: var(--ui-accent-soft); }
html[data-ui-page="tools"] .tool-list li.active { color: var(--ui-heading); background: var(--ui-accent-soft); box-shadow: inset 3px 0 var(--ui-accent); }
html[data-ui-page="tools"] .tool-favorite { color: var(--ui-subtle); }
html[data-ui-page="tools"] .tool-favorite.active { color: var(--ui-warning); }
html[data-ui-page="tools"] .main { padding: 2.4rem 3.5rem 5rem; background: var(--ui-bg); }
html[data-ui-page="tools"] .tool-panel { width: min(1180px, 100%); margin: 0 auto; }
html[data-ui-page="tools"] .tool-panel h2 {
    margin-bottom: 0.65rem;
    padding: 0;
    border: 0;
    color: var(--ui-heading);
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 0;
}
html[data-ui-page="tools"] .tool-panel .desc { color: var(--ui-muted); margin-bottom: 1.8rem; }
html[data-ui-page="tools"] textarea,
html[data-ui-page="tools"] input[type="text"],
html[data-ui-page="tools"] input[type="number"],
html[data-ui-page="tools"] input[type="search"],
html[data-ui-page="tools"] input[type="password"],
html[data-ui-page="tools"] select {
    min-height: 40px;
    border-color: var(--ui-border);
    border-radius: 6px;
    background: var(--ui-bg-soft);
    color: var(--ui-text);
}
html[data-ui-page="tools"] textarea { padding: 1rem; }
html[data-ui-page="tools"] textarea:focus,
html[data-ui-page="tools"] input:focus,
html[data-ui-page="tools"] select:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
html[data-ui-page="tools"] select option { background: var(--ui-surface); color: var(--ui-text); }
html[data-ui-page="tools"] button,
html[data-ui-page="tools"] .btn {
    min-height: 40px;
    padding: 0.52rem 1rem;
    border-color: var(--ui-border-strong);
    border-radius: 6px;
    color: var(--ui-text);
    background: var(--ui-surface);
    letter-spacing: 0;
}
html[data-ui-page="tools"] button:hover,
html[data-ui-page="tools"] .btn:hover { color: var(--ui-heading); border-color: var(--ui-accent); background: var(--ui-accent-soft); }
html[data-ui-page="tools"] button.primary,
html[data-ui-page="tools"] .btn.primary { border-color: var(--ui-accent); color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
html[data-ui-page="tools"] .result-box,
html[data-ui-page="tools"] .suite-output,
html[data-ui-page="tools"] .advanced-compact-result {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}
html[data-ui-page="tools"] .drag-zone {
    border-color: var(--ui-border-strong);
    border-radius: var(--ui-radius);
    color: var(--ui-muted);
    background: var(--ui-surface);
}
html[data-ui-page="tools"] .drag-zone:hover,
html[data-ui-page="tools"] .drag-zone.dragover { border-color: var(--ui-accent); color: var(--ui-heading); background: var(--ui-accent-soft); }
html[data-ui-page="tools"] .suite-section { border-color: var(--ui-border); }
html[data-ui-page="tools"] .suite-section h3 { color: var(--ui-heading); }
html[data-ui-page="tools"] .suite-table-wrap,
html[data-ui-page="tools"] .suite-table th,
html[data-ui-page="tools"] .suite-table td { border-color: var(--ui-border); }
html[data-ui-page="tools"] .suite-table th { background: var(--ui-surface-raised); color: var(--ui-heading); }
html[data-ui-page="tools"] .suite-file-row { border-color: var(--ui-border); }
html[data-ui-page="tools"] .ai-yolo-class-list span { color: var(--ui-muted); background: var(--ui-bg-soft); border-color: var(--ui-border); }
html[data-ui-page="tools"] .ai-yolo-inspector,
html[data-ui-page="tools"] .ai-yolo-inspector section + section { border-color: var(--ui-border); }
html[data-ui-page="tools"] .ai-yolo-graph { border-color: var(--ui-border); background: var(--ui-surface); }
html[data-ui-page="tools"] .ai-yolo-graph-header { border-color: var(--ui-border); }
html[data-ui-page="tools"] .ai-warning { background: rgba(4, 7, 8, 0.58); backdrop-filter: blur(16px); }
html[data-ui-page="tools"] .ai-warning-dialog,
html[data-ui-page="tools"] .login-overlay {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-glass-strong);
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(24px);
}
html[data-ui-page="tools"] .ai-warning-device { color: var(--ui-warning); background: color-mix(in srgb, var(--ui-warning) 9%, transparent); border-color: var(--ui-warning); }
html[data-ui-page="tools"] .diff-column { border-color: var(--ui-border); background: var(--ui-surface); }
html[data-ui-page="tools"] .speed-bar { background: var(--ui-bg-soft); }
html[data-ui-page="tools"] .speed-bar-fill { background: var(--ui-accent); }
html[data-ui-page="tools"] .ping-table th,
html[data-ui-page="tools"] .ping-table td { border-color: var(--ui-border); }

/* Content pages */
html:is([data-ui-page="links"], [data-ui-page="feed"], [data-ui-page="admin"]) body {
    min-height: 100dvh;
    background: var(--ui-bg);
    color: var(--ui-text);
}

html[data-ui-page="links"] body { width: min(1420px, 100%); max-width: none; margin: 0 auto; padding: 3rem clamp(24px, 5vw, 72px) 5rem; }
html[data-ui-page="feed"] body { max-width: 820px; padding: 3rem 24px 5rem; }
html[data-ui-page="admin"] body { width: min(1480px, 100%); margin: 0 auto; padding: 2rem clamp(20px, 4vw, 56px) 5rem; }

html:is([data-ui-page="links"], [data-ui-page="feed"], [data-ui-page="admin"]) .back-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 2.2rem;
    color: var(--ui-muted);
    text-decoration: none;
}
html:is([data-ui-page="links"], [data-ui-page="feed"], [data-ui-page="admin"]) .back-link:hover { color: var(--ui-heading); }
html:is([data-ui-page="links"], [data-ui-page="feed"]) .header-row { align-items: flex-end; margin-bottom: 2.2rem; gap: 1.4rem; }
html:is([data-ui-page="links"], [data-ui-page="feed"]) .page-title {
    padding: 0;
    border: 0;
    color: var(--ui-heading);
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 0;
}
html[data-ui-page="links"] .page-desc { color: var(--ui-muted); }
html:is([data-ui-page="links"], [data-ui-page="feed"]) .submit-btn,
html[data-ui-page="admin"] button {
    min-height: 40px;
    padding: 0.5rem 1rem;
    border-color: var(--ui-border-strong);
    border-radius: 6px;
    color: var(--ui-text);
    background: var(--ui-surface);
}
html:is([data-ui-page="links"], [data-ui-page="feed"]) .submit-btn:hover,
html[data-ui-page="admin"] button:hover { border-color: var(--ui-accent); color: var(--ui-heading); background: var(--ui-accent-soft); }

html[data-ui-page="links"] .header-actions { gap: 0.55rem; }
html[data-ui-page="links"] #openLocalBtn { border-color: var(--ui-accent); color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
html[data-ui-page="links"] .tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    background: var(--ui-bg-soft);
}
html[data-ui-page="links"] .tabs .tab {
    min-height: 38px;
    padding: 0 1rem;
    border: 0;
    border-radius: 5px;
    color: var(--ui-muted);
    background: transparent;
}
html[data-ui-page="links"] .tabs .tab.active { color: var(--ui-heading); background: var(--ui-surface); box-shadow: var(--ui-shadow-soft); }
html[data-ui-page="links"] .link-grid { gap: 1rem; margin-top: 2rem; }
html[data-ui-page="links"] .link-card {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-soft);
}
html[data-ui-page="links"] .link-card:hover { border-color: var(--ui-border-strong); background: var(--ui-surface-raised); transform: translateY(-3px); }
html[data-ui-page="links"] .link-card h3 { color: var(--ui-heading); }
html[data-ui-page="links"] .link-card p { color: var(--ui-muted); }
html[data-ui-page="links"] .link-card .url-text,
html[data-ui-page="links"] .local-card-actions { color: var(--ui-subtle); }
html[data-ui-page="links"] .local-card-actions { border-color: var(--ui-border); }
html[data-ui-page="links"] .source-badge { border-color: var(--ui-border-strong); color: var(--ui-muted); background: var(--ui-bg-soft); }
html[data-ui-page="links"] .source-badge.local { border-color: color-mix(in srgb, var(--ui-accent) 48%, transparent); color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
html[data-ui-page="links"] .delete-local { border-color: color-mix(in srgb, var(--ui-danger) 34%, transparent); color: var(--ui-danger); }
html[data-ui-page="links"] .delete-local:hover { border-color: var(--ui-danger); color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 9%, transparent); }
html[data-ui-page="links"] .grid-message { color: var(--ui-subtle); }
html[data-ui-page="links"] .grid-message.warning { color: var(--ui-warning); }
html[data-ui-page="links"] .link-grid > .grid-message { grid-column: 1 / -1; padding: 0.25rem 0; }

html:is([data-ui-page="links"], [data-ui-page="feed"]) .modal-backdrop,
html[data-ui-page="feed"] #submitModal,
html[data-ui-page="admin"] #reasonModal { background: rgba(4, 7, 8, 0.58); backdrop-filter: blur(14px); }
html[data-ui-page="links"] .modal-panel,
html[data-ui-page="feed"] #submitModal > div,
html[data-ui-page="admin"] #reasonModal > div {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-glass-strong);
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(24px) saturate(135%);
}
html[data-ui-page="links"] .modal-title,
html[data-ui-page="feed"] #submitModal h3 { color: var(--ui-heading) !important; }
html[data-ui-page="links"] .modal-panel input,
html[data-ui-page="links"] .modal-panel select,
html[data-ui-page="feed"] #submitModal textarea,
html[data-ui-page="admin"] input,
html[data-ui-page="admin"] select,
html[data-ui-page="admin"] textarea {
    min-height: 42px;
    border-color: var(--ui-border);
    border-radius: 6px;
    background: var(--ui-bg-soft);
    color: var(--ui-text);
}
html[data-ui-page="links"] .modal-panel input:focus,
html[data-ui-page="links"] .modal-panel select:focus,
html[data-ui-page="feed"] #submitModal textarea:focus,
html[data-ui-page="admin"] input:focus,
html[data-ui-page="admin"] select:focus,
html[data-ui-page="admin"] textarea:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
html[data-ui-page="links"] .modal-note,
html[data-ui-page="links"] .local-usage { color: var(--ui-subtle); }
html[data-ui-page="links"] .file-picker-label { border-color: var(--ui-border-strong); color: var(--ui-muted); }
html[data-ui-page="links"] .file-picker-label:hover { border-color: var(--ui-accent); color: var(--ui-heading); background: var(--ui-accent-soft); }
html[data-ui-page="links"] .modal-actions .tab,
html[data-ui-page="feed"] #submitModal button {
    min-height: 40px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: 6px;
    color: var(--ui-text);
    background: var(--ui-surface);
    font: inherit;
    cursor: pointer;
}
html[data-ui-page="links"] .modal-actions .tab.active,
html[data-ui-page="feed"] #confirmSubmit {
    border-color: var(--ui-accent) !important;
    color: var(--ui-accent-contrast) !important;
    background: var(--ui-accent);
}
html[data-ui-page="links"] .modal-actions .tab:hover,
html[data-ui-page="feed"] #submitModal button:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }

html[data-ui-page="feed"] .thought-card {
    margin-bottom: 0;
    padding: 1.35rem 0;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    border-radius: 0;
    background: transparent;
}
html[data-ui-page="feed"] .thought-card:hover { background: transparent; }
html[data-ui-page="feed"] .thought-card.pinned { padding-left: 1rem; border-left: 2px solid var(--ui-warning); }
html[data-ui-page="feed"] .thought-card .author-name,
html[data-ui-page="feed"] .thought-card .thought-content { color: var(--ui-text); }
html[data-ui-page="feed"] .thought-card .author-avatar { border-color: var(--ui-border-strong); }
html[data-ui-page="feed"] .thought-card .thought-meta { color: var(--ui-subtle); }
html[data-ui-page="feed"] .thought-card .pin-badge { color: var(--ui-warning); background: color-mix(in srgb, var(--ui-warning) 12%, transparent); }
html[data-ui-page="feed"] .empty-state { color: var(--ui-subtle); }
html[data-ui-page="feed"] .pagination button { border-color: var(--ui-border-strong); color: var(--ui-text); border-radius: 6px; background: var(--ui-surface); }
html[data-ui-page="feed"] .pagination button:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-heading); background: var(--ui-accent-soft); }
html[data-ui-page="feed"] .pagination span { color: var(--ui-muted); }

html[data-ui-page="admin"] h1 { color: var(--ui-heading); font-weight: 400; letter-spacing: 0; }
html[data-ui-page="admin"] .subtitle { color: var(--ui-muted); }
html[data-ui-page="admin"] .tabs { gap: 4px; padding: 4px; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--ui-bg-soft); }
html[data-ui-page="admin"] .tab { border: 0; border-radius: 5px; color: var(--ui-muted); background: transparent; }
html[data-ui-page="admin"] .tab.active { color: var(--ui-heading); background: var(--ui-surface); box-shadow: var(--ui-shadow-soft); }
html[data-ui-page="admin"] .add-form,
html[data-ui-page="admin"] .submission,
html[data-ui-page="admin"] .thought-card-admin,
html[data-ui-page="admin"] .photography-editor,
html[data-ui-page="admin"] .photography-library {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-soft);
}
html[data-ui-page="admin"] .submission h3,
html[data-ui-page="admin"] .add-form h3,
html[data-ui-page="admin"] .photography-section-heading h2,
html[data-ui-page="admin"] .photography-admin-card h3 { color: var(--ui-heading); }
html[data-ui-page="admin"] .submission p,
html[data-ui-page="admin"] .photography-section-heading p,
html[data-ui-page="admin"] .photography-field small,
html[data-ui-page="admin"] .photography-preview span,
html[data-ui-page="admin"] .photography-admin-card p { color: var(--ui-muted); }
html[data-ui-page="admin"] .photography-field label,
html[data-ui-page="admin"] .photography-drop-copy strong,
html[data-ui-page="admin"] .photography-preview strong { color: var(--ui-text); }
html[data-ui-page="admin"] .photography-limit { border-color: var(--ui-border); color: var(--ui-muted); }
html[data-ui-page="admin"] .photography-options { border-color: var(--ui-border); background: var(--ui-glass-strong); box-shadow: var(--ui-shadow); }
html[data-ui-page="admin"] .photography-option { color: var(--ui-text); }
html[data-ui-page="admin"] .photography-option:hover,
html[data-ui-page="admin"] .photography-option.active { color: var(--ui-heading); background: var(--ui-accent-soft); }
html[data-ui-page="admin"] .photography-drop { border-color: var(--ui-border-strong); }
html[data-ui-page="admin"] .photography-drop:hover,
html[data-ui-page="admin"] .photography-drop:focus,
html[data-ui-page="admin"] .photography-drop.dragging { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
html[data-ui-page="admin"] .photography-admin-card { border-color: var(--ui-border); }
html[data-ui-page="admin"] .photography-status { color: var(--ui-muted); }
html[data-ui-page="admin"] .photography-status.success { color: var(--ui-success); }
html[data-ui-page="admin"] .photography-status.error { color: var(--ui-danger); }

/* Authentication and account */
html:is([data-ui-page="login"], [data-ui-page="reset-password"], [data-ui-page="profile"]) body {
    min-height: 100dvh;
    background: var(--ui-bg);
    color: var(--ui-text);
}
html[data-ui-page="login"] body { overflow-y: auto; }
html[data-ui-page="login"] section { min-height: 100dvh; padding: 5rem 1.25rem 2rem; }
html[data-ui-page="login"] section .color { display: none; }
html[data-ui-page="login"] .box .square { display: none; }
html[data-ui-page="login"] .container,
html[data-ui-page="reset-password"] .card,
html[data-ui-page="profile"] .profile-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-glass);
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(24px) saturate(135%);
}
html[data-ui-page="login"] .container { width: min(420px, calc(100vw - 32px)); min-height: 430px; }
html[data-ui-page="login"] .form { padding: 2.5rem; }
html[data-ui-page="login"] .form h2,
html[data-ui-page="reset-password"] .card h2,
html[data-ui-page="profile"] .username-display { color: var(--ui-heading); letter-spacing: 0; }
html[data-ui-page="login"] .form h2::before { width: 42px; background: var(--ui-accent); }
html[data-ui-page="login"] .inputBox input,
html[data-ui-page="reset-password"] .card input {
    min-height: 46px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-bg-soft);
    color: var(--ui-text);
    box-shadow: none;
}
html[data-ui-page="login"] .inputBox input:focus,
html[data-ui-page="reset-password"] .card input:focus { border-color: var(--ui-accent); background: var(--ui-surface); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
html[data-ui-page="login"] .inputBox input::placeholder,
html[data-ui-page="reset-password"] .card input::placeholder { color: var(--ui-subtle); }
html[data-ui-page="login"] .inputBox .submit-btn,
html[data-ui-page="login"] .inputBox .action-btn,
html[data-ui-page="reset-password"] .card button,
html[data-ui-page="profile"] .back-link {
    min-height: 44px;
    border-color: var(--ui-border-strong);
    border-radius: 6px;
    color: var(--ui-text);
    background: var(--ui-surface);
}
html[data-ui-page="login"] .inputBox .submit-btn { border-color: var(--ui-accent); color: var(--ui-accent-contrast); background: var(--ui-accent); }
html[data-ui-page="login"] .inputBox .submit-btn:hover,
html[data-ui-page="login"] .inputBox .action-btn:hover,
html[data-ui-page="reset-password"] .card button:hover,
html[data-ui-page="profile"] .back-link:hover { border-color: var(--ui-accent); color: var(--ui-heading); background: var(--ui-accent-soft); }
html[data-ui-page="login"] .forget,
html[data-ui-page="reset-password"] .card .msg,
html[data-ui-page="profile"] .email-display { color: var(--ui-muted); }
html[data-ui-page="login"] .forget a,
html[data-ui-page="login"] .forget span.link,
html[data-ui-page="reset-password"] .card .back { color: var(--ui-text); }
html[data-ui-page="login"] .msg,
html[data-ui-page="reset-password"] .card .msg,
html[data-ui-page="profile"] .msg { color: var(--ui-danger); }
html[data-ui-page="profile"] body { padding: 5rem 1.25rem 2rem; }
html[data-ui-page="profile"] .profile-card { max-width: 480px; padding: 2.5rem; }
html[data-ui-page="profile"] .avatar-container { border-color: var(--ui-border-strong); box-shadow: 0 0 0 8px var(--ui-accent-soft); }
html[data-ui-page="profile"] .avatar-container:hover { border-color: var(--ui-accent); }
html[data-ui-page="profile"] .avatar-overlay { background: var(--ui-glass-strong); color: var(--ui-text); }

/* Local viewer chrome */
html[data-ui-page="local-viewer"] body { background: var(--ui-bg); color: var(--ui-text); }
html[data-ui-page="local-viewer"] .site-theme-toggle { top: 8px; right: 58px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
html[data-ui-page="local-viewer"] .viewer-bar { padding-right: 7.25rem; border-color: var(--ui-border); background: var(--ui-glass-strong); backdrop-filter: blur(18px); }
html[data-ui-page="local-viewer"] .back-link { color: var(--ui-muted); }
html[data-ui-page="local-viewer"] .back-link:hover { color: var(--ui-heading); }
html[data-ui-page="local-viewer"] .page-identity strong { color: var(--ui-heading); }
html[data-ui-page="local-viewer"] .local-badge { border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent); color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
html[data-ui-page="local-viewer"] .page-meta { color: var(--ui-subtle); }
html[data-ui-page="local-viewer"] .icon-button { border-color: var(--ui-border-strong); color: var(--ui-text); background: var(--ui-surface); }
html[data-ui-page="local-viewer"] .icon-button:hover { border-color: var(--ui-accent); color: var(--ui-heading); background: var(--ui-accent-soft); }
html[data-ui-page="local-viewer"] .viewer-status { background: var(--ui-bg); color: var(--ui-muted); }
html[data-ui-page="local-viewer"] .viewer-status.error { color: var(--ui-danger); }

/* Photography */
html[data-ui-page="ph"] {
    --page: var(--ui-bg);
    --panel: var(--ui-surface);
    --ink: var(--ui-heading);
    --muted: var(--ui-muted);
    --line: var(--ui-border);
    --teal: var(--ui-accent);
    --coral: var(--ui-coral);
    --danger: var(--ui-danger);
}
html[data-ui-page="ph"] body,
html[data-ui-page="ph"] .earth-view { background: var(--ui-bg); }
html[data-ui-page="ph"] .site-theme-toggle { right: max(114px, calc(env(safe-area-inset-right) + 112px)); }
html[data-ui-page="ph"] .region-tooltip,
html[data-ui-page="ph"] .gallery-header { border-color: var(--ui-border); background: var(--ui-glass-strong); box-shadow: var(--ui-shadow); }
html[data-ui-page="ph"] .gallery-view { background: var(--ui-bg); }
html[data-ui-page="ph"] .photo-card img { background: var(--ui-bg-soft); box-shadow: var(--ui-shadow-soft); }
html[data-ui-page="ph"] .photo-lightbox { background: color-mix(in srgb, var(--ui-bg) 96%, transparent); color: var(--ui-text); }

/* Piano */
html[data-ui-page="epiano"] {
    --bg-primary: var(--ui-surface);
    --bg-secondary: var(--ui-bg);
    --bg-panel: var(--ui-surface);
    --bg-input: var(--ui-bg-soft);
    --border-color: var(--ui-border);
    --border-light: var(--ui-border);
    --text-primary: var(--ui-text);
    --text-secondary: var(--ui-muted);
    --text-heading: var(--ui-heading);
    --text-muted: var(--ui-muted);
    --accent-hover: var(--ui-heading);
    --danger: var(--ui-danger);
    --success: var(--ui-success);
    --warning: var(--ui-warning);
}
html[data-ui-page="epiano"] body { min-height: 100dvh; background: var(--ui-bg); }
html[data-ui-page="epiano"] .top-bar { max-width: 1040px; padding-top: 1.6rem; }
html[data-ui-page="epiano"] .top-bar .back-link { color: var(--ui-muted); letter-spacing: 0; }
html[data-ui-page="epiano"] .top-bar .title { color: var(--ui-heading); font-size: 1.35rem; font-weight: 400; letter-spacing: 0; }
html[data-ui-page="epiano"] .controls {
    width: min(980px, calc(100% - 32px));
    max-width: none;
    margin: 1.5rem auto 1rem;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-glass);
    box-shadow: var(--ui-shadow-soft);
    backdrop-filter: blur(20px) saturate(135%);
}
html[data-ui-page="epiano"] .ctrl-btn,
html[data-ui-page="epiano"] .ctrl-select {
    min-height: 40px;
    border-color: var(--ui-border-strong);
    border-radius: 6px;
    color: var(--ui-text);
    background: var(--ui-surface);
    letter-spacing: 0;
}
html[data-ui-page="epiano"] .ctrl-btn:hover { border-color: var(--ui-accent); color: var(--ui-heading); background: var(--ui-accent-soft); }
html[data-ui-page="epiano"] .ctrl-select:focus { border-color: var(--ui-accent); }
html[data-ui-page="epiano"] .ctrl-select option { background: var(--ui-surface); color: var(--ui-text); }
html[data-ui-page="epiano"] .ctrl-label,
html[data-ui-page="epiano"] .status-bar,
html[data-ui-page="epiano"] .footer-hint { color: var(--ui-muted); letter-spacing: 0; }
html[data-ui-page="epiano"] .piano-wrap { max-width: 1040px; margin-top: 1.25rem; }
html[data-ui-page="epiano"] .piano { border-color: var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-glass); box-shadow: var(--ui-shadow); }
html[data-ui-page="epiano"] .toast { border-color: var(--ui-border-strong); border-radius: 6px; background: var(--ui-glass-strong); color: var(--ui-text); box-shadow: var(--ui-shadow); }

@media (max-width: 768px) {
    .site-theme-toggle { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
    html[data-ui-page="index"] body { min-height: 500px; }
    html[data-ui-page="index"] body::after { width: 240px; height: 240px; right: -40px; background-size: 170px; }
    html[data-ui-page="index"] .site-theme-toggle { left: max(66px, calc(env(safe-area-inset-left) + 64px)); right: auto; }
    html[data-ui-page="index"] .login-entry { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }
    html[data-ui-page="index"] .login-icon { width: 42px; height: 42px; }
    html[data-ui-page="index"] .login-text { display: none; }
    html[data-ui-page="index"] .user-area { top: max(12px, env(safe-area-inset-top)); right: max(64px, calc(env(safe-area-inset-right) + 62px)); }
    html[data-ui-page="index"] .user-name { display: none; }
    html[data-ui-page="index"] .hero-title { font-size: 2.75rem !important; }
    html[data-ui-page="index"] .search-wrapper { flex-direction: row; width: min(92vw, 520px); min-height: 54px; margin-top: 1.2rem; }
    html[data-ui-page="index"] .search-input { width: 100%; max-width: none; font-size: 0.88rem; padding: 0 10px; }
    html[data-ui-page="index"] .search-mode-btn { flex: 0 0 auto; font-size: 0.72rem; padding: 0 10px; }
    html[data-ui-page="index"] .slide-item { padding: 1rem 22px 6.5rem; }
    html[data-ui-page="index"] .slide-item::before { left: 22px; top: 25%; }
    html[data-ui-page="index"] .slide-content { align-items: stretch; gap: 1.25rem; text-align: left; }
    html[data-ui-page="index"] .slide-text h2 { font-size: 2rem; text-align: left; }
    html[data-ui-page="index"] .slide-text p { font-size: 0.9rem; text-align: left; }
    html[data-ui-page="index"] .slide-btn { align-self: flex-start; }
    html[data-ui-page="index"] .footer-quote { bottom: max(0.7rem, env(safe-area-inset-bottom)); max-width: calc(100vw - 36px); }

    html[data-ui-page="tools"] body { flex-direction: column; }
    html[data-ui-page="tools"] .site-theme-toggle { top: 10px; right: 10px; }
    html[data-ui-page="tools"] .sidebar {
        width: 100%;
        height: 64px;
        min-height: 64px;
        padding: 0 60px 0 0;
        flex-direction: row;
        align-items: center;
        border-right: 0;
        border-bottom: 1px solid var(--ui-border);
        overflow-x: auto;
        overflow-y: hidden;
    }
    html[data-ui-page="tools"] .sidebar::after {
        content: "";
        position: fixed;
        z-index: 6;
        top: 0;
        right: 0;
        width: 60px;
        height: 64px;
        border-left: 1px solid var(--ui-border);
        background: var(--ui-glass-strong);
        backdrop-filter: blur(18px);
        pointer-events: none;
    }
    html[data-ui-page="tools"] .tool-shell-toolbar { width: 150px; flex: 0 0 150px; padding: 10px; border-right: 1px solid var(--ui-border); }
    html[data-ui-page="tools"] .tool-shell-search { height: 42px; }
    html[data-ui-page="tools"] .tool-shell-modes { display: none; }
    html[data-ui-page="tools"] .tool-list { align-items: center; min-height: 63px; }
    html[data-ui-page="tools"] .tool-list li { min-height: 40px; margin: 0; border-radius: 6px; }
    html[data-ui-page="tools"] .main { padding: 1.5rem 1rem 4rem; }
    html[data-ui-page="tools"] .tool-panel h2 { padding-right: 52px; font-size: 1.45rem; }

    html[data-ui-page="links"] body,
    html[data-ui-page="admin"] body { padding: 1.5rem 18px 4rem; }
    html[data-ui-page="feed"] body { padding: 1.5rem 18px 4rem; }
    html:is([data-ui-page="links"], [data-ui-page="feed"]) .header-row { align-items: flex-start; }
    html:is([data-ui-page="links"], [data-ui-page="feed"]) .page-title { font-size: 2rem; }
    html[data-ui-page="links"] .header-actions { width: 100%; }
    html[data-ui-page="links"] .header-actions .submit-btn { min-width: 0; }
    html[data-ui-page="admin"] .tabs { overflow-x: auto; flex-wrap: nowrap; }
    html[data-ui-page="admin"] .tab { flex: 0 0 auto; }
    html[data-ui-page="login"] .form { padding: 2rem 1.25rem; }
    html[data-ui-page="local-viewer"] .site-theme-toggle { top: 8px; right: 58px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
    html[data-ui-page="local-viewer"] .viewer-bar { padding-right: 3.7rem; }
    html[data-ui-page="ph"] .site-theme-toggle { right: 112px; }
    html[data-ui-page="epiano"] .site-theme-toggle { top: 10px; right: 10px; }
    html[data-ui-page="epiano"] .top-bar { padding-right: 62px; }
    html[data-ui-page="epiano"] .controls { width: calc(100% - 20px); margin-top: 0.75rem; }
}

@media (max-width: 480px) {
    html[data-ui-page="index"] .hero-title { font-size: 2.35rem !important; }
    html[data-ui-page="index"] .search-wrapper { width: calc(100vw - 24px); }
    html[data-ui-page="index"] .search-mode-btn { max-width: 92px; }
    html[data-ui-page="links"] .tabs { width: 100%; }
    html[data-ui-page="links"] .tabs .tab { flex: 1; }
    html[data-ui-page="profile"] .profile-card { width: 100%; padding: 2rem 1.25rem; }
    html[data-ui-page="ph"] .site-theme-toggle { right: 96px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
    html[data-ui-page="epiano"] .key.black .label { font-size: 0.42rem; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui-page] *,
    html[data-ui-page] *::before,
    html[data-ui-page] *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}