:root {
    color-scheme: light;
    --bg: #f6f8fb;
    --panel: #ffffff;
    --text: #172033;
    --muted: #6c788d;
    --line: #dbe2ec;
    --primary: #1264d8;
    --primary-dark: #0b47a4;
    --accent: #14a77d;
    --danger: #d93b4a;
    --shadow: 0 18px 50px rgba(23, 32, 51, 0.09);
    --site-bg-image: none;
    --site-bg-position: center;
    --site-bg-attachment: fixed;
    --site-overlay-alpha: 0.90;
    --panel-alpha: 0.88;
}

* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(246 248 251 / var(--site-overlay-alpha)), rgba(246 248 251 / var(--site-overlay-alpha))),
        radial-gradient(circle at top left, rgba(18, 100, 216, 0.2), transparent 34rem),
        var(--site-bg-image) var(--site-bg-position) / cover var(--site-bg-attachment) no-repeat,
        var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255 255 255 / var(--site-overlay-alpha)), rgba(255 255 255 / var(--site-overlay-alpha))),
        radial-gradient(circle at 70% 20%, rgba(20, 167, 125, 0.12), transparent 26rem);
    backdrop-filter: blur(1px);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
    max-width: 100%;
}

button {
    cursor: pointer;
    border: 0;
}

.shell {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    max-width: 100%;
    margin: 0 auto;
    padding: 22px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
}

.topbar > div,
.topbar nav,
.player-window > div,
.manager-group,
.section-head > *,
.user-item > *,
.update-head > *,
.license-grid > div {
    min-width: 0;
}

.topbar > div {
    flex: 1 1 320px;
}

img {
    max-width: 100%;
}

.topbar h1,
.login-panel h1 {
    margin: 4px 0 0;
    font-size: clamp(24px, 4.6vw, 42px);
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.topbar nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.account-nav {
    gap: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 10px 28px rgba(23, 32, 51, 0.06);
}

.welcome-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 200px;
    max-width: 100%;
    border-radius: 0;
    padding: 0 12px;
    background: transparent;
    border: 0;
    color: #34445f;
    font-weight: 800;
    font-size: 14px;
    overflow-wrap: anywhere;
    text-align: left;
}

.brand-logo {
    display: block;
    width: min(520px, 100%);
    max-height: 96px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 8px;
}

.header-logo {
    width: min(var(--logo-width, 330px), 62vw);
    height: min(var(--logo-height, 58px), 18vw);
    max-height: 140px;
}

.login-logo {
    width: min(620px, 100%);
    max-height: 130px;
    margin-bottom: 18px;
    filter: drop-shadow(0 12px 22px rgba(23, 32, 51, 0.14));
}

.eyebrow {
    margin: 0;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.muted,
.hint {
    color: var(--muted);
}

.ghost,
.secondary,
.primary,
.danger-btn {
    min-height: 44px;
    border-radius: 8px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.ghost {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
}

.account-logout {
    min-width: 74px;
    border: 0;
    border-left: 1px solid rgba(219, 226, 236, 0.92);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.78);
}

.primary {
    background: var(--primary);
    color: white;
}

.primary:active {
    background: var(--primary-dark);
}

.secondary {
    background: white;
    border: 1px solid var(--line);
    color: var(--text);
}

.danger-btn {
    background: #fff0f2;
    color: var(--danger);
}

.log-viewer {
    width: 100%;
    max-width: 100%;
    max-height: min(62vh, 640px);
    margin: 16px 0 0;
    padding: 14px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.94);
    color: #eef4ff;
    font-family: "Consolas", "Microsoft YaHei", monospace;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.login-panel {
    min-height: calc(100vh - 44px);
    display: grid;
    align-items: center;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 28px;
}

.login-screen {
    min-height: calc(100vh - 44px);
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    align-content: center;
    gap: clamp(22px, 5vw, 64px);
}

.login-screen > div {
    display: grid;
    align-content: center;
    min-width: 0;
}

.login-screen .form-card {
    align-self: center;
}

.form-card,
.player-window,
.tool-panel,
.temp-library,
.now-playing,
.user-list,
.user-item {
    background: rgba(255 255 255 / var(--panel-alpha));
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 8px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.player-window {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.player-window::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(120deg, transparent 16%, rgba(255, 255, 255, 0.42) 36%, transparent 56%);
    transform: translateX(-100%);
}

.player-window::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 8px;
    height: 8px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(18, 100, 216, 0.78) 0 38%, transparent 42%) 0 0 / 32px 8px repeat-x,
        linear-gradient(90deg, rgba(18, 100, 216, 0.12), rgba(20, 167, 125, 0.12));
    opacity: 0.42;
    pointer-events: none;
}

.player-window.is-playing::after {
    opacity: 1;
    animation: panel-shine 3.8s ease-in-out infinite;
}

.player-window.is-playing::before {
    animation: light-bounce 0.9s ease-in-out infinite alternate;
    opacity: 0.86;
}

.player-art {
    position: relative;
    width: 88px;
    aspect-ratio: 1;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(18, 100, 216, 0.95), rgba(20, 167, 125, 0.9)),
        #1264d8;
    color: white;
    box-shadow: 0 14px 34px rgba(18, 100, 216, 0.22);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.player-art::before,
.player-art::after {
    content: "";
    position: absolute;
    width: 72%;
    height: 72%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    transform: scale(0.55);
    opacity: 0;
}

.player-window.is-playing .player-art {
    transform: translateY(-1px);
    box-shadow: 0 18px 42px rgba(18, 100, 216, 0.28);
}

.player-window.is-playing .player-art::before {
    animation: sound-ring 1.7s ease-out infinite;
}

.player-window.is-playing .player-art::after {
    animation: sound-ring 1.7s ease-out 0.55s infinite;
}

.player-window.is-paused .player-art {
    background:
        linear-gradient(135deg, rgba(108, 120, 141, 0.95), rgba(18, 100, 216, 0.72)),
        #6c788d;
}

.player-art .status-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.85);
}

#playerIcon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0;
    font-size: 17px;
    line-height: 1.05;
    font-weight: 900;
}

.player-main {
    min-width: 0;
}

.player-main h2 {
    margin: 4px 0;
    font-size: clamp(18px, 4vw, 30px);
    overflow-wrap: anywhere;
}

.player-main .eyebrow,
.player-main .muted,
.tool-panel p,
.hint,
.muted,
.site-footer,
.license-grid span,
.update-files span {
    overflow-wrap: anywhere;
}

.quick-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0 14px;
}

.tool-panel,
.temp-library {
    padding: 16px;
}

.tool-panel h2,
.section-head h2 {
    margin: 0;
    font-size: 20px;
}

textarea {
    width: 100%;
    min-height: 104px;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    color: var(--text);
    background: white;
    font: inherit;
}

.tool-panel {
    display: grid;
    gap: 12px;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 10px;
}

.temp-library {
    margin-bottom: 16px;
}

.temp-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 12px;
    overflow: visible;
    padding-bottom: 2px;
    max-width: 100%;
}

.temp-item {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-content: space-between;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.temp-item-main {
    min-width: 0;
}

.temp-item strong,
.temp-item span {
    display: block;
}

.temp-item strong {
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.temp-item span,
.empty-line {
    color: var(--muted);
    font-size: 13px;
}

.temp-item-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 8px;
    align-items: stretch;
}

.temp-item-actions button {
    min-height: 36px;
    min-width: 0;
    width: 100%;
    padding-inline: 10px;
    white-space: nowrap;
}

.empty-line {
    min-height: 34px;
    display: flex;
    align-items: center;
}

.compact-library {
    padding: 12px;
}

.compact-library .section-head {
    margin: 0 0 8px;
}

.remember-line {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
    color: var(--text);
}

.remember-line input {
    width: auto;
    min-height: auto;
}

.is-hidden {
    display: none;
}

.site-footer {
    margin-top: 28px;
    padding: 18px 0 4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    color: rgba(108, 120, 141, 0.72);
    font-size: 12px;
}

.site-footer a {
    color: rgba(108, 120, 141, 0.78);
}

.fixed-note {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(219, 226, 236, 0.9);
    background: rgba(255, 255, 255, 0.66);
    color: var(--muted);
}

.fixed-note strong {
    color: var(--text);
}

.topbar .ghost {
    flex: 0 0 auto;
}

.settings-card {
    grid-column: 1 / -1;
}

.single-page-card {
    max-width: 920px;
    margin: 0 auto;
}

.admin-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.admin-menu a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    color: var(--text);
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.admin-menu a:hover {
    transform: translateY(-2px);
    border-color: rgba(18, 100, 216, 0.42);
    box-shadow: 0 12px 34px rgba(18, 100, 216, 0.12);
}

.admin-menu strong {
    font-size: 14px;
}

.admin-menu span {
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.admin-page-grid {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 18px;
}

.form-card {
    display: grid;
    gap: 14px;
    padding: 22px;
    min-width: 0;
}

.form-card h2,
.user-list h2 {
    margin: 0 0 6px;
}

.search-input {
    margin-bottom: 4px;
}

label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 700;
}

input,
select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--text);
    background: white;
}

.toast {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fff7df;
    color: #7b5817;
    border: 1px solid #f1d891;
}

.license-panel,
.license-grid {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(23, 32, 51, 0.06);
}

.license-panel {
    display: grid;
    gap: 10px;
    padding: 18px;
    margin-top: 18px;
}

.license-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.license-actions .primary {
    text-align: center;
}

.license-panel strong,
.license-grid strong {
    color: var(--text);
}

.license-panel code,
.license-grid code {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 10px 12px;
    background: #f2f7ff;
    border-radius: 8px;
    color: var(--primary-dark);
    overflow-wrap: anywhere;
}

.license-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
}

.license-grid div {
    display: grid;
    gap: 8px;
}

.now-playing {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    margin-bottom: 16px;
}

.now-playing h2 {
    margin: 4px 0;
    font-size: 24px;
    overflow-wrap: anywhere;
}

.status-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    background: #9aa5b5;
    box-shadow: 0 0 0 6px rgba(154, 165, 181, 0.13);
}

.status-dot.playing {
    background: var(--accent);
    box-shadow: 0 0 0 6px rgba(20, 167, 125, 0.14);
    animation: dot-pulse 1.4s ease-in-out infinite;
}

.progress-wrap {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.progress-slider {
    width: 100%;
    height: 14px;
    margin: 0;
    padding: 0;
    appearance: none;
    background: transparent;
}

.progress-slider::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #dbe7fb, #e7edf5);
}

.progress-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -4px;
    border-radius: 50%;
    background: #1264d8;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 12px rgba(18, 100, 216, 0.24);
}

.progress-slider::-moz-range-track {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #dbe7fb, #e7edf5);
}

.progress-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1264d8;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 12px rgba(18, 100, 216, 0.24);
}

.progress-slider.is-live::-webkit-slider-thumb,
.progress-slider.is-live::-moz-range-thumb {
    background: #14a77d;
}

.progress-slider:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.time-row,
.volume span {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: var(--muted);
    font-size: 13px;
    gap: 6px 12px;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.control-btn {
    min-width: 56px;
    height: 44px;
    border-radius: 8px;
    background: #edf4ff;
    color: var(--primary);
    font-weight: 900;
    padding: 0 14px;
    box-shadow: 0 8px 20px rgba(18, 100, 216, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.control-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(18, 100, 216, 0.14);
}

.control-btn:active {
    transform: translateY(1px);
}

.control-btn.danger {
    background: #fff0f2;
    color: var(--danger);
    box-shadow: 0 8px 20px rgba(217, 59, 74, 0.08);
}

.volume {
    grid-column: 1 / -1;
}

.manager-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(12px);
}

.manager-row select {
    display: none;
}

.manager-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(219, 226, 236, 0.9);
    overflow-x: auto;
}

.manager-group > span {
    padding: 0 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.manager-group .secondary,
.manager-group .danger-btn {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 0 12px;
    font-size: 14px;
}

.category-tabs {
    display: flex;
    gap: 10px;
    margin: 10px 0 18px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
}

.category-tab {
    flex: 0 0 auto;
    min-width: 120px;
    min-height: 58px;
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(255 255 255 / var(--panel-alpha));
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 28px rgba(23, 32, 51, 0.06);
    color: var(--text);
    text-align: left;
    display: grid;
    align-content: space-between;
    backdrop-filter: blur(12px);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    scroll-snap-align: start;
}

.category-tab strong,
.category-tab span {
    display: block;
    white-space: nowrap;
}

.category-tab span {
    color: var(--muted);
    font-size: 11px;
}

.category-tab.active {
    border-color: rgba(18, 100, 216, 0.72);
    background: rgba(237, 244, 255, 0.92);
    box-shadow: 0 10px 34px rgba(18, 100, 216, 0.14);
}

.category-tab:hover,
.audio-button:hover,
.temp-item:hover {
    transform: translateY(-2px);
}

.audio-board {
    display: grid;
    gap: 18px;
}

.category-section {
    display: grid;
    gap: 10px;
}

.category-title {
    margin: 0;
    color: #33435c;
    font-size: 18px;
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
    gap: 12px;
    min-width: 0;
}

.audio-button {
    width: 100%;
    min-height: 92px;
    border-radius: 8px;
    padding: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 8px 28px rgba(23, 32, 51, 0.06);
    color: var(--text);
    display: grid;
    align-content: space-between;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.audio-button strong {
    overflow-wrap: anywhere;
}

.audio-button span {
    color: var(--muted);
    font-size: 12px;
}

.audio-button.empty {
    border-style: dashed;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.62);
}

.audio-button.add-card,
.category-tab.add-card {
    border-style: dashed;
    border-color: rgba(18, 100, 216, 0.36);
    background:
        linear-gradient(180deg, rgba(245, 249, 255, 0.98), rgba(255, 255, 255, 0.9));
    color: var(--primary-dark);
}

.audio-button.add-card {
    place-items: center;
    text-align: center;
    gap: 4px;
}

.audio-button.add-card strong,
.category-tab.add-card strong {
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
}

.audio-button.add-card span,
.category-tab.add-card span {
    color: #587192;
}

.audio-button.active {
    border-color: rgba(18, 100, 216, 0.7);
    box-shadow: 0 10px 34px rgba(18, 100, 216, 0.16);
    background:
        linear-gradient(180deg, rgba(237, 244, 255, 0.96), rgba(255, 255, 255, 0.94));
    animation: active-button 2s ease-in-out infinite;
    color: var(--primary-dark);
}

.admin-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 18px;
}

.checks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.checks label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
}

.checks input {
    width: auto;
    min-height: auto;
}

.user-list {
    padding: 18px;
    display: grid;
    gap: 12px;
    min-width: 0;
}

.user-item {
    box-shadow: none;
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 130px;
    gap: 10px;
    align-items: center;
}

.user-item span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.compact {
    grid-column: 1 / -1;
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / -1;
}

.update-card {
    gap: 16px;
}

.update-card form {
    display: grid;
    gap: 12px;
}

.update-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.update-head p {
    margin: 8px 0 0;
}

.version-pill,
.update-files strong,
.update-files span {
    border-radius: 999px;
}

.update-progress-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid rgba(219, 226, 236, 0.9);
    background: rgba(255, 255, 255, 0.66);
}

.update-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.progress-meter {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf5;
}

.progress-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.25s ease;
}

.version-pill {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: rgba(18, 100, 216, 0.1);
    color: var(--primary);
    font-weight: 800;
    white-space: nowrap;
}

.update-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.update-files strong {
    padding: 8px 12px;
    background: rgba(23, 32, 51, 0.06);
    color: var(--text);
}

.update-files span {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid var(--line);
    color: var(--muted);
    overflow-wrap: anywhere;
    max-width: 100%;
}

@media (max-width: 980px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-page-grid {
        grid-template-columns: 1fr;
    }

    .player-window {
        grid-template-columns: 72px minmax(0, 1fr) auto;
    }

    .controls {
        grid-column: auto;
    }

    .topbar {
        align-items: flex-start;
    }

    .topbar nav {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .welcome-pill {
        flex: 1 1 auto;
    }
}

@media (max-width: 760px) {
    body {
        background:
            linear-gradient(180deg, rgba(246 248 251 / var(--site-overlay-alpha)), rgba(246 248 251 / var(--site-overlay-alpha))),
            var(--site-bg-image) var(--site-bg-position) / auto 100vh var(--site-bg-attachment) no-repeat,
            var(--bg);
    }

    .shell {
        padding: 16px;
    }

    .login-panel,
    .admin-grid,
    .now-playing,
    .quick-tools {
        grid-template-columns: 1fr;
    }

    .login-screen {
        min-height: calc(100vh - 24px);
        align-content: center;
        gap: 16px;
    }

    .login-screen .login-logo {
        max-height: 72px;
        margin-bottom: 8px;
    }

    .login-screen .form-card {
        padding: 16px;
        gap: 12px;
    }

    .player-window {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .player-art {
        width: 64px;
        max-height: none;
        aspect-ratio: 1;
        align-self: start;
    }

    .topbar {
        align-items: flex-start;
    }

    .topbar nav {
        width: 100%;
        justify-content: flex-start;
    }

    .account-nav {
        width: 100%;
    }

    .header-logo {
        width: min(300px, 68vw);
        max-height: 54px;
    }

    .login-logo {
        max-height: 92px;
    }

    .manager-row {
        align-items: stretch;
    }

    .manager-group {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
    }

    .manager-group:nth-of-type(2) {
        display: flex;
    }

    .button-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-item {
        grid-template-columns: 1fr;
    }

    .update-head {
        flex-direction: column;
    }

    .license-grid {
        grid-template-columns: 1fr;
    }

    .temp-item {
        min-width: 0;
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .temp-item-actions {
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    }

    .player-main h2 {
        font-size: 18px;
    }

    .controls {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .control-btn {
        width: 100%;
        min-width: 0;
    }
}

@keyframes dot-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 6px rgba(20, 167, 125, 0.14);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(20, 167, 125, 0.04);
    }
}

@keyframes sound-ring {
    0% {
        opacity: 0.5;
        transform: scale(0.55);
    }
    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}

@keyframes panel-shine {
    0% {
        transform: translateX(-100%);
    }
    45%,
    100% {
        transform: translateX(100%);
    }
}

@keyframes active-button {
    0%,
    100% {
        box-shadow: 0 10px 34px rgba(18, 100, 216, 0.16);
    }
    50% {
        box-shadow: 0 14px 38px rgba(20, 167, 125, 0.16);
    }
}

@keyframes light-bounce {
    0% {
        background-position: 0 0, 0 0;
        filter: saturate(1);
    }
    100% {
        background-position: 16px 0, 0 0;
        filter: saturate(1.35);
    }
}

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

/* Final polish: cleaner responsive layout for control room and phone use. */
.shell {
    width: min(1180px, 100%);
    padding: clamp(14px, 2.4vw, 24px);
}

.topbar {
    gap: 14px 18px;
    margin-bottom: 14px;
}

.topbar > div {
    display: grid;
    gap: 4px;
    flex: 1 1 420px;
}

.topbar h1,
.login-panel h1 {
    font-size: clamp(24px, 3.2vw, 38px);
    line-height: 1.12;
}

.brand-logo {
    margin-bottom: 2px;
}

.header-logo {
    width: min(330px, 58vw);
    max-height: 62px;
}

.account-nav {
    flex: 0 1 330px;
    min-width: min(100%, 260px);
    height: 46px;
    align-self: center;
}

.welcome-pill {
    height: 46px;
    min-height: 46px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-logout {
    height: 46px;
    min-height: 46px;
}

.player-window {
    grid-template-columns: 96px minmax(0, 1fr) minmax(190px, auto);
    gap: 16px;
    padding: 16px 18px 22px;
    border-color: rgba(255, 255, 255, 0.86);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 252, 255, 0.78)),
        rgba(255 255 255 / var(--panel-alpha));
}

.player-window::before {
    left: 18px;
    right: 18px;
    bottom: 9px;
}

.player-art {
    width: 96px;
    box-shadow: 0 16px 34px rgba(18, 100, 216, 0.24);
}

.player-main {
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 4px;
}

.player-main .eyebrow {
    color: #0f5ec9;
}

.player-main h2 {
    margin: 0;
    line-height: 1.16;
}

.player-main > .muted {
    margin: 0 0 4px;
    font-weight: 700;
}

.progress-wrap {
    gap: 6px;
}

.controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(54px, 1fr));
    align-self: center;
    min-width: 0;
}

.control-btn {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
}

.volume {
    margin-top: 2px;
}

.manager-row {
    margin: 0 0 10px;
    padding: 8px;
}

.category-tabs {
    margin: 8px -2px 12px;
    padding: 2px 2px 8px;
}

.category-tab {
    min-width: 104px;
    min-height: 52px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(219, 226, 236, 0.92);
}

.category-tab strong {
    font-size: 14px;
}

.category-tab.active {
    color: var(--primary-dark);
    background: linear-gradient(180deg, rgba(237, 244, 255, 0.98), rgba(255, 255, 255, 0.94));
}

.category-tab.add-card {
    min-width: 74px;
    justify-items: center;
    text-align: center;
}

.section-head {
    margin: 10px 0 10px;
}

.section-head h2 {
    font-size: clamp(18px, 2.5vw, 22px);
}

.button-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.audio-button {
    min-height: 86px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.88);
}

.audio-button strong {
    line-height: 1.25;
}

.audio-button.active {
    border-color: rgba(20, 167, 125, 0.72);
    background:
        linear-gradient(180deg, rgba(232, 250, 244, 0.96), rgba(255, 255, 255, 0.94));
    color: #0d6b54;
}

.quick-tools {
    margin-top: 12px;
}

.tool-panel,
.temp-library,
.form-card,
.user-list {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)),
        rgba(255 255 255 / var(--panel-alpha));
}

.admin-menu {
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.68);
}

.admin-menu a {
    box-shadow: none;
}

.admin-page-grid {
    align-items: start;
}

.single-page-card {
    max-width: 980px;
}

.user-list {
    max-height: min(720px, calc(100vh - 190px));
    overflow-y: auto;
}

.user-item {
    background: rgba(255, 255, 255, 0.78);
}

@media (max-width: 900px) {
    .player-window {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .controls {
        grid-column: 1 / -1;
    }

    .volume {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .shell {
        padding: 12px;
    }

    .topbar {
        gap: 10px;
        margin-bottom: 10px;
    }

    .topbar > div {
        flex-basis: 100%;
    }

    .topbar h1,
    .login-panel h1 {
        font-size: 23px;
    }

    .header-logo {
        width: min(280px, 72vw);
        max-height: 50px;
    }

    .account-nav {
        flex-basis: 100%;
        min-width: 0;
    }

    .player-window {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 12px 20px;
        margin-bottom: 10px;
    }

    .player-art {
        width: 58px;
    }

    #playerIcon {
        font-size: 22px;
    }

    .player-main h2 {
        font-size: 17px;
        line-height: 1.22;
    }

    .player-main .eyebrow {
        font-size: 11px;
    }

    .controls {
        gap: 7px;
    }

    .control-btn {
        height: 42px;
        font-size: 14px;
    }

    .manager-row {
        padding: 7px;
    }

    .manager-group {
        padding: 5px;
        gap: 6px;
    }

    .manager-group .secondary,
    .manager-group .danger-btn {
        min-height: 38px;
        font-size: 13px;
        padding: 0 10px;
    }

    .category-tabs {
        gap: 8px;
        margin-bottom: 8px;
    }

    .category-tab {
        min-width: 94px;
        min-height: 48px;
    }

    .button-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .audio-button {
        min-height: 80px;
        padding: 10px;
    }

    .audio-button strong {
        font-size: 14px;
    }

    .quick-tools {
        gap: 10px;
    }

    .tool-panel,
    .temp-library,
    .form-card,
    .user-list {
        padding: 14px;
    }

    .user-list {
        max-height: none;
    }
}

/* 2026.05 mobile premium pass: compact control surface, stable logo boxes, one-screen login. */
.topbar .brand-logo.header-logo {
    width: min(var(--logo-width, 330px), 58vw);
    height: var(--logo-height, 58px);
    max-height: none;
    object-fit: contain;
    object-position: left center;
}

.login-logo {
    height: clamp(74px, 13vw, 116px);
    max-height: none;
    object-fit: contain;
    object-position: left center;
}

body.login-page {
    min-height: 100dvh;
    overflow: hidden;
}

body.login-page .shell {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding-top: clamp(10px, 2vh, 22px);
    padding-bottom: clamp(8px, 1.6vh, 14px);
}

body.login-page .login-screen {
    min-height: 0;
    align-self: center;
}

body.login-page .site-footer {
    margin-top: 8px;
    padding: 4px 0 0;
    gap: 5px 12px;
    font-size: 11px;
}

.manager-row {
    justify-content: space-between;
    box-shadow: 0 10px 28px rgba(23, 32, 51, 0.05);
}

.manager-group {
    background: rgba(255, 255, 255, 0.86);
}

.manager-group > span {
    color: #40516d;
}

.update-detail-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 10px;
    align-items: start;
}

.update-detail-grid > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.update-detail-grid > strong {
    min-width: 0;
    color: #223047;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.update-detail-grid > strong:only-child {
    grid-column: 1 / -1;
}

.update-card .inline-actions + .inline-actions {
    margin-top: -6px;
}

@media (max-width: 760px) {
    .shell {
        padding: 10px;
    }

    .topbar {
        gap: 7px;
        margin-bottom: 8px;
    }

    .topbar .brand-logo.header-logo {
        width: min(250px, 70vw);
        height: 42px;
        margin-bottom: 1px;
    }

    .topbar h1 {
        font-size: 24px;
        line-height: 1.08;
        margin-top: 0;
    }

    .account-nav {
        height: 40px;
    }

    .welcome-pill,
    .account-logout {
        height: 40px;
        min-height: 40px;
        font-size: 13px;
    }

    .account-logout {
        min-width: 62px;
    }

    .player-window {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 8px 10px;
        padding: 10px 10px 15px;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .player-window::before {
        left: 10px;
        right: 10px;
        bottom: 5px;
        height: 5px;
        background:
            radial-gradient(circle, rgba(18, 100, 216, 0.7) 0 38%, transparent 42%) 0 0 / 28px 5px repeat-x,
            linear-gradient(90deg, rgba(18, 100, 216, 0.08), rgba(20, 167, 125, 0.1));
    }

    .player-art {
        width: 48px;
        border-radius: 10px;
    }

    .player-art .status-dot {
        top: 7px;
        right: 7px;
        width: 7px;
        height: 7px;
    }

    #playerIcon {
        font-size: 19px;
    }

    .player-main {
        gap: 2px;
    }

    .player-main h2 {
        font-size: 16px;
        line-height: 1.15;
        max-height: 38px;
        overflow: hidden;
    }

    .player-main > .muted {
        font-size: 15px;
        margin-bottom: 2px;
    }

    .progress-wrap {
        gap: 4px;
    }

    .progress-slider {
        height: 11px;
    }

    .progress-slider::-webkit-slider-runnable-track {
        height: 7px;
    }

    .progress-slider::-webkit-slider-thumb {
        width: 15px;
        height: 15px;
        margin-top: -4px;
    }

    .time-row,
    .volume span {
        font-size: 11px;
    }

    .controls {
        gap: 6px;
    }

    .control-btn {
        height: 36px;
        min-height: 36px;
        font-size: 13px;
        border-radius: 8px;
    }

    .volume {
        margin-top: 0;
    }

    .volume input {
        min-height: 28px;
    }

    .manager-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 7px;
        padding: 5px;
        margin-bottom: 6px;
        border-radius: 10px;
    }

    .manager-group {
        flex: 0 0 auto;
        gap: 4px;
        padding: 4px;
        border-radius: 9px;
    }

    .manager-group > span {
        padding: 0 5px;
        font-size: 12px;
    }

    .manager-group .secondary,
    .manager-group .danger-btn {
        min-height: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 12px;
        border-radius: 8px;
    }

    .category-tabs {
        gap: 7px;
        margin: 4px -10px 8px;
        padding: 2px 10px 8px;
    }

    .category-tab {
        min-width: 88px;
        min-height: 46px;
        padding: 7px 9px;
        border-radius: 10px;
    }

    .category-tab strong {
        font-size: 14px;
        max-width: 86px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .category-tab.add-card strong {
        font-size: 24px;
        max-width: none;
    }

    .section-head {
        margin: 8px 0 8px;
    }

    .section-head h2 {
        font-size: 22px;
    }

    .section-head .muted {
        display: none;
    }

    .button-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .audio-button {
        min-height: 72px;
        padding: 10px;
        border-radius: 10px;
    }

    .audio-button strong {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    .audio-button.add-card strong {
        display: block;
        font-size: 24px;
        line-height: 1;
    }

    .audio-button span {
        font-size: 11px;
    }

    .quick-tools {
        grid-template-columns: 1fr;
    }

    .site-footer {
        margin-top: 18px;
        padding-bottom: 2px;
        gap: 8px 12px;
        font-size: 11px;
    }

    .update-card {
        gap: 12px;
    }

    .update-head {
        gap: 8px;
    }

    .update-head h2 {
        margin-bottom: 0;
    }

    .update-head p {
        display: none;
    }

    .version-pill {
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }

    .update-progress-card {
        padding: 12px;
        border-radius: 10px;
    }

    .update-detail-grid {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 7px 8px;
    }

    .update-detail-grid > span,
    .update-detail-grid > strong {
        font-size: 12px;
    }

    .fixed-note {
        padding: 10px;
        font-size: 12px;
    }

    .update-card .primary,
    .update-card .secondary {
        min-height: 44px;
        font-size: 15px;
    }

    body.login-page .shell {
        padding: 8px 12px 7px;
    }

    body.login-page .login-screen {
        grid-template-columns: 1fr;
        gap: 10px;
        align-content: center;
    }

    body.login-page .login-screen > div {
        justify-items: center;
        text-align: center;
    }

    body.login-page .login-logo {
        width: min(300px, 82vw);
        height: 54px;
        margin-bottom: 4px;
        object-position: center;
    }

    body.login-page .login-panel h1 {
        font-size: clamp(22px, 7vw, 30px);
        line-height: 1.08;
        margin: 0;
    }

    body.login-page .form-card {
        padding: 13px;
        gap: 9px;
        width: 100%;
        max-width: 390px;
        justify-self: center;
    }

    body.login-page label {
        gap: 5px;
        font-size: 13px;
    }

    body.login-page input {
        min-height: 40px;
        padding: 0 11px;
    }

    body.login-page .remember-line {
        min-height: 22px;
        font-size: 12px;
    }

    body.login-page .primary {
        min-height: 42px;
        margin-top: 2px;
    }

    body.login-page .site-footer {
        margin-top: 4px;
        padding: 0;
        font-size: 10px;
        line-height: 1.25;
    }
}

@media (max-width: 380px) {
    .topbar h1 {
        font-size: 21px;
    }

    body.login-page .login-logo {
        height: 46px;
    }

    body.login-page .login-panel h1 {
        font-size: 21px;
    }

    body.login-page .form-card {
        padding: 11px;
        gap: 7px;
    }

    body.login-page input {
        min-height: 37px;
    }
}

/* 2026.05 service page and flatter mobile player pass. */
.service-card {
    gap: 16px;
}

.service-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.service-status-grid div {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(219, 226, 236, 0.9);
    background: rgba(255, 255, 255, 0.7);
}

.service-status-grid span {
    display: block;
    min-width: 0;
    max-width: 100%;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.38;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.service-status-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.service-actions form {
    margin: 0;
}

@media (max-width: 760px) {
    .player-window {
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 9px 8px 10px;
        gap: 7px 9px;
    }

    .player-window::before,
    .player-window::after {
        display: none;
    }

    .player-window.is-playing::before,
    .player-window.is-playing::after {
        animation: none;
    }

    .player-art {
        width: 46px;
        box-shadow: 0 8px 18px rgba(18, 100, 216, 0.16);
    }

    .player-window.is-playing .player-art {
        transform: none;
        box-shadow: 0 10px 20px rgba(18, 100, 216, 0.18);
    }

    .player-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .player-main h2 {
        font-size: 16px;
        max-height: 22px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .player-main > .muted {
        font-size: 13px;
    }

    .progress-wrap {
        grid-column: 1 / -1;
        margin-top: 4px;
    }

    .progress-slider,
    .volume input {
        width: 100%;
    }

    .progress-slider::-webkit-slider-runnable-track {
        height: 6px;
    }

    .progress-slider::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
    }

    .controls {
        grid-column: 1 / -1;
        gap: 6px;
        margin-top: 2px;
    }

    .control-btn {
        height: 34px;
        min-height: 34px;
    }

    .volume {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    .volume span {
        margin-bottom: 0;
        font-size: 12px;
    }

    .volume input {
        min-height: 22px;
    }

    .manager-row {
        padding: 4px;
        gap: 5px;
    }

    .manager-group {
        gap: 3px;
    }

    .service-status-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .service-status-grid div {
        padding: 10px;
    }

    .service-status-grid span {
        font-size: clamp(11px, 3.15vw, 13px);
        word-break: break-all;
    }

    .service-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .service-actions form,
    .service-actions button {
        width: 100%;
    }
}

/* 2026.05 progress bar full-width pass. */
.player-progress {
    grid-column: 1 / -1;
    width: 100%;
}

.player-progress .progress-slider {
    width: 100%;
}

@media (max-width: 760px) {
    .player-progress {
        grid-column: 1 / -1;
        margin-top: 2px;
        padding: 0 2px;
    }

    .player-progress .time-row {
        padding: 0 1px;
    }
}

/* Activity playback surface. */
body.activity-page {
    overflow: hidden;
    background: #eef3f8;
}

body.activity-page::before {
    display: none;
}

body.activity-page .shell {
    width: 100%;
    height: 100dvh;
    padding: 0;
    margin: 0;
}

body.activity-page .toast,
body.activity-page .site-footer {
    display: none;
}

.activity-shell {
    height: 100dvh;
    width: 100vw;
    display: grid;
    grid-template-columns: clamp(150px, 18vw, 240px) minmax(0, 1fr);
    background: #edf2f7;
    color: #172033;
}

.activity-sidebar {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    background: #dfe7ef;
    border-right: 1px solid #bdc9d5;
}

.activity-brand {
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
}

.activity-brand img {
    width: 100%;
    height: 48px;
    object-fit: contain;
    object-position: left center;
}

.activity-brand strong {
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.activity-categories {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    padding-right: 2px;
}

.activity-category {
    width: 100%;
    min-height: 62px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid #c4cfda;
    border-radius: 8px;
    background: #f8fafc;
    color: #1d2939;
    text-align: left;
}

.activity-category span {
    grid-row: 1 / 3;
    width: 28px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e6edf5;
    color: #3d536d;
    font-size: 12px;
    font-weight: 900;
}

.activity-category strong,
.activity-category small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-category strong {
    font-size: 16px;
}

.activity-category small {
    color: #617186;
    font-size: 11px;
}

.activity-category.active {
    border-color: #2162b6;
    background: #ffffff;
    box-shadow: inset 4px 0 0 #2162b6, 0 8px 22px rgba(27, 68, 118, 0.12);
}

.activity-main {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 10px;
    gap: 10px;
}

.activity-toolbar {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 10px;
    align-items: stretch;
    padding: 10px;
    border: 1px solid #c7d1dc;
    border-radius: 8px;
    background: #fff6fb;
}

.activity-title {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 2px;
}

.activity-title span {
    color: #2162b6;
    font-size: 12px;
    font-weight: 900;
}

.activity-title h1 {
    margin: 0;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.activity-title p {
    margin: 0;
    color: #53657b;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.activity-actions {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(86px, 1fr));
    gap: 8px;
    align-content: center;
}

.activity-tool {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid #bbc8d5;
    border-radius: 8px;
    background: #f8fafc;
    color: #1d2939;
    font-weight: 900;
    text-align: center;
}

.activity-tool.active {
    background: #e6f4ff;
    border-color: #2162b6;
    color: #164987;
}

.activity-tool.danger {
    background: #fff0f0;
    border-color: #f1b4b4;
    color: #b42318;
}

.activity-board {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(118px, 13vw, 178px), 1fr));
    gap: 8px;
    align-content: start;
    overflow-y: auto;
    padding: 2px;
}

.activity-audio {
    min-width: 0;
    min-height: clamp(74px, 12vh, 118px);
    display: grid;
    align-content: space-between;
    gap: 8px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #111827;
    text-align: left;
    box-shadow: 0 8px 16px rgba(20, 31, 47, 0.08);
}

.activity-audio strong {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.16;
    font-size: clamp(13px, 1.35vw, 18px);
    overflow-wrap: anywhere;
}

.activity-audio span {
    font-size: 12px;
    font-weight: 900;
}

.activity-audio.idle {
    background: #0f7a57;
    color: white;
}

.activity-audio.playing {
    background: #f2c94c;
    color: #251a00;
}

.activity-audio.done {
    background: #d92d20;
    color: white;
}

.activity-audio.empty {
    background: #d9e1ea;
    color: #65758a;
    border-color: #b8c4d1;
    box-shadow: none;
    cursor: not-allowed;
}

.activity-temp-panel {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
}

.activity-big-action {
    min-height: 92px;
    border-radius: 8px;
    border: 1px solid #a9bdd0;
    background: #ffffff;
    color: #1d2939;
    font-size: clamp(18px, 2.4vw, 30px);
    font-weight: 900;
}

.activity-big-action.talk {
    background: #e7f8ef;
    border-color: #71c79d;
}

.activity-big-action.recording {
    background: #fff4cb;
    border-color: #e4b82c;
    color: #5b4300;
}

.activity-temp-list {
    grid-column: 1 / -1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    overflow-y: auto;
}

.activity-temp-item,
.activity-empty {
    min-width: 0;
    padding: 12px;
    border: 1px solid #c6d1dc;
    border-radius: 8px;
    background: #ffffff;
}

.activity-temp-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    align-items: center;
}

.activity-temp-item strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.activity-temp-item span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.activity-temp-item button {
    grid-row: 1 / 3;
    grid-column: 2;
    min-height: 42px;
    min-width: 72px;
    border-radius: 8px;
    background: #2162b6;
    color: white;
    font-weight: 900;
}

.activity-empty {
    display: grid;
    place-items: center;
    color: #65758a;
    font-weight: 800;
}

.activity-temp-panel.is-hidden,
.activity-board.is-hidden {
    display: none;
}

@media (max-width: 900px), (orientation: portrait) {
    body.activity-page {
        overflow: auto;
    }

    body.activity-page .shell,
    .activity-shell {
        min-height: 100dvh;
        height: auto;
    }

    .activity-shell {
        grid-template-columns: 1fr;
    }

    .activity-sidebar {
        grid-template-rows: auto auto;
        border-right: 0;
        border-bottom: 1px solid #bdc9d5;
    }

    .activity-brand {
        grid-template-columns: 96px minmax(0, 1fr);
        align-items: center;
    }

    .activity-brand img {
        height: 36px;
    }

    .activity-categories {
        grid-auto-flow: column;
        grid-auto-columns: minmax(112px, 150px);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .activity-main {
        min-height: calc(100dvh - 150px);
    }

    .activity-toolbar {
        grid-template-columns: 1fr;
    }

    .activity-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .activity-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-temp-panel {
        grid-template-columns: 1fr;
    }

    .activity-temp-list {
        grid-column: auto;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .activity-main,
    .activity-sidebar {
        padding: 8px;
    }

    .activity-toolbar {
        padding: 8px;
    }

    .activity-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-tool {
        min-height: 42px;
        font-size: 13px;
    }

    .activity-audio {
        min-height: 86px;
    }
}

/* Sports Sounds Pro style activity console. */
body.activity-console-page {
    overflow: hidden;
    background: #f2e0ee;
}

body.activity-console-page::before,
body.activity-console-page .toast,
body.activity-console-page .site-footer {
    display: none;
}

body.activity-console-page .shell {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0;
}

.sp-console {
    width: 100vw;
    height: 100dvh;
    display: grid;
    grid-template-columns: clamp(180px, 18vw, 260px) minmax(0, 1fr);
    background: #ead5e4;
    color: #111827;
    font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
}

.sp-left {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    border-right: 2px solid #d88bc3;
    background: #efd8e8;
}

.sp-scene-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.sp-scene-tools button,
.sp-tools button,
.sp-tools a {
    min-height: 42px;
    border: 1px solid #aeb6c2;
    border-radius: 2px;
    background: #e8ecef;
    color: #111827;
    font-weight: 900;
    font-size: clamp(11px, 1.5vw, 14px);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.sp-scenes {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 6px;
    overflow-y: auto;
}

.sp-scene {
    min-height: 48px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0 8px;
    align-items: center;
    padding: 6px;
    border: 1px solid #a9b4c0;
    border-radius: 2px;
    background: #f4f5f6;
    text-align: left;
}

.sp-scene b {
    display: grid;
    place-items: center;
    height: 32px;
    background: #8ec4ee;
    color: #0f3053;
}

.sp-scene strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-scene strong {
    font-size: 15px;
}

.sp-scene.active {
    border-color: #138a57;
    background: #dff7ea;
    box-shadow: inset 4px 0 0 #138a57;
}

.sp-main {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
}

.sp-top {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(560px, auto);
    gap: 8px;
    border: 2px solid #d88bc3;
    background: #f5cce4;
    padding: 6px;
}

.sp-title {
    min-width: 0;
    display: grid;
    align-content: center;
}

.sp-title p,
.sp-title h1,
.sp-title span {
    margin: 0;
}

.sp-title p {
    color: #4a24b8;
    font-size: 18px;
    font-weight: 900;
}

.sp-title h1 {
    color: #202060;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sp-title span {
    color: #1f2937;
    font-size: clamp(14px, 1.8vw, 22px);
    font-weight: 900;
}

.sp-tools {
    display: grid;
    grid-template-columns: repeat(6, minmax(72px, 1fr));
    gap: 6px;
    align-content: center;
}

.sp-tools button,
.sp-tools a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    min-height: 46px;
    font-size: 14px;
}

.sp-tools button.active {
    background: #d4f5d2;
    border-color: #52a447;
}

#stopBtn {
    background: #ffe3e3;
    color: #b42318;
}

.sp-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(92px, 1fr));
    grid-auto-rows: minmax(74px, 1fr);
    gap: 0;
    overflow-y: auto;
    padding: 0;
    background: #d9dee7;
    border: 2px solid #d88bc3;
}

.sp-pad {
    position: relative;
    min-width: 0;
    min-height: 74px;
    display: grid;
    align-content: space-between;
    gap: 3px;
    padding: 8px 8px 7px;
    border: 1px dashed #aeb7c3;
    border-radius: 2px;
    background: #cdeedb;
    color: #113323;
    text-align: left;
    box-shadow: none;
}

.sp-pad em {
    position: absolute;
    top: 4px;
    right: 6px;
    color: #657184;
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
}

.sp-pad strong {
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: clamp(11px, 1.25vw, 18px);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.sp-pad span {
    font-size: 12px;
    font-weight: 900;
}

.sp-pad.empty {
    background: #e5e9ef;
    color: #5b6472;
}

.sp-pad.empty strong {
    display: grid;
    place-items: center;
    color: #a0a9b7;
    font-size: clamp(22px, 3vw, 34px);
    -webkit-line-clamp: initial;
}

.sp-pad.empty em {
    color: #788290;
}

.sp-pad.playing {
    background: #f2c94c;
    color: #241900;
}

.sp-pad.done {
    background: #f97066;
    color: #3b0a05;
}

.sp-pad.add-row {
    place-items: center;
    align-content: center;
    text-align: center;
    background: #e7edf3;
    color: #203040;
    border: 2px dashed #8a99a8;
}

.sp-pad.add-row strong {
    display: block;
    font-size: 34px;
    line-height: 1;
}

.sp-pad.dragging {
    opacity: .48;
}

@media (max-aspect-ratio: 1/1) {
    body.activity-console-page::after {
        content: "请横屏使用活动系统";
        position: fixed;
        inset: 0;
        z-index: 30;
        display: grid;
        place-items: center;
        padding: 30px;
        background: #101828;
        color: white;
        font-size: 28px;
        font-weight: 900;
        text-align: center;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    .sp-console {
        grid-template-columns: 158px minmax(0, 1fr);
    }

    .sp-scene-tools button {
        min-height: 34px;
        padding: 0 2px;
        font-size: clamp(10px, 1.55vw, 12px);
        line-height: 1;
    }

    .sp-top {
        grid-template-columns: minmax(180px, 1fr) minmax(390px, auto);
    }

    .sp-tools {
        grid-template-columns: repeat(5, minmax(70px, 1fr));
    }

    .sp-tools button,
    .sp-tools a {
        min-height: 40px;
        font-size: 12px;
    }

    .sp-grid {
        grid-template-columns: repeat(5, minmax(78px, 1fr));
        grid-auto-rows: calc(100% / 4);
        align-content: start;
    }
}

/* 2026-05-08 refinement pass: compact alerts, fixed volume, better admin, scrollable activity board. */
.toast {
    width: fit-content;
    max-width: min(680px, calc(100vw - 32px));
    min-height: 0;
    margin: 0 auto 12px;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.45;
}

body.login-page .toast {
    position: fixed;
    z-index: 20;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 12px 28px rgba(86, 63, 12, 0.12);
}

.login-logo {
    background: transparent;
    object-fit: contain;
}

.player-title-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 300px);
    align-items: center;
    gap: 16px;
}

.player-title-row h2 {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(17px, 2.3vw, 28px);
    max-width: 100%;
}

.player-title-row h2.is-marquee {
    text-overflow: clip;
    animation: title-marquee 8s linear infinite;
}

@keyframes title-marquee {
    0%, 14% { transform: translateX(0); }
    86%, 100% { transform: translateX(calc(-1 * max(0px, 100% - 260px))); }
}

.player-volume-inline {
    grid-column: auto;
    min-width: 0;
    display: grid;
    gap: 4px;
    margin: 0;
}

.player-volume-inline span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}

.player-volume-inline input {
    width: 100%;
    min-height: 26px;
}

.admin-dashboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.admin-tile {
    min-height: 154px;
    display: grid;
    align-content: space-between;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(168, 185, 211, 0.72);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 40px rgba(25, 44, 78, 0.08);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.admin-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(18, 100, 216, 0.44);
    box-shadow: 0 18px 44px rgba(18, 100, 216, 0.13);
}

.admin-tile span {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 6px;
    background: #eef5ff;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 900;
}

.admin-tile strong {
    font-size: 22px;
}

.admin-tile em {
    color: var(--muted);
    font-style: normal;
    line-height: 1.5;
}

.admin-tile.primary-tile {
    background: linear-gradient(135deg, rgba(226, 240, 255, 0.95), rgba(255, 255, 255, 0.88));
}

/* 2026-06-18: remote broadcast system settings use one consistent card color. */
.admin-dashboard .admin-tile,
.admin-dashboard .admin-tile.primary-tile,
.admin-dashboard form.admin-tile {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(168, 185, 211, 0.72);
}

.remote-layout .form-card,
.remote-layout .form-card.settings-card,
.remote-layout .form-card.update-card {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(168, 185, 211, 0.72);
}

.health-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.health-summary article,
.health-card,
.health-actions {
    border: 1px solid rgba(168, 185, 211, 0.72);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 14px 40px rgba(25, 44, 78, 0.08);
}

.health-summary article {
    display: grid;
    gap: 4px;
    padding: 16px;
}

.health-summary span,
.health-card span,
.health-summary em,
.health-actions small {
    color: var(--muted);
    font-style: normal;
}

.health-summary strong {
    font-size: 26px;
    color: var(--text);
}

.health-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.health-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-left: 5px solid #94a3b8;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.health-card:hover,
.health-card:focus-visible,
.health-card.active {
    transform: translateY(-1px);
    box-shadow: 0 18px 44px rgba(25, 44, 78, 0.14);
    outline: 2px solid rgba(35, 133, 244, 0.18);
    outline-offset: 2px;
}

.health-card div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.health-card strong {
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef5ff;
    color: var(--primary-dark);
    white-space: nowrap;
}

.health-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    word-break: break-word;
}

.health-ok {
    border-left-color: #22c55e;
}

.health-warn {
    border-left-color: #f59e0b;
}

.health-idle {
    border-left-color: #94a3b8;
}

.health-actions.health-ok,
.health-actions.health-warn,
.health-actions.health-idle {
    border-left-width: 5px;
    border-left-style: solid;
}

.health-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    margin-top: 14px;
    padding: 18px;
}

.health-actions h2 {
    margin: 0 0 10px;
}

.health-actions ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text);
    line-height: 1.8;
}

.health-detail-panel {
    margin-top: 14px;
    position: relative;
    overflow: hidden;
}

.health-diagnostic-anim {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    place-items: center;
    align-content: center;
    gap: 8px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(248, 251, 255, 0.94), rgba(255, 255, 255, 0.92));
    color: var(--text);
}

.health-detail-panel.is-diagnosing .health-diagnostic-anim {
    display: grid;
}

.health-diagnostic-anim span {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 3px solid rgba(35, 133, 244, 0.16);
    border-top-color: var(--primary);
    border-right-color: #22c55e;
    animation: health-scan-spin 0.9s linear infinite;
    position: relative;
}

.health-diagnostic-anim span::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: inherit;
    background:
        linear-gradient(90deg, transparent 48%, rgba(35, 133, 244, 0.35) 50%, transparent 52%),
        radial-gradient(circle, rgba(35, 133, 244, 0.18), transparent 64%);
    animation: health-scan-pulse 1.1s ease-in-out infinite;
}

.health-diagnostic-anim strong {
    font-size: 16px;
}

.health-diagnostic-anim em {
    color: var(--muted);
    font-style: normal;
}

@keyframes health-scan-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes health-scan-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.92);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

.health-issue-list {
    display: grid;
    gap: 8px;
    padding-left: 0 !important;
    list-style: none;
}

.health-issue-list li {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid #d9e4f2;
    border-radius: 8px;
    background: #f8fbff;
}

.health-issue-list span {
    color: var(--muted);
}

.health-issue-list a {
    width: fit-content;
}

.network-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.network-check-card {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(168, 185, 211, 0.72);
    border-left: 5px solid #94a3b8;
    border-radius: 8px;
    background: #fff;
}

.network-check-card span {
    color: var(--muted);
    line-height: 1.5;
    word-break: break-word;
}

.health-action-buttons {
    display: grid;
    gap: 8px;
    min-width: 180px;
}

.cloud-update-card,
.manual-config-box {
    display: grid;
    gap: 7px;
    padding: 13px;
    border: 1px solid #d9e4f2;
    border-radius: 8px;
    background: #f8fbff;
}

.manual-config-box code {
    padding: 2px 5px;
    border-radius: 5px;
    background: #eef5ff;
    color: var(--primary-dark);
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 900;
}

.remote-layout {
    grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr);
}

.frp-config-form,
.update-layout .settings-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frp-config-form button,
.update-layout .settings-form button {
    grid-column: 1 / -1;
}

.sp-tools {
    grid-template-columns: minmax(116px, 1.15fr) repeat(5, minmax(72px, 1fr));
    gap: 4px;
}

.sp-volume {
    min-height: 36px;
    display: grid;
    gap: 1px;
    align-content: center;
    padding: 2px 6px;
    border: 1px solid #aeb6c2;
    border-radius: 2px;
    background: #e8ecef;
    color: #111827;
    font-weight: 900;
}

.sp-volume {
    grid-template-rows: auto minmax(0, auto);
}

.sp-volume b {
    font-size: .95em;
}

.sp-volume input {
    width: 100%;
    min-width: 0;
}

.sp-grid {
    grid-template-columns: repeat(5, minmax(82px, 1fr));
    grid-auto-rows: clamp(72px, 18.6vh, 132px);
    align-content: start;
}

.activity-jump-tab {
    text-decoration: none;
}

.talk-panel {
    min-width: 0;
}

.talk-record-btn {
    width: 100%;
    min-height: 62px;
    border: 0;
    border-radius: 999px;
    background: #1f9d55;
    color: white;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(31, 157, 85, 0.18);
    touch-action: none;
}

.talk-record-btn.recording {
    background: #f2c94c;
    color: #201600;
    box-shadow: 0 12px 24px rgba(242, 201, 76, 0.22);
}

@media (min-width: 980px) {
    .quick-tools {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .admin-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .health-summary,
    .health-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .health-actions {
        grid-template-columns: 1fr;
    }

    .player-title-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .player-volume-inline {
        max-width: 360px;
    }
}

@media (max-width: 640px) {
    .player-title-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .player-title-row h2 {
        font-size: clamp(18px, 5.4vw, 24px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.12;
    }

    .player-volume-inline {
        width: 100%;
        max-width: none;
        grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }

    .player-volume-inline input {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 720px) {
    .admin-dashboard,
    .admin-page-grid,
    .frp-config-form,
    .update-layout .settings-form {
        grid-template-columns: 1fr;
    }

    .admin-tile {
        min-height: 118px;
    }

    .health-summary,
    .health-grid {
        grid-template-columns: 1fr;
    }

    .toast {
        max-width: calc(100vw - 20px);
        font-size: 13px;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    .sp-main {
        gap: 5px;
        padding: 6px;
    }

    .sp-top {
        align-items: center;
        gap: 4px;
        padding: 4px;
    }

    .sp-title h1 {
        font-size: clamp(22px, 3.2vw, 30px);
    }

    .sp-tools {
        grid-template-columns: minmax(94px, 1.05fr) repeat(5, minmax(56px, 1fr));
        gap: 3px;
        align-items: center;
        align-content: center;
    }

    .sp-volume {
        height: 38px;
        min-height: 38px;
        font-size: clamp(9px, 1.25vw, 11px);
        padding: 2px 5px;
        line-height: 1;
    }

    .sp-tools button,
    .sp-tools a {
        height: 38px;
        min-height: 38px;
        padding: 0 5px;
        font-size: clamp(9px, 1.22vw, 11px);
        line-height: 1.08;
        white-space: nowrap;
    }

    .sp-grid {
        grid-template-columns: repeat(5, minmax(76px, 1fr));
        grid-auto-rows: calc(100% / 4);
        align-content: start;
    }

    .sp-pad {
        padding: 5px;
    }

    .sp-pad.add-row strong {
        font-size: 28px;
    }
}

/* 2026-05-09 stability and mobile control pass. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.player-state-pill {
    width: fit-content;
    margin: 2px 0 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-weight: 900;
    white-space: nowrap;
}

.player-progress {
    position: relative;
    padding-top: 4px;
}

.progress-bubble {
    position: absolute;
    top: -2px;
    transform: translateX(-50%);
    min-width: 46px;
    height: 20px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2f80ed;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    pointer-events: none;
}

.player-volume-inline {
    grid-template-columns: minmax(0, 1fr);
}

.player-volume-inline input {
    width: 100%;
}

body.activity-console-page::after {
    display: none !important;
}

.sp-main {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 4px;
}

.sp-top {
    align-items: stretch;
    padding: 4px;
}

.sp-tools {
    grid-template-columns: minmax(104px, 1fr) repeat(4, minmax(58px, .76fr)) minmax(96px, 1fr);
    gap: 4px;
}

.sp-tools button,
.sp-tools a {
    min-height: 34px;
    height: 34px;
    padding: 0 5px;
    font-size: clamp(10px, 1.05vw, 12px);
    line-height: 1;
    white-space: nowrap;
}

.sp-volume-stepper {
    min-height: 34px;
    height: 34px;
    display: grid;
    grid-template-columns: 30px minmax(48px, 1fr) 30px;
    align-items: center;
    border: 1px solid #aeb6c2;
    background: #e8ecef;
}

.sp-volume-stepper button {
    min-height: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: 18px;
}

.sp-volume-stepper b {
    min-width: 0;
    text-align: center;
    font-size: clamp(10px, 1.15vw, 12px);
    white-space: nowrap;
    overflow: hidden;
}

.activity-progress-line {
    --activity-progress: 0%;
    --activity-progress-x: 0;
    position: relative;
    min-height: 20px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    color: #633b00;
    font-size: 11px;
    font-weight: 900;
    user-select: none;
    touch-action: none;
}

.activity-progress-line i {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b var(--activity-progress), #f7d9a2 var(--activity-progress));
}

.activity-progress-line button {
    position: absolute;
    left: var(--activity-progress);
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 48px;
    height: 18px;
    border: 0;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    pointer-events: none;
}

.sp-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: calc(100% / 4);
    align-content: stretch;
    background: #edf1f5;
    border-color: #d88bc3;
}

.sp-grid .sp-pad {
    min-height: 0;
    border: 1px dashed #b8c2ce;
    background: #cfe9dc;
}

.sp-pad.empty {
    background: #e7ebf0;
}

.sp-pad.playing {
    background: #f3cc4f;
}

.sp-pad.done {
    background: #f47f75;
}

.sp-pad strong {
    font-size: clamp(10px, 1.15vw, 16px);
    text-align: center;
}

.sp-pad span {
    font-size: clamp(9px, 1vw, 12px);
    text-align: center;
}

.sp-scene.playing {
    border-color: #d39b00;
    background: #fff0bd;
    box-shadow: inset 4px 0 0 #f3c63f;
}

.activity-orientation-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .86);
}

.activity-orientation-overlay[hidden] {
    display: none;
}

.activity-orientation-overlay button,
.activity-fullscreen-hint {
    border: 0;
    border-radius: 8px;
    padding: 12px 18px;
    background: #fff;
    color: #0f172a;
    font-weight: 900;
}

.activity-fullscreen-hint {
    position: fixed;
    z-index: 45;
    right: 12px;
    bottom: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}

.activity-fullscreen-hint[hidden] {
    display: none;
}

.talk-file-recorder {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.talk-file-recorder[hidden] {
    display: none;
}

.talk-file-recorder audio {
    width: 100%;
}

.talk-file-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.talk-upload-progress {
    position: relative;
    min-height: 24px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2f7;
}

.talk-upload-progress[hidden] {
    display: none;
}

.talk-upload-progress span {
    position: relative;
    z-index: 1;
    display: block;
    padding: 5px 10px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
}

.talk-upload-progress b {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: #93c5fd;
    transition: width .15s ease;
}

.upload-progress-card {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 120;
    width: min(360px, calc(100vw - 28px));
    padding: 14px;
    border: 1px solid rgba(22, 101, 52, .18);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
    backdrop-filter: blur(14px);
}

.upload-progress-card[hidden] {
    display: none;
}

.upload-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.upload-progress-head strong,
.upload-progress-head span {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

.upload-progress-card p {
    margin: 0 0 10px;
    overflow: hidden;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-progress-track {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.upload-progress-track i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #16a34a, #65a30d);
    transition: width .16s ease;
}

.upload-progress-card[data-state="done"] .upload-progress-track i {
    background: linear-gradient(90deg, #0284c7, #22c55e);
}

.upload-progress-card[data-state="error"] {
    border-color: rgba(220, 38, 38, .28);
}

.upload-progress-card[data-state="error"] .upload-progress-track i {
    background: linear-gradient(90deg, #ef4444, #f97316);
}

@media (max-width: 980px) and (orientation: landscape) {
    .sp-console {
        grid-template-columns: 148px minmax(0, 1fr);
    }

    .sp-left {
        gap: 4px;
        padding: 5px;
    }

    .sp-scene-tools {
        gap: 4px;
    }

    .sp-scene-tools button {
        min-height: 32px;
        height: 32px;
        font-size: clamp(10px, 1.45vw, 12px);
        white-space: nowrap;
    }

    .sp-scene {
        min-height: 44px;
    }

    .sp-top {
        grid-template-columns: minmax(150px, 1fr) minmax(372px, auto);
        gap: 4px;
    }

    .sp-title h1 {
        font-size: clamp(20px, 3vw, 28px);
    }

    .sp-tools {
        grid-template-columns: minmax(150px, 1.25fr) repeat(4, minmax(50px, .66fr)) minmax(82px, .82fr);
    }

    .sp-tools button,
    .sp-tools a,
    .sp-volume-stepper {
        height: 32px;
        min-height: 32px;
        font-size: clamp(9px, 1.25vw, 11px);
    }

    .sp-grid {
        grid-auto-rows: calc((100% - 0px) / 4);
    }
}

@media (max-width: 640px) {
    .upload-progress-card {
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: auto;
        padding: 12px;
        border-radius: 16px;
    }

    .upload-progress-head strong,
    .upload-progress-head span {
        font-size: 13px;
    }

    .player-window {
        gap: 8px;
    }

    .player-title-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .player-title-row h2 {
        font-size: clamp(17px, 5vw, 22px);
    }

    .player-state-pill {
        font-size: 13px;
        padding: 4px 9px;
    }
}

/* 2026-05-10 activity and log refinements. */
.sp-tools {
    grid-template-columns: minmax(150px, 1.2fr) repeat(4, minmax(58px, .72fr)) minmax(96px, .9fr);
}

.sp-scenes {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sp-volume-stepper {
    grid-template-columns: 34px minmax(68px, 1fr) 34px;
    gap: 4px;
    padding: 3px;
    overflow: hidden;
}

.sp-volume-stepper button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    place-self: center;
    border: 1px solid #9aa7b8;
    border-radius: 3px;
    background: #fff;
    color: #111827;
    font-size: 19px;
    line-height: 1;
    font-weight: 900;
}

.sp-volume-stepper b {
    display: block;
    text-align: center;
    font-size: clamp(10px, 1.05vw, 13px);
    line-height: 1;
}

.activity-progress-line {
    grid-template-columns: 46px minmax(80px, 1fr) 46px;
    gap: 6px;
    padding: 0 4px;
}

.activity-progress-line i {
    position: relative;
    min-width: 0;
}

.activity-progress-line button {
    left: calc(73px + (100% - 146px) * var(--activity-progress-x) / 100);
    transform: translate(-50%, -50%);
    min-width: 42px;
    max-width: 42px;
    height: 17px;
    padding: 0;
}

.sp-pad.paused {
    animation: activity-paused-flash .5s linear infinite alternate;
}

@keyframes activity-paused-flash {
    from {
        background: #f3cc4f;
        color: #241900;
    }
    to {
        background: #f47f75;
        color: #3b0a05;
    }
}

/* Silent desktop mode: phone/remote operation must not create flashing UI on the PC browser. */
*,
*::before,
*::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

.player-window.is-playing::before,
.player-window.is-playing::after,
.player-window.is-playing .player-art::before,
.player-window.is-playing .player-art::after,
.status-dot.playing,
.audio-button.active,
.sp-pad.paused {
    animation: none !important;
}

.player-window.is-playing .player-art::before,
.player-window.is-playing .player-art::after {
    opacity: 0 !important;
}

@media (orientation: portrait) {
    body.activity-console-page.activity-landscape-mode {
        overflow: hidden;
    }

    body.activity-console-page.activity-landscape-mode .shell {
        width: 100vw;
        height: 100dvh;
        overflow: hidden;
    }

    body.activity-console-page.activity-landscape-mode .sp-console {
        width: 100dvh;
        height: 100vw;
        transform: rotate(90deg) translateY(-100%);
        transform-origin: top left;
        grid-template-columns: clamp(120px, 18dvh, 156px) minmax(0, 1fr);
    }

    body.activity-console-page.activity-landscape-mode .sp-top {
        grid-template-columns: minmax(126px, 1fr) minmax(370px, auto);
    }

    body.activity-console-page.activity-landscape-mode .sp-tools {
        grid-template-columns: minmax(150px, 1.25fr) repeat(4, minmax(50px, .66fr)) minmax(82px, .82fr);
    }

    body.activity-console-page.activity-landscape-mode .sp-tools button,
    body.activity-console-page.activity-landscape-mode .sp-tools a {
        min-height: 32px;
        height: 32px;
        font-size: clamp(9px, 1.35dvh, 12px);
    }

    body.activity-console-page.activity-landscape-mode .sp-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-rows: calc(100% / 4);
    }

    body.activity-console-page.activity-landscape-mode .activity-fullscreen-hint {
        right: 10px;
        bottom: 10px;
        max-width: min(320px, calc(100dvh - 20px));
        padding: 10px 14px;
        font-size: 13px;
    }
}

.player-title-row h2.is-marquee {
    animation: title-marquee 8s linear infinite !important;
}

/* 2026-05-10 activity compact single-line console and portrait rotate mode. */
body.activity-console-page {
    overflow-x: hidden;
}

body.activity-console-page .sp-top {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
}

body.activity-console-page .sp-title {
    flex: 0 0 auto;
    min-width: clamp(92px, 18vw, 170px);
    max-width: clamp(120px, 24vw, 240px);
}

body.activity-console-page .sp-title h1 {
    font-size: clamp(22px, 4vw, 34px);
    line-height: 1;
}

body.activity-console-page .sp-tools {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

body.activity-console-page .sp-tools button,
body.activity-console-page .sp-tools a {
    flex: 0 0 auto;
    height: 32px;
    min-height: 32px;
    min-width: auto;
    padding: 0 8px;
    font-size: clamp(10px, 1.25vw, 12px);
    white-space: nowrap;
}

body.activity-console-page .sp-volume-stepper {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: auto;
    min-width: clamp(104px, 13vw, 132px);
    height: 32px;
    min-height: 32px;
    padding: 0 2px;
    border: 0;
    background: transparent;
}

body.activity-console-page .sp-volume-stepper button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}

body.activity-console-page .sp-volume-stepper b {
    flex: 0 0 58px;
    width: 58px;
}

body.activity-console-page .activity-progress-line {
    min-height: 17px;
    height: 17px;
    grid-template-columns: 42px minmax(60px, 1fr) 42px;
    gap: 4px;
    padding: 0 4px;
    font-size: 10px;
}

body.activity-console-page .activity-progress-line button {
    left: calc(67px + (100% - 134px) * var(--activity-progress-x) / 100);
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 15px;
    font-size: 9px;
}

body.activity-console-page .activity-orientation-overlay {
    background: #f3d8ea;
    color: #231326;
}

.rotate-tip-card {
    display: grid;
    justify-items: center;
    gap: 14px;
    max-width: 300px;
    padding: 28px 24px;
    text-align: center;
}

.rotate-tip-icon {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border: 2px solid #c85590;
    border-radius: 50%;
    color: #c85590;
    font-size: 46px;
    font-weight: 900;
}

.rotate-tip-card h2 {
    margin: 0;
    font-size: 22px;
}

.rotate-tip-card p {
    margin: 0;
    color: #4b344c;
    line-height: 1.7;
}

.rotate-tip-card button {
    min-width: 190px;
    border-radius: 10px;
    background: #ce4f91;
    color: #fff;
}

@media (orientation: portrait) {
    body.activity-console-page.is-portrait:not(.force-landscape) #app {
        visibility: hidden;
        pointer-events: none;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) #activityOrientationOverlay {
        visibility: visible;
        pointer-events: auto;
    }

    body.activity-console-page.force-landscape {
        overflow: hidden;
    }

    body.activity-console-page.force-landscape #app {
        position: fixed;
        left: 50%;
        top: 50%;
        width: calc(var(--vh, 1vh) * 100);
        height: 100vw;
        transform: translate(-50%, -50%) rotate(90deg);
        transform-origin: center center;
        visibility: visible;
        overflow: hidden;
        padding: 0;
        max-width: none;
    }

    body.activity-console-page.force-landscape .sp-console {
        width: 100%;
        height: 100%;
        grid-template-columns: clamp(120px, 18vh, 150px) minmax(0, 1fr);
    }

    body.activity-console-page.force-landscape .sp-title h1 {
        font-size: clamp(22px, 4vh, 34px);
    }

    body.activity-console-page.force-landscape .sp-tools button,
    body.activity-console-page.force-landscape .sp-tools a {
        font-size: clamp(10px, 1.45vh, 12px);
    }
}

/* 2026-05-10 activity landscape overflow, safe-area, and smooth seek pass. */
body.activity-console-page,
body.activity-console-page * {
    box-sizing: border-box;
}

body.activity-console-page {
    --safe-left: max(8px, env(safe-area-inset-left));
    --safe-right: max(12px, env(safe-area-inset-right));
    --safe-top: max(6px, env(safe-area-inset-top));
    --safe-bottom: max(6px, env(safe-area-inset-bottom));
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
}

body.activity-console-page.is-mobile-landscape {
    --safe-left: max(10px, env(safe-area-inset-left));
    --safe-right: max(14px, env(safe-area-inset-right));
}

body.activity-console-page .shell,
body.activity-console-page #app {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    overflow: hidden;
}

body.activity-console-page .sp-console {
    width: 100vw;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(130px, 17vw, 260px) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
        "scene control"
        "scene progress"
        "scene grid";
    gap: clamp(4px, .8vw, 10px);
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    overflow: hidden;
}

body.activity-console-page .sp-left {
    grid-area: scene;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: clamp(4px, .7vw, 8px);
}

body.activity-console-page .sp-scenes {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

body.activity-console-page .sp-main {
    display: contents;
}

body.activity-console-page .sp-top {
    grid-area: control;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(3px, .6vw, 8px);
    padding: clamp(3px, .6vw, 6px) max(4px, env(safe-area-inset-right)) clamp(3px, .6vw, 6px) clamp(4px, .6vw, 6px);
    overflow: hidden;
}

body.activity-console-page .sp-title {
    flex: 0 1 clamp(92px, 20vw, 240px);
    min-width: clamp(78px, 15vw, 150px);
    max-width: clamp(112px, 23vw, 240px);
}

body.activity-console-page .sp-title h1 {
    font-size: clamp(22px, 4vw, 40px);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.activity-console-page .sp-tools {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(3px, .6vw, 8px);
    padding-right: max(4px, env(safe-area-inset-right));
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

body.activity-console-page .sp-tools::-webkit-scrollbar {
    display: none;
}

body.activity-console-page .sp-tools button,
body.activity-console-page .sp-tools a {
    flex: 0 1 auto;
    width: auto;
    height: clamp(30px, 7vh, 48px);
    min-width: 0;
    max-width: clamp(62px, 10vw, 120px);
    min-height: 0;
    padding: 0 clamp(5px, 1vw, 12px);
    border-radius: 5px;
    font-size: clamp(11px, 1.6vw, 16px);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.activity-console-page #returnNormalLink {
    max-width: clamp(80px, 13vw, 138px);
}

body.activity-console-page .sp-volume-stepper {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: auto;
    min-width: clamp(112px, 14vw, 160px);
    max-width: 170px;
    height: clamp(30px, 7vh, 48px);
    min-height: 0;
    padding: 0 3px;
    border: 1px solid #aeb7c2;
    border-radius: 6px;
    background: #edf2f7;
}

body.activity-console-page .sp-volume-stepper button {
    flex: 0 0 auto;
    width: clamp(26px, 4vw, 38px);
    height: clamp(26px, 5.5vh, 36px);
    min-width: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #9aa7b8;
    border-radius: 4px;
    background: #fff;
    font-size: clamp(15px, 2vw, 20px);
    font-weight: 900;
    line-height: 1;
}

body.activity-console-page .sp-volume-stepper b {
    flex: 0 0 auto;
    width: auto;
    min-width: clamp(58px, 7vw, 78px);
    text-align: center;
    font-size: clamp(12px, 1.6vw, 16px);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

body.activity-console-page .activity-progress-line {
    grid-area: progress;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    height: clamp(34px, 7vh, 46px);
    display: grid;
    grid-template-columns: clamp(38px, 5vw, 54px) minmax(0, 1fr) clamp(38px, 5vw, 54px);
    align-items: center;
    gap: clamp(4px, .8vw, 8px);
    padding: 0 clamp(4px, .8vw, 8px);
    overflow: hidden;
    touch-action: none;
    -ms-touch-action: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body.activity-console-page .activity-progress-line i {
    min-width: 0;
    height: clamp(10px, 2.3vh, 16px);
    border-radius: 999px;
    contain: layout paint;
    box-shadow: inset 0 0 0 1px rgba(99, 59, 0, .14);
}

body.activity-console-page .activity-progress-line button {
    left: calc(
        clamp(38px, 5vw, 54px)
        + clamp(4px, .8vw, 8px)
        + (100% - (clamp(38px, 5vw, 54px) * 2) - (clamp(4px, .8vw, 8px) * 2)) * var(--activity-progress-x) / 100
    );
    width: clamp(48px, 7vw, 64px);
    min-width: 0;
    max-width: none;
    height: clamp(22px, 4.6vh, 30px);
    padding: 0;
    font-size: clamp(10px, 1.35vw, 12px);
    will-change: left;
    box-shadow: 0 2px 8px rgba(117, 66, 0, .22);
}

body.activity-console-page .activity-progress-line.is-dragging i {
    height: clamp(12px, 2.7vh, 18px);
}

body.activity-console-page .activity-progress-line.is-dragging button {
    transform: translate(-50%, -50%) scale(1.08);
}

body.activity-console-page .sp-grid {
    grid-area: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: calc(100% / 4);
    align-content: start;
    overflow-y: auto;
    overflow-x: hidden;
    border: 2px solid #d88bc3;
}

body.activity-console-page .sp-pad {
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: clamp(4px, 1vw, 8px);
}

body.activity-console-page .sp-pad strong,
body.activity-console-page .sp-pad span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

@media (orientation: landscape) and (max-height: 460px) {
    body.activity-console-page .sp-console {
        grid-template-columns: clamp(126px, 17vw, 154px) minmax(0, 1fr);
        gap: 4px;
    }

    body.activity-console-page .sp-left {
        gap: 4px;
        padding: 4px;
    }

    body.activity-console-page .sp-scene-tools {
        gap: 3px;
    }

    body.activity-console-page .sp-scene-tools button {
        height: 30px;
        min-height: 30px;
        padding: 0 3px;
        font-size: 11px;
        border-radius: 4px;
    }

    body.activity-console-page .sp-scene {
        min-height: 40px;
        padding: 4px;
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 0 5px;
    }

    body.activity-console-page .sp-scene b {
        height: 26px;
    }

    body.activity-console-page .sp-scene strong {
        font-size: 12px;
    }

    body.activity-console-page .sp-top,
    body.activity-console-page .sp-tools {
        gap: 4px;
    }

    body.activity-console-page .sp-title {
        min-width: clamp(76px, 14vw, 122px);
        max-width: clamp(92px, 19vw, 160px);
    }

    body.activity-console-page .sp-title h1 {
        font-size: clamp(22px, 4vw, 32px);
    }

    body.activity-console-page .sp-tools button,
    body.activity-console-page .sp-tools a,
    body.activity-console-page .sp-volume-stepper {
        height: 32px;
        min-height: 32px;
        border-radius: 5px;
    }

    body.activity-console-page .sp-tools button,
    body.activity-console-page .sp-tools a {
        max-width: clamp(58px, 10vw, 104px);
        padding: 0 6px;
        font-size: 12px;
    }

    body.activity-console-page .sp-volume-stepper {
        min-width: 118px;
        max-width: 136px;
    }

    body.activity-console-page .sp-volume-stepper button {
        width: 28px;
        height: 26px;
    }

    body.activity-console-page .sp-volume-stepper b {
        min-width: 58px;
        font-size: 12px;
    }

    body.activity-console-page .activity-progress-line {
        height: 18px;
        min-height: 18px;
        font-size: 10px;
    }

    body.activity-console-page .sp-pad {
        padding: 4px;
    }

    body.activity-console-page .sp-pad strong {
        font-size: clamp(10px, 1.2vw, 13px);
    }

    body.activity-console-page .sp-pad span {
        font-size: clamp(9px, 1vw, 11px);
    }
}

@media (orientation: portrait) {
    body.activity-console-page.force-landscape #app {
        width: calc(var(--vh, 1vh) * 100);
        height: calc(var(--vw, 1vw) * 100);
    }

    body.activity-console-page.force-landscape .sp-console {
        width: 100%;
        height: 100%;
        grid-template-columns: clamp(120px, 18vh, 150px) minmax(0, 1fr);
        padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    }

    body.activity-console-page.force-landscape .sp-title h1 {
        font-size: clamp(22px, 4vh, 32px);
    }

    body.activity-console-page.force-landscape .sp-tools button,
    body.activity-console-page.force-landscape .sp-tools a {
        height: 32px;
        font-size: clamp(10px, 1.45vh, 12px);
    }
}
/* Permission editor */
.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 8px 0 12px;
}

.check-line {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, .45);
    border-radius: 8px;
    background: rgba(255, 255, 255, .68);
    font-weight: 700;
}

.check-line input {
    width: auto;
    min-height: auto;
}

/* 2026-05-13 normal player idle card and activity pause flash polish. */
.player-window.is-idle {
    border-color: rgba(47, 128, 237, 0.22);
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,248,255,.92)),
        #fff;
}

.player-window.is-idle .player-art {
    background:
        linear-gradient(135deg, rgba(18, 100, 216, 0.95), rgba(20, 167, 125, 0.9)),
        #1264d8;
    box-shadow: 0 10px 26px rgba(18, 100, 216, 0.2);
}

.player-title-row h2.is-idle-title {
    color: #475467;
    font-size: clamp(16px, 2.2vw, 24px);
    font-weight: 800;
}

.player-title-row h2 {
    overflow-wrap: anywhere;
}

body.activity-console-page .sp-pad.paused {
    animation: activity-paused-green-yellow .5s steps(1, end) infinite !important;
    border-color: rgba(14, 122, 61, .9) !important;
    color: #11351d !important;
}

@keyframes activity-paused-green-yellow {
    0%, 49.999% {
        background: #e9f86f;
        box-shadow: inset 0 0 0 2px rgba(250, 204, 21, .5), 0 8px 18px rgba(132, 204, 22, .2);
    }
    50%, 100% {
        background: #72e66f;
        box-shadow: inset 0 0 0 2px rgba(22, 163, 74, .42), 0 8px 18px rgba(22, 163, 74, .22);
    }
}

/* 2026-05-13 screenshot fixes: keep current title and grid labels inside their own boxes. */
.player-window {
    grid-template-columns: 88px minmax(0, 1fr) !important;
}

.player-main,
.player-title-row,
.player-title-row h2 {
    min-width: 0;
    max-width: 100%;
}

.player-title-row {
    grid-template-columns: minmax(0, 1fr) clamp(140px, 20vw, 280px);
    overflow: hidden;
}

.player-title-row h2 {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(17px, 2.1vw, 27px);
}

.player-title-row h2.is-marquee {
    width: max-content;
    max-width: none;
    padding-right: 36px;
    animation: title-marquee-fixed 9s linear infinite;
}

@keyframes title-marquee-fixed {
    0%, 16% { transform: translateX(0); }
    84%, 100% { transform: translateX(calc(-100% + min(52vw, 520px))); }
}

.player-state-pill {
    display: none !important;
}

.player-progress,
.controls {
    grid-column: 1 / -1;
    min-width: 0;
}

body.activity-console-page .sp-title {
    overflow: hidden;
}

body.activity-console-page .sp-title h1 {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: clamp(20px, 3.2vw, 38px);
}

body.activity-console-page .sp-title h1.is-marquee {
    width: max-content;
    max-width: none;
    padding-right: 38px;
    animation: activity-title-marquee 8s linear infinite;
}

@keyframes activity-title-marquee {
    0%, 15% { transform: translateX(0); }
    85%, 100% { transform: translateX(calc(-100% + min(24vw, 290px))); }
}

body.activity-console-page .sp-pad {
    justify-items: center;
    align-content: center;
    text-align: center;
    padding: 8px 8px 6px;
}

body.activity-console-page .sp-pad strong {
    place-self: center;
    max-width: 100%;
    -webkit-line-clamp: 2;
    text-align: center;
    font-size: clamp(11px, 1.18vw, 16px);
    line-height: 1.14;
}

body.activity-console-page .sp-pad span {
    width: 100%;
    align-self: end;
    justify-self: center;
    text-align: center;
    font-size: clamp(9px, .95vw, 12px);
}

body.activity-console-page .sp-pad.empty {
    justify-items: center;
    align-content: center;
}

body.activity-console-page .sp-pad.empty .empty-plus,
body.activity-console-page .sp-pad.add-row strong {
    position: static;
    place-self: center;
    line-height: 1;
    font-size: clamp(26px, 3.6vw, 42px);
}

/* 2026-05-13 volume/progress precision pass. */
body.activity-console-page .sp-volume-stepper {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.activity-console-page .activity-progress-line {
    position: relative;
}

body.activity-console-page .activity-seek-range {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    touch-action: none;
    -ms-touch-action: none;
    z-index: 5;
}

body.activity-console-page .activity-seek-range:disabled {
    cursor: default;
}

.player-main > .eyebrow {
    margin-left: 0;
    align-self: end;
}

.player-title-row {
    grid-template-columns: minmax(0, 1fr) clamp(170px, 22vw, 300px) !important;
    gap: clamp(10px, 1.5vw, 18px);
    align-items: end;
}

.player-title-row h2 {
    min-height: 1.15em;
    overflow: hidden;
    contain: inline-size;
}

.player-volume-inline {
    width: 100%;
    max-width: 300px;
    min-width: 0;
    justify-self: end;
    overflow: hidden;
}

.player-volume-inline span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: clamp(11px, 1vw, 13px);
    line-height: 1;
}

.player-volume-inline span em {
    font-style: normal;
    font-weight: 800;
    color: var(--muted);
}

.player-volume-inline input {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    accent-color: #1264d8;
}

#playerIcon {
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: clip;
    font-size: clamp(14px, 2.2vw, 22px);
    line-height: 1;
}

@media (max-width: 760px) {
    .player-title-row {
        grid-template-columns: minmax(0, 1fr) clamp(128px, 32vw, 190px) !important;
    }

    .player-volume-inline span {
        font-size: 11px;
    }
}

/* 2026-05-13 final normal-player stack: status + song, then volume, then progress. */
.player-window {
    display: grid;
    grid-template-columns: clamp(64px, 8vw, 88px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto;
    gap: clamp(8px, 1.2vw, 14px);
    align-items: center;
}

.player-art {
    grid-column: 1;
    grid-row: 1;
}

.player-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: grid;
    gap: 4px;
}

.player-main > .eyebrow {
    margin: 0;
    font-size: clamp(11px, 1vw, 13px);
    line-height: 1;
}

.player-title-row {
    display: block !important;
    min-width: 0;
    overflow: hidden;
}

.player-title-row h2 {
    min-height: 1.05em;
    max-width: 100%;
    font-size: clamp(17px, 2.4vw, 30px);
}

.player-volume-inline,
.player-progress {
    grid-column: 1 / -1 !important;
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.player-volume-inline {
    grid-row: 2;
    display: grid !important;
    grid-template-columns: clamp(40px, 5vw, 56px) minmax(0, 1fr) clamp(42px, 5vw, 56px);
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
}

.player-volume-inline span {
    display: contents !important;
}

.player-volume-inline span em {
    grid-column: 1;
    font-size: clamp(12px, 1.1vw, 14px);
    font-style: normal;
    font-weight: 900;
    color: var(--muted);
    white-space: nowrap;
}

.player-volume-inline span b {
    grid-column: 3;
    justify-self: end;
    font-size: clamp(11px, 1vw, 13px);
    color: var(--muted);
    white-space: nowrap;
}

.player-volume-inline input {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: 18px;
    margin: 0;
    padding: 0;
}

.player-progress {
    grid-row: 3;
    display: grid !important;
    grid-template-columns: clamp(40px, 5vw, 56px) minmax(0, 1fr) clamp(42px, 5vw, 56px);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4px clamp(6px, 1vw, 10px);
    position: relative;
}

.progress-row-label {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(12px, 1.1vw, 14px);
    font-weight: 900;
    color: var(--muted);
    line-height: 1;
}

.player-progress .progress-slider {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: 18px;
}

.player-progress .progress-bubble {
    grid-column: 3;
    grid-row: 1;
    position: static;
    transform: none;
    justify-self: end;
    min-width: 42px;
    height: 20px;
    padding: 0 6px;
    font-size: 10px;
}

.player-progress .time-row {
    grid-column: 2 / 4;
    grid-row: 2;
    margin: 0;
    font-size: 11px;
}

.controls {
    grid-row: 4;
}

/* Activity seek: only the native range handles drag; custom rail/knob are visual only. */
body.activity-console-page .activity-progress-line i,
body.activity-console-page .activity-progress-line button {
    pointer-events: none;
}

body.activity-console-page .activity-seek-range {
    opacity: 0.001;
    appearance: none;
}

body.activity-console-page .activity-seek-range::-webkit-slider-runnable-track {
    height: clamp(20px, 5vh, 34px);
    background: transparent;
}

body.activity-console-page .activity-seek-range::-webkit-slider-thumb {
    appearance: none;
    width: clamp(28px, 6vw, 46px);
    height: clamp(28px, 6vw, 46px);
    margin-top: calc((clamp(20px, 5vh, 34px) - clamp(28px, 6vw, 46px)) / 2);
    border-radius: 50%;
    background: transparent;
}

body.activity-console-page .activity-seek-range::-moz-range-track {
    height: clamp(20px, 5vh, 34px);
    background: transparent;
}

body.activity-console-page .activity-seek-range::-moz-range-thumb {
    width: clamp(28px, 6vw, 46px);
    height: clamp(28px, 6vw, 46px);
    border: 0;
    border-radius: 50%;
    background: transparent;
}

/* 2026-05-13 seek precision patch: custom hit layer owns activity dragging. */
body.activity-console-page #activityPosition {
    grid-column: 1;
    grid-row: 1;
}

body.activity-console-page #activityDuration {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

body.activity-console-page .activity-progress-line i,
body.activity-console-page .activity-seek-hit,
body.activity-console-page .activity-seek-range {
    grid-column: 2;
    grid-row: 1;
}

body.activity-console-page .activity-progress-line i {
    width: 100%;
}

body.activity-console-page .activity-seek-hit {
    width: 100%;
    height: clamp(30px, 7vh, 48px);
    min-width: 0;
    margin: 0;
    padding: 0;
    z-index: 8;
    cursor: pointer;
    touch-action: none;
    -ms-touch-action: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

body.activity-console-page .activity-seek-hit:focus-visible {
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .28);
}

body.activity-console-page .activity-seek-range {
    pointer-events: none;
    visibility: hidden;
    height: 0;
    min-height: 0;
    opacity: 0;
}

/* 2026-05-13 compact normal player: status card + title, volume over progress, no framed controls. */
.player-window {
    grid-template-columns: clamp(62px, 7.4vw, 82px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: clamp(10px, 1.5vw, 18px);
    row-gap: clamp(6px, .9vw, 10px);
}

.player-art {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch;
    min-height: clamp(62px, 7.4vw, 82px);
}

.player-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: stretch;
    min-width: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: center;
}

.player-main > .eyebrow {
    align-self: end;
    margin: 0 0 2px;
    font-size: clamp(12px, 1.05vw, 14px);
    line-height: 1;
}

.player-title-row {
    display: block !important;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.player-title-row h2 {
    width: 100%;
    max-width: 100%;
    min-height: 1.15em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(18px, 2.25vw, 30px);
    line-height: 1.12;
}

.player-title-row h2.is-marquee {
    width: max-content;
    max-width: none;
    padding-right: 42px;
    animation: title-marquee-fixed 9s linear infinite;
}

.player-volume-inline,
.player-progress {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.player-volume-inline {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: clamp(38px, 5vw, 54px) minmax(0, 1fr) clamp(42px, 5vw, 58px);
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
}

.player-progress {
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: clamp(38px, 5vw, 54px) minmax(0, 1fr) clamp(42px, 5vw, 58px);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px clamp(6px, 1vw, 10px);
}

.player-volume-inline span {
    display: contents !important;
}

.player-volume-inline span em,
.progress-row-label {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(12px, 1.05vw, 14px);
    font-style: normal;
    font-weight: 900;
    color: var(--muted);
    white-space: nowrap;
    line-height: 1;
}

.player-volume-inline span b,
.player-progress .progress-bubble {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-width: 42px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    font-size: clamp(11px, .95vw, 13px);
    font-weight: 900;
    white-space: nowrap;
}

.player-volume-inline input,
.player-progress .progress-slider {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 18px;
    margin: 0;
}

.player-progress .time-row {
    grid-column: 2 / 4;
    grid-row: 2;
    margin: 0;
    font-size: 11px;
    line-height: 1;
}

.controls {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
}

/* 2026-05-13 mobile normal-player exact layout and activity read-only progress. */
.player-window {
    --status-size: clamp(58px, 13vw, 86px);
    --meter-value-width: clamp(48px, 9vw, 68px);
    display: grid !important;
    grid-template-columns: var(--status-size) minmax(0, 1fr) var(--meter-value-width) !important;
    grid-template-rows: var(--status-size) auto auto auto;
    gap: clamp(5px, 1vw, 9px) clamp(6px, 1.2vw, 12px);
    align-items: center;
    overflow: hidden;
}

.player-art {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: var(--status-size) !important;
    height: var(--status-size) !important;
    min-width: var(--status-size) !important;
    min-height: var(--status-size) !important;
    aspect-ratio: 1 / 1;
    align-self: start;
    justify-self: start;
    display: grid !important;
    place-items: center;
    padding: clamp(4px, 1vw, 8px);
}

#playerIcon {
    max-width: 100%;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    font-size: clamp(16px, 4.4vw, 28px);
    line-height: 1 !important;
}

.player-art .status-dot {
    width: clamp(7px, 1.8vw, 12px);
    height: clamp(7px, 1.8vw, 12px);
}

.player-main {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    height: var(--status-size);
    min-width: 0;
    align-self: start;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: center;
    overflow: hidden;
}

.player-main > .eyebrow {
    margin: 0 0 clamp(2px, .5vw, 5px) !important;
    font-size: clamp(11px, 2.4vw, 14px);
    line-height: 1;
}

.player-title-row,
.player-title-row h2 {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.player-title-row h2 {
    min-height: 1.12em;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: clamp(18px, 4.6vw, 32px);
    line-height: 1.1;
}

.player-title-row h2.is-marquee {
    width: max-content;
    max-width: none;
    padding-right: 44px;
    animation: title-marquee-fixed 9s linear infinite;
}

.player-volume-inline,
.player-progress {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: var(--status-size) minmax(0, 1fr) var(--meter-value-width);
    width: 100%;
    min-width: 0;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    align-items: center;
    column-gap: clamp(5px, 1vw, 9px);
}

.player-volume-inline {
    grid-row: 2 !important;
    min-height: 24px;
}

.player-progress {
    grid-row: 3 !important;
    min-height: 28px;
    grid-template-rows: auto;
    padding-top: clamp(4px, .8vw, 7px) !important;
    border-top: 1px dashed rgba(102, 112, 133, .38) !important;
}

.player-volume-inline span {
    display: contents !important;
}

.player-volume-inline span em,
.progress-row-label {
    grid-column: 1;
    justify-self: start;
    font-size: clamp(12px, 2.7vw, 15px);
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    color: var(--muted);
}

.player-volume-inline input,
.player-progress .progress-slider {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 20px;
    margin: 0;
    padding: 0;
    display: block;
}

.player-volume-inline span b,
.player-progress .time-row,
.player-progress .time-row #duration {
    grid-column: 3;
    justify-self: end;
    width: var(--meter-value-width);
    min-width: 0;
    text-align: right;
    color: var(--muted);
    font-size: clamp(11px, 2.3vw, 13px);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.player-progress .time-row {
    grid-row: 1;
    display: block;
    margin: 0;
}

.player-progress .time-row #position {
    display: none;
}

.player-progress .progress-bubble {
    grid-column: auto !important;
    grid-row: auto !important;
    position: absolute;
    left: 0;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-self: auto;
    min-width: clamp(34px, 8vw, 48px);
    max-width: 56px;
    height: clamp(14px, 3vw, 18px);
    padding: 0 clamp(5px, 1vw, 8px);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2f80ed;
    color: #fff;
    font-size: clamp(9px, 2vw, 11px);
    line-height: 1;
    box-shadow: 0 2px 7px rgba(47, 128, 237, .2);
    pointer-events: none;
    will-change: left;
}

.player-state-pill {
    display: none !important;
}

.controls {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
}

body.activity-console-page .activity-seek-hit,
body.activity-console-page .activity-seek-range {
    display: none !important;
    pointer-events: none !important;
}

body.activity-console-page .activity-progress-line {
    cursor: default !important;
}

body.activity-console-page .activity-progress-line i,
body.activity-console-page .activity-progress-line button {
    pointer-events: none !important;
}

@media (min-width: 900px) {
    .player-window {
        --status-size: clamp(72px, 7vw, 92px);
        --meter-value-width: 70px;
    }
}

/* 2026-05-14 NPS checkbox alignment and centered login branding. */
body.login-page .login-brand {
    width: min(620px, 100%);
    display: grid;
    justify-items: center;
    align-content: center;
    text-align: center;
    margin-inline: auto;
}

body.login-page .login-brand .login-logo {
    display: block;
    width: min(var(--logo-width, 330px), 92vw);
    height: min(var(--logo-height, 58px), 18vw);
    max-width: 100%;
    max-height: 140px;
    margin: 0 auto 10px;
    object-fit: contain;
    object-position: center center;
}

body.login-page .login-brand h1 {
    width: min(620px, 100%);
    margin: 0 auto;
    text-align: center;
    line-height: 1.12;
}

body.login-page .demo-login-tip {
    margin: 10px 0 0;
    color: #2563eb;
    font-weight: 800;
}

body.login-page .login-screen {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
}

body.login-page .login-screen .form-card {
    width: min(420px, 100%);
    max-width: 100%;
    justify-self: center;
}

@media (max-width: 760px) {
    body.login-page .shell {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    body.login-page .login-screen {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center;
    }

    body.login-page .login-brand,
    body.login-page .login-screen .form-card {
        width: min(calc(100vw - 36px), 420px);
    }

    body.login-page .login-brand h1 {
        width: min(calc(100vw - 36px), 420px);
        max-width: 100%;
        font-size: clamp(22px, 7vw, 28px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.login-page .login-screen .form-card input:not([type="checkbox"]),
    body.login-page .login-screen .form-card button {
        width: 100%;
        max-width: 100%;
    }

    body.login-page .remember-line {
        width: 100%;
        justify-content: flex-start;
    }

    body.login-page .remember-line input[type="checkbox"] {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        margin: 0;
    }
}

.nps-settings-form .nps-enable-line {
    grid-column: 1 / -1;
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    margin: 0;
    border: 1px solid rgba(219, 226, 236, .95);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    color: var(--text);
    line-height: 1.1;
}

.nps-settings-form .nps-enable-line input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    accent-color: var(--primary);
}

.nps-settings-form .nps-enable-line span {
    display: inline-block;
    min-width: 0;
    white-space: nowrap;
}

/* 2026-05-14 precision patch: normal player meters, activity header, NPS/FRP polish. */
.player-window {
    --status-size: clamp(62px, 13vw, 88px);
    --meter-label-width: clamp(34px, 6vw, 46px);
    --meter-value-width: clamp(60px, 10vw, 78px);
    grid-template-columns: var(--status-size) minmax(0, 1fr) var(--meter-value-width) !important;
    row-gap: clamp(4px, .8vw, 8px) !important;
    column-gap: clamp(6px, 1vw, 10px) !important;
}

.player-main {
    grid-column: 2 / 4 !important;
    grid-template-rows: auto minmax(0, 1fr);
}

.player-main > .eyebrow {
    justify-self: start;
    margin-left: 0 !important;
}

.player-title-row h2 {
    font-size: clamp(16px, 4.2vw, 30px) !important;
}

.player-volume-inline,
.player-progress {
    grid-template-columns: var(--meter-label-width) minmax(0, 1fr) var(--meter-value-width) !important;
    column-gap: clamp(3px, .7vw, 7px) !important;
}

.player-volume-inline span em,
.progress-row-label {
    width: var(--meter-label-width);
}

.player-volume-inline input,
.player-progress .progress-slider {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
}

.player-progress {
    border-top: 1px dashed rgba(102, 112, 133, .34) !important;
    padding-top: clamp(3px, .6vw, 6px) !important;
    overflow: visible;
}

.player-progress .progress-slider::-webkit-slider-thumb {
    width: 22px !important;
    height: 22px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.player-progress .progress-slider::-moz-range-thumb {
    width: 22px !important;
    height: 22px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.player-progress .progress-bubble {
    max-width: var(--meter-value-width);
    transform: translate(-50%, -50%) !important;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
}

body.activity-console-page .sp-top {
    padding-top: clamp(3px, .5vh, 7px) !important;
    padding-bottom: clamp(3px, .6vh, 8px) !important;
    align-items: center !important;
}

body.activity-console-page .sp-title {
    min-width: 0;
    max-width: 100%;
}

body.activity-console-page .sp-title h1 {
    font-size: clamp(18px, 3vw, 36px) !important;
}

body.activity-console-page .sp-tools {
    margin-left: auto;
    justify-content: flex-end !important;
    justify-self: end;
    flex: 0 0 auto;
    max-width: min(72vw, 780px);
}

body.activity-console-page .sp-tools button,
body.activity-console-page .sp-tools a {
    flex: 0 0 auto;
}

body.activity-console-page .sp-volume-stepper {
    flex: 0 0 auto;
}

body.activity-console-page .sp-pad {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: center !important;
    justify-items: center !important;
}

body.activity-console-page .sp-pad strong {
    align-self: center !important;
    justify-self: center !important;
    font-size: clamp(11px, 1.05vw, 15px) !important;
    line-height: 1.15 !important;
    max-height: 2.35em;
}

body.activity-console-page .sp-pad.empty strong.empty-plus,
body.activity-console-page .sp-pad.add-row strong {
    align-self: center !important;
    justify-self: center !important;
    font-size: clamp(28px, 4vw, 46px) !important;
}

body.activity-console-page .sp-pad span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-height: 460px) and (orientation: landscape) {
    body.activity-console-page .sp-top {
        min-height: 0 !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    body.activity-console-page .sp-title h1 {
        font-size: clamp(17px, 3.4vw, 28px) !important;
    }

    body.activity-console-page .sp-tools {
        gap: 3px !important;
    }
}

/* Restore the phone entry flow: show the landscape prompt first, then keep the
   rotated console compact so controls have priority over the song title. */
@media (orientation: portrait) {
    body.activity-console-page.is-portrait:not(.force-landscape) #app {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) #activityOrientationOverlay {
        display: grid !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.activity-console-page.force-landscape .sp-console {
        grid-template-columns: clamp(108px, 16vh, 142px) minmax(0, 1fr) !important;
        gap: clamp(3px, .7vh, 7px) !important;
    }

    body.activity-console-page.force-landscape .sp-left {
        padding: clamp(2px, .45vh, 5px) !important;
        gap: clamp(2px, .45vh, 5px) !important;
    }

    body.activity-console-page.force-landscape .sp-scene-tools {
        gap: clamp(2px, .45vh, 4px) !important;
    }

    body.activity-console-page.force-landscape .sp-scene-tools button {
        min-height: 0 !important;
        height: clamp(24px, 6vh, 30px) !important;
        padding-inline: clamp(2px, .5vh, 4px) !important;
        font-size: clamp(8px, 1.75vh, 10px) !important;
        line-height: 1.02 !important;
        border-radius: 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }

    body.activity-console-page.force-landscape .sp-scene {
        min-height: 0 !important;
        padding: clamp(2px, .5vh, 4px) !important;
        gap: clamp(2px, .45vh, 5px) !important;
    }

    body.activity-console-page.force-landscape .sp-scene b {
        width: clamp(24px, 5.6vh, 30px) !important;
        height: clamp(24px, 5.6vh, 30px) !important;
        font-size: clamp(11px, 2.4vh, 15px) !important;
        line-height: 1 !important;
    }

    body.activity-console-page.force-landscape .sp-scene strong {
        font-size: clamp(9px, 2vh, 12px) !important;
        line-height: 1.05 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.activity-console-page.force-landscape .sp-top {
        gap: clamp(2px, .45vh, 5px) !important;
        padding: 2px max(4px, env(safe-area-inset-right)) 2px 4px !important;
        overflow: hidden !important;
    }

    body.activity-console-page.force-landscape .sp-title {
        flex: 0 1 clamp(72px, 15vh, 124px) !important;
        min-width: clamp(64px, 13vh, 96px) !important;
        max-width: clamp(78px, 17vh, 132px) !important;
    }

    body.activity-console-page.force-landscape .sp-title h1 {
        font-size: clamp(16px, 3vh, 24px) !important;
        line-height: 1.14 !important;
        padding-bottom: .12em !important;
    }

    body.activity-console-page.force-landscape .sp-title h1.is-marquee {
        padding-right: clamp(18px, 4vh, 42px) !important;
    }

    body.activity-console-page.force-landscape .sp-tools {
        flex: 1 1 auto !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
        gap: clamp(1px, .28vh, 3px) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    body.activity-console-page.force-landscape .sp-tools button,
    body.activity-console-page.force-landscape .sp-tools a {
        height: clamp(26px, 6.4vh, 32px) !important;
        max-width: clamp(42px, 9.6vh, 76px) !important;
        min-width: 0 !important;
        padding-inline: clamp(2px, .5vh, 4px) !important;
        font-size: clamp(8.5px, 1.8vh, 10.5px) !important;
        line-height: 1.05 !important;
        border-radius: 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }

    body.activity-console-page.force-landscape .sp-volume-stepper {
        flex: 0 0 clamp(82px, 18vh, 108px) !important;
        max-width: clamp(82px, 18vh, 108px) !important;
        height: clamp(25px, 6.2vh, 30px) !important;
        gap: 1px !important;
        padding-inline: 1px !important;
        border-radius: 5px !important;
    }

    body.activity-console-page.force-landscape .sp-volume-stepper button {
        width: clamp(19px, 4.4vh, 24px) !important;
        min-width: clamp(19px, 4.4vh, 24px) !important;
        height: clamp(19px, 4.4vh, 24px) !important;
        padding: 0 !important;
        border-radius: 4px !important;
        font-size: clamp(10px, 2vh, 12px) !important;
    }

    body.activity-console-page.force-landscape .sp-volume-stepper b {
        min-width: clamp(44px, 9.8vh, 58px) !important;
        font-size: clamp(8.5px, 1.8vh, 10.5px) !important;
        line-height: 1.05 !important;
    }
}

/* 2026-05-14 optional portrait fallback; default phone mode remains forced landscape. */
@media (orientation: portrait) {
    body.activity-console-page.is-portrait:not(.force-landscape) #app,
    body.activity-console-page.is-portrait:not(.force-landscape) #app {
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .shell,
    body.activity-console-page.is-portrait:not(.force-landscape) #app {
        width: 100vw !important;
        height: 100dvh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
        max-width: none !important;
        overflow: hidden !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-console {
        width: 100vw !important;
        height: 100dvh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto minmax(0, 1fr) !important;
        grid-template-areas:
            "scene"
            "control"
            "progress"
            "grid" !important;
        gap: clamp(4px, 1.2vw, 7px) !important;
        padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
        transform: none !important;
        overflow: hidden !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-left {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 6px !important;
        padding: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-scene-tools {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        align-self: stretch !important;
        width: clamp(70px, 18vw, 92px) !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-scene-tools button {
        min-height: 34px !important;
        height: 34px !important;
        padding-inline: 6px !important;
        font-size: clamp(11px, 3vw, 13px) !important;
        white-space: nowrap !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-scenes {
        display: flex !important;
        flex-flow: row nowrap !important;
        gap: 5px !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-scenes::-webkit-scrollbar {
        display: none !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-scene {
        flex: 0 0 clamp(82px, 22vw, 112px) !important;
        min-height: 48px !important;
        height: 48px !important;
        padding: 5px !important;
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 5px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-scene b {
        width: 28px !important;
        height: 28px !important;
        font-size: 15px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-scene strong {
        font-size: clamp(12px, 3.3vw, 15px) !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 4px !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-title {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 34px !important;
        padding-inline: 4px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-title h1 {
        font-size: clamp(20px, 6.2vw, 30px) !important;
        line-height: 1.15 !important;
        padding-bottom: .12em !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-tools {
        width: 100% !important;
        max-width: none !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        padding: 0 2px 2px !important;
        flex-wrap: wrap !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-tools::-webkit-scrollbar {
        display: none !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-tools button,
    body.activity-console-page.is-portrait:not(.force-landscape) .sp-tools a {
        flex: 1 1 calc(33.333% - 5px) !important;
        height: 30px !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-inline: 5px !important;
        font-size: clamp(10px, 2.8vw, 12px) !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-volume-stepper {
        flex: 1 1 calc(50% - 4px) !important;
        width: auto !important;
        min-width: 112px !important;
        max-width: none !important;
        height: 30px !important;
        gap: 2px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-volume-stepper button {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-volume-stepper b {
        min-width: 56px !important;
        font-size: 12px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .activity-progress-line {
        height: 38px !important;
        min-height: 38px !important;
        padding-inline: 4px !important;
        gap: 5px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .activity-progress-line i,
    body.activity-console-page.is-portrait:not(.force-landscape) .activity-seek-hit,
    body.activity-console-page.is-portrait:not(.force-landscape) .activity-seek-range {
        height: 12px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) #activityPosition,
    body.activity-console-page.is-portrait:not(.force-landscape) #activityDuration {
        min-width: 42px !important;
        font-size: 11px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .activity-progress-line button {
        min-width: 46px !important;
        height: 24px !important;
        font-size: 11px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(72px, calc(100% / 5)) !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-pad {
        min-height: 72px !important;
        padding: 5px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-pad strong {
        font-size: clamp(11px, 3.2vw, 14px) !important;
        line-height: 1.12 !important;
        -webkit-line-clamp: 3 !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-pad.empty strong,
    body.activity-console-page.is-portrait:not(.force-landscape) .sp-pad.add-row strong {
        font-size: clamp(22px, 7vw, 30px) !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-pad span {
        font-size: clamp(10px, 2.7vw, 12px) !important;
    }
}

/* 2026-05-14 title space fix: use the full song area and keep activity controls clear. */
.player-main {
    grid-column: 2 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.player-title-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    container-type: inline-size;
}

.player-title-row h2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    transform: translateX(0);
}

.player-title-row h2.is-marquee {
    display: inline-block !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    padding-right: clamp(36px, 8vw, 80px) !important;
    text-overflow: clip !important;
    animation: xinlemon-title-marquee 15s linear infinite !important;
}

@keyframes xinlemon-title-marquee {
    0%, 30% {
        transform: translateX(0);
    }
    82%, 100% {
        transform: translateX(min(0px, calc(-100% + 100cqw)));
    }
}

body.activity-console-page .sp-main,
body.activity-console-page .sp-top,
body.activity-console-page .sp-title {
    min-width: 0 !important;
}

body.activity-console-page .sp-top {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: clamp(3px, .55vw, 8px) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

body.activity-console-page .sp-title {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: clamp(96px, 18vw, 260px) !important;
    max-width: none !important;
    overflow: hidden !important;
    container-type: inline-size;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
}

body.activity-console-page .sp-title h1 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 1.16 !important;
    padding-block: .04em .12em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    transform: translateX(0);
    box-sizing: border-box !important;
}

body.activity-console-page .sp-title h1.is-marquee {
    display: inline-block !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    padding-right: clamp(28px, 6vw, 70px) !important;
    padding-bottom: .12em !important;
    line-height: 1.16 !important;
    text-overflow: clip !important;
    animation: xinlemon-activity-title-marquee 13s linear infinite !important;
}

@keyframes xinlemon-activity-title-marquee {
    0%, 28% {
        transform: translateX(0);
    }
    84%, 100% {
        transform: translateX(min(0px, calc(-100% + 100cqw)));
    }
}

body.activity-console-page .sp-tools {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: min(76vw, 780px) !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
}

body.activity-console-page .sp-tools::-webkit-scrollbar {
    display: none;
}

body.activity-console-page .sp-tools button,
body.activity-console-page .sp-tools a,
body.activity-console-page .sp-volume-stepper {
    flex-shrink: 1 !important;
}

body.activity-console-page .sp-tools button,
body.activity-console-page .sp-tools a {
    max-width: clamp(54px, 8.6vw, 108px) !important;
    padding-inline: clamp(4px, .7vw, 9px) !important;
}

body.activity-console-page .sp-volume-stepper {
    max-width: clamp(102px, 14vw, 150px) !important;
}

body.activity-console-page .sp-title {
    flex: 0 1 clamp(96px, 15vw, 210px) !important;
    min-width: clamp(82px, 12vw, 130px) !important;
    max-width: clamp(112px, 18vw, 230px) !important;
}

body.activity-console-page .sp-title h1 {
    font-size: clamp(20px, 3.2vw, 34px) !important;
}

body.activity-console-page .activity-fullscreen-hint {
    display: none !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    max-width: min(280px, 44vw) !important;
    padding: 7px 10px !important;
    font-size: clamp(10px, 1.4vw, 12px) !important;
    opacity: .88;
    pointer-events: none !important;
}

@media (max-height: 460px) and (orientation: landscape) {
    body.activity-console-page .sp-title {
        min-width: clamp(88px, 16vw, 190px) !important;
    }

    body.activity-console-page .sp-tools {
        max-width: min(78vw, 720px) !important;
    }

    body.activity-console-page .sp-tools button,
    body.activity-console-page .sp-tools a {
        max-width: clamp(50px, 8.3vw, 92px) !important;
        padding-inline: 5px !important;
        font-size: clamp(10px, 1.25vw, 12px) !important;
    }

    body.activity-console-page .sp-volume-stepper {
        max-width: clamp(96px, 13.5vw, 132px) !important;
    }

    body.activity-console-page .activity-fullscreen-hint {
        max-width: min(220px, 36vw) !important;
        padding: 5px 8px !important;
    }
}

/* 2026-05-15 activity top bar fine tune: keep the title scrolling and give
   right-side controls enough width on compact phone landscape. */
body.activity-console-page .sp-title h1 {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

body.activity-console-page .sp-title h1.is-marquee {
    display: inline-block !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    padding-right: clamp(32px, 7vw, 78px) !important;
    animation: xinlemon-activity-title-marquee 14s linear infinite !important;
    will-change: transform;
}

body.activity-console-page .sp-tools button,
body.activity-console-page .sp-tools a {
    max-width: clamp(66px, 11vw, 132px) !important;
    padding-inline: clamp(5px, .85vw, 11px) !important;
}

body.activity-console-page #returnNormalLink {
    max-width: clamp(92px, 15vw, 156px) !important;
}

body.activity-console-page .sp-volume-stepper {
    max-width: clamp(112px, 15vw, 164px) !important;
}

@media (orientation: portrait) {
    body.activity-console-page.is-portrait:not(.force-landscape) #app {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) #activityOrientationOverlay {
        display: grid !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.activity-console-page.force-landscape .sp-title {
        flex: 0 1 clamp(74px, 15.5vh, 128px) !important;
        min-width: clamp(66px, 13vh, 98px) !important;
        max-width: clamp(82px, 18vh, 140px) !important;
    }

    body.activity-console-page.force-landscape .sp-title h1 {
        display: block !important;
        width: 100% !important;
        line-height: 1.16 !important;
        padding-bottom: .14em !important;
    }

    body.activity-console-page.force-landscape .sp-title h1.is-marquee {
        display: inline-block !important;
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        padding-right: clamp(22px, 5vh, 50px) !important;
        animation: xinlemon-activity-title-marquee 12s linear infinite !important;
    }

    body.activity-console-page.force-landscape .sp-tools {
        gap: clamp(1px, .35vh, 4px) !important;
    }

    body.activity-console-page.force-landscape .sp-tools button,
    body.activity-console-page.force-landscape .sp-tools a {
        max-width: clamp(50px, 11.2vh, 88px) !important;
        padding-inline: clamp(2px, .65vh, 5px) !important;
        font-size: clamp(8px, 1.8vh, 11px) !important;
        text-overflow: ellipsis !important;
    }

    body.activity-console-page.force-landscape #returnNormalLink {
        max-width: clamp(60px, 14vh, 104px) !important;
    }

    body.activity-console-page.force-landscape .sp-volume-stepper {
        flex-basis: clamp(88px, 19.6vh, 122px) !important;
        max-width: clamp(88px, 19.6vh, 122px) !important;
    }
}

/* Keep category switching honest: later display rules must not override the
   runtime hidden state when switching between temporary play and normal tabs. */
.audio-board.is-hidden,
.quick-tools.is-hidden,
.temp-library.is-hidden {
    display: none !important;
}

/* 2026-05-17 remote admin color alignment with intelligent bell console.
   Keep the remote pages responsive; only unify color, stars and button tone. */
.admin-header h1,
.page-hero h1,
.admin-page h1 {
    color: #102033;
}

.admin-page .primary,
.admin-page button.primary,
.remote-layout .primary,
.remote-layout button.primary {
    background: #1769e0;
    border-color: #1769e0;
}

.admin-page .secondary,
.admin-page .ghost,
.remote-layout .secondary,
.remote-layout .ghost {
    border-color: #d7e5f6;
    color: #102033;
    background: #f8fbff;
}

.remote-layout .version-pill,
.admin-page .version-pill {
    background: #edf6ff;
    color: #1769e0;
}

.remote-layout .field-legend {
    gap: 12px;
}

.remote-layout .auto-star,
.remote-layout .manual-star {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 2px !important;
    vertical-align: baseline !important;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    line-height: 1 !important;
}

.remote-layout .field-label-inline,
.nps-settings-form .field-label-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    width: auto !important;
    max-width: 100%;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

.remote-layout label,
.nps-settings-form label {
    min-width: 0;
}

.nps-settings-form .nps-enable-line span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    white-space: nowrap !important;
}

/* 2026-05-20 NPS page simplification: wizard first, advanced fields folded. */
.nps-wizard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
    align-items: start;
}

.nps-wizard .form-card {
    min-width: 0;
}

.nps-hero-card {
    grid-column: 1 / -1;
}

.nps-alert-card {
    grid-column: 1 / -1;
    border: 1px solid #fed7aa;
    background: #fff7ed;
}

.nps-alert-card h2 {
    margin-top: 0;
    color: #9a3412;
}

.nps-alert-card p {
    margin: 8px 0 0;
    color: #7c2d12;
}

.service-status-grid .wide {
    grid-column: 1 / -1;
}

.nps-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.nps-card-head h2 {
    margin: 0 0 6px;
}

.nps-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.nps-step-grid form {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
}

.nps-step-grid button {
    width: 100%;
    min-height: 48px;
}

.nps-step-grid small {
    color: #66748a;
    line-height: 1.35;
}

.nps-advanced-card {
    grid-column: 1 / -1;
    padding: 0;
    overflow: hidden;
}

.nps-advanced-card summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 22px;
    font-weight: 800;
    color: #102033;
    border-bottom: 1px solid rgba(215, 229, 246, .75);
}

.nps-advanced-card summary::-webkit-details-marker {
    display: none;
}

.nps-advanced-card[open] {
    padding-bottom: 18px;
}

.nps-advanced-card > p,
.nps-advanced-card > form {
    margin-left: 22px;
    margin-right: 22px;
}

.nps-clear-form {
    margin: 12px 22px 0;
}

.remote-layout .field-label-inline .auto-star,
.remote-layout .field-label-inline .manual-star,
.nps-settings-form .field-label-inline .auto-star,
.nps-settings-form .field-label-inline .manual-star,
.nps-settings-form .nps-enable-line .auto-star,
.nps-settings-form .nps-enable-line .manual-star {
    position: static !important;
    display: inline-flex !important;
    margin-left: 3px !important;
    transform: none !important;
}

@media (max-width: 860px) {
    .nps-wizard {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .nps-step-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .nps-card-head {
        flex-direction: column;
    }
}

/* Demo browser-audio unlock prompt. Kept outside server playback UI so demo audio stays local. */
.demo-audio-unlock-card {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: min(960px, calc(100% - 28px));
    margin: 12px auto;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: rgba(239, 246, 255, 0.96);
    color: #173b66;
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.14);
    z-index: 50;
}

.demo-audio-unlock-card[hidden] {
    display: none !important;
}

.demo-audio-unlock-card strong {
    display: block;
    margin-bottom: 4px;
    color: #0f2a4d;
    font-size: clamp(16px, 2.4vw, 20px);
}

.demo-audio-unlock-card span {
    display: block;
    color: #52657f;
    font-size: clamp(13px, 2vw, 16px);
    line-height: 1.45;
}

.demo-audio-unlock-card button {
    flex: 0 0 auto;
    min-width: 150px;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #1d6fe8;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    box-shadow: 0 10px 20px rgba(29, 111, 232, 0.2);
}

.demo-audio-unlock-card button:active {
    transform: scale(0.98);
}

.activity-demo-audio-unlock-card {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 640px) {
    .demo-audio-unlock-card {
        flex-direction: column;
        align-items: stretch;
        width: min(92vw, 560px);
        padding: 12px;
        text-align: left;
    }

    .demo-audio-unlock-card button {
        width: 100%;
        min-height: 48px;
    }
}

/* 2026-05-25 activity console vertical fit: keep the right work area visible on demo/mobile browsers. */
body.activity-console-page .sp-console {
    align-items: stretch !important;
}

body.activity-console-page .sp-main {
    align-self: stretch !important;
    min-height: 0 !important;
}

body.activity-console-page .sp-top {
    align-self: start !important;
    min-height: 0 !important;
}

@media (orientation: portrait) {
    body.activity-console-page.force-landscape {
        --safe-top: max(2px, env(safe-area-inset-top));
        --safe-bottom: max(4px, env(safe-area-inset-bottom));
    }

    body.activity-console-page.force-landscape .sp-console {
        padding-top: var(--safe-top) !important;
        padding-bottom: var(--safe-bottom) !important;
        gap: 2px !important;
    }

    body.activity-console-page.force-landscape .sp-top {
        padding-top: 0 !important;
        padding-bottom: 1px !important;
        margin-top: -1px !important;
    }

    body.activity-console-page.force-landscape .activity-progress-line {
        height: clamp(24px, 5.4vh, 32px) !important;
        min-height: 24px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.activity-console-page.force-landscape .sp-grid {
        align-self: stretch !important;
        min-height: 0 !important;
    }
}

@media (orientation: landscape) and (max-height: 460px) {
    body.activity-console-page .sp-console {
        padding-top: max(2px, env(safe-area-inset-top)) !important;
        padding-bottom: max(3px, env(safe-area-inset-bottom)) !important;
        gap: 2px !important;
    }

    body.activity-console-page .sp-top {
        padding-top: 0 !important;
        padding-bottom: 1px !important;
    }

    body.activity-console-page .activity-progress-line {
        height: clamp(22px, 5.2vh, 30px) !important;
        min-height: 22px !important;
    }
}

/* 2026-05-27: module dashboard and user-permission layout polish. */
html:has(.dashboard-entry-page),
body:has(.dashboard-entry-page) {
    min-height: 100dvh;
}

body:has(.dashboard-entry-page) .shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

body:has(.dashboard-entry-page) .topbar.admin-hero {
    flex: 0 0 auto;
    align-items: center;
}

body:has(.dashboard-entry-page) .dashboard-entry-page {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(12px, 2vh, 22px);
}

body:has(.dashboard-entry-page) .module-grid {
    width: min(100%, 1560px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    align-items: stretch;
    justify-content: center;
}

body:has(.dashboard-entry-page) .module-card {
    min-width: 0;
}

body:has(.dashboard-entry-page) .dashboard-entry-footer {
    align-self: end;
    justify-self: center;
    width: 100%;
    padding: 10px 0 max(8px, env(safe-area-inset-bottom));
    text-align: center;
}

@media (max-width: 1180px) {
    body:has(.dashboard-entry-page) .module-grid {
        grid-template-columns: repeat(2, minmax(230px, 1fr));
    }
}

@media (max-width: 680px) {
    body:has(.dashboard-entry-page) .shell {
        padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
    }

    body:has(.dashboard-entry-page) .module-grid {
        grid-template-columns: 1fr;
    }

    body:has(.dashboard-entry-page) .module-card {
        min-height: 164px;
    }
}

body:has(.admin-page-grid) .admin-page-grid {
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 2fr);
    align-items: start;
    gap: clamp(18px, 2vw, 28px);
}

body:has(.admin-page-grid) .form-card,
body:has(.admin-page-grid) .user-list {
    min-width: 0;
    box-sizing: border-box;
}

body:has(.admin-page-grid) .user-list {
    max-height: calc(100dvh - 170px);
    overflow: auto;
}

body:has(.admin-page-grid) .user-item {
    display: grid;
    grid-template-columns: minmax(160px, 0.9fr) minmax(140px, 1fr) minmax(150px, 1fr) minmax(110px, 0.55fr) minmax(110px, 0.55fr);
    align-items: start;
    gap: 12px;
}

body:has(.admin-page-grid) .permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 10px;
    align-items: stretch;
}

body:has(.admin-page-grid) .form-card > .permission-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

body:has(.admin-page-grid) .user-item > .permission-grid {
    grid-column: 1 / -1;
}

body:has(.admin-page-grid) .permission-grid .check-line {
    min-height: 42px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

body:has(.admin-page-grid) .permission-grid .check-line span {
    min-width: 0;
    line-height: 1.25;
}

body:has(.admin-page-grid) .user-item .inline-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

@media (max-width: 980px) {
    body:has(.admin-page-grid) .admin-page-grid {
        grid-template-columns: 1fr;
    }

    body:has(.admin-page-grid) .user-list {
        max-height: none;
    }

    body:has(.admin-page-grid) .user-item {
        grid-template-columns: 1fr;
    }
}

/* 2026-05-29: user/admin permission layout final pass.
   Applies to non-bell admin pages that use base.html, so desktop permissions
   spread horizontally and do not turn into a tall single-column wall. */
body:has(.admin-page-grid) .admin-page-grid {
    min-height: calc(100dvh - 220px);
    align-items: stretch !important;
}

body:has(.admin-page-grid) .form-card,
body:has(.admin-page-grid) .user-list {
    height: auto;
    min-height: 0;
}

body:has(.admin-page-grid) .user-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: auto;
}

body:has(.admin-page-grid) .user-item {
    width: 100%;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: minmax(150px, 0.9fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(130px, 0.65fr) minmax(120px, 0.55fr) !important;
    gap: 12px !important;
    align-items: start !important;
}

body:has(.admin-page-grid) .user-item > .permission-grid,
body:has(.admin-page-grid) .form-card > .permission-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
}

body:has(.admin-page-grid) .user-item > .permission-grid {
    grid-column: 1 / -1 !important;
    max-height: 260px;
    overflow: auto;
    padding-right: 4px;
}

body:has(.admin-page-grid) .permission-grid .check-line {
    min-height: 38px !important;
    padding: 7px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    line-height: 1.25 !important;
}

body:has(.admin-page-grid) .permission-grid .check-line input {
    flex: 0 0 auto;
}

body:has(.admin-page-grid) .permission-grid .check-line span {
    min-width: 0;
    overflow-wrap: anywhere;
}

body:has(.admin-page-grid) .user-item .inline-actions {
    grid-column: 1 / -1 !important;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 980px) {
    body:has(.admin-page-grid) .admin-page-grid,
    body:has(.admin-page-grid) .user-item {
        grid-template-columns: 1fr !important;
    }

    body:has(.admin-page-grid) .user-item > .permission-grid {
        max-height: none;
    }
}

/* 2026-05-29: compact the left-side permission editor as well.
   The user list was already spread out, but the create-user form stayed too
   narrow, so its permissions collapsed into one long column. */
@media (min-width: 981px) {
    body:has(.admin-page-grid) .admin-page-grid {
        grid-template-columns: minmax(380px, 0.9fr) minmax(0, 2.2fr) !important;
        gap: clamp(14px, 1.3vw, 24px) !important;
    }

    body:has(.admin-page-grid) .form-card {
        min-width: 0;
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }

    body:has(.admin-page-grid) .form-card > .permission-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: min(420px, calc(100dvh - 520px));
        overflow: auto;
        padding-right: 4px;
    }

    body:has(.admin-page-grid) .form-card > .permission-grid .check-line {
        min-width: 0;
        font-size: clamp(13px, 0.9vw, 15px);
        word-break: keep-all;
    }
}

/* 2026-05-29 precision fixes: mobile broadcast tabs and activity console. */
.category-tabs {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
    scroll-padding-inline: max(14px, env(safe-area-inset-left));
}

.category-tab {
    box-sizing: border-box;
    min-width: 0;
}

@media (max-width: 520px) {
    .category-tabs {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 6px max(12px, env(safe-area-inset-left)) 12px max(12px, env(safe-area-inset-right)) !important;
        gap: 10px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        overflow: visible !important;
        scroll-snap-type: none;
    }

    .category-tab {
        flex: none !important;
        width: auto !important;
        max-width: none !important;
        min-height: 76px !important;
        scroll-snap-align: none;
    }

    .category-tab.add-card {
        flex-basis: auto !important;
        width: auto !important;
        max-width: none !important;
    }
}

body.activity-console-page {
    min-width: 0;
    touch-action: manipulation;
}

body.activity-console-page .shell,
body.activity-console-page #app,
body.activity-console-page .sp-console,
body.activity-console-page .sp-main {
    min-width: 0;
}

body.activity-console-page .sp-console {
    height: calc(var(--vh, 1vh) * 100);
    max-height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
}

body.activity-console-page .sp-left {
    min-width: 0;
    overflow: hidden;
}

body.activity-console-page .sp-scenes {
    min-width: 0;
    overflow: auto;
}

body.activity-console-page .sp-scene {
    min-width: 0;
}

body.activity-console-page .sp-scene strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.activity-console-page .sp-grid {
    min-height: 0;
    overflow: auto;
    align-content: stretch;
}

.activity-choice-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    background: rgba(15, 23, 42, .46);
    opacity: 0;
    transition: opacity .14s ease;
}

.activity-choice-overlay.active {
    opacity: 1;
}

.activity-choice-card {
    width: min(520px, 96vw);
    max-height: min(84vh, 620px);
    overflow: auto;
    border: 1px solid rgba(226, 232, 240, .96);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .22);
    position: relative;
}

.activity-choice-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: #f2f5f9;
    color: #334155;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.activity-choice-head {
    padding: 18px 18px 12px;
    border-bottom: 1px solid #edf2f7;
}

.activity-choice-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 8px;
    background: #eef5ff;
    color: #1769e0;
    font-size: 12px;
    font-weight: 900;
}

.activity-choice-head h2 {
    margin: 8px 42px 0 0;
    font-size: 22px;
    line-height: 1.25;
    color: #101828;
    letter-spacing: 0;
}

.activity-choice-head p {
    margin: 6px 0 0;
    color: #667085;
    line-height: 1.55;
}

.activity-choice-body {
    padding: 14px 18px 18px;
}

.activity-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.activity-action-item {
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    background: #f8fbff;
    color: #162033;
    text-align: left;
    cursor: pointer;
}

.activity-action-item:hover {
    border-color: #1769e0;
    background: #eef5ff;
}

.activity-action-item:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.activity-action-item.danger {
    border-color: #fecdca;
    background: #fff8f8;
}

.activity-action-item.danger:hover {
    border-color: #f04438;
    background: #fff1f0;
}

.activity-action-item b {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1769e0;
    color: #fff;
    font-size: 17px;
}

.activity-action-item.danger b {
    background: #d92d20;
}

.activity-action-item strong,
.activity-action-item small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-action-item strong {
    font-size: 15px;
    color: #101828;
}

.activity-action-item small {
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
}

.activity-field-form,
.activity-field-list {
    display: grid;
    gap: 12px;
}

.activity-field-form label {
    display: grid;
    gap: 6px;
    font-weight: 900;
    color: #344054;
}

.activity-field-form input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cfdbea;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 15px;
    color: #101828;
    background: #fff;
    box-sizing: border-box;
}

.activity-field-form small,
.activity-choice-empty {
    color: #667085;
    line-height: 1.55;
}

.activity-choice-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.activity-choice-actions button {
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    padding: 0 16px;
    font-weight: 900;
    cursor: pointer;
}

.activity-choice-secondary {
    background: #eef2f6;
    color: #344054;
}

.activity-choice-primary {
    background: #1769e0;
    color: #fff;
}

.activity-choice-danger {
    background: #d92d20;
    color: #fff;
}

@media (max-width: 560px), (orientation: landscape) and (max-height: 520px) {
    .activity-choice-card {
        width: min(430px, 96vw);
        max-height: 88vh;
    }

    .activity-choice-head {
        padding: 14px 14px 10px;
    }

    .activity-choice-head h2 {
        font-size: 19px;
    }

    .activity-choice-body {
        padding: 12px 14px 14px;
    }

    .activity-action-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .activity-action-item {
        min-height: 58px;
    }

    .activity-choice-actions button {
        flex: 1 1 120px;
    }
}

@media (orientation: landscape) and (max-width: 940px) {
    body.activity-console-page .sp-console,
    body.activity-console-page.force-landscape .sp-console {
        grid-template-columns: clamp(96px, 19vw, 148px) minmax(0, 1fr) !important;
        gap: 6px !important;
        padding: 6px !important;
    }

    body.activity-console-page .sp-left,
    body.activity-console-page.force-landscape .sp-left {
        width: auto !important;
        min-width: 0 !important;
        padding: 5px !important;
    }

    body.activity-console-page .sp-scene,
    body.activity-console-page.force-landscape .sp-scene {
        grid-template-columns: 28px minmax(0, 1fr) !important;
        min-height: 42px !important;
        padding: 5px !important;
    }

    body.activity-console-page .sp-top,
    body.activity-console-page.force-landscape .sp-top {
        min-height: 50px !important;
        gap: 6px !important;
        padding: 5px 6px !important;
    }

    body.activity-console-page .sp-tools,
    body.activity-console-page.force-landscape .sp-tools {
        gap: 5px !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
    }

    body.activity-console-page .sp-tools button,
    body.activity-console-page .sp-tools a,
    body.activity-console-page.force-landscape .sp-tools button,
    body.activity-console-page.force-landscape .sp-tools a {
        min-height: 34px !important;
        padding: 5px 8px !important;
        white-space: nowrap;
    }

    body.activity-console-page .activity-progress-line,
    body.activity-console-page.force-landscape .activity-progress-line {
        height: 28px !important;
        margin: 3px 0 !important;
    }

    body.activity-console-page .sp-grid,
    body.activity-console-page.force-landscape .sp-grid {
        max-height: calc(var(--vh, 1vh) * 100 - 132px) !important;
        grid-auto-rows: minmax(44px, 1fr) !important;
        gap: 0 !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
}

@media (orientation: portrait) and (max-width: 940px) {
    body.activity-console-page.is-portrait:not(.force-landscape) #app {
        transform-origin: top left !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-console {
        grid-template-columns: clamp(84px, 20vw, 128px) minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-left {
        padding: 4px !important;
    }

    body.activity-console-page.is-portrait:not(.force-landscape) .sp-scene {
        min-height: 40px !important;
        grid-template-columns: 26px minmax(0, 1fr) !important;
    }
}

/* 2026-05-30 mobile admin log polish. Keep system/error log controls compact
   and prevent date/download buttons from squeezing into each other. */
.admin-log-tabs,
.admin-log-filter {
    min-width: 0;
}

.admin-log-filter label {
    min-width: 0;
}

.admin-log-filter input[type="date"] {
    min-width: 0;
}

@media (max-width: 760px) {
    .single-page-card:has(.admin-log-tabs),
    .single-page-card:has(.log-viewer) {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .admin-log-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin-bottom: 10px;
    }

    .admin-log-tabs .button-link {
        width: 100%;
        min-width: 0;
        height: 38px;
        min-height: 38px;
        padding: 0 10px;
        border-radius: 8px;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .admin-log-filter {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 78px;
        gap: 8px;
        width: 100%;
        align-items: end;
    }

    .admin-log-filter label {
        display: grid;
        gap: 5px;
        width: 100%;
        margin: 0;
        font-size: 13px;
        line-height: 1.2;
    }

    .admin-log-filter input[type="date"],
    .admin-log-filter button,
    .admin-log-filter .button-link {
        width: 100%;
        min-width: 0;
        height: 38px;
        min-height: 38px;
        padding: 0 10px;
        border-radius: 8px;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    .admin-log-filter .button-link {
        grid-column: 1 / -1;
    }

    .log-viewer {
        max-height: min(58dvh, 520px);
        margin-top: 12px;
        padding: 10px;
        font-size: 12px;
        line-height: 1.45;
        border-radius: 8px;
        overflow: auto;
        white-space: pre-wrap;
        word-break: break-word;
    }
}

/* 2026-06-18 final override: every remote-system settings card shares one tone. */
body .admin-dashboard .admin-tile,
body .admin-dashboard .admin-tile.primary-tile,
body .admin-dashboard form.admin-tile,
body .remote-layout .form-card,
body .remote-layout .form-card.settings-card,
body .remote-layout .form-card.update-card {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(168, 185, 211, 0.72) !important;
}

/* 2026-07-02: keep remote first-level categories on one horizontal rail. */
.category-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    overscroll-behavior-x: contain !important;
}

.category-tab {
    flex: 0 0 clamp(112px, 24vw, 172px) !important;
    width: clamp(112px, 24vw, 172px) !important;
    max-width: clamp(112px, 24vw, 172px) !important;
    min-width: 112px !important;
    scroll-snap-align: start !important;
}

@media (max-width: 520px) {
    .category-tabs {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 6px max(12px, env(safe-area-inset-left)) 12px max(12px, env(safe-area-inset-right)) !important;
    }

    .category-tab,
    .category-tab.add-card {
        flex: 0 0 118px !important;
        width: 118px !important;
        max-width: 118px !important;
        min-width: 118px !important;
        min-height: 64px !important;
    }
}