:root {
    color-scheme: dark;

    /* Semantic color system */
    --app-bg: #07151b;
    --nav-bg: #0b2028;
    --surface-card: #102a33;
    --surface-raised: #173740;
    --border-color: #2b4a53;
    --text-primary: #f3f8fa;
    --text-secondary: #a5b8be;
    --accent: #28b8c7;
    --accent-strong: #138c9e;
    --status-success: #2ead73;
    --status-warning: #e2a33b;
    --status-danger: #d95757;

    /* Compatibility aliases used by existing feature views */
    --bg: var(--app-bg);
    --card-bg: var(--surface-card);
    --primary: var(--accent);
    --secondary: #6fd6df;
    --text: var(--text-primary);
    --text-muted: var(--text-secondary);
    --danger: var(--status-danger);
    --success: var(--status-success);
    --warning: var(--status-warning);
    --border: var(--border-color);

    /* Spacing, geometry and motion */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --shadow-subtle: 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-raised: 0 12px 32px rgba(0, 8, 12, 0.24);
    --shadow-overlay: 0 22px 56px rgba(0, 8, 12, 0.42);
    --header-height: 76px;
    --nav-width: 232px;
    --mobile-nav-height: 78px;
    --content-max: 1180px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);
    --transition-fast: 160ms;
    --transition-base: 240ms;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- THEME VARIANTEN --- */
body.theme-girl,
html.theme-girl {
    color-scheme: light;
    --app-bg: #ffeef4;
    --nav-bg: #fff7fa;
    --surface-card: #ffffff;
    --surface-raised: #fff4f8;
    --border-color: #ffccd9;
    --text-primary: #4a0026;
    --text-secondary: #94627b;
    --accent: #c52f70;
    --accent-strong: #d93679;
    --status-success: #2f9d68;
    --status-warning: #b7791f;
    --status-danger: #d90452;
    --secondary: #d93679;
    --bg: var(--app-bg);
    --card-bg: var(--surface-card);
    --primary: var(--accent);
    --text: var(--text-primary);
    --text-muted: var(--text-secondary);
    --danger: var(--status-danger);
    --success: var(--status-success);
    --warning: var(--status-warning);
    --border: var(--border-color);
}

/* 🌊 HIER IST JETZT DEIN SAUBERES MINT/OCEAN MEERES-THEME 🌊 */
body.theme-mint,
html.theme-mint {
    color-scheme: dark;
    --app-bg: #031424;
    --nav-bg: #071f34;
    --surface-card: #0a2540;
    --surface-raised: #103a50;
    --border-color: #1b4b65;
    --text-primary: #e6f1ff;
    --text-secondary: #9aabc5;
    --accent: #2ac9d7;
    --accent-strong: #1096aa;
    --status-success: #2ead73;
    --status-warning: #e2a33b;
    --status-danger: #e05b70;
    --secondary: #64ffda;
    --bg: var(--app-bg);
    --card-bg: var(--surface-card);
    --primary: var(--accent);
    --text: var(--text-primary);
    --text-muted: var(--text-secondary);
    --danger: var(--status-danger);
    --success: var(--status-success);
    --warning: var(--status-warning);
    --border: var(--border-color);
}

/* 🦈 BADMAN SHARK EDITION - Schwarz, Grau, Rot 🦈 */
body.theme-badman,
html.theme-badman {
    color-scheme: dark;
    --app-bg: #1a1a1a;
    --nav-bg: #202020;
    --surface-card: #2a2a2a;
    --surface-raised: #353535;
    --border-color: #4a4a4a;
    --text-primary: #f1f1f1;
    --text-secondary: #a0a0a0;
    --accent: #ff6670;
    --accent-strong: #bd2733;
    --status-success: #63936f;
    --status-warning: #d8a23c;
    --status-danger: #e63946;
    --secondary: #a0a0a0;
    --bg: var(--app-bg);
    --card-bg: var(--surface-card);
    --primary: var(--accent);
    --text: var(--text-primary);
    --text-muted: var(--text-secondary);
    --danger: var(--status-danger);
    --success: var(--status-success);
    --warning: var(--status-warning);
    --border: var(--border-color);
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(26, 26, 26, 0.76), rgba(26, 26, 26, 0.9)),
        url("../img/badman.svg");
    background-repeat: no-repeat;
    background-position: center 56%;
    background-size: min(78vw, 620px) auto;
    background-attachment: fixed;
    isolation: isolate;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    background: var(--app-bg);
}

html,
body {
    width: 100%;
    max-width: 100%;
}
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--app-bg);
    color: var(--text-primary);
    padding-bottom: 30px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    transition: background-color var(--transition-base) var(--ease-standard), color var(--transition-base) var(--ease-standard);
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

input[type="number"],
.stock,
.version-badge,
.stat-block,
.dashboard-tile strong {
    font-variant-numeric: tabular-nums;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    box-shadow: var(--focus-ring);
}

header {
    background: color-mix(in srgb, var(--card-bg) 72%, transparent);
    padding: 16px 20px;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 78%, transparent);
    position: sticky;
    top: 0;
    z-index: 99;
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
.header-main { display: flex; justify-content: space-between; align-items: center; }
.header-title-block {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}
.header-cloud-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.header-cloud-bar::-webkit-scrollbar { display: none; }
header h1 { margin: 0; font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.header-demo-button {
    border-color: rgba(255, 184, 77, 0.24) !important;
    color: #ffd27a !important;
    background:
        linear-gradient(135deg, rgba(255, 184, 77, 0.10), rgba(255, 159, 26, 0.05)),
        rgba(255,255,255,0.03) !important;
}

.header-demo-button:hover,
.header-demo-button:focus-visible {
    border-color: rgba(255, 184, 77, 0.42) !important;
    box-shadow: 0 0 0 1px rgba(255, 184, 77, 0.12) inset, 0 10px 24px rgba(255, 159, 26, 0.12);
}

.header-sync-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    color: var(--text);
    text-align: left;
    box-shadow: none;
    min-height: 0;
}
.header-sync-actions-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    position: relative;
}
.header-quick-sync-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 52px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(100,210,255,0.12);
    background: rgba(255,255,255,0.03);
    color: var(--secondary);
    box-shadow: none;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    min-height: 0;
    text-decoration: none;
    white-space: nowrap;
}
.header-quick-sync-button:hover {
    border-color: rgba(100,210,255,0.22);
}
.header-sync-indicator.is-transferring {
    border-color: rgba(100, 210, 255, 0.34);
    background:
        linear-gradient(135deg, rgba(48, 209, 255, 0.16), rgba(90, 200, 250, 0.08)),
        rgba(255,255,255,0.05);
    box-shadow: 0 0 0 1px rgba(100,210,255,0.12), 0 12px 28px rgba(48,209,255,0.14);
}
.header-sync-indicator.is-transferring .header-sync-dot {
    animation: cloudStatusPulse 1s ease-in-out infinite;
}
.header-sync-indicator.is-auto-transferring {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border-color));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
        color-mix(in srgb, var(--surface-raised) 78%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}
.header-sync-indicator.is-auto-transferring .header-sync-dot {
    animation: cloudStatusPulseSoft 1.35s ease-in-out infinite;
}
.header-quick-sync-button.is-active {
    color: #fff;
    border-color: rgba(191,90,242,0.2);
    background: rgba(191,90,242,0.14);
}
.header-quick-sync-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 160;
    min-width: 170px;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background: color-mix(in srgb, var(--card-bg) 92%, rgba(0,0,0,0.22));
    backdrop-filter: blur(24px) saturate(1.1);
    -webkit-backdrop-filter: blur(24px) saturate(1.1);
    box-shadow: 0 16px 38px rgba(0,0,0,0.3);
}
.header-quick-sync-menu[hidden] {
    display: none !important;
}
.header-quick-sync-menu button {
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    background: rgba(255,255,255,0.02);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: none;
    min-height: 0;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
}
.header-quick-sync-menu button:hover {
    background: rgba(255,255,255,0.06);
    color: var(--secondary);
}

.cloud-transfer-overlay {
    position: fixed;
    top: max(16px, calc(env(safe-area-inset-top) + 12px));
    left: 50%;
    z-index: 5200;
    width: min(430px, calc(100vw - 28px));
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) translateY(-14px) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
}

.cloud-transfer-overlay.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.cloud-transfer-card {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(100, 210, 255, 0.26);
    border-radius: 22px;
    background:
        radial-gradient(circle at 15% 0%, rgba(100,210,255,0.28), transparent 34%),
        linear-gradient(135deg, rgba(8,28,42,0.92), rgba(12,38,52,0.88));
    box-shadow: 0 22px 60px rgba(0,0,0,0.36), 0 0 38px rgba(64,220,255,0.18);
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    overflow: hidden;
}

.cloud-transfer-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.12) 42%, transparent 68%);
    animation: cloudTransferSheen 1.6s ease-in-out infinite;
}

.cloud-transfer-orb,
.cloud-transfer-copy {
    position: relative;
    z-index: 1;
}

.cloud-transfer-orb {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(100,210,255,0.12);
    border: 1px solid rgba(100,210,255,0.2);
    box-shadow: inset 0 0 20px rgba(100,210,255,0.08);
}

.cloud-transfer-cloud {
    width: 28px;
    height: 16px;
    border-radius: 999px;
    background: var(--secondary);
    position: relative;
    box-shadow: 0 0 22px rgba(100,210,255,0.48);
}

.cloud-transfer-cloud::before,
.cloud-transfer-cloud::after {
    content: "";
    position: absolute;
    bottom: 6px;
    border-radius: 50%;
    background: var(--secondary);
}

.cloud-transfer-cloud::before {
    left: 4px;
    width: 12px;
    height: 12px;
}

.cloud-transfer-cloud::after {
    right: 4px;
    width: 16px;
    height: 16px;
}

.cloud-transfer-arrow {
    position: absolute;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateX(-50%) rotate(45deg);
}

.cloud-transfer-upload .cloud-transfer-arrow {
    top: 9px;
    animation: cloudTransferArrowUp 0.9s ease-in-out infinite;
}

.cloud-transfer-download .cloud-transfer-arrow {
    bottom: 7px;
    animation: cloudTransferArrowDown 0.9s ease-in-out infinite;
}

.cloud-transfer-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.cloud-transfer-copy strong {
    color: #fff;
    font-size: 0.98rem;
    line-height: 1.1;
}

.cloud-transfer-copy small {
    color: rgba(226,244,250,0.76);
    line-height: 1.3;
    white-space: normal;
}

.cloud-transfer-progress {
    display: block;
    height: 5px;
    margin-top: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,0.11);
    overflow: hidden;
}

.cloud-transfer-progress i {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(48,209,88,0.95), rgba(100,210,255,0.98), rgba(191,90,242,0.86));
    animation: cloudTransferProgress 1.05s ease-in-out infinite;
}

@keyframes cloudStatusPulse {
    0%, 100% { transform: scale(1); opacity: 0.72; }
    50% { transform: scale(1.24); opacity: 1; }
}

@keyframes cloudStatusPulseSoft {
    0%, 100% { transform: scale(1); opacity: 0.58; }
    50% { transform: scale(1.12); opacity: 0.92; }
}

@keyframes cloudTransferProgress {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(250%); }
}

@keyframes cloudTransferArrowUp {
    0% { transform: translate(-50%, 12px) rotate(225deg); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: translate(-50%, -6px) rotate(225deg); opacity: 0; }
}

@keyframes cloudTransferArrowDown {
    0% { transform: translate(-50%, -12px) rotate(45deg); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: translate(-50%, 6px) rotate(45deg); opacity: 0; }
}

@keyframes cloudTransferSheen {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .cloud-transfer-card::before,
    .cloud-transfer-progress i,
    .cloud-transfer-arrow,
    .header-sync-indicator.is-transferring .header-sync-dot,
    .header-sync-indicator.is-auto-transferring .header-sync-dot {
        animation: none;
    }
}
.header-sync-indicator:hover {
    transform: translateY(-1px);
    border-color: rgba(100,210,255,0.16);
    background: rgba(255,255,255,0.05);
}
.header-sync-indicator.is-connected {
    border-color: rgba(48, 209, 88, 0.18);
    background: rgba(48, 209, 88, 0.08);
}
.header-sync-indicator.is-unsynced,
.header-sync-indicator.is-warning {
    border-color: rgba(255, 159, 10, 0.18);
    background: rgba(255, 159, 10, 0.08);
}
.header-sync-indicator.is-offline {
    border-color: rgba(255, 69, 58, 0.22);
    background: rgba(255, 69, 58, 0.09);
}
.header-sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8e8e93;
    box-shadow: 0 0 0 4px rgba(142,142,147,0.1);
    flex-shrink: 0;
}
.header-sync-indicator.is-connected .header-sync-dot {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(48,209,88,0.12);
}
.header-sync-indicator.is-unsynced .header-sync-dot,
.header-sync-indicator.is-warning .header-sync-dot {
    background: #ff9f0a;
    box-shadow: 0 0 0 4px rgba(255,159,10,0.12);
}
.header-sync-indicator.is-offline .header-sync-dot {
    background: #ff453a;
    box-shadow: 0 0 0 4px rgba(255,69,58,0.14);
}
.header-sync-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.header-sync-copy strong,
.header-sync-copy small {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-sync-copy strong {
    font-size: 0.72rem;
    color: var(--text);
    font-weight: 600;
}
.header-sync-copy small {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.warehouse-switcher {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px 42px 42px;
    gap: 8px;
    margin-top: 12px;
    align-items: center;
}

.warehouse-control-card {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 13%, transparent), color-mix(in srgb, var(--secondary) 7%, transparent)),
        color-mix(in srgb, var(--card-bg) 90%, transparent);
    box-shadow: 0 16px 44px rgba(0,0,0,0.22);
}

.warehouse-control-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.warehouse-control-head span {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.warehouse-control-head strong {
    display: block;
    margin-top: 3px;
    font-size: 1.08rem;
}

.warehouse-switcher select {
    margin-bottom: 0;
    min-width: 0;
}

.warehouse-switcher optgroup {
    color: var(--text-muted);
    font-weight: 800;
}

.warehouse-switcher option {
    color: var(--text);
}

.warehouse-switcher button {
    height: 42px;
    padding: 0;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border-radius: 10px;
    font-size: 1rem;
}

.warehouse-meta {
    margin-top: 7px;
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.35;
}

header.warehouse-tools-hidden .header-warehouse-switcher,
header.warehouse-tools-hidden .header-warehouse-meta,
header.warehouse-tools-hidden .header-warehouse-access-badge {
    display: none;
}

.warehouse-access-badge {
    width: fit-content;
    max-width: min(92vw, 420px);
    margin-top: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.045);
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.warehouse-access-badge[data-access="owner"] {
    color: var(--success);
    border-color: rgba(48, 209, 88, 0.36);
    background: rgba(48, 209, 88, 0.08);
}

.warehouse-access-badge[data-access="write"] {
    color: var(--secondary);
    border-color: rgba(100, 210, 255, 0.34);
    background: rgba(100, 210, 255, 0.08);
}

.warehouse-access-badge[data-access="read"] {
    color: var(--danger);
    border-color: rgba(255, 69, 58, 0.34);
    background: rgba(255, 69, 58, 0.08);
}

.header-title-container { display: flex; align-items: center; gap: 8px; }
.version-badge { font-size: 0.7rem; background: rgba(191, 90, 242, 0.15); color: var(--primary); padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(191, 90, 242, 0.3); font-weight: 600; transition: all 0.3s ease; }

.demo-mode-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 184, 77, 0.72);
    color: #1d1200;
    background: linear-gradient(135deg, #ffd76a, #ff9f1a);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.22) inset, 0 0 24px rgba(255, 167, 38, 0.35);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

body.demo-profile-active .demo-mode-badge {
    display: inline-flex;
}

.demo-mode-badge:hover,
.demo-mode-badge:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.28) inset, 0 0 30px rgba(255, 167, 38, 0.42);
}

.legacy-domain-banner {
    width: min(1200px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    margin: 14px auto 8px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 48%, var(--border));
    border-radius: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--secondary) 12%, transparent)),
        color-mix(in srgb, var(--card-bg) 94%, transparent);
    box-shadow: 0 18px 42px rgba(0,0,0,0.24);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 100;
}

.legacy-domain-banner[hidden] {
    display: none !important;
}

.legacy-domain-banner-copy strong,
.legacy-domain-banner-copy span {
    display: block;
}

.legacy-domain-banner-copy strong {
    font-size: 1rem;
    color: #fff;
}

.legacy-domain-banner-copy span {
    margin-top: 4px;
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.45;
}

.legacy-domain-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.legacy-domain-banner-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 36%, transparent);
}

.legacy-domain-banner-link:hover {
    filter: brightness(1.06);
}

.update-banner {
    width: min(1200px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    margin: 12px auto 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 214, 10, 0.42);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.16), rgba(100, 210, 255, 0.09));
    box-shadow: 0 12px 30px rgba(0,0,0,0.24);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 98;
}

.update-banner[hidden] {
    display: none !important;
}

.update-banner strong,
.update-banner span {
    display: block;
}

.update-banner strong {
    color: #ffd60a;
    font-size: 0.95rem;
}

.update-banner span {
    color: var(--text);
    font-size: 0.82rem;
    margin-top: 2px;
}

.update-banner button {
    width: auto;
    min-width: 118px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 214, 10, 0.5);
    background: rgba(255, 214, 10, 0.18);
    color: #fff;
    font-weight: 900;
}

.menu-toggle { background: none; border: none; cursor: pointer; padding: 4px; display: flex; flex-direction: column; gap: 5px; z-index: 101; }
.menu-toggle .bar { width: 24px; height: 2.5px; background-color: var(--primary); border-radius: 2px; transition: 0.3s; }

.nav-menu { position: fixed; top: 0; right: -280px; width: 280px; height: 100vh; height: 100dvh; background: rgba(28, 28, 30, 0.94); z-index: 3001; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: -5px 0 25px rgba(0,0,0,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.nav-menu.open { transform: translateX(-280px); }
.nav-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-weight: 600; font-size: 1.1rem; color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.close-menu { background: none; border: none; color: var(--primary); font-size: 1.3rem; cursor: pointer; }

.nav-links { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-height: 0; padding-bottom: 18px; touch-action: pan-y; }
.nav-links button { width: 100%; text-align: left; padding: 14px 16px; border: none; background: rgba(255,255,255,0.03); color: #fff; font-size: 1rem; font-weight: 500; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.nav-links button.active { color: #000; background: var(--primary); font-weight: 600; }
.nav-menu-utility {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 8px;
}
.nav-menu-update-btn {
    width: 100%;
    text-align: center;
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 46%, transparent);
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
}

.menu-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); z-index: 3000; backdrop-filter: blur(2px); }
.menu-backdrop.open { display: block; }
body.menu-open {
    overflow: hidden !important;
}
body.menu-open .mobile-bottom-nav {
    display: none !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(120%);
}

.tab-content {
    display: none;
    width: min(1140px, 100%);
    margin: 0 auto;
    padding: 18px 16px 30px;
}

.tab-content.active {
    display: grid;
    gap: 14px;
    animation: iosSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.tab-content.active > .card,
.tab-content.active > details,
.tab-content.active > .tools-shell,
.tab-content.active > .warehouse-control-card {
    margin-bottom: 0;
}

#app {
    width: min(1220px, 100%);
    margin: 0 auto;
}

.dashboard-hero {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 20px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(191,90,242,0.18), rgba(100,210,255,0.08));
}
.dashboard-hero small,
.dashboard-tile span,
.dashboard-tile small,
.dashboard-next small {
    color: var(--text-muted);
}
.dashboard-hero h2 {
    margin: 4px 0;
    font-size: 1.7rem;
}
.dashboard-hero p {
    margin: 0;
    color: var(--text-muted);
}
.dashboard-refresh {
    width: auto;
    min-width: 128px;
    background: var(--primary);
    color: #000;
}
.dashboard-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.dashboard-aquarium-panel {
    margin-bottom: 14px;
}
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.dashboard-tile {
    text-align: left;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    border-radius: 14px;
    padding: 14px;
}
.dashboard-tile strong {
    display: block;
    margin: 8px 0 4px;
    font-size: 1.5rem;
}
.dashboard-tile.warn {
    border-color: rgba(255,69,58,0.38);
    background: rgba(255,69,58,0.08);
}
.dashboard-tile.ok {
    border-color: rgba(48,209,88,0.28);
}
.dashboard-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.dashboard-config {
    margin-bottom: 14px;
}
.dashboard-config-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    padding: 0;
}
.dashboard-config-card summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}
.dashboard-config-card summary::-webkit-details-marker {
    display: none;
}
.dashboard-config-body {
    padding: 0 16px 16px;
    display: grid;
    gap: 12px;
}
.dashboard-widget-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dashboard-chip-toggle {
    position: relative;
    display: inline-flex;
}
.dashboard-chip-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.dashboard-chip-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    font-size: 0.84rem;
    transition: 0.2s ease;
}
.dashboard-chip-toggle input:checked + span {
    color: var(--text);
    border-color: rgba(191,90,242,0.34);
    background: rgba(191,90,242,0.14);
    box-shadow: 0 10px 24px rgba(191,90,242,0.14);
}
.dashboard-actions button,
.dashboard-next button {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
}
.dashboard-panels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.dashboard-panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
}
.dashboard-panel-actionable {
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.dashboard-panel-actionable:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
    box-shadow: 0 14px 30px rgba(0,0,0,0.16);
}
.dashboard-panel-actionable:active {
    transform: scale(0.99);
}
.dashboard-progress {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    margin-top: 10px;
}
.dashboard-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
}
.dashboard-subtle-list {
    display: grid;
    gap: 3px;
    padding: 10px 0 0;
}
.dashboard-measurements-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.dashboard-measurement-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
    cursor: pointer;
}
.dashboard-measurement-head,
.dashboard-measurement-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.dashboard-measurement-head small,
.dashboard-measurement-meta span,
.dashboard-chart-empty {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.dashboard-trend-chart {
    width: 100%;
    height: 96px;
    display: block;
    margin: 10px 0 8px;
}
.dashboard-panel h3 {
    margin-top: 0;
}
.dashboard-list-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
    color: var(--text);
    text-align: left;
}
.dashboard-list-row span,
.dashboard-next {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dashboard-list-row small {
    color: var(--text-muted);
}
.dashboard-list-row em {
    color: var(--danger);
    font-style: normal;
    font-weight: 800;
}
.mobile-quick-tabs-settings {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
}
.mobile-quick-tabs-head {
    display: grid;
    gap: 4px;
}
.mobile-quick-tabs-head small {
    color: var(--text-muted);
    line-height: 1.4;
}
.mobile-quick-tabs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.mobile-quick-tab-slot {
    display: grid;
    gap: 6px;
}
.mobile-quick-tab-slot span {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}
.coral-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
    gap: 16px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(100,210,255,0.13), rgba(191,90,242,0.11));
}
.coral-hero-copy small {
    display: block;
    color: var(--secondary);
    margin-bottom: 6px;
    font-weight: 700;
}
.coral-hero-copy h3 {
    margin: 0 0 8px;
    font-size: 1.45rem;
}
.coral-shop-link {
    display: grid;
    gap: 6px;
    align-content: end;
    text-decoration: none;
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 18px;
    background: rgba(10,10,12,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.coral-shop-link strong {
    font-size: 1.2rem;
}
.coral-shop-link small,
.coral-shop-link span {
    color: var(--text-muted);
}
.coral-layout {
    display: grid;
    grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.25fr);
    gap: 14px;
}
.coral-form-card,
.coral-library-card {
    align-self: start;
}
.coral-section-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.coral-advanced-details {
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    background: rgba(255,255,255,0.025);
}
.coral-advanced-details summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-weight: 700;
}
.coral-advanced-details summary::-webkit-details-marker {
    display: none;
}
.coral-advanced-grid {
    padding: 0 16px 16px;
}
.coral-photo-tools {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.coral-photo-preview {
    width: 132px;
    min-height: 132px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-content: start;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    padding: 6px;
}
.coral-photo-preview img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
}
.coral-photo-preview span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 118px;
    grid-column: 1 / -1;
}
.coral-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.coral-photo-button {
    position: relative;
    overflow: hidden;
}
.coral-photo-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.coral-filter-grid {
    margin-bottom: 12px;
}
.coral-library-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.coral-library-stats span {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.coral-library-stats strong {
    font-size: 1rem;
}
.coral-library-stats small {
    color: var(--text-muted);
}
.coral-catalog-list {
    display: grid;
    gap: 12px;
}
.coral-card {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
}
.coral-card.active {
    border-color: rgba(191,90,242,0.36);
    box-shadow: 0 16px 36px rgba(191,90,242,0.12);
}
.coral-card-media {
    min-height: 148px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.coral-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.coral-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
}
.coral-card-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}
.coral-card-head h4 {
    margin: 0 0 4px;
    font-size: 1.08rem;
}
.coral-card-head small {
    color: var(--text-muted);
}
.coral-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}
.coral-meta-grid span {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
}
.coral-meta-grid small {
    color: var(--text-muted);
}
.coral-conditional-field.is-hidden {
    display: none;
}
.coral-status-badge {
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255,255,255,0.1);
}
.coral-status-neuzugang { background: rgba(255,159,10,0.14); color: #ffb340; }
.coral-status-bestand { background: rgba(100,210,255,0.12); color: var(--secondary); }
.coral-status-ableger { background: rgba(191,90,242,0.14); color: var(--primary); }
.coral-transfer-details {
    margin-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 14px;
}
.coral-bridge-details {
    border-top: 1px solid rgba(191,90,242,0.18);
    background: rgba(191,90,242,0.03);
    border-radius: 18px;
    padding: 14px;
}
.coral-transfer-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.coral-transfer-details summary::-webkit-details-marker {
    display: none;
}
.coral-transfer-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}
.coral-bridge-details textarea {
    min-height: 156px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.45;
}
.coral-transfer-card {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 14px;
    background: rgba(255,255,255,0.025);
}
.coral-transfer-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.coral-transfer-head small {
    color: var(--text-muted);
}
.coral-placement-card {
    margin-bottom: 14px;
    overflow: hidden;
}
.coral-advisor-details {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,0.025);
}
.coral-advisor-details > summary,
.coral-custom-profile-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    padding: 14px 16px;
    font-weight: 800;
}
.coral-advisor-details > summary::-webkit-details-marker,
.coral-custom-profile-details > summary::-webkit-details-marker {
    display: none;
}
.coral-advisor-body {
    display: grid;
    gap: 14px;
    padding: 0 16px 16px;
}
.coral-advisor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
.coral-advisor-panel {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
}
.coral-advisor-panel h4 {
    margin: 0 0 12px;
    color: var(--text);
}
.coral-advisor-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.coral-advisor-panel-head > div {
    min-width: 0;
}
.coral-advisor-panel-head h4 {
    margin: 0;
}
.coral-advisor-panel-head p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}
.coral-advisor-step {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 1px solid color-mix(in srgb, var(--primary) 48%, var(--border));
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 900;
}
.coral-tank-settings {
    border-top: 1px solid var(--border);
}
.coral-tank-settings > summary {
    padding: 11px 0 4px;
    color: var(--secondary);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 800;
}
.coral-tank-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 8px;
}
.coral-tank-form-grid .input-group:nth-last-child(-n + 2) {
    grid-column: span 1;
}
.coral-recommendation-panel {
    padding: 16px;
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 46%),
        rgba(255,255,255,0.03);
}
.coral-advisor-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px;
}
.coral-placement-result,
.coral-compatibility-result,
.coral-own-stock-advice {
    min-width: 0;
}
.coral-advice-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.coral-advice-summary span {
    color: var(--secondary);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.coral-advice-summary h4 {
    margin: 3px 0;
    font-size: 1.15rem;
}
.coral-advice-summary p {
    margin: 0;
    color: var(--text-muted);
}
.coral-profile-label {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: var(--text-muted) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.coral-advice-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.coral-advice-badges span {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}
.coral-primary-recommendation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 48%, var(--border));
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 9%, var(--surface-card));
}
.coral-primary-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 16%, transparent);
}
.coral-primary-icon span {
    width: 13px;
    height: 13px;
    border: 3px solid var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 15%, transparent);
}
.coral-primary-copy > span,
.coral-advice-kicker {
    color: var(--primary);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}
.coral-primary-copy h3 {
    margin: 2px 0;
    color: var(--text);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}
.coral-primary-copy p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.coral-primary-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    gap: 7px;
}
.coral-primary-facts div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(0,0,0,0.12);
}
.coral-primary-facts small,
.coral-primary-facts strong {
    display: block;
}
.coral-primary-facts small {
    color: var(--text-muted);
    font-size: 0.63rem;
}
.coral-primary-facts strong {
    margin-top: 2px;
    color: var(--text);
    font-size: 0.8rem;
}
.coral-recommendation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 12px;
    align-items: stretch;
}
.coral-tank-map {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-card) 80%, transparent);
}
.coral-aquarium-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.coral-aquarium-title > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}
.coral-aquarium-title strong {
    color: var(--text);
    font-size: 0.9rem;
}
.coral-aquarium-title span,
.coral-aquarium-title small {
    color: var(--text-muted);
    font-size: 0.66rem;
}
.coral-aquarium-light {
    position: relative;
    width: 54%;
    height: 9px;
    margin: 0 auto 6px;
    border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
    border-radius: 7px 7px 3px 3px;
    background: color-mix(in srgb, var(--primary) 20%, var(--surface-raised));
    box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 18%, transparent);
}
.coral-aquarium-light-even { width: 86%; }
.coral-aquarium-light-spot { width: 28%; }
.coral-aquarium-light-soft { opacity: 0.7; }
.coral-aquarium-light span {
    position: absolute;
    left: 50%;
    bottom: 10px;
    color: var(--text-muted);
    font-size: 0.58rem;
    white-space: nowrap;
    transform: translateX(-50%);
}
.coral-aquarium-glass {
    position: relative;
    overflow: hidden;
    padding: 24px 25px 0;
    border: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    border-top-width: 3px;
    border-radius: 8px 8px 14px 14px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 44%),
        color-mix(in srgb, var(--surface-card) 88%, transparent);
    box-shadow: inset 0 0 24px rgba(0,0,0,0.12);
}
.coral-waterline {
    position: absolute;
    top: 7px;
    left: 8px;
    right: 8px;
    height: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 68%, transparent);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 18%, transparent);
}
.coral-waterline span {
    position: absolute;
    top: 4px;
    left: 50%;
    padding: 1px 5px;
    background: var(--surface-card);
    color: var(--text-muted);
    font-size: 0.56rem;
    white-space: nowrap;
    transform: translateX(-50%);
}
.coral-pump-marker {
    position: absolute;
    z-index: 3;
    top: 31px;
    display: grid;
    justify-items: center;
    gap: 2px;
    color: var(--text-muted);
    font-size: 0.52rem;
}
.coral-pump-marker.is-left { left: 4px; }
.coral-pump-marker.is-right { right: 4px; }
.coral-pump-marker i {
    position: relative;
    display: block;
    width: 15px;
    height: 15px;
    border: 2px solid var(--secondary);
    border-radius: 50%;
}
.coral-pump-marker i::after {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--secondary);
    content: '';
}
.coral-pump-marker b { font-weight: 750; }
.coral-substrate {
    height: 21px;
    margin: 7px -25px 0;
    border-top: 1px solid color-mix(in srgb, var(--status-warning) 30%, var(--border));
    background:
        repeating-linear-gradient(100deg, transparent 0 8px, rgba(255,255,255,0.025) 8px 10px),
        color-mix(in srgb, var(--status-warning) 9%, var(--surface-raised));
    text-align: center;
}
.coral-substrate span {
    position: relative;
    top: 3px;
    color: var(--text-muted);
    font-size: 0.56rem;
}
.coral-tank-map-head,
.coral-tank-map-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.66rem;
}
.coral-tank-map-head {
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
}
.coral-tank-map-head span {
    color: var(--text);
    font-weight: 800;
}
.coral-tank-map-foot {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}
.coral-zone-map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.coral-zone-cell {
    position: relative;
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 98px;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.coral-zone-cell strong,
.coral-zone-cell span,
.coral-zone-cell small {
    min-width: 0;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}
.coral-zone-cell strong {
    color: var(--text);
    font-size: 0.86rem;
}
.coral-zone-cell span {
    color: var(--text-muted);
    font-size: 0.78rem;
}
.coral-zone-cell small {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.25;
}
.coral-zone-cell.is-good {
    border-color: rgba(48,209,88,0.42);
    background: rgba(48,209,88,0.08);
}
.coral-zone-cell.is-ok {
    border-color: rgba(255,204,0,0.35);
    background: rgba(255,204,0,0.06);
}
.coral-zone-cell.is-risk {
    opacity: 0.76;
}
.coral-zone-cell.is-best {
    z-index: 1;
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 17%, var(--surface-card));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent), 0 10px 28px rgba(0,0,0,0.18);
    transform: translateY(-2px);
}
.coral-best-marker {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 5px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--surface-card);
    font-size: 0.56rem;
    line-height: 1;
}
.coral-zone-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 9px;
}
.coral-zone-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 0.65rem;
}
.coral-zone-legend span::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    content: '';
}
.coral-zone-legend .is-good::before { background: #30d158; }
.coral-zone-legend .is-ok::before { background: #ffcc00; }
.coral-zone-legend .is-risk::before { background: #ff6961; }
.coral-map-disclaimer {
    margin: 9px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.64rem;
    line-height: 1.35;
}
.coral-advice-text {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0,0,0,0.14);
}
.coral-advice-block {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.coral-advice-block:last-child { border-bottom: 0; }
.coral-warning-block .coral-advice-kicker { color: var(--status-warning); }
.coral-advice-text p {
    margin: 5px 0 0;
    color: var(--text-muted);
    white-space: normal;
}
.coral-observation-note {
    margin: 0 !important;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
    font-size: 0.74rem;
    line-height: 1.4;
}
.coral-advice-text ul,
.coral-compat-card ul {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--text-muted);
}
.coral-compat-card {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,0.035);
}
.coral-compat-card > span {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 8px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}
.coral-compat-card strong {
    display: block;
    font-size: 1.05rem;
}
.coral-compat-card p {
    margin: 8px 0 0;
    color: var(--text-muted);
}
.coral-compat-card.is-good { border-color: rgba(48,209,88,0.4); }
.coral-compat-card.is-good > span { color: #30d158; background: rgba(48,209,88,0.12); }
.coral-compat-card.is-caution { border-color: rgba(255,204,0,0.42); }
.coral-compat-card.is-caution > span { color: #ffcc00; background: rgba(255,204,0,0.12); }
.coral-compat-card.is-bad { border-color: rgba(255,69,58,0.5); }
.coral-compat-card.is-bad > span { color: #ff6961; background: rgba(255,69,58,0.13); }
.coral-custom-profile-details {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(0,0,0,0.12);
}
.coral-custom-profile-details .tool-grid,
.coral-custom-profile-details .input-group,
.coral-custom-profile-details .btn-group {
    padding-inline: 12px;
}
.coral-custom-profile-details textarea {
    min-height: 96px;
}
.coral-stock-compat-list {
    display: grid;
    gap: 8px;
}
.coral-stock-compat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
}
.coral-stock-compat-row strong,
.coral-stock-compat-row span {
    min-width: 0;
    white-space: normal;
}
.coral-stock-compat-row span {
    color: var(--text-muted);
    text-align: right;
}
.coral-stock-compat-row.is-good { border-color: rgba(48,209,88,0.32); }
.coral-stock-compat-row.is-caution { border-color: rgba(255,204,0,0.34); }
.coral-stock-compat-row.is-bad { border-color: rgba(255,69,58,0.38); }
.mobile-bottom-nav {
    display: none;
}
.lager-filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 12px;
    scrollbar-width: none;
}
.lager-filter-chips::-webkit-scrollbar { display: none; }
.lager-filter-chips button {
    width: auto;
    white-space: nowrap;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    padding: 8px 12px;
}
.lager-filter-chips button.active {
    color: #000;
    background: var(--primary);
    border-color: var(--primary);
}
.product-history {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.product-history summary {
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
}
.product-history div {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.product-history ul {
    margin: 4px 0 0 18px;
    padding: 0;
}
.mini-help {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.08);
    color: var(--secondary);
    font-weight: 900;
    line-height: 1;
}

.cr-maintenance-warning {
    margin: 12px 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 214, 10, 0.44);
    border-radius: 12px;
    background: rgba(255, 214, 10, 0.1);
    color: #ffd60a;
    font-weight: 800;
    line-height: 1.35;
}

.cr-pdf-card input:disabled,
.cr-pdf-card textarea:disabled,
.cr-pdf-card button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    filter: grayscale(0.45);
}

.menu-order-list {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.menu-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
}

.menu-order-row span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-order-row small {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.menu-order-row div {
    display: flex;
    gap: 6px;
}

.menu-order-row button {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
}

.menu-order-row button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@keyframes iosSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.swipe-indicator {
    position: fixed;
    left: 50%;
    bottom: 86px;
    transform: translate(-50%, 18px) scale(0.96);
    z-index: 1200;
    display: none;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(28, 28, 30, 0.92);
    color: var(--text);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
}

.swipe-indicator.show {
    display: flex;
    animation: swipeIndicatorPop 0.7s ease forwards;
}

.swipe-indicator-arrow {
    color: var(--primary);
    font-size: 1.15rem;
    line-height: 1;
}

@keyframes swipeIndicatorPop {
    0% { opacity: 0; transform: translate(-50%, 18px) scale(0.96); }
    18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    72% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -8px) scale(0.98); }
}

@media (min-width: 768px) {
    .menu-toggle, .close-menu, .nav-menu-header, .menu-backdrop { display: none !important; }
    .nav-menu { position: static; width: 100%; height: auto; background: #1c1c1e; border-left: none; border-bottom: 1px solid var(--border); padding: 0; box-shadow: none; transform: none !important; backdrop-filter: none; }
    .nav-links { flex-direction: row; gap: 0; max-width: 1200px; margin: 0 auto; width: 100%; }
    .nav-links button { flex: 1; text-align: center; border-radius: 0; background: none; padding: 16px; color: var(--text-muted); }
    .nav-links button.active { color: var(--primary); background: rgba(191, 90, 242, 0.1); border-bottom: 3px solid var(--primary); }
    .nav-menu-utility { display: none; }
}

.category-title { color: var(--text); font-size: 0.85rem; font-weight: 600; margin: 28px 0 12px 2px; text-transform: uppercase; letter-spacing: 1px; transition: color 0.5s ease; opacity: 0.6; }
.card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.012)),
        color-mix(in srgb, var(--card-bg) 97%, transparent);
    padding: 18px;
    margin-bottom: 12px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, rgba(255,255,255,0.08));
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
    transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.35s ease;
}

.card:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}

.card h2,
.card h3 {
    margin: 0 0 8px;
    line-height: 1.2;
}
/*.card h4 { margin: 0 0 12px 0; font-size: 1.05rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }*/
.card h4 { margin: 0 0 12px 0; font-size: 1.05rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/*.stock { color: var(--secondary); font-weight: 600; background: rgba(100, 210, 255, 0.1); padding: 3px 8px; border-radius: 6px; font-size: 0.95rem; white-space: nowrap; flex-shrink: 0; transition: color 0.5s ease; }.stock { color: var(--secondary); font-weight: 600; background: rgba(100, 210, 255, 0.1); padding: 3px 8px; border-radius: 6px; font-size: 0.95rem; transition: color 0.5s ease; }
*/
.stock { color: var(--text); font-weight: 600; background: rgba(255,255,255,0.06); padding: 4px 10px; border-radius: 8px; font-size: 0.9rem; white-space: nowrap; flex-shrink: 0; transition: color 0.5s ease; }

body.theme-girl .stock { background: rgba(255, 102, 164, 0.15); }
body.theme-mint .stock { background: rgba(100, 255, 250, 0.15); } /* Angepasst für Meeres-Badge */

.cross-hint { font-size: 0.75rem; color: #ffd60a; margin-top: 4px; display: block; font-weight: 500; }
.hint { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.45; }

.trace-grid { display: grid; grid-template-columns: 1fr 100px 50px; gap: 5px; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.trace-grid label { font-size: 0.95rem; }
.trace-grid input { margin-bottom: 0 !important; text-align: right; }
.unit-label { font-size: 0.9rem; color: var(--text-muted); font-weight: 600; }

.log-item { background: #2c2c2e; padding: 12px; border-radius: 10px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.log-item.in { border-left: 4px solid var(--success); }
.log-item.out { border-left: 4px solid var(--danger); }
.log-details { font-size: 0.85rem; }
.log-date { font-size: 0.75rem; color: var(--text-muted); }

.stat-block { background: #2c2c2e; padding: 14px; border-radius: 10px; margin-bottom: 12px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center; margin-top: 8px; font-size: 0.8rem; color: var(--text-muted); }
.stat-grid div strong { display: block; font-size: 0.95rem; color: #fff; margin-bottom: 2px; }
.prognose-badge { font-size: 0.8rem; color: #ffd60a; background: rgba(255, 214, 10, 0.1); padding: 4px 8px; border-radius: 6px; display: inline-block; margin-top: 8px; font-weight: 500; }

.cr-experimental-warning {
    background: rgba(255, 214, 10, 0.1);
    border: 1px solid rgba(255, 214, 10, 0.35);
    border-left: 3px solid #ffd60a;
    color: #ffd60a;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.84rem;
    line-height: 1.35;
    margin: 0 0 12px;
    font-weight: 600;
}

.cr-adjustment-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
}

.cr-adjustment-card.has-missing {
    border-left-color: var(--danger);
}

.cr-adjustment-wrap {
    margin-top: 12px;
}

.cr-adjustment-wrap .cr-adjustment-card {
    margin-top: 0;
}

.cr-adjustment-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--text);
    font-weight: 700;
    list-style: none;
}

.cr-adjustment-title::-webkit-details-marker {
    display: none;
}

.cr-adjustment-title span:last-child {
    color: var(--success);
    font-size: 0.82rem;
    white-space: nowrap;
}

.cr-adjustment-status {
    color: var(--success);
    background: rgba(48,209,88,0.1);
    border: 1px solid rgba(48,209,88,0.28);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.78rem;
    line-height: 1;
}

.cr-adjustment-status.missing {
    color: var(--danger);
    background: rgba(255,69,58,0.1);
    border-color: rgba(255,69,58,0.28);
}

.cr-adjustment-card.has-missing .cr-adjustment-title span:last-child {
    color: var(--danger);
}

.cr-adjustment-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 8px 0 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cr-adjustment-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.cr-water-info {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.cr-water-info span {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
}

.cr-element-values {
    margin: 8px 0 0;
    border: 1px solid var(--border);
    border-left: 3px solid var(--secondary);
    border-radius: 10px;
    padding: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.025);
}

.cr-element-values summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--secondary);
    font-weight: 700;
    font-size: 0.84rem;
    list-style: none;
}

.cr-element-values summary::-webkit-details-marker {
    display: none;
}

.cr-element-values summary small {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.cr-element-values[open] summary {
    margin-bottom: 8px;
}

.cr-element-grid {
    display: grid;
    grid-template-columns: 72px repeat(10, minmax(64px, 1fr));
    gap: 6px;
    align-items: center;
    min-width: 760px;
    padding: 5px 0;
    color: var(--text);
    font-size: 0.76rem;
}

.cr-element-grid span,
.cr-element-grid strong {
    white-space: nowrap;
}

.cr-element-header {
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-weight: 700;
}

.cr-element-table {
    display: none;
    overflow-x: auto;
}

.cr-element-mobile-table {
    display: block;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.cr-element-mobile-row {
    display: grid;
    grid-template-columns: 64px 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    color: var(--text);
    font-size: 0.78rem;
}

.cr-element-mobile-row:first-child {
    border-top: none;
}

.cr-element-mobile-row strong {
    color: var(--secondary);
    font-weight: 700;
}

.cr-element-mobile-row span {
    white-space: nowrap;
}

.cr-element-mobile-head {
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
    font-weight: 700;
}

.cr-element-mobile-head span {
    color: var(--text-muted);
}

@media (min-width: 641px) {
    .cr-element-table {
        display: block;
    }

    .cr-element-mobile-table {
        display: none;
    }
}


@media (max-width: 380px) {
    .cr-element-mobile-row {
        grid-template-columns: 52px 1fr 1fr;
        gap: 6px;
        padding: 8px;
        font-size: 0.72rem;
    }
}

.cr-adjustment-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.cr-adjustment-row:first-child {
    border-top: none;
}

.cr-adjustment-row small {
    display: block;
    color: var(--text-muted);
    font-size: 0.74rem;
    margin-top: 2px;
}

.cr-adjustment-row.missing strong,
.cr-adjustment-row.missing small {
    color: var(--danger);
}

.cr-adjustment-row.empty {
    opacity: 0.48;
}

.cr-adjustment-amount {
    text-align: right;
}

.cr-unit-preference-group {
    margin-bottom: 12px;
}

.cr-unit-preference-group select {
    width: 100%;
}

.cr-primary-unit {
    color: #fff;
    font-weight: 800;
    font-size: 0.98rem;
}

.cr-secondary-unit {
    color: var(--secondary);
    font-size: 0.76rem;
    margin-left: 6px;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .cr-adjustment-row {
        grid-template-columns: 1fr;
    }
    .cr-adjustment-amount {
        text-align: left;
    }
}

@media (max-width: 767px) {
    #cr-export {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }

    #cr-export.active {
        display: flex;
    }

    #cr-export:not(.active) {
        display: none;
    }

    #cr-export .card {
        margin-bottom: 0;
        padding: 14px;
        border-radius: 12px;
    }

    #cr-export .cr-pdf-card {
        order: 1;
    }

    #cr-export .cr-paste-card {
        order: 2;
    }

    #cr-export h3 {
        font-size: 1rem;
        margin-top: 0;
        margin-bottom: 6px;
    }

    #cr-export .hint {
        font-size: 0.78rem;
        line-height: 1.35;
        margin-bottom: 10px;
    }

    #cr-export textarea {
        height: 92px;
        font-size: 0.88rem;
        margin-bottom: 10px;
    }

    #cr-export input[type="file"] {
        font-size: 0.88rem;
        margin-bottom: 10px;
    }

    #cr-export .btn-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    #cr-export .btn-group button,
    #cr-export .btn-primary,
    #cr-export .btn-secondary,
    .cr-adjustment-card button {
        min-height: 44px;
        padding: 10px;
        font-size: 0.86rem;
    }

    #cr-pdf-status {
        background: rgba(255,255,255,0.04);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 8px 10px;
        margin-bottom: 8px;
    }

    .cr-adjustment-wrap {
        margin-top: 10px;
    }

    .cr-adjustment-card {
        padding: 12px;
        border-radius: 12px;
    }

    .cr-adjustment-title {
        align-items: flex-start;
    }

    .cr-adjustment-name {
        font-size: 0.98rem;
        line-height: 1.2;
    }

    .cr-adjustment-status {
        flex-shrink: 0;
        margin-top: 1px;
    }

    .cr-adjustment-meta {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .cr-adjustment-meta span,
    .cr-water-info span {
        background: rgba(255,255,255,0.05);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 6px 8px;
    }

    .cr-water-info {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .cr-adjustment-list {
        gap: 0;
        margin-bottom: 10px;
    }

    .cr-adjustment-row {
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding: 9px 0;
    }

    .cr-adjustment-row strong {
        font-size: 0.86rem;
    }

    .cr-adjustment-row small {
        font-size: 0.7rem;
    }

    .cr-adjustment-amount strong {
        font-size: 0.86rem;
    }

    .cr-element-values {
        margin-top: 8px;
        padding: 10px;
    }

    .cr-element-values summary {
        min-height: 34px;
        font-size: 0.84rem;
    }

    .cr-element-values summary small {
        font-size: 0.72rem;
        max-width: 42%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.btn-group { display: flex; gap: 10px; }
button {
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.btn-animated:active { transform: scale(0.96); opacity: 0.8; }

.btn-in { background: rgba(48, 209, 88, 0.12); color: var(--success); border-color: rgba(48, 209, 88, 0.22); flex: 1; }
.btn-out { background: rgba(255, 69, 58, 0.12); color: var(--danger); border-color: rgba(255, 69, 58, 0.22); flex: 1; }

.btn-primary { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--secondary))); color: #fff; width: 100%; transition: background-color 0.5s ease; box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 24%, transparent); }
.btn-secondary { background: rgba(255,255,255,0.065); color: var(--secondary); border-color: var(--border); width: 100%; }
.btn-danger { background: var(--danger); color: white; width: 100%; }
.btn-cancel { background: rgba(255,255,255,0.06); color: #fff; border-color: var(--border); width: 100%; margin-top: 12px; }

textarea {
    width: 100%;
    height: 120px;
    background: rgba(255,255,255,0.055);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    font-size: 0.95rem;
    resize: none;
    margin-bottom: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
input[type="number"], input[type="text"], input[type="password"], input[type="search"], input[type="file"], input[type="date"], input[type="time"], input[type="datetime-local"], select {
    width: 100%;
    padding: 12px;
    background: rgba(255,255,255,0.055);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 12px;
    font-size: 1rem;
    margin-bottom: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
textarea:focus,
input[type="number"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
    background: rgba(255,255,255,0.08);
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    appearance: none;
    -webkit-appearance: none;
    min-height: 48px;
    letter-spacing: 0;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: 0.78;
    cursor: pointer;
    filter: invert(0.92) sepia(0.2) saturate(2) hue-rotate(168deg);
}
.input-group label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 6px; }

.disabled-field {
    opacity: 0.45;
    filter: grayscale(1);
}

.disabled-field input {
    cursor: not-allowed;
}

.bug-report-textarea {
    min-height: 110px;
    height: 110px;
}

.bug-report-textarea-small {
    min-height: 86px;
    height: 86px;
}

.bug-report-note {
    margin: 10px 0 0;
    font-size: 0.78rem;
}

.settings-accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    border-radius: 12px;
    padding: 2px 2px 2px 0;
    transition: background-color 0.2s ease;
}

.settings-accordion-summary:hover {
    background: rgba(255, 255, 255, 0.035);
}

.settings-group-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 18px 2px 8px;
}

.settings-group-label span {
    border-left: 3px solid var(--primary);
    padding-left: 8px;
}

.settings-summary-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settings-summary-copy small {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.35;
}

.settings-accordion-summary::-webkit-details-marker {
    display: none;
}

.settings-accordion-summary h2,
.settings-accordion-summary h3 {
    margin: 0 !important;
}

.settings-accordion-hint {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.settings-accordion-hint::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.2s ease;
}

.aquarium-workspace-panel {
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--secondary) 28%, var(--border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 10%, transparent), color-mix(in srgb, var(--primary) 7%, transparent));
}

.aquarium-workspace-panel-logbook {
    margin-top: 0;
}

.aquarium-workspace-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.aquarium-workspace-head span {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.aquarium-workspace-head strong {
    display: block;
    margin-top: 3px;
    font-size: 1.02rem;
}

.aquarium-workspace-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.aquarium-workspace-actions button {
    width: auto;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.8rem;
}

.aquarium-workspace-select small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.nav-links button.nav-tab-disabled,
.mobile-bottom-nav button.nav-tab-disabled {
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none;
}

.nav-links button.nav-tab-disabled:hover,
.mobile-bottom-nav button.nav-tab-disabled:hover {
    transform: none;
}

details[open] > summary .settings-accordion-hint {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

details[open] > summary .settings-accordion-hint::before {
    transform: rotate(-135deg) translate(-1px, -1px);
}

.settings-accordion-body {
    margin-top: 12px;
}

#einstellungen > .card > details > summary {
    min-height: 34px;
}

#einstellungen > .card {
    margin-bottom: 8px;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

#einstellungen > .card:hover {
    transform: none !important;
    box-shadow: none !important;
}

#einstellungen > .card h2,
#einstellungen > .card h3 {
    color: var(--text) !important;
}

#einstellungen > .card .hint,
#einstellungen > .card .subtitle,
#einstellungen > .card small {
    color: var(--text-muted) !important;
}

#einstellungen .switch-container,
#einstellungen .preset-row,
#einstellungen .custom-product-row,
#einstellungen .visibility-product-row,
#einstellungen .container-preset-row {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: var(--border) !important;
}

#einstellungen input[type="number"],
#einstellungen input[type="text"],
#einstellungen input[type="password"],
#einstellungen input[type="file"],
#einstellungen select,
#einstellungen textarea {
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

#einstellungen code {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--text) !important;
}

body.theme-girl #einstellungen > .card {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: #ffd4e2 !important;
}

body.theme-girl .settings-group-label span {
    border-left-color: #ff66a4;
}

body.theme-mint #einstellungen > .card {
    background: rgba(10, 37, 64, 0.78) !important;
    border-color: #174a76 !important;
}

body.theme-mint .settings-group-label span {
    border-left-color: #00f0ff;
}

body.theme-badman #einstellungen > .card {
    background: rgba(42, 42, 42, 0.84) !important;
    border-color: rgba(230, 57, 70, 0.34) !important;
}

body.theme-badman .settings-group-label span {
    border-left-color: #e63946;
}

body.theme-light #einstellungen > .card {
    background: #ffffff !important;
    border-color: #e5e5ea !important;
}

body.theme-light .settings-group-label span {
    border-left-color: #007aff;
}

.modal { display: none; position: fixed; inset: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 16px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-content { background: rgba(28, 28, 30, 0.94); border: 1px solid var(--border); padding: 24px; width: min(100%, 360px); max-width: 360px; max-height: min(88vh, calc(100dvh - 32px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); margin: auto; }

.switch-container { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255, 255, 255, 0.03); border-radius: 12px; margin-bottom: 15px; border: 1px dashed rgba(255, 255, 255, 0.1); }
.switch { position: relative; display: inline-block; width: 51px; height: 31px; }
.switch input { opacity: 0; width: 0; height: 0; margin-bottom: 0 !important; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #3a3a3c; transition: .3s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 27px; width: 27px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,0.3); }
input:checked + .slider { background-color: var(--success); }
input:checked + .slider:before { transform: translateX(20px); }

/* --- FUTURISTIC LED RGB ANIMATIONEN --- */
body.party-mode { 
    animation: smoothGradient 10s ease infinite; 
    background: linear-gradient(45deg, #0a001a, #001a1a, #1a000d, #00001a);
    background-size: 400% 400%;
}
body.party-mode .card { 
    background: #111;
    border: 1px solid rgba(255,255,255,0.1);
    animation: rgbPulse 6s infinite alternate ease-in-out; 
}
body.party-mode header h1, body.party-mode .stock { 
    animation: rgbText 5s linear infinite; 
}
body.party-mode button.btn-animated { 
    animation: rgbBorder 4s infinite alternate; 
}

@keyframes smoothGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes rgbPulse { 
    0% { box-shadow: 0 0 15px rgba(0,255,255,0.3), inset 0 0 10px rgba(0,255,255,0.1); border-color: rgba(0,255,255,0.5); } 
    50% { box-shadow: 0 0 15px rgba(255,0,255,0.3), inset 0 0 10px rgba(255,0,255,0.1); border-color: rgba(255,0,255,0.5); } 
    100% { box-shadow: 0 0 15px rgba(0,255,0,0.3), inset 0 0 10px rgba(0,255,0,0.1); border-color: rgba(0,255,0,0.5); } 
}
@keyframes rgbText { 
    0% { color: #0ff; text-shadow: 0 0 8px rgba(0,255,255,0.6); } 
    33% { color: #f0f; text-shadow: 0 0 8px rgba(255,0,255,0.6); } 
    66% { color: #0f0; text-shadow: 0 0 8px rgba(0,255,0,0.6); } 
    100% { color: #0ff; text-shadow: 0 0 8px rgba(0,255,255,0.6); } 
}
@keyframes rgbBorder { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }


/* ==========================================================================
   Pink theme legacy overrides
   ========================================================================== */
body.theme-girl textarea,
body.theme-girl input[type="number"],
body.theme-girl input[type="text"],
body.theme-girl input[type="password"],
body.theme-girl input[type="file"],
body.theme-girl select,
body.theme-girl .log-item,
body.theme-girl .stat-block,
body.theme-girl #cr-preview-container,
body.theme-girl #containerSection {
    background: #fff5f8 !important;
    color: #4a0026 !important;
    border: 1px solid #ffccd9 !important;
}

body.theme-girl select option { background: #ffffff !important; color: #4a0026 !important; }
body.theme-girl .modal-content { background: #ffffff !important; border: 2px solid #ff66a4 !important; color: #4a0026 !important; }

body.theme-girl h1, body.theme-girl h2, body.theme-girl h3, body.theme-girl h4, 
body.theme-girl label, body.theme-girl strong, 
body.theme-girl .stat-grid div strong, body.theme-girl .trace-grid label {
    color: #4a0026 !important;
}

body.theme-girl .btn-in { background: #ffe3ee !important; color: #ff1493 !important; border: 1px solid #ffb3d1 !important; }
body.theme-girl .btn-out { background: #fff0f5 !important; color: #d90452 !important; border: 1px solid #ffccd9 !important; }
body.theme-girl .btn-primary { background: #ff66a4 !important; color: #ffffff !important; }
body.theme-girl .btn-secondary { background: #ffccd9 !important; color: #4a0026 !important; }
body.theme-girl .btn-danger { background: #d90452 !important; color: #ffffff !important; }
body.theme-girl .btn-cancel { background: #ffccd9 !important; color: #4a0026 !important; }

body.theme-girl .stock { background: #ffccd9 !important; color: #d90452 !important; }
body.theme-girl .version-badge { background: #ffccd9 !important; color: #ff1493 !important; border: 1px solid #ff66a4 !important; }
body.theme-girl .prognose-badge { background: #ffe3ee !important; color: #ff1493 !important; }
body.theme-girl header { background: rgba(255, 238, 244, 0.85) !important; box-shadow: 0 1px 0 #ffccd9 !important; }
body.theme-girl .nav-menu { background: rgba(255, 255, 255, 0.96) !important; border-left: 1px solid #ffccd9 !important; }
body.theme-girl .nav-links button { background: #fff5f8 !important; color: #4a0026 !important; }
body.theme-girl .nav-links button.active { background: #ff66a4 !important; color: #ffffff !important; }
body.theme-girl .cross-hint { color: #d90452 !important; }

@media (min-width: 768px) {
    body.theme-girl .nav-menu { background: #ffffff !important; border-bottom: 1px solid #ffccd9 !important; }
    body.theme-girl .nav-links button.active { background: rgba(255, 102, 164, 0.1) !important; color: #ff1493 !important; border-bottom: 3px solid #ff1493 !important; }
}

body.theme-girl header h1::before,
body.theme-girl header h1::after,
body.theme-girl .category-title::before,
body.theme-girl .category-title::after,
body.theme-girl .card h4 span::before,
body.theme-girl .btn-in::before,
body.theme-girl .btn-out::before { content: none; }

body.theme-girl.party-mode { 
    animation: pinkDiscoGradient 8s ease infinite !important; 
    background: linear-gradient(45deg, #ffb6c1, #ff69b4, #da70d6, #ffc0cb) !important;
    background-size: 400% 400% !important;
}
body.theme-girl.party-mode .card {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #ff66a4 !important;
    animation: pinkRgbPulse 4s infinite alternate ease-in-out !important;
}
@keyframes pinkDiscoGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes pinkRgbPulse {
    0% { box-shadow: 0 0 15px rgba(255,20,147,0.2); border-color: #ff66a4; }
    100% { box-shadow: 0 0 15px rgba(218,112,214,0.4); border-color: #ff1493; }
}


/* ==========================================================================
   🌊 NEW CLEAN MINT OCEAN EDITION OVERRIDES (100% ANPASSUNG) 🌊
   ========================================================================== */

/* Eingabefelder, Listen, Protokolle & Blöcke im Meeres-Stil */
body.theme-mint textarea,
body.theme-mint input[type="number"],
body.theme-mint input[type="text"],
body.theme-mint input[type="password"],
body.theme-mint input[type="file"],
body.theme-mint select,
body.theme-mint .log-item,
body.theme-mint .stat-block,
body.theme-mint #cr-preview-container,
body.theme-mint #containerSection {
    background: #051b30 !important;
    color: #e6f1ff !important;
    border: 1px solid #103a61 !important;
}

body.theme-mint select option { background: #0a2540 !important; color: #e6f1ff !important; }
body.theme-mint .modal-content { background: #0a2540 !important; border: 2px solid #00f0ff !important; color: #e6f1ff !important; }

/* Alle Texte im Mint/Ocean Mode auf klares Meeres-Weiß umschalten */
body.theme-mint h1, body.theme-mint h2, body.theme-mint h3, body.theme-mint h4, 
body.theme-mint label, body.theme-mint strong, 
body.theme-mint .stat-grid div strong, body.theme-mint .trace-grid label {
    color: #e6f1ff !important;
}
body.theme-mint .subtitle, body.theme-mint .hint, body.theme-mint .unit-label, body.theme-mint .log-date {
    color: #8892b0 !important;
}

/* Ein- und Auslagerungsbuttons sowie Menüs in Meeres-Schattierungen */
body.theme-mint .btn-in { background: rgba(0, 240, 255, 0.1) !important; color: #00f0ff !important; border: 1px solid rgba(0, 240, 255, 0.3) !important; }
body.theme-mint .btn-out { background: rgba(255, 74, 116, 0.1) !important; color: #ff4a74 !important; border: 1px solid rgba(255, 74, 116, 0.3) !important; }
body.theme-mint .btn-primary { background: linear-gradient(135deg, #00f0ff, #0072ff) !important; color: #ffffff !important; }
body.theme-mint .btn-secondary { background: #103a61 !important; color: #64ffda !important; }
body.theme-mint .btn-danger { background: #ff4a74 !important; color: #ffffff !important; }
body.theme-mint .btn-cancel { background: #051b30 !important; color: #8892b0 !important; }

/* Highlights, Badges und Navigationsleisten */
body.theme-mint .stock { background: rgba(100, 255, 250, 0.15) !important; color: #64ffda !important; }
body.theme-mint .version-badge { background: rgba(0, 240, 255, 0.15) !important; color: #00f0ff !important; border: 1px solid #00f0ff !important; }
body.theme-mint .prognose-badge { background: rgba(0, 240, 255, 0.1) !important; color: #64ffda !important; }
body.theme-mint header { background: rgba(3, 20, 36, 0.85) !important; box-shadow: 0 1px 0 #103a61 !important; }
body.theme-mint .nav-menu { background: rgba(10, 37, 64, 0.96) !important; border-left: 1px solid #103a61 !important; }
body.theme-mint .nav-links button { background: #0a2540 !important; color: #8892b0 !important; }
body.theme-mint .nav-links button.active { background: #00f0ff !important; color: #031424 !important; }
body.theme-mint .cross-hint { color: #ff4a74 !important; }

/* Desktop Navigation Anpassung für Mint/Ocean Edition */
@media (min-width: 768px) {
    body.theme-mint .nav-menu { background: #0a2540 !important; border-bottom: 1px solid #103a61 !important; }
    body.theme-mint .nav-links button.active { background: rgba(0, 240, 255, 0.1) !important; color: #00f0ff !important; border-bottom: 3px solid #00f0ff !important; }
}

/* 🌊 AUTOMATISCHE OZEAN & SUBMARIN AKZENTE (Motto Emojis) 🐬 */
body.theme-mint header h1::before,
body.theme-mint header h1::after,
body.theme-mint .category-title::before,
body.theme-mint .category-title::after,
body.theme-mint .card h4 span::before,
body.theme-mint .stock span::before,
body.theme-mint .btn-in::before,
body.theme-mint .btn-out::before { content: none; }

/* 🧬 SPEZIAL: BIOLUMINESZENTER TIEFSEE-RAVE IM PARTY MODUS */
body.theme-mint.party-mode { 
    animation: oceanDiscoGradient 8s ease infinite !important; 
    background: linear-gradient(45deg, #020b14, #004e92, #000428, #00c6ff) !important;
    background-size: 400% 400% !important;
}
body.theme-mint.party-mode .card {
    background: rgba(5, 27, 48, 0.85) !important;
    border: 1px solid #00f0ff !important;
    animation: oceanRgbPulse 4s infinite alternate ease-in-out !important;
}
@keyframes oceanDiscoGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes oceanRgbPulse {
    0% { box-shadow: 0 0 15px rgba(0,240,255,0.2); border-color: #00f0ff; }
    100% { box-shadow: 0 0 20px rgba(100,255,218,0.4); border-color: #64ffda; }
}

/* --- NEUE FEATURES: SUCHE, WARNUNGEN & STATISTIK --- */

/* --- LAGER TOOLBAR (Premium Design) --- */
.lager-toolbar {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 6px;
    overflow: hidden;
}

.toolbar-field {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding: 0 4px;
    height: 44px;
    border-radius: 12px;
    transition: background 0.2s ease;
}
.toolbar-field:focus-within {
    background: rgba(255,255,255,0.04);
}
.toolbar-field-compact {
    flex: 0 0 auto;
}

.toolbar-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
    opacity: 0.5;
    padding-left: 6px;
}

.toolbar-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
    margin: 0 2px;
}

.search-input {
    flex: 1;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.9rem;
    margin: 0 !important;
    outline: none;
    min-width: 0;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
}
.search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.filter-select,
.forecast-select {
    flex: 1;
    padding: 0 28px 0 6px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.9rem;
    margin-bottom: 0;
    padding-left: 6px !important;
    outline: none;
    cursor: pointer;
    min-width: 0;
    height: 36px;
    line-height: 36px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23666' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}
.forecast-select {
    width: 110px;
    flex: none;
    text-align: center;
    padding: 0 20px 0 0;
    background-position: right 4px center;
}

@media (max-width: 767px) {
    .lager-toolbar {
        flex-direction: column;
        gap: 0;
        padding: 6px 0;
    }
    .toolbar-field {
        width: 100%;
        padding: 0 10px;
    }
    .toolbar-divider {
        width: calc(100% - 20px);
        height: 1px;
        margin: 4px 10px;
    }
    .toolbar-field-compact {
        flex: 1;
    }
    .forecast-select {
        width: 100%;
        flex: 1;
    }
}

.alert-summary {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--danger);
    color: var(--text);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.alert-summary.success {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    color: var(--success);
    font-weight: 500;
}

.alert-title {
    color: var(--danger);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    list-style: none;
}

.alert-title::-webkit-details-marker {
    display: none;
}

.alert-summary[open] .alert-title {
    margin-bottom: 8px;
}

.alert-summary-hint {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.alert-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.88rem;
}

@media (min-width: 680px) {
    .alert-row {
        grid-template-columns: 1fr auto auto;
    }
}

.alert-row small {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    margin-top: 2px;
}

.alert-reason {
    color: var(--danger);
    font-weight: 700;
}

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

.alert-actions button,
.disabled-alert-row button,
.custom-product-row button {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 0.78rem;
}

.item-hint {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
    margin-top: 4px;
}

.danger-text {
    color: var(--danger);
}

.notification-status {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.88rem;
    line-height: 1.4;
}

.notification-status[data-type="ok"] {
    color: var(--success);
    border-color: rgba(48, 209, 88, 0.35);
    background: rgba(48, 209, 88, 0.08);
}

.notification-status[data-type="warn"] {
    color: var(--danger);
    border-color: rgba(255, 69, 58, 0.35);
    background: rgba(255, 69, 58, 0.08);
}

.sync-auth-state {
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.035);
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.sync-auth-state[data-state="in"] {
    color: var(--success);
    border-color: rgba(48, 209, 88, 0.34);
    background: rgba(48, 209, 88, 0.08);
}

.sync-auth-state[data-state="out"] {
    color: var(--danger);
    border-color: rgba(255, 69, 58, 0.34);
    background: rgba(255, 69, 58, 0.08);
}

.password-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.password-field input {
    margin-bottom: 15px;
}

.password-field button {
    width: auto;
    margin-bottom: 15px;
    padding: 12px 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.06);
    color: var(--text);
    font-size: 0.82rem;
}

.sync-privacy-note,
.sync-password-recovery,
.sync-activation-note,
.share-active-warehouse-box {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.86rem;
    line-height: 1.4;
}

.sync-activation-note {
    color: var(--secondary);
    border-color: rgba(100, 210, 255, 0.34);
    background: rgba(100, 210, 255, 0.08);
    font-weight: 700;
}

.sync-maintenance-banner {
    display: grid;
    gap: 6px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid rgba(255, 69, 58, 0.28);
    border-radius: 12px;
    background: rgba(255, 69, 58, 0.1);
    color: #ffd2cc;
    font-size: 0.86rem;
    line-height: 1.45;
}

.sync-maintenance-banner strong {
    color: #fff3f0;
}

.sync-disabled-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.sync-disabled-card .sync-disabled-fieldset {
    opacity: 0.56;
    filter: saturate(0.82);
}

.storage-safety-card {
    border: 1px solid rgba(100, 210, 255, 0.24) !important;
    background:
        linear-gradient(135deg, rgba(100, 210, 255, 0.06), rgba(191, 90, 242, 0.04)),
        rgba(255,255,255,0.018) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

.storage-safety-title {
    color: var(--secondary);
    margin-bottom: 6px;
}

.storage-safety-actions {
    margin-top: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

.storage-safety-actions .btn,
.storage-safety-actions button {
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding-inline: 12px;
    font-size: 0.86rem;
    line-height: 1.15;
    white-space: normal;
}

.storage-safety-note {
    margin-top: 14px;
}

.storage-safety-status-shell {
    display: grid;
    gap: 12px;
}

.storage-recovery-warning {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--border));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--warning) 18%, transparent), rgba(255,255,255,0.03));
}

.storage-recovery-warning strong,
.storage-recovery-warning span {
    display: block;
}

.storage-recovery-warning strong {
    color: var(--text);
    font-size: 0.98rem;
}

.storage-recovery-warning span {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.storage-recovery-warning button {
    width: auto;
    white-space: nowrap;
}

.storage-safety-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}

.storage-safety-hero strong,
.storage-safety-hero small {
    display: block;
}

.storage-safety-hero strong {
    color: var(--text);
    font-size: 1rem;
}

.storage-safety-hero small {
    margin-top: 4px;
    color: var(--text-muted);
    line-height: 1.4;
}

.storage-safety-hero.is-ready {
    border-color: rgba(48, 209, 88, 0.24);
    background: linear-gradient(135deg, rgba(48, 209, 88, 0.1), rgba(100, 210, 255, 0.05));
}

.storage-safety-hero.is-warning {
    border-color: rgba(255, 214, 10, 0.3);
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.14), rgba(255,255,255,0.03));
}

.storage-safety-pill {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(100, 210, 255, 0.26);
    background: rgba(100, 210, 255, 0.1);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.storage-safety-pill.is-ready {
    border-color: rgba(48, 209, 88, 0.28);
    background: rgba(48, 209, 88, 0.12);
    color: var(--success);
}

.storage-safety-pill.is-warning {
    border-color: rgba(255, 214, 10, 0.3);
    background: rgba(255, 214, 10, 0.12);
    color: #ffd60a;
}

.storage-safety-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.storage-safety-status-card {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.028);
}

.storage-safety-status-card small,
.storage-safety-status-card strong,
.storage-safety-status-card span {
    display: block;
}

.storage-safety-status-card small {
    color: var(--text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.storage-safety-status-card strong {
    margin-top: 6px;
    color: var(--text);
    font-size: 0.98rem;
}

.storage-safety-status-card span {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}
.storage-snapshot-details {
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 12px;
}
.storage-snapshot-details summary {
    cursor: pointer;
    color: var(--secondary);
    font-weight: 700;
    list-style: none;
}
.storage-snapshot-details summary::-webkit-details-marker {
    display: none;
}
.storage-snapshot-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}
.storage-snapshot-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    align-items: center;
}
.storage-snapshot-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.storage-snapshot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.storage-snapshot-head strong {
    color: var(--text);
    font-size: 0.92rem;
}
.storage-snapshot-head span {
    flex-shrink: 0;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(100,210,255,0.16);
    background: rgba(100,210,255,0.08);
    color: var(--secondary);
    font-size: 0.72rem;
    font-weight: 700;
}
.storage-snapshot-copy small {
    color: var(--text-muted);
    line-height: 1.4;
}
.storage-snapshot-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.storage-snapshot-actions button {
    width: auto;
    min-width: 120px;
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.82rem;
    line-height: 1.1;
    white-space: nowrap;
}
.storage-snapshot-empty {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px dashed rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.02);
    display: grid;
    gap: 4px;
}
.storage-snapshot-empty strong {
    color: var(--text);
}
.storage-snapshot-empty span {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.data-safety-card,
.backup-project-card {
    border: 1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
        rgba(255,255,255,0.015);
}

.data-safety-card {
    display: grid;
    gap: 14px;
}

.data-safety-sections {
    display: grid;
    gap: 12px;
}

.data-safety-section {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-raised) 32%, transparent);
}

.data-safety-section[open] {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
        color-mix(in srgb, var(--surface-raised) 42%, transparent);
}

.data-safety-section-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
    list-style: none;
}

.data-safety-section-head::-webkit-details-marker {
    display: none;
}

.data-safety-section[open] > .data-safety-section-head .settings-chevron {
    transform: rotate(180deg);
}

.data-safety-section-body {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
}

.data-safety-section-head strong,
.data-safety-section-head small {
    display: block;
}

.data-safety-section-head strong {
    color: var(--text-primary);
    font-size: 0.98rem;
}

.data-safety-section-head small {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.35;
}

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

body.demo-profile-active {
    --accent: #ffb13b;
    --accent-strong: #ffd27a;
    --primary: #ffb13b;
    --primary-light: #ffd27a;
}

body.demo-profile-active::before {
    content: "DEMO-PROFIL AKTIV";
    position: fixed;
    z-index: 9998;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(var(--mobile-nav-height, 0px) + max(14px, env(safe-area-inset-bottom)));
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 184, 77, 0.54);
    color: #1c1200;
    background: linear-gradient(135deg, rgba(255, 215, 106, 0.96), rgba(255, 159, 26, 0.94));
    box-shadow: 0 14px 44px rgba(255, 159, 26, 0.24), 0 0 0 1px rgba(255,255,255,0.22) inset;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    pointer-events: none;
}

body.demo-profile-active header {
    background:
        linear-gradient(135deg, rgba(34, 20, 0, 0.92), rgba(21, 27, 32, 0.92)),
        var(--glass-bg);
    border-bottom-color: rgba(255, 184, 77, 0.34);
    box-shadow: 0 1px 0 rgba(255, 184, 77, 0.24), 0 16px 56px rgba(255, 159, 26, 0.1);
}

body.demo-profile-active .subtitle::after {
    content: "Demo-Daten - nicht dein echtes System";
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #ffd27a;
    background: rgba(255, 177, 59, 0.12);
    border: 1px solid rgba(255, 184, 77, 0.28);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

body.demo-profile-active :where(.card, .inventory-card, .dashboard-widget, .tool-section, .settings-card, .data-safety-card) {
    border-color: color-mix(in srgb, #ffb13b 18%, var(--border-color));
}

.demo-profile-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-color));
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%),
        color-mix(in srgb, var(--accent) 6%, var(--surface-card));
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.demo-profile-panel.is-active {
    border-color: color-mix(in srgb, var(--status-warning) 58%, var(--border-color));
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--status-warning) 20%, transparent), transparent 42%),
        color-mix(in srgb, var(--status-warning) 8%, var(--surface-card));
}

.demo-profile-panel strong,
.demo-profile-panel small {
    display: block;
}

.demo-profile-copy {
    min-width: 0;
}

.demo-profile-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 22px;
    margin-bottom: 7px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-color));
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.demo-profile-panel strong {
    color: var(--text-primary);
    font-size: clamp(1rem, 1.5vw, 1.22rem);
    line-height: 1.16;
}

.demo-profile-panel small {
    margin-top: 6px;
    color: var(--text-secondary);
    line-height: 1.45;
    overflow-wrap: normal;
}

.demo-profile-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.demo-profile-stats,
.demo-profile-features,
.demo-profile-quicknav {
    grid-column: 1 / -1;
}

.demo-profile-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.demo-profile-stats span {
    min-width: 0;
    padding: 10px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border-color));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface-elevated) 82%, transparent);
}

.demo-profile-stats strong {
    font-size: 1.06rem;
    color: var(--text-primary);
    line-height: 1;
}

.demo-profile-stats small {
    margin-top: 5px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.demo-profile-features {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.demo-profile-features span {
    min-height: 28px;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--surface-elevated) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
}

.demo-profile-quicknav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    padding-top: 2px;
}

.demo-profile-quicknav button {
    min-height: 38px;
    padding-inline: 8px;
    font-size: 0.76rem;
}

.backup-project-import {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 10px;
}

.backup-project-import input[type="file"] {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}

.google-drive-sync-card {
    border: 1px solid rgba(48, 209, 88, 0.18);
    background:
        linear-gradient(135deg, rgba(48, 209, 88, 0.05), rgba(10, 132, 255, 0.035)),
        rgba(255,255,255,0.018);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.google-drive-sync-card .data-safety-section-head strong {
    color: var(--success);
}

.google-drive-sync-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.google-drive-status-shell {
    display: grid;
    gap: 12px;
}

.google-drive-status-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}

.google-drive-status-hero strong,
.google-drive-status-hero small {
    display: block;
}

.google-drive-status-hero strong {
    font-size: 1rem;
    color: var(--text);
}

.google-drive-status-hero small {
    margin-top: 4px;
    color: var(--text-muted);
    line-height: 1.4;
}

.google-drive-status-hero.is-connected {
    border-color: rgba(48, 209, 88, 0.28);
    background: linear-gradient(135deg, rgba(48, 209, 88, 0.12), rgba(10, 132, 255, 0.06));
}

.google-drive-status-pill {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(48, 209, 88, 0.28);
    background: rgba(48, 209, 88, 0.12);
    color: var(--success);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.google-drive-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.google-drive-status-card {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.028);
}

.google-drive-status-card small,
.google-drive-status-card strong,
.google-drive-status-card span {
    display: block;
}

.google-drive-status-card small {
    color: var(--text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.google-drive-status-card strong {
    margin-top: 6px;
    color: var(--text);
    font-size: 0.98rem;
}

.google-drive-status-card span {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.google-drive-status-note {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(100, 210, 255, 0.14);
    background: rgba(100, 210, 255, 0.06);
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.45;
}

.is-disabled-soft {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
}

.google-drive-diagnostics {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 12px;
}

.google-drive-diagnostics summary {
    cursor: pointer;
    color: var(--secondary);
    font-weight: 700;
    list-style: none;
}

.google-drive-diagnostics summary::-webkit-details-marker {
    display: none;
}

.google-drive-diagnostics-body {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.google-drive-diagnostics-actions {
    display: flex;
    justify-content: flex-start;
}

.tool-card-lock-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.google-drive-sync-toggle {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.google-drive-sync-toggle span {
    display: grid;
    gap: 2px;
}

.google-drive-sync-toggle strong {
    font-size: 0.95rem;
}

.google-drive-sync-toggle small {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.google-drive-sync-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--success);
}

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

.pwa-install-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(100, 210, 255, 0.16);
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
}

.pwa-install-status strong,
.pwa-install-status small {
    display: block;
    min-width: 0;
}

.pwa-install-status strong {
    color: var(--text);
    font-size: 0.96rem;
    line-height: 1.25;
}

.pwa-install-status small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.pwa-install-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--warning);
    box-shadow: 0 0 0 6px rgba(255, 204, 0, 0.1);
}

.pwa-install-status.is-ready,
.pwa-install-status.is-installed {
    border-color: rgba(48, 209, 88, 0.28);
    background: linear-gradient(135deg, rgba(48, 209, 88, 0.10), rgba(100, 210, 255, 0.05));
}

.pwa-install-status.is-ready .pwa-install-dot,
.pwa-install-status.is-installed .pwa-install-dot {
    background: var(--success);
    box-shadow: 0 0 0 6px rgba(48, 209, 88, 0.12);
}

.pwa-install-status.is-blocked {
    border-color: rgba(255, 69, 58, 0.28);
    background: rgba(255, 69, 58, 0.08);
}

.pwa-install-status.is-blocked .pwa-install-dot {
    background: var(--danger);
    box-shadow: 0 0 0 6px rgba(255, 69, 58, 0.12);
}

.pwa-install-pill {
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--secondary);
    background: rgba(255,255,255,0.04);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

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

.pwa-install-actions button {
    width: auto;
    min-width: 180px;
}

.pwa-install-explain,
.pwa-install-help {
    display: grid;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.pwa-install-explain {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(100, 210, 255, 0.12);
    background: rgba(100, 210, 255, 0.045);
}

.pwa-install-explain strong,
.pwa-install-help strong {
    color: var(--text);
}

@media (max-width: 767px) {
    .pwa-install-status {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pwa-install-pill {
        grid-column: 2;
        justify-self: flex-start;
    }

    .pwa-install-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .pwa-install-actions button {
        width: 100%;
        min-width: 0;
    }

    .header-title-block {
        display: grid;
        gap: 8px;
    }

    .header-cloud-bar {
        width: 100%;
        align-items: center;
        flex-wrap: nowrap;
    }

    .header-sync-indicator {
        flex: 0 0 auto;
        padding: 5px 9px;
    }

    .header-sync-actions-wrap {
        flex: 0 0 auto;
    }

    .header-quick-sync-button {
        width: auto;
        min-width: 50px;
        padding: 5px 9px;
    }

    .header-quick-sync-menu {
        top: calc(100% + 8px);
        left: 0;
        right: auto;
        min-width: min(220px, calc(100vw - 48px));
        max-width: calc(100vw - 48px);
    }

    .header-sync-copy strong {
        font-size: 0.7rem;
    }

    .header-sync-copy small {
        font-size: 0.66rem;
    }

    .storage-safety-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
    }

    .storage-recovery-warning {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .storage-recovery-warning button {
        width: 100%;
        min-height: 38px;
        font-size: 0.82rem;
    }

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

    .storage-safety-status-card {
        padding: 10px;
        border-radius: 12px;
    }

    .storage-safety-status-card small {
        font-size: 0.64rem;
    }

    .storage-safety-status-card strong {
        font-size: 0.84rem;
    }

    .storage-safety-status-card span {
        font-size: 0.7rem;
        line-height: 1.25;
    }

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

    .storage-safety-actions .btn,
    .storage-safety-actions button {
        width: 100%;
        min-height: 38px;
        padding: 6px 8px;
        font-size: clamp(0.68rem, 2.9vw, 0.78rem);
        line-height: 1.08;
    }

    .storage-snapshot-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
    }

    .storage-snapshot-head {
        align-items: center;
        flex-direction: row;
        gap: 6px;
    }

    .storage-snapshot-head strong {
        font-size: 0.78rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storage-snapshot-head span {
        padding: 4px 6px;
        font-size: 0.62rem;
    }

    .storage-snapshot-copy small {
        font-size: 0.68rem;
        line-height: 1.25;
    }

    .storage-snapshot-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 8px;
    }

    .storage-snapshot-actions button {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        padding: 5px 7px;
        font-size: clamp(0.66rem, 2.8vw, 0.76rem);
        white-space: normal;
    }

    .google-drive-status-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .tool-card-lock-header {
        flex-direction: column;
        align-items: stretch;
    }

    .google-drive-status-grid {
        grid-template-columns: 1fr;
    }
}

.share-active-warehouse-box {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.share-active-warehouse-box strong {
    overflow-wrap: anywhere;
}

.share-active-warehouse-box span {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.share-active-warehouse-box[data-access="owner"] {
    border-color: rgba(48, 209, 88, 0.34);
}

.share-active-warehouse-box[data-access="read"] {
    border-color: rgba(255, 69, 58, 0.34);
}

.share-active-warehouse-box[data-access="write"] {
    border-color: rgba(100, 210, 255, 0.34);
}

.sync-privacy-note strong {
    display: block;
    margin-bottom: 4px;
}

.sync-privacy-note span {
    color: var(--text-muted);
}

.sync-password-recovery label {
    display: block;
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.sync-auto-row.sync-auto-active {
    border-color: rgba(48, 209, 88, 0.35) !important;
    background: rgba(48, 209, 88, 0.08) !important;
}

.sync-auto-row.sync-auto-active > span {
    color: var(--success);
}

.sync-friend-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    font-size: 0.88rem;
}

.sync-friend-row small {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 2px;
}

.sync-friend-row button {
    width: auto;
    padding: 8px 10px;
    font-size: 0.78rem;
}

.sync-friend-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.sync-friend-actions select {
    width: auto;
    min-width: 155px;
    margin-bottom: 0;
    padding: 8px 10px;
    font-size: 0.78rem;
}

.sync-friend-actions button {
    margin-bottom: 0;
}

.sync-subpanel {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
}

.sync-subpanel h4 {
    margin: 0 0 8px;
    color: var(--secondary);
}

.overview-group {
    margin-top: 10px;
}

.overview-group > strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
}

.overview-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.86rem;
}

.overview-row small {
    color: var(--text-muted);
    text-align: right;
}

.favorite-btn.active {
    color: #ffd60a;
}

.logbook-hero {
    border-color: rgba(100, 210, 255, 0.36) !important;
    background: linear-gradient(135deg, rgba(100,210,255,0.10), rgba(48,209,88,0.06)) !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    margin-bottom: 14px;
}

.logbook-hero h3 {
    margin-bottom: 4px;
}

.logbook-hero .hint {
    margin: 0;
}

.logbook-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(74px, 1fr));
    gap: 8px;
}

.logbook-metrics div {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    text-align: center;
}

.logbook-metrics strong {
    display: block;
    color: var(--secondary);
    font-size: 1.05rem;
    line-height: 1;
}

.logbook-metrics span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.logbook-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "measurement measurement"
        "document document"
        "category todo"
        "dosing osmose";
    gap: 16px;
    align-items: start;
}

.logbook-card {
    min-width: 0;
    width: 100%;
    padding: 16px;
    margin-bottom: 0;
}

.measurement-card { grid-area: measurement; }
.logbook-document-card { grid-area: document; }
.logbook-category-card { grid-area: category; }
.logbook-todo-card { grid-area: todo; }
.logbook-dosing-card { grid-area: dosing; }
.logbook-osmose-card { grid-area: osmose; }

.logbook-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.logbook-section-title h3 {
    margin: 0;
}

.logbook-section-title span {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--secondary);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.72rem;
    font-weight: 900;
}

.logbook-card .tool-grid {
    gap: 10px;
}

.logbook-card .input-group {
    margin-bottom: 10px;
}

.logbook-card textarea {
    min-height: 82px;
    resize: vertical;
}

.logbook-primary-action {
    margin-top: 2px;
    margin-bottom: 12px;
}

.logbook-card-details[open] {
    padding-bottom: 2px;
}

.logbook-card-details > .logbook-summary {
    margin: 0;
}

.logbook-card-body {
    margin-top: 12px;
}

.logbook-entry,
.todo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    margin-top: 8px;
}

.logbook-entry strong,
.todo-row strong {
    display: block;
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.22;
}

.logbook-entry small,
.todo-row small,
.logbook-entry p {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
    margin: 4px 0 0;
    line-height: 1.35;
}

.todo-row.due {
    border-color: rgba(255, 69, 58, 0.55);
    background: rgba(255, 69, 58, 0.08);
}

.todo-row.done {
    opacity: 0.58;
}

.logbook-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.logbook-actions button {
    width: auto;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: 0.74rem;
}

.logbook-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    font-weight: 900;
    color: var(--secondary);
    margin: 6px 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    transition: color 0.2s ease, background 0.2s ease;
}

.logbook-summary:hover {
    color: var(--primary);
    background: rgba(255, 255, 255, 0.03);
}

.logbook-summary::-webkit-details-marker {
    display: none;
}

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

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

.measurement-stats div,
.measurement-detail-card,
.measurement-chart-card,
.measurement-list-row,
.measurement-empty,
.dosing-container-row {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
}

.measurement-stats div {
    padding: 12px;
}

.measurement-stats strong {
    display: block;
    font-size: 0.98rem;
    color: var(--secondary);
}

.measurement-stats span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.measurement-chart-card,
.measurement-detail-card,
.measurement-empty {
    padding: 14px;
}

.measurement-chart-head,
.measurement-chart-meta,
.measurement-detail-actions,
.measurement-type-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.measurement-chart-head strong,
.measurement-detail-card strong,
.measurement-empty strong {
    display: block;
    font-size: 0.98rem;
}

.measurement-chart-head small,
.measurement-chart-meta span,
.measurement-detail-card small,
.measurement-empty p,
.measurement-list-button small {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.measurement-chart {
    width: 100%;
    height: 240px;
    margin: 10px 0 8px;
    overflow: visible;
}

.measurement-chart.compact {
    margin-inline: auto;
}

.measurement-axis {
    stroke: rgba(255,255,255,0.14);
    stroke-width: 1;
}

.measurement-grid-line {
    stroke: rgba(255,255,255,0.08);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.measurement-area {
    fill: url(#measurementFill);
}

.measurement-focus-line {
    stroke: color-mix(in srgb, var(--primary) 65%, white);
    stroke-width: 1.5;
    stroke-dasharray: 5 7;
    opacity: 0.7;
}

.measurement-line {
    fill: none;
    stroke: url(#measurementLineGlow);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 6px 14px rgba(10, 132, 255, 0.18));
}

.measurement-point-hit {
    fill: transparent;
    cursor: pointer;
}

.measurement-point-halo {
    fill: rgba(191, 90, 242, 0.08);
    opacity: 0;
    transform-origin: center;
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.measurement-point-ring {
    fill: rgba(255, 255, 255, 0.9);
    opacity: 0.9;
    transition: transform 0.24s ease, opacity 0.24s ease, fill 0.24s ease;
    transform-origin: center;
}

.measurement-point {
    fill: var(--secondary);
    stroke: color-mix(in srgb, var(--card-bg) 70%, white);
    stroke-width: 2;
    transition: transform 0.24s ease, fill 0.24s ease, stroke 0.24s ease;
    transform-origin: center;
}

.measurement-point-group {
    cursor: pointer;
}

.measurement-point-group.active .measurement-point-halo,
.measurement-point-group:hover .measurement-point-halo {
    opacity: 1;
    transform: scale(1.02);
}

.measurement-point-group.active .measurement-point-ring,
.measurement-point-group:hover .measurement-point-ring {
    fill: color-mix(in srgb, var(--primary) 24%, white);
    transform: scale(1.05);
}

.measurement-point-group.active .measurement-point,
.measurement-point-group:hover .measurement-point {
    fill: var(--primary);
    stroke: color-mix(in srgb, var(--primary) 38%, white);
    transform: scale(1.1);
}

.measurement-label {
    fill: var(--text-muted);
    font-size: 12px;
}

.measurement-y-label {
    fill: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.measurement-detail-value {
    margin: 6px 0 8px;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--text);
}

.measurement-detail-card p {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.measurement-list {
    display: grid;
    gap: 8px;
}

.measurement-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
}

.measurement-list-row.active {
    border-color: color-mix(in srgb, var(--primary) 46%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}

.community-map-card-shell {
    display: grid;
    gap: 14px;
}

.community-map-privacy,
.community-map-login-hint,
.community-map-request-card,
.community-member-row,
.community-map-location-box,
.community-map-visual {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.community-map-privacy,
.community-map-login-hint,
.community-map-request-card,
.community-map-location-box,
.community-map-visual {
    padding: 14px;
}

.community-map-layout,
.community-map-request-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 14px;
}

.community-map-form {
    display: grid;
    gap: 12px;
}

.community-map-surface {
    stroke: rgba(255,255,255,0.1);
    stroke-width: 1;
}

.community-map-svg {
    width: 100%;
    min-height: 320px;
}

.community-map-grid {
    stroke: rgba(255,255,255,0.08);
    stroke-width: 1;
}

.community-map-region,
.community-map-caption {
    fill: rgba(255,255,255,0.28);
    font-size: 14px;
    font-weight: 600;
    text-anchor: middle;
}

.community-map-caption {
    text-anchor: start;
    font-size: 13px;
}

.community-map-pin {
    cursor: pointer;
}

.community-map-pin-glow {
    fill: url(#communityPinGlow);
    opacity: 0;
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.community-map-pin-ring {
    fill: rgba(255,255,255,0.1);
    stroke: rgba(255,255,255,0.42);
    stroke-width: 1.3;
    transition: transform 0.24s ease, stroke 0.24s ease, fill 0.24s ease;
}

.community-map-pin-core {
    fill: var(--primary);
    stroke: rgba(255,255,255,0.82);
    stroke-width: 2;
    transition: transform 0.24s ease, fill 0.24s ease;
}

.community-map-pin-label {
    fill: var(--text);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    opacity: 0.78;
    transition: opacity 0.24s ease;
}

.community-map-pin.active .community-map-pin-glow,
.community-map-pin:hover .community-map-pin-glow {
    opacity: 1;
}

.community-map-pin.active .community-map-pin-ring,
.community-map-pin:hover .community-map-pin-ring,
.community-map-pin.active .community-map-pin-core,
.community-map-pin:hover .community-map-pin-core {
    transform: scale(1.06);
}

.community-map-pin.active .community-map-pin-label,
.community-map-pin:hover .community-map-pin-label {
    opacity: 1;
}

.community-map-pin.own .community-map-pin-core {
    fill: var(--secondary);
}

.community-member-list,
.community-request-list {
    display: grid;
    gap: 10px;
}

.community-member-row,
.community-request-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
}

.community-member-row.active {
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}

.community-member-main {
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--text);
}

.community-member-main strong,
.community-request-row strong {
    display: block;
}

.community-member-main small,
.community-request-row small,
.community-member-meta span {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.community-member-meta {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.community-own-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(10, 132, 255, 0.14);
    color: var(--secondary);
    font-weight: 700;
}

.community-request-row p {
    margin: 6px 0 0;
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.45;
}

.community-request-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.community-map-manual {
    margin-top: 10px;
}

.community-map-manual summary,
.community-map-outbox summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
}

.community-map-outbox {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 6px;
}

.measurement-list-button {
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text);
    text-align: left;
}

.measurement-list-button strong {
    display: block;
}

.measurement-empty p {
    margin: 8px 0 0;
}

.dosing-container-list {
    display: grid;
    gap: 10px;
}

.dosing-container-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
}

.dosing-container-row.warning {
    border-color: rgba(255, 69, 58, 0.55);
    background: rgba(255, 69, 58, 0.08);
}

.dosing-container-row strong {
    display: block;
    margin-bottom: 4px;
}

.dosing-container-row small {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.mini-progress {
    width: 100%;
    height: 8px;
    margin: 10px 0 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}

.mini-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
}

.interval-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 8px;
}

.interval-picker button {
    min-height: 40px;
    padding: 8px 6px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1.15;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.interval-picker button:hover {
    transform: translateY(-1px);
    border-color: var(--secondary);
    background: rgba(255, 255, 255, 0.1);
}

.interval-picker button.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.28), rgba(48, 209, 88, 0.2));
    color: #fff;
    box-shadow: 0 8px 22px rgba(10, 132, 255, 0.18);
}

#naclSolutionResult .tool-row > span:last-child {
    text-align: right;
    font-weight: 900;
}

@media (max-width: 820px) {
    .tool-grid,
    .resource-link-grid,
    .tool-card-grid {
        grid-template-columns: 1fr;
    }

    .tool-card-grid {
        padding: 10px;
    }

    .tool-section-summary {
        padding: 13px 14px;
    }

    .tool-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .tool-row > span:last-child {
        text-align: left;
    }

    .logbook-hero,
    .logbook-layout {
        grid-template-columns: 1fr;
    }

    .logbook-layout {
        grid-template-areas:
            "measurement"
            "document"
            "todo"
            "category"
            "dosing"
            "osmose";
    }

    .logbook-hero {
        padding: 14px;
    }

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

    .logbook-metrics div {
        padding: 9px 6px;
    }

    .logbook-card {
        padding: 14px;
    }

    .community-map-layout,
    .community-map-request-grid {
        grid-template-columns: 1fr;
    }

    .community-map-svg {
        min-height: 260px;
    }

    .community-member-row,
    .community-request-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .community-member-meta,
    .community-request-actions {
        justify-items: start;
        justify-content: flex-start;
    }

    .logbook-entry,
    .todo-row,
    .measurement-list-row,
    .dosing-container-row {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .logbook-actions {
        justify-content: stretch;
    }

    .logbook-actions button,
    .measurement-type-actions button,
    .measurement-detail-actions button {
        flex: 1;
    }

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

    .interval-picker button {
        min-height: 46px;
        font-size: 0.76rem;
        padding: 8px 5px;
    }

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

    .measurement-chart {
        height: 290px;
        margin: 12px 0 10px;
        width: 100%;
    }

    .measurement-chart-head,
    .measurement-chart-meta,
    .measurement-detail-actions,
    .measurement-type-actions {
        flex-direction: column;
        align-items: stretch;
    }

    #naclSolutionResult .tool-row > span:last-child {
        text-align: left;
    }
}

/* ==========================================================================
   REDESIGN FOUNDATION - APP SHELL, HEADER AND NAVIGATION
   ========================================================================== */

html,
body {
    overflow-x: clip;
}

#app,
.tab-content,
.tab-content > * {
    min-width: 0;
}

#app {
    width: min(var(--content-max), 100%);
}

.tab-content {
    width: 100%;
    max-width: var(--content-max);
    padding: var(--space-5) var(--space-4) var(--space-6);
}

#appHeader {
    min-height: var(--header-height);
    padding: calc(var(--space-3) + var(--safe-top)) var(--space-5) var(--space-3);
    background: color-mix(in srgb, var(--nav-bg) 94%, transparent);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-subtle);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.header-main {
    min-width: 0;
    gap: var(--space-3);
}

.header-title-block {
    min-width: 0;
    gap: var(--space-4);
}

.header-title-container {
    min-width: 0;
    gap: var(--space-2);
}

#appHeader h1 {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 1.12rem;
    font-weight: 720;
    letter-spacing: 0;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.version-badge {
    flex: 0 0 auto;
    padding: 3px 7px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-color));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-size: 0.68rem;
    line-height: 1.2;
    box-shadow: none;
}

.subtitle {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
    margin-top: 3px;
    color: var(--text-secondary);
    line-height: 1.2;
}

.subtitle span {
    font-size: 0.68rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.subtitle strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-cloud-bar {
    flex: 0 1 auto;
    gap: var(--space-2);
}

.header-sync-indicator,
.header-quick-sync-button {
    min-height: 36px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 74%, transparent);
    border-color: color-mix(in srgb, var(--border-color) 76%, transparent);
}

.header-sync-indicator:hover,
.header-quick-sync-button:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color));
    background: var(--surface-raised);
}

.header-quick-sync-menu {
    top: calc(100% + var(--space-2));
    min-width: 180px;
    padding: var(--space-2);
    border-color: var(--border-color);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--nav-bg) 96%, transparent);
    box-shadow: var(--shadow-overlay);
}

.header-quick-sync-menu button {
    min-height: 42px;
    border-radius: var(--radius-md);
}

.menu-toggle,
.close-menu {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.menu-toggle:hover,
.close-menu:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.menu-toggle .bar {
    width: 22px;
    height: 2px;
    background: var(--accent);
}

.nav-icon {
    display: block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    overflow: visible;
    pointer-events: none;
}

.nav-label,
.mobile-nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-menu {
    background: color-mix(in srgb, var(--nav-bg) 97%, transparent);
    border-color: var(--border-color);
}

.nav-links button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 46px;
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 620;
    line-height: 1.2;
    transition: color var(--transition-fast) ease, background-color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

.nav-links button:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
    border-color: color-mix(in srgb, var(--border-color) 70%, transparent);
}

.nav-links button.active,
.nav-links button[aria-current="page"] {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 13%, var(--surface-raised));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color));
    font-weight: 760;
    box-shadow: inset 3px 0 0 var(--accent);
}

.nav-menu-update-btn {
    min-height: 44px;
    border-radius: var(--radius-md);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--text-primary);
    font-size: 0.8rem;
}

.menu-backdrop {
    background: rgba(0, 10, 14, 0.58);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.theme-girl #appHeader,
body.theme-mint #appHeader,
body.theme-badman #appHeader,
body.theme-light #appHeader,
body.theme-girl .nav-menu,
body.theme-mint .nav-menu,
body.theme-badman .nav-menu,
body.theme-light .nav-menu {
    background: color-mix(in srgb, var(--nav-bg) 96%, transparent) !important;
    border-color: var(--border-color) !important;
}

body.theme-girl .nav-links button,
body.theme-mint .nav-links button,
body.theme-badman .nav-links button,
body.theme-light .nav-links button {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

body.theme-girl .nav-links button.active,
body.theme-mint .nav-links button.active,
body.theme-badman .nav-links button.active,
body.theme-light .nav-links button.active {
    color: var(--text-primary) !important;
    background: color-mix(in srgb, var(--accent) 13%, var(--surface-raised)) !important;
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color)) !important;
}

@media (max-width: 1023px) {
    body {
        padding-bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + var(--space-4));
    }

    #appHeader {
        top: 0;
        z-index: 1200;
        padding: calc(var(--space-2) + var(--safe-top)) var(--space-3) var(--space-2);
    }

    .header-main {
        align-items: flex-start;
    }

    .header-title-block {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        flex: 1 1 auto;
        gap: 5px;
    }

    .header-title-container {
        width: 100%;
    }

    .header-cloud-bar {
        width: 100%;
        overflow: visible;
    }

    .header-sync-indicator,
    .header-quick-sync-button {
        min-height: 32px;
        padding: 5px 8px;
    }

    .header-quick-sync-menu {
        left: 0;
        right: auto;
    }

    .subtitle {
        margin-top: 4px;
    }

    .menu-toggle {
        display: flex !important;
        flex: 0 0 44px;
        padding: 0;
    }

    .nav-menu {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 4001;
        display: flex;
        width: min(88vw, 340px);
        height: 100vh;
        height: 100dvh;
        padding: calc(var(--space-4) + var(--safe-top)) var(--space-4) calc(var(--space-4) + var(--safe-bottom));
        overflow: hidden;
        border: 0;
        border-left: 1px solid var(--border-color);
        border-bottom: 0;
        box-shadow: var(--shadow-overlay);
        transform: translateX(100%) !important;
        transition: transform var(--transition-base) var(--ease-standard);
    }

    .nav-menu.open {
        transform: translateX(0) !important;
    }

    .nav-menu-header {
        display: flex !important;
        flex: 0 0 auto;
        min-height: 52px;
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-3);
        border-color: var(--border-color);
        color: var(--text-secondary);
    }

    .close-menu {
        display: inline-flex !important;
    }

    .nav-links {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0 var(--space-1) var(--space-4) 0;
        gap: var(--space-2);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .nav-links button {
        flex: 0 0 auto;
        width: 100%;
        min-height: 50px;
        padding: 0 var(--space-4);
        text-align: left;
    }

    .nav-menu-utility {
        display: block;
        flex: 0 0 auto;
        margin-top: var(--space-2);
        padding-top: var(--space-3);
        padding-bottom: max(var(--space-1), var(--safe-bottom));
        border-color: var(--border-color);
    }

    .menu-backdrop {
        z-index: 4000;
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }

    .menu-backdrop.open {
        display: block !important;
    }

    .tab-content {
        padding: var(--space-4) var(--space-3) calc(var(--mobile-nav-height) + var(--safe-bottom) + var(--space-5));
    }

    .mobile-bottom-nav {
        position: fixed;
        inset: auto 0 0;
        z-index: 3000;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-1);
        min-height: calc(var(--mobile-nav-height) + var(--safe-bottom));
        padding: 6px 8px calc(6px + var(--safe-bottom));
        border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
        background: color-mix(in srgb, var(--nav-bg) 94%, transparent);
        box-shadow: 0 -8px 26px rgba(0, 8, 12, 0.2);
        backdrop-filter: blur(18px) saturate(1.08);
        -webkit-backdrop-filter: blur(18px) saturate(1.08);
    }

    .mobile-bottom-nav button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        min-height: 58px;
        padding: 5px 2px;
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--text-secondary);
        font-size: 0.66rem;
        font-weight: 680;
        line-height: 1.1;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav button .nav-icon {
        width: 21px;
        height: 21px;
    }

    .mobile-bottom-nav button.active,
    .mobile-bottom-nav button[aria-current="page"] {
        color: var(--text-primary);
        background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised));
        border-color: color-mix(in srgb, var(--accent) 28%, transparent);
        box-shadow: inset 0 -3px 0 var(--accent);
    }

    body.menu-open .mobile-bottom-nav {
        display: none !important;
    }

    .toast-container {
        bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + var(--space-3));
    }
}


@media (max-width: 420px) {
    #appHeader h1 {
        font-size: 1rem;
    }

    .header-sync-copy strong {
        display: none;
    }

    .header-sync-copy small {
        max-width: 82px;
    }

    .header-sync-indicator {
        gap: 6px;
    }

    .mobile-bottom-nav button {
        font-size: 0.62rem;
    }
}

@media (min-width: 1024px) {
    body {
        display: grid;
        grid-template-columns: var(--nav-width) minmax(0, 1fr);
        align-content: start;
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: 0;
    }

    #main-nav {
        grid-column: 1;
        grid-row: 1 / span 50;
        position: sticky;
        top: 0;
        z-index: 1100;
        display: flex;
        width: var(--nav-width);
        height: 100vh;
        height: 100dvh;
        padding: var(--space-5) var(--space-3) var(--space-4);
        overflow: hidden;
        border: 0;
        border-right: 1px solid var(--border-color);
        background: var(--nav-bg);
        box-shadow: none;
        transform: none !important;
        backdrop-filter: none;
    }

    #appHeader,
    #update-banner,
    #app,
    .app-footer,
    .legacy-domain-banner {
        grid-column: 2;
    }

    #appHeader {
        top: 0;
        z-index: 1000;
        width: 100%;
    }

    .nav-menu-header {
        display: flex !important;
        flex: 0 0 auto;
        min-height: 48px;
        margin-bottom: var(--space-4);
        padding: 0 var(--space-2) var(--space-3);
        color: var(--text-secondary);
        border-color: var(--border-color);
        font-size: 0.78rem;
        font-weight: 760;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .close-menu,
    .menu-toggle,
    .menu-backdrop,
    .mobile-bottom-nav {
        display: none !important;
    }

    .nav-links {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0 var(--space-1) var(--space-3) 0;
        gap: var(--space-1);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-links button {
        flex: 0 0 auto;
        width: 100%;
        padding: 0 var(--space-3);
        text-align: left;
        border-radius: var(--radius-md);
    }

    .nav-links button.active,
    .nav-links button[aria-current="page"] {
        border-bottom-width: 1px;
    }

    .nav-menu-utility {
        display: block;
        flex: 0 0 auto;
        margin-top: var(--space-2);
        padding-top: var(--space-3);
        border-color: var(--border-color);
    }

    #app {
        width: min(var(--content-max), 100%);
        margin: 0 auto;
    }

    .tab-content {
        padding: var(--space-5) var(--space-6) var(--space-7);
    }

    .app-footer {
        width: 100%;
    }
}

@media (max-width: 1023px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    .toast-container {
        right: 12px;
        bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + 12px);
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }
}

/* Stock dialog component details */
.modal-container-options {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 42%, transparent);
}
.modal-container-options[hidden],
.modal-container-options select[hidden] { display: none !important; }
.modal-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: var(--text-primary);
    font-weight: 700;
}
.modal-container-options select { margin: var(--space-2) 0 0; }
.modal-field-group { margin-top: var(--space-3); }
.modal-live-conversion,
.modal-stock-preview {
    min-height: 1.4rem;
    margin-top: calc(var(--space-2) * -1);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.4;
    text-align: center;
}
.modal-live-conversion { color: var(--secondary); }
.modal-current-stock { margin-top: var(--space-3); }
.modal-action-group,
.modal-action-submit { margin-top: var(--space-3); }
.modal-action-hint { margin-top: var(--space-2); }

@media (pointer: coarse) {
    :where(button, summary, select, input:not([type="hidden"]), textarea, a.btn-primary, a.btn-secondary) {
        min-height: 44px;
    }
}

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

/* Mobile width safety: every page surface may shrink to the actual device width. */
:where(
    .tab-content,
    .tab-content > *,
    .tools-shell,
    .tools-shell > *,
    .tools-hub-card,
    .tools-command-bar,
    .tool-section,
    .tool-section > *,
    .tool-card-grid,
    .tool-tile-card,
    .aquarium-workspace-panel,
    .aquarium-workspace-head,
    .aquarium-workspace-select,
    .logbook-layout,
    .settings-sections,
    .settings-accordion,
    .settings-accordion-body,
    .dashboard-panel,
    .dashboard-list-row,
    .warehouse-control-card,
    .warehouse-filter-panel
) {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 767px) {
    #tools .aquarium-workspace-panel {
        width: 100%;
        padding: 12px;
        overflow: hidden;
    }

    #tools .aquarium-workspace-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    #tools .aquarium-workspace-head > div:first-child,
    #tools .aquarium-workspace-select,
    #tools .aquarium-workspace-select select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    #tools .aquarium-workspace-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
        min-width: 0;
    }

    #tools .aquarium-workspace-actions button {
        width: 100%;
        min-width: 0;
        padding: 8px 5px;
        font-size: clamp(0.68rem, 3vw, 0.78rem);
    }

    #tools .tool-section-summary > span:first-child {
        flex: 1 1 auto;
        width: 0;
        min-width: 0;
        max-width: calc(100% - 40px);
        overflow: hidden;
    }

    #tools .tool-section-summary > span:first-child > strong,
    #tools .tool-section-summary > span:first-child > small {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .settings-accordion-body > *,
    .google-drive-status-shell,
    .google-drive-diagnostics,
    .google-drive-diagnostics-body,
    .google-drive-diagnostics-body > *,
    .google-drive-diagnostics-actions {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .dashboard-list-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 6px 10px;
    }

    .dashboard-list-row > span,
    .dashboard-list-row > em {
        min-width: 0;
    }
}

@media (max-width: 390px) {
    .dashboard-list-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-list-row > em {
        justify-self: start;
        font-size: 0.78rem;
    }

    .dashboard-panel .dashboard-list-row {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .dashboard-panel .dashboard-list-row > em {
        justify-self: start;
    }

    #menu-order-settings .btn,
    #menu-order-settings button {
        width: 100%;
        min-width: 0;
        padding-inline: 8px;
        white-space: normal !important;
        font-size: 0.72rem !important;
        line-height: 1.25;
    }

    .google-drive-diagnostics-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .google-drive-diagnostics-actions button {
        width: 100%;
        min-width: 0;
    }

    #coralForm label,
    .logbook-card label {
        font-size: 0.76rem;
        line-height: 1.25;
        white-space: normal;
    }
}

@media (max-width: 600px) {
    .measurement-chart-card,
    .measurement-detail-card,
    .measurement-empty {
        padding: 12px;
    }

    .measurement-stats {
        grid-template-columns: 1fr;
    }

    .measurement-chart {
        height: 300px;
        margin: 12px 0 10px;
        width: 100%;
    }

    .measurement-chart-head strong,
    .measurement-detail-card strong,
    .measurement-empty strong {
        font-size: 0.94rem;
    }

    .measurement-chart-head small,
    .measurement-chart-meta span,
    .measurement-detail-card small,
    .measurement-empty p,
    .measurement-list-button small {
        font-size: 0.74rem;
    }

    .measurement-detail-value {
        font-size: 1.25rem;
    }

    .sync-friend-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sync-friend-actions {
        justify-content: stretch;
    }

    .sync-friend-actions select,
    .sync-friend-actions button {
        flex: 1;
    }
}

.disabled-alert-products,
.custom-products-list {
    margin-top: 12px;
}

.disabled-alert-title {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.disabled-alert-row,
.custom-product-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--border);
    font-size: 0.86rem;
}
@media (max-width: 600px) {
    .disabled-alert-row,
    .custom-product-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

.custom-product-row small {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 2px;
}

.visibility-group {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 12px;
}

.visibility-group strong {
    display: block;
    margin-bottom: 8px;
    color: var(--secondary);
}

.visibility-row {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 7px 0;
    color: var(--text);
    font-size: 0.86rem;
}

.visibility-row input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.visibility-row small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.tool-result {
    background: linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px;
    margin: 12px 0 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.nutrition-tool-layout {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.nutrition-panel {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
}

.nutrition-panel-head {
    display: grid;
    gap: 3px;
}

.nutrition-panel-head strong {
    color: var(--text-primary);
    font-size: 0.96rem;
    line-height: 1.12;
}

.nutrition-panel-head small {
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.35;
}

.nutrition-status-grid,
.nutrition-dose-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.nutrition-dose-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nutrition-status-card,
.nutrition-dose-grid .input-group {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.nutrition-status-card span,
.nutrition-dose-grid .input-group > span {
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 720;
}

.nutrition-dose-grid .input-group small {
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.15;
}

.nutrition-status-card select,
.nutrition-dose-grid :is(select, input) {
    min-height: 40px;
}

.nutrition-dose-grid .nutrition-carbon-dose input {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    color: var(--text-primary);
    opacity: 1;
}

.nutrition-dose-grid .nutrition-carbon-dose small {
    color: var(--accent);
    font-weight: 760;
}

.nutrition-advice-card {
    display: grid;
    gap: 7px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
}

.nutrition-advice-kicker {
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 800;
}

.nutrition-advice-card strong {
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.1;
}

.nutrition-advice-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.42;
}

.nutrition-advice-products {
    width: fit-content;
    max-width: 100%;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font-weight: 800;
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.nutrition-dose-result .tool-row > span:last-child {
    display: grid;
    gap: 2px;
    justify-items: end;
}

.nutrition-dose-result .tool-row > span:last-child small {
    margin: 0;
    font-size: 0.68rem;
}

.sea-water-trace-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-3);
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border-color));
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%),
        color-mix(in srgb, var(--accent) 8%, var(--surface-raised));
    box-shadow: inset 4px 0 0 var(--accent), var(--shadow-sm);
}

.sea-water-trace-note__marker {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent, #fff);
    font-weight: 900;
    line-height: 1;
}

.sea-water-trace-note__content {
    min-width: 0;
}

.sea-water-trace-note__content strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.98rem;
    margin-bottom: 4px;
}

.sea-water-trace-note__content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}

.sea-water-trace-note__content b {
    color: var(--text-primary);
}

.sea-water-trace-note__dose {
    display: grid;
    gap: 3px;
    justify-items: end;
    min-width: 132px;
    padding: 9px 11px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 13%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.sea-water-trace-note__dose span {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 760;
    text-transform: uppercase;
}

.sea-water-trace-note__dose strong {
    color: var(--text-primary);
    font-size: 0.86rem;
    text-align: right;
}

.sea-water-package-settings {
    margin: var(--space-3) 0;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-color));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
    overflow: hidden;
}

.sea-water-package-settings > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
}

.sea-water-package-settings > summary strong,
.sea-water-package-settings > summary small {
    display: block;
    min-width: 0;
}

.sea-water-package-settings > summary small {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.3;
}

.sea-water-package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
}

.sea-water-package-grid label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.sea-water-package-grid label > span {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.sea-water-package-grid select {
    width: 100%;
    min-width: 0;
}

@media (max-width: 820px) {
    .nutrition-dose-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .nutrition-status-grid,
    .nutrition-dose-grid {
        grid-template-columns: 1fr;
    }
    .sea-water-trace-note {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .sea-water-trace-note__dose {
        grid-column: 1 / -1;
        justify-items: start;
        min-width: 0;
    }
    .sea-water-trace-note__dose strong {
        text-align: left;
    }
    .sea-water-package-grid {
        grid-template-columns: 1fr;
    }
}

.tools-shell {
    display: grid;
    gap: 14px;
}

.tools-command-bar {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,0.025);
}

.tool-global-disclaimer {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border));
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.tool-global-disclaimer strong {
    color: var(--text);
}

.tool-global-disclaimer span {
    color: var(--text-muted);
    line-height: 1.45;
}

.tools-search-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    padding: 0 12px;
}

.tools-search-wrap span {
    color: var(--secondary);
    font-size: 1.15rem;
    line-height: 1;
}

.tools-search-wrap input {
    border: 0;
    background: transparent;
    margin: 0;
    padding: 12px 0;
    min-height: 44px;
}

.tools-search-wrap input:focus {
    outline: none;
    box-shadow: none;
}

.tool-favorites-panel {
    display: grid;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    padding: 12px;
}

.tool-favorites-head {
    display: grid;
    gap: 3px;
}

.tool-favorites-head strong {
    color: var(--text);
    font-size: 0.98rem;
}

.tool-favorites-head small,
.tools-favorites-empty {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.tool-favorites-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 34px;
    align-items: center;
}

.tool-experimental-banner {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 140, 70, 0.35);
    border-radius: 12px;
    background: rgba(255, 140, 70, 0.08);
}

.tool-experimental-banner strong {
    color: #ffb26b;
    font-size: 0.92rem;
}

.tool-experimental-banner span {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.custom-cr-protected-content[hidden],
#customCrLockState[hidden] {
    display: none !important;
}

.custom-cr-result-shell {
    display: grid;
    gap: 14px;
}

.custom-cr-overview-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(191, 90, 242, 0.05));
}

.custom-cr-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.custom-cr-metric {
    display: grid;
    gap: 3px;
    padding: 12px 13px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
}

.custom-cr-metric small {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.custom-cr-metric strong {
    color: var(--secondary);
    font-size: 1rem;
    line-height: 1.2;
}

.custom-cr-metric span {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

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

.custom-cr-section-head {
    display: grid;
    gap: 2px;
}

.custom-cr-section-head strong {
    font-size: 0.96rem;
}

.custom-cr-section-head small {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.custom-cr-topline {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(191, 90, 242, 0.12), rgba(10, 132, 255, 0.08));
}

.custom-cr-topline strong {
    font-size: 0.98rem;
}

.custom-cr-topline span {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.custom-cr-matrix-headline {
    display: grid;
    gap: 2px;
    margin: 10px 0 8px;
}

.custom-cr-matrix-headline strong {
    font-size: 0.96rem;
}

.custom-cr-matrix-headline small {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.custom-cr-limits-shell {
    display: grid;
    gap: 10px;
    margin: 8px 0 14px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    overflow: hidden;
}

.custom-cr-collapsible-head {
    list-style: none;
    cursor: pointer;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.custom-cr-collapsible-head::-webkit-details-marker {
    display: none;
}

.custom-cr-collapsible-head::after {
    content: '+';
    color: var(--secondary);
    font-weight: 800;
    font-size: 1rem;
}

.custom-cr-limits-shell[open] .custom-cr-collapsible-head::after {
    content: '−';
}

.custom-cr-limits-grid {
    display: grid;
    grid-template-columns: minmax(78px, 0.9fr) repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: center;
    padding: 0 14px 14px;
}

.custom-cr-limits-header {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.custom-cr-limits-label {
    display: grid;
    gap: 2px;
}

.custom-cr-limits-label strong {
    font-size: 0.9rem;
}

.custom-cr-limits-label small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.custom-cr-limits-grid input {
    width: 100%;
}

.custom-cr-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.custom-cr-product-chip {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
}

.custom-cr-product-chip.missing {
    border-color: rgba(255, 69, 58, 0.42);
    background: rgba(255, 69, 58, 0.08);
}

.custom-cr-product-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.custom-cr-product-head strong {
    font-size: 0.95rem;
}

.custom-cr-product-head span {
    color: var(--secondary);
    font-weight: 800;
    font-size: 0.88rem;
    text-align: right;
}

.custom-cr-product-chip small {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.custom-cr-product-list {
    display: grid;
    gap: 8px;
}

.custom-cr-product-line {
    display: grid;
    grid-template-columns: minmax(70px, auto) minmax(0, auto);
    gap: 8px 10px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
}

.custom-cr-product-line.missing {
    border-color: rgba(255, 69, 58, 0.42);
    background: rgba(255, 69, 58, 0.08);
}

.custom-cr-product-line strong {
    font-size: 0.9rem;
}

.custom-cr-product-line span {
    color: var(--secondary);
    font-weight: 800;
    font-size: 0.84rem;
    text-align: right;
}

.custom-cr-product-line small {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: left;
    grid-column: 1 / -1;
}

.custom-cr-delta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 9px;
}

.custom-cr-delta-pill {
    display: grid;
    gap: 3px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.025);
}

.custom-cr-delta-pill strong {
    font-size: 0.9rem;
}

.custom-cr-delta-pill span {
    color: var(--text);
    font-size: 0.78rem;
    line-height: 1.35;
}

.custom-cr-delta-pill small {
    color: var(--secondary);
    font-size: 0.74rem;
    font-weight: 700;
}

.custom-cr-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.custom-cr-plan-step-card {
    display: grid;
    gap: 8px;
}

.custom-cr-plan-chip {
    display: grid;
    gap: 3px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.028);
}

.custom-cr-plan-chip strong {
    font-size: 0.9rem;
}

.custom-cr-plan-chip span,
.custom-cr-plan-chip small {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.custom-cr-step-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 7px;
}

.custom-cr-step-value-pill {
    display: grid;
    gap: 2px;
    padding: 8px 9px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.022);
}

.custom-cr-step-value-pill strong {
    font-size: 0.76rem;
}

.custom-cr-step-value-pill span {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.custom-cr-remaining-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.custom-cr-remaining-chip {
    display: grid;
    gap: 2px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.025);
}

.custom-cr-remaining-chip strong {
    font-size: 0.88rem;
}

.custom-cr-remaining-chip span {
    color: var(--secondary);
    font-size: 0.77rem;
    font-weight: 700;
}

.custom-cr-saved-plans {
    display: grid;
    gap: 12px;
}

.custom-cr-saved-plan {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.025);
    overflow: hidden;
}

.custom-cr-saved-plan summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    padding: 14px 16px;
}

.custom-cr-saved-plan summary::-webkit-details-marker {
    display: none;
}

.custom-cr-saved-plan summary span {
    display: grid;
    gap: 3px;
}

.custom-cr-saved-plan summary strong {
    font-size: 0.95rem;
}

.custom-cr-saved-plan summary small,
.custom-cr-plan-target {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.custom-cr-saved-plan-body {
    display: grid;
    gap: 12px;
    padding: 0 16px 16px;
}

.custom-cr-step-list {
    display: grid;
    gap: 10px;
}

.custom-cr-step-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
}

.custom-cr-step-card.done {
    border-color: rgba(52, 199, 89, 0.34);
    background: rgba(52, 199, 89, 0.08);
}

.custom-cr-step-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.custom-cr-step-head strong {
    font-size: 0.92rem;
}

.custom-cr-step-head small {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.custom-cr-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text);
}

.custom-cr-check input {
    width: 18px;
    height: 18px;
}

.custom-cr-step-products {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.custom-cr-step-products span {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
    font-size: 0.74rem;
}

.custom-cr-step-actions {
    display: flex;
    justify-content: flex-start;
}

.custom-cr-matrix {
    display: grid;
    grid-template-columns: minmax(76px, 0.9fr) repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: center;
    margin: 14px 0 16px;
}

.custom-cr-matrix-header {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.custom-cr-matrix-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.custom-cr-matrix-label strong {
    font-size: 0.98rem;
}

.custom-cr-matrix-label small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.custom-cr-matrix input {
    width: 100%;
    min-width: 0;
}

.tool-favorite-item {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.055);
}

.tool-favorite-open,
.tool-favorite-remove {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    width: auto;
    min-height: 34px;
    cursor: pointer;
}

.tool-favorite-open {
    padding: 7px 10px;
    font-size: 0.82rem;
    font-weight: 900;
}

.tool-favorite-remove {
    padding: 0 10px;
    border-left: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 900;
}

.tool-favorite-item:hover {
    border-color: var(--secondary);
}

.tool-favorite-open:hover,
.tool-favorite-remove:hover {
    color: var(--secondary);
}

.tool-favorites-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.tool-favorites-add select {
    margin: 0;
}

.tool-favorites-add button {
    width: auto;
    min-height: 44px;
    padding: 0 14px;
}

.tool-inline-fav {
    margin-left: auto;
    position: relative;
    z-index: 3;
    width: auto;
    min-height: 30px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    padding: 0 10px;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}

.tool-inline-fav.active {
    color: #ffd166;
    border-color: rgba(255, 209, 102, 0.58);
    background: rgba(255, 209, 102, 0.13);
}

.tool-inline-fav:hover {
    border-color: var(--secondary);
    color: var(--secondary);
}

.tool-info-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    margin-left: 4px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 12%, var(--border));
    border-radius: 50%;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035)),
        color-mix(in srgb, var(--surface-raised) 52%, transparent);
    color: color-mix(in srgb, var(--text-primary) 86%, var(--secondary));
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    font-size: 0;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    position: relative;
    z-index: 4;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 8px 18px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease;
}

.tool-info-button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(50% - 6px);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    transform: translateX(-50%);
    pointer-events: none;
}

.tool-info-button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(50% - 1px);
    width: 3px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    transform: translateX(-50%);
    pointer-events: none;
}

.tool-info-button:hover,
.tool-info-button:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--secondary) 46%, var(--border));
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.055)),
        color-mix(in srgb, var(--secondary) 14%, var(--surface-raised));
    color: var(--secondary);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 10px 24px color-mix(in srgb, var(--secondary) 18%, transparent);
    outline: none;
}

.tool-info-button:active {
    transform: translateY(0) scale(0.96);
}

.tool-title-text {
    min-width: 0;
}

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

.tool-info-dialog-badge {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--secondary) 42%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary) 12%, transparent);
    color: var(--secondary);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tool-info-dialog-summary {
    margin: 0;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 750;
    line-height: 1.45;
}

.tool-info-dialog-block,
.tool-info-dialog-note {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.tool-info-dialog-block strong,
.tool-info-dialog-note strong {
    color: var(--text);
}

.tool-info-dialog-block p,
.tool-info-dialog-note p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.45;
}

.tool-info-dialog-note {
    border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
    background: color-mix(in srgb, var(--warning) 8%, transparent);
}

.tool-card-hidden,
.tool-section-hidden {
    display: none !important;
}

.tool-experimental-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 209, 102, 0.34);
    color: #ffd166;
    background: rgba(255, 209, 102, 0.1);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.74rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.tool-section {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
}

.tool-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    background: rgba(255, 255, 255, 0.035);
}

.tool-section-summary::-webkit-details-marker {
    display: none;
}

.tool-section-summary strong,
.tool-section-summary small {
    display: block;
}

.tool-section-summary strong {
    color: var(--text);
    font-size: 1rem;
}

.tool-section-summary small {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 3px;
    line-height: 1.35;
}

.tools-hub-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(191, 90, 242, 0.05)),
        rgba(255,255,255,0.025);
}

.tools-hub-head h3 {
    margin-bottom: 6px;
}

.sangokai-search-card {
    display: grid;
    gap: 12px;
    margin: 12px 0 14px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-raised) 34%, transparent);
}

.sangokai-search-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.sangokai-search-head strong,
.sangokai-search-head span,
.sangokai-search-head small {
    display: block;
}

.sangokai-search-head span,
.sangokai-search-head small {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.sangokai-search-head small {
    text-align: right;
    max-width: 280px;
}

.sangokai-beta-note {
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--status-warning) 42%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--status-warning) 10%, transparent);
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.4;
}

.sangokai-search-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.sangokai-search-result,
.sangokai-answer,
.sangokai-match-list {
    display: grid;
    gap: 10px;
}

.sangokai-answer,
.sangokai-match {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
}

.sangokai-answer {
    padding: 12px;
}

.sangokai-answer[data-confidence="high"] {
    border-color: color-mix(in srgb, var(--status-success) 42%, var(--border));
    background: color-mix(in srgb, var(--status-success) 8%, transparent);
}

.sangokai-answer[data-confidence="medium"] {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}

.sangokai-answer-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sangokai-answer-kicker span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 800;
}

.sangokai-answer-kicker small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.sangokai-answer strong {
    color: var(--secondary);
}

.sangokai-answer p,
.sangokai-match p {
    margin: 0;
    color: var(--text);
    line-height: 1.45;
}

.sangokai-answer small,
.sangokai-match summary small {
    color: var(--text-muted);
}

.sangokai-answer-empty {
    border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
    background: color-mix(in srgb, var(--warning) 8%, transparent);
}

.sangokai-match {
    overflow: hidden;
}

.sangokai-match summary {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--text);
    list-style: none;
}

.sangokai-match summary::-webkit-details-marker {
    display: none;
}

.sangokai-match p {
    padding: 0 12px 12px;
    color: var(--text-muted);
}

@media (max-width: 767px) {
    .sangokai-search-head,
    .sangokai-answer-kicker {
        align-items: flex-start;
        flex-direction: column;
    }

    .sangokai-search-head small {
        max-width: none;
        text-align: left;
    }

    .sangokai-search-controls {
        grid-template-columns: 1fr;
    }

    .sangokai-search-controls button {
        width: 100%;
    }
}

.tool-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
}

.tool-compact-card {
    margin: 0;
    padding: 14px;
}

.tool-compact-card h3 {
    margin-bottom: 6px;
}

.tool-tile-card {
    position: relative;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.tool-tile-card > h3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    min-width: 0;
}

.tool-tile-card.tool-tile-collapsed {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "title"
        "hint";
    gap: 4px;
    align-items: center;
    padding: 14px;
    min-height: 84px;
    border-radius: 16px;
    cursor: pointer;
}

.tool-tile-card.tool-tile-collapsed:hover {
    transform: translateY(-1px);
    border-color: rgba(100, 210, 255, 0.34);
    background: rgba(255,255,255,0.045);
}

.tool-tile-card.tool-tile-collapsed > *:not(h3):not(.hint) {
    display: none !important;
}

.tool-tile-card.tool-tile-collapsed > h3 {
    grid-area: title;
    width: 100%;
    font-size: clamp(0.82rem, 2.8vw, 0.98rem);
    line-height: 1.14;
    margin: 0;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    display: flex;
    overflow: visible;
}

.tool-tile-card.tool-tile-collapsed > h3 .tool-inline-fav {
    display: none !important;
}

.tool-tile-card.tool-tile-collapsed > h3 .tool-title-text {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tool-tile-card.tool-tile-collapsed > h3 .tool-info-button {
    margin-left: auto;
}

.tool-tile-card.tool-tile-collapsed > .hint {
    grid-area: hint;
    display: block !important;
    margin: 0;
    color: var(--text-muted);
    font-size: clamp(0.68rem, 2.25vw, 0.78rem);
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    min-width: 0;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-compact-card .hint {
    margin-bottom: 12px;
}

.tool-tile-card:not(.tool-tile-collapsed) {
    grid-column: 1 / -1;
}

.tool-compact-card textarea {
    min-height: 76px;
    resize: vertical;
}

@media (min-width: 821px) {
    #tools {
        max-width: 1220px;
        margin: 0 auto;
    }

    #tools .tools-shell {
        gap: 18px;
    }

    #tools .tools-hub-card {
        padding: 18px;
    }

    #tools .tool-section {
        border-radius: 16px;
        background:
            linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
            var(--card-bg);
        box-shadow: 0 14px 38px rgba(0,0,0,0.16);
    }

    #tools .tool-section[open] {
        border-color: color-mix(in srgb, var(--secondary) 34%, var(--border));
    }

    #tools .tool-section-summary {
        padding: 17px 20px;
        min-height: 76px;
    }

    #tools .tool-section-summary strong {
        font-size: 1.08rem;
    }

    #tools .tool-section-summary small {
        font-size: 0.84rem;
    }

    #tools .tool-card-grid {
        grid-template-columns: repeat(3, minmax(230px, 1fr));
        align-items: start;
        gap: 14px;
        padding: 16px;
    }

    #tools .tool-tile-card {
        border-radius: 13px;
        min-width: 0;
    }

    #tools .tool-tile-card.tool-tile-collapsed {
        min-height: 82px;
        padding: 15px 16px;
        cursor: pointer;
    }

    #tools .tool-tile-card.tool-tile-collapsed h3 {
        font-size: 0.93rem;
        letter-spacing: 0;
    }

    #tools .tool-tile-card.tool-tile-collapsed .hint {
        font-size: 0.75rem;
    }

    #tools .tool-tile-card:not(.tool-tile-collapsed) {
        padding: 20px;
        border-color: color-mix(in srgb, var(--secondary) 38%, var(--border));
        background: rgba(255,255,255,0.045);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }

    #tools .tool-tile-card:not(.tool-tile-collapsed) > h3 {
        padding-bottom: 12px;
        margin-bottom: 14px;
        border-bottom: 1px solid var(--border);
        font-size: 1.18rem;
    }

    #tools .tool-tile-card:not(.tool-tile-collapsed) > .hint {
        max-width: 780px;
    }

    #tools .tool-grid {
        grid-template-columns: repeat(4, minmax(160px, 1fr));
        gap: 12px;
    }

    #tools .salinity-control {
        max-width: 760px;
    }

    #tools .tool-result {
        max-width: 900px;
    }
}

.reef-manager-import-compact {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,0.025);
    padding: 0;
}

.reef-manager-import-compact summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    padding: 11px 12px;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.reef-manager-import-compact summary::-webkit-details-marker {
    display: none;
}

.reef-manager-import-compact[open] {
    padding-bottom: 12px;
}

.reef-manager-import-compact .btn-group,
.reef-manager-import-compact .reef-manager-history-config,
.reef-manager-import-compact .hint,
.reef-manager-import-compact .tool-result {
    margin-left: 12px;
    margin-right: 12px;
}

.reef-manager-history-config {
    margin-bottom: 10px;
}

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

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

.resource-link-card {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.resource-link-card:hover {
    transform: translateY(-1px);
    border-color: rgba(100, 210, 255, 0.42);
    background: rgba(100, 210, 255, 0.08);
}

.resource-link-card span {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.resource-tools-card {
    grid-column: 1 / -1;
}

.sangokai-section-card {
    display: grid;
    gap: var(--space-4);
}

.sangokai-section-card .settings-detail-intro,
.sangokai-section-card .sangokai-search-card {
    margin: 0;
}

.sync-diagnostics-result {
    margin-top: 12px;
}

.sync-diagnostics-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
    margin-bottom: 6px;
    font-size: 0.82rem;
}

.sync-diagnostics-row span {
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.sync-diagnostics-row.ok {
    border-color: rgba(48, 209, 88, 0.32);
}

.sync-diagnostics-row.warn {
    border-color: rgba(255, 69, 58, 0.42);
}

.sync-diagnostics-row.warn strong {
    color: var(--danger);
}

.tool-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.tool-row > span:last-child {
    font-weight: 900;
    color: var(--secondary);
    text-align: right;
}

.tool-row > button {
    width: auto;
    padding: 7px 10px;
    font-size: 0.75rem;
}

.tool-row:first-child {
    border-top: none;
    padding-top: 2px;
}

.tool-row:first-child strong {
    font-size: 1.02rem;
}

.tool-row small {
    display: block;
    color: var(--text-muted);
    font-size: 0.74rem;
    margin-top: 2px;
}

.tool-row .cost-inline {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.tool-row .cost-inline.muted {
    color: var(--text-muted);
    opacity: 0.78;
}

.sea-water-cost-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.sea-water-cost-summary span {
    min-width: 0;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 9%, var(--surface-raised));
}

.sea-water-cost-summary strong,
.sea-water-cost-summary small {
    display: block;
}

.sea-water-cost-summary strong {
    color: var(--secondary);
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    line-height: 1.08;
}

.sea-water-cost-summary small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.macro-source-recommendation {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-color));
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
        color-mix(in srgb, var(--surface-raised) 82%, transparent);
}

.macro-source-recommendation__head {
    display: grid;
    gap: 3px;
}

.macro-source-recommendation__head strong {
    color: var(--text-primary);
}

.macro-source-recommendation__head small,
.macro-source-link small {
    color: var(--text-muted);
}

.macro-source-recommendation__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.macro-source-link {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-color));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface-card) 88%, transparent);
    color: var(--secondary);
    text-decoration: none;
}

.macro-source-link span,
.macro-source-link small {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
}

.tool-row.missing {
    color: var(--danger);
}

.tool-result.missing {
    border-color: rgba(255, 69, 58, 0.45);
    background: rgba(255, 69, 58, 0.08);
}

.dose-plan {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.dose-plan-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
}

.dose-plan-row input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.dose-plan-row:has(input:checked) {
    opacity: 0.62;
}

.dose-plan-row:has(input:checked) span {
    text-decoration: line-through;
}

.tool-action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.tool-action-row button {
    flex: 1;
    min-width: 160px;
}

.salinity-control {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
}

.salinity-control-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.salinity-control-head label {
    margin: 0;
    font-weight: 700;
}

.salinity-control-head input[type="number"] {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.06);
}

.salinity-control input[type="range"] {
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.salinity-control input[type="range"]::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
}

.salinity-control input[type="range"]::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    margin-top: -10px;
    border-radius: 50%;
    border: 3px solid var(--card-bg);
    background: var(--primary);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    appearance: none;
    -webkit-appearance: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.salinity-control input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.salinity-control input[type="range"]::-moz-range-track {
    height: 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
}

.salinity-control input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid var(--card-bg);
    background: var(--primary);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.salinity-value {
    font-size: 1.8rem;
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 10px;
}

@media (max-width: 640px) {
    .salinity-control-head {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .salinity-control-head input[type="number"] {
        text-align: left;
    }

    #specificGravityResult .tool-row,
    #simpleSalinityResult .tool-row,
    #salinityResult .tool-row {
        grid-template-columns: 1fr;
    }
}

/* Warn-Karten (Wenn Bestand unter Schwelle) */
.card-warning {
    border-left: 3px solid var(--danger) !important;
    box-shadow: none !important;
}

/* Visuelle Auswertung: Balken in der Statistik */
.visual-bar-bg {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    height: 8px;
    margin-top: 8px;
    overflow: hidden;
    width: 100%;
}
.visual-bar-fill {
    background: var(--primary);
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease-out;
}

/* Button für die Warnschwellen (Glocken-Icon) */
.threshold-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    transition: transform 0.2s;
}
.threshold-btn:hover {
    transform: scale(1.2);
    color: var(--danger);
}

/* --- APP FOOTER (IMPRESSUM) --- */
.app-footer {
    text-align: center;
    padding: 20px 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    margin-top: 40px;
    background: rgba(0, 0, 0, 0.2);
}

.app-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    margin-left: 5px;
}

.app-footer a:hover {
    text-decoration: underline;
}

/* Automatische Farbanpassung für das helle Girl-Theme */
body.theme-girl .app-footer {
    background: rgba(255, 102, 164, 0.05);
}

/* ==========================================================================
   🦈 BADMAN SHARK EDITION OVERRIDES - Schwarz, Grau, Rot 🦈
   ========================================================================== */

/* Eingabefelder, Listen, Protokolle & Blöcke im Badman-Stil */
body.theme-badman .card {
    background: rgba(42, 42, 42, 0.9);
}

body.theme-badman textarea,
body.theme-badman input[type="number"],
body.theme-badman input[type="text"],
body.theme-badman input[type="password"],
body.theme-badman input[type="file"],
body.theme-badman select,
body.theme-badman .log-item,
body.theme-badman .stat-block,
body.theme-badman #cr-preview-container,
body.theme-badman #containerSection {
    background: #2a2a2a !important;
    color: #f1f1f1 !important;
    border: 1px solid #4a4a4a !important;
}

body.theme-badman select option { background: #2a2a2a !important; color: #f1f1f1 !important; }
body.theme-badman .modal-content { background: #2a2a2a !important; border: 2px solid #e63946 !important; color: #f1f1f1 !important; }

/* Alle Texte im Badman Mode */
body.theme-badman h1, body.theme-badman h2, body.theme-badman h3, body.theme-badman h4, 
body.theme-badman label, body.theme-badman strong, 
body.theme-badman .stat-grid div strong, body.theme-badman .trace-grid label {
    color: #f1f1f1 !important;
}
body.theme-badman .subtitle, body.theme-badman .hint, body.theme-badman .unit-label, body.theme-badman .log-date {
    color: #6a6a6a !important;
}

/* Buttons im Badman-Stil */
body.theme-badman .btn-in { background: rgba(74, 74, 74, 0.3) !important; color: #8a8a8a !important; border: 1px solid #4a4a4a !important; }
body.theme-badman .btn-out { background: rgba(230, 57, 70, 0.15) !important; color: #e63946 !important; border: 1px solid rgba(230, 57, 70, 0.4) !important; }
body.theme-badman .btn-primary { background: #e63946 !important; color: #ffffff !important; }
body.theme-badman .btn-secondary { background: #4a4a4a !important; color: #f1f1f1 !important; }
body.theme-badman .btn-danger { background: #e63946 !important; color: #ffffff !important; }
body.theme-badman .btn-cancel { background: #2a2a2a !important; color: #8a8a8a !important; }

/* Highlights, Badges und Navigation */
body.theme-badman .stock { background: rgba(230, 57, 70, 0.15) !important; color: #e63946 !important; }
body.theme-badman .version-badge { background: rgba(230, 57, 70, 0.15) !important; color: #e63946 !important; border: 1px solid #e63946 !important; }
body.theme-badman .prognose-badge { background: rgba(230, 57, 70, 0.1) !important; color: #e63946 !important; }
body.theme-badman header { background: rgba(26, 26, 26, 0.95) !important; box-shadow: 0 1px 0 #4a4a4a !important; }
body.theme-badman .nav-menu { background: rgba(42, 42, 42, 0.96) !important; border-left: 1px solid #4a4a4a !important; }
body.theme-badman .nav-links button { background: #2a2a2a !important; color: #8a8a8a !important; }
body.theme-badman .nav-links button.active { background: #e63946 !important; color: #ffffff !important; }
body.theme-badman .cross-hint { color: #e63946 !important; }

/* Desktop Navigation Anpassung für Badman */
@media (min-width: 768px) {
    body.theme-badman .nav-menu { background: #2a2a2a !important; border-bottom: 1px solid #4a4a4a !important; }
    body.theme-badman .nav-links button.active { background: rgba(230, 57, 70, 0.15) !important; color: #e63946 !important; border-bottom: 3px solid #e63946 !important; }
}

@media (max-width: 767px) {
    body.theme-badman {
        background-image: none;
        background-attachment: initial;
    }

    body.theme-badman::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-color: var(--bg);
        background-image:
            linear-gradient(rgba(26, 26, 26, 0.52), rgba(26, 26, 26, 0.82)),
            url("../img/badman.svg");
        background-repeat: no-repeat;
        background-position: center 92px;
        background-size: min(128vw, 520px) auto;
    }

    body.theme-badman header {
        background: rgba(26, 26, 26, 0.74) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    body.theme-badman .card {
        background: rgba(42, 42, 42, 0.84);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    body.theme-badman textarea,
    body.theme-badman input[type="number"],
    body.theme-badman input[type="text"],
    body.theme-badman input[type="password"],
    body.theme-badman input[type="file"],
    body.theme-badman select,
    body.theme-badman .log-item,
    body.theme-badman .stat-block,
    body.theme-badman #cr-preview-container,
    body.theme-badman #containerSection {
        background: rgba(42, 42, 42, 0.82) !important;
    }

    body.theme-badman .nav-menu {
        background: rgba(42, 42, 42, 0.88) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .legacy-domain-banner {
        width: min(100vw - 18px, 1200px);
        margin: 10px auto 6px;
        padding: 14px;
        border-radius: 16px;
        flex-direction: column;
        align-items: stretch;
    }

    .legacy-domain-banner-actions {
        width: 100%;
    }

    .legacy-domain-banner-link {
        width: 100%;
    }
}

/* Footer Anpassung */
body.theme-badman .app-footer {
    background: rgba(230, 57, 70, 0.05);
}

/* Party Modus für Badman */
body.theme-badman.party-mode { 
    animation: badmanDiscoGradient 8s ease infinite !important; 
    background: linear-gradient(45deg, #1a1a1a, #2a2a2a, #3a0a0a, #1a1a1a) !important;
    background-size: 400% 400% !important;
}
body.theme-badman.party-mode .card {
    background: rgba(42, 42, 42, 0.9) !important;
    border: 1px solid #e63946 !important;
    animation: badmanRgbPulse 4s infinite alternate ease-in-out !important;
}

/* ========================================================================== 
   Redesign P4: Rechner, Dosierung, C&R und Trace
   ========================================================================== */

.workflow-page,
#tools .calculator-section {
    --workflow-border: color-mix(in srgb, var(--border-color) 88%, transparent);
    --workflow-soft: color-mix(in srgb, var(--surface-raised) 88%, transparent);
}

.workflow-page {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.workflow-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-2) 2px 0;
}

.workflow-page-head h2 {
    margin: 4px 0 5px;
    color: var(--text-primary);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.2;
}

.workflow-page-head p {
    max-width: 660px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}

.osci-system-note {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-top: var(--space-2);
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 720;
    line-height: 1.25;
}

.workflow-eyebrow {
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workflow-context {
    display: grid;
    flex: 0 0 auto;
    gap: 3px;
    min-width: 170px;
    padding: 10px 12px;
    border: 1px solid var(--workflow-border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
}

.workflow-context span {
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.workflow-context strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.workflow-card,
#tools .calculator-card:not(.tool-tile-collapsed) {
    border-color: var(--workflow-border);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
}

.workflow-card {
    margin: 0;
    padding: var(--space-4);
}

.workflow-card > h3,
#tools .calculator-card:not(.tool-tile-collapsed) > h3 {
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
    font-size: 1.08rem;
    line-height: 1.3;
}

#tools .calculator-card:not(.tool-tile-collapsed) {
    padding: clamp(16px, 2.2vw, 24px);
}

#tools .calculator-card:not(.tool-tile-collapsed) > .hint {
    max-width: 760px;
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
}

#tools .calculator-input-grid,
#tools .calculator-card:not(.tool-tile-collapsed) > .tool-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: var(--space-3);
    align-items: end;
    margin-bottom: var(--space-4);
}

#tools .calculator-card:not(.tool-tile-collapsed) > .input-group,
#tools .calculator-card:not(.tool-tile-collapsed) .calculator-input-grid > .input-group,
.workflow-card > .input-group {
    min-width: 0;
    margin-bottom: var(--space-3);
}

#tools .calculator-card:not(.tool-tile-collapsed) .calculator-subsection {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--workflow-border);
}

.workflow-page--trace {
    --trace-kation: #38bdf8;
    --trace-anion: #f59e0b;
}

.workflow-page--trace .trace-calculator-card,
.workflow-page--trace .trace-history-block {
    margin-bottom: var(--space-4);
}

.workflow-page--trace .workflow-page-head h2 {
    max-width: 100%;
    overflow-wrap: break-word;
}

.trace-workflow-accordion {
    overflow: hidden;
}

.trace-workflow-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: calc(-1 * var(--space-4));
    padding: var(--space-4);
    cursor: pointer;
    list-style: none;
}

.trace-workflow-summary::-webkit-details-marker {
    display: none;
}

.trace-workflow-summary span:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.trace-workflow-summary strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.trace-workflow-summary small {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
}

.trace-workflow-accordion[open] > .trace-workflow-summary {
    margin-bottom: 0;
    border-bottom: 1px solid var(--workflow-border);
}

.trace-calculator-body {
    display: grid;
    gap: var(--space-4);
    padding-top: var(--space-4);
}

.trace-calculator-warning {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--status-warning) 36%, var(--workflow-border));
    border-left: 3px solid var(--status-warning);
    border-radius: 8px;
}

.trace-warning-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--status-warning);
    background: color-mix(in srgb, var(--status-warning) 14%, transparent);
    font-size: 0.9rem;
    font-weight: 900;
}

.trace-warning-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.trace-warning-copy strong {
    color: var(--text-primary);
    font-size: 0.84rem;
}

.trace-warning-copy small {
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.4;
}

.trace-workstep {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: 0;
}

.trace-workstep + .trace-workstep {
    padding-top: var(--space-4);
    border-top: 1px solid var(--workflow-border);
}

.trace-step-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.trace-step-copy {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.trace-step-head strong {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.25;
}

.trace-step-head small {
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.35;
}

.trace-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--workflow-border));
    border-radius: 50%;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-size: 0.74rem;
    font-weight: 900;
}

.trace-explain-button {
    width: auto;
    min-width: 154px;
    min-height: 38px;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 0.72rem;
}

.trace-config-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 12px;
    align-items: end;
}

.trace-config-grid .input-group {
    min-width: 0;
    margin: 0;
}

.trace-config-grid .input-group label {
    min-height: 0;
    margin-bottom: 6px;
    font-size: 0.72rem;
}

.trace-config-warnings {
    margin-top: var(--space-3);
}

.trace-config-warnings:empty {
    display: none;
}

.trace-plan-warning {
    margin: 0;
}

.trace-config-grid input,
.trace-config-grid select {
    width: 100%;
    height: 44px;
    margin: 0;
    padding-block: 8px;
    border-radius: 8px;
}

.trace-date-field {
    grid-column: span 2;
}

.trace-input-with-unit {
    position: relative;
    min-width: 0;
}

.trace-input-with-unit input {
    width: 100%;
    padding-right: 58px;
}

.trace-input-with-unit > span {
    position: absolute;
    top: 50%;
    right: 12px;
    pointer-events: none;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 750;
}

.trace-expert-panel {
    margin-top: var(--space-3);
    border: 1px solid var(--workflow-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 74%, transparent);
    overflow: hidden;
}

.trace-expert-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 54px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.trace-expert-panel > summary::-webkit-details-marker {
    display: none;
}

.trace-expert-panel > summary > span:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.trace-expert-panel > summary strong {
    color: var(--text-primary);
    font-size: 0.88rem;
}

.trace-expert-panel > summary small,
.trace-expert-panel .hint {
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.35;
}

.trace-expert-body {
    display: grid;
    gap: var(--space-3);
    padding: 0 14px 14px;
}

.trace-expert-dynamic-panel {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(110px, 0.7fr) minmax(110px, 0.7fr) auto;
    gap: 10px;
    align-items: end;
    min-width: 0;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--workflow-border));
    border-radius: 10px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 12%, var(--surface-base)),
        color-mix(in srgb, var(--surface-base) 82%, transparent));
}

.trace-expert-dynamic-summary {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.trace-expert-dynamic-summary small,
.trace-expert-dynamic-summary span,
.trace-expert-dynamic-panel .input-group label {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1.2;
}

.trace-expert-dynamic-summary strong {
    color: var(--accent);
    font-size: 1rem;
    line-height: 1.05;
}

.trace-expert-dynamic-panel .input-group {
    min-width: 0;
    margin: 0;
}

.trace-expert-dynamic-panel input {
    height: 38px;
    border-radius: 8px;
    font-size: 0.78rem;
}

.trace-expert-dynamic-panel button {
    min-height: 38px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    white-space: nowrap;
}

.trace-expert-preset-panel {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) auto;
    gap: 10px;
    align-items: end;
    min-width: 0;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--workflow-border) 80%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-base) 70%, transparent);
}

.trace-expert-preset-panel .input-group {
    min-width: 0;
    margin: 0;
}

.trace-expert-preset-panel .input-group label {
    margin-bottom: 5px;
    font-size: 0.68rem;
}

.trace-expert-preset-panel input,
.trace-expert-preset-panel select {
    height: 38px;
    border-radius: 8px;
    font-size: 0.78rem;
}

.trace-expert-preset-actions {
    display: flex;
    gap: 7px;
    min-width: 0;
}

.trace-expert-preset-actions button {
    min-height: 38px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    white-space: nowrap;
}

.trace-expert-group {
    display: grid;
    gap: 8px;
}

.trace-expert-group h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.78rem;
    letter-spacing: 0;
}

.trace-expert-limit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}

.trace-expert-limit {
    display: grid;
    grid-template-columns: minmax(54px, 0.65fr) minmax(0, 1.35fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--workflow-border) 82%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-base) 76%, transparent);
}

.trace-expert-direction-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
}

.trace-expert-direction-grid label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.trace-expert-element-label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.trace-expert-element-label > span {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.trace-expert-reset {
    min-width: 0;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--workflow-border));
    border-radius: 8px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1;
}

.trace-expert-reset:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.trace-expert-limit strong {
    color: var(--accent);
    font-size: 0.8rem;
}

.trace-expert-limit small {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-expert-limit .trace-input-with-unit input {
    height: 36px;
    padding: 6px 32px 6px 9px;
    border-radius: 8px;
    font-size: 0.8rem;
}

.trace-expert-limit input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.trace-expert-limit .trace-input-with-unit > span {
    right: 9px;
    font-size: 0.66rem;
}

.trace-expert-actions {
    justify-content: flex-start;
    margin: 0;
}

@media (max-width: 760px) {
    .trace-expert-dynamic-panel {
        grid-template-columns: 1fr 1fr;
    }

    .trace-expert-dynamic-summary,
    .trace-expert-dynamic-panel button {
        grid-column: 1 / -1;
    }

    .trace-expert-dynamic-panel button {
        white-space: normal;
    }

    .trace-expert-preset-panel {
        grid-template-columns: 1fr;
    }

    .trace-expert-preset-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trace-expert-preset-actions button {
        white-space: normal;
    }
}

.trace-icp-import {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--workflow-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-raised) 68%, transparent);
}

.trace-icp-import > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 11px 12px;
    cursor: pointer;
    list-style: none;
}

.trace-icp-import > summary::-webkit-details-marker {
    display: none;
}

.trace-icp-import > summary > span:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.trace-icp-import > summary strong {
    color: var(--text-primary);
    font-size: 0.8rem;
}

.trace-icp-import > summary small {
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.35;
}

.trace-icp-import-badge {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--workflow-border));
    border-radius: 6px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-size: 0.64rem;
    font-weight: 850;
}

.trace-icp-import[open] > summary {
    border-bottom: 1px solid var(--workflow-border);
    background: color-mix(in srgb, var(--surface-card) 64%, transparent);
}

.trace-icp-import-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 12px;
}

.trace-icp-import-body p,
.trace-icp-import-body label,
.trace-icp-import-body textarea,
.trace-icp-import-status {
    grid-column: 1 / -1;
}

.trace-icp-import-body p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.73rem;
    line-height: 1.5;
}

.trace-icp-import-body p strong {
    color: var(--text-primary);
}

.trace-icp-import-body label {
    margin: 0 0 -4px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 750;
}

.trace-icp-import-body textarea {
    width: 100%;
    min-height: 132px;
    margin: 0;
    padding: 10px 11px;
    resize: vertical;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.74rem;
    line-height: 1.45;
}

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

.trace-icp-import-actions button {
    width: auto;
    min-height: 40px;
    margin: 0;
    padding: 8px 12px;
}

.trace-icp-import-status {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid var(--workflow-border);
    border-left-width: 3px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--surface-card) 72%, transparent);
}

.trace-icp-import-status[hidden] {
    display: none;
}

.trace-icp-import-status strong {
    color: var(--text-primary);
    font-size: 0.74rem;
}

.trace-icp-import-status span {
    overflow-wrap: anywhere;
    color: var(--text-secondary);
    font-size: 0.67rem;
    line-height: 1.45;
}

.trace-icp-import-status-success {
    border-left-color: var(--success);
}

.trace-icp-import-status-error {
    border-left-color: var(--danger);
}

.trace-icp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
    gap: 12px;
    min-width: 0;
}

.trace-icp-group {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--workflow-border);
    border-top: 3px solid var(--trace-kation);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-raised) 76%, transparent);
}

.trace-icp-group-anionen {
    border-top-color: var(--trace-anion);
}

.trace-icp-group-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--workflow-border);
    background: color-mix(in srgb, var(--surface-card) 72%, transparent);
}

.trace-icp-group-head > span:last-child,
.trace-recipe-title > span:last-child {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.trace-icp-group-head strong {
    color: var(--text-primary);
    font-size: 0.88rem;
}

.trace-icp-group-head small {
    color: var(--text-secondary);
    font-size: 0.68rem;
}

.trace-group-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid color-mix(in srgb, var(--trace-kation) 48%, var(--workflow-border));
    border-radius: 8px;
    color: var(--trace-kation);
    background: color-mix(in srgb, var(--trace-kation) 10%, transparent);
    font-size: 0.76rem;
    font-weight: 900;
}

.trace-icp-group-anionen .trace-group-symbol,
.trace-recipe-block-anionen .trace-group-symbol {
    border-color: color-mix(in srgb, var(--trace-anion) 48%, var(--workflow-border));
    color: var(--trace-anion);
    background: color-mix(in srgb, var(--trace-anion) 10%, transparent);
}

.trace-icp-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(132px, 1fr));
    gap: 1px;
    background: var(--workflow-border);
}

.trace-icp-group-anionen .trace-icp-fields {
    grid-template-columns: repeat(2, minmax(124px, 1fr));
}

.trace-icp-input {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 10px;
    background: var(--surface-raised);
}

.trace-icp-input label {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.trace-icp-element {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

.trace-icp-element strong {
    color: var(--text-primary);
    font-size: 0.8rem;
}

.trace-icp-element small {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-target-range {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trace-icp-input input {
    height: 40px;
    margin: 0;
    padding-block: 7px;
    border-radius: 7px;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}

.trace-icp-input .trace-input-with-unit > span {
    right: 9px;
    font-size: 0.62rem;
}

.trace-optimum {
    color: var(--text-secondary);
    font-size: 0.62rem;
    line-height: 1.2;
}

.trace-calculator-result {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.trace-result-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
}

.trace-result-head > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.trace-result-head > span:first-child small {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 850;
    text-transform: uppercase;
}

.trace-result-head strong {
    color: var(--text-primary);
    font-size: 1.04rem;
    line-height: 1.25;
}

.trace-result-head em {
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-style: normal;
    line-height: 1.3;
}

.trace-result-dose {
    text-align: right;
}

.trace-result-dose small {
    color: var(--text-secondary);
    font-size: 0.66rem;
}

.trace-result-dose strong {
    font-size: 0.9rem;
}

.trace-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.trace-summary-strip > span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--workflow-border);
    border-top: 3px solid var(--workflow-border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.trace-summary-strip > .trace-summary-kationen {
    border-top-color: var(--trace-kation);
}

.trace-summary-strip > .trace-summary-anionen {
    border-top-color: var(--trace-anion);
}

.trace-summary-strip small,
.trace-summary-strip em {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-style: normal;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-summary-strip strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.94rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-recipe-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    min-width: 0;
}

.trace-recipe-block {
    display: grid;
    align-content: start;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--workflow-border);
    border-top: 3px solid var(--trace-kation);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-raised) 74%, transparent);
}

.trace-recipe-block-anionen {
    border-top-color: var(--trace-anion);
}

.trace-recipe-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 11px 12px;
    border-bottom: 1px solid var(--workflow-border);
    background: var(--surface-raised);
}

.trace-recipe-title {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.trace-recipe-title strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.86rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-recipe-title small {
    color: var(--text-secondary);
    font-size: 0.66rem;
}

.trace-recipe-total {
    display: grid;
    gap: 1px;
    min-width: 88px;
    text-align: right;
}

.trace-recipe-total small,
.trace-recipe-total span {
    color: var(--text-secondary);
    font-size: 0.62rem;
    line-height: 1.2;
}

.trace-recipe-total strong {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.trace-recipe-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border-bottom: 1px solid var(--workflow-border);
    background: var(--workflow-border);
}

.trace-recipe-totals > span {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    min-width: 0;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--surface-card) 82%, var(--surface-raised));
}

.trace-recipe-totals small {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-size: 0.6rem;
}

.trace-recipe-totals strong,
.trace-recipe-totals em {
    color: var(--text-primary);
    font-size: 0.7rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

.trace-recipe-totals em {
    color: var(--text-secondary);
    text-align: right;
}

.trace-recipe-table {
    display: grid;
    min-width: 0;
}

.trace-recipe-table-head,
.trace-recipe-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.1fr) minmax(90px, 0.8fr) minmax(132px, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.trace-recipe-table-head {
    padding: 7px 10px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--surface-card) 52%, transparent);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.trace-recipe-table-head span:last-child {
    text-align: right;
}

.trace-recipe-row {
    min-height: 56px;
    padding: 8px 10px;
    border-top: 1px solid var(--workflow-border);
    border-left: 3px solid transparent;
    background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
}

.trace-recipe-row > span,
.trace-recipe-element > span {
    min-width: 0;
}

.trace-recipe-element {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trace-recipe-element > span:last-child,
.trace-recipe-icp {
    display: grid;
    gap: 2px;
}

.trace-recipe-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 7px;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 11%, var(--surface-card));
    font-size: 0.72rem;
    font-weight: 900;
}

.trace-recipe-element strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.76rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-recipe-element small,
.trace-recipe-icp small {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.62rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-status-pill {
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-recipe-amount {
    display: grid;
    justify-items: end;
    gap: 2px;
    min-width: 0;
    text-align: right;
}

.trace-recipe-amount > span {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.trace-recipe-amount strong {
    color: var(--text-primary);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trace-recipe-amount small {
    color: var(--text-secondary);
    font-size: 0.64rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trace-recipe-amount em {
    overflow: hidden;
    max-width: 100%;
    color: var(--text-secondary);
    font-size: 0.58rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-recipe-amount em.trace-change-up,
.trace-recipe-amount em.trace-change-down,
.trace-recipe-amount em.trace-change-even {
    font-weight: 800;
}

.trace-recipe-amount em.trace-change-up {
    color: var(--success);
}

.trace-recipe-amount em.trace-change-down {
    color: var(--warning);
}

.trace-recipe-amount em.trace-change-even {
    color: var(--text-muted);
}

.trace-reuse-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--workflow-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.trace-reuse-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 58px;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}

.trace-reuse-panel > summary::-webkit-details-marker {
    display: none;
}

.trace-reuse-panel > summary > span:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.trace-reuse-panel > summary strong {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.2;
}

.trace-reuse-panel > summary small {
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.3;
}

.trace-reuse-panel[open] > summary {
    border-bottom: 1px solid var(--workflow-border);
}

.trace-reuse-body {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: var(--space-3);
}

.trace-reuse-inputs,
.trace-reuse-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.trace-reuse-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.trace-reuse-mode-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--workflow-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-card) 72%, transparent);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.trace-reuse-mode-card:hover,
.trace-reuse-mode-card.is-active {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--workflow-border));
    background: color-mix(in srgb, var(--accent) 9%, var(--surface-card));
}

.trace-reuse-mode-card input {
    margin-top: 3px;
    accent-color: var(--accent);
}

.trace-reuse-mode-card span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.trace-reuse-mode-card strong {
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1.2;
}

.trace-reuse-mode-card small {
    color: var(--text-secondary);
    font-size: 0.66rem;
    line-height: 1.35;
    white-space: normal;
}

.trace-reuse-inputs .input-group {
    margin: 0;
}

.trace-reuse-choice {
    transition: opacity 160ms ease, filter 160ms ease, border-color 160ms ease;
}

.trace-reuse-choice > small {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 0.58rem;
    line-height: 1.3;
    white-space: normal;
}

.trace-reuse-choice-disabled {
    opacity: 0.52;
    filter: saturate(0.72);
}

.trace-reuse-choice-disabled input {
    cursor: not-allowed;
}

.trace-reuse-date-helper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--workflow-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-card) 70%, transparent);
}

.trace-reuse-date-helper span {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.35;
    white-space: normal;
}

.trace-reuse-date-helper button {
    flex: 0 0 auto;
    width: auto;
    min-height: 36px;
    padding: 8px 11px;
    font-size: 0.68rem;
}

.trace-reuse-safety-note {
    display: grid;
    gap: 5px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--status-warning) 42%, var(--workflow-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--status-warning) 10%, var(--surface-card));
}

.trace-reuse-safety-note strong {
    color: var(--text-primary);
    font-size: 0.76rem;
    line-height: 1.2;
}

.trace-reuse-safety-note span {
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.42;
    white-space: normal;
}

.trace-reuse-card {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--workflow-border);
    border-top: 3px solid var(--trace-kation);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-card) 82%, transparent);
}

.trace-reuse-card:nth-child(2) {
    border-top-color: var(--trace-anion);
}

.trace-reuse-card.trace-reuse-card-warning,
.trace-reuse-card.trace-reuse-card-impossible {
    border-color: color-mix(in srgb, var(--status-warning) 42%, var(--workflow-border));
    border-top-color: var(--status-warning);
}

.trace-reuse-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.trace-reuse-card-head > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.trace-reuse-card-head strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.86rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-reuse-card-head small {
    color: var(--text-secondary);
    font-size: 0.64rem;
    line-height: 1.25;
}

.trace-reuse-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.trace-reuse-summary span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--workflow-border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.trace-reuse-summary small {
    color: var(--text-secondary);
    font-size: 0.58rem;
    line-height: 1.2;
}

.trace-reuse-summary strong {
    color: var(--text-primary);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.22;
}

.trace-reuse-dose-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.trace-reuse-dose-strip span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--workflow-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-raised));
}

.trace-reuse-dose-strip small {
    color: var(--text-secondary);
    font-size: 0.58rem;
    line-height: 1.2;
}

.trace-reuse-dose-strip strong {
    color: var(--accent);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.trace-reuse-warnings {
    display: grid;
    gap: 5px;
}

.trace-reuse-warnings span {
    padding: 8px 9px;
    border: 1px solid color-mix(in srgb, var(--status-warning) 45%, var(--workflow-border));
    border-radius: 8px;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--status-warning) 10%, transparent);
    font-size: 0.68rem;
    line-height: 1.35;
}

.trace-reuse-additions {
    display: grid;
    gap: 6px;
}

.trace-reuse-equation-note {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.trace-reuse-equation-note strong {
    color: var(--text-primary);
    font-size: 0.72rem;
}

.trace-reuse-equation-note span {
    color: var(--text-secondary);
    font-size: 0.66rem;
    line-height: 1.35;
}

.trace-reuse-balance-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 0.78fr) repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 0 9px 2px;
    color: var(--text-secondary);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.trace-reuse-additions > span {
    display: grid;
    grid-template-columns: 34px minmax(0, 0.78fr) repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    min-width: 0;
    padding: 8px 9px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-raised) 74%, transparent);
}

.trace-reuse-additions strong {
    color: var(--accent);
    font-size: 0.78rem;
}

.trace-reuse-additions small {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-reuse-additions em {
    display: grid;
    gap: 2px;
    color: var(--text-primary);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: anywhere;
}

.trace-reuse-additions em small {
    display: none;
}

.trace-reuse-addition-needed {
    color: var(--accent) !important;
}

.trace-reuse-addition-none {
    color: var(--text-secondary) !important;
}

.trace-reuse-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-3);
}

.trace-reuse-actions button {
    width: auto;
}

.trace-status-low {
    border-left-color: var(--status-warning);
}

.trace-status-high {
    border-left-color: var(--status-danger);
}

.trace-status-ok {
    border-left-color: var(--status-success);
}

.trace-status-low .trace-status-pill {
    color: var(--status-warning);
}

.trace-status-high .trace-status-pill {
    color: var(--status-danger);
}

.trace-status-ok .trace-status-pill {
    color: var(--status-success);
}

.trace-calculator-actions {
    margin-top: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--workflow-border);
}

.trace-guide {
    display: grid;
    gap: 12px;
    color: var(--text-primary);
}

.trace-guide-warning {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border-left: 3px solid var(--status-warning);
    background: color-mix(in srgb, var(--status-warning) 9%, transparent);
}

.trace-guide-warning strong {
    font-size: 0.8rem;
}

.trace-guide-warning span,
.trace-guide-intro {
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.5;
}

.trace-guide-intro {
    margin: 0;
}

.trace-guide-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block: 1px solid var(--workflow-border);
}

.trace-guide-summary > span {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 10px 12px;
    border-right: 1px solid var(--workflow-border);
}

.trace-guide-summary > span:last-child {
    border-right: 0;
}

.trace-guide-summary small,
.trace-guide-table td small {
    display: block;
    color: var(--text-secondary);
    font-size: 0.62rem;
    line-height: 1.35;
}

.trace-guide-summary strong {
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.trace-guide-section {
    overflow: hidden;
    border: 1px solid var(--workflow-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-raised) 64%, transparent);
}

.trace-guide-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
}

.trace-guide-section > summary::-webkit-details-marker {
    display: none;
}

.trace-guide-section > summary span {
    font-size: 0.78rem;
    font-weight: 800;
}

.trace-guide-section > summary small {
    color: var(--text-secondary);
    font-size: 0.64rem;
    text-align: right;
}

.trace-guide-section[open] > summary {
    border-bottom: 1px solid var(--workflow-border);
}

.trace-guide-section-body {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.trace-guide-section-body p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.55;
}

.trace-guide-section-body p strong,
.trace-guide-section-body h4 {
    color: var(--text-primary);
}

.trace-guide-section-body h4 {
    margin: 4px 0 0;
    font-size: 0.78rem;
}

.trace-guide-section-body code {
    color: var(--accent);
    font-size: 0.69rem;
    overflow-wrap: anywhere;
}

.trace-guide-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--workflow-border);
    border-radius: 8px;
}

.trace-guide-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.trace-guide-table th,
.trace-guide-table td {
    min-width: 0;
    padding: 8px 9px;
    border-bottom: 1px solid var(--workflow-border);
    color: var(--text-secondary);
    font-size: 0.66rem;
    line-height: 1.35;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.trace-guide-table th {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--surface-card) 58%, transparent);
    font-size: 0.59rem;
    text-transform: uppercase;
}

.trace-guide-table td strong {
    color: var(--text-primary);
}

.trace-guide-table tbody tr:last-child td {
    border-bottom: 0;
}

.trace-guide-current-table th:nth-child(3),
.trace-guide-current-table td:nth-child(3) {
    width: 25%;
}

.trace-guide-rule-table {
    max-width: 520px;
}

.trace-history-block {
    display: grid;
    gap: 0;
    overflow: hidden;
    padding: 0;
    border-radius: 8px;
}

.trace-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 14px 16px;
    border-bottom: 1px solid var(--workflow-border);
    background: var(--surface-raised);
}

.trace-history-head > span:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.trace-history-head strong {
    color: var(--text-primary);
    font-size: 0.94rem;
}

.trace-history-head small {
    color: var(--text-secondary);
    font-size: 0.68rem;
}

.trace-history-count {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 750;
}

.trace-history-content {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
}

.trace-history-empty p {
    margin: 0;
    padding: 16px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
}

.trace-analysis-block {
    display: grid;
    gap: 10px;
}

.trace-analysis-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.trace-analysis-summary > span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--workflow-border);
    border-left: 3px solid var(--workflow-border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.trace-analysis-summary .trace-analysis-good {
    border-left-color: var(--status-success);
}

.trace-analysis-summary .trace-analysis-neutral {
    border-left-color: var(--status-warning);
}

.trace-analysis-summary .trace-analysis-bad {
    border-left-color: var(--status-danger);
}

.trace-analysis-summary strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.trace-analysis-summary small {
    color: var(--text-secondary);
    font-size: 0.66rem;
}

.trace-analysis-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.5;
}

.trace-analysis-details {
    overflow: hidden;
    border: 1px solid var(--workflow-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-raised) 74%, transparent);
}

.trace-analysis-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 750;
}

.trace-analysis-details[open] > summary {
    border-bottom: 1px solid var(--workflow-border);
}

.trace-analysis-details > summary span {
    color: var(--text-secondary);
    font-size: 0.66rem;
}

.trace-analysis-table {
    display: grid;
    gap: 1px;
    background: var(--workflow-border);
}

.trace-analysis-row {
    display: grid;
    grid-template-columns: 70px repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 9px 10px;
    border-left: 3px solid var(--workflow-border);
    background: var(--surface-raised);
}

.trace-analysis-row > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.trace-analysis-row strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-analysis-row small {
    color: var(--text-secondary);
    font-size: 0.62rem;
}

.trace-trend-improved {
    border-left-color: var(--status-success);
}

.trace-trend-worsened {
    border-left-color: var(--status-danger);
}

.trace-trend-stable {
    border-left-color: var(--status-warning);
}

.trace-history-chart-wrap {
    display: grid;
    gap: 8px;
    overflow: visible;
    border: 1px solid var(--workflow-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-raised) 74%, transparent);
}

.trace-history-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}

.trace-history-chart-head::-webkit-details-marker {
    display: none;
}

.trace-history-chart-wrap[open] > .trace-history-chart-head {
    border-bottom: 1px solid var(--workflow-border);
}

.trace-history-chart-head strong {
    color: var(--text-primary);
    font-size: 0.78rem;
}

.trace-history-chart-head small {
    color: var(--text-secondary);
    font-size: 0.62rem;
    text-align: right;
}

.trace-history-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 12px;
    color: var(--text-secondary);
    font-size: 0.62rem;
}

.trace-history-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.trace-history-chart-legend span::before {
    content: '';
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.trace-legend-value {
    color: color-mix(in srgb, var(--accent) 72%, var(--text-secondary));
}

.trace-legend-trend {
    color: var(--status-warning);
}

.trace-legend-average {
    color: var(--text-secondary);
}

.trace-legend-optimal {
    color: var(--status-success);
}

.trace-history-chart {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
}

.trace-history-element-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--workflow-border) 76%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 92%, var(--accent) 8%), var(--surface-raised));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.trace-history-element-empty {
    align-content: start;
}

.trace-history-element-empty p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.45;
}

.trace-history-element-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.trace-history-element-head span {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.trace-history-element-head strong {
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 800;
}

.trace-history-element-head small,
.trace-history-element-head em {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.62rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-history-chart-stage {
    position: relative;
    overflow: visible;
    width: 100%;
    aspect-ratio: 320 / 150;
    min-height: 150px;
    --trace-value-color: color-mix(in srgb, var(--accent) 72%, var(--text-secondary));
}

.trace-history-element-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--trace-value-color);
    overflow: visible;
}

.trace-history-plot-bg {
    fill: color-mix(in srgb, var(--surface-card) 55%, transparent);
    stroke: color-mix(in srgb, var(--workflow-border) 70%, transparent);
    stroke-width: 1;
}

.trace-history-grid-line {
    stroke: color-mix(in srgb, var(--workflow-border) 64%, transparent);
    stroke-width: 0.8;
}

.trace-history-grid-line-x {
    stroke-dasharray: 2 5;
    opacity: 0.55;
}

.trace-history-axis-line {
    stroke: color-mix(in srgb, var(--text-secondary) 56%, transparent);
    stroke-width: 1;
}

.trace-history-axis-text {
    fill: var(--text-secondary);
    font-size: 6px;
    font-variant-numeric: tabular-nums;
}

.trace-history-axis-y {
    text-anchor: end;
}

.trace-history-axis-x {
    text-anchor: middle;
}

.trace-history-axis-title {
    fill: color-mix(in srgb, var(--text-secondary) 84%, transparent);
    font-size: 6px;
    font-weight: 750;
    text-anchor: middle;
    text-transform: uppercase;
}

.trace-history-value-line {
    stroke: var(--trace-value-color);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.92;
}

.trace-history-value-points circle {
    fill: var(--surface-card);
    stroke: var(--trace-value-color);
    stroke-width: 1.5;
}

.trace-history-trend-line {
    stroke: var(--status-warning);
    stroke-width: 2;
    stroke-dasharray: 5 4;
}

.trace-history-average-line {
    stroke: var(--text-secondary);
    stroke-width: 1.4;
    stroke-dasharray: 2 4;
    opacity: 0.82;
}

.trace-history-optimal-line {
    stroke: var(--status-success);
    stroke-width: 1.5;
    opacity: 0.9;
}

.trace-history-point-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.trace-history-point {
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin: -9px 0 0 -9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    appearance: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
}

.trace-history-point::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1.5px solid var(--trace-value-color, var(--accent));
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--surface-card);
    opacity: 0.88;
    transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

.trace-history-point span {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 4;
    display: grid;
    gap: 2px;
    min-width: 116px;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--workflow-border));
    border-radius: 7px;
    background: color-mix(in srgb, var(--surface-card) 94%, black 6%);
    color: var(--text-secondary);
    font-size: 0.62rem;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    transform: translate(-50%, 4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    white-space: nowrap;
}

.trace-history-point span strong {
    color: var(--text-primary);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.trace-history-point:hover::after,
.trace-history-point:focus-visible::after {
    transform: scale(1.18);
    opacity: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--trace-value-color, var(--accent)) 15%, transparent);
}

.trace-history-point:hover span,
.trace-history-point:focus-visible span {
    opacity: 1;
    transform: translate(-50%, 0);
}

.trace-history-element-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.trace-history-element-stats span {
    display: grid;
    gap: 1px;
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid color-mix(in srgb, var(--workflow-border) 78%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--surface-card) 45%, transparent);
}

.trace-history-element-stats small {
    color: var(--text-secondary);
    font-size: 0.52rem;
    text-transform: uppercase;
}

.trace-history-element-stats strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-history-element-stats .trace-history-distance-ok strong {
    color: var(--status-success);
}

.trace-history-element-stats .trace-history-distance-high strong,
.trace-history-element-stats .trace-history-distance-low strong {
    color: var(--status-warning);
}

.trace-history-list {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--workflow-border);
    border-radius: 8px;
    background: var(--workflow-border);
}

.trace-history-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--surface-card) 60%, var(--surface-raised));
}

.trace-history-list-head strong {
    color: var(--text-primary);
    font-size: 0.76rem;
}

.trace-history-list-head small {
    color: var(--text-secondary);
    font-size: 0.64rem;
}

.trace-history-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(100px, 0.55fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(180px, auto);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px 12px;
    background: var(--surface-raised);
}

.trace-history-date,
.trace-history-status,
.trace-history-mixture {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.trace-history-status {
    justify-self: start;
    padding: 6px 9px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--surface);
}

.trace-history-status strong {
    font-size: 0.66rem;
}

.trace-history-status small {
    font-size: 0.56rem;
}

.trace-history-status-icp {
    border-color: color-mix(in srgb, var(--status-success) 36%, var(--border-color));
    background: color-mix(in srgb, var(--status-success) 10%, var(--surface));
}

.trace-history-status-start {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.trace-history-status-missing {
    border-color: color-mix(in srgb, var(--status-warning) 42%, var(--border-color));
    background: color-mix(in srgb, var(--status-warning) 10%, var(--surface));
}

.trace-history-status-ignored {
    opacity: 0.76;
}

.trace-history-row strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-history-row small {
    color: var(--text-secondary);
    font-size: 0.62rem;
}

.trace-history-row button {
    min-width: 76px;
    margin: 0;
    padding: 8px 10px;
}

.trace-history-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.trace-history-actions button {
    min-width: 0;
}

.trace-history-row-inactive {
    opacity: 0.68;
    border-left: 3px dashed var(--border-color);
}

.trace-history-row-inactive .trace-history-date strong::after {
    content: " · ignoriert";
    color: var(--text-secondary);
    font-size: 0.74em;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .trace-config-grid {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }

    .trace-icp-grid,
    .trace-recipe-split {
        grid-template-columns: 1fr;
    }

    .trace-icp-fields {
        grid-template-columns: repeat(4, minmax(126px, 1fr));
    }

    .trace-icp-group-anionen .trace-icp-fields {
        grid-template-columns: repeat(4, minmax(126px, 1fr));
    }

    .trace-recipe-table-head,
    .trace-recipe-row {
        grid-template-columns: minmax(170px, 1.1fr) minmax(130px, 0.8fr) minmax(180px, 1fr);
    }
}

@media (max-width: 760px) {
    .trace-calculator-body {
        gap: 14px;
        padding-top: 14px;
    }

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

    .trace-date-field {
        grid-column: span 2;
    }

    .trace-icp-fields,
    .trace-icp-group-anionen .trace-icp-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trace-result-head {
        align-items: flex-start;
    }

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

    .trace-summary-strip > span:last-child {
        grid-column: 1 / -1;
    }

    .trace-reuse-mode-grid,
    .trace-reuse-inputs,
    .trace-reuse-result-grid {
        grid-template-columns: 1fr;
    }

    .trace-reuse-panel > summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .trace-reuse-actions {
        justify-content: stretch;
    }

    .trace-reuse-actions button {
        width: 100%;
    }

    .trace-reuse-date-helper {
        align-items: stretch;
        flex-direction: column;
    }

    .trace-reuse-date-helper button {
        width: 100%;
    }

    .trace-reuse-balance-head {
        display: none;
    }

    .trace-reuse-additions > span {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 7px 9px;
    }

    .trace-reuse-additions > span > em {
        grid-column: span 1;
        padding: 7px 8px;
        border: 1px solid var(--workflow-border);
        border-radius: 8px;
        background: color-mix(in srgb, var(--surface-card) 66%, transparent);
    }

    .trace-reuse-additions > span > em:nth-of-type(1),
    .trace-reuse-additions > span > em:nth-of-type(4) {
        grid-column: 1 / -1;
    }

    .trace-reuse-additions > span > em:nth-of-type(2),
    .trace-reuse-additions > span > em:nth-of-type(3) {
        grid-column: span 1;
    }

    .trace-reuse-additions em small {
        display: block;
        color: var(--text-secondary);
        font-size: 0.56rem;
        line-height: 1;
        text-transform: uppercase;
    }

    .trace-recipe-table-head {
        display: none;
    }

    .trace-recipe-row {
        grid-template-columns: minmax(0, 1fr) minmax(110px, 0.75fr);
        gap: 8px 10px;
        padding: 10px;
    }

    .trace-recipe-amount {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        justify-items: stretch;
        padding-top: 8px;
        border-top: 1px solid var(--workflow-border);
        text-align: left;
    }

    .trace-recipe-amount > span {
        justify-content: flex-start;
    }

    .trace-recipe-amount em {
        text-align: right;
    }

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

    .trace-history-chart {
        grid-template-columns: 1fr;
    }

    .trace-history-chart-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .trace-history-chart-head small {
        text-align: left;
    }

    .trace-history-element-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trace-history-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .trace-history-mixture {
        grid-row: 2;
    }

    .trace-calculator-actions button {
        flex: 0 0 auto;
        min-height: 44px;
    }
}

@media (max-width: 520px) {
    .trace-icp-import > summary {
        align-items: flex-start;
    }

    .trace-icp-import-badge {
        display: none;
    }

    .trace-icp-import-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .trace-icp-import-actions button {
        width: 100%;
    }

    .trace-workflow-summary {
        align-items: flex-start;
    }

    .trace-warning-mark {
        display: none;
    }

    .trace-calculator-warning {
        grid-template-columns: 1fr;
    }

    .trace-config-grid,
    .trace-icp-fields,
    .trace-icp-group-anionen .trace-icp-fields,
    .trace-summary-strip,
    .trace-analysis-summary {
        grid-template-columns: 1fr;
    }

    .trace-date-field,
    .trace-summary-strip > span:last-child {
        grid-column: auto;
    }

    .trace-result-head,
    .trace-recipe-head,
    .trace-history-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .trace-result-dose,
    .trace-recipe-total {
        text-align: left;
    }

    .trace-recipe-totals {
        grid-template-columns: 1fr;
    }

    .trace-recipe-row {
        grid-template-columns: 1fr;
    }

    .trace-recipe-amount {
        grid-column: auto;
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .trace-recipe-amount em {
        text-align: left;
    }

    .trace-history-row {
        grid-template-columns: 1fr;
    }

    .trace-history-row button,
    .trace-history-mixture {
        grid-column: 1;
        grid-row: auto;
    }

    .trace-history-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .trace-history-row button,
    .trace-history-actions button {
        width: 100%;
    }

    .trace-history-spark {
        grid-template-columns: 28px minmax(0, 1fr) 68px;
    }
}
#tools .calculator-card:not(.tool-tile-collapsed) .input-group label,
.workflow-card .input-group label,
.workflow-card > .field-label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.35;
}

#tools .calculator-card:not(.tool-tile-collapsed) input,
#tools .calculator-card:not(.tool-tile-collapsed) select,
.workflow-card input,
.workflow-card select,
.workflow-card textarea {
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

#tools .calculator-card:not(.tool-tile-collapsed) input[readonly] {
    border-style: dashed;
    color: var(--text-secondary);
    background: var(--surface-raised);
    cursor: default;
}

.salifert-select {
    position: relative;
    min-width: 0;
}

.salifert-select-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 11px 42px 11px 13px;
    border: 1px solid color-mix(in srgb, var(--border-color) 92%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface-raised) 84%, var(--app-bg));
    color: var(--text-primary);
    box-shadow: none;
    text-align: left;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.salifert-select-button::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: translateY(-66%) rotate(45deg);
    transition: transform var(--transition-fast) var(--ease-standard), border-color var(--transition-fast) var(--ease-standard);
}

.salifert-select-button:hover,
.salifert-select-button[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised));
}

.salifert-select-button[aria-expanded="true"]::after {
    border-color: var(--accent);
    transform: translateY(-34%) rotate(225deg);
}

.salifert-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 80;
    display: grid;
    gap: 4px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-card) 96%, #000);
    box-shadow: var(--shadow-overlay);
}

.salifert-select-menu[hidden] {
    display: none !important;
}

.salifert-select-menu-scroll {
    max-height: min(320px, 44vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) color-mix(in srgb, var(--surface-raised) 80%, transparent);
}

.salifert-select-menu button {
    width: 100%;
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    box-shadow: none;
    text-align: left;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.salifert-select-menu button:hover,
.salifert-select-menu button:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
    background: color-mix(in srgb, var(--accent) 16%, var(--surface-raised));
    color: var(--text-primary);
}

.salifert-select-menu button[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--accent) 54%, transparent);
    background: color-mix(in srgb, var(--accent) 24%, var(--surface-raised));
    color: #fff;
}

.calculator-result-region {
    min-width: 0;
    margin-top: var(--space-4);
}

.calculator-result-region:empty {
    display: none;
}

.calculator-result-region > .hint,
.workflow-message {
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--workflow-border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text-secondary);
    line-height: 1.45;
}

.calculator-result-region .tool-result,
#salinityResult.tool-result,
#simpleSalinityResult.tool-result,
#specificGravityResult.tool-result,
#reef-manager-import-preview .tool-result {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--workflow-border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.calculator-result-region .tool-row,
#salinityResult .tool-row,
#simpleSalinityResult .tool-row,
#specificGravityResult .tool-row,
#reef-manager-import-preview .tool-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
    gap: var(--space-3);
    align-items: center;
    min-width: 0;
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid var(--workflow-border);
    background: transparent;
}

.calculator-result-region .tool-row:last-child,
#salinityResult .tool-row:last-child,
#simpleSalinityResult .tool-row:last-child,
#specificGravityResult .tool-row:last-child,
#reef-manager-import-preview .tool-row:last-child {
    border-bottom: 0;
}

.calculator-result-region .tool-row > span,
#salinityResult .tool-row > span,
#simpleSalinityResult .tool-row > span,
#specificGravityResult .tool-row > span,
#reef-manager-import-preview .tool-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.calculator-result-region .tool-row > span:last-child,
#salinityResult .tool-row > span:last-child,
#simpleSalinityResult .tool-row > span:last-child,
#specificGravityResult .tool-row > span:last-child,
#reef-manager-import-preview .tool-row > span:last-child {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-align: right;
}

.calculator-result-region .tool-row small,
#salinityResult .tool-row small,
#simpleSalinityResult .tool-row small,
#specificGravityResult .tool-row small,
#reef-manager-import-preview .tool-row small {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.4;
}

.calculator-result-region .tool-row.missing {
    border-left: 3px solid var(--status-warning);
    background: color-mix(in srgb, var(--status-warning) 8%, var(--surface-raised));
}

.salinity-value {
    margin: 0;
    padding: 16px 14px 8px;
    color: var(--accent);
    font-size: clamp(1.55rem, 4vw, 2rem);
    font-variant-numeric: tabular-nums;
}

#salinityResult > small {
    display: block;
    padding: 10px 14px 14px;
    color: var(--text-secondary);
}

.calculator-actions,
.tool-action-row.calculator-actions,
.workflow-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: var(--space-4) 0 0;
}

.calculator-actions button,
.workflow-actions button {
    width: auto;
    min-width: 150px;
}

.booking-action {
    position: relative;
    font-weight: 800;
}

.dose-plan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--workflow-border);
}

.dose-plan-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--workflow-border);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
}

.dose-plan-row input {
    width: 20px;
    height: 20px;
    margin: 0;
}

.dose-plan-row strong {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.workflow-preview {
    margin: var(--space-4) 0;
    padding: var(--space-3);
    border: 1px solid var(--workflow-border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.workflow-preview[hidden] {
    display: none !important;
}

.workflow-preview h4 {
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
    font-size: 0.92rem;
}

.workflow-message {
    display: grid;
    gap: 3px;
}

.workflow-message--error {
    border-left: 3px solid var(--status-danger);
    background: color-mix(in srgb, var(--status-danger) 8%, var(--surface-raised));
}

.workflow-message--warning {
    border-left: 3px solid var(--status-warning);
    background: color-mix(in srgb, var(--status-warning) 10%, var(--surface-raised));
}

.cr-preview-list {
    display: grid;
    gap: 8px;
}

.cr-preview-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, auto);
    gap: var(--space-3);
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--workflow-border);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
}

.cr-preview-row.missing {
    border-left: 3px solid var(--status-warning);
}

.cr-preview-product,
.cr-preview-amount {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cr-preview-product {
    display: grid;
    gap: 4px;
}

.cr-stock-warning {
    color: var(--status-warning);
    font-size: 0.74rem;
    line-height: 1.35;
}

.cr-preview-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cr-primary-unit {
    display: block;
    color: var(--text-primary);
    font-size: 0.96rem;
}

.cr-secondary-unit,
.cr-preview-amount > small {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.trace-mixture-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.trace-mixture-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.trace-mixture-card > h3 {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--workflow-border);
}

.trace-mixture-card .workflow-actions {
    margin-top: auto;
    padding-top: var(--space-4);
}

.workflow-page--trace .trace-grid {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(90px, 120px) minmax(64px, auto);
    gap: var(--space-2);
    align-items: center;
    min-width: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--workflow-border);
}

.workflow-page--trace .trace-grid label {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
}

.workflow-page--trace .trace-grid input {
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.trace-unit-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
}

.trace-gram-value {
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.reef-manager-import-compact {
    margin-top: var(--space-4);
    border-color: var(--workflow-border);
    background: var(--surface-card);
}

@media (max-width: 820px) {
    .workflow-page-head {
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-3);
    }

    .workflow-context {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        min-width: 0;
    }

    .workflow-context strong {
        text-align: right;
    }

    .trace-mixture-grid {
        grid-template-columns: 1fr;
    }

    #tools .calculator-card:not(.tool-tile-collapsed) .calculator-input-grid,
    #tools .calculator-card:not(.tool-tile-collapsed) > .tool-grid {
        grid-template-columns: 1fr;
    }

    #tools .calculator-card:not(.tool-tile-collapsed) input,
    #tools .calculator-card:not(.tool-tile-collapsed) select,
    .workflow-card input,
    .workflow-card select,
    .workflow-card textarea {
        font-size: 16px;
    }

    .calculator-result-region .tool-row,
    #salinityResult .tool-row,
    #simpleSalinityResult .tool-row,
    #specificGravityResult .tool-row,
    #reef-manager-import-preview .tool-row,
    .cr-preview-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .calculator-result-region .tool-row > span:last-child,
    #salinityResult .tool-row > span:last-child,
    #simpleSalinityResult .tool-row > span:last-child,
    #specificGravityResult .tool-row > span:last-child,
    #reef-manager-import-preview .tool-row > span:last-child,
    .cr-preview-amount {
        text-align: left;
    }

    .calculator-actions,
    .tool-action-row.calculator-actions,
    .workflow-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .calculator-actions button,
    .workflow-actions button {
        width: 100%;
        min-width: 0;
    }

    .workflow-page--trace .trace-grid {
        grid-template-columns: minmax(0, 1fr) minmax(86px, 116px) minmax(58px, auto);
    }
}

@media (max-width: 430px) {
    .workflow-page-head h2 {
        font-size: 1.35rem;
    }

    .workflow-card,
    #tools .calculator-card:not(.tool-tile-collapsed) {
        padding: 14px;
    }

    .workflow-page--trace .trace-grid {
        grid-template-columns: minmax(0, 1fr) 92px;
    }

    .workflow-page--trace .trace-grid label {
        grid-column: 1 / -1;
    }

    .trace-unit-stack {
        justify-self: end;
    }

    .dose-plan {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .workflow-page *,
    #tools .calculator-section * {
        scroll-behavior: auto !important;
    }
}
@keyframes badmanDiscoGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes badmanRgbPulse {
    0% { box-shadow: 0 0 15px rgba(230, 57, 70, 0.3); border-color: #e63946; }
    100% { box-shadow: 0 0 20px rgba(138, 138, 138, 0.4); border-color: #8a8a8a; }
}

/* ==========================================================================
   ✨ GLOBAL ANIMATIONS & TRANSITIONS ✨
   ========================================================================== */

/* Smooth card hover lift effect */
.card {
    transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.5s ease, background-color 0.5s ease;
}
.card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Button hover glow */
button, .btn-primary, .btn-secondary, .btn-danger, .btn-in, .btn-out, .btn-cancel {
    transition: all 0.2s ease;
}
button:hover:not(:active) {
    filter: brightness(1.1);
    transform: translateY(0);
}

/* Smooth modal fade-in */
.modal {
    transition: opacity 0.3s ease;
}
.modal[style*="flex"] {
    animation: modalFadeIn 0.3s ease forwards;
}
.modal-content {
    animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Smooth details/summary expand */
details {
    overflow: hidden;
}
details[open] > *:not(summary) {
    animation: detailsSlideDown 0.3s ease forwards;
}
@keyframes detailsSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
details summary {
    transition: color 0.2s ease;
}
details summary:hover {
    color: var(--primary);
}

/* Input focus glow effect */
textarea:focus,
input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(191, 90, 242, 0.3);
    border-color: var(--primary) !important;
}

/* Stock badge subtle pulse for low stock */
@keyframes lowStockPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Log items slide in */
.log-item {
    animation: logSlideIn 0.3s ease forwards;
}
@keyframes logSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Stat block counter animation feel */
.stat-block {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-block:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Nav menu smooth slide */
.nav-menu {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

/* Menu backdrop fade */
.menu-backdrop.open {
    animation: backdropFadeIn 0.3s ease forwards;
}
@keyframes backdropFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Header subtle entrance */
header {
    animation: headerSlideDown 0.4s ease forwards;
}
@keyframes headerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Switch toggle smooth */
.switch .slider {
    transition: background-color 0.3s ease;
}
.switch .slider:before {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

/* Alert summary expand */
.alert-summary {
    transition: all 0.3s ease;
}
.alert-summary:hover {
    border-color: var(--danger);
    box-shadow: 0 2px 10px rgba(255, 69, 58, 0.15);
}

/* Search input focus expand */
.lager-toolbar:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(191, 90, 242, 0.1);
}

/* Version badge subtle glow */
.version-badge {
    transition: all 0.3s ease;
}
.version-badge:hover {
    filter: brightness(1.2);
}

/* Footer link hover effect */
.app-footer a {
    transition: color 0.2s ease, text-shadow 0.2s ease;
}
.app-footer a:hover {
    text-shadow: 0 0 8px rgba(191, 90, 242, 0.4);
}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34rem),
        var(--app-bg);
}

.legal-shell {
    display: grid;
    place-items: start center;
    width: min(920px, calc(100vw - 28px));
    margin: 24px auto 56px;
}

.legal-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid color-mix(in srgb, var(--border-color, var(--border)) 82%, transparent);
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent, var(--primary)) 12%, transparent), transparent 34%),
        color-mix(in srgb, var(--surface-card, #1c1c1e) 96%, transparent);
    box-shadow: var(--shadow-raised);
}

.legal-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin: 0 auto 26px;
    text-align: center;
}

.legal-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.legal-lead {
    max-width: 58ch;
    margin: 0 auto;
    color: var(--text-secondary, var(--text-muted));
    font-size: 0.95rem;
}

.legal-head h1 {
    margin: 0 0 6px;
    font-size: clamp(1.65rem, 3.6vw, 2.2rem);
}

.legal-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.legal-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    text-decoration: none;
}

.legal-links .btn-secondary,
.legal-links .btn-out {
    width: auto;
    min-height: 42px;
    padding: 9px 16px;
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
    color: var(--text-primary);
}

.legal-links .btn-secondary:hover,
.legal-links .btn-out:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, var(--surface-raised));
    color: var(--accent);
}

.legal-copy {
    width: min(100%, 760px);
    margin-inline: auto;
    color: var(--text);
    line-height: 1.62;
}

.legal-copy h2 {
    margin: 26px 0 10px;
    font-size: 1.08rem;
}

.legal-copy p,
.legal-copy li {
    color: color-mix(in srgb, var(--text) 92%, var(--text-muted));
}

.legal-copy ul {
    margin: 0 0 0 18px;
    padding: 0;
}

.legal-copy a {
    color: var(--secondary);
}

.legal-section {
    margin-top: 18px;
    padding-top: 2px;
}

.legal-section-highlight {
    margin-top: 0;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--accent, var(--primary)) 18%, var(--border-color, var(--border)));
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-raised, #242426) 72%, transparent);
}

.legal-section-highlight h2 {
    margin-top: 0;
}

.legal-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
    gap: 14px;
    align-items: stretch;
    margin: 10px 0 18px;
}

.legal-contact-grid > div,
.legal-address-card {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid color-mix(in srgb, var(--border-color, var(--border)) 84%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-card, #1c1c1e) 86%, transparent);
}

.legal-address-card {
    color: color-mix(in srgb, var(--text) 82%, var(--text-muted));
    font-style: normal;
    font-size: 0.91rem;
}

.legal-label {
    color: var(--text-secondary, var(--text-muted));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.legal-note {
    margin-top: 24px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--text);
}

@media (max-width: 767px) {
    .legal-shell {
        width: min(100vw - 18px, 920px);
        margin: 14px auto 30px;
    }

    .legal-card {
        padding: 18px 16px 22px;
        border-radius: 18px;
    }

    .legal-head {
        gap: 14px;
    }

    .legal-links a {
        flex: 1 1 0;
    }

    .legal-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Size selection button styles for Nachbestellen */
.size-select-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
}
.size-select-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--primary);
    color: var(--text);
}
.size-select-btn.selected {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(191, 90, 242, 0.3);
}

/* ==========================================================================
   🍞 TOAST NOTIFICATIONS
   ========================================================================== */
.toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 90%;
    width: 400px;
}
.toast {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: auto;
    backdrop-filter: blur(10px);
}
.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }
.toast.info { border-left: 4px solid var(--secondary); }
.toast.warning { border-left: 4px solid #ffd60a; }
.toast-icon { font-size: 1.4rem; flex-shrink: 0; }
.toast-message { flex: 1; font-size: 0.9rem; color: var(--text); }
.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    line-height: 1;
}
.toast.removing {
    animation: toastSlideOut 0.3s ease forwards;
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastSlideOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-10px) scale(0.9); }
}

@media (pointer: fine) and (hover: hover) {
    body.custom-cursor-enabled,
    body.custom-cursor-enabled * {
        cursor: none !important;
    }

    .custom-cursor,
    .custom-cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 2147483647;
        opacity: 0;
        transform: translate3d(-50%, -50%, 0);
        transition: opacity 0.16s ease, width 0.16s ease, height 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
        will-change: transform;
    }

    .custom-cursor {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.58);
        background: rgba(255, 255, 255, 0.075);
        box-shadow: 0 8px 22px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(255,255,255,0.05);
        backdrop-filter: blur(10px) saturate(1.25);
        -webkit-backdrop-filter: blur(10px) saturate(1.25);
    }

    .custom-cursor-dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 1px 6px rgba(0,0,0,0.22);
    }

    body.cursor-style-system,
    body.cursor-style-system * {
        cursor: auto !important;
    }

    body.cursor-style-system .custom-cursor,
    body.cursor-style-system .custom-cursor-dot {
        display: none !important;
        opacity: 0 !important;
    }

    body.cursor-style-glow .custom-cursor {
        width: 22px;
        height: 22px;
        border-color: color-mix(in srgb, var(--primary) 78%, white 22%);
        background: color-mix(in srgb, var(--primary) 22%, transparent);
        box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 48%, transparent), 0 8px 28px rgba(0,0,0,0.28);
    }

    body.cursor-style-glow .custom-cursor-dot {
        width: 5px;
        height: 5px;
        background: color-mix(in srgb, var(--primary) 78%, white 22%);
        box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 80%, transparent);
    }

    body.cursor-style-dot .custom-cursor {
        width: 8px;
        height: 8px;
        border: 0;
        background: rgba(255,255,255,0.9);
        box-shadow: 0 4px 14px rgba(0,0,0,0.28);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.cursor-style-dot .custom-cursor-dot {
        opacity: 0 !important;
    }

    body.cursor-style-crosshair .custom-cursor {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid color-mix(in srgb, var(--primary) 70%, white 30%);
        background:
            linear-gradient(to right, transparent 46%, color-mix(in srgb, var(--primary) 72%, white 28%) 46% 54%, transparent 54%),
            linear-gradient(to bottom, transparent 46%, color-mix(in srgb, var(--primary) 72%, white 28%) 46% 54%, transparent 54%);
        box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 28%, transparent);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.cursor-style-crosshair .custom-cursor-dot {
        width: 3px;
        height: 3px;
        background: color-mix(in srgb, var(--primary) 78%, white 22%);
    }

    body.cursor-style-emoji .custom-cursor {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border: 0;
        background: transparent;
        box-shadow: none;
        font-size: 24px;
        line-height: 1;
        text-shadow: 0 8px 18px rgba(0,0,0,0.35);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.cursor-style-emoji .custom-cursor-dot {
        opacity: 0 !important;
    }

    body.cursor-visible .custom-cursor,
    body.cursor-visible .custom-cursor-dot {
        opacity: 1;
    }

    body.cursor-hover .custom-cursor {
        width: 28px;
        height: 28px;
        border-color: rgba(255, 255, 255, 0.72);
        background: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 28px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.07);
    }

    body.cursor-style-dot.cursor-hover .custom-cursor {
        width: 12px;
        height: 12px;
    }

    body.cursor-style-emoji.cursor-hover .custom-cursor {
        width: 34px;
        height: 34px;
        font-size: 28px;
        background: transparent;
        box-shadow: none;
    }

    body.cursor-down .custom-cursor {
        width: 14px;
        height: 14px;
        background: rgba(255,255,255,0.16);
    }

    body.cursor-style-emoji.cursor-down .custom-cursor {
        width: 26px;
        height: 26px;
        font-size: 22px;
        background: transparent;
    }
}

.cursor-design-settings {
    gap: 10px;
}

.cursor-emoji-row {
    display: grid;
    grid-template-columns: minmax(86px, 120px) 44px;
    gap: 10px;
    align-items: center;
    max-width: 190px;
}

.cursor-emoji-row input {
    text-align: center;
    font-size: 1.35rem;
}

.cursor-emoji-row input:disabled {
    opacity: 0.48;
}

.cursor-preview {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    color: var(--primary);
    font-size: 1.35rem;
}

.cursor-preview[data-style="apple"]::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.72);
    background: rgba(255,255,255,0.12);
}

.cursor-preview[data-style="glow"]::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 28%, transparent);
    border: 1px solid var(--primary);
    box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 60%, transparent);
}

.cursor-preview[data-style="dot"] {
    font-size: 2rem;
}

.cursor-preview[data-style="system"]::before {
    content: "↖";
    color: var(--text);
    font-size: 1.25rem;
}

.cursor-emoji-palette {
    display: grid;
    grid-template-columns: repeat(6, minmax(36px, 1fr));
    gap: 8px;
    max-width: 300px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.cursor-emoji-palette[hidden] {
    display: none;
}

.cursor-emoji-palette button {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.06);
    color: var(--text);
    font-size: 1.35rem;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.cursor-emoji-palette button:hover,
.cursor-emoji-palette button.is-active {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    background: color-mix(in srgb, var(--primary) 14%, rgba(255,255,255,0.06));
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.dev-lock-card {
    display: grid;
    gap: 12px;
}

.local-device-unlock-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.local-device-settings {
    display: grid;
    gap: 16px;
}

.local-device-form {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) minmax(240px, 1.3fr) auto;
    gap: 12px;
    align-items: end;
}

.local-device-warning {
    margin: 0;
}

.local-device-list {
    display: grid;
    gap: 10px;
}

.local-device-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.045);
}

.local-device-row.is-active {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent), 0 14px 34px rgba(0,0,0,0.18);
}

.local-device-row span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.local-device-row small {
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.local-device-viewer {
    display: grid;
    gap: 10px;
}

.local-device-viewer-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.local-device-viewer-head span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.local-device-viewer-head small {
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.local-device-frame-status {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.local-device-frame-status strong {
    color: var(--text);
}

.local-device-frame-status span {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.35;
}

.local-device-frame-status[data-state="loaded"] {
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
    background: color-mix(in srgb, var(--success) 9%, transparent);
}

.local-device-frame-status[data-state="warn"] {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.local-device-viewer iframe {
    width: 100%;
    min-height: clamp(420px, 62vh, 760px);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: rgba(0,0,0,0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.wave-demo-settings {
    display: grid;
    gap: 16px;
}

.wave-demo-warning {
    margin: 0;
}

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

.wave-demo-actions > :where(a, button) {
    width: auto;
}

.wave-demo-frame-wrap {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: #071013;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow-subtle);
}

.wave-demo-frame {
    display: block;
    width: 100%;
    min-height: min(78vh, 860px);
    border: 0;
    background: #071013;
}

.lighting-planner {
    display: grid;
    gap: 16px;
}

.lighting-studio-header {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 18px;
    align-items: center;
    padding: 20px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border));
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--card-bg) 94%, var(--primary) 6%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), var(--shadow-subtle);
}

.lighting-studio-title {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.lighting-studio-title > span,
.lighting-section-kicker {
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.lighting-studio-title h3 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    line-height: 1.16;
    letter-spacing: 0;
}

.lighting-studio-title p {
    max-width: 68ch;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.48;
}

.lighting-studio-stats {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--input-bg) 80%, transparent);
}

.lighting-studio-stats span {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 12px 10px;
    text-align: center;
}

.lighting-studio-stats span + span {
    border-left: 1px solid var(--border);
}

.lighting-studio-stats b {
    color: var(--text);
    font-size: 1.08rem;
    line-height: 1;
    white-space: nowrap;
}

.lighting-studio-stats small {
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.25;
}

.lighting-warning {
    margin: 0;
}

.lighting-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--card-bg) 88%, transparent);
}

.lighting-actions > :where(button, a) {
    width: auto;
}

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

.lighting-panel,
.lighting-canvas-card {
    min-width: 0;
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--card-bg) 88%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

.lighting-panel h4,
.lighting-canvas-card h4 {
    margin: 0;
    color: var(--text);
}

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

.lighting-form-grid label {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.lighting-form-grid label small {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25;
}

.lighting-form-grid input {
    width: 100%;
}

.lighting-step-card {
    align-content: start;
}

.lighting-step-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.lighting-step-heading > span {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
    border-radius: 50%;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    font-size: 0.82rem;
    font-weight: 900;
}

.lighting-step-heading > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.lighting-step-heading h4,
.lighting-step-heading p {
    margin: 0;
}

.lighting-step-heading p {
    color: var(--text-muted);
    font-size: 0.77rem;
    line-height: 1.35;
}

.lighting-preset-bar {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(155px, 1fr) minmax(155px, 1fr) auto 38px;
    gap: 8px;
    align-items: stretch;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--input-bg) 76%, transparent);
}

.lighting-preset-bar :where(select, input, button) {
    min-width: 0;
    min-height: 40px;
    margin: 0;
}

.lighting-preset-bar button {
    width: auto;
    padding: 8px 12px;
    font-size: 0.76rem;
}

.lighting-icon-button {
    width: 38px !important;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--border));
    border-radius: var(--radius-md);
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    font-size: 1.15rem !important;
    line-height: 1;
}

.lighting-inline-details {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--input-bg) 62%, transparent);
}

.lighting-inline-details > summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    font-size: 0.78rem;
    font-weight: 850;
}

.lighting-inline-details > summary::-webkit-details-marker,
.lighting-tool-details > summary::-webkit-details-marker {
    display: none;
}

.lighting-inline-details > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.lighting-inline-details[open] > summary::after {
    transform: rotate(225deg);
}

.lighting-inline-details > :not(summary) {
    margin: 0 12px 12px;
}

.lighting-tool-details {
    padding: 0;
    gap: 0;
}

.lighting-tool-details > summary {
    min-width: 0;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}

.lighting-tool-details > summary > span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.lighting-tool-details > summary strong {
    color: var(--text);
    font-size: 0.92rem;
}

.lighting-tool-details > summary small {
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.lighting-tool-details > summary i {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.lighting-tool-details[open] > summary i {
    transform: rotate(225deg);
}

.lighting-details-body {
    min-width: 0;
    display: grid;
    gap: 14px;
    padding: 0 14px 14px;
}

.lighting-mix-toggle {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.lighting-mix-toggle input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.lighting-mix-toggle span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.lighting-mix-toggle strong {
    color: var(--text);
    font-size: 0.86rem;
}

.lighting-mix-toggle small {
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.lighting-textarea {
    width: 100%;
    min-height: 132px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1.45;
}

.lighting-editor-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.lighting-editor-head > div {
    min-width: 0;
}

.lighting-editor-head .hint {
    margin: 5px 0 0;
    max-width: 72ch;
}

.lighting-editor-head > button {
    width: auto;
    flex: 0 0 auto;
}

.lighting-editor-help {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.lighting-editor-help strong {
    color: var(--text);
    font-size: 0.84rem;
}

.lighting-editor-help span {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.lighting-editor-list {
    display: grid;
    gap: 10px;
}

.lighting-editor-row {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.045);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.lighting-editor-row[open] {
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
    background: color-mix(in srgb, var(--primary) 6%, var(--card-bg));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}

.lighting-editor-row-head {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.lighting-editor-row-head::-webkit-details-marker {
    display: none;
}

.lighting-editor-row-head > span:first-child {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.lighting-editor-row-head strong {
    min-width: 0;
    color: var(--text);
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.lighting-editor-row-head small {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.3;
}

.lighting-editor-chevron {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.lighting-editor-row[open] .lighting-editor-chevron {
    transform: rotate(225deg);
}

.lighting-editor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.lighting-editor-row-body {
    padding: 2px 14px 14px;
}

.lighting-editor-grid label {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.lighting-editor-grid label small,
.lighting-layout-control label small {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
}

.lighting-editor-grid :where(input, select) {
    width: 100%;
    min-width: 0;
}

.lighting-editor-remove {
    width: auto;
    margin: 0 14px 14px;
    min-height: 38px;
    padding: 7px 12px;
    font-size: 0.78rem;
}

.lighting-lamp-groups-text {
    display: grid;
    gap: 7px;
    margin: 0 14px 14px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.lighting-lamp-groups-text small {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
}

.lighting-cluster-config {
    gap: 14px;
}

.lighting-cluster-mode-control {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.34fr);
    gap: 14px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.lighting-cluster-mode-control > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.lighting-cluster-mode-control strong {
    color: var(--text);
    font-size: 0.9rem;
}

.lighting-cluster-mode-control small {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.lighting-cluster-mode-control select {
    width: 100%;
    min-width: 0;
}

.lighting-cluster-workbench.is-single {
    grid-template-columns: minmax(280px, 0.9fr) minmax(260px, 0.7fr);
}

.lighting-single-cluster-note {
    align-content: center;
}

.lighting-single-cluster-note strong {
    color: var(--text);
    font-size: 0.88rem;
}

.lighting-single-cluster-note span {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.lighting-cluster-config.is-single .lighting-cluster-position-field,
.lighting-cluster-config.is-single .lighting-editor-remove {
    display: none;
}

.lighting-cluster-workbench {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 1.1fr);
    gap: 14px;
    align-items: stretch;
}

.lighting-housing-preview-card,
.lighting-layout-control {
    min-width: 0;
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--input-bg) 76%, transparent);
}

.lighting-preview-head {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.lighting-preview-head > span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.lighting-preview-head b {
    color: var(--text);
    font-size: 0.86rem;
}

.lighting-preview-head small {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.lighting-preview-head em {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--success) 36%, var(--border));
    border-radius: 999px;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, transparent);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.08em;
}

#lightingClusterPreview {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.lighting-housing-shell {
    position: relative;
    width: min(100%, 520px);
    min-height: 112px;
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--text) 26%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--card-bg) 82%, #000 18%);
    box-shadow: inset 0 0 0 5px rgba(255,255,255,0.025), inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.16);
}

.lighting-housing-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 58%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    color: color-mix(in srgb, var(--text-muted) 58%, transparent);
    font-size: clamp(0.62rem, 1.3vw, 0.78rem);
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.lighting-cluster-marker {
    position: absolute;
    z-index: 2;
    width: var(--cluster-width, 32px);
    height: var(--cluster-height, 32px);
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255,255,255,0.76);
    border-radius: 999px;
    color: #fff;
    background: #6c7b85;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.055), 0 5px 14px rgba(0,0,0,0.32);
    transition: left 180ms ease, top 180ms ease, transform 180ms ease;
}

.lighting-cluster-marker:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.lighting-cluster-marker b {
    font-size: 0.72rem;
}

.lighting-cluster-marker.is-blue { background: #2276e8; }
.lighting-cluster-marker.is-white { background: #e9f2f7; color: #12202a; }
.lighting-cluster-marker.is-uv { background: #7d4ce0; }
.lighting-cluster-marker.is-red { background: #dc4856; }
.lighting-cluster-marker.is-green { background: #29a76f; }
.lighting-cluster-marker.is-mixed { background: #268fa3; }

.lighting-housing-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.lighting-housing-scale {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.lighting-layout-control label {
    min-width: 0;
    display: grid;
    gap: 7px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 900;
}

.lighting-layout-control select {
    width: 100%;
    min-width: 0;
}

.lighting-spacing-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.lighting-spacing-grid label {
    color: var(--text-muted);
}

.lighting-spacing-grid input {
    width: 100%;
    min-width: 0;
}

.lighting-result-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.lighting-quality-banner {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 17px;
    border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border));
    border-radius: var(--radius-xl);
    background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 15%, var(--card-bg)), color-mix(in srgb, var(--card-bg) 94%, transparent));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow-subtle);
}

.lighting-quality-banner > span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.lighting-quality-banner small {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lighting-quality-banner strong {
    color: var(--text);
    font-size: 1rem;
}

.lighting-quality-banner em {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-style: normal;
    line-height: 1.35;
}

.lighting-quality-banner b {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    white-space: nowrap;
}

.lighting-placement-warning {
    display: grid;
    gap: 4px;
    padding: 13px 15px;
    border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--border));
    border-radius: var(--radius-lg);
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.lighting-placement-warning span {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.lighting-result-summary span {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.lighting-result-summary strong {
    color: var(--text);
    font-size: clamp(1.25rem, 3vw, 1.8rem);
    line-height: 1;
}

.lighting-result-summary small {
    color: var(--text-muted);
}

.lighting-canvas-card canvas {
    display: block;
    width: 100%;
    height: clamp(220px, 32vw, 360px);
    border-radius: var(--radius-lg);
    background: rgba(0,0,0,0.22);
}

.lighting-scene-card {
    margin: 0;
}

.lighting-scene-card canvas {
    height: clamp(280px, 42vw, 460px);
    cursor: grab;
    touch-action: none;
    background:
        radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.2));
}

.lighting-scene-card canvas:active {
    cursor: grabbing;
}

.lighting-lamp-position-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.lighting-lamp-position-list span {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.045);
}

.lighting-lamp-position-list small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.lighting-canvas-heading {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.lighting-canvas-heading > span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.lighting-canvas-heading h4,
.lighting-canvas-heading small {
    margin: 0;
}

.lighting-canvas-heading small {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.lighting-canvas-heading em {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border));
    border-radius: 999px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.07em;
}

.lighting-heatmap-legend {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto;
    gap: 8px;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.lighting-heatmap-legend i {
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, hsl(205 88% 18%), hsl(140 88% 42%), hsl(30 88% 58%));
}

.lighting-depth-details {
    margin-top: 2px;
}

.lighting-depth-details > .lighting-canvas-card {
    border: 0;
    box-shadow: none;
}

.lighting-utility-details {
    justify-self: end;
    width: min(100%, 360px);
}

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

.lighting-utility-actions button {
    width: 100%;
}

.lighting-coral-list {
    display: grid;
    gap: 8px;
}

.lighting-coral-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.04);
}

.lighting-coral-row span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.lighting-coral-row small {
    color: var(--text-muted);
}

.lighting-coral-row b {
    color: var(--text);
    white-space: nowrap;
}

.lighting-coral-row em {
    padding: 5px 8px;
    border-radius: 999px;
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 900;
    white-space: nowrap;
    color: var(--text);
    background: rgba(255,255,255,0.08);
}

.lighting-coral-row.is-ok {
    border-color: color-mix(in srgb, var(--success) 34%, var(--border));
}

.lighting-coral-row.is-ok em {
    background: color-mix(in srgb, var(--success) 22%, transparent);
}

.lighting-coral-row.is-low {
    border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
}

.lighting-coral-row.is-low em {
    background: color-mix(in srgb, var(--warning) 22%, transparent);
}

.lighting-coral-row.is-high {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
}

.lighting-coral-row.is-high em {
    background: color-mix(in srgb, var(--danger) 22%, transparent);
}

@media (max-width: 760px) {
    .local-device-unlock-row,
    .local-device-form,
    .local-device-row {
        grid-template-columns: 1fr;
    }

    .local-device-viewer-head {
        align-items: stretch;
        flex-direction: column;
    }

    .local-device-viewer iframe {
        min-height: 68vh;
        border-radius: var(--radius-lg);
    }

    .wave-demo-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .wave-demo-actions > :where(a, button) {
        width: 100%;
    }

    .wave-demo-frame {
        min-height: 760px;
    }

    .lighting-actions,
    .lighting-grid,
    .lighting-canvas-grid,
    .lighting-result-summary,
    .lighting-studio-header,
    .lighting-cluster-workbench,
    .lighting-cluster-workbench.is-single,
    .lighting-cluster-mode-control {
        grid-template-columns: 1fr;
    }

    .lighting-studio-header {
        padding: 14px;
    }

    .lighting-studio-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lighting-studio-stats span {
        padding: 10px 6px;
    }

    .lighting-studio-stats b {
        font-size: 0.94rem;
    }

    .lighting-actions {
        display: grid;
    }

    .lighting-actions > :where(button, a) {
        width: 100%;
    }

    .lighting-form-grid {
        grid-template-columns: 1fr;
    }

    .lighting-preset-bar {
        grid-template-columns: minmax(0, 1fr) 40px;
    }

    .lighting-preset-bar :where(select, input) {
        grid-column: 1 / -1;
    }

    .lighting-preset-bar .btn-secondary {
        width: 100%;
    }

    .lighting-quality-banner {
        padding: 13px 14px;
    }

    .lighting-canvas-card canvas {
        height: clamp(220px, 74vw, 330px);
    }

    .lighting-scene-card canvas {
        height: clamp(250px, 78vw, 350px);
    }

    .lighting-editor-head {
        display: grid;
    }

    .lighting-editor-head > button {
        width: 100%;
    }

    .lighting-editor-grid {
        grid-template-columns: 1fr;
    }

    .lighting-editor-row-head {
        padding: 12px;
    }

    .lighting-editor-row-body {
        padding: 2px 12px 12px;
    }

    .lighting-editor-remove {
        width: calc(100% - 24px);
        margin: 0 12px 12px;
    }

    .lighting-housing-preview-card,
    .lighting-layout-control {
        padding: 12px;
    }

    .lighting-spacing-grid {
        grid-template-columns: 1fr;
    }

    .lighting-housing-shell {
        min-height: 96px;
    }

    .lighting-coral-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .lighting-coral-row b,
    .lighting-coral-row em {
        justify-self: start;
    }
}

.adsorber-flow-result {
    gap: 12px;
}

.adsorber-guidance {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border));
    background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.adsorber-guidance strong {
    color: var(--text);
}

.adsorber-guidance p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.45;
}

.adsorber-guidance ul {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    line-height: 1.45;
}

.adsorber-guidance li::marker {
    color: var(--primary);
}

.adsorber-advice {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border));
    background: color-mix(in srgb, var(--primary) 9%, transparent);
}

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

.adsorber-advice-head span,
.adsorber-advice-grid div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.adsorber-advice small,
.adsorber-advice p,
.adsorber-advice li {
    color: var(--text-muted);
}

.adsorber-advice p {
    margin: 0;
    line-height: 1.45;
}

.adsorber-advice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.adsorber-advice-grid div {
    padding: 10px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--border);
}

.adsorber-advice ul {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 6px;
    line-height: 1.45;
}

.adsorber-advice li::marker {
    color: var(--primary);
}

@media (max-width: 760px) {
    .adsorber-advice-head,
    .adsorber-advice-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .update-banner {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        margin: 10px 12px 12px;
        align-items: stretch;
        flex-direction: column;
        padding: 11px 12px;
    }

    .update-banner button {
        width: 100%;
    }
}

/* ==========================================================================
   📭 EMPTY STATES
   ========================================================================== */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
    animation: emptyStateFloat 3s ease-in-out infinite;
}
@keyframes emptyStateFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.empty-state-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}
.empty-state-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 300px;
    margin: 0 auto;
}

/* ==========================================================================
   💀 SKELETON LOADING
   ========================================================================== */
.skeleton {
    background: linear-gradient(90deg, var(--card-bg) 25%, rgba(255,255,255,0.08) 50%, var(--card-bg) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 8px;
}
.skeleton-card {
    height: 120px;
    margin-bottom: 12px;
}
.skeleton-line {
    height: 16px;
    margin-bottom: 8px;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
@keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ==========================================================================
   🔍 LIVE SEARCH HIGHLIGHTING
   ========================================================================== */
.search-highlight {
    background: rgba(255, 214, 10, 0.3);
    color: #ffd60a;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 600;
}
.search-no-results {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-style: italic;
}

/* ==========================================================================
   📊 STATISTIC CHARTS
   ========================================================================== */
.chart-container {
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}
.chart-bar-group {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 120px;
    padding: 0 8px;
}
.chart-bar {
    flex: 1;
    background: var(--primary);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}
.chart-bar:hover {
    filter: brightness(1.2);
    transform: scaleY(1.05);
    transform-origin: bottom;
}
.chart-bar-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.chart-bar-value {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--text);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
}
.chart-bar:hover .chart-bar-value {
    opacity: 1;
}
.chart-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ==========================================================================
   ↩️ UNDO TOAST
   ========================================================================== */
.undo-toast {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.undo-toast button {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.undo-toast .undo-countdown {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ==========================================================================
   ☀️ LIGHT MODE TOGGLE
   ========================================================================== */
body.theme-light,
html.theme-light {
    color-scheme: light;
    --app-bg: #edf5f7;
    --nav-bg: #f7fbfc;
    --surface-card: #ffffff;
    --surface-raised: #f1f7f8;
    --border-color: #c9dadd;
    --text-primary: #17313b;
    --text-secondary: #5d727a;
    --accent: #0e7180;
    --accent-strong: #0f7180;
    --status-success: #2b8f61;
    --status-warning: #a96f19;
    --status-danger: #c94b4b;
    --secondary: #397f9c;
    --bg: var(--app-bg);
    --card-bg: var(--surface-card);
    --primary: var(--accent);
    --text: var(--text-primary);
    --text-muted: var(--text-secondary);
    --danger: var(--status-danger);
    --success: var(--status-success);
    --warning: var(--status-warning);
    --border: var(--border-color);
}
body.theme-light textarea,
body.theme-light input[type="number"],
body.theme-light input[type="text"],
body.theme-light input[type="password"],
body.theme-light input[type="file"],
body.theme-light select,
body.theme-light .log-item,
body.theme-light .stat-block,
body.theme-light #cr-preview-container,
body.theme-light #containerSection {
    background: #f9f9f9 !important;
    color: #1c1c1e !important;
    border: 1px solid #e5e5ea !important;
}
body.theme-light select option { background: #ffffff !important; color: #1c1c1e !important; }
body.theme-light .modal-content { background: #ffffff !important; border: 2px solid #007aff !important; color: #1c1c1e !important; }
body.theme-light h1, body.theme-light h2, body.theme-light h3, body.theme-light h4,
body.theme-light label, body.theme-light strong,
body.theme-light .stat-grid div strong, body.theme-light .trace-grid label {
    color: #1c1c1e !important;
}
body.theme-light .subtitle, body.theme-light .hint, body.theme-light .unit-label, body.theme-light .log-date {
    color: #6e6e73 !important;
}
body.theme-light .btn-in { background: rgba(52, 199, 89, 0.1) !important; color: #34c759 !important; border: 1px solid rgba(52, 199, 89, 0.3) !important; }
body.theme-light .btn-out { background: rgba(255, 59, 48, 0.1) !important; color: #ff3b30 !important; border: 1px solid rgba(255, 59, 48, 0.3) !important; }
body.theme-light .btn-primary { background: #007aff !important; color: #ffffff !important; }
body.theme-light .btn-secondary { background: #e5e5ea !important; color: #1c1c1e !important; }
body.theme-light .btn-danger { background: #ff3b30 !important; color: #ffffff !important; }
body.theme-light .btn-cancel { background: #e5e5ea !important; color: #6e6e73 !important; }
body.theme-light .stock { background: rgba(0, 122, 255, 0.1) !important; color: #007aff !important; }
body.theme-light .version-badge { background: rgba(0, 122, 255, 0.1) !important; color: #007aff !important; border: 1px solid #007aff !important; }
body.theme-light .prognose-badge { background: rgba(88, 86, 214, 0.1) !important; color: #5856d6 !important; }
body.theme-light header { background: rgba(245, 245, 247, 0.95) !important; box-shadow: 0 1px 0 #e5e5ea !important; }
body.theme-light .nav-menu { background: rgba(255, 255, 255, 0.98) !important; border-left: 1px solid #e5e5ea !important; }
body.theme-light .nav-links button { background: #ffffff !important; color: #6e6e73 !important; }
body.theme-light .nav-links button.active { background: #007aff !important; color: #ffffff !important; }
body.theme-light .cross-hint { color: #ff3b30 !important; }
body.theme-light .app-footer { background: rgba(0, 122, 255, 0.05); }
@media (min-width: 768px) {
    body.theme-light .nav-menu { background: #ffffff !important; border-bottom: 1px solid #e5e5ea !important; }
    body.theme-light .nav-links button.active { background: rgba(0, 122, 255, 0.1) !important; color: #007aff !important; border-bottom: 3px solid #007aff !important; }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Ripple Effect - Apple-style subtle press */
.ripple {
    position: relative;
    overflow: hidden;
}
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    transform: scale(0);
    animation: rippleAnimation 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
}
@keyframes rippleAnimation {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Confetti */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}
.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: confettiFall 3s ease-out forwards;
}
@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(-100px) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}

/* Pull to Refresh */
.pull-to-refresh-indicator {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) translateY(-84px) scale(0.86);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--card-bg);
    background: color-mix(in srgb, var(--card-bg) 84%, transparent);
    border: 1px solid var(--primary);
    border-color: color-mix(in srgb, var(--primary) 72%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--primary);
    font-size: 1.55rem;
    font-weight: 800;
    transition: transform 0.22s ease, opacity 0.22s ease, border-color 0.22s ease;
    box-shadow: 0 14px 34px rgba(0,0,0,0.34);
}
.pull-to-refresh-indicator.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.pull-to-refresh-indicator.refreshing {
    animation: spinRefresh 1s linear infinite;
    border-color: var(--success);
    color: var(--success);
}
@keyframes spinRefresh {
    to { transform: translateX(-50%) translateY(0) scale(1) rotate(360deg); }
}

@media (max-width: 767px) {
    body { padding-bottom: 110px; }
    html,
    body {
        overflow-x: hidden;
    }
    header,
    .tab-content,
    .tab-content > *,
    .card,
    .tool-grid,
    .menu-order-list,
    .menu-order-row,
    .backup-project-actions,
    .backup-project-import,
    .storage-safety-status-shell,
    .storage-safety-grid,
    .mobile-quick-tabs-settings,
    .coral-layout,
    .coral-card,
    .coral-photo-tools {
        min-width: 0;
        max-width: 100%;
    }
    .demo-profile-panel {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }
    .demo-profile-actions,
    .demo-profile-actions button {
        width: 100%;
    }
    .demo-profile-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .demo-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .demo-profile-stats small,
    .demo-profile-kicker {
        white-space: normal;
    }
    .demo-profile-features {
        display: grid;
        grid-template-columns: 1fr;
    }
    .demo-profile-quicknav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.demo-profile-active::before {
        right: max(10px, env(safe-area-inset-right));
        bottom: calc(var(--mobile-nav-height, 84px) + max(10px, env(safe-area-inset-bottom)));
        font-size: 0.64rem;
        padding: 7px 10px;
    }
    body.demo-profile-active .subtitle::after {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: 6px;
        width: fit-content;
        max-width: 100%;
        white-space: normal;
    }
    .tab-content {
        padding: 14px 12px 24px;
        gap: 12px;
    }
    .warehouse-control-card {
        padding: 14px;
        border-radius: 16px;
    }
    .warehouse-control-head {
        display: grid;
        gap: 10px;
    }
    .warehouse-switcher {
        grid-template-columns: minmax(0, 1fr) 40px 40px 40px;
        gap: 7px;
    }
    .warehouse-switcher button {
        height: 40px;
    }
    .dashboard-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }
    .dashboard-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-hero h2 {
        font-size: 1.45rem;
    }
    .dashboard-refresh {
        width: 100%;
    }
    .dashboard-grid,
    .dashboard-actions,
    .dashboard-panels,
    .dashboard-measurements-grid,
    .coral-layout,
    .coral-hero-card {
        grid-template-columns: 1fr;
    }
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mobile-quick-tabs-grid {
        grid-template-columns: 1fr;
    }
    .menu-order-row {
        grid-template-columns: 1fr;
    }
    .menu-order-row div {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .menu-order-row input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
    .backup-project-actions > * {
        width: 100%;
        min-width: 0;
    }
    .backup-project-import input[type="file"] {
        width: 100%;
        max-width: 100%;
    }
    .coral-photo-tools,
    .coral-card {
        grid-template-columns: 1fr;
    }
    .coral-photo-preview {
        width: 100%;
        height: 220px;
    }
    .coral-meta-grid {
        grid-template-columns: 1fr;
    }
    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255,255,255,0.08);
        background: linear-gradient(180deg, rgba(18,18,20,0.85), rgba(18,18,20,0.96));
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        box-shadow: 0 -12px 32px rgba(0,0,0,0.28);
        pointer-events: auto;
        transition: transform 0.24s ease, opacity 0.2s ease;
    }
    .mobile-bottom-nav button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 56px;
        padding: 8px 4px;
        border: none;
        border-radius: 14px;
        background: rgba(255,255,255,0.02);
        color: var(--text-muted);
        font-size: 0.7rem;
        font-weight: 800;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-bottom-nav button span {
        font-size: 1.12rem;
        line-height: 1;
    }
    .mobile-bottom-nav button.active {
        color: var(--primary);
        background: rgba(191,90,242,0.18);
        box-shadow: inset 0 0 0 1px rgba(191,90,242,0.28);
    }
    .nav-links button {
        min-height: 48px;
    }
    .toast-container {
        bottom: calc(92px + env(safe-area-inset-bottom));
        width: min(92vw, 400px);
    }
}

/* Quick Preview Modal */
.quick-preview {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
    max-height: min(88vh, calc(100dvh - 32px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.quick-preview.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
.quick-preview-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.quick-preview-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}
.quick-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.quick-preview-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Animated Counter */
.counter-animate {
    display: inline-block;
    transition: all 0.3s ease;
}

/* Haptic feedback visual indicator */
.haptic-flash {
    animation: hapticPulse 0.15s ease;
}
@keyframes hapticPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Final mobile layout hardening */
@media (max-width: 820px) {
    #tools .tool-grid,
    #tools .resource-link-grid {
        grid-template-columns: 1fr !important;
    }

    #tools .tool-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 10px !important;
        gap: 10px !important;
    }

    #tools .tool-section-summary {
        align-items: flex-start;
        padding: 14px !important;
    }

    #tools .tool-section-summary strong {
        font-size: 1rem;
        line-height: 1.2;
    }

    #tools .tool-section-summary small {
        font-size: 0.86rem;
        line-height: 1.35;
    }

    #tools .tools-hub-card {
        padding: 14px !important;
        gap: 12px;
    }
    #tools .tool-compact-card {
        width: 100%;
        min-width: 0;
        padding: 14px !important;
        border-radius: 14px;
    }

    #tools .tool-compact-card h3 {
        font-size: 0.9rem;
        line-height: 1.1;
        margin-bottom: 6px;
    }

    #tools .tool-tile-card.tool-tile-collapsed {
        grid-template-columns: minmax(0, 1fr);
        min-height: 88px;
        padding: 14px !important;
    }

    #tools .tool-tile-card.tool-tile-collapsed h3 {
        font-size: 0.82rem;
        margin-bottom: 0;
    }

    #tools .tool-compact-card .hint {
        font-size: 0.92rem;
        line-height: 1.35;
    }

    #tools .tool-tile-card.tool-tile-collapsed > .hint {
        font-size: 0.66rem;
        line-height: 1.16;
    }

    #tools .input-group,
    #tools .input-group label,
    #tools .input-group input,
    #tools .input-group select,
    #tools .input-group textarea {
        min-width: 0;
        width: 100%;
    }

    #tools .tool-row {
        grid-template-columns: 1fr !important;
        gap: 8px;
        align-items: start;
    }

    #tools .tool-row > span:last-child {
        text-align: left !important;
        justify-self: start;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    #tools .sea-water-cost-summary {
        grid-template-columns: 1fr;
    }

    #tools .tool-favorites-add {
        grid-template-columns: 1fr;
    }

    #tools .tool-favorites-add button {
        width: 100%;
    }

    .custom-cr-matrix {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .custom-cr-matrix-header {
        display: none;
    }

    .custom-cr-matrix-label {
        margin-top: 8px;
    }

    .custom-cr-summary-grid,
    .custom-cr-product-grid,
    .custom-cr-delta-grid,
    .custom-cr-plan-grid,
    .custom-cr-remaining-grid {
        grid-template-columns: 1fr;
    }

    .custom-cr-limits-grid {
        grid-template-columns: minmax(64px, 0.8fr) repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .custom-cr-product-line {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .custom-cr-product-line span,
    .custom-cr-product-line small {
        text-align: left;
    }

    .custom-cr-saved-plan summary,
    .custom-cr-step-head {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Phase 1 cascade guard: keeps the app shell above legacy feature styles. */
#appHeader {
    background: color-mix(in srgb, var(--nav-bg) 94%, transparent) !important;
    border-bottom-color: var(--border-color) !important;
}

/* ========================================================================== 
   Priority 2: shared interactive component system
   ========================================================================== */

:root {
    --control-height: 48px;
    --control-height-compact: 38px;
    --control-bg: color-mix(in srgb, var(--surface-raised) 58%, var(--surface-card));
    --control-bg-hover: color-mix(in srgb, var(--surface-raised) 78%, var(--surface-card));
    --control-border: color-mix(in srgb, var(--border-color) 88%, transparent);
    --control-disabled-opacity: 0.48;
    --status-info: var(--accent);
    --overlay-bg: rgba(0, 10, 14, 0.72);
}

/* Buttons */
:where(.btn, button, .btn-primary, .btn-secondary, .btn-cancel, .btn-danger, .btn-warning, .btn-ghost, .btn-in, .btn-out) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    min-width: 44px;
    max-width: 100%;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    cursor: pointer;
    isolation: isolate;
    transition:
        background-color var(--transition-fast) var(--ease-standard),
        border-color var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard),
        box-shadow var(--transition-fast) var(--ease-standard),
        transform var(--transition-fast) var(--ease-standard),
        opacity var(--transition-fast) var(--ease-standard);
}

:where(.btn, button, .btn-primary, .btn-secondary, .btn-cancel, .btn-danger, .btn-warning, .btn-ghost, .btn-in, .btn-out):hover:not(:disabled):not([aria-disabled="true"]) {
    filter: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-subtle);
}

:where(.btn, button, .btn-primary, .btn-secondary, .btn-cancel, .btn-danger, .btn-warning, .btn-ghost, .btn-in, .btn-out):active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(0) scale(0.98);
    opacity: 0.92;
}

:where(.btn, button, .btn-primary, .btn-secondary, .btn-cancel, .btn-danger, .btn-warning, .btn-ghost, .btn-in, .btn-out):disabled,
:where(.btn, button, .btn-primary, .btn-secondary, .btn-cancel, .btn-danger, .btn-warning, .btn-ghost, .btn-in, .btn-out)[aria-disabled="true"] {
    opacity: var(--control-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

:where(.btn-primary, .btn.btn-primary) {
    color: #04171b;
    background: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 82%, white);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

:where(.btn-primary, .btn.btn-primary):hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 84%, white);
    border-color: color-mix(in srgb, var(--accent) 68%, white);
}

:where(.btn-secondary, .btn-cancel, .btn.btn-secondary) {
    color: var(--text-primary);
    background: var(--control-bg);
    border-color: var(--control-border);
    box-shadow: none;
}

:where(.btn-secondary, .btn-cancel, .btn.btn-secondary):hover:not(:disabled) {
    color: var(--text-primary);
    background: var(--control-bg-hover);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border-color));
}

:where(.btn-ghost, .btn.btn-ghost) {
    color: var(--text-secondary);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

:where(.btn-ghost, .btn.btn-ghost):hover:not(:disabled) {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
}

:where(.btn-danger, .btn.btn-danger, .btn-out) {
    color: #fff;
    background: color-mix(in srgb, var(--status-danger) 18%, var(--surface-card));
    border-color: color-mix(in srgb, var(--status-danger) 52%, var(--border-color));
    box-shadow: none;
}

:where(.btn-danger, .btn.btn-danger, .btn-out):hover:not(:disabled) {
    background: color-mix(in srgb, var(--status-danger) 28%, var(--surface-card));
    border-color: var(--status-danger);
}

:where(.btn-warning, .btn.btn-warning) {
    color: color-mix(in srgb, var(--status-warning) 26%, white);
    background: color-mix(in srgb, var(--status-warning) 16%, var(--surface-card));
    border-color: color-mix(in srgb, var(--status-warning) 48%, var(--border-color));
}

.btn-in {
    color: color-mix(in srgb, var(--status-success) 42%, white);
    background: color-mix(in srgb, var(--status-success) 15%, var(--surface-card));
    border-color: color-mix(in srgb, var(--status-success) 46%, var(--border-color));
    box-shadow: none;
}

.btn-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border-radius: var(--radius-md);
}

.btn-compact {
    min-height: var(--control-height-compact);
    min-width: 38px;
    padding: 7px 11px;
    font-size: 0.875rem;
}

.btn-block { width: 100%; }

.btn.is-loading,
button.is-loading {
    color: transparent !important;
    pointer-events: none;
}

.btn.is-loading::after,
button.is-loading::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-top-color: var(--text-primary);
    border-left-color: var(--text-primary);
    border-bottom-color: var(--text-primary);
    border-radius: 50%;
    animation: componentSpin 0.8s linear infinite;
}

.btn-group {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.btn-group > :where(button, .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-ghost) {
    flex: 1 1 150px;
    width: auto;
}

/* Forms */
.input-group,
.form-field {
    min-width: 0;
}

:where(.input-group, .form-field) > label:not(.switch):not(.google-drive-sync-toggle),
.field-label {
    display: block;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
}

.field-description,
.field-hint {
    display: block;
    margin: calc(var(--space-1) * -1) 0 var(--space-2);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.4;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    margin: 0 0 var(--space-4);
    padding: 11px 12px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    outline: none;
    background: var(--control-bg);
    background-image: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 1rem;
    line-height: 1.35;
    letter-spacing: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
    transition:
        border-color var(--transition-fast) var(--ease-standard),
        background-color var(--transition-fast) var(--ease-standard),
        box-shadow var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea):hover:not(:disabled):not([readonly]) {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border-color));
    background-color: var(--control-bg-hover);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea):focus {
    outline: none;
    border-color: var(--accent) !important;
    background-color: color-mix(in srgb, var(--control-bg) 88%, var(--accent));
    box-shadow: var(--focus-ring) !important;
}

:where(input, select, textarea)::placeholder {
    color: color-mix(in srgb, var(--text-secondary) 74%, transparent);
    opacity: 1;
}

:where(input, select, textarea):disabled {
    opacity: var(--control-disabled-opacity);
    cursor: not-allowed;
    background: color-mix(in srgb, var(--control-bg) 55%, var(--app-bg));
}

:where(input, select, textarea)[readonly] {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--control-bg) 58%, var(--app-bg));
    border-style: dashed;
}

:where(input, select, textarea)[aria-invalid="true"],
.field-invalid {
    border-color: var(--status-danger) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger) 22%, transparent) !important;
}

textarea {
    min-height: 116px;
    height: auto;
    resize: vertical;
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
        linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 17px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
}

input[type="file"] {
    padding: 7px;
    overflow: hidden;
}

input[type="file"]::file-selector-button {
    min-height: 34px;
    margin-right: var(--space-3);
    padding: 6px 10px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    box-shadow: 0 0 0 1000px var(--control-bg) inset !important;
    caret-color: var(--text-primary);
}

.field-with-unit { position: relative; }
.field-with-unit > :where(input, select) { padding-right: 64px; }
.field-unit {
    position: absolute;
    right: 12px;
    bottom: calc(var(--space-4) + 14px);
    max-width: 52px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1;
    pointer-events: none;
}

.field-message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: calc(var(--space-2) * -1) 0 var(--space-3);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.field-message-error { color: color-mix(in srgb, var(--status-danger) 72%, white); }
.field-message-error::before { content: "!"; font-weight: 900; }
.required-indicator { color: var(--status-warning); margin-left: 3px; }

/* Native checkbox, radio and switch controls */
input[type="checkbox"]:not(.switch input),
input[type="radio"] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

label:has(> input[type="checkbox"]:not(.switch input)),
label:has(> input[type="radio"]) {
    min-height: 44px;
}

.switch {
    position: relative;
    display: inline-flex;
    width: 52px;
    height: 32px;
    flex: 0 0 52px;
    align-items: center;
}

.switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.switch .slider {
    position: absolute;
    inset: 0;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-raised) 78%, var(--app-bg));
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-standard), border-color var(--transition-fast) var(--ease-standard);
}

.switch .slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.28);
    transition: transform var(--transition-fast) var(--ease-standard);
}

.switch input:checked + .slider {
    border-color: var(--accent);
    background: var(--accent);
}

.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:focus-visible + .slider { box-shadow: var(--focus-ring); }

/* Status badges and banners */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-raised) 70%, transparent);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.2;
}

.status-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: currentColor;
}

.status-info { color: color-mix(in srgb, var(--status-info) 62%, white); }
.status-success, .status-synced { color: color-mix(in srgb, var(--status-success) 66%, white); }
.status-warning, .status-pending { color: color-mix(in srgb, var(--status-warning) 72%, white); }
.status-danger, .status-critical, .status-error { color: color-mix(in srgb, var(--status-danger) 68%, white); }
.status-offline { color: var(--text-secondary); }

.notice-banner,
.alert-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: flex-start;
    width: 100%;
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-card) 90%, var(--status-info));
    color: var(--text-primary);
}

.notice-banner::before,
.alert-banner::before {
    content: "i";
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--status-info);
    font-size: 0.75rem;
    font-weight: 900;
}

.notice-banner strong,
.alert-banner strong { display: block; margin-bottom: 2px; }
.notice-banner p,
.alert-banner p { margin: 0; color: var(--text-secondary); }
.notice-warning, .alert-warning { border-left-color: var(--status-warning); }
.notice-warning::before, .alert-warning::before { content: "!"; color: var(--status-warning); }
.notice-danger, .alert-danger, .notice-critical { border-left-color: var(--status-danger); }
.notice-danger::before, .alert-danger::before, .notice-critical::before { content: "!"; color: var(--status-danger); }
.notice-success, .alert-success { border-left-color: var(--status-success); }
.notice-success::before, .alert-success::before { content: "✓"; color: var(--status-success); }
.notice-offline { border-left-color: var(--text-secondary); }

/* Toasts */
.toast-container {
    position: fixed;
    right: max(var(--space-4), env(safe-area-inset-right));
    bottom: max(var(--space-4), calc(var(--space-4) + var(--safe-bottom)));
    left: auto;
    z-index: 5200;
    display: flex;
    width: min(400px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    flex-direction: column;
    gap: var(--space-2);
    transform: none;
    pointer-events: none;
}

.toast {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 36px;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
    padding: 11px 10px 11px 12px;
    border: 1px solid var(--border-color);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
    color: var(--text-primary);
    box-shadow: var(--shadow-overlay);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    pointer-events: auto;
    animation: toastSlideIn var(--transition-base) var(--ease-standard) both;
}

.toast.success { border-left-color: var(--status-success); }
.toast.warning { border-left-color: var(--status-warning); }
.toast.error { border-left-color: var(--status-danger); }
.toast.info { border-left-color: var(--status-info); }
.toast-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--status-info);
    font-size: 0.75rem;
    font-weight: 900;
}
.toast.success .toast-icon { color: var(--status-success); }
.toast.warning .toast-icon { color: var(--status-warning); }
.toast.error .toast-icon { color: var(--status-danger); }
.toast-message { min-width: 0; color: var(--text-primary); font-size: 0.875rem; line-height: 1.4; overflow-wrap: anywhere; }
.toast-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.25rem;
    box-shadow: none;
}

/* Loading, empty and error states */
.state-panel,
.empty-state,
.error-state,
.loading-state {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: clamp(24px, 5vw, 44px) var(--space-4);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-card) 78%, transparent);
    color: var(--text-secondary);
    text-align: center;
}

.empty-state-icon,
.state-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 0 var(--space-1);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1rem;
    opacity: 1;
    animation: none;
}

.empty-state-title,
.state-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 800;
}

.empty-state-text,
.state-description {
    max-width: 48ch;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.error-state { border-color: color-mix(in srgb, var(--status-danger) 42%, var(--border-color)); }
.error-state .state-icon { color: var(--status-danger); }
.loading-state .state-icon,
.loading-indicator {
    width: 28px;
    height: 28px;
    border: 3px solid color-mix(in srgb, var(--accent) 25%, var(--border-color));
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: componentSpin 0.9s linear infinite;
}

.skeleton {
    background: linear-gradient(90deg, var(--surface-card) 20%, var(--surface-raised) 50%, var(--surface-card) 80%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.8s ease-in-out infinite;
}

@keyframes componentSpin { to { transform: rotate(360deg); } }

/* Dialog system, including the existing stock modal */
.app-dialog,
.modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
    padding: max(var(--space-4), var(--safe-top)) var(--space-4) max(var(--space-4), var(--safe-bottom));
    overflow: hidden;
    background: var(--overlay-bg);
    backdrop-filter: blur(12px) saturate(0.8);
    -webkit-backdrop-filter: blur(12px) saturate(0.8);
}

.app-dialog[open],
.app-dialog.is-open,
.modal[style*="flex"] { display: flex; }

.app-dialog-panel,
.modal-content {
    display: flex;
    width: min(100%, 520px);
    max-width: 520px;
    max-height: min(88dvh, 720px);
    flex-direction: column;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-overlay);
    animation: dialogEnter var(--transition-base) var(--ease-standard) both;
}

.app-dialog.is-wide .app-dialog-panel {
    width: min(100%, 960px);
    max-width: 960px;
    max-height: min(92dvh, 900px);
}

.modal-content {
    display: block;
    padding: var(--space-5);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.app-dialog-header {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-5) var(--space-5) var(--space-3);
}

.app-dialog-status {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--status-info);
    font-size: 0.8125rem;
    font-weight: 900;
}

.app-dialog-eyebrow {
    margin: 0 0 2px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.app-dialog h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.15rem, 3vw, 1.4rem);
    line-height: 1.25;
}

.app-dialog-body {
    min-height: 0;
    padding: 0 var(--space-5) var(--space-4);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.app-dialog-body > #appDialogDescription { margin: 0; color: var(--text-secondary); white-space: pre-line; }
.app-dialog-fields { margin-top: var(--space-4); }
.app-dialog-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    padding: var(--space-4) var(--space-5) max(var(--space-5), var(--safe-bottom));
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-raised) 42%, var(--surface-card));
}
.app-dialog-actions .btn { width: auto; min-width: 120px; }
.app-dialog.is-warning .app-dialog-status { color: var(--status-warning); }
.app-dialog.is-danger .app-dialog-status { color: var(--status-danger); }
.app-dialog.is-success .app-dialog-status { color: var(--status-success); }

.legal-modal {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
    padding: max(var(--space-4), var(--safe-top)) var(--space-4) max(var(--space-4), var(--safe-bottom));
    background: var(--overlay-bg);
    backdrop-filter: blur(14px) saturate(0.86);
    -webkit-backdrop-filter: blur(14px) saturate(0.86);
}

.legal-modal.is-open {
    display: flex;
}

.legal-modal-panel {
    display: flex;
    width: min(980px, calc(100vw - 32px));
    height: min(88dvh, 860px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-overlay);
    animation: dialogEnter var(--transition-base) var(--ease-standard) both;
}

.legal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-raised) 56%, var(--surface-card));
}

.legal-modal-eyebrow {
    margin: 0 0 2px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.15rem, 2vw, 1.42rem);
}

.legal-modal-close {
    --close-size: 34px;
    width: var(--close-size);
    height: var(--close-size);
    min-width: var(--close-size);
    min-height: var(--close-size);
    max-width: var(--close-size);
    max-height: var(--close-size);
    flex: 0 0 var(--close-size);
    padding: 0 !important;
    border-radius: 50%;
    color: var(--text-secondary);
    background:
        linear-gradient(180deg, color-mix(in srgb, white 10%, transparent), transparent),
        color-mix(in srgb, var(--surface-raised) 78%, transparent);
    border-color: color-mix(in srgb, var(--border-color) 82%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 12%, transparent),
        0 10px 24px rgba(0, 0, 0, 0.18);
    line-height: 1;
    backdrop-filter: blur(14px) saturate(1.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    aspect-ratio: 1 / 1;
}

.legal-modal-close span,
.legal-modal-close span::before,
.legal-modal-close span::after {
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
}

.legal-modal-close span {
    width: 13px;
    height: 13px;
}

.legal-modal-close span::before,
.legal-modal-close span::after {
    content: "";
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
}

.legal-modal-close span::before {
    transform: rotate(45deg);
}

.legal-modal-close span::after {
    transform: rotate(-45deg);
}

.legal-modal-close:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border-color));
    background:
        linear-gradient(180deg, color-mix(in srgb, white 14%, transparent), transparent),
        color-mix(in srgb, var(--accent) 13%, var(--surface-raised));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 18%, transparent),
        0 14px 30px color-mix(in srgb, var(--accent) 16%, transparent);
}

.legal-modal-close:active {
    transform: scale(0.94);
}

.legal-modal-close:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 36%, transparent);
    outline-offset: 3px;
}

.legal-modal-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    background: var(--app-bg);
}

.trade-showcase-modal {
    position: fixed;
    inset: 0;
    z-index: 5300;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
    padding: max(var(--space-4), var(--safe-top)) var(--space-4) max(var(--space-4), var(--safe-bottom));
    background:
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(51, 214, 255, 0.18), transparent 34%),
        rgba(0, 10, 18, 0.78);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.trade-showcase-modal.is-open {
    display: flex;
}

.trade-showcase-panel {
    position: relative;
    width: min(1280px, calc(100vw - 28px), calc((100dvh - max(var(--space-4), var(--safe-top)) - max(var(--space-4), var(--safe-bottom)) - 8px) * 16 / 9));
    aspect-ratio: 16 / 9;
    max-height: min(91dvh, 720px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-color));
    border-radius: clamp(18px, 3vw, 30px);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--surface-card) 96%, transparent), color-mix(in srgb, var(--surface-raised) 86%, transparent)),
        var(--surface-card);
    color: var(--text-primary);
    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 color-mix(in srgb, white 14%, transparent);
    animation: dialogEnter var(--transition-base) var(--ease-standard) both;
}

.trade-showcase-close {
    position: absolute;
    top: max(14px, var(--safe-top));
    right: 14px;
    z-index: 12;
}

.trade-showcase-content {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(8px, 1vw, 13px);
    height: 100%;
    min-height: 0;
    overflow: clip;
    padding: clamp(13px, 1.75vw, 23px);
}

.trade-showcase-header {
    position: relative;
    top: auto;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: clamp(12px, 2vw, 28px);
    align-items: end;
    min-height: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.trade-showcase-header h2 {
    margin: 2px 0 0;
    font-size: clamp(1.45rem, 3vw, 2.8rem);
    line-height: 0.96;
}

.trade-showcase-header > p {
    margin: 0 0 2px;
    color: var(--text-secondary);
    font-size: clamp(0.75rem, 1.15vw, 1rem);
    font-weight: 750;
    white-space: nowrap;
}

.trade-showcase-header > .trade-showcase-url {
    color: var(--accent);
    font-size: clamp(0.82rem, 1.25vw, 1.08rem);
    font-weight: 900;
}

.trade-showcase-kicker {
    color: var(--accent);
    font-size: clamp(0.52rem, 0.72vw, 0.7rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.trade-showcase-badges,
.trade-showcase-nav {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.7vw, 9px);
}

.trade-showcase-badges span,
.trade-showcase-nav span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface-card));
    color: var(--text-primary);
    font-size: clamp(0.52rem, 0.72vw, 0.7rem);
    font-weight: 850;
    white-space: nowrap;
}

.trade-showcase-stage {
    display: grid;
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
    gap: clamp(8px, 1vw, 13px);
    min-height: 0;
}

.trade-showcase-media,
.trade-showcase-app,
.trade-showcase-widget {
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-color));
    background:
        linear-gradient(180deg, color-mix(in srgb, white 8%, transparent), transparent),
        color-mix(in srgb, var(--surface-raised) 78%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), var(--shadow-sm);
}

.trade-showcase-media {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border-radius: clamp(12px, 1.5vw, 20px);
    isolation: isolate;
}

.trade-showcase-media > img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    display: block;
    transform: scale(1.03);
    animation: showcaseImageDrift 12s ease-in-out infinite alternate;
}

.trade-showcase-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 10, 18, 0.18), transparent 42%),
        linear-gradient(0deg, rgba(0, 10, 18, 0.78), transparent 60%);
    pointer-events: none;
}

.trade-showcase-media-copy {
    position: absolute;
    left: clamp(12px, 1.5vw, 20px);
    right: clamp(12px, 1.5vw, 20px);
    bottom: clamp(10px, 1.3vw, 18px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trade-showcase-media-copy span {
    color: color-mix(in srgb, white 76%, var(--accent));
    font-size: clamp(0.52rem, 0.7vw, 0.68rem);
    font-weight: 850;
    text-transform: uppercase;
}

.trade-showcase-media-copy strong {
    color: white;
    font-size: clamp(0.9rem, 1.5vw, 1.45rem);
    line-height: 1.05;
}

.trade-showcase-qr {
    position: absolute;
    right: clamp(10px, 1.2vw, 16px);
    top: clamp(10px, 1.2vw, 16px);
    z-index: 3;
    display: grid;
    grid-template-columns: clamp(72px, 7.8vw, 104px) auto;
    align-items: center;
    gap: clamp(7px, 0.8vw, 11px);
    padding: clamp(6px, 0.7vw, 9px);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: clamp(10px, 1.2vw, 15px);
    background: rgba(2, 12, 18, 0.84);
    color: white;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
    text-decoration: none;
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

.trade-showcase-qr img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 5px solid white;
    border-radius: 7px;
    background: white;
}

.trade-showcase-qr span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.trade-showcase-qr small {
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(0.48rem, 0.63vw, 0.62rem);
    font-weight: 800;
    text-transform: uppercase;
}

.trade-showcase-qr strong {
    color: white;
    font-size: clamp(0.7rem, 0.95vw, 0.92rem);
    white-space: nowrap;
}

.trade-showcase-qr:hover {
    border-color: color-mix(in srgb, var(--accent) 72%, white);
    transform: translateY(-2px);
}

.trade-showcase-app {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: clamp(12px, 1.5vw, 20px);
    background: color-mix(in srgb, var(--surface-card) 94%, transparent);
}

.trade-showcase-appbar {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: clamp(28px, 3.3vw, 40px);
    padding: 5px clamp(9px, 1vw, 13px);
    border-bottom: 1px solid var(--border-color);
    font-size: clamp(0.56rem, 0.78vw, 0.76rem);
}

.trade-showcase-appdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success, #35d07f);
    box-shadow: 0 0 12px color-mix(in srgb, var(--success, #35d07f) 65%, transparent);
}

.trade-showcase-live {
    margin-left: auto;
    color: var(--text-secondary);
    font-weight: 750;
}

.trade-showcase-dashboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(5px, 0.7vw, 9px);
    min-height: 0;
    padding: clamp(6px, 0.8vw, 10px);
}

.trade-showcase-widget {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: clamp(7px, 0.9vw, 11px);
    border-radius: clamp(8px, 1vw, 12px);
    animation: showcaseCardIn 620ms var(--ease-standard) both;
}

.trade-showcase-widget:nth-child(2) { animation-delay: 50ms; }
.trade-showcase-widget:nth-child(3) { animation-delay: 100ms; }
.trade-showcase-widget:nth-child(4) { animation-delay: 150ms; }
.trade-showcase-widget:nth-child(5) { animation-delay: 200ms; }
.trade-showcase-widget:nth-child(6) { animation-delay: 250ms; }

.trade-showcase-widget-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 7px;
    margin-bottom: clamp(5px, 0.65vw, 8px);
    font-size: clamp(0.5rem, 0.68vw, 0.66rem);
}

.trade-showcase-widget-head span {
    color: var(--text-primary);
    font-size: clamp(0.62rem, 0.88vw, 0.88rem);
    font-weight: 900;
}

.trade-showcase-widget-head strong,
.trade-showcase-widget small {
    color: var(--text-secondary);
    font-size: inherit;
    font-weight: 750;
    white-space: nowrap;
}

.trade-showcase-stock-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    font-size: clamp(0.47rem, 0.64vw, 0.64rem);
    font-weight: 800;
}

.trade-showcase-stock-row i {
    position: relative;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 18%, transparent);
}

.trade-showcase-stock-row i::after {
    content: "";
    display: block;
    width: var(--level);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 58%, #35d07f));
}

.trade-showcase-stock-row b {
    color: var(--text-secondary);
    font-size: inherit;
    text-align: right;
}

.trade-showcase-chart svg {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: visible;
    color: var(--accent);
}

.trade-showcase-chart-area { fill: url(#showcaseChartFill); }
.trade-showcase-chart-line { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.trade-showcase-chart circle { fill: var(--surface-card); stroke: currentColor; stroke-width: 3; }

.trade-showcase-mix {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1 1 auto;
    margin-bottom: 4px;
    padding: 3px 7px;
    border-left: 3px solid var(--accent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-size: clamp(0.5rem, 0.72vw, 0.7rem);
}

.trade-showcase-trace small,
.trade-showcase-coral small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.trade-showcase-todos > div:not(.trade-showcase-widget-head) {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    font-size: clamp(0.48rem, 0.68vw, 0.66rem);
    font-weight: 700;
    white-space: nowrap;
}

.trade-showcase-todos i {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--border-color));
    border-radius: 3px;
}

.trade-showcase-todos i.is-done {
    background: var(--accent);
    box-shadow: inset 0 0 0 2px var(--surface-card);
}

.trade-showcase-tools > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    flex: 1 1 auto;
}

.trade-showcase-tools > div:last-child span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-color));
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    font-size: clamp(0.46rem, 0.64vw, 0.62rem);
    font-weight: 800;
    text-align: center;
}

.trade-showcase-coral-visual {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 7px;
    flex: 1 1 auto;
}

.trade-showcase-coral-visual span {
    width: clamp(16px, 2vw, 26px);
    height: clamp(16px, 2vw, 26px);
    border-radius: 42% 58% 52% 48%;
    background: radial-gradient(circle at 35% 30%, white 0 5%, var(--accent) 7% 25%, color-mix(in srgb, var(--accent) 36%, #ff6fae));
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

.trade-showcase-coral-visual span:nth-child(2) { transform: translateY(-5px) scale(1.15); filter: hue-rotate(55deg); }
.trade-showcase-coral-visual span:nth-child(3) { filter: hue-rotate(285deg); }

.trade-showcase-nav {
    justify-content: center;
    min-width: 0;
}

.trade-showcase-nav span {
    min-height: 22px;
    padding: 3px clamp(6px, 0.8vw, 10px);
}

.trade-showcase-content {
    display: block;
}

.trade-showcase-cinema {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(9px, 1.15vw, 16px);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 28%),
        radial-gradient(circle at 88% 72%, rgba(79, 255, 199, 0.16), transparent 32%),
        linear-gradient(135deg, rgba(2, 15, 24, 0.96), color-mix(in srgb, var(--surface-card) 86%, #02131c));
}

.trade-showcase-cinema::before {
    content: "";
    position: absolute;
    inset: -35%;
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.11) 48%, transparent 56%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 82px);
    opacity: 0.45;
    transform: rotate(-8deg);
    animation: showcaseLightSweep 18s ease-in-out infinite;
    pointer-events: none;
}

.trade-showcase-brandbar {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(10px, 1.5vw, 22px);
    min-width: 0;
    padding-right: clamp(46px, 4.8vw, 64px);
}

.trade-showcase-brandbar h2 {
    margin: 2px 0 0;
    font-size: clamp(1.32rem, 2.8vw, 2.95rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.trade-showcase-slides {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-color));
    border-radius: clamp(14px, 1.7vw, 24px);
    background:
        linear-gradient(180deg, color-mix(in srgb, white 8%, transparent), transparent),
        rgba(3, 20, 31, 0.78);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 13%, transparent),
        0 18px 55px rgba(0, 0, 0, 0.3);
}

.trade-showcase-slide {
    --slide-duration: 49s;
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(14px, 2vw, 32px);
    align-items: center;
    min-width: 0;
    min-height: 0;
    padding: clamp(18px, 2.4vw, 36px);
    opacity: 0;
    transform: translateX(4%) scale(0.985);
    animation: showcaseSlideCycle var(--slide-duration) ease-in-out infinite;
    animation-delay: calc(var(--slide-index) * 7s);
    pointer-events: none;
}

.trade-showcase-slide-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    isolation: isolate;
}

.trade-showcase-slide-hero > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.86;
    transform: scale(1.06);
    animation: showcaseHeroDrift 42s ease-in-out infinite;
}

.trade-showcase-slide-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(1, 11, 18, 0.84), rgba(1, 11, 18, 0.24) 56%, rgba(1, 11, 18, 0.76)),
        linear-gradient(0deg, rgba(1, 11, 18, 0.86), transparent 62%);
}

.trade-showcase-hero-copy,
.trade-showcase-slide-copy {
    min-width: 0;
}

.trade-showcase-hero-copy span,
.trade-showcase-slide-copy span {
    display: inline-flex;
    margin-bottom: clamp(7px, 0.9vw, 12px);
    color: var(--accent);
    font-size: clamp(0.62rem, 0.85vw, 0.86rem);
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trade-showcase-hero-copy strong,
.trade-showcase-slide-copy h3 {
    display: block;
    max-width: 11.5em;
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2.05rem, 4.5vw, 5rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.trade-showcase-slide-copy h3 {
    font-size: clamp(1.72rem, 3.8vw, 4.35rem);
}

.trade-showcase-slide-copy p {
    max-width: 34em;
    margin: clamp(9px, 1.1vw, 15px) 0 0;
    color: color-mix(in srgb, var(--text-secondary) 88%, white);
    font-size: clamp(0.82rem, 1.25vw, 1.32rem);
    line-height: 1.34;
}

.trade-showcase-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1vw, 14px);
    max-width: min(680px, 100%);
}

.trade-showcase-hero-stats span,
.trade-showcase-metric-grid span,
.trade-showcase-analysis-demo div,
.trade-showcase-stock-demo,
.trade-showcase-recipe-demo,
.trade-showcase-tool-wall span {
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-color));
    background:
        linear-gradient(180deg, color-mix(in srgb, white 10%, transparent), transparent),
        color-mix(in srgb, var(--surface-card) 82%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 11%, transparent);
}

.trade-showcase-hero-stats span {
    display: grid;
    min-width: clamp(112px, 11vw, 152px);
    padding: clamp(9px, 1vw, 14px);
    border-radius: clamp(12px, 1.2vw, 17px);
}

.trade-showcase-hero-stats b {
    color: var(--text-primary);
    font-size: clamp(1.15rem, 2.4vw, 2.7rem);
    line-height: 1;
}

.trade-showcase-hero-stats small {
    color: var(--text-secondary);
    font-weight: 800;
}

.trade-showcase-device {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: clamp(9px, 1.2vw, 16px);
    min-width: 0;
    min-height: 0;
    padding: clamp(11px, 1.5vw, 21px);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border-color));
    border-radius: clamp(18px, 2vw, 28px);
    background:
        linear-gradient(180deg, rgba(255,255,255,.09), transparent),
        rgba(4, 22, 34, 0.84);
}

.trade-showcase-device-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-secondary);
    font-size: clamp(0.62rem, 0.85vw, 0.82rem);
    font-weight: 850;
}

.trade-showcase-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(6px, 0.8vw, 11px);
}

.trade-showcase-metric-grid span {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: clamp(8px, 1vw, 13px);
    border-radius: 12px;
}

.trade-showcase-metric-grid b {
    color: var(--accent);
    font-size: clamp(1rem, 2vw, 2rem);
    line-height: 1;
}

.trade-showcase-metric-grid small {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: clamp(0.52rem, 0.72vw, 0.7rem);
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trade-showcase-wide-chart {
    width: 100%;
    height: 100%;
    min-height: 110px;
    color: var(--accent);
}

.trade-showcase-wide-chart path {
    fill: none;
    stroke: currentColor;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 760;
    stroke-dashoffset: 760;
    animation: showcaseDrawLine 7s ease-in-out infinite;
}

.trade-showcase-wide-chart circle {
    fill: var(--surface-card);
    stroke: currentColor;
    stroke-width: 5;
}

.trade-showcase-split-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: clamp(10px, 1.4vw, 20px);
    min-width: 0;
}

.trade-showcase-stock-demo,
.trade-showcase-recipe-demo {
    display: grid;
    gap: clamp(8px, 1vw, 13px);
    min-width: 0;
    padding: clamp(13px, 1.7vw, 24px);
    border-radius: clamp(14px, 1.6vw, 22px);
}

.trade-showcase-stock-demo strong,
.trade-showcase-recipe-demo strong {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
}

.trade-showcase-stock-demo label {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-weight: 850;
}

.trade-showcase-stock-demo i {
    position: relative;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 17%, transparent);
}

.trade-showcase-stock-demo i::after {
    content: "";
    display: block;
    width: var(--level);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #4fffc7);
    animation: showcaseStockFill 7s ease-in-out infinite;
}

.trade-showcase-recipe-demo span {
    color: var(--accent);
    font-size: clamp(2rem, 4.5vw, 4.8rem);
    font-weight: 950;
    line-height: 1;
}

.trade-showcase-recipe-demo b {
    color: var(--text-primary);
    font-size: clamp(0.9rem, 1.25vw, 1.2rem);
}

.trade-showcase-recipe-demo small {
    color: var(--text-secondary);
    line-height: 1.35;
}

.trade-showcase-tool-wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 14px);
    min-width: 0;
}

.trade-showcase-tool-wall span {
    display: flex;
    align-items: center;
    min-height: clamp(42px, 5.5vw, 70px);
    padding: clamp(8px, 1vw, 14px);
    border-radius: clamp(12px, 1.4vw, 18px);
    color: var(--text-primary);
    font-size: clamp(0.8rem, 1.25vw, 1.28rem);
    font-weight: 920;
}

.trade-showcase-tool-wall span:nth-child(odd) {
    color: var(--accent);
    transform: translateY(-4px);
}

.trade-showcase-analysis-demo {
    display: grid;
    gap: clamp(10px, 1.4vw, 18px);
    min-width: 0;
}

.trade-showcase-analysis-demo div {
    display: grid;
    grid-template-columns: minmax(80px, 0.32fr) minmax(0, 1fr);
    gap: clamp(8px, 1vw, 14px);
    align-items: center;
    min-width: 0;
    padding: clamp(13px, 1.7vw, 22px);
    border-radius: clamp(13px, 1.5vw, 20px);
}

.trade-showcase-analysis-demo b {
    color: var(--accent);
    font-size: clamp(1.05rem, 1.8vw, 2rem);
}

.trade-showcase-analysis-demo small {
    color: var(--text-secondary);
    font-size: clamp(0.72rem, 1.05vw, 1rem);
    line-height: 1.3;
}

.trade-showcase-scan-badge {
    position: absolute;
    top: clamp(16px, 1.7vw, 26px);
    right: clamp(16px, 1.7vw, 26px);
    z-index: 5;
    display: grid;
    grid-template-columns: clamp(48px, 5.1vw, 70px) minmax(0, auto);
    gap: clamp(9px, 1vw, 14px);
    align-items: center;
    max-width: min(31%, 280px);
    padding: clamp(6px, 0.78vw, 10px) clamp(10px, 1.1vw, 15px) clamp(6px, 0.78vw, 10px) clamp(6px, 0.78vw, 10px);
    border: 1px solid color-mix(in srgb, var(--accent) 42%, white 12%);
    border-radius: clamp(18px, 1.9vw, 28px);
    background:
        radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
        rgba(2, 13, 20, 0.74);
    color: white;
    text-decoration: none;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.34),
        0 0 28px color-mix(in srgb, var(--accent) 16%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(18px) saturate(1.18);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

.trade-showcase-scan-badge::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.trade-showcase-qr-frame {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    border-radius: 16px;
    background:
        linear-gradient(135deg, white, color-mix(in srgb, white 92%, var(--accent)));
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.54),
        0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
}

.trade-showcase-qr-frame::after {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    border-radius: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent 64%);
    opacity: 0.75;
}

.trade-showcase-scan-badge img {
    display: block;
    width: 88%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: white;
    box-shadow: none;
}

.trade-showcase-scan-badge span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.trade-showcase-scan-badge strong {
    color: white;
    font-size: clamp(0.68rem, 0.9vw, 0.95rem);
    font-weight: 950;
    line-height: 1.05;
    white-space: nowrap;
}

.trade-showcase-scan-badge small {
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: color-mix(in srgb, var(--accent) 78%, white);
    font-size: clamp(0.48rem, 0.62vw, 0.64rem);
    font-weight: 900;
    line-height: 1.08;
    white-space: nowrap;
}

.trade-showcase-install-demo {
    display: grid;
    gap: clamp(10px, 1.35vw, 18px);
    min-width: 0;
}

.trade-showcase-phone-card {
    display: grid;
    grid-template-columns: clamp(42px, 5vw, 62px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(10px, 1.2vw, 16px);
    min-width: 0;
    padding: clamp(13px, 1.7vw, 23px);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-color));
    border-radius: clamp(14px, 1.6vw, 22px);
    background:
        linear-gradient(180deg, color-mix(in srgb, white 10%, transparent), transparent),
        color-mix(in srgb, var(--surface-card) 82%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 11%, transparent);
}

.trade-showcase-phone-card b {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent), #4fffc7);
    color: color-mix(in srgb, var(--app-bg) 86%, black);
    font-size: clamp(1.05rem, 1.9vw, 2rem);
    line-height: 1;
}

.trade-showcase-phone-card span {
    color: var(--text-primary);
    font-size: clamp(0.9rem, 1.45vw, 1.55rem);
    font-weight: 930;
    line-height: 1.12;
}

.trade-showcase-final-qr {
    position: relative;
    inset: auto;
    justify-self: center;
    display: grid;
    grid-template-columns: clamp(140px, 16vw, 220px) minmax(0, auto);
    gap: clamp(14px, 1.8vw, 24px);
    width: min(100%, 520px);
    padding: clamp(12px, 1.5vw, 20px);
    border-radius: clamp(18px, 2vw, 28px);
    transform: none;
}

.trade-showcase-final-qr strong {
    font-size: clamp(1.05rem, 1.8vw, 1.8rem);
}

.trade-showcase-progress {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(5px, 0.75vw, 10px);
}

.trade-showcase-progress span {
    height: clamp(4px, 0.55vw, 7px);
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 18%, transparent);
}

.trade-showcase-progress span::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #4fffc7);
    transform: scaleX(0);
    transform-origin: left center;
    animation: showcaseProgress 49s linear infinite;
}

.trade-showcase-progress span:nth-child(1)::after { animation-delay: 0s; }
.trade-showcase-progress span:nth-child(2)::after { animation-delay: 7s; }
.trade-showcase-progress span:nth-child(3)::after { animation-delay: 14s; }
.trade-showcase-progress span:nth-child(4)::after { animation-delay: 21s; }
.trade-showcase-progress span:nth-child(5)::after { animation-delay: 28s; }
.trade-showcase-progress span:nth-child(6)::after { animation-delay: 35s; }
.trade-showcase-progress span:nth-child(7)::after { animation-delay: 42s; }

@keyframes showcaseImageDrift {
    from { transform: scale(1.03) translate3d(-4px, 0, 0); }
    to { transform: scale(1.08) translate3d(8px, -4px, 0); }
}

@keyframes showcaseCardIn {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes showcaseSlideCycle {
    0%, 12.15% { opacity: 1; transform: translateX(0) scale(1); }
    14.25%, 100% { opacity: 0; transform: translateX(-3%) scale(0.99); }
}

@keyframes showcaseProgress {
    0%, 14.28% { transform: scaleX(0); opacity: 0.3; }
    14.29% { transform: scaleX(0); opacity: 1; }
    28.48% { transform: scaleX(1); opacity: 1; }
    28.58%, 100% { transform: scaleX(1); opacity: 0.22; }
}

@keyframes showcaseHeroDrift {
    0% { transform: scale(1.06) translate3d(-8px, 0, 0); }
    50% { transform: scale(1.1) translate3d(10px, -5px, 0); }
    100% { transform: scale(1.07) translate3d(-4px, 4px, 0); }
}

@keyframes showcaseLightSweep {
    0%, 100% { transform: translateX(-5%) rotate(-8deg); opacity: 0.28; }
    50% { transform: translateX(9%) rotate(-8deg); opacity: 0.54; }
}

@keyframes showcaseDrawLine {
    0%, 12% { stroke-dashoffset: 760; }
    42%, 100% { stroke-dashoffset: 0; }
}

@keyframes showcaseStockFill {
    0%, 15% { transform: scaleX(0.35); transform-origin: left center; }
    50%, 100% { transform: scaleX(1); transform-origin: left center; }
}

@media (max-width: 620px) {
    .trade-showcase-modal {
        padding: max(10px, var(--safe-top)) 10px max(10px, var(--safe-bottom));
    }

    .trade-showcase-panel {
        width: min(calc(100vw - 14px), calc((100dvh - 18px) * 16 / 9));
        height: auto;
        max-height: calc(100dvh - 18px);
        border-radius: 14px;
    }

    .trade-showcase-content {
        padding: 7px;
    }

    .trade-showcase-cinema {
        gap: 5px;
    }

    .trade-showcase-brandbar h2 {
        font-size: clamp(0.82rem, 4.3vw, 1.12rem);
    }

    .trade-showcase-brandbar .trade-showcase-kicker {
        display: none;
    }

    .trade-showcase-slide {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 9px;
    }

    .trade-showcase-hero-copy strong,
    .trade-showcase-slide-copy h3 {
        max-width: 11.5em;
        font-size: clamp(1.08rem, 6.1vw, 1.72rem);
    }

    .trade-showcase-slide-copy p {
        max-width: 100%;
        margin-top: 5px;
        font-size: clamp(0.48rem, 2.3vw, 0.68rem);
        line-height: 1.24;
    }

    .trade-showcase-hero-stats {
        gap: 4px;
    }

    .trade-showcase-hero-stats span {
        min-width: 70px;
        padding: 5px 6px;
        border-radius: 8px;
    }

    .trade-showcase-hero-stats b {
        font-size: 0.92rem;
    }

    .trade-showcase-hero-stats small,
    .trade-showcase-slide-copy span {
        font-size: 0.42rem;
    }

    .trade-showcase-device {
        gap: 5px;
        padding: 6px;
        border-radius: 10px;
    }

    .trade-showcase-device-bar {
        font-size: 0.42rem;
    }

    .trade-showcase-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .trade-showcase-metric-grid span {
        padding: 5px;
        border-radius: 7px;
    }

    .trade-showcase-metric-grid b {
        font-size: 0.92rem;
    }

    .trade-showcase-metric-grid small {
        font-size: 0.38rem;
    }

    .trade-showcase-wide-chart {
        min-height: 42px;
        max-height: 72px;
    }

    .trade-showcase-split-demo,
    .trade-showcase-install-demo,
    .trade-showcase-tool-wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .trade-showcase-stock-demo,
    .trade-showcase-recipe-demo,
    .trade-showcase-analysis-demo div,
    .trade-showcase-phone-card,
    .trade-showcase-tool-wall span {
        padding: 6px;
        border-radius: 8px;
    }

    .trade-showcase-stock-demo {
        gap: 4px;
    }

    .trade-showcase-stock-demo strong,
    .trade-showcase-recipe-demo strong,
    .trade-showcase-analysis-demo b,
    .trade-showcase-phone-card span,
    .trade-showcase-tool-wall span {
        font-size: 0.52rem;
    }

    .trade-showcase-phone-card {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 5px;
    }

    .trade-showcase-phone-card b {
        border-radius: 7px;
        font-size: 0.64rem;
    }

    .trade-showcase-stock-demo label {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        gap: 3px;
        font-size: 0.38rem;
    }

    .trade-showcase-stock-demo i {
        height: 4px;
    }

    .trade-showcase-recipe-demo span {
        font-size: 1.12rem;
    }

    .trade-showcase-recipe-demo b,
    .trade-showcase-recipe-demo small,
    .trade-showcase-analysis-demo small {
        font-size: 0.42rem;
        line-height: 1.18;
    }

    .trade-showcase-analysis-demo {
        gap: 5px;
    }

    .trade-showcase-analysis-demo div {
        grid-template-columns: 45px minmax(0, 1fr);
    }

    .trade-showcase-final-qr {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 7px;
        width: min(100%, 240px);
        padding: 7px;
    }

    .trade-showcase-scan-badge {
        grid-template-columns: 32px minmax(0, auto);
        gap: 5px;
        max-width: 142px;
        padding: 4px 7px 4px 4px;
        border-radius: 12px;
    }

    .trade-showcase-qr-frame {
        border-radius: 8px;
    }

    .trade-showcase-qr-frame::after {
        inset: -3px;
        border-radius: 10px;
    }

    .trade-showcase-scan-badge img {
        border-radius: 4px;
    }

    .trade-showcase-scan-badge strong {
        font-size: 0.42rem;
    }

    .trade-showcase-scan-badge small {
        padding: 2px 4px;
        font-size: 0.32rem;
    }

    .trade-showcase-final-qr strong {
        font-size: 0.72rem;
    }

    .trade-showcase-progress span {
        height: 3px;
    }

    .trade-showcase-close {
        top: 10px;
        right: 10px;
    }

    .trade-showcase-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        align-items: center;
    }

    .trade-showcase-header h2 { font-size: clamp(0.78rem, 4.4vw, 1.1rem); }
    .trade-showcase-kicker { display: none; }
    .trade-showcase-header > p,
    .trade-showcase-badges span:not(:first-child),
    .trade-showcase-media,
    .trade-showcase-nav {
        display: none;
    }

    .trade-showcase-badges span {
        min-height: 18px;
        padding: 2px 5px;
        font-size: 0.42rem;
    }

    .trade-showcase-stage { grid-template-columns: minmax(0, 1fr); }
    .trade-showcase-appbar { min-height: 20px; padding: 2px 7px; font-size: 0.44rem; }
    .trade-showcase-dashboard { gap: 3px; padding: 3px; }
    .trade-showcase-widget { padding: 4px; border-radius: 5px; }
    .trade-showcase-widget-head { margin-bottom: 2px; }
    .trade-showcase-widget-head span { font-size: clamp(0.42rem, 2vw, 0.54rem); }
    .trade-showcase-widget-head strong,
    .trade-showcase-widget small { font-size: clamp(0.34rem, 1.55vw, 0.43rem); }
    .trade-showcase-stock-row { grid-template-columns: 23px minmax(0, 1fr) 19px; gap: 3px; font-size: clamp(0.34rem, 1.55vw, 0.43rem); }
    .trade-showcase-mix { margin-bottom: 2px; padding: 1px 4px; font-size: clamp(0.34rem, 1.55vw, 0.43rem); }
    .trade-showcase-todos > div:not(.trade-showcase-widget-head) { gap: 3px; font-size: clamp(0.33rem, 1.5vw, 0.42rem); }
    .trade-showcase-todos i { width: 7px; height: 7px; flex-basis: 7px; }
    .trade-showcase-tools > div:last-child { gap: 2px; }
    .trade-showcase-tools > div:last-child span { border-radius: 3px; font-size: clamp(0.32rem, 1.45vw, 0.4rem); }
    .trade-showcase-coral-visual { gap: 3px; }
    .trade-showcase-coral-visual span { width: 11px; height: 11px; }
    .trade-showcase-close {
        width: 24px;
        height: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trade-showcase-media img,
    .trade-showcase-widget {
        animation: none !important;
    }
}

html.legal-embedded,
html.legal-embedded body.legal-page {
    background: transparent !important;
}

html.legal-embedded body.legal-page {
    min-height: auto;
}

html.legal-embedded .legal-shell {
    width: min(920px, calc(100vw - 24px));
    margin: 14px auto 28px !important;
}

@keyframes dialogEnter {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 767px) {
    .btn-mobile-block { width: 100%; }
    .toast-container {
        right: 12px;
        bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + 12px);
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }
    .app-dialog,
    .modal {
        align-items: flex-end;
        padding: var(--space-3) var(--space-3) max(var(--space-3), var(--safe-bottom));
    }
    .app-dialog-panel,
    .modal-content {
        width: 100%;
        max-height: calc(100dvh - max(24px, var(--safe-top)) - max(12px, var(--safe-bottom)));
        border-radius: var(--radius-lg);
    }
    .legal-modal {
        align-items: flex-end;
        padding: var(--space-3) var(--space-3) max(var(--space-3), var(--safe-bottom));
    }
    .legal-modal-panel {
        width: 100%;
        height: min(90dvh, 820px);
        border-radius: var(--radius-lg);
    }
    .legal-modal-header {
        padding: var(--space-3) var(--space-4);
    }
    .app-dialog-header { padding: var(--space-4) var(--space-4) var(--space-3); }
    .app-dialog-body { padding: 0 var(--space-4) var(--space-3); }
    .app-dialog-actions {
        flex-direction: column-reverse;
        padding: var(--space-3) var(--space-4) max(var(--space-4), var(--safe-bottom));
    }
    .app-dialog-actions .btn { width: 100%; }

    .trace-step-head-with-action {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .trace-explain-button {
        grid-column: 1 / -1;
        width: 100%;
        margin: 2px 0 0;
    }

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

    .trace-guide-summary > span:nth-child(2) {
        border-right: 0;
    }

    .trace-guide-summary > span:nth-child(-n + 2) {
        border-bottom: 1px solid var(--workflow-border);
    }

    .trace-guide-table-wrap {
        overflow: visible;
        border: 0;
    }

    .trace-guide-table,
    .trace-guide-table thead,
    .trace-guide-table tbody,
    .trace-guide-table tr,
    .trace-guide-table td {
        display: block;
        width: 100%;
    }

    .trace-guide-table thead {
        display: none;
    }

    .trace-guide-table tbody {
        display: grid;
        gap: 8px;
    }

    .trace-guide-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid var(--workflow-border);
        border-radius: 8px;
        background: var(--surface-raised);
    }

    .trace-guide-table td,
    .trace-guide-table tbody tr:last-child td {
        display: grid;
        align-content: start;
        gap: 3px;
        border-bottom: 1px solid var(--workflow-border);
    }

    .trace-guide-table td:nth-child(odd) {
        border-right: 1px solid var(--workflow-border);
    }

    .trace-guide-table td::before {
        content: attr(data-label);
        color: var(--text-secondary);
        font-size: 0.57rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .trace-guide-current-table th:nth-child(3),
    .trace-guide-current-table td:nth-child(3) {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .trace-guide-summary,
    .trace-guide-table tr {
        grid-template-columns: 1fr;
    }

    .trace-guide-summary > span,
    .trace-guide-summary > span:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--workflow-border);
    }

    .trace-guide-summary > span:last-child {
        border-bottom: 0;
    }

    .trace-guide-table td:nth-child(odd) {
        border-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast,
    .app-dialog-panel,
    .modal-content,
    .skeleton,
    .loading-state .state-icon,
    .loading-indicator,
    .btn.is-loading::after,
    button.is-loading::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

#main-nav.nav-menu {
    background: color-mix(in srgb, var(--nav-bg) 97%, transparent) !important;
    border-color: var(--border-color) !important;
}

#main-nav .nav-links button {
    color: var(--text-secondary) !important;
    background: transparent !important;
}

#main-nav .nav-links button[hidden] {
    display: none !important;
}

#main-nav .nav-links button:hover {
    color: var(--text-primary) !important;
    background: color-mix(in srgb, var(--surface-raised) 72%, transparent) !important;
}

#main-nav .nav-links button.active,
#main-nav .nav-links button[aria-current="page"] {
    color: var(--text-primary) !important;
    background: color-mix(in srgb, var(--accent) 13%, var(--surface-raised)) !important;
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color)) !important;
    border-bottom-width: 1px !important;
    box-shadow: inset 3px 0 0 var(--accent) !important;
}

@media (max-width: 1023px) {
    .menu-toggle,
    #main-nav .nav-menu-header,
    #main-nav .close-menu {
        display: flex !important;
    }

    #main-nav.nav-menu {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        z-index: 4001 !important;
        display: flex !important;
        width: min(88vw, 340px) !important;
        height: 100dvh !important;
        padding: calc(var(--space-4) + var(--safe-top)) var(--space-4) calc(var(--space-4) + var(--safe-bottom)) !important;
        overflow: hidden !important;
        border: 0 !important;
        border-left: 1px solid var(--border-color) !important;
        transform: translateX(100%) !important;
    }

    #main-nav.nav-menu.open {
        transform: translateX(0) !important;
    }

    #main-nav .nav-links {
        flex: 1 1 auto !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #main-nav .nav-links button {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 50px !important;
        padding: 0 var(--space-4) !important;
        text-align: left !important;
        border-radius: var(--radius-md) !important;
    }

    #main-nav .nav-menu-utility {
        display: block !important;
    }

    .mobile-bottom-nav {
        display: grid !important;
        min-height: calc(var(--mobile-nav-height) + var(--safe-bottom)) !important;
        padding: 6px 8px calc(6px + var(--safe-bottom)) !important;
        border-top-color: var(--border-color) !important;
        background: color-mix(in srgb, var(--nav-bg) 94%, transparent) !important;
    }

    .mobile-bottom-nav button {
        min-width: 0 !important;
        min-height: 58px !important;
        padding: 5px 2px !important;
        border-radius: var(--radius-md) !important;
        background: transparent !important;
        color: var(--text-secondary) !important;
    }

    .mobile-bottom-nav button.active,
    .mobile-bottom-nav button[aria-current="page"] {
        color: var(--text-primary) !important;
        background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised)) !important;
        border-color: color-mix(in srgb, var(--accent) 28%, transparent) !important;
        box-shadow: inset 0 -3px 0 var(--accent) !important;
    }

    body.menu-open .mobile-bottom-nav {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    body {
        display: grid !important;
        grid-template-columns: var(--nav-width) minmax(0, 1fr) !important;
        align-content: start;
    }

    #main-nav.nav-menu {
        grid-column: 1;
        grid-row: 1 / span 50;
        position: sticky !important;
        inset: auto !important;
        top: 0 !important;
        display: flex !important;
        width: var(--nav-width) !important;
        height: 100dvh !important;
        padding: var(--space-5) var(--space-3) var(--space-4) !important;
        overflow: hidden !important;
        border: 0 !important;
        border-right: 1px solid var(--border-color) !important;
        transform: none !important;
    }

    #main-nav .nav-menu-header {
        display: flex !important;
    }

    #main-nav .nav-links {
        flex: 1 1 auto !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #main-nav .nav-links button {
        flex: 0 0 auto !important;
        width: 100% !important;
        padding: 0 var(--space-3) !important;
        text-align: left !important;
        border-radius: var(--radius-md) !important;
    }

    #main-nav .nav-menu-utility {
        display: block !important;
    }

    #appHeader,
    #update-banner,
    #app,
    .app-footer,
    .legacy-domain-banner {
        grid-column: 2;
    }

    .menu-toggle,
    #main-nav .close-menu,
    .menu-backdrop,
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Priority 2 responsive control guard */
[hidden] {
    display: none !important;
}

input[readonly],
textarea[readonly] {
    color: var(--text-secondary) !important;
    background: color-mix(in srgb, var(--control-bg) 58%, var(--app-bg)) !important;
    border-style: dashed !important;
    cursor: default;
}

@media (max-width: 1023px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    .toast-container {
        right: 12px !important;
        bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + 12px) !important;
        left: auto !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        transform: none !important;
    }
}

/* Priority 3: Dashboard and warehouse workspaces */
#uebersicht,
#lager,
#lager-container,
.dashboard-widget,
.inventory-card {
    min-width: 0;
}

.dashboard-page-head,
.warehouse-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-4) 0 var(--space-3);
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-page-head small,
.warehouse-page-head small,
.inventory-category {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-page-head h2,
.warehouse-page-head h2 {
    margin: 2px 0;
    color: var(--text-primary);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    line-height: 1.2;
}

.dashboard-page-head p,
.warehouse-page-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.dashboard-hero-actions,
.warehouse-head-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dashboard-refresh,
.dashboard-hero-actions .btn,
.warehouse-head-actions .btn {
    width: auto;
    min-width: 0;
}

.dashboard-attention {
    border: 1px solid color-mix(in srgb, var(--status-warning) 38%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--status-warning) 8%, var(--surface-card));
}

.dashboard-status-line {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.dashboard-status-line strong { color: var(--text-primary); }

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
}

.dashboard-widget {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: none;
}

.dashboard-tile {
    min-height: 118px;
    padding: var(--space-4);
    text-align: left;
    min-width: 0;
    overflow: hidden;
}

.dashboard-tile strong {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    margin: var(--space-2) 0 3px;
    color: var(--text-primary);
    font-size: clamp(1.05rem, 1.8vw, 1.42rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
}

.dashboard-tile strong b { font: inherit; }
.dashboard-tile strong i {
    color: var(--text-secondary);
    font-size: 0.72em;
    font-style: normal;
    font-weight: 700;
}

.dashboard-tile > span,
.dashboard-tile > small {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-date-value {
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0 !important;
    white-space: nowrap;
}

.dashboard-date-value b {
    display: block;
    max-width: 100%;
    font-size: clamp(1rem, 1.55vw, 1.26rem);
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-date-value i {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem !important;
    line-height: 1.15;
}

.dashboard-tile.warn,
.dashboard-widget--warning {
    border-color: color-mix(in srgb, var(--status-warning) 46%, var(--border-color));
    background: color-mix(in srgb, var(--status-warning) 7%, var(--surface-card));
}

.dashboard-tile.ok { border-color: var(--border-color); }
.dashboard-tile:hover:not(:disabled),
.dashboard-measurement-card:hover:not(:disabled),
.dashboard-panel-actionable:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color));
    background: var(--surface-raised);
    box-shadow: none;
    transform: translateY(-1px);
}

.dashboard-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0;
    padding: var(--space-3);
}

.dashboard-actions .btn { width: auto; min-width: 112px; }

.dashboard-panels,
.dashboard-measurements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--space-3);
}

.dashboard-measurements-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 360px));
    justify-content: center;
}

.dashboard-panel,
.dashboard-measurement-card {
    margin: 0;
    padding: var(--space-4);
    text-align: left;
}

.dashboard-widget--wide { grid-column: 1 / -1; }
.dashboard-widget-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.dashboard-widget-head h3,
.dashboard-panel h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.3;
}

.dashboard-list-row {
    min-height: 54px;
    margin: 0 0 var(--space-2);
    padding: var(--space-3);
    border-color: var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
}

.dashboard-list-row strong,
.dashboard-list-row small { overflow-wrap: anywhere; }
.dashboard-list-row em {
    flex: 0 0 auto;
    min-width: max-content;
    max-width: 100%;
    white-space: nowrap;
}

.dashboard-empty-state {
    min-height: 132px;
    justify-content: center;
    padding: var(--space-4);
}

.dashboard-progress {
    display: block;
    width: 100%;
    height: 10px;
    margin-top: var(--space-3);
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--surface-raised);
}
.dashboard-progress::-webkit-progress-bar { background: var(--surface-raised); border-radius: 999px; }
.dashboard-progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.dashboard-progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

.dashboard-measurement-card {
    display: grid;
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
    max-width: 360px;
    justify-self: center;
    cursor: pointer;
}
.dashboard-measurement-card:disabled { cursor: default; opacity: 0.72; }
.dashboard-measurement-head strong,
.dashboard-measurement-head small,
.dashboard-measurement-meta span { min-width: 0; overflow-wrap: anywhere; }
.dashboard-measurement-head small { font-variant-numeric: tabular-nums; text-align: right; }
.dashboard-chart-area { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.dashboard-chart-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dashboard-chart-focus { fill: color-mix(in srgb, var(--accent) 16%, transparent); }

.dashboard-trend-chart {
    display: block;
    width: min(100%, 300px);
    height: 96px;
    max-width: 300px;
    margin-inline: auto;
}

.dashboard-edit-mode {
    margin: 0;
    border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-card));
}
.dashboard-config-card { border: 0; border-radius: inherit; background: transparent; }
.dashboard-edit-banner {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}
.dashboard-edit-banner span:first-child { display: grid; gap: 2px; }
.dashboard-edit-banner small { color: var(--text-secondary); }
.dashboard-config-body { padding: var(--space-4); }
.dashboard-config-body h3 { margin: 0; font-size: 0.95rem; }
.dashboard-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
}
.dashboard-edit-actions .btn { width: auto; }
.dashboard-edit-active .dashboard-panel-actionable { pointer-events: none; opacity: 0.68; }

.warehouse-page-head { margin-bottom: 0; }
.warehouse-control-card {
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: none;
}
.warehouse-control-head { margin-bottom: var(--space-3); }
.warehouse-control-head span { letter-spacing: 0; }
.warehouse-switcher { margin-top: 0; }
.warehouse-switcher button { border-color: var(--border-color); background: var(--surface-raised); }
.warehouse-delete-button { color: var(--status-danger) !important; }
.warehouse-meta { margin-top: var(--space-2); overflow-wrap: anywhere; }

.warehouse-filter-panel {
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}
.lager-toolbar {
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.toolbar-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    height: auto;
    min-height: var(--control-height);
    padding: 0;
}
.toolbar-field label {
    align-self: center;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
}
.search-input,
.filter-select {
    height: var(--control-height);
    min-height: var(--control-height);
    padding: 0 var(--space-3) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--control-bg);
    line-height: normal;
}
.filter-select { padding-right: 32px !important; }
.lager-toolbar:focus-within { border: 0; box-shadow: none; }
.toolbar-divider { background: var(--border-color); }
.warehouse-filter-foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
}
.lager-filter-chips { flex-wrap: wrap; overflow: visible; padding: 0; }
.lager-filter-chips button {
    min-height: 36px;
    border-color: var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
}
.lager-filter-chips button.active {
    border-color: color-mix(in srgb, var(--accent) 44%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 13%, var(--surface-raised));
    color: var(--text-primary);
}
.warehouse-filter-result {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
}
.warehouse-filter-result .btn { width: auto; min-height: 36px; padding: 0 var(--space-3); }

.alert-summary {
    margin: 0;
    border-color: var(--border-color);
    border-left-color: var(--status-danger);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: none;
}
.alert-summary.success { border-color: var(--border-color); border-left-color: var(--status-success); }
.alert-summary:hover { box-shadow: none; }

#lager-container {
    display: grid;
    gap: var(--space-4);
}
.inventory-category-section { min-width: 0; }
.inventory-category-section .category-title {
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
    font-size: 1rem;
}
.inventory-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr));
    gap: var(--space-2);
}
.inventory-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    box-shadow: none;
}
.inventory-card:hover { transform: none; box-shadow: none; }
.inventory-card.card-warning {
    border-color: color-mix(in srgb, var(--status-warning) 48%, var(--border-color));
    background: color-mix(in srgb, var(--status-warning) 6%, var(--surface-card));
}
.inventory-card-head,
.inventory-stock-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
}
.inventory-product-copy { min-width: 0; }
.inventory-product-copy h3 {
    margin: 3px 0 0;
    color: var(--text-primary);
    font-size: clamp(0.86rem, 1.2vw, 0.98rem);
    line-height: 1.18;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
}
.inventory-card-tools { display: flex; gap: 4px; flex: 0 0 auto; }
.inventory-card .threshold-btn {
    display: grid;
    place-items: center;
    min-width: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    font-size: 0.75rem;
}
.inventory-card .favorite-btn { font-size: 1rem; }
.inventory-stock-row { align-items: center; }
.inventory-stock-value { display: grid; gap: 2px; min-width: 0; }
.inventory-stock-value .stock {
    display: block;
    padding: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: clamp(1.08rem, 2.1vw, 1.42rem);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    overflow-wrap: normal;
    word-break: normal;
}
.inventory-stock-value small { color: var(--text-secondary); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.inventory-status { flex: 0 0 auto; }
.inventory-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
    gap: 6px;
    margin: 0;
}
.inventory-facts div {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
}
.inventory-facts dt { color: var(--text-secondary); font-size: 0.66rem; }
.inventory-facts dd {
    margin: 2px 0 0;
    color: var(--text-primary);
    font-size: clamp(0.68rem, 1vw, 0.74rem);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    line-height: 1.16;
    overflow-wrap: normal;
    word-break: normal;
}
.inventory-hints { display: grid; gap: 3px; }
.inventory-hints .item-hint { margin: 0; font-size: 0.72rem; line-height: 1.22; }
.inventory-card-actions { margin-top: auto; padding-top: var(--space-1); }
.inventory-card-actions .btn {
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.82rem;
    line-height: 1.1;
}
.warehouse-empty-state { margin: 0; }

@media (max-width: 767px) {
    .dashboard-page-head,
    .warehouse-page-head {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        padding: 6px 0 10px;
    }
    .warehouse-page-head p,
    .warehouse-page-head .osci-system-note {
        display: none;
    }
    .dashboard-hero-actions,
    .warehouse-head-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .dashboard-hero-actions .btn,
    .warehouse-head-actions .btn {
        width: 100%;
        min-height: 36px;
        padding: 6px 10px;
        font-size: 0.82rem;
    }
    .dashboard-status-line { display: grid; grid-template-columns: 1fr 1fr; }
    .dashboard-status-line strong { grid-column: 1 / -1; }
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-tile { min-height: 112px; padding: var(--space-3); }
    .dashboard-tile strong { font-size: 1.22rem; }
    .dashboard-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-actions .btn { width: 100%; min-width: 0; }
    .dashboard-actions .btn:first-child { grid-column: 1 / -1; }
    .dashboard-panels,
    .dashboard-measurements-grid { grid-template-columns: 1fr; }
    .dashboard-list-row { align-items: flex-start; }
    .dashboard-edit-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .dashboard-edit-actions .btn { width: 100%; }
    .dashboard-edit-actions .btn:last-child { grid-column: 1 / -1; }
    .warehouse-control-card {
        padding: 10px;
    }
    .warehouse-control-head {
        display: none;
    }
    .warehouse-switcher { grid-template-columns: minmax(0, 1fr) 46px 46px 46px; }
    .warehouse-switcher select,
    .warehouse-switcher button {
        min-height: 36px;
        height: 36px;
        font-size: 0.78rem;
    }
    .warehouse-meta {
        margin-top: 6px;
        font-size: 0.68rem;
        line-height: 1.25;
    }
    .warehouse-filter-panel {
        padding: 10px;
    }
    .lager-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
    }
    .toolbar-divider { display: none; }
    .toolbar-field { width: 100%; grid-template-columns: 1fr; gap: 0; }
    .toolbar-field label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .search-input,
    .filter-select {
        height: 38px;
        min-height: 38px;
        font-size: 0.8rem;
    }
    .warehouse-filter-foot {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        margin-top: 8px;
        padding-top: 8px;
    }
    .lager-filter-chips {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .lager-filter-chips button {
        min-height: 32px;
        padding: 4px 6px;
        font-size: 0.72rem;
    }
    .warehouse-filter-result { justify-content: space-between; white-space: normal; }
    .warehouse-filter-result,
    .warehouse-filter-result .btn {
        font-size: 0.72rem;
    }
    .warehouse-filter-result .btn {
        min-height: 32px;
        padding: 4px 8px;
    }
    .inventory-card-grid { grid-template-columns: 1fr; }
    #lager-container { gap: var(--space-3); }
    .inventory-category-section .category-title {
        margin-bottom: 8px;
        font-size: 0.9rem;
    }
    .inventory-card-grid { gap: 8px; }
    .inventory-card {
        gap: 6px;
        padding: 9px 10px;
    }
    .inventory-product-copy h3 {
        font-size: 0.88rem;
        line-height: 1.16;
    }
    .inventory-category {
        font-size: 0.62rem;
    }
    .inventory-card .threshold-btn {
        min-width: 30px;
        min-height: 30px;
        font-size: 0.68rem;
    }
    .inventory-stock-value .stock {
        font-size: 1.1rem;
    }
    .inventory-status {
        padding: 4px 7px;
        font-size: 0.64rem;
    }
    .inventory-facts { display: none; }
    .inventory-hints {
        display: none;
    }
    .product-history { display: none; }
    .inventory-card-actions {
        padding-top: 0;
        gap: 6px;
    }
    .inventory-card-actions .btn {
        min-height: 32px;
        padding: 4px 8px;
        font-size: 0.74rem;
    }
    .inventory-card-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .inventory-card-actions .btn { width: 100%; }
}

@media (max-width: 390px) {
    .dashboard-page-head h2,
    .warehouse-page-head h2 { font-size: 1.3rem; }
    .dashboard-tile { min-height: 106px; }
    .dashboard-tile span,
    .dashboard-tile small { font-size: 0.76rem; }
    .warehouse-control-head { flex-direction: column; }
    .warehouse-switcher { grid-template-columns: minmax(0, 1fr) repeat(3, 42px); gap: 6px; }
    .inventory-card { padding: 9px; }
    .inventory-facts { display: none; }
    .storage-safety-grid,
    .storage-safety-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-tile,
    .dashboard-measurement-card,
    .dashboard-panel-actionable { transition: none !important; }
}

.dashboard-widget-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}
.dashboard-widget-actions .btn,
.dashboard-widget-open {
    width: auto;
    min-width: 0;
}
.dashboard-widget-open { margin-top: var(--space-3); }

@media (max-width: 767px) {
    .dashboard-widget-actions .btn,
    .dashboard-widget-open { min-height: 44px; }
}

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

.dashboard-support-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-color));
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 48%),
        color-mix(in srgb, var(--surface-card) 92%, transparent);
    box-shadow: var(--shadow-subtle);
}

.dashboard-support-card > div:first-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.dashboard-support-card small,
.dashboard-support-card span {
    color: var(--text-secondary);
}

.dashboard-support-card strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.dashboard-support-actions,
.project-support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.dashboard-support-actions a,
.project-support-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    text-decoration: none;
}

.project-support-actions a {
    min-width: 150px;
}

.project-support-note {
    margin-top: var(--space-3);
}

@media (max-width: 767px) {
    .dashboard-support-card {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-support-actions,
    .project-support-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .dashboard-support-actions a,
    .project-support-actions a {
        width: 100%;
    }
}

/* ==========================================================================
   PRIORITY 5 - LOGBOOK, TODOS AND MEASUREMENT HISTORY
   ========================================================================== */

.is-hidden { display: none !important; }

.section-eyebrow {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.logbook-page-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    background: var(--surface-card) !important;
    border-color: var(--border-color) !important;
}

.logbook-new-entry { width: auto; white-space: nowrap; }

.logbook-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.logbook-form-actions > button {
    width: auto;
    min-width: 0;
}

.logbook-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    cursor: pointer;
}

.logbook-checkbox input {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 20px;
}

.logbook-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.8fr) auto;
    gap: var(--space-3);
    align-items: end;
    margin-top: var(--space-3);
}

.logbook-filter-toolbar .input-group { margin-bottom: 0; }
.logbook-filter-reset { width: auto; white-space: nowrap; }

.logbook-filter-status,
.logbook-entry-meta,
.todo-status-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.logbook-filter-status {
    justify-content: space-between;
    min-height: 36px;
    margin: var(--space-3) 0 var(--space-2);
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.logbook-entry {
    align-items: start;
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.logbook-entry-content,
.todo-row-content { min-width: 0; }

.logbook-entry-meta {
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.logbook-entry-note {
    margin-top: var(--space-2);
    color: var(--text-secondary);
}

.logbook-entry-note summary {
    width: max-content;
    max-width: 100%;
    cursor: pointer;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
}

.logbook-entry-note p {
    max-width: 72ch;
    margin-top: var(--space-2);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.logbook-empty-state {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 45%, transparent);
    color: var(--text-secondary);
}

.logbook-empty-state strong { color: var(--text-primary); }
.logbook-empty-state p { margin: 0; }
.logbook-empty-state button { width: auto; }

.todo-status-line { margin-bottom: var(--space-2); }
.todo-row.due .status-badge { opacity: 1; }
.todo-row.done { opacity: 0.72; }

.measurement-chart-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.measurement-chart-scroll:focus-visible { box-shadow: var(--focus-ring); }
.measurement-chart-scroll .measurement-chart { min-width: 620px; }
.measurement-chart-scroll .measurement-chart.compact { min-width: 420px; }

.measurement-card {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.measurement-card .logbook-card-body,
.measurement-card #measurementTracker,
.measurement-panel,
.measurement-stats,
.measurement-list {
    min-width: 0;
    max-width: 100%;
}

.measurement-chart-card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.measurement-stats > div {
    min-width: 0;
    overflow: hidden;
}

.measurement-stats strong,
.measurement-detail-value,
.measurement-list-button strong {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.measurement-stats span,
.measurement-chart-head small,
.measurement-chart-meta span,
.measurement-detail-card small,
.measurement-detail-card p,
.measurement-list-button small {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.measurement-chart-head > div,
.measurement-detail-card,
.measurement-list-row,
.measurement-list-button {
    min-width: 0;
}

.measurement-type-actions,
.measurement-detail-actions {
    min-width: 0;
    max-width: 100%;
}

.measurement-type-actions .btn-secondary,
.measurement-type-actions .btn-out,
.measurement-type-actions button,
.measurement-detail-actions button {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
    white-space: nowrap;
}

.measurement-list-row .logbook-actions {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

.measurement-list-row .logbook-actions button {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
    white-space: nowrap;
}

.measurement-point-group:focus-visible .measurement-point-halo {
    opacity: 1;
    transform: scale(1.05);
}

.measurement-point-group:focus-visible .measurement-point {
    fill: var(--accent);
    stroke: #fff;
}

.measurement-editing-status {
    margin: 0;
    padding: var(--space-3);
    border-left: 3px solid var(--status-warning);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface-raised) 82%, var(--status-warning));
    color: var(--text-primary);
}

.osmose-history { margin-top: var(--space-2); }

progress.mini-progress {
    display: block;
    appearance: none;
    border: 0;
}

progress.mini-progress::-webkit-progress-bar {
    border-radius: inherit;
    background: rgba(255,255,255,0.08);
}

progress.mini-progress::-webkit-progress-value {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
}

progress.mini-progress::-moz-progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
}

@media (max-width: 767px) {
    .logbook-page-header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .logbook-page-header .logbook-metrics { grid-column: 1 / -1; }
    .logbook-new-entry { min-height: 44px; }

    .logbook-filter-toolbar { grid-template-columns: 1fr; }
    .logbook-filter-reset { width: 100%; }
    .logbook-filter-status { align-items: flex-start; flex-direction: column; }

    .logbook-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .logbook-form-actions > button { width: 100%; }
    .logbook-entry-note summary { min-height: 44px; display: flex; align-items: center; }
    .measurement-chart-scroll { margin-inline: calc(var(--space-3) * -1); width: calc(100% + var(--space-3) * 2); padding-inline: var(--space-3); }
}

@media (max-width: 390px) {
    .logbook-page-header { grid-template-columns: 1fr; }
    .logbook-page-header .logbook-metrics,
    .logbook-new-entry { grid-column: 1; width: 100%; }
    .logbook-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   PRIORITY 6 - CATALOG, STATISTICS, PROTOCOL AND STOCK WORKFLOWS
   ========================================================================== */

.section-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.section-page-head h2,
.section-page-head h3 { margin: 0; }

.section-head-actions,
.reorder-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.section-head-actions > button,
.reorder-actions > button { width: auto; }

.active-context-badge {
    display: grid;
    gap: 2px;
    min-width: 150px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.active-context-badge span {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.active-context-badge strong { overflow-wrap: anywhere; }

.section-empty-state,
.coral-empty-state {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 48%, transparent);
    color: var(--text-secondary);
}

.section-empty-state.compact { padding: var(--space-4); }
.section-empty-state strong,
.coral-empty-state strong { color: var(--text-primary); }
.section-empty-state p,
.coral-empty-state p { margin: 0; }
.section-empty-state button,
.coral-empty-state button { width: auto; }

.coral-form-status,
.coral-filter-status,
.protocol-filter-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: 36px;
    margin: var(--space-3) 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.coral-form-actions,
.coral-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.coral-form-actions > button,
.coral-card-actions > button { width: auto; }
.coral-card-body { min-width: 0; }
.coral-card-head > div { min-width: 0; }
.coral-card-head h4,
.coral-card-head small,
.coral-meta-grid small { overflow-wrap: anywhere; }

.coral-transfer-list {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.coral-transfer-card {
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.coral-transfer-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.coral-transfer-head strong { overflow-wrap: anywhere; }
.coral-transfer-head small { color: var(--text-secondary); white-space: nowrap; }

#stats-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.usage-stat-card {
    min-width: 0;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.usage-stat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.usage-stat-head h4 { margin: 0; color: var(--accent); overflow-wrap: anywhere; }
.usage-stat-head span { color: var(--text-secondary); font-size: 0.78rem; white-space: nowrap; }
.usage-stat-total { margin: var(--space-2) 0; color: var(--text-secondary); font-size: 0.82rem; }

.usage-stat-progress {
    display: block;
    width: 100%;
    height: 8px;
    appearance: none;
    border: 0;
}

.usage-stat-progress::-webkit-progress-bar { border-radius: 999px; background: var(--surface-raised); }
.usage-stat-progress::-webkit-progress-value { border-radius: 999px; background: var(--accent); }
.usage-stat-progress::-moz-progress-bar { border-radius: 999px; background: var(--accent); }

.usage-period-grid { margin-top: var(--space-3); }
.usage-period-grid > div { min-width: 0; }
.usage-period-grid strong,
.usage-period-grid small { display: block; overflow-wrap: anywhere; }
.usage-period-grid small { margin-top: 2px; color: var(--text-secondary); font-size: 0.72rem; }

.prognose-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.prognose-badge strong { font-size: 0.72rem; text-transform: uppercase; }
.prognose-badge span { text-align: right; }

.protocol-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.8fr) auto;
    gap: var(--space-3);
    align-items: end;
}

.protocol-filter-toolbar .input-group { margin-bottom: 0; }
.protocol-filter-toolbar > button { width: auto; white-space: nowrap; }

.protocol-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    border-left-width: 4px;
    border-left-style: solid;
}

.protocol-entry.in { border-left-color: var(--status-success); }
.protocol-entry.out { border-left-color: var(--status-danger); }
.protocol-entry-main { min-width: 0; }
.protocol-entry-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.protocol-entry-head strong { overflow-wrap: anywhere; }
.protocol-entry-value { display: grid; justify-items: end; gap: 2px; text-align: right; }
.protocol-entry.in .protocol-entry-value > strong { color: var(--status-success); }
.protocol-entry.out .protocol-entry-value > strong { color: var(--status-danger); }
.protocol-entry-value small { color: var(--text-secondary); }
.protocol-undo-button {
    min-height: 36px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    text-decoration: underline;
}

.bulk-entry-intro,
.reorder-intro { max-width: 70ch; }
.bulk-add-button { width: auto; }

.bulk-quick-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.bulk-quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.bulk-quick-button { width: auto; min-width: 0; padding: 8px 12px; font-size: 0.82rem; }

.bulk-tara-section {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.bulk-tara-toggle { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; }
.bulk-tara-toggle input { width: 20px; height: 20px; margin: 0; }
.bulk-tara-preview { min-height: 22px; margin-top: var(--space-2); color: var(--text-secondary); font-size: 0.82rem; }
.bulk-tara-error { color: var(--status-danger); font-weight: 700; }
.bulk-tara-success { color: var(--status-success); }

.bulk-cart-list { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.bulk-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}
.bulk-cart-product,
.bulk-cart-value { display: grid; gap: 2px; min-width: 0; }
.bulk-cart-product strong { overflow-wrap: anywhere; }
.bulk-cart-product small { color: var(--text-secondary); }
.bulk-cart-value { justify-items: end; flex: 0 0 auto; }
.bulk-cart-value > strong { color: var(--status-success); }
.bulk-cart-remove {
    width: auto;
    min-height: 36px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--status-danger);
    text-decoration: underline;
}

.reorder-actions { justify-content: flex-start; margin-bottom: var(--space-3); }
.reorder-open-panel {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-color));
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 12%, var(--surface-raised)),
            color-mix(in srgb, var(--surface-raised) 88%, transparent));
    box-shadow: var(--shadow-soft);
}

.reorder-open-panel[hidden] {
    display: none;
}

.reorder-open-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.reorder-open-head > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.reorder-open-head strong {
    color: var(--text-primary);
}

.reorder-open-head span {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}

.reorder-open-head button {
    width: auto;
    white-space: nowrap;
}

.reorder-open-list {
    display: grid;
    gap: 8px;
}

.reorder-open-link {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-base) 72%, transparent);
    color: var(--text-primary);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.reorder-open-link:hover,
.reorder-open-link:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 9%, var(--surface-base));
    transform: translateY(-1px);
}

.reorder-open-index {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 900;
}

.reorder-open-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.reorder-open-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reorder-open-copy small {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reorder-open-action {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.reorder-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.reorder-suggestion > div { display: grid; gap: 2px; }
.reorder-suggestion span { color: var(--text-secondary); }
.reorder-suggestion button { width: auto; }
.shop-order-section { margin-bottom: var(--space-5); }
.shop-order-section h3 { margin-bottom: var(--space-2); color: var(--accent); }
.shop-order-row {
    display: grid;
    grid-template-columns: 24px minmax(160px, 1fr) minmax(180px, auto);
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-color);
}
.shop-order-check { width: 20px; height: 20px; margin: 0; cursor: pointer; }
.shop-order-product { display: grid; gap: 2px; min-width: 0; }
.shop-order-product strong { overflow-wrap: anywhere; }
.shop-order-product small { color: var(--status-success); }
.shop-order-row.is-low .shop-order-product small { color: var(--status-danger); }
.shop-size-options { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

@media (max-width: 767px) {
    .section-page-head { flex-direction: column; }
    .section-head-actions,
    .reorder-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
    .section-head-actions > button,
    .reorder-actions > button,
    .active-context-badge,
    .bulk-add-button { width: 100%; }

    .coral-section-head { flex-direction: column; align-items: stretch; }
    .coral-section-head > button { width: 100%; }
    .coral-section-head .status-badge { align-self: flex-start; width: auto; }
    .coral-advisor-grid,
    .coral-advisor-form-grid {
        grid-template-columns: 1fr;
    }
    .coral-advisor-body {
        padding: 0 10px 10px;
    }
    .coral-advisor-panel {
        padding: 12px;
    }
    .coral-advice-summary,
    .coral-stock-compat-row {
        flex-direction: column;
        align-items: stretch;
    }
    .coral-recommendation-layout {
        grid-template-columns: 1fr;
    }
    .coral-primary-recommendation {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 12px;
    }
    .coral-primary-facts {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .coral-tank-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .coral-zone-map {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }
    .coral-zone-cell {
        min-height: 88px;
        padding: 8px 6px;
    }
    .coral-zone-cell.is-best { padding-top: 22px; }
    .coral-zone-cell strong { font-size: 0.7rem; }
    .coral-zone-cell span { font-size: 0.64rem; }
    .coral-zone-cell small { display: none; }
    .coral-aquarium-glass {
        padding-inline: 18px;
    }
    .coral-substrate {
        margin-inline: -18px;
    }
    .coral-pump-marker b { display: none; }
    .coral-pump-marker.is-left { left: 2px; }
    .coral-pump-marker.is-right { right: 2px; }
    .coral-best-marker {
        top: 4px;
        right: 4px;
        font-size: 0.46rem;
    }
    .coral-advice-badges {
        justify-content: flex-start;
    }
    .coral-stock-compat-row span {
        text-align: left;
    }
    .coral-card { grid-template-columns: 1fr; }
    .coral-card-media { aspect-ratio: 16 / 10; min-height: 0; }
    .coral-card-actions { display: grid; grid-template-columns: 1fr; }
    .coral-card-actions > button { width: 100%; }
    .coral-meta-grid { grid-template-columns: 1fr 1fr; }
    .coral-transfer-head { align-items: flex-start; flex-direction: column; }

    #stats-container { grid-template-columns: 1fr; }
    .usage-stat-head { align-items: flex-start; flex-direction: column; }
    .usage-stat-head span { white-space: normal; }
    .usage-period-grid { grid-template-columns: 1fr; }

    .protocol-filter-toolbar { grid-template-columns: 1fr; }
    .protocol-filter-toolbar > button { width: 100%; }
    .protocol-filter-status { align-items: flex-start; flex-direction: column; }
    .protocol-entry { grid-template-columns: 1fr; align-items: start; }
    .protocol-entry-value { justify-items: start; text-align: left; }

    .bulk-cart-row { align-items: flex-start; }
    .reorder-open-head {
        align-items: stretch;
        flex-direction: column;
    }

    .reorder-open-head button {
        width: 100%;
    }

    .reorder-open-link {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .reorder-open-action {
        grid-column: 2;
    }

    .reorder-suggestion { align-items: stretch; flex-direction: column; }
    .reorder-suggestion button { width: 100%; }
    .shop-order-row { grid-template-columns: 24px minmax(0, 1fr); align-items: start; }
    .shop-size-options { grid-column: 2; justify-content: flex-start; }
}

@media (max-width: 390px) {
    .coral-meta-grid { grid-template-columns: 1fr; }
    .coral-card-head { flex-direction: column; }
    .bulk-cart-row { flex-direction: column; }
    .bulk-cart-value { justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
    .usage-stat-card,
    .protocol-entry { animation: none !important; transition: none !important; }
}

/* Priority 7: settings workspace */
.settings-page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.settings-page-head > div {
    min-width: 0;
}
.settings-page-head h2 { margin: var(--space-1) 0 var(--space-2); }
.settings-page-head p {
    max-width: 66ch;
    margin: 0;
    color: var(--text-secondary);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
.settings-help-link {
    justify-self: end;
    width: auto !important;
    max-width: max-content;
    text-decoration: none;
    white-space: nowrap;
}

.settings-page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.settings-page-actions > button {
    width: auto !important;
    white-space: nowrap;
}

.settings-group-nav {
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--space-2));
    z-index: 12;
    display: flex;
    gap: var(--space-2);
    max-width: 100%;
    margin: 0 0 var(--space-4);
    padding: var(--space-2);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-card) 92%, transparent);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.settings-group-nav button {
    width: auto;
    min-width: max-content;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
    font-size: 0.82rem;
}

.settings-group-nav button:hover,
.settings-group-nav button:focus-visible {
    border-color: var(--border-color);
    background: var(--surface-raised);
    color: var(--text-primary);
    transform: none;
}

.settings-group-nav button.active {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-raised));
    color: var(--accent);
}

#einstellungen > .card[hidden],
#einstellungen > .settings-group-label[hidden] { display: none !important; }

#einstellungen > .card {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md) !important;
    background: var(--surface-card) !important;
}

#einstellungen > .card:has(> details[open]),
#einstellungen > .card:has(> .settings-accordion[open]) {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border-color)) !important;
}

.settings-accordion-summary { min-height: 44px; }
.settings-accordion-body { padding-top: var(--space-3); border-top: 1px solid var(--border-color); }
.settings-group-label { scroll-margin-top: 116px; margin-top: var(--space-5); }

.settings-actions,
.settings-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.settings-actions > button,
.settings-row-actions > button { width: auto; }
.settings-row-actions { justify-content: flex-end; }
.settings-row-actions > button { min-height: 38px; padding: 7px 11px; font-size: 0.78rem; }

.settings-empty-state {
    margin-top: var(--space-3);
    padding: var(--space-4);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
}

.settings-danger-row {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
}
.settings-danger-row.last { border-bottom: 0; }
.settings-danger-row > button { width: 100%; }

.settings-full-reset {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--danger) 44%, var(--border-color));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--danger) 9%, var(--surface-card));
}

.settings-full-reset strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.96rem;
    line-height: 1.2;
}

.settings-full-reset small {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}

.settings-full-reset .btn-danger {
    width: auto;
    min-width: 168px;
    margin: 0;
}

@media (max-width: 640px) {
    .settings-page-actions {
        justify-content: stretch;
    }

    .settings-page-actions > button {
        width: 100% !important;
    }

    .settings-full-reset {
        grid-template-columns: 1fr;
        padding: var(--space-3);
    }

    .settings-full-reset .btn-danger {
        width: 100%;
        min-width: 0;
        min-height: 48px;
    }
}
.menu-visibility-list { margin-top: var(--space-3); }

.icp-page-head,
.icp-import-card,
.icp-analysis-card,
.icp-history-card {
    max-width: 1180px;
    margin-inline: auto;
}

.icp-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.icp-card-head h3 {
    margin: 0 0 4px;
}

.icp-card-head .hint {
    margin: 0;
    max-width: 72ch;
    white-space: normal;
}

.icp-history-details {
    width: 100%;
}

.icp-history-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 56px;
    list-style: none;
    cursor: pointer;
}

.icp-history-summary::-webkit-details-marker {
    display: none;
}

.icp-history-summary h3 {
    margin: 0 0 4px;
}

.icp-history-summary .hint {
    margin: 0;
    white-space: normal;
}

.icp-history-details[open] .settings-chevron {
    transform: rotate(180deg);
}

.icp-history-body {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
}

.icp-import-grid,
.icp-control-grid,
.icp-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.icp-compare-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
    gap: var(--space-3);
    align-items: start;
    margin-top: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-card) 74%, transparent);
}

.icp-compare-shell strong {
    display: block;
    color: var(--text-primary);
}

.icp-compare-shell small {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    line-height: 1.35;
    white-space: normal;
}

.icp-compare-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 156px;
    overflow: auto;
    padding-right: 4px;
}

.icp-compare-chip {
    cursor: pointer;
}

.icp-compare-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.icp-compare-chip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 11px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--surface-elevated) 72%, transparent);
    font-weight: 750;
    font-size: 0.82rem;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.icp-compare-chip span small {
    margin: 0;
    font-size: 0.68rem;
    opacity: 0.8;
}

.icp-compare-chip input:checked + span {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 14%, var(--surface-card));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 12%, transparent);
}

.icp-compare-chip:hover span {
    transform: translateY(-1px);
}

.icp-compare-results {
    margin-bottom: var(--space-4);
}

.icp-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.icp-compare-card {
    margin-bottom: 0;
}

.icp-compare-card .icp-chart-scroll .measurement-chart {
    min-width: 520px;
}

.icp-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--space-4);
}

.icp-import-textarea {
    min-height: 180px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.86rem;
    line-height: 1.45;
}

.icp-import-note {
    margin-top: 8px;
    white-space: normal;
}

.icp-import-preview,
.icp-empty-state,
.icp-chart-card,
.icp-stat-card,
.icp-report-card,
.icp-report-detail,
.icp-value-row {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-card) 88%, transparent);
}

.icp-import-preview {
    margin-top: var(--space-3);
    padding: var(--space-3);
}

.icp-preview-summary {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--text-secondary);
}

.icp-preview-summary strong {
    color: var(--text-primary);
}

.icp-preview-groups {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.icp-preview-group {
    display: grid;
    gap: var(--space-2);
}

.icp-preview-group > strong,
.icp-report-section-title {
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.icp-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.icp-preview-list span {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-elevated) 74%, transparent);
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.icp-preview-list strong {
    color: var(--primary);
}

.icp-stat-card {
    padding: var(--space-4);
    min-width: 0;
}

.icp-stat-card small,
.icp-stat-card span {
    display: block;
    color: var(--text-secondary);
    line-height: 1.3;
}

.icp-stat-card strong {
    display: block;
    margin: 4px 0 8px;
    color: var(--primary);
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    line-height: 1.1;
}

.icp-status-pill {
    display: inline-flex !important;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--surface-elevated) 72%, transparent);
    font-style: normal;
    font-size: 0.74rem;
    line-height: 1.1;
}

.icp-status-pill.is-ok { color: var(--status-success); border-color: color-mix(in srgb, var(--status-success) 44%, var(--border-color)); }
.icp-status-pill.is-low,
.icp-status-pill.is-high { color: var(--status-warning); border-color: color-mix(in srgb, var(--status-warning) 48%, var(--border-color)); }
.icp-status-pill.is-unknown { color: var(--text-secondary); }

.icp-chart-card {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.icp-chart-scroll .measurement-chart {
    min-width: 620px;
}

.icp-trend-line {
    fill: none;
    stroke: var(--status-warning);
    stroke-width: 2;
    stroke-dasharray: 6 7;
    opacity: 0.78;
}

.icp-optimal-line {
    stroke: var(--status-success);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 3 7;
    opacity: 0.9;
}

.icp-optimal-label {
    fill: var(--status-success);
    font-size: 0.68rem;
    font-weight: 800;
    paint-order: stroke;
    stroke: color-mix(in srgb, var(--surface-card) 88%, transparent);
    stroke-width: 4px;
    stroke-linejoin: round;
}

.icp-area {
    fill: url(#icpFill);
}

.icp-value-table {
    display: grid;
    gap: var(--space-2);
}

.icp-value-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-3);
    align-items: center;
    width: 100%;
    padding: var(--space-3);
    color: var(--text-primary);
    text-align: left;
}

.icp-value-row span {
    min-width: 0;
}

.icp-value-row strong,
.icp-report-main strong {
    display: block;
}

.icp-value-row small,
.icp-report-main small {
    display: block;
    color: var(--text-secondary);
    margin-top: 3px;
}

.icp-report-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2);
    margin-bottom: var(--space-2);
}

.icp-report-card.active {
    border-color: color-mix(in srgb, var(--primary) 48%, var(--border-color));
}

.icp-report-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: 0;
}

.icp-report-actions .btn-secondary,
.icp-report-actions .btn-out {
    min-height: 42px;
    padding-inline: 13px;
    white-space: nowrap;
}

.icp-report-main {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    padding: var(--space-3);
    color: var(--text-primary);
    text-align: left;
    background: transparent;
    border: 0;
}

.icp-report-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-3);
    margin: calc(var(--space-2) * -1) 0 var(--space-3);
}

.icp-report-section-title {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
}

.icp-report-section-title:first-child {
    margin-top: 0;
}

.icp-report-value {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-elevated) 64%, transparent);
}

.icp-report-value > small {
    grid-column: 1 / -1;
    color: var(--text-secondary);
}

.icp-report-value.is-high,
.icp-report-value.is-low {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--status-warning) 82%, transparent);
}

.icp-report-edit-detail {
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.icp-edit-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.icp-edit-form {
    display: grid;
    gap: var(--space-3);
}

.icp-edit-section {
    display: grid;
    gap: var(--space-2);
}

.icp-edit-row {
    display: grid;
    grid-template-columns: minmax(160px, 1.5fr) repeat(6, minmax(90px, 1fr));
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-elevated) 62%, transparent);
}

.icp-edit-meta label,
.icp-edit-row label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.icp-edit-meta span,
.icp-edit-row span {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.icp-edit-meta input,
.icp-edit-row input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 9px 10px;
    font-size: 0.88rem;
}

.icp-edit-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-color);
}

.icp-empty-state {
    padding: var(--space-4);
    color: var(--text-secondary);
}

.icp-empty-state strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 4px;
}

@media (max-width: 760px) {
    .icp-import-grid,
    .icp-control-grid,
    .icp-stat-grid,
    .icp-compare-shell,
    .icp-compare-grid,
    .icp-report-detail {
        grid-template-columns: 1fr;
    }

    .icp-card-head,
    .icp-report-main {
        flex-direction: column;
        align-items: stretch;
    }

    .icp-report-card {
        grid-template-columns: 1fr;
    }

    .icp-report-actions {
        justify-content: stretch;
    }

    .icp-report-actions .btn-secondary,
    .icp-report-actions .btn-out {
        flex: 1 1 0;
    }

    .icp-edit-meta,
    .icp-edit-row {
        grid-template-columns: 1fr;
    }

    .icp-value-row {
        grid-template-columns: 1fr;
    }

    .icp-chart-card {
        padding: var(--space-3);
    }

    .icp-chart-scroll {
        margin-inline: calc(var(--space-3) * -1);
        width: calc(100% + var(--space-3) * 2);
        padding-inline: var(--space-3);
    }

    .icp-chart-scroll .measurement-chart {
        min-width: 430px;
    }
}

.settings-native-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}
.settings-native-summary::-webkit-details-marker { display: none; }
.settings-native-summary h3 { margin: 0; }
.settings-detail-intro { margin-top: var(--space-4); }

.settings-preset-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}
.settings-preset-card.is-built-in { border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color)); }
.settings-preset-copy { min-width: 0; }
.settings-preset-copy > strong,
.settings-preset-copy > small { display: block; overflow-wrap: anywhere; }
.settings-preset-copy > small { margin-top: var(--space-1); color: var(--text-secondary); }
.settings-preset-badge {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: 0.68rem;
    vertical-align: middle;
}

.shop-link-category { margin-top: var(--space-4); }
.shop-link-category h4 { margin: 0 0 var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-color); color: var(--accent); }
.shop-link-product { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-color); }
.shop-link-product > strong { display: block; overflow-wrap: anywhere; }
.shop-link-size-row { display: grid; grid-template-columns: minmax(70px, auto) minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.shop-link-size-row > span { color: var(--text-secondary); font-size: 0.78rem; }
.shop-link-size-row input { min-width: 0; margin: 0; }
.shop-link-size-row a { color: var(--accent); font-size: 0.78rem; font-weight: 700; }

.google-drive-status-shell[aria-busy="true"] { opacity: 0.78; }
.google-drive-status-shell[aria-busy="true"] .google-drive-status-pill { animation: settings-busy-pulse 1.2s ease-in-out infinite; }
@keyframes settings-busy-pulse { 50% { opacity: 0.52; } }

@media (max-width: 767px) {
    .settings-page-head {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--space-3);
        padding: var(--space-4);
    }
    .settings-help-link {
        justify-self: stretch;
        width: 100% !important;
        max-width: none;
    }
    .settings-group-nav { top: max(var(--space-2), env(safe-area-inset-top)); margin-inline: calc(var(--space-2) * -1); border-radius: 0; }
    #einstellungen > .card { padding: var(--space-4); }
    .settings-summary-copy small { display: none; }
    .settings-preset-card { flex-direction: column; }
    .settings-row-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-row-actions > button { width: 100%; }
    .shop-link-size-row { grid-template-columns: 1fr auto; }
    .shop-link-size-row > span { grid-column: 1 / -1; }

    .header-sync-indicator,
    .header-quick-sync-button,
    .threshold-btn { min-width: 40px; min-height: 40px; }

    main summary,
    #einstellungen > .card > details > summary,
    #einstellungen > .card > .settings-accordion > summary {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    footer a,
    .shop-link-size-row a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

@media (max-width: 390px) {
    .settings-actions { display: grid; grid-template-columns: 1fr; }
    .settings-actions > button { width: 100%; }
    .settings-row-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .google-drive-status-shell[aria-busy="true"] .google-drive-status-pill { animation: none; }
}

/* Priority 8: final presentation consistency */
.resource-subheading { margin: var(--space-4) 0 var(--space-2); }

.quick-preview-header h3 { margin: 0; overflow-wrap: anywhere; }
.quick-preview-stockline { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.quick-preview-stockline .stock { font-size: 1.2rem; }
.quick-preview-stockline > span:last-child { color: var(--text-secondary); }
.quick-preview-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.quick-preview-metrics > div { min-width: 0; padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-raised); }
.quick-preview-metrics small,
.quick-preview-metrics strong { display: block; overflow-wrap: anywhere; }
.quick-preview-metrics small { color: var(--text-secondary); font-size: 0.75rem; }
.quick-preview-metrics strong { margin-top: var(--space-1); font-size: 1.08rem; }
.quick-preview-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.quick-preview-actions > button { width: 100%; }

body.theme-badman .subtitle,
body.theme-badman .hint,
body.theme-badman .unit-label,
body.theme-badman .log-date { color: var(--text-secondary) !important; }
body.theme-badman .btn-out,
body.theme-badman .stock,
body.theme-badman .version-badge,
body.theme-badman .prognose-badge { color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 44%, transparent) !important; }

@media (max-width: 390px) {
    .quick-preview-metrics,
    .quick-preview-actions { grid-template-columns: 1fr; }
}

/* BADMAN final polish: visible brand background with readable glass surfaces */
body.theme-badman {
    --app-bg: #101012;
    --nav-bg: #151517;
    --surface-card: #202023;
    --surface-raised: #29292d;
    --border-color: rgba(255, 102, 112, 0.28);
    --text-primary: #f7f7f8;
    --text-secondary: #b9b9bf;
    --accent: #ff6670;
    --accent-strong: #e63946;
    --secondary: #d3d3d8;
    background-color: #101012 !important;
    background-image:
        radial-gradient(circle at 50% 42%, rgba(255, 102, 112, 0.16) 0, transparent 34%),
        linear-gradient(180deg, rgba(16, 16, 18, 0.58) 0%, rgba(16, 16, 18, 0.84) 48%, rgba(16, 16, 18, 0.95) 100%),
        url("../img/badman.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center 42%, center center, center 42% !important;
    background-size: min(92vw, 760px) auto, cover, min(82vw, 700px) auto !important;
    background-attachment: fixed !important;
}

body.theme-badman #appHeader,
body.theme-badman header {
    background: rgba(16, 16, 18, 0.74) !important;
    border-color: rgba(255, 102, 112, 0.22) !important;
    box-shadow: 0 1px 0 rgba(255, 102, 112, 0.15), 0 18px 44px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

body.theme-badman .nav-menu,
body.theme-badman .mobile-bottom-nav {
    background: rgba(18, 18, 20, 0.78) !important;
    border-color: rgba(255, 102, 112, 0.2) !important;
    backdrop-filter: blur(18px) saturate(1.18);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

body.theme-badman .card,
body.theme-badman .dashboard-card,
body.theme-badman .tool-card,
body.theme-badman .settings-card,
body.theme-badman .log-item,
body.theme-badman .stat-block,
body.theme-badman .quick-preview-metrics > div,
body.theme-badman #cr-preview-container,
body.theme-badman #containerSection {
    background: linear-gradient(180deg, rgba(35, 35, 39, 0.74), rgba(24, 24, 27, 0.72)) !important;
    border-color: rgba(255, 102, 112, 0.18) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(10px) saturate(1.12);
    -webkit-backdrop-filter: blur(10px) saturate(1.12);
}

body.theme-badman textarea,
body.theme-badman input[type="number"],
body.theme-badman input[type="text"],
body.theme-badman input[type="password"],
body.theme-badman input[type="file"],
body.theme-badman input[type="email"],
body.theme-badman input[type="date"],
body.theme-badman input[type="datetime-local"],
body.theme-badman select {
    background: rgba(16, 16, 18, 0.78) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 102, 112, 0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body.theme-badman textarea:focus,
body.theme-badman input:focus,
body.theme-badman select:focus {
    border-color: rgba(255, 102, 112, 0.72) !important;
    box-shadow: 0 0 0 3px rgba(255, 102, 112, 0.16) !important;
}

body.theme-badman .btn-primary,
body.theme-badman .nav-links button.active {
    background: linear-gradient(135deg, #ff6670, #c92532) !important;
    color: #fff !important;
    border-color: rgba(255, 102, 112, 0.52) !important;
    box-shadow: 0 10px 24px rgba(230, 57, 70, 0.24) !important;
}

body.theme-badman .btn-secondary,
body.theme-badman .btn-cancel,
body.theme-badman .nav-links button {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-badman .btn-out,
body.theme-badman .stock,
body.theme-badman .version-badge,
body.theme-badman .prognose-badge {
    background: rgba(255, 102, 112, 0.13) !important;
    color: #ff8a92 !important;
}

body.theme-badman .subtitle,
body.theme-badman .hint,
body.theme-badman .unit-label,
body.theme-badman .log-date {
    color: var(--text-secondary) !important;
}

body.theme-badman .app-footer {
    background: rgba(16, 16, 18, 0.58) !important;
    border-color: rgba(255, 102, 112, 0.14) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 767px) {
    body.theme-badman {
        background-image: none !important;
        background-attachment: initial !important;
    }

    body.theme-badman::before {
        background-color: #101012 !important;
        background-image:
            radial-gradient(circle at 50% 20%, rgba(255, 102, 112, 0.18) 0, transparent 38%),
            linear-gradient(180deg, rgba(16, 16, 18, 0.42) 0%, rgba(16, 16, 18, 0.8) 46%, rgba(16, 16, 18, 0.95) 100%),
            url("../img/badman.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center 72px, center center, center 74px !important;
        background-size: min(150vw, 620px) auto, cover, min(136vw, 560px) auto !important;
    }

    body.theme-badman #appHeader,
    body.theme-badman header,
    body.theme-badman .mobile-bottom-nav {
        background: rgba(16, 16, 18, 0.68) !important;
    }

    body.theme-badman .card,
    body.theme-badman .dashboard-card,
    body.theme-badman .tool-card,
    body.theme-badman .settings-card,
    body.theme-badman .log-item,
    body.theme-badman .stat-block {
        background: linear-gradient(180deg, rgba(35, 35, 39, 0.7), rgba(24, 24, 27, 0.68)) !important;
    }
}

/* Theme cleanup: keep the pink theme polished and consistent with the app UI */
body.theme-girl {
    color-scheme: light;
    --app-bg: #fff7fb;
    --nav-bg: #fffafd;
    --surface-card: #ffffff;
    --surface-raised: #fff0f6;
    --border-color: #f3bfd2;
    --text-primary: #351324;
    --text-secondary: #7d5b6a;
    --accent: #c52f70;
    --accent-strong: #9d2459;
    --status-success: #2f8f65;
    --status-warning: #a86b16;
    --status-danger: #c92d4f;
    --secondary: #8d4770;
    background: linear-gradient(180deg, #fff8fb 0%, #ffeef5 100%) !important;
}

body.theme-girl header h1::before,
body.theme-girl header h1::after,
body.theme-girl .category-title::before,
body.theme-girl .category-title::after,
body.theme-girl .card h4 span::before,
body.theme-girl .btn-in::before,
body.theme-girl .btn-out::before {
    content: none !important;
}

body.theme-girl #appHeader,
body.theme-girl header,
body.theme-girl .nav-menu,
body.theme-girl .mobile-bottom-nav {
    background: rgba(255, 250, 253, 0.84) !important;
    border-color: rgba(197, 47, 112, 0.16) !important;
    box-shadow: 0 1px 0 rgba(197, 47, 112, 0.08), 0 14px 36px rgba(80, 18, 45, 0.08) !important;
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

body.theme-girl .card,
body.theme-girl .dashboard-card,
body.theme-girl .tool-card,
body.theme-girl .settings-card,
body.theme-girl .log-item,
body.theme-girl .stat-block,
body.theme-girl #cr-preview-container,
body.theme-girl #containerSection {
    background: rgba(255, 255, 255, 0.88) !important;
    color: var(--text-primary) !important;
    border-color: rgba(197, 47, 112, 0.14) !important;
    box-shadow: 0 16px 40px rgba(80, 18, 45, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.theme-girl textarea,
body.theme-girl input[type="number"],
body.theme-girl input[type="text"],
body.theme-girl input[type="password"],
body.theme-girl input[type="file"],
body.theme-girl input[type="email"],
body.theme-girl input[type="date"],
body.theme-girl input[type="datetime-local"],
body.theme-girl input[type="search"],
body.theme-girl select {
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--text-primary) !important;
    border-color: rgba(197, 47, 112, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body.theme-girl textarea:focus,
body.theme-girl input:focus,
body.theme-girl select:focus {
    border-color: rgba(197, 47, 112, 0.62) !important;
    box-shadow: 0 0 0 3px rgba(197, 47, 112, 0.14) !important;
}

body.theme-girl h1,
body.theme-girl h2,
body.theme-girl h3,
body.theme-girl h4,
body.theme-girl label,
body.theme-girl strong,
body.theme-girl .stat-grid div strong,
body.theme-girl .trace-grid label {
    color: var(--text-primary) !important;
}

body.theme-girl .subtitle,
body.theme-girl .hint,
body.theme-girl .unit-label,
body.theme-girl .log-date,
body.theme-girl small {
    color: var(--text-secondary) !important;
}

body.theme-girl .btn-primary,
body.theme-girl .nav-links button.active {
    background: linear-gradient(135deg, #d94a85, #a82761) !important;
    color: #ffffff !important;
    border-color: rgba(197, 47, 112, 0.42) !important;
    box-shadow: 0 10px 24px rgba(197, 47, 112, 0.18) !important;
}

body.theme-girl .btn-secondary,
body.theme-girl .btn-cancel,
body.theme-girl .nav-links button {
    background: rgba(255, 255, 255, 0.74) !important;
    color: var(--text-primary) !important;
    border-color: rgba(197, 47, 112, 0.15) !important;
}

body.theme-girl .btn-out,
body.theme-girl .btn-danger {
    background: rgba(201, 45, 79, 0.1) !important;
    color: #a41f3f !important;
    border-color: rgba(201, 45, 79, 0.22) !important;
}

body.theme-girl .btn-in,
body.theme-girl .stock,
body.theme-girl .version-badge,
body.theme-girl .prognose-badge {
    background: rgba(197, 47, 112, 0.1) !important;
    color: #8f2455 !important;
    border-color: rgba(197, 47, 112, 0.18) !important;
}

body.theme-girl .app-footer {
    background: rgba(255, 250, 253, 0.72) !important;
    border-color: rgba(197, 47, 112, 0.12) !important;
}

.coral-form-actions {
    justify-content: flex-start;
    align-items: center;
}

.coral-form-actions .btn-secondary {
    order: 2;
}

@media (max-width: 767px) {
    .coral-section-head > button { width: auto; }
    .coral-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .coral-form-actions > button {
        width: 100%;
    }
}

/* Mobile navigation final safe-area polish */
@media (max-width: 767px) {
    .warehouse-switcher {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .warehouse-switcher select {
        grid-column: 1 / -1;
        min-height: 46px !important;
        height: 46px !important;
        padding-inline: 14px 34px !important;
        font-size: 0.95rem !important;
        font-weight: 700;
        text-overflow: ellipsis;
    }

    .warehouse-switcher button {
        width: 100%;
        min-width: 0;
    }

    .warehouse-meta {
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    .mobile-bottom-nav {
        left: calc(max(14px, env(safe-area-inset-left, 0px)) + 4px) !important;
        right: calc(max(14px, env(safe-area-inset-right, 0px)) + 4px) !important;
        bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 10px) !important;
        width: auto !important;
        min-height: 62px !important;
        padding: 7px !important;
        gap: 6px !important;
        border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent) !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        box-shadow: 0 -10px 34px rgba(0, 8, 12, 0.26) !important;
    }

    .mobile-bottom-nav button {
        min-height: 48px !important;
        padding: 6px 1px !important;
        border-radius: 18px !important;
    }

    .mobile-bottom-nav .mobile-nav-label {
        display: none !important;
    }

    .mobile-bottom-nav button .nav-icon {
        width: 24px !important;
        height: 24px !important;
    }

    body {
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Text readability guard: prefer smaller text or clipping over breaking words mid-word. */
:where(h1, h2, h3, h4, h5, h6, p, span, small, strong, em, label, summary, button, .card, .hint, .subtitle, .nav-links button, .tool-tile-card, .dashboard-card, .resource-link-card) {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

:where(code, pre, .sync-diagnostics-result, .toast-message, .warehouse-meta, .drive-history-list, .backup-import-preview, .raw-data, .url-like, .file-name) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Mobile dashboard: use readable one-column status rows instead of cramped tiles. */
@media (max-width: 767px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .dashboard-tile {
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label value"
            "detail value";
        align-items: center;
        column-gap: 14px;
        row-gap: 2px;
        padding: 13px 14px !important;
        border-radius: 16px !important;
    }

    .dashboard-tile > span {
        grid-area: label;
        min-width: 0;
        font-size: 0.82rem !important;
        font-weight: 760;
        line-height: 1.2;
    }

    .dashboard-tile > strong {
        grid-area: value;
        justify-self: end;
        max-width: 46vw;
        margin: 0 !important;
        font-size: clamp(1rem, 5.2vw, 1.32rem) !important;
        line-height: 1.08 !important;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dashboard-tile > small {
        grid-area: detail;
        min-width: 0;
        font-size: 0.76rem !important;
        line-height: 1.25;
    }

    .dashboard-tile strong i {
        font-size: 0.72em;
    }
}

@media (max-width: 360px) {
    .dashboard-tile {
        column-gap: 10px;
        padding: 12px !important;
    }

    .dashboard-tile > strong {
        max-width: 42vw;
        font-size: clamp(0.92rem, 4.8vw, 1.14rem) !important;
    }
}

/* Global text-fit guard: avoid mid-word breaks; compact UI shrinks before it wraps. */
:where(
    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-cancel,
    .btn-danger,
    .btn-warning,
    .btn-ghost,
    .btn-in,
    .btn-out,
    .nav-links button,
    .mobile-bottom-nav button,
    .tool-section-summary strong,
    .tool-section-summary small,
    .tool-tile-card h3,
    .tool-compact-card h3,
    .tool-row > span:first-child,
    .dashboard-tile > span,
    .dashboard-tile > strong,
    .dashboard-list-row strong,
    .inventory-card h4,
    .inventory-product-copy strong,
    .settings-group-nav button,
    .settings-row-actions button,
    .coral-card-head strong,
    .protocol-entry-head strong
) {
    --text-fit-scale: 1;
    font-size: calc(var(--text-fit-base, 1em) * var(--text-fit-scale));
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

:where(
    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-cancel,
    .btn-danger,
    .btn-warning,
    .btn-ghost,
    .btn-in,
    .btn-out,
    .nav-links button,
    .mobile-bottom-nav button,
    .tool-section-summary strong,
    .tool-section-summary small,
    .tool-tile-card h3,
    .tool-compact-card h3,
    .dashboard-tile > strong,
    .settings-group-nav button,
    .settings-row-actions button
) {
    white-space: nowrap;
}

:where(.text-fit-overflow, .text-fit-overflow *) {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Legal pages are standalone documents, not part of the app shell grid. */
body.legal-page {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 !important;
}

body.legal-page .legal-shell {
    width: min(920px, calc(100vw - 28px));
    margin-inline: auto !important;
}

html.legal-embedded body.legal-page .legal-shell {
    width: min(920px, calc(100vw - 24px));
    margin: 14px auto 28px !important;
}

/* Illustrated guide page */
body.guide-page {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 !important;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34rem),
        radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30rem),
        var(--bg-primary);
    color: var(--text-primary);
}

.guide-shell {
    width: min(1120px, calc(100vw - 28px));
    margin: 0 auto;
    padding: max(24px, env(safe-area-inset-top)) 0 42px;
}

.guide-hero,
.guide-card,
.guide-warning,
.guide-toc {
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(22px);
}

.guide-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(22px, 4vw, 40px);
    border-radius: 26px;
    margin-bottom: 14px;
}

.guide-hero h1 {
    margin: 6px 0 10px;
    font-size: clamp(2.2rem, 6vw, 4.6rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.guide-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--text-secondary);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.45;
}

.guide-app-link {
    flex: 0 0 auto;
    text-decoration: none;
}

.guide-warning {
    border-radius: 18px;
    padding: 16px 18px;
    margin-bottom: 14px;
    border-color: color-mix(in srgb, var(--warning) 48%, var(--border));
    background: color-mix(in srgb, var(--warning) 12%, var(--bg-secondary));
}

.guide-warning p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    line-height: 1.45;
}

.guide-toc {
    position: sticky;
    top: 10px;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 10px;
    border-radius: 18px;
    margin-bottom: 16px;
}

.guide-toc a {
    min-width: 0;
    color: var(--text-primary);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 10px;
    background: color-mix(in srgb, var(--bg-tertiary) 78%, transparent);
    font-weight: 750;
    font-size: clamp(0.72rem, 2.45vw, 0.9rem);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guide-card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: clamp(18px, 3vw, 30px);
    align-items: center;
    border-radius: 24px;
    padding: clamp(18px, 3vw, 30px);
    margin-bottom: 16px;
}

.guide-card-wide {
    grid-template-columns: 1fr;
}

.guide-copy h2 {
    margin: 6px 0 10px;
    font-size: clamp(1.7rem, 4vw, 2.45rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.guide-copy p {
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 14px;
}

.guide-copy ul,
.guide-copy ol {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.guide-copy li + li {
    margin-top: 7px;
}

.guide-copy strong {
    color: var(--text-primary);
}

.guide-tool-map {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.guide-tool-card {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-tertiary) 64%, transparent);
}

.guide-tool-card span {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 900;
}

.guide-tool-card strong {
    font-size: clamp(0.88rem, 1.5vw, 1rem);
    line-height: 1.18;
}

.guide-tool-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}

.guide-subtool-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.guide-subtool-group {
    min-width: 0;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-secondary) 62%, transparent);
}

.guide-subtool-group h3 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: clamp(1rem, 2vw, 1.16rem);
    line-height: 1.15;
}

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

.guide-subtool-list article {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-tertiary) 56%, transparent);
}

.guide-subtool-list strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.84rem;
    line-height: 1.15;
}

.guide-subtool-list p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.3;
}

.guide-figure {
    margin: 0;
    min-width: 0;
}

.guide-figure img {
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: contain;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
}

.guide-figure figcaption {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.35;
    margin-top: 8px;
}

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

.guide-final {
    align-items: start;
}

html.guide-embedded body.guide-page {
    background: transparent;
}

html.guide-embedded .guide-shell {
    width: min(1120px, calc(100vw - 18px));
    padding: 14px 0 28px;
}

html.guide-embedded .guide-hero {
    padding: clamp(18px, 3vw, 28px);
}

@media (max-width: 860px) {
    .guide-shell {
        width: min(100% - 18px, 680px);
        padding-bottom: calc(34px + env(safe-area-inset-bottom));
    }

    .guide-hero {
        display: grid;
        align-items: start;
        border-radius: 22px;
    }

    .guide-card {
        grid-template-columns: 1fr;
        border-radius: 22px;
    }

    .guide-shot-grid {
        grid-template-columns: 1fr;
    }

    #tools .guide-shot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    #tools .guide-shot-grid .guide-figure img {
        max-height: 160px;
    }

    #tools .guide-shot-grid .guide-figure figcaption {
        font-size: 0.68rem;
        line-height: 1.2;
    }

    .guide-tool-map {
        grid-template-columns: 1fr;
    }

    .guide-subtool-groups,
    .guide-subtool-list {
        grid-template-columns: 1fr;
    }

    .guide-subtool-group {
        padding: 12px;
    }

    .guide-tool-card {
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: start;
        gap: 4px 10px;
    }

    .guide-tool-card span {
        grid-row: span 2;
    }

    .guide-figure img {
        max-height: none;
    }

    .guide-toc {
        top: 6px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
        border-radius: 16px;
    }

    .guide-toc a {
        min-height: 34px;
        padding: 8px 7px;
        font-size: clamp(0.68rem, 3.2vw, 0.78rem);
    }
}

/* Header compact layout: keeps cloud actions stable on narrow mobile screens. */
#appHeader .header-main {
    min-width: 0;
}

#appHeader .header-title-block,
#appHeader .header-title-container,
#appHeader .header-cloud-bar,
#appHeader .header-sync-indicator,
#appHeader .header-sync-copy {
    min-width: 0;
}

#appHeader .header-sync-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767px) {
    #appHeader {
        padding: calc(9px + var(--safe-top)) 12px 9px;
    }

    #appHeader .header-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 8px;
        align-items: start;
    }

    #appHeader .header-title-block {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        width: 100%;
    }

    #appHeader .header-title-container {
        width: 100%;
        padding-right: 2px;
    }

    #appHeader h1 {
        font-size: clamp(0.98rem, 4.9vw, 1.18rem);
        line-height: 1.15;
    }

    #appHeader .version-badge {
        padding: 3px 7px;
        font-size: 0.68rem;
    }

    #appHeader .menu-toggle {
        grid-column: 2;
        grid-row: 1;
        width: 44px;
        min-width: 44px;
        height: 44px;
        margin-top: -2px;
    }

    #appHeader .header-cloud-bar {
        display: grid;
        grid-template-columns: max-content minmax(50px, 0.48fr) minmax(54px, 0.52fr) minmax(64px, 0.62fr) minmax(50px, 0.48fr);
        gap: 6px;
        width: 100%;
        overflow: visible;
    }

    #appHeader .header-sync-indicator,
    #appHeader .header-quick-sync-button {
        width: 100%;
        min-width: 0;
        min-height: 34px;
        padding: 6px 7px;
        border-radius: 10px;
        font-size: clamp(0.64rem, 3.2vw, 0.76rem);
        line-height: 1;
    }

    #appHeader .header-sync-indicator {
        width: auto;
        justify-content: flex-start;
        gap: 6px;
    }

    #appHeader .header-sync-copy {
        display: block;
        overflow: hidden;
    }

    #appHeader .header-sync-copy strong {
        display: none;
    }

    #appHeader .header-sync-copy small {
        display: block;
        max-width: none;
        font-size: clamp(0.64rem, 3.1vw, 0.72rem);
        line-height: 1.15;
    }

    #appHeader .header-support-button {
        font-size: 0;
    }

    #appHeader .header-support-button::before {
        content: "Spenden";
        font-size: clamp(0.64rem, 3.1vw, 0.74rem);
    }

    #appHeader .header-help-link {
        padding-inline: 6px;
    }

    #appHeader .subtitle {
        margin-top: 6px;
        padding-left: 0;
    }
}

@media (max-width: 374px) {
    #appHeader {
        padding-inline: 9px;
    }

    #appHeader .header-cloud-bar {
        grid-template-columns: max-content 45px 50px 58px 42px;
        gap: 5px;
    }

    #appHeader .header-sync-indicator,
    #appHeader .header-quick-sync-button {
        min-height: 32px;
        padding-inline: 5px;
    }

    #appHeader .header-support-button::before {
        content: "Spenden";
        font-size: 0.62rem;
    }

    #appHeader .header-help-link {
        font-size: 0.62rem;
    }
}

/* Content visibility settings */
.feature-visibility-settings,
.tool-visibility-settings {
    display: grid;
    gap: 10px;
    margin: 14px 0 18px;
}

.feature-visibility-settings .settings-toggle-row {
    margin: 0;
}

.settings-subheading {
    margin: 22px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: 0.95rem;
}

.tool-visibility-head {
    display: grid;
    gap: 4px;
}

.tool-visibility-head small {
    color: var(--text-muted);
    line-height: 1.4;
}

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

.tool-visibility-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.tool-visibility-row > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.tool-visibility-row strong,
.tool-visibility-row small {
    overflow-wrap: normal;
    word-break: normal;
}

.tool-visibility-row small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.tool-visibility-row.is-disabled {
    opacity: 0.55;
}

.tool-user-hidden,
.tool-section-user-hidden,
body.osci-features-hidden [data-osci-only="true"],
body.osci-features-hidden .osci-system-note {
    display: none !important;
}

@media (max-width: 767px) {
    .tool-visibility-grid {
        grid-template-columns: 1fr;
    }

    .tool-visibility-row {
        min-height: 48px;
    }
}

/* Tools minimal layout: search first, then plain sections. */
#tools .tools-hub-card {
    padding: 14px;
}

#tools .tools-hub-head h3 {
    margin-bottom: 4px;
}

#tools .tools-hub-head .hint {
    margin: 0 0 10px;
}

#tools .tools-command-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#tools .tools-search-wrap {
    min-height: 46px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#tools .tools-search-wrap input {
    color: var(--text-primary);
}

#tools .tools-search-wrap:focus-within {
    box-shadow: none;
}

#tools .tool-section {
    scroll-margin-top: calc(var(--header-height) + 12px);
}

#tools .tool-section[open] {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border-color));
}

@media (max-width: 760px) {
    #tools .tools-hub-card {
        padding: 12px;
    }

    #tools .tools-hub-head .hint {
        font-size: 0.78rem;
    }
}

/* Mobile tool tiles must stay fully readable, even when collapsed. */
@media (max-width: 767px) {
    #tools .tool-card-grid {
        grid-template-columns: 1fr !important;
    }

    #tools .tool-tile-card.tool-tile-collapsed {
        min-height: 0 !important;
        align-items: start;
        gap: 7px;
    }

    #tools .tool-tile-card.tool-tile-collapsed > h3 {
        align-items: flex-start;
        gap: 8px;
        font-size: 0.9rem !important;
        line-height: 1.22 !important;
        overflow: visible !important;
    }

    #tools .tool-tile-card.tool-tile-collapsed > h3 .tool-title-text {
        display: block !important;
        min-width: 0;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: initial !important;
        white-space: normal !important;
        text-overflow: clip !important;
    }

    #tools .tool-tile-card.tool-tile-collapsed > h3 .tool-info-button {
        flex: 0 0 auto;
        margin-top: -2px;
    }

    #tools .tool-tile-card.tool-tile-collapsed > .hint {
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: initial !important;
        white-space: normal !important;
        text-overflow: clip !important;
        font-size: 0.76rem !important;
        line-height: 1.28 !important;
    }
}

/* UX and accessibility foundations. */
.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10000;
    padding: 10px 14px;
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--nav-bg);
    color: var(--text-primary);
    font-weight: 800;
    transform: translateY(-160%);
    transition: transform var(--transition-fast) var(--ease-standard);
}

.skip-link:focus {
    transform: translateY(0);
}

#app:focus {
    outline: none;
}

#tools .tools-command-bar {
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: var(--space-2);
}

#tools .tools-search-clear {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
    color: var(--text-secondary);
    font-size: 1.35rem;
    line-height: 1;
}

#tools .tools-search-clear[hidden] {
    display: none;
}

#tools .tool-search-status {
    min-height: 18px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.3;
}

#tools .tool-global-disclaimer {
    display: block;
    padding: 0;
    overflow: hidden;
}

#tools .tool-global-disclaimer summary {
    min-height: 44px;
    padding: 11px 14px;
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 750;
    line-height: 1.35;
}

#tools .tool-global-disclaimer p {
    margin: 0;
    padding: 0 14px 14px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

#tools .tool-tile-toggle {
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    width: auto;
    margin: -8px 0;
    padding: 8px 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: left;
}

#tools .tool-tile-toggle:hover,
#tools .tool-tile-toggle:active {
    transform: none;
    background: transparent;
    box-shadow: none;
}

#tools .tool-tile-toggle .tool-title-text {
    min-width: 0;
    white-space: normal;
}

.sangokai-search-controls > label {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

@media (max-width: 374px) {
    #appHeader .header-cloud-bar {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 0.75fr);
    }

    #tools .tools-command-bar {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    #tools .tools-search-clear {
        width: 42px;
        min-width: 42px;
    }

    .nav-menu {
        width: min(94vw, 340px);
    }
}

@media (forced-colors: active) {
    :where(button, a, input, select, textarea, summary):focus-visible {
        outline: 2px solid Highlight;
    }
}

/* ========================================================================== 
   REEFTOOLS DESIGN SYSTEM 3.3
   A final, shared presentation layer for every app area and color theme.
   ========================================================================== */

:root {
    --app-bg: #0a1114;
    --nav-bg: #0d171a;
    --surface-card: #121d20;
    --surface-raised: #19272a;
    --surface-overlay: #1d2d31;
    --border-color: #2b3d41;
    --text-primary: #f4f8f8;
    --text-secondary: #9eb0b3;
    --accent: #35c2ca;
    --accent-strong: #1599a5;
    --accent-contrast: #041315;
    --secondary: #82d5dc;
    --status-success: #38b77b;
    --status-warning: #e7ad48;
    --status-danger: #e46565;
    --status-info: #5cb8e6;
    --content-max: 1240px;
    --nav-width: 244px;
    --radius-card: 10px;
    --shadow-sm: 0 2px 10px rgba(0, 6, 8, 0.16);
    --shadow-md: 0 12px 30px rgba(0, 6, 8, 0.2);
    --shadow-lg: 0 22px 54px rgba(0, 6, 8, 0.3);
    --shadow-subtle: 0 1px 0 rgba(255, 255, 255, 0.035), 0 6px 20px rgba(0, 6, 8, 0.12);
    --shadow-raised: 0 14px 34px rgba(0, 6, 8, 0.24);
    --shadow-overlay: 0 26px 68px rgba(0, 6, 8, 0.46);
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 150ms;
    --transition-base: 260ms;
    --bg-primary: var(--app-bg);
    --bg-secondary: var(--surface-card);
    --bg-tertiary: var(--surface-raised);
}

body.theme-girl,
html.theme-girl {
    --app-bg: #fff5f8;
    --nav-bg: #fffafd;
    --surface-card: #ffffff;
    --surface-raised: #fff0f5;
    --surface-overlay: #ffffff;
    --border-color: #edc9d6;
    --text-primary: #3c1727;
    --text-secondary: #805d6b;
    --accent: #c92f70;
    --accent-strong: #a91f59;
    --accent-contrast: #ffffff;
    --secondary: #a33a76;
    --status-info: #3976b7;
}

body.theme-mint,
html.theme-mint {
    --app-bg: #07141a;
    --nav-bg: #091b22;
    --surface-card: #10252d;
    --surface-raised: #17343b;
    --surface-overlay: #1a3b43;
    --border-color: #2b5058;
    --text-primary: #f1fbfb;
    --text-secondary: #a2bec2;
    --accent: #55d5cc;
    --accent-strong: #24aaa5;
    --accent-contrast: #051716;
    --secondary: #7bd8ed;
    --status-info: #64b9ee;
}

body.theme-badman,
html.theme-badman {
    --app-bg: #111214;
    --nav-bg: #17181b;
    --surface-card: #202124;
    --surface-raised: #2a2c30;
    --surface-overlay: #303237;
    --border-color: #42444a;
    --text-primary: #f5f5f5;
    --text-secondary: #aaaeb6;
    --accent: #ff5f69;
    --accent-strong: #d63b47;
    --accent-contrast: #ffffff;
    --secondary: #c6c9cf;
    --status-info: #7eb5db;
}

body.theme-light,
html.theme-light {
    --app-bg: #f4f5f7;
    --nav-bg: #ffffff;
    --surface-card: #ffffff;
    --surface-raised: #eef0f3;
    --surface-overlay: #ffffff;
    --border-color: #d4d8de;
    --text-primary: #17191c;
    --text-secondary: #626870;
    --accent: #0879e8;
    --accent-strong: #0061c5;
    --accent-contrast: #ffffff;
    --secondary: #4c61c7;
    --status-info: #0879e8;
    --shadow-sm: 0 2px 10px rgba(26, 35, 44, 0.07);
    --shadow-md: 0 12px 30px rgba(26, 35, 44, 0.1);
    --shadow-lg: 0 22px 54px rgba(26, 35, 44, 0.14);
}

html {
    scroll-behavior: smooth;
    scrollbar-color: color-mix(in srgb, var(--accent) 36%, var(--border-color)) transparent;
}

body {
    background: var(--app-bg);
    color: var(--text-primary);
}

body::selection,
body *::selection {
    background: color-mix(in srgb, var(--accent) 34%, transparent);
    color: var(--text-primary);
}

#appHeader {
    background: color-mix(in srgb, var(--nav-bg) 88%, transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--border-color) 78%, transparent) !important;
    box-shadow: 0 8px 28px rgba(0, 6, 8, 0.1) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
}

#appHeader h1 {
    font-weight: 780;
    letter-spacing: 0;
}

.version-badge {
    border-radius: 7px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
}

.header-sync-indicator,
.header-quick-sync-button,
.menu-toggle,
.close-menu {
    border-color: color-mix(in srgb, var(--border-color) 86%, transparent) !important;
    background: color-mix(in srgb, var(--surface-raised) 80%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
    transition: transform var(--transition-fast) var(--ease-spring), border-color var(--transition-fast) ease, background-color var(--transition-fast) ease !important;
}

.header-sync-indicator:hover,
.header-quick-sync-button:hover,
.menu-toggle:hover,
.close-menu:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised)) !important;
}

#main-nav.nav-menu {
    background: color-mix(in srgb, var(--nav-bg) 97%, transparent) !important;
    box-shadow: 16px 0 50px rgba(0, 6, 8, 0.1);
}

#main-nav .nav-links {
    gap: 4px;
    padding-inline: 2px;
}

#main-nav .nav-links button {
    position: relative;
    overflow: hidden;
    border-radius: 8px !important;
    transition: color var(--transition-fast) ease, background-color var(--transition-fast) ease, border-color var(--transition-fast) ease, transform var(--transition-fast) var(--ease-spring) !important;
}

#main-nav .nav-links button:hover {
    transform: translateX(2px);
}

#main-nav .nav-links button.active,
#main-nav .nav-links button[aria-current="page"] {
    color: var(--text-primary) !important;
    background: color-mix(in srgb, var(--accent) 13%, var(--surface-raised)) !important;
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color)) !important;
    box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 color-mix(in srgb, white 5%, transparent) !important;
}

.tab-content {
    gap: 16px;
    padding: 22px clamp(12px, 2.2vw, 26px) 42px;
}

.tab-content.active {
    animation: reefPageEnter 420ms var(--ease-spring) both;
}

:where(.dashboard-page-head, .warehouse-page-head, .section-page-head, .settings-page-head, .logbook-page-header) {
    padding-block: 12px 15px;
    border-bottom: 1px solid var(--border-color);
}

:where(.dashboard-page-head, .warehouse-page-head, .section-page-head, .settings-page-head, .logbook-page-header) h2 {
    color: var(--text-primary);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 790;
    line-height: 1.12;
}

.section-eyebrow,
.dashboard-page-head small,
.warehouse-page-head small,
.settings-page-head .section-eyebrow {
    color: color-mix(in srgb, var(--accent) 72%, var(--text-secondary));
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

:where(.card, .dashboard-widget, .dashboard-panel, .dashboard-measurement-card, .warehouse-control-card, .warehouse-filter-panel, .inventory-card, .logbook-card, .measurement-chart-card, .measurement-detail-card, .measurement-empty, .tool-section, .tool-tile-card, .tool-compact-card, .settings-card, .settings-accordion, .stat-block, .protocol-entry, .coral-card, .trace-workstep) {
    border-color: color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--surface-card) 96%, transparent);
    box-shadow: var(--shadow-subtle);
}

:where(.card, .dashboard-widget, .inventory-card, .logbook-card, .tool-section, .tool-tile-card, .settings-card, .settings-accordion, .stat-block, .coral-card) {
    transition: border-color var(--transition-base) ease, background-color var(--transition-base) ease, box-shadow var(--transition-base) ease, transform var(--transition-base) var(--ease-spring);
}

@media (hover: hover) and (pointer: fine) {
    :where(.dashboard-widget, .inventory-card, .tool-tile-card, .stat-block, .coral-card):hover {
        border-color: color-mix(in srgb, var(--accent) 30%, var(--border-color));
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }
}

:where(button, .btn, .btn-primary, .btn-secondary, .btn-cancel, .btn-danger, .btn-warning, .btn-ghost, .btn-in, .btn-out) {
    min-height: 42px;
    border-radius: 8px !important;
    font-weight: 760;
    letter-spacing: 0;
    box-shadow: none;
    transition: transform var(--transition-fast) var(--ease-spring), background-color var(--transition-fast) ease, border-color var(--transition-fast) ease, color var(--transition-fast) ease, box-shadow var(--transition-fast) ease !important;
}

:where(button, .btn, .btn-primary, .btn-secondary, .btn-cancel, .btn-danger, .btn-warning, .btn-ghost, .btn-in, .btn-out):hover:not(:disabled) {
    transform: translateY(-1px);
}

:where(button, .btn, .btn-primary, .btn-secondary, .btn-cancel, .btn-danger, .btn-warning, .btn-ghost, .btn-in, .btn-out):active:not(:disabled) {
    transform: scale(0.975);
    transition-duration: 80ms !important;
}

.btn-primary,
button[type="submit"]:not(.btn-secondary):not(.btn-danger):not(.btn-out),
.btn-in {
    border-color: color-mix(in srgb, var(--accent-strong) 70%, var(--accent)) !important;
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 24%, transparent), 0 8px 18px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

.btn-primary:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled),
.btn-in:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 86%, white) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 30%, transparent), 0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

.btn-secondary,
.btn-cancel,
.btn-ghost {
    border-color: var(--border-color) !important;
    background: var(--surface-raised) !important;
    color: var(--text-primary) !important;
}

.btn-secondary:hover:not(:disabled),
.btn-cancel:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-raised)) !important;
}

.btn-danger,
.btn-out {
    border-color: color-mix(in srgb, var(--status-danger) 50%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--status-danger) 11%, var(--surface-raised)) !important;
    color: color-mix(in srgb, var(--status-danger) 76%, white) !important;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    min-height: 46px;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background-color: color-mix(in srgb, var(--surface-raised) 70%, var(--surface-card)) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
    transition: border-color var(--transition-fast) ease, background-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease !important;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border-color)) !important;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
    border-color: var(--accent) !important;
    background-color: var(--surface-raised) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

:where(input, select, textarea)::placeholder {
    color: color-mix(in srgb, var(--text-secondary) 72%, transparent);
}

label,
.input-group label,
.form-group label {
    color: var(--text-secondary);
    font-size: 0.79rem;
    font-weight: 730;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}

input[type="range"] {
    accent-color: var(--accent);
}

details > summary {
    border-radius: 8px;
    transition: color var(--transition-fast) ease, background-color var(--transition-fast) ease, border-color var(--transition-fast) ease !important;
}

details > summary:hover {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

details[open] > summary {
    color: var(--text-primary);
}

.status-badge {
    min-height: 24px;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 9%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
}

.dashboard-grid {
    gap: 10px;
}

.dashboard-tile {
    position: relative;
    min-height: 112px;
    overflow: hidden;
}

.dashboard-tile::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--accent);
    opacity: 0;
    transform: scaleX(0.25);
    transform-origin: left;
    transition: opacity var(--transition-base) ease, transform var(--transition-base) var(--ease-spring);
}

.dashboard-tile:hover::after {
    opacity: 0.8;
    transform: scaleX(1);
}

.dashboard-tile > span {
    color: var(--text-secondary);
    font-weight: 720;
}

.dashboard-tile > strong {
    font-weight: 820;
}

.dashboard-actions {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--surface-card) 94%, transparent);
    box-shadow: var(--shadow-subtle);
}

.dashboard-panel,
.dashboard-measurement-card {
    min-height: 172px;
}

.dashboard-widget-head {
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
}

.dashboard-list-row {
    background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
}

.dashboard-panel .dashboard-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
}

.dashboard-panel .dashboard-list-row > span {
    min-width: 0;
}

.dashboard-panel .dashboard-list-row > em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.2ch;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--status-danger) 38%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--status-danger) 10%, transparent);
    color: color-mix(in srgb, var(--status-danger) 72%, white);
    font-size: 0.8rem;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.dashboard-progress {
    height: 9px;
    box-shadow: inset 0 1px 3px rgba(0, 6, 8, 0.28);
}

.dashboard-progress::-webkit-progress-value,
progress.mini-progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--accent-strong), var(--accent), var(--secondary));
    background-size: 180% 100%;
    animation: reefProgressFlow 2.8s ease-in-out infinite alternate;
}

.dashboard-progress::-moz-progress-bar,
progress.mini-progress::-moz-progress-bar {
    background: var(--accent);
}

.dashboard-trend-chart,
.measurement-chart {
    overflow: visible;
}

.dashboard-chart-line,
.measurement-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: reefChartDraw 950ms var(--ease-spring) 100ms forwards;
}

.dashboard-chart-area,
.measurement-area {
    transform-origin: center bottom;
    animation: reefChartArea 720ms ease 300ms both;
}

.dashboard-chart-focus,
.measurement-point-halo {
    animation: reefChartPulse 2.4s ease-in-out infinite;
}

.measurement-point-group {
    outline: none;
}

.measurement-point-group .measurement-point,
.measurement-point-group .measurement-point-ring {
    animation: reefPointIn 420ms var(--ease-spring) 620ms both;
}

.measurement-chart-card {
    padding: clamp(12px, 2vw, 18px);
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-card) 96%, transparent);
}

.measurement-chart-scroll {
    border-radius: 8px;
    background: color-mix(in srgb, var(--app-bg) 34%, transparent);
}

.measurement-stats div {
    border-color: var(--border-color);
    border-radius: 8px;
    background: var(--surface-raised);
}

.measurement-stats strong {
    color: var(--accent);
    font-size: clamp(0.88rem, 1.6vw, 1.02rem);
}

.measurement-grid-line {
    stroke: color-mix(in srgb, var(--border-color) 75%, transparent);
}

.measurement-axis {
    stroke: color-mix(in srgb, var(--text-secondary) 34%, transparent);
}

.measurement-label,
.measurement-y-label {
    fill: var(--text-secondary);
}

.warehouse-control-card,
.warehouse-filter-panel {
    padding: 14px;
}

.inventory-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 10px;
}

.inventory-card {
    position: relative;
    padding: 13px;
    overflow: hidden;
}

.inventory-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent);
    opacity: 0.46;
}

.inventory-card.card-warning::before {
    background: var(--status-warning);
    opacity: 1;
}

.inventory-card .stock {
    color: var(--accent) !important;
}

.inventory-facts div {
    background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
}

#tools .tools-shell,
#logbuch .logbook-layout,
#einstellungen .settings-sections {
    gap: 14px;
}

#tools .tool-section {
    overflow: clip;
    background: var(--surface-card);
}

#tools .tool-section-summary {
    min-height: 66px;
    padding: 14px 16px;
}

#tools .tool-section[open] {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color));
    box-shadow: var(--shadow-md);
}

#tools .tool-card-grid {
    gap: 10px;
    padding: 12px;
    border-top-color: var(--border-color);
}

#tools .tool-tile-card {
    padding: 13px;
    background: color-mix(in srgb, var(--surface-raised) 70%, var(--surface-card));
}

#tools .tool-tile-card.tool-tile-collapsed {
    min-height: 98px;
}

#tools .tool-tile-card:not(.tool-tile-collapsed) {
    background: var(--surface-card);
    box-shadow: inset 0 3px 0 color-mix(in srgb, var(--accent) 70%, transparent), var(--shadow-md);
}

#tools .tool-info-button {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised)) !important;
    color: var(--accent) !important;
}

.logbook-hero,
.logbook-card {
    background: var(--surface-card) !important;
}

.logbook-card-details[open] {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border-color));
    box-shadow: var(--shadow-md);
}

.logbook-summary {
    min-height: 54px;
}

.logbook-entry,
.todo-row,
.measurement-list-row,
.protocol-entry {
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--surface-raised) 66%, var(--surface-card));
}

.settings-page-head {
    background: transparent !important;
    box-shadow: none !important;
}

.settings-accordion {
    overflow: clip;
}

.settings-accordion[open] {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border-color));
    box-shadow: var(--shadow-md);
}

.settings-accordion-summary {
    min-height: 64px;
    padding: 13px 15px;
}

.settings-accordion-body {
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-raised) 24%, transparent);
}

.modal {
    background: rgba(2, 8, 10, 0.7);
    backdrop-filter: blur(12px) saturate(0.8);
    -webkit-backdrop-filter: blur(12px) saturate(0.8);
}

.modal-content,
.quick-preview,
.header-quick-sync-menu {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border-color)) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--surface-overlay) 96%, transparent) !important;
    box-shadow: var(--shadow-overlay) !important;
}

.modal[style*="display: flex"] .modal-content,
.modal.open .modal-content,
.quick-preview.active {
    animation: reefModalIn 300ms var(--ease-spring) both;
}

.toast {
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface-overlay) 96%, transparent);
    box-shadow: var(--shadow-overlay);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.app-footer {
    border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    background: color-mix(in srgb, var(--nav-bg) 82%, transparent);
}

.design-reveal {
    opacity: 0;
    transform: translateY(10px);
}

.design-reveal.design-reveal-visible {
    animation: reefSurfaceReveal 480ms var(--ease-spring) var(--reveal-delay, 0ms) both;
}

@keyframes reefPageEnter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes reefSurfaceReveal {
    from { opacity: 0; transform: translateY(10px) scale(0.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes reefModalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes reefChartDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes reefChartArea {
    from { opacity: 0; transform: scaleY(0.82); }
    to { opacity: 1; transform: scaleY(1); }
}

@keyframes reefChartPulse {
    0%, 100% { opacity: 0.22; transform: scale(0.9); }
    50% { opacity: 0.7; transform: scale(1.08); }
}

@keyframes reefPointIn {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes reefProgressFlow {
    from { background-position: 0 50%; }
    to { background-position: 100% 50%; }
}

@media (max-width: 1023px) {
    .mobile-bottom-nav {
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 2px) !important;
        width: auto !important;
        min-height: 64px !important;
        padding: 6px !important;
        border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent) !important;
        border-radius: 18px !important;
        background: color-mix(in srgb, var(--nav-bg) 90%, transparent) !important;
        box-shadow: 0 18px 46px rgba(0, 6, 8, 0.38) !important;
        backdrop-filter: blur(24px) saturate(1.2) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
    }

    .mobile-bottom-nav button {
        min-height: 50px !important;
        border-radius: 12px !important;
    }

    .mobile-bottom-nav button.active,
    .mobile-bottom-nav button[aria-current="page"] {
        color: var(--accent) !important;
        background: color-mix(in srgb, var(--accent) 13%, var(--surface-raised)) !important;
        box-shadow: inset 0 -2px 0 var(--accent) !important;
    }

    body {
        padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .tab-content {
        padding: 14px 12px 30px;
    }

    :where(.dashboard-page-head, .warehouse-page-head, .section-page-head, .settings-page-head, .logbook-page-header) h2 {
        font-size: clamp(1.25rem, 6vw, 1.55rem);
    }

    .modal-content {
        width: min(100%, 520px);
        max-width: 520px;
        max-height: calc(100dvh - 28px);
        padding: 18px;
    }
}

@media (max-width: 767px) {
    #appHeader {
        padding-inline: 12px !important;
    }

    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .dashboard-tile {
        min-height: 68px !important;
        padding: 12px 14px !important;
    }

    .dashboard-panel,
    .dashboard-measurement-card {
        min-height: 0;
    }

    .dashboard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 10px;
    }

    .inventory-card-grid {
        grid-template-columns: 1fr;
    }

    #tools .tool-section-summary {
        min-height: 58px;
        padding: 12px;
    }

    #tools .tool-tile-card.tool-tile-collapsed {
        min-height: 82px !important;
    }

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

    .measurement-stats div {
        padding: 10px;
    }

    .measurement-chart-head,
    .measurement-chart-meta {
        gap: 10px;
    }

    .measurement-chart-meta {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .measurement-chart-meta span {
        text-align: center;
    }

    .settings-accordion-summary {
        min-height: 58px;
        padding: 11px 12px;
    }
}

@media (max-width: 390px) {
    .tab-content {
        padding-inline: 9px;
    }

    .dashboard-actions,
    .measurement-stats {
        grid-template-columns: 1fr;
    }

    .measurement-chart-meta {
        grid-template-columns: 1fr;
    }

    #tools .tool-card-grid {
        padding: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }

    .design-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Tool category descriptions stay complete and wrap at natural word boundaries. */
#tools .tool-section-summary > span:first-child {
    min-width: 0;
}

#tools .tool-section-summary small,
#tools .tool-section-summary small.text-fit-overflow {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: visible;
    text-overflow: clip;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

@media (max-width: 767px) {
    #tools .tool-section-summary {
        min-height: 0;
        height: auto;
        align-items: flex-start;
    }

    #tools .tool-section-summary > span:first-child {
        overflow: visible;
    }

    #tools .tool-section-summary small {
        margin-top: 5px;
        font-size: clamp(0.76rem, 3.4vw, 0.84rem);
        line-height: 1.4;
    }
}

/* Desktop side navigation: keep labels cleanly left aligned. */
@media (min-width: 1024px) {
    #main-nav .nav-links button {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 12px;
        padding-left: 18px !important;
        padding-right: 14px !important;
    }

    #main-nav .nav-links button span,
    #main-nav .nav-links button strong {
        text-align: left !important;
    }
}

/* Mobile slide-out navigation: align entries like the desktop sidebar. */
@media (max-width: 1023px) {
    #main-nav .nav-links button {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 12px !important;
        padding-left: 18px !important;
        padding-right: 14px !important;
    }

    #main-nav .nav-links button span,
    #main-nav .nav-links button strong {
        text-align: left !important;
    }
}

.settings-card-experience {
    overflow: visible;
}

.signed-number-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: stretch;
}

.signed-number-control input {
    min-width: 0;
}

.signed-number-toggle {
    width: 46px !important;
    min-width: 46px !important;
    min-height: 44px;
    padding: 0 !important;
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
}

.dashboard-entry-panel,
.dashboard-backup-reminder {
    display: grid;
    gap: 14px;
}

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

.dashboard-entry-card {
    display: grid;
    gap: 7px;
    min-height: 112px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
    color: var(--text-primary);
    text-align: left;
    box-shadow: none;
}

.dashboard-entry-card strong {
    font-size: 1rem;
}

.dashboard-entry-card span {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
    white-space: normal;
}

.dashboard-backup-reminder {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border-color));
}

.dashboard-backup-reminder p {
    margin: 4px 0 0;
    color: var(--text-secondary);
}

@media (max-width: 767px) {
    .dashboard-entry-grid,
    .dashboard-backup-reminder {
        grid-template-columns: 1fr;
    }

    .dashboard-entry-card {
        min-height: 88px;
    }
}

/* Cross-page layout audit: consistent controls, spacing and compact mobile actions. */
#tools .tools-command-bar {
    grid-template-columns: minmax(0, 1fr);
}

#tools .tools-command-bar:has(#toolSearchClear:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 44px;
}

#tools .tools-search-wrap {
    width: 100%;
    min-width: 0;
}

.coral-photo-button {
    min-height: 46px;
    height: auto;
    line-height: 1.2;
    white-space: normal !important;
}

@media (max-width: 767px) {
    .dashboard-hero-actions .btn,
    .warehouse-head-actions .btn,
    .warehouse-switcher select,
    .warehouse-switcher button,
    .search-input,
    .filter-select,
    .lager-filter-chips button,
    .warehouse-filter-result .btn {
        min-height: 44px !important;
        height: auto !important;
    }

    .logbook-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .logbook-actions button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 8px;
        line-height: 1.15;
        white-space: normal !important;
    }

    .logbook-actions button:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 374px) {
    #tools .tools-command-bar:has(#toolSearchClear:not([hidden])) {
        grid-template-columns: minmax(0, 1fr) 42px;
    }
}