:root {
    color-scheme:dark;
    --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;
}

/* 🌊 HIER IST JETZT DEIN SAUBERES MINT/OCEAN MEERES-THEME 🌊 */
body.theme-mint,
html.theme-mint {
    color-scheme:dark;
}

/* 🦈 BADMAN SHARK EDITION - Schwarz, Grau, Rot 🦈 */
body.theme-badman,
html.theme-badman {
    color-scheme:dark;
    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);
    -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;
}




























.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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    overflow:hidden;
}

.cloud-transfer-card::before {
    content:"";
    position:absolute;
    inset:0;
    background:var(--surface-card);
    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:var(--radius-md);
    display:grid;
    place-items:center;
    background:var(--surface-card);
    border:1px solid var(--border-color);
    box-shadow:none;
}

.cloud-transfer-cloud {
    width:28px;
    height:16px;
    border-radius:var(--radius-md);
    background:var(--secondary);
    position:relative;
    box-shadow:none;
}

.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 var(--border-color);
    border-bottom:2px solid var(--border-color);
    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:var(--text-primary);
    font-size:0.98rem;
    line-height:1.1;
}

.cloud-transfer-copy small {
    color:var(--text-primary);
    line-height:1.3;
    white-space:normal;
}

.cloud-transfer-progress {
    display:block;
    height:5px;
    margin-top:3px;
    border-radius:var(--radius-md);
    background:var(--accent);
    overflow:hidden;
}

.cloud-transfer-progress i {
    display:block;
    width:42%;
    height:100%;
    border-radius:var(--radius-md);
    background:var(--surface-card);
    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;
}
}













.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:var(--radius-md);
    border:1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    background:var(--surface-card);
    box-shadow:none;
}

.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:600;
    text-transform:uppercase;
    letter-spacing:0;
}

.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:600;
}

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

.warehouse-switcher button {
    height:42px;
    padding:0;
}

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



.warehouse-access-badge {
    width:fit-content;
    max-width:min(92vw, 420px);
    margin-top:7px;
    padding:6px 10px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--surface-card);
    color:var(--text-muted);
    font-size:var(--font-caption);
    font-weight:600;
}

.warehouse-access-badge[data-access="owner"] {
    color:var(--success);
    border-color:var(--border-color);
    background:var(--surface-card);
}

.warehouse-access-badge[data-access="write"] {
    color:var(--secondary);
    border-color:var(--border-color);
    background:var(--surface-card);
}

.warehouse-access-badge[data-access="read"] {
    color:var(--danger);
    border-color:var(--border-color);
    background:var(--surface-card);
}




.demo-mode-badge {
    display:none;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:4px 10px;
    border-radius:var(--radius-md);
    border:1px solid var(--border-color);
    color:var(--text-primary);
    background:var(--surface-card);
    box-shadow:none;
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0;
    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:none;
    box-shadow:none;
}

.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:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
    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:var(--text-primary);
}

.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:var(--radius-md);
    background:var(--primary);
    color:var(--text-primary);
    text-decoration:none;
    font-weight:600;
    box-shadow:none;
}

.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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
    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:var(--text-primary);
    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;
}















.menu-backdrop {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:var(--overlay-backdrop);
    z-index:3000;
    backdrop-filter:none;
}
.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;
}

.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:var(--radius-md);
    background:var(--surface-card);
}
.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:var(--text-primary);
}
.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:var(--radius-md);
    padding:14px;
}
.dashboard-tile strong {
    display:block;
    margin:8px 0 4px;
    font-size:1.5rem;
}
.dashboard-tile.warn {
    border-color:var(--border-color);
    background:var(--surface-card);
}

.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:var(--radius-md);
    background:var(--surface-card);
    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:var(--radius-md);
    border:1px solid var(--border-color);
    background:var(--surface-card);
    color:var(--text-muted);
    font-size:0.84rem;
    transition:0.2s ease;
}


.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:var(--radius-md);
    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:none;
    border-color:color-mix(in srgb, var(--primary) 34%, var(--border));
    box-shadow:none;
}
.dashboard-panel-actionable:active {
    transform:none;
}
.dashboard-progress {
    height:10px;
    border-radius:var(--radius-md);
    overflow:hidden;
    background:var(--accent);
    margin-top:10px;
}
.dashboard-progress span {
    display:block;
    height:100%;
    border-radius:var(--radius-md);
    background:var(--surface-card);
}
.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:var(--radius-md);
    padding:14px;
    background:var(--surface-card);
    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:var(--radius-md);
    background:var(--surface-card);
    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:600;
}
.mobile-quick-tabs-settings {
    display:grid;
    gap:12px;
    margin-bottom:18px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}
.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:600;
}
.coral-hero-card {
    display:grid;
    grid-template-columns:minmax(0, 1.4fr) minmax(260px, 0.6fr);
    gap:16px;
    margin-bottom:14px;
    background:var(--surface-card);
}
.coral-hero-copy small {
    display:block;
    color:var(--secondary);
    margin-bottom:6px;
    font-weight:600;
}
.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 var(--border-color);
    border-radius:var(--radius-md);
    padding:18px;
    background:var(--surface-card);
    box-shadow:none;
}
.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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}
.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:600;
}
.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:var(--radius-md);
    border:1px solid var(--border);
    background:var(--surface-card);
    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:var(--radius-md);
}
.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:var(--radius-md);
    background:var(--surface-card);
    border:1px solid var(--border-color);
}
.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:var(--radius-md);
    background:var(--surface-card);
}
.coral-card.active {
    border-color:var(--border-color);
    box-shadow:none;
}
.coral-card-media {
    min-height:148px;
    border-radius:var(--radius-md);
    overflow:hidden;
    background:var(--surface-card);
    border:1px solid var(--border-color);
}
.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:var(--radius-md);
    background:var(--surface-card);
}
.coral-meta-grid small {
    color:var(--text-muted);
}
.coral-conditional-field.is-hidden {
    display:none;
}
.coral-status-badge {
    padding:8px 10px;
    border-radius:var(--radius-md);
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0;
    border:1px solid var(--border-color);
}
.coral-status-neuzugang {
    background:var(--surface-card);
    color:var(--text-primary);
}
.coral-status-bestand {
    background:var(--surface-card);
    color:var(--secondary);
}
.coral-status-ableger {
    background:var(--surface-card);
    color:var(--primary);
}
.coral-transfer-details {
    margin-top:18px;
    border-top:1px solid var(--border-color);
    padding-top:14px;
}
.coral-bridge-details {
    border-top:1px solid var(--border-color);
    background:var(--surface-card);
    border-radius:var(--radius-md);
    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;
    line-height:1.45;
}
.coral-transfer-card {
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    padding:14px;
    background:var(--surface-card);
}
.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:var(--radius-md);
    background:var(--surface-card);
}
.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:600;
}
.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:var(--radius-md);
    background:var(--surface-card);
}
.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:var(--font-caption);
    font-weight:600;
}
.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:600;
}
.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:var(--surface-card);
}
.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:600;
    letter-spacing:0;
    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:var(--radius-md);
    background:var(--surface-card);
    color:var(--text-muted);
    font-size:var(--font-caption);
    letter-spacing:0;
    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:var(--radius-md);
    background:var(--surface-card);
    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:var(--radius-md);
    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:none;
}
.coral-primary-icon span {
    width:13px;
    height:13px;
    border:3px solid var(--primary);
    border-radius:50%;
    box-shadow:none;
}
.coral-primary-copy > span,
.coral-advice-kicker {
    color:var(--primary);
    font-size:var(--font-caption);
    font-weight:600;
    text-transform:uppercase;
}
.coral-primary-copy h3 {
    margin:2px 0;
    color:var(--text);
    font-size:var(--font-body);
}
.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:var(--radius-md);
    background:var(--surface-card);
}
.coral-primary-facts small,
.coral-primary-facts strong {
    display:block;
}
.coral-primary-facts small {
    color:var(--text-muted);
    font-size:var(--font-caption);
}
.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:var(--radius-md);
    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:var(--font-caption);
}
.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:var(--radius-md);
    background:color-mix(in srgb, var(--primary) 20%, var(--surface-raised));
    box-shadow:none;
}
.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:var(--font-caption);
    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:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
}
.coral-waterline {
    position:absolute;
    top:7px;
    left:8px;
    right:8px;
    height:2px;
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--primary) 68%, transparent);
    box-shadow:none;
}
.coral-waterline span {
    position:absolute;
    top:4px;
    left:50%;
    padding:1px 5px;
    background:var(--surface-card);
    color:var(--text-muted);
    font-size:var(--font-caption);
    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:var(--font-caption);
}
.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:600;
}
.coral-substrate {
    height:21px;
    margin:7px -25px 0;
    border-top:1px solid color-mix(in srgb, var(--status-warning) 30%, var(--border));
    background:var(--surface-card);
    text-align:center;
}
.coral-substrate span {
    position:relative;
    top:3px;
    color:var(--text-muted);
    font-size:var(--font-caption);
}
.coral-tank-map-head,
.coral-tank-map-foot {
    display:flex;
    justify-content:space-between;
    gap:8px;
    color:var(--text-muted);
    font-size:var(--font-caption);
}
.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:600;
}
.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:var(--radius-md);
    background:var(--surface-card);
    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:var(--font-caption);
    line-height:1.25;
}
.coral-zone-cell.is-good {
    border-color:var(--border-color);
    background:var(--surface-card);
}
.coral-zone-cell.is-ok {
    border-color:var(--border-color);
    background:var(--surface-card);
}
.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:none;
    transform:translateY(-2px);
}
.coral-best-marker {
    position:absolute;
    top:6px;
    right:6px;
    padding:3px 5px;
    border-radius:var(--radius-md);
    background:var(--primary);
    color:var(--surface-card);
    font-size:var(--font-caption);
    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:var(--font-caption);
}
.coral-zone-legend span::before {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--text-muted);
    content:"";
}
.coral-zone-legend .is-good::before {
    background:var(--surface-card);
}
.coral-zone-legend .is-ok::before {
    background:var(--surface-card);
}
.coral-zone-legend .is-risk::before {
    background:var(--surface-card);
}
.coral-map-disclaimer {
    margin:9px 0 0;
    padding-top:8px;
    border-top:1px solid var(--border);
    color:var(--text-muted);
    font-size:var(--font-caption);
    line-height:1.35;
}
.coral-advice-text {
    display:grid;
    align-content:start;
    gap:10px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}
.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:var(--radius-md);
    background:var(--surface-card);
    font-size:var(--font-caption);
    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:var(--radius-md);
    background:var(--surface-card);
}
.coral-compat-card > span {
    display:inline-flex;
    width:fit-content;
    margin-bottom:8px;
    padding:6px 9px;
    border-radius:var(--radius-md);
    font-size:0.75rem;
    font-weight:600;
    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:var(--border-color);
}
.coral-compat-card.is-good > span {
    color:var(--text-primary);
    background:var(--surface-card);
}
.coral-compat-card.is-caution {
    border-color:var(--border-color);
}
.coral-compat-card.is-caution > span {
    color:var(--text-primary);
    background:var(--surface-card);
}
.coral-compat-card.is-bad {
    border-color:var(--border-color);
}
.coral-compat-card.is-bad > span {
    color:var(--text-primary);
    background:var(--surface-card);
}
.coral-custom-profile-details {
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}
.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:var(--radius-md);
    background:var(--surface-card);
}
.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:var(--border-color);
}
.coral-stock-compat-row.is-caution {
    border-color:var(--border-color);
}
.coral-stock-compat-row.is-bad {
    border-color:var(--border-color);
}

.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;
    padding:8px 12px;
}

.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:600;
}
.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:var(--surface-card);
    color:var(--secondary);
    font-weight:600;
    line-height:1;
}

.cr-maintenance-warning {
    margin:12px 0 14px;
    padding:12px 14px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    color:var(--status-warning);
    font-weight:600;
    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:var(--radius-md);
    background:var(--surface-card);
}

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

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

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

.menu-order-row button {
    width:38px;
    height:38px;
    padding:0;
}

.menu-order-row button:disabled {
    opacity:0.35;
    cursor:not-allowed;
    transform: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:var(--radius-md);
    background:var(--accent);
    color:var(--text);
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    opacity:0;
    pointer-events:none;
}

.swipe-indicator.show {
    display:flex;
}

.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: 1024px) {
    .menu-toggle, .close-menu, .nav-menu-header, .menu-backdrop {
    display:none!important;
}
    
    
    
    
    
}

.category-title {
    color:var(--text);
    font-size:0.85rem;
    font-weight:600;
    margin:28px 0 12px 2px;
    text-transform:uppercase;
    letter-spacing:0;
    transition:color 0.5s ease;
    opacity:0.6;
}
.card {
    padding:18px;
    margin-bottom:12px;
}



.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;
    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:var(--surface-card);
    padding:4px 10px;
    border-radius:var(--radius-md);
    font-size:0.9rem;
    white-space:nowrap;
    flex-shrink:0;
    transition:color 0.5s ease;
}


 /* Angepasst für Meeres-Badge */

.cross-hint {
    font-size:0.75rem;
    color:var(--text-primary);
    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:var(--surface-card);
    padding:12px;
    border-radius:var(--radius-md);
    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:var(--surface-card);
    padding:14px;
    border-radius:var(--radius-md);
    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:var(--text-primary);
    margin-bottom:2px;
}
.prognose-badge {
    font-size:0.8rem;
    color:var(--text-primary);
    background:var(--surface-card);
    padding:4px 8px;
    border-radius:var(--radius-md);
    display:inline-block;
    margin-top:8px;
    font-weight:500;
}

.cr-experimental-warning {
    background:var(--surface-card);
    border:1px solid var(--border-color);
    border-left:3px solid var(--border-color);
    color:var(--status-warning);
    border-radius:var(--radius-md);
    padding:10px 12px;
    font-size:0.84rem;
    line-height:1.35;
    margin:0 0 12px;
    font-weight:600;
}

.cr-adjustment-card {
    background:var(--surface-card);
    border:1px solid var(--border);
    border-left:3px solid var(--success);
    border-radius:var(--radius-md);
    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:600;
    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:var(--surface-card);
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    padding:4px 8px;
    font-size:0.78rem;
    line-height:1;
}

.cr-adjustment-status.missing {
    color:var(--danger);
    background:var(--surface-card);
    border-color:var(--border-color);
}

.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:var(--surface-card);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:6px 8px;
}

.cr-element-values {
    margin:8px 0 0;
    border:1px solid var(--border);
    border-left:3px solid var(--secondary);
    border-radius:var(--radius-md);
    padding:8px;
    overflow:hidden;
    background:var(--surface-card);
}

.cr-element-values summary {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    cursor:pointer;
    color:var(--secondary);
    font-weight:600;
    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:var(--font-caption);
    font-weight:600;
    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 var(--border-color);
    font-weight:600;
}

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

.cr-element-mobile-table {
    display:block;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    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 var(--border-color);
    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:600;
}

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

.cr-element-mobile-head {
    background:var(--surface-card);
    color:var(--text-muted);
    font-weight:600;
}

.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:var(--font-caption);
}
}

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

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

.cr-adjustment-row small {
    display:block;
    color:var(--text-muted);
    font-size:var(--font-caption);
    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:var(--text-primary);
    font-weight:600;
    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;
}

    #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;
    margin-bottom:10px;
}

    #cr-export input[type="file"] {
    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;
}

    #cr-pdf-status {
    background:var(--surface-card);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:8px 10px;
    margin-bottom:8px;
}

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

    .cr-adjustment-card {
    padding:12px;
    border-radius:var(--radius-md);
}

    .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:var(--surface-card);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    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:var(--font-caption);
}

    .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:var(--font-caption);
    max-width:42%;
    overflow:hidden;
    text-overflow:ellipsis;
}
}

.btn-group {
    display:flex;
    gap:10px;
}
button {
    padding:12px;
    cursor:pointer;
}
button:hover {
    transform:none;
}
.btn-animated:active {
    transform:none;
    opacity:0.8;
}

.btn-in {
    flex:1;
}
.btn-out {
    flex:1;
}

.btn-primary {
    width:100%;
}
.btn-secondary {
    width:100%;
}
.btn-danger {
    width:100%;
}
.btn-cancel {
    width:100%;
    margin-top:12px;
}

textarea {
    width:100%;
    height:120px;
    padding:12px;
    resize:none;
    margin-bottom:15px;
}
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;
    margin-bottom:15px;
}


input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    appearance:auto;
    -webkit-appearance:auto;
    min-height:48px;
    cursor:pointer;
    touch-action:manipulation;
}

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;
    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:var(--radius-md);
    padding:2px 2px 2px 0;
    transition:background-color 0.2s ease;
}

.settings-accordion-summary:hover {
    background:var(--surface-raised);
}

.settings-group-label {
    color:var(--text-muted);
    font-size:0.78rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0;
    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:var(--font-caption);
    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:var(--radius-md);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 28px;
    background:var(--surface-card);
    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:var(--radius-md);
    border:1px solid color-mix(in srgb, var(--secondary) 28%, var(--border));
    background:var(--surface-card);
}

.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:600;
    text-transform:uppercase;
}

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

.aquarium-workspace-volume {
    display:block;
    margin-top:4px;
    color:var(--primary);
    font-size:0.82rem;
    font-weight:600;
}

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

.aquarium-workspace-actions button {
    width:auto;
    padding:8px 10px;
}

.aquarium-workspace-select small {
    display:block;
    margin-top:4px;
    line-height:1.35;
}

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

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

details[open] > summary .settings-accordion-hint {
    background:var(--surface-card);
    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;
}

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





#einstellungen .switch-container,
#einstellungen .preset-row,
#einstellungen .custom-product-row,
#einstellungen .visibility-product-row,
#einstellungen .container-preset-row {
    background:var(--surface-card);
    border-color:var(--border);
}



#einstellungen code {
    background:var(--surface-card);
    color:var(--text);
}



body.theme-girl .settings-group-label span {
    border-left-color:var(--border-color);
}



body.theme-mint .settings-group-label span {
    border-left-color:var(--border-color);
}



body.theme-badman .settings-group-label span {
    border-left-color:var(--border-color);
}



body.theme-light .settings-group-label span {
    border-left-color:var(--border-color);
}

.modal {
    display:none;
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background:var(--overlay-backdrop);
    z-index:1000;
    align-items:center;
    justify-content:center;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    padding:16px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
.modal-content {
    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;
    margin:auto;
}

.switch-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px;
    background:var(--surface-card);
    border-radius:var(--radius-md);
    margin-bottom:15px;
    border:1px dashed var(--border-color);
}
.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:var(--accent);
    transition:.3s;
    border-radius:var(--radius-md);
}
.slider:before {
    position:absolute;
    content:"";
    height:27px;
    width:27px;
    left:2px;
    bottom:2px;
    background-color:white;
    transition:.3s;
    border-radius:50%;
    box-shadow:none;
}

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
   ========================================================================== */























@media (min-width: 768px) {
    
    
}

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 */





/* Alle Texte im Mint/Ocean Mode auf klares Meeres-Weiß umschalten */



/* Ein- und Auslagerungsbuttons sowie Menüs in Meeres-Schattierungen */







/* Highlights, Badges und Navigationsleisten */









/* Desktop Navigation Anpassung für Mint/Ocean Edition */
@media (min-width: 768px) {
    
    
}

/* 🌊 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:var(--radius-md);
    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:var(--radius-md);
    transition:background 0.2s ease;
}
.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:var(--accent);
    flex-shrink:0;
    margin:0 2px;
}

.search-input {
    flex:1;
    padding:0;
    margin:0!important;
    min-width:0;
    height:36px;
    line-height:36px;
    box-sizing:border-box;
}
.search-input::placeholder {
    opacity:0.5;
}

.filter-select,
.forecast-select {
    flex:1;
    padding:0 28px 0 6px;
    margin-bottom:0;
    padding-left:6px!important;
    cursor:pointer;
    min-width:0;
    height:36px;
    line-height:36px;
    -webkit-appearance:none;
    appearance:none;
    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:var(--radius-md);
    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:600;
    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 var(--border-color);
    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:var(--font-caption);
    margin-top:2px;
}

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

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

.alert-actions button,
.disabled-alert-row button,
.custom-product-row button {
    padding:7px 9px;
}

.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:var(--surface-card);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:10px 12px;
    font-size:0.88rem;
    line-height:1.4;
}

.notification-status[data-type="ok"] {
    color:var(--success);
    border-color:var(--border-color);
    background:var(--surface-card);
}

.notification-status[data-type="warn"] {
    color:var(--danger);
    border-color:var(--border-color);
    background:var(--surface-card);
}

.sync-auth-state {
    margin-top:8px;
    padding:9px 11px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--surface-card);
    color:var(--text-muted);
    font-size:0.84rem;
    font-weight:600;
}

.sync-auth-state[data-state="in"] {
    color:var(--success);
    border-color:var(--border-color);
    background:var(--surface-card);
}

.sync-auth-state[data-state="out"] {
    color:var(--danger);
    border-color:var(--border-color);
    background:var(--surface-card);
}

.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;
}

.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:var(--radius-md);
    background:var(--surface-card);
    font-size:0.86rem;
    line-height:1.4;
}

.sync-activation-note {
    color:var(--secondary);
    border-color:var(--border-color);
    background:var(--surface-card);
    font-weight:600;
}

.sync-maintenance-banner {
    display:grid;
    gap:6px;
    margin:12px 0;
    padding:12px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    color:var(--text-primary);
    font-size:0.86rem;
    line-height:1.45;
}

.sync-maintenance-banner strong {
    color:var(--text-primary);
}

.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 var(--border-color)!important;
    background:var(--surface-card);
    box-shadow:none;
}

.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;
    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:var(--radius-md);
    border:1px solid color-mix(in srgb, var(--warning) 42%, var(--border));
    background:var(--surface-card);
}

.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:var(--radius-md);
    border:1px solid var(--border-color);
    background:var(--surface-card);
}

.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:var(--border-color);
    background:var(--surface-card);
}

.storage-safety-hero.is-warning {
    border-color:var(--border-color);
    background:var(--surface-card);
}

.storage-safety-pill {
    flex-shrink:0;
    padding:8px 12px;
    border-radius:var(--radius-md);
    border:1px solid var(--border-color);
    background:var(--surface-card);
    color:var(--secondary);
    font-size:0.78rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0;
}

.storage-safety-pill.is-ready {
    border-color:var(--border-color);
    background:var(--surface-card);
    color:var(--success);
}

.storage-safety-pill.is-warning {
    border-color:var(--border-color);
    background:var(--surface-card);
    color:var(--status-warning);
}

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

.storage-safety-status-card {
    padding:12px 14px;
    border-radius:var(--radius-md);
    border:1px solid var(--border-color);
    background:var(--surface-card);
}

.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:var(--font-caption);
    text-transform:uppercase;
    letter-spacing:0;
}

.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 var(--border-color);
    padding-top:12px;
}
.storage-snapshot-details summary {
    cursor:pointer;
    color:var(--secondary);
    font-weight:600;
    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:var(--radius-md);
    border:1px solid var(--border-color);
    background:var(--surface-card);
    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:var(--radius-md);
    border:1px solid var(--border-color);
    background:var(--surface-card);
    color:var(--secondary);
    font-size:var(--font-caption);
    font-weight:600;
}
.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;
    line-height:1.1;
    white-space:nowrap;
}
.storage-snapshot-empty {
    margin-top:12px;
    padding:12px 14px;
    border-radius:var(--radius-md);
    border:1px dashed var(--border-color);
    background:var(--surface-card);
    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 var(--border-color);
    background:var(--surface-card);
}

.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-md);
    background:color-mix(in srgb, var(--surface-raised) 32%, transparent);
}

.data-safety-section[open] {
    background:var(--surface-card);
}

.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 {
    --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:var(--radius-md);
    border:1px solid var(--border-color);
    color:var(--text-primary);
    background:var(--surface-card);
    box-shadow:none;
    font-size:var(--font-caption);
    font-weight:600;
    letter-spacing:0;
    pointer-events:none;
}

body.demo-profile-active header {
    background:var(--surface-card);
    border-bottom-color:var(--border-color);
    box-shadow:none;
}





.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-md);
    background:var(--surface-card);
    box-shadow:none;
    overflow:hidden;
}

.demo-profile-panel.is-active {
    border-color:color-mix(in srgb, var(--status-warning) 58%, var(--border-color));
    background: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:var(--radius-md);
    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:var(--font-caption);
    font-weight:600;
    letter-spacing:0;
    text-transform:uppercase;
    white-space:nowrap;
}

.demo-profile-panel strong {
    color:var(--text-primary);
    font-size:var(--font-body);
    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-md);
    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:var(--font-caption);
    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:var(--radius-md);
    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:600;
    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;
}

.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;
}

.google-drive-sync-card {
    border:1px solid var(--border-color);
    background:var(--surface-card);
    box-shadow:none;
}

.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:var(--radius-md);
    border:1px solid var(--border-color);
    background:var(--surface-card);
}

.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:var(--border-color);
    background:var(--surface-card);
}

.google-drive-status-pill {
    flex-shrink:0;
    padding:8px 12px;
    border-radius:var(--radius-md);
    border:1px solid var(--border-color);
    background:var(--surface-card);
    color:var(--success);
    font-size:0.78rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0;
}

.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:var(--radius-md);
    border:1px solid var(--border-color);
    background:var(--surface-card);
}

.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:var(--font-caption);
    text-transform:uppercase;
    letter-spacing:0;
}

.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:var(--radius-md);
    border:1px solid var(--border-color);
    background:var(--surface-card);
    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 var(--border-color);
    padding-top:12px;
}

.google-drive-diagnostics summary {
    cursor:pointer;
    color:var(--secondary);
    font-weight:600;
    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 var(--border-color);
}

.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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.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:var(--radius-md);
    background:var(--warning);
    box-shadow:none;
}

.pwa-install-status.is-ready,
.pwa-install-status.is-installed {
    border-color:var(--border-color);
    background:var(--surface-card);
}

.pwa-install-status.is-ready .pwa-install-dot,
.pwa-install-status.is-installed .pwa-install-dot {
    background:var(--success);
    box-shadow:none;
}

.pwa-install-status.is-blocked {
    border-color:var(--border-color);
    background:var(--surface-card);
}

.pwa-install-status.is-blocked .pwa-install-dot {
    background:var(--danger);
    box-shadow:none;
}

.pwa-install-pill {
    padding:7px 10px;
    border-radius:var(--radius-md);
    border:1px solid var(--border-color);
    color:var(--secondary);
    background:var(--surface-card);
    font-size:var(--font-caption);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0;
    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:var(--radius-md);
    border:1px solid var(--border-color);
    background:var(--surface-card);
}

.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;
}

    

    

    

    

    

    

    

    

    .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;
}

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

    .storage-safety-status-card {
    padding:10px;
    border-radius:var(--radius-md);
}

    .storage-safety-status-card small {
    font-size:var(--font-caption);
}

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

    .storage-safety-status-card span {
    font-size:var(--font-caption);
    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;
    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:var(--font-caption);
}

    .storage-snapshot-copy small {
    font-size:var(--font-caption);
    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;
    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:600;
    white-space:nowrap;
}

.share-active-warehouse-box[data-access="owner"] {
    border-color:var(--border-color);
}

.share-active-warehouse-box[data-access="read"] {
    border-color:var(--border-color);
}

.share-active-warehouse-box[data-access="write"] {
    border-color:var(--border-color);
}

.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:var(--border-color);
    background:var(--surface-card);
}

.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;
}

.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;
}

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

.sync-subpanel {
    margin-top:14px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.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 var(--border-color);
    font-size:0.86rem;
}

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

.favorite-btn.active {
    color:var(--text-primary);
}

.logbook-hero {
    border-color:var(--border-color);
    background:var(--surface-card);
    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:var(--radius-md);
    background:var(--surface-card);
    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:var(--font-caption);
    font-weight:600;
    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:var(--radius-md);
    border:1px solid var(--border);
    color:var(--secondary);
    background:var(--surface-card);
    font-size:var(--font-caption);
    font-weight:600;
}

.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:var(--radius-md);
    background:var(--surface-card);
    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:var(--border-color);
    background:var(--surface-card);
}

.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;
}

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

.logbook-summary:hover {
    color:var(--primary);
    background:var(--surface-raised);
}

.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:var(--radius-md);
    background:var(--surface-card);
}

.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:var(--font-caption);
    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 {
    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:none;
}

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

.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:none;
}

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

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

.measurement-detail-value {
    margin:6px 0 8px;
    font-size:1.35rem;
    font-weight:600;
    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:none;
}

.n-ratio-inline-note,
.n-ratio-tracker-card {
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.n-ratio-inline-note {
    display:grid;
    gap:4px;
    padding:12px;
    margin-top:12px;
}

.n-ratio-inline-note strong,
.n-ratio-tracker-head strong {
    color:var(--text-primary);
}

.n-ratio-inline-note span,
.n-ratio-tracker-head small,
.n-ratio-footnote {
    color:var(--text-muted);
    font-size:0.82rem;
    line-height:1.45;
}

.n-ratio-tracker-card {
    display:grid;
    gap:12px;
    padding:14px;
    overflow:hidden;
}

.n-ratio-tracker-card.is-good {
    border-color:color-mix(in srgb, var(--success) 42%, var(--border));
}

.n-ratio-tracker-card.is-watch {
    border-color:color-mix(in srgb, var(--warning) 46%, var(--border));
}

.n-ratio-tracker-card.is-alert {
    border-color:color-mix(in srgb, var(--danger) 46%, var(--border));
}

.n-ratio-tracker-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.n-ratio-tracker-head > div {
    min-width:0;
}

.n-ratio-kicker {
    display:block;
    margin-bottom:4px;
    color:var(--secondary);
    font-size:var(--font-caption);
    font-weight:600;
    letter-spacing:0;
    text-transform:uppercase;
}

.n-ratio-summary-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
}

.n-ratio-summary-grid > div {
    min-width:0;
    padding:10px;
    border:1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 76%, transparent);
}

.n-ratio-summary-grid strong,
.n-ratio-summary-grid span {
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.n-ratio-summary-grid strong {
    color:var(--secondary);
    font-size:0.94rem;
}

.n-ratio-summary-grid span {
    margin-top:4px;
    color:var(--text-muted);
    font-size:var(--font-caption);
}

.n-ratio-chart-scroll .measurement-chart.compact {
    min-width:420px;
    height:170px;
}

.n-ratio-target-line {
    stroke:color-mix(in srgb, var(--success) 72%, white);
    stroke-width:2;
    stroke-dasharray:7 7;
}

.n-ratio-footnote {
    margin:0;
}

.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:var(--radius-md);
    background:var(--surface-card);
}

.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:600;
    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:none;
}

.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:none;
}

.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:var(--radius-md);
    background:var(--surface-card);
    color:var(--secondary);
    font-weight:600;
}

.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:600;
    color:var(--text);
}

.community-map-outbox {
    border-top:1px solid var(--border-color);
    padding-top:6px;
}

.measurement-list-button {
    width:100%;
    padding:0;
    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:var(--border-color);
    background:var(--surface-card);
}

.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:var(--radius-md);
    background:var(--accent);
    overflow:hidden;
}

.mini-progress span {
    display:block;
    height:100%;
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.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;
    line-height:1.15;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
    cursor:pointer;
}

.interval-picker button:hover {
    transform:none;
}



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

@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;
    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);
}



































.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;
}











.menu-backdrop {
    background:var(--overlay-backdrop);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}







@media (max-width: 1023px) {
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    .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));
}

    

    

    

    

    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) {
    

    

    

    

    
}

@media (min-width: 1024px) {
    body {
    min-height:100vh;
    min-height:100dvh;
}

    

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

    

    

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

    

    

    

    

    #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) {
    

    .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:600;
}
.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:600;
    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(2, minmax(0, 1fr));
    gap:7px;
    width:100%;
    min-width:0;
}

    #tools .aquarium-workspace-actions button {
    width:100%;
    min-width:0;
    padding:8px 5px;
}

    #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;
    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;
}

    .n-ratio-tracker-head {
    display:grid;
}

    .n-ratio-tracker-head button {
    width:100%;
}

    .n-ratio-summary-grid {
    grid-template-columns:repeat(2, minmax(0, 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-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:600;
    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:var(--font-caption);
}

.tool-result {
    background:var(--surface-card);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:13px;
    margin:12px 0 14px;
    box-shadow:none;
}

.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-md);
    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;
}



.nutrition-dose-grid .input-group small {
    line-height:1.15;
}

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

.nutrition-dose-grid .nutrition-carbon-dose input {
    opacity:1;
}

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

.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:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 18%, transparent);
    color:var(--accent);
    font-size:var(--font-caption);
    font-weight:600;
}

.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-md);
    background:var(--surface);
    color:var(--text-primary);
    font-weight:600;
    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:var(--font-caption);
}

.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-md);
    background:var(--surface-card);
    box-shadow:none;
}

.sea-water-trace-note__marker {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--accent);
    color:var(--text-primary);
    font-weight:600;
    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:var(--font-caption);
    font-weight:600;
    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-md);
    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:600;
    overflow-wrap:anywhere;
}

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

.sea-water-psu-check {
    margin:var(--space-3) 0;
    border:1px solid color-mix(in srgb, var(--secondary) 28%, var(--border-color));
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-raised) 88%, transparent);
    overflow:hidden;
}

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

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

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

.sea-water-psu-check__body {
    display:grid;
    gap:var(--space-3);
    padding:0 14px 14px;
}

.sea-water-psu-check__settings {
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.sea-water-psu-recipe-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
    gap:10px;
}

.sea-water-psu-input {
    display:grid;
    gap:6px;
    min-width:0;
    padding:10px;
}

.sea-water-psu-input span {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sea-water-psu-input small {
    line-height:1.25;
}

.sea-water-psu-input input {
    width:100%;
    min-width:0;
}

.sea-water-psu-summary {
    margin-bottom:var(--space-3);
}

.sea-water-psu-effect {
    margin-bottom:var(--space-3);
}

.sea-water-psu-effect--high {
    border-color:color-mix(in srgb, var(--warning) 55%, var(--border-color));
}

.sea-water-psu-effect--low {
    border-color:color-mix(in srgb, var(--secondary) 55%, var(--border-color));
}

.sea-water-psu-effect--neutral {
    border-color:color-mix(in srgb, var(--success) 55%, var(--border-color));
}

.sea-water-psu-deviation-list {
    display:grid;
    gap:8px;
    margin-bottom:var(--space-3);
}

.sea-water-psu-deviation-list > strong {
    font-size:0.88rem;
    color:var(--text-primary);
}

@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;
}
    .sea-water-psu-check__settings,
    .sea-water-psu-recipe-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:var(--radius-md);
    background:var(--accent);
}

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

.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:var(--radius-md);
    background:var(--surface-card);
    padding:0 12px;
}

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

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



.tool-favorites-panel {
    display:grid;
    gap:10px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.tool-experimental-banner strong {
    color:var(--text-primary);
    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-tool-card {
    border-color:var(--border-color);
}

.custom-cr-lock-state,
.custom-cr-target-help {
    display:grid;
    gap:8px;
    padding:12px 14px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.custom-cr-lock-state > div:first-child,
.custom-cr-target-help {
    display:grid;
    gap:4px;
}

.custom-cr-lock-state strong,
.custom-cr-target-help strong {
    color:var(--text-primary);
}

.custom-cr-lock-state small,
.custom-cr-target-help span {
    color:var(--text-muted);
    line-height:1.45;
}

.custom-cr-unlock-row,
.custom-cr-toolbar {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.custom-cr-unlock-row input {
    flex:1 1 150px;
    min-width:0;
}

.custom-cr-planner-fields {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-bottom:10px;
}

.custom-cr-target-help {
    margin:12px 0;
}

.custom-cr-reasoning {
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.custom-cr-reasoning > summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    cursor:pointer;
    list-style:none;
}

.custom-cr-reasoning > summary::-webkit-details-marker {
    display:none;
}

.custom-cr-reasoning-body {
    display:grid;
    gap:10px;
    padding:0 14px 14px;
    color:var(--text-muted);
    line-height:1.45;
}

.custom-cr-reasoning-body p,
.custom-cr-reasoning-body ul {
    margin:0;
}

.custom-cr-reasoning-body ul {
    padding-left:20px;
}

.custom-cr-reasoning-body strong {
    color:var(--text);
}

.custom-cr-calculation-note {
    padding-top:10px;
    border-top:1px solid var(--border-color);
    font-size:0.86rem;
}

.custom-cr-linked-warning {
    padding:10px 12px;
    border-left:3px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.custom-cr-linked-warning p {
    margin-top:4px!important;
}

@media (max-width: 680px) {
    .custom-cr-planner-fields {
    grid-template-columns:1fr;
}

    .custom-cr-unlock-row > *,
    .custom-cr-toolbar > * {
    width:100%;
}
}

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

.custom-cr-overview-card {
    display:grid;
    gap:12px;
    padding:14px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.custom-cr-metric small {
    color:var(--text-muted);
    font-size:var(--font-caption);
    text-transform:uppercase;
    letter-spacing:0;
}

.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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    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:600;
    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:600;
    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:var(--font-caption);
}

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

.custom-cr-recipe-target-row {
    grid-template-columns:minmax(44px, 0.55fr) minmax(0, 1fr);
    padding:8px 10px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.custom-cr-recipe-target-row input {
    grid-column:1 / -1;
}

.custom-cr-product-line.is-adjusted {
    border-color:var(--border-color);
    background:var(--surface-card);
}

.cr-correction-value {
    color:var(--text-primary);
    font-weight:600;
}

.trace-start-solution-card {
    border-color:var(--border-color);
    background:var(--surface-card);
}

.trace-start-solution-summary-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:16px;
    cursor:pointer;
    list-style:none;
}

.trace-start-solution-summary-head::-webkit-details-marker {
    display:none;
}

.trace-start-solution-summary-head > .trace-start-solution-head {
    flex:1 1 auto;
    min-width:0;
}

.trace-start-solution-summary-head > .settings-accordion-hint {
    flex:0 0 auto;
    margin-top:4px;
}

.trace-start-solution-card[open] > .trace-start-solution-summary-head {
    border-bottom:1px solid var(--border-color);
}

.trace-start-solution-body {
    padding:0 16px 16px;
}

.cr-routine-card,
.trace-osci-workflow-card {
    border-color:var(--border-color);
    background:var(--surface-card);
}

.cr-routine-head,
.trace-osci-workflow-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.cr-routine-head h3,
.trace-osci-workflow-head h3 {
    margin:3px 0 4px;
}

.cr-routine-badge,
.trace-osci-workflow-badge {
    flex:0 0 auto;
    padding:7px 11px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    color:var(--secondary);
    font-size:0.78rem;
    font-weight:600;
}

.cr-routine-options,
.trace-osci-workflow-steps {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-top:15px;
}

.cr-routine-option,
.trace-osci-workflow-step {
    display:grid;
    gap:4px;
    min-width:0;
    padding:12px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    color:var(--text);
    text-align:left;
    cursor:pointer;
    transition:border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.cr-routine-option:hover,
.trace-osci-workflow-step:hover {
    transform:none;
    border-color:var(--border-color);
}

.cr-routine-option.is-active {
    border-color:var(--secondary);
    background:var(--surface-card);
    box-shadow:none;
}

.cr-routine-option strong,
.trace-osci-workflow-step strong {
    color:var(--text);
}

.cr-routine-option small,
.trace-osci-workflow-step small,
.trace-osci-workflow-note,
.cr-routine-description {
    color:var(--text-muted);
    line-height:1.4;
}

.cr-routine-description {
    margin-top:10px;
    padding:10px 12px;
    border-left:3px solid var(--secondary);
    background:var(--surface-card);
    font-size:0.86rem;
}

.trace-osci-workflow-steps {
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.trace-osci-workflow-step span {
    display:inline-grid;
    place-items:center;
    width:25px;
    height:25px;
    border-radius:50%;
    background:var(--surface-card);
    color:var(--secondary);
    font-weight:600;
}

.trace-osci-workflow-note {
    margin:12px 0 0;
    font-size:0.82rem;
}

@media (max-width: 720px) {
    .cr-routine-head,
    .trace-osci-workflow-head {
    display:grid;
}

    .cr-routine-options,
    .trace-osci-workflow-steps {
    grid-template-columns:1fr;
}

    .cr-routine-badge,
    .trace-osci-workflow-badge {
    justify-self:start;
}
}

.trace-start-solution-head,
.trace-start-solution-controls,
.trace-start-solution-group-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.trace-start-solution-head h3 {
    margin:3px 0 4px;
}

.trace-start-solution-badge,
.trace-start-solution-note {
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    padding:7px 10px;
    color:var(--secondary);
    font-size:0.75rem;
    font-weight:600;
    white-space:nowrap;
}

.trace-start-solution-controls {
    align-items:end;
    margin-top:16px;
}

.trace-start-solution-planning {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin-top:16px;
    padding:12px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.trace-start-solution-planning-hint {
    grid-column:1 / -1;
    margin:0;
    color:var(--text-muted);
    font-size:0.8rem;
    line-height:1.4;
}

.trace-start-solution-summary {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin:12px 0;
}

.trace-start-solution-summary-item {
    display:grid;
    gap:3px;
    min-width:0;
    padding:11px 13px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.trace-start-solution-summary-item small,
.trace-start-solution-summary-item span {
    color:var(--text-muted);
    font-size:0.78rem;
}

.trace-start-solution-summary-item strong {
    color:var(--text);
    font-size:1.05rem;
}

.trace-start-solution-summary-water strong {
    font-size:0.94rem;
}

.trace-start-solution-reference {
    margin:10px 0 14px;
    color:var(--text-muted);
    font-size:0.82rem;
    line-height:1.45;
}

.trace-start-solution-reference strong {
    color:var(--text);
}

.trace-start-solution-controls .input-group {
    flex:1 1 220px;
}

.trace-start-solution-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.trace-start-solution-note {
    display:grid;
    gap:3px;
    margin:12px 0;
    border-radius:var(--radius-md);
    white-space:normal;
}

.trace-start-solution-note strong {
    color:var(--text);
}

.trace-start-solution-note span,
.trace-start-solution-group-head small {
    color:var(--text-muted);
    font-weight:500;
}

.trace-start-solution-groups {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.trace-start-solution-group {
    padding:12px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.trace-start-solution-group-head {
    align-items:baseline;
    padding-bottom:8px;
    border-bottom:1px solid var(--border-color);
}

.trace-start-solution-fields {
    display:grid;
    gap:7px;
    margin-top:10px;
}

.trace-start-solution-field {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(120px, 150px);
    align-items:center;
    gap:10px;
}

.trace-start-solution-field > span:first-child {
    display:grid;
    gap:1px;
}

.trace-start-solution-field > span:first-child small {
    color:var(--text-muted);
    font-size:0.75rem;
}

@media (max-width: 720px) {
    .trace-start-solution-summary-head {
    align-items:flex-start;
}

    .trace-start-solution-head,
    .trace-start-solution-controls {
    display:grid;
}

    .trace-start-solution-groups {
    grid-template-columns:1fr;
}

    .trace-start-solution-planning {
    grid-template-columns:1fr;
}

    .trace-start-solution-summary {
    grid-template-columns:1fr;
}

    .trace-start-solution-badge {
    justify-self:start;
}
}

.custom-cr-delta-pill.is-warning {
    border-color:var(--border-color);
    background:var(--surface-card);
}

@media (max-width: 640px) {
    .custom-cr-recipe-target-row {
    grid-template-columns:minmax(44px, 0.7fr) minmax(0, 1.3fr);
}

    .custom-cr-product-line {
    grid-template-columns:1fr;
}

    .custom-cr-product-line span,
    .custom-cr-product-line b {
    text-align:left;
}
}

.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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.custom-cr-product-chip.missing {
    border-color:var(--border-color);
    background:var(--surface-card);
}

.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:600;
    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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.custom-cr-product-line.missing {
    border-color:var(--border-color);
    background:var(--surface-card);
}

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

.custom-cr-product-line span {
    color:var(--secondary);
    font-weight:600;
    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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.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:var(--font-caption);
    font-weight:600;
}

.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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.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:var(--radius-md);
    border:1px solid var(--border-color);
    background:var(--surface-card);
}

.custom-cr-step-value-pill strong {
    font-size:0.76rem;
}

.custom-cr-step-value-pill span {
    color:var(--text-muted);
    font-size:var(--font-caption);
    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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.custom-cr-remaining-chip strong {
    font-size:0.88rem;
}

.custom-cr-remaining-chip span {
    color:var(--secondary);
    font-size:0.77rem;
    font-weight:600;
}

.custom-cr-saved-plans {
    display:grid;
    gap:12px;
}

.custom-cr-saved-plan {
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.custom-cr-step-card.done {
    border-color:var(--border-color);
    background:var(--surface-card);
}

.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:var(--radius-md);
    background:var(--surface-card);
    color:var(--text-muted);
    font-size:var(--font-caption);
}

.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:600;
    text-transform:uppercase;
    letter-spacing:0;
}

.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:var(--radius-md);
    overflow:hidden;
    background:var(--surface-card);
}

.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:600;
}

.tool-favorite-remove {
    padding:0 10px;
    border-left:1px solid var(--border);
    color:var(--text-muted);
    font-size:1rem;
    font-weight:600;
}

.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:var(--radius-md);
    background:var(--surface-card);
    color:var(--text);
    padding:0 10px;
    font-size:var(--font-caption);
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
}

.tool-inline-fav.active {
    color:var(--text-primary);
    border-color:var(--border-color);
    background:var(--surface-raised);
}

.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;
    font-family:ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    line-height:1;
    cursor:pointer;
    position:relative;
    z-index:4;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.tool-info-button::before {
    content:"";
    position:absolute;
    left:50%;
    top:calc(50% - 6px);
    width:3px;
    height:3px;
    transform:translateX(-50%);
    pointer-events:none;
}

.tool-info-button::after {
    content:"";
    position:absolute;
    left:50%;
    top:calc(50% - 1px);
    width:3px;
    height:8px;
    transform:translateX(-50%);
    pointer-events:none;
}

.tool-info-button:hover,
.tool-info-button:focus-visible {
    transform:none;
}

.tool-info-button:active {
    transform:none;
}

.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:var(--radius-md);
    background:color-mix(in srgb, var(--secondary) 12%, transparent);
    color:var(--secondary);
    font-size:var(--font-caption);
    font-weight:600;
    text-transform:uppercase;
}

.tool-info-dialog-summary {
    margin:0;
    color:var(--text);
    font-size:1.02rem;
    font-weight:600;
    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:var(--radius-md);
    background:var(--surface-card);
}

.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 var(--border-color);
    color:var(--text-primary);
    background:var(--surface-card);
    border-radius:var(--radius-md);
    padding:4px 8px;
    font-size:var(--font-caption);
    font-weight:600;
    margin-bottom:10px;
}

.tool-section {
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    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:var(--surface-card);
}

.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:var(--radius-md);
    background:var(--surface-card);
}

.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:var(--radius-md);
    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:var(--radius-md);
    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:var(--radius-md);
    background:var(--surface-card);
}

.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:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 14%, transparent);
    color:var(--accent);
    font-size:var(--font-caption);
    font-weight:600;
}

.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:var(--radius-md);
    cursor:pointer;
}

.tool-tile-card.tool-tile-collapsed:hover {
    transform:none;
    border-color:var(--border-color);
    background:var(--surface-raised);
}

.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:var(--font-body);
    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 > h3 .tool-link-button {
    flex:0 0 auto;
}

.tool-tile-card.tool-tile-collapsed > .hint {
    grid-area:hint;
    display:block!important;
    margin:0;
    color:var(--text-muted);
    font-size:var(--font-body);
    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:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
}

    #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:var(--radius-md);
    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:var(--surface-card);
    box-shadow:none;
}

    #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:var(--radius-md);
    background:var(--surface-card);
    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:600;
}

.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:var(--radius-md);
    background:var(--surface-card);
    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:none;
    border-color:var(--border-color);
    background:var(--surface-raised);
}

.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:var(--radius-md);
    background:var(--surface-card);
    margin-bottom:6px;
    font-size:0.82rem;
}

.sync-diagnostics-row span {
    color:var(--text-muted);
    overflow-wrap:anywhere;
}

.sync-diagnostics-row.ok {
    border-color:var(--border-color);
}

.sync-diagnostics-row.warn {
    border-color:var(--border-color);
}

.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 var(--border-color);
}

.tool-row > span:last-child {
    font-weight:600;
    color:var(--secondary);
    text-align:right;
}

.tool-row > button {
    width:auto;
    padding:7px 10px;
}

.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:var(--font-caption);
    margin-top:2px;
}

.tool-row .cost-inline {
    color:var(--text-muted);
    font-size:var(--font-caption);
    font-weight:600;
}

.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:var(--font-body);
    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:var(--surface-card);
}

.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-md);
    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:var(--border-color);
    background:var(--surface-card);
}

.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:var(--radius-md);
    background:var(--surface-card);
}

.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:var(--radius-md);
    background:var(--surface-card);
}

.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:600;
}

.salinity-control-head input[type="number"] {
    margin:0;
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.salinity-control input[type="range"] {
    width:100%;
    height:34px;
    margin:0;
    padding:0;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
}

.salinity-control input[type="range"]::-webkit-slider-runnable-track {
    height:12px;
}

.salinity-control input[type="range"]::-webkit-slider-thumb {
    width:30px;
    height:30px;
    margin-top:-10px;
    appearance:none;
    -webkit-appearance:none;
}

.salinity-control input[type="range"]:active::-webkit-slider-thumb {
    transform:none;
}

.salinity-control input[type="range"]::-moz-range-track {
    height:12px;
}

.salinity-control input[type="range"]::-moz-range-thumb {
    width:26px;
    height:26px;
}

.salinity-value {
    font-size:1.8rem;
    color:var(--primary);
    font-weight:600;
    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;
}

/* Visuelle Auswertung: Balken in der Statistik */
.visual-bar-bg {
    background:var(--accent);
    border-radius:var(--radius-md);
    height:8px;
    margin-top:8px;
    overflow:hidden;
    width:100%;
}
.visual-bar-fill {
    background:var(--primary);
    height:100%;
    border-radius:var(--radius-md);
    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:none;
    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:var(--surface-card);
}

.app-footer a {
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
    margin-left:5px;
}

.app-footer a:hover {
    text-decoration:underline;
}









.trace-dose-auto-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:24px;
    margin-top:4px;
}

.trace-dose-auto-row small {
    color:var(--text-muted);
    font-size:var(--font-caption);
    line-height:1.25;
}

.trace-dose-auto-row .btn-text {
    flex:0 0 auto;
    padding:2px 0;
    cursor:pointer;
}

@media (max-width: 520px) {
    .trace-dose-auto-row {
    align-items:flex-start;
    flex-direction:column;
}
}

@media (max-width: 767px) {
    

    
}

/* Automatische Farbanpassung für das helle Girl-Theme */


/* ==========================================================================
   🦈 BADMAN SHARK EDITION OVERRIDES - Schwarz, Grau, Rot 🦈
   ========================================================================== */

/* Eingabefelder, Listen, Protokolle & Blöcke im Badman-Stil */







/* Alle Texte im Badman Mode */



/* Buttons im Badman-Stil */







/* Highlights, Badges und Navigation */









/* Desktop Navigation Anpassung für Badman */
@media (min-width: 768px) {
    
    
}

@media (max-width: 767px) {
    body.theme-badman {
    background-attachment:initial;
}

    body.theme-badman::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-repeat:no-repeat;
    background-position:center 92px;
    background-size:min(128vw, 520px) auto;
}

    

    

    

    

    .legacy-domain-banner {
    width:min(100vw - 18px, 1200px);
    margin:10px auto 6px;
    padding:14px;
    border-radius:var(--radius-md);
    flex-direction:column;
    align-items:stretch;
}

    .legacy-domain-banner-actions {
    width:100%;
}

    .legacy-domain-banner-link {
    width:100%;
}
}

/* Footer Anpassung */


/* 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:var(--font-heading);
    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:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 9%, transparent);
    color:var(--text-secondary);
    font-size:0.78rem;
    font-weight:600;
    line-height:1.25;
}

.workflow-eyebrow {
    color:var(--accent);
    font-size:var(--font-caption);
    font-weight:600;
    letter-spacing:0;
    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-md);
    background:var(--surface-raised);
}

.workflow-context span {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    font-weight:600;
    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:none;
}

.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:var(--radius-md);
}

.trace-warning-mark {
    display:inline-flex;
    flex:0 0 28px;
    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:600;
}

.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:var(--font-caption);
    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:var(--font-caption);
    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:var(--font-caption);
    font-weight:600;
}

.trace-explain-button {
    width:auto;
    min-width:154px;
    min-height:38px;
    flex:0 0 auto;
    margin:0 0 0 auto;
    padding:8px 11px;
}

.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;
}

.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;
}

.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%);
}

.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:var(--font-caption);
    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:var(--radius-md);
    background:var(--surface-card);
}

.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 {
    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;
}

.trace-expert-dynamic-panel button {
    min-height:38px;
    padding:7px 10px;
    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:var(--radius-md);
    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;
}

.trace-expert-preset-panel input,
.trace-expert-preset-panel select {
    height:38px;
}

.trace-expert-preset-actions {
    display:flex;
    gap:7px;
    min-width:0;
}

.trace-expert-preset-actions button {
    min-height:38px;
    padding:7px 10px;
    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:var(--radius-md);
    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:var(--radius-md);
    color:var(--accent);
    background:color-mix(in srgb, var(--accent) 8%, transparent);
    font-size:var(--font-caption);
    font-weight:600;
    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:var(--font-caption);
    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;
}

.trace-expert-limit input:disabled {
    opacity:0.55;
    cursor:not-allowed;
}

.trace-expert-limit .trace-input-with-unit > span {
    right:9px;
}

.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:var(--radius-md);
    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:var(--font-caption);
    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:var(--radius-md);
    color:var(--accent);
    background:color-mix(in srgb, var(--accent) 8%, transparent);
    font-size:var(--font-caption);
    font-weight:600;
}

.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-saved-icp {
    display:grid;
    gap:12px;
    min-width:0;
    margin:12px 0;
    padding:14px;
    border:1px solid color-mix(in srgb, var(--accent) 34%, var(--workflow-border));
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 7%, var(--surface-raised));
}

.trace-saved-icp-head,
.trace-saved-icp-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-width:0;
}

.trace-saved-icp-head {
    align-items:flex-start;
}

.trace-saved-icp-head > div {
    display:grid;
    gap:3px;
    min-width:0;
}

.trace-saved-icp-head strong,
.trace-saved-icp-actions label {
    color:var(--text-primary);
    font-size:0.8rem;
    font-weight:600;
}

.trace-saved-icp-head .trace-icp-import-badge {
    flex:0 0 auto;
    color:var(--accent);
    border-color:color-mix(in srgb, var(--accent) 52%, var(--workflow-border));
    background:color-mix(in srgb, var(--accent) 12%, transparent);
    white-space:nowrap;
}

.trace-saved-icp-head small,
.trace-saved-icp-preview,
.trace-saved-icp-empty span {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    line-height:1.4;
}

.trace-saved-icp-actions {
    display:grid;
    grid-template-columns:max-content minmax(180px, 1fr) auto;
    align-items:end;
    padding:10px;
    border:1px solid color-mix(in srgb, var(--workflow-border) 78%, transparent);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 58%, transparent);
}

.trace-saved-icp-actions select {
    min-width:0;
    margin:0;
    min-height:40px;
}

.trace-saved-icp-actions button {
    width:auto;
    min-height:40px;
    margin:0;
    white-space:nowrap;
}

.trace-saved-icp-preview {
    min-width:0;
    padding:0 2px;
}

.trace-saved-icp-complete,
.trace-saved-icp-missing {
    display:grid;
    gap:3px;
    min-width:0;
}

.trace-saved-icp-complete {
    grid-template-columns:auto 1fr;
    align-items:center;
    color:var(--text-primary);
}

.trace-saved-icp-complete > span {
    display:grid;
    width:22px;
    height:22px;
    place-items:center;
    border-radius:50%;
    background:var(--surface-card);
    font-weight:600;
}

.trace-saved-icp-complete strong,
.trace-saved-icp-missing strong {
    font-size:0.75rem;
}

.trace-saved-icp-complete small,
.trace-saved-icp-missing small {
    grid-column:2;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    line-height:1.35;
}

.trace-saved-icp-missing {
    padding:9px 10px;
    border-left:3px solid var(--warning, #f5b942);
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.trace-saved-icp-missing strong {
    color:var(--text-primary);
}

.trace-saved-icp-missing-list {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:3px;
}

.trace-saved-icp-missing-list span {
    padding:3px 7px;
    border:1px solid color-mix(in srgb, var(--warning, #f5b942) 42%, var(--workflow-border));
    border-radius:var(--radius-md);
    color:var(--text-primary);
    background:var(--surface-card);
    font-size:var(--font-caption);
    font-weight:600;
}

.trace-saved-icp-empty {
    display:grid;
    gap:3px;
}

.trace-saved-icp-empty strong {
    color:var(--text-primary);
    font-size:0.78rem;
}

@media (max-width: 680px) {
    .trace-saved-icp-head,
    .trace-saved-icp-actions {
    align-items:stretch;
    grid-template-columns:1fr;
}

    .trace-saved-icp-head {
    flex-direction:column;
}

    .trace-saved-icp-head .trace-icp-import-badge {
    align-self:flex-start;
}

    .trace-saved-icp-actions {
    gap:7px;
}

    .trace-saved-icp-actions label {
    font-size:var(--font-caption);
}

    .trace-saved-icp-actions button {
    width:100%;
}
}

.trace-icp-import-body p {
    margin:0;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    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:var(--font-caption);
    font-weight:600;
}

.trace-icp-import-body textarea {
    width:100%;
    min-height:132px;
    margin:0;
    padding:10px 11px;
    resize:vertical;
    font-family:inherit;
    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:var(--radius-md);
    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:var(--font-caption);
}

.trace-icp-import-status span {
    overflow-wrap:anywhere;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    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:var(--radius-md);
    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:var(--font-caption);
}

.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:var(--radius-md);
    color:var(--trace-kation);
    background:color-mix(in srgb, var(--trace-kation) 10%, transparent);
    font-size:0.76rem;
    font-weight:600;
}

.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;
}

.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:var(--font-caption);
    text-overflow:ellipsis;
    white-space:nowrap;
}

.trace-target-range {
    flex:0 0 auto;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.trace-icp-input input {
    height:40px;
    margin:0;
    padding-block:7px;
    font-variant-numeric:tabular-nums;
}

.trace-icp-input .trace-input-with-unit > span {
    right:9px;
}

.trace-optimum {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    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:var(--font-caption);
    font-weight:600;
    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:var(--font-caption);
    font-style:normal;
    line-height:1.3;
}

.trace-result-dose {
    text-align:right;
}

.trace-result-dose small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
}

.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:var(--radius-md);
    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:var(--font-caption);
    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:var(--radius-md);
    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:var(--font-caption);
}

.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:var(--font-caption);
    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:var(--font-caption);
}

.trace-recipe-totals strong,
.trace-recipe-totals em {
    color:var(--text-primary);
    font-size:var(--font-caption);
    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:var(--font-caption);
    font-weight:600;
    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:var(--radius-md);
    color:var(--text-primary);
    background:color-mix(in srgb, var(--accent) 11%, var(--surface-card));
    font-size:var(--font-caption);
    font-weight:600;
}

.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:var(--font-caption);
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.trace-status-pill {
    width:fit-content;
    max-width:100%;
    overflow:hidden;
    border-radius:var(--radius-md);
    color:var(--text-primary);
    font-size:var(--font-caption);
    font-weight:600;
    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:var(--font-caption);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.trace-recipe-amount em {
    overflow:hidden;
    max-width:100%;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    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:600;
}

.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:var(--radius-md);
    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:var(--font-caption);
    line-height:1.3;
}

.trace-reuse-panel[open] > summary {
    border-bottom:1px solid var(--workflow-border);
}

.trace-reuse-body {
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    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:var(--radius-md);
    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:var(--font-caption);
    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:var(--font-caption);
    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:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 70%, transparent);
}

.trace-reuse-date-helper span {
    min-width:0;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    line-height:1.35;
    white-space:normal;
}

.trace-reuse-date-helper button {
    flex:0 0 auto;
    width:auto;
    min-height:36px;
    padding:8px 11px;
}

.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:var(--radius-md);
    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:var(--font-caption);
    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:var(--radius-md);
    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:var(--font-caption);
    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:var(--radius-md);
    background:var(--surface-raised);
}

.trace-reuse-summary small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    line-height:1.2;
}

.trace-reuse-summary strong {
    color:var(--text-primary);
    font-size:var(--font-caption);
    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:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 7%, var(--surface-raised));
}

.trace-reuse-dose-strip small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    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:var(--radius-md);
    color:var(--text-primary);
    background:color-mix(in srgb, var(--status-warning) 10%, transparent);
    font-size:var(--font-caption);
    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:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 8%, transparent);
}

.trace-reuse-equation-note strong {
    color:var(--text-primary);
    font-size:var(--font-caption);
}

.trace-reuse-equation-note span {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    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:var(--font-caption);
    font-weight:600;
    letter-spacing:0;
    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:var(--radius-md);
    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:var(--font-caption);
    text-overflow:ellipsis;
    white-space:nowrap;
}

.trace-reuse-additions em {
    display:grid;
    gap:2px;
    color:var(--text-primary);
    font-size:var(--font-caption);
    font-style:normal;
    font-weight:600;
    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);
}

.trace-reuse-addition-none {
    color:var(--text-secondary);
}

.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:var(--font-caption);
    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:var(--font-caption);
    line-height:1.35;
}

.trace-guide-summary strong {
    overflow:hidden;
    font-size:var(--font-caption);
    line-height:1.35;
    text-overflow:ellipsis;
}

.trace-guide-section {
    overflow:hidden;
    border:1px solid var(--workflow-border);
    border-radius:var(--radius-md);
    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:600;
}

.trace-guide-section > summary small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    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:var(--font-caption);
    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:var(--font-caption);
    overflow-wrap:anywhere;
}

.trace-guide-table-wrap {
    max-width:100%;
    overflow-x:auto;
    border:1px solid var(--workflow-border);
    border-radius:var(--radius-md);
}

.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:var(--font-caption);
    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:var(--font-caption);
    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:var(--radius-md);
}

.trace-history-summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    padding:14px 16px;
    cursor:pointer;
    list-style:none;
}

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

.trace-history-summary > span:first-child {
    display:grid;
    gap:2px;
    min-width:0;
}

.trace-history-summary strong {
    color:var(--text-primary);
    font-size:0.94rem;
}

.trace-history-summary small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    line-height:1.35;
}

.trace-history-summary-side {
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}

.trace-history-block[open] > .trace-history-summary {
    border-bottom:1px solid var(--workflow-border);
    background:var(--surface-raised);
}

.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:var(--font-caption);
}

.trace-history-count {
    flex:0 0 auto;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    font-weight:600;
}

.trace-history-head-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
}

.trace-history-content > .trace-history-head-actions {
    justify-content:flex-start;
}

.trace-history-head-actions button {
    width:auto;
    min-height:36px;
    margin:0;
    padding:7px 10px;
    white-space:nowrap;
}

.trace-history-add-button {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px!important;
    padding:10px 16px!important;
}

.trace-history-add-button > span {
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    line-height:1;
}

.fauna-trace-card {
    grid-column:1 / -1;
    border-color:color-mix(in srgb, #3d91d8 42%, var(--border-color));
}

/* The Fauna calculator keeps its heading in a small header wrapper. The
   shared collapsed-tile rule otherwise hides that wrapper and leaves an
   empty card in the tools overview. */
.fauna-trace-card.tool-tile-collapsed {
    display:block;
    min-height:84px;
    padding:14px;
}

.fauna-trace-card.tool-tile-collapsed .workflow-eyebrow,
.fauna-trace-card.tool-tile-collapsed .external-tool-note,
.fauna-trace-card.tool-tile-collapsed > .fauna-trace-subsection,
.fauna-trace-card.tool-tile-collapsed > .fauna-trace-actions,
.fauna-trace-card.tool-tile-collapsed > #faunaTraceResult,
.fauna-trace-card.tool-tile-collapsed > #faunaTraceHistory {
    display:none!important;
}

.fauna-trace-card.tool-tile-collapsed > h3 {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    margin:0;
    font-size:var(--font-body);
    line-height:1.14;
}

.fauna-trace-card.tool-tile-collapsed > h3 .tool-title-text {
    min-width:0;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.fauna-trace-card.tool-tile-collapsed > .hint {
    display:-webkit-box!important;
    margin:0;
    overflow:hidden;
    color:var(--text-secondary);
    font-size:0.78rem;
    line-height:1.2;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}



@keyframes toolFocusHighlight {
    0%, 100% { box-shadow: var(--shadow-card); }
    35% { box-shadow: 0 0 0 4px color-mix(in srgb, #3d91d8 50%, transparent), 0 0 28px color-mix(in srgb, #3d91d8 26%, transparent); }
}

.trace-related-tool-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:14px;
    padding:12px 14px;
    border:1px solid color-mix(in srgb, #3d91d8 48%, var(--border-color));
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.trace-related-tool-link > div {
    display:grid;
    gap:3px;
}

.trace-related-tool-link strong {
    color:var(--text-primary);
    font-size:0.85rem;
}

.trace-related-tool-link span {
    color:var(--text-secondary);
    font-size:0.76rem;
}

@media (max-width: 620px) {
    .trace-related-tool-link {
    align-items:stretch;
    flex-direction:column;
}

    .trace-related-tool-link button {
    width:100%;
}
}

.fauna-trace-card .workflow-eyebrow {
    color:var(--text-primary);
}

.fauna-trace-disclaimer {
    border-left-color:var(--border-color);
}

.fauna-trace-disclaimer a {
    color:var(--text-primary);
    font-weight:600;
}

.fauna-trace-subsection {
    margin-top:var(--space-4);
    padding-top:var(--space-4);
    border-top:1px solid var(--border-color);
}

.fauna-trace-subsection h4 {
    margin:0 0 var(--space-3);
    color:var(--text-primary);
    font-size:0.98rem;
}

.fauna-trace-unit-row {
    display:grid;
    grid-template-columns:minmax(0, 1fr) 86px;
    gap:8px;
    align-items:stretch;
}

.fauna-trace-unit-row input,
.fauna-trace-unit-row select {
    margin-bottom:0;
}

/* Each Fauna value is entered as a measured/target pair. Keeping two
   columns makes those pairs scannable without wasting a full row per field. */
#tools .fauna-trace-card:not(.tool-tile-collapsed) .fauna-trace-input-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
}

#tools .fauna-trace-card:not(.tool-tile-collapsed) .fauna-trace-input-grid .input-group {
    min-width:0;
}

.fauna-trace-panels {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--space-3);
}

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

.fauna-trace-panel h5 {
    margin:0;
    color:var(--text-primary);
    font-size:0.92rem;
    line-height:1.25;
}

.fauna-trace-panel-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    align-items:end;
}

.fauna-trace-panel .btn-primary {
    width:100%;
}

.fauna-trace-panel-result:empty {
    display:none;
}

.fauna-trace-panel-result .fauna-trace-result-card {
    margin-top:0;
    padding:10px;
}

@media (max-width: 900px) {
    .fauna-trace-panels {
    grid-template-columns:1fr;
}

    .fauna-trace-panel-grid {
    grid-template-columns:repeat(3, minmax(0, 1fr));
}
}

@media (max-width: 520px) {
    .fauna-trace-panel-grid {
    grid-template-columns:1fr;
}
}

.fauna-trace-result-card {
    display:grid;
    gap:10px;
    margin-top:var(--space-4);
    padding:14px;
    border:1px solid color-mix(in srgb, #3d91d8 42%, var(--border-color));
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.fauna-trace-result-card > p,
.fauna-trace-result-card > small {
    margin:0;
    color:var(--text-secondary);
}

.fauna-trace-history-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.fauna-trace-history-item > div:first-child {
    display:grid;
    gap:3px;
    min-width:0;
}

.fauna-trace-history-item small {
    color:var(--text-muted);
}

.fauna-trace-history-actions {
    display:flex;
    flex:0 0 auto;
    gap:8px;
}

.fauna-trace-history-actions button {
    width:auto;
    min-width:92px;
}

@media (max-width: 620px) {
    .fauna-trace-history-item {
    align-items:stretch;
    flex-direction:column;
}

    .fauna-trace-history-actions button {
    flex:1;
}
}

.fauna-trace-result-list,
.fauna-trace-history-list {
    display:grid;
    gap:8px;
}

.fauna-trace-result-row,
.fauna-trace-history-item {
    display:grid;
    gap:3px;
    padding:10px 12px;
    border-left:3px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 82%, transparent);
}

.fauna-trace-result-row span,
.fauna-trace-history-item span {
    color:var(--text-secondary);
    font-size:0.85rem;
}

.fauna-trace-result-row.is-warning {
    border-left-color:var(--status-warning);
}

.fauna-trace-result-row.is-danger {
    border-left-color:var(--status-danger);
}

.fauna-trace-history {
    margin-top:var(--space-4);
}

.fauna-trace-history summary {
    cursor:pointer;
    color:var(--text-primary);
    font-weight:600;
}

.fauna-trace-history-list {
    margin-top:10px;
}

.trace-history-content {
    display:grid;
    gap:var(--space-4);
    padding:var(--space-4);
}

.trace-history-help {
    display:grid;
    gap:4px;
    padding:11px 13px;
    border-left:3px solid var(--secondary);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--secondary) 7%, transparent);
}

.trace-history-help strong {
    color:var(--text-primary);
    font-size:0.8rem;
}

.trace-history-help p {
    margin:0;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    line-height:1.5;
}

.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:var(--radius-md);
    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:var(--font-caption);
}

.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:var(--radius-md);
    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:var(--font-caption);
    font-weight:600;
}

.trace-analysis-details[open] > summary {
    border-bottom:1px solid var(--workflow-border);
}

.trace-analysis-details > summary span {
    color:var(--text-secondary);
    font-size:var(--font-caption);
}

.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:var(--font-caption);
    font-variant-numeric:tabular-nums;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.trace-analysis-row small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
}

.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:var(--radius-md);
    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:var(--font-caption);
    text-align:right;
}

.trace-history-chart-legend {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0 12px;
    color:var(--text-secondary);
    font-size:var(--font-caption);
}

.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:var(--radius-md);
    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:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
}

.trace-history-element-empty {
    align-content:start;
}

.trace-history-element-empty p {
    margin:0;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    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:600;
}

.trace-history-element-head small,
.trace-history-element-head em {
    overflow:hidden;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    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:600;
    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:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 94%, black 6%);
    color:var(--text-secondary);
    font-size:var(--font-caption);
    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:var(--font-caption);
    font-variant-numeric:tabular-nums;
}

.trace-history-point:hover::after,
.trace-history-point:focus-visible::after {
    transform:none;
    opacity:1;
    box-shadow:none;
}

.trace-history-point:hover span,
.trace-history-point:focus-visible span {
    opacity:1;
    transform:none;
}

.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:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 45%, transparent);
}

.trace-history-element-stats small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    text-transform:uppercase;
}

.trace-history-element-stats strong {
    overflow:hidden;
    color:var(--text-primary);
    font-size:var(--font-caption);
    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:var(--radius-md);
    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:var(--font-caption);
}

.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-icp-link {
    color:var(--secondary);
    font-weight:600;
}

.trace-history-status {
    justify-self:start;
    padding:6px 9px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface);
}

.trace-history-status-action {
    width:auto;
    min-width:150px;
    font:inherit;
    color:inherit;
    text-align:left;
    cursor:pointer;
    transition:background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.trace-history-status-action:hover,
.trace-history-status-action:focus-visible {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 16%, var(--surface));
    outline:none;
    transform:none;
}

.trace-history-status strong {
    font-size:var(--font-caption);
}

.trace-history-status small {
    font-size:var(--font-caption);
}

.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-assigned {
    border-color:color-mix(in srgb, var(--secondary) 42%, var(--border-color));
    background:color-mix(in srgb, var(--secondary) 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:var(--font-caption);
    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:var(--font-caption);
}

.trace-history-actual-label {
    display:block;
    color:var(--accent-primary);
    font-weight:600;
}

.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:600;
}

@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:minmax(0, 1fr);
    min-width:0;
    width:100%;
}

    .trace-reuse-choice,
    .trace-reuse-choice .trace-input-with-unit,
    .trace-reuse-choice input {
    min-width:0;
    max-width:100%;
}

    .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:var(--radius-md);
    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:var(--font-caption);
    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-history-summary {
    align-items:flex-start;
}

    .trace-history-summary-side {
    align-items:flex-end;
    flex-direction:column;
    gap:6px;
}

    .trace-result-dose,
    .trace-recipe-total {
    text-align:left;
}

    .trace-history-head-actions {
    width:100%;
    justify-content:flex-start;
}

    .trace-history-add-button {
    width:100%;
    justify-content:center;
}

    .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;
    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;
    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;
    text-align:left;
    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);
}



.salifert-select-button[aria-expanded="true"]::after {
    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;
}

.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;
    text-align:left;
    font-variant-numeric:tabular-nums;
}





.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-md);
    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:600;
    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:var(--font-body);
    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;
    min-height:44px;
}

.booking-action {
    position:relative;
    font-weight:600;
}

.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-md);
    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-md);
    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:var(--font-caption);
    line-height:1.35;
}

.cr-stock-alias {
    display:block;
    color:var(--status-success);
    font-size:var(--font-caption);
    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:var(--font-caption);
}

.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:600;
}

.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:var(--font-caption);
    font-weight:600;
    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;
}

    

    .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;
    flex:0 0 auto;
}

    .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:hover {
    transform:none;
}

/* Button hover glow */

button:hover:not(:active) {
    filter:brightness(1.1);
    transform:none;
}

/* Smooth modal fade-in */
.modal {
    transition:opacity 0.3s ease;
}


@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;
}

@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 */


/* Stock badge subtle pulse for low stock */
@keyframes lowStockPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Log items slide in */

@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:none;
    box-shadow:none;
}

/* Nav menu smooth slide */


/* Menu backdrop fade */

@keyframes backdropFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Header subtle entrance */

@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:none;
}

/* Search input focus expand */
.lager-toolbar:focus-within {
    border-color:var(--primary);
    box-shadow:none;
}

/* Version badge subtle glow */



/* Footer link hover effect */
.app-footer a {
    transition:color 0.2s ease, text-shadow 0.2s ease;
}
.app-footer a:hover {
    text-shadow:none;
}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-page {
    min-height:100vh;
    background:var(--surface-card);
}

.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:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
}

.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:600;
    text-transform:uppercase;
    letter-spacing:0;
}

.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:var(--font-heading);
}

.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;
}



.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:var(--radius-md);
    background:var(--surface-card);
}

.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:var(--radius-md);
    background:var(--surface-card);
}

.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:var(--font-caption);
    font-weight:600;
    letter-spacing:0;
    text-transform:uppercase;
}

.legal-note {
    margin-top:24px;
    padding:14px 16px;
    border-radius:var(--radius-md);
    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:var(--radius-md);
}

    .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;
    cursor:pointer;
}



/* ==========================================================================
   🍞 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:var(--radius-md);
    padding:14px 18px;
    box-shadow:none;
    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:none;
}
.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 var(--border-color);
}
.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 var(--border-color);
    background:var(--surface-card);
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

    .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:none;
}

    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:var(--accent);
    box-shadow:none;
    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:var(--surface-card);
    box-shadow:none;
    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:none;
    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:var(--border-color);
    background:var(--surface-card);
    box-shadow:none;
}

    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:var(--surface-card);
}

    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;
}

.development-master-lock {
    padding:16px;
    border:1px solid color-mix(in srgb, var(--warning) 42%, var(--border-color));
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--warning) 7%, var(--surface-raised));
}

.development-settings-list {
    display:grid;
    gap:10px;
}

.development-settings-list[hidden] {
    display:none!important;
}

.development-settings-section {
    min-width:0;
    border:1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-raised) 34%, transparent);
    overflow:hidden;
}

.development-settings-section > summary {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    cursor:pointer;
    list-style:none;
}

.development-settings-section > summary::-webkit-details-marker {
    display:none;
}

.development-settings-section > summary strong,
.development-settings-section > summary small {
    display:block;
}

.development-settings-section > summary small {
    margin-top:4px;
    color:var(--text-secondary);
    line-height:1.4;
}

.development-settings-section[open] > summary .settings-chevron {
    transform:rotate(180deg);
}

.development-settings-body {
    min-width:0;
    padding:16px;
    border-top:1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
}

.development-unlocked-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
    padding:12px 14px;
    border:1px solid color-mix(in srgb, var(--success) 42%, var(--border-color));
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--success) 8%, var(--surface-raised));
}

.development-unlocked-bar span,
.development-unlocked-bar small {
    display:block;
}

.development-unlocked-bar small {
    margin-top:3px;
    color:var(--text-secondary);
}

.development-unlocked-bar > button {
    width:auto;
    flex:0 0 auto;
}

.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-md);
    background:var(--surface-card);
}

.local-device-row.is-active {
    border-color:color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow:none;
}

.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-md);
    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-md);
    background:var(--surface-card);
    box-shadow:none;
}

.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-md);
    background:var(--surface-card);
    box-shadow:none;
}

.wave-demo-frame {
    display:block;
    width:100%;
    min-height:min(78vh, 860px);
    border:0;
    background:var(--surface-card);
}

.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-md);
    background:color-mix(in srgb, var(--card-bg) 94%, var(--primary) 6%);
    box-shadow:none;
}

.lighting-studio-title {
    min-width:0;
    display:grid;
    gap:6px;
}

.lighting-studio-title > span,
.lighting-section-kicker {
    color:var(--primary);
    font-size:var(--font-caption);
    font-weight:600;
    letter-spacing:0;
}

.lighting-studio-title h3 {
    margin:0;
    color:var(--text);
    font-size:var(--font-body);
    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-md);
    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:var(--font-caption);
    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-md);
    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-md);
    background:color-mix(in srgb, var(--card-bg) 88%, transparent);
    box-shadow:none;
}

.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:600;
}

.lighting-form-grid label small {
    color:var(--text-muted);
    font-size:var(--font-caption);
    font-weight:600;
    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:600;
}

.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-md);
    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;
}

.lighting-icon-button {
    width:38px!important;
    height:40px;
    display:grid;
    place-items:center;
    padding:0!important;
    line-height:1;
}

.lighting-inline-details {
    min-width:0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    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:600;
}

.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:var(--font-caption);
    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-md);
    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:var(--font-caption);
    line-height:1.35;
}

.lighting-textarea {
    width:100%;
    min-height:132px;
    resize:vertical;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    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-md);
    background:var(--surface-card);
    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:none;
}

.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:600;
}

.lighting-editor-grid label small,
.lighting-layout-control label small {
    color:var(--text-muted);
    font-size:var(--font-caption);
    font-weight:600;
    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:600;
}

.lighting-lamp-groups-text small {
    color:var(--text-muted);
    font-size:var(--font-caption);
    font-weight:600;
    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-md);
    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-md);
    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:var(--font-caption);
    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:var(--radius-md);
    color:var(--success);
    background:color-mix(in srgb, var(--success) 10%, transparent);
    font-size:var(--font-caption);
    font-style:normal;
    font-weight:600;
    letter-spacing:0;
}

#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:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
}

.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:var(--font-body);
    font-weight:600;
    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:var(--font-caption);
}

.lighting-layout-control label {
    min-width:0;
    display:grid;
    gap:7px;
    color:var(--text);
    font-size:0.82rem;
    font-weight:600;
}

.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-md);
    background:var(--surface-card);
    box-shadow:none;
}

.lighting-quality-banner > span {
    min-width:0;
    display:grid;
    gap:3px;
}

.lighting-quality-banner small {
    color:var(--text-muted);
    font-size:var(--font-caption);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0;
}

.lighting-quality-banner strong {
    color:var(--text);
    font-size:1rem;
}

.lighting-quality-banner em {
    color:var(--text-muted);
    font-size:var(--font-caption);
    font-style:normal;
    line-height:1.35;
}

.lighting-quality-banner b {
    flex:0 0 auto;
    color:var(--primary);
    font-size:var(--font-body);
    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-md);
    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-md);
    background:color-mix(in srgb, var(--primary) 8%, transparent);
}

.lighting-result-summary strong {
    color:var(--text);
    font-size:var(--font-body);
    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-md);
    background:var(--surface-card);
}

.lighting-scene-card {
    margin:0;
}

.lighting-scene-card canvas {
    height:clamp(280px, 42vw, 460px);
    cursor:grab;
    touch-action:none;
    background:var(--surface-card);
}

.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:var(--surface-card);
}

.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:var(--font-caption);
}

.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:var(--radius-md);
    color:var(--primary);
    background:color-mix(in srgb, var(--primary) 9%, transparent);
    font-size:var(--font-caption);
    font-style:normal;
    font-weight:600;
    letter-spacing:0;
}

.lighting-heatmap-legend {
    display:grid;
    grid-template-columns:auto minmax(80px, 1fr) auto;
    gap:8px;
    align-items:center;
    color:var(--text-muted);
    font-size:var(--font-caption);
}

.lighting-heatmap-legend i {
    height:7px;
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.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-md);
    background:var(--surface-card);
}

.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:var(--radius-md);
    font-style:normal;
    font-size:0.76rem;
    font-weight:600;
    white-space:nowrap;
    color:var(--text);
    background:var(--surface-card);
}

.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) {
    .development-unlocked-bar {
    align-items:stretch;
    flex-direction:column;
}

    .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-md);
}

    .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-md);
    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-md);
    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:var(--surface-card);
    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;
}
@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:var(--surface-card);
    background-size:200% 100%;
    border-radius:var(--radius-md);
}
.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:var(--surface-card);
    color:var(--text-primary);
    padding:1px 3px;
    border-radius:var(--radius-md);
    font-weight:600;
}
.search-no-results {
    text-align:center;
    padding:20px;
    color:var(--text-muted);
    font-style:italic;
}

/* ==========================================================================
   📊 STATISTIC CHARTS
   ========================================================================== */
.chart-container {
    background:var(--surface-card);
    border-radius:var(--radius-md);
    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:var(--radius-md);
    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:none;
    transform-origin:bottom;
}
.chart-bar-label {
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
    font-size:var(--font-caption);
    color:var(--text-muted);
    white-space:nowrap;
}
.chart-bar-value {
    position:absolute;
    top:-18px;
    left:50%;
    transform:translateX(-50%);
    font-size:var(--font-caption);
    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:var(--radius-md);
    padding:12px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:none;
}
.undo-toast button {
    padding:6px 12px;
    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;
}




















@media (min-width: 768px) {
    
    
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width:8px;
    height:8px;
}
::-webkit-scrollbar-track {
    background:transparent;
}
::-webkit-scrollbar-thumb {
    background:var(--border);
    border-radius:var(--radius-md);
}
::-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:var(--surface-card);
    transform:scale(0);
    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:none;
    -webkit-backdrop-filter:none;
    color:var(--primary);
    font-size:1.55rem;
    font-weight:600;
    transition:transform 0.22s ease, opacity 0.22s ease, border-color 0.22s ease;
    box-shadow:none;
}
.pull-to-refresh-indicator.visible {
    opacity:1;
    transform:translateX(-50%) translateY(0) scale(1);
}
.pull-to-refresh-indicator.refreshing {
    border-color:var(--success);
    color:var(--success);
}
@keyframes spinRefresh {
    to { transform: translateX(-50%) translateY(0) scale(1) rotate(360deg); }
}

@media (max-width: 767px) {
    
    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:var(--font-caption);
    padding:7px 10px;
}
    
    .tab-content {
    padding:14px 12px 24px;
    gap:12px;
}
    .warehouse-control-card {
    padding:14px;
    border-radius:var(--radius-md);
}
    .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;
}
    
    
    
    
    
    .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:var(--radius-md);
    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:none;
}
.quick-preview.active {
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%, -50%) scale(1);
}
.quick-preview-backdrop {
    position:fixed;
    inset:0;
    background:var(--overlay-backdrop);
    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 */

@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:var(--radius-md);
}

    #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:var(--font-caption);
    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. */


/* ========================================================================== 
   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;
    font:inherit;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
    cursor:pointer;
    isolation:isolate;
}

: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:none;
}

: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:none;
    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;
    transform:none;
}





















.btn-icon {
    width:44px;
    height:44px;
    flex:0 0 44px;
    padding:0;
}

.btn-compact {
    min-height:var(--control-height-compact);
    min-width:38px;
    padding:7px 11px;
}

.btn-block {
    width:100%;
}

.btn.is-loading,
button.is-loading {
    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-right-color:transparent;
    border-top-color:var(--text-primary);
    border-left-color:var(--text-primary);
    border-bottom-color:var(--text-primary);
    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);
    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;
    font:inherit;
    line-height:1.35;
}





:where(input, select, textarea)::placeholder {
    opacity:1;
}

:where(input, select, textarea):disabled {
    opacity:var(--control-disabled-opacity);
    cursor:not-allowed;
}

:where(input, select, textarea)[readonly] {
    border-style:dashed;
}



textarea {
    min-height:116px;
    height:auto;
    resize:vertical;
}

select {
    appearance:none;
    -webkit-appearance:none;
    padding-right:42px;
    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;
    font:inherit;
    cursor:pointer;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color:var(--text-primary);
    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:var(--status-danger);
}
.field-message-error::before {
    content:"!";
    font-weight:600;
}
.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-md);
    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:var(--accent);
    box-shadow:none;
    transition:transform var(--transition-fast) var(--ease-standard);
}



.switch input:checked + .slider::before {
    transform:translateX(20px);
}


/* 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-md);
    background:color-mix(in srgb, var(--surface-raised) 70%, transparent);
    color:var(--text-secondary);
    font-size:0.75rem;
    font-weight:600;
    line-height:1.2;
}

.status-badge::before {
    content:"";
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:currentColor;
}

.status-info {
    color:var(--text-primary);
}
.status-success, .status-synced {
    color:var(--status-success);
}
.status-warning, .status-pending {
    color:var(--status-warning);
}
.status-danger, .status-critical, .status-error {
    color:var(--status-danger);
}
.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:600;
}

.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:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    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:600;
}
.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-md);
    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;
}

.empty-state-title,
.state-title {
    margin:0;
    color:var(--text-primary);
    font-size:1rem;
    font-weight:600;
}

.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:var(--surface-card);
    background-size:200% 100%;
}

@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:none;
    -webkit-backdrop-filter:none;
}

.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;
}

.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:600;
}

.app-dialog-eyebrow {
    margin:0 0 2px;
    color:var(--text-secondary);
    font-size:0.75rem;
    font-weight:600;
    text-transform:uppercase;
}

.app-dialog h2 {
    margin:0;
    color:var(--text-primary);
    font-size:var(--font-heading);
    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);
}

/* Trace-Rezepte haben viele kleine, gleichartige Elementmengen. Die übrigen
   Angaben bleiben bewusst über die volle Breite und die Anordnung fällt auf
   kleinen Displays wieder auf eine Spalte zurück. */
.app-dialog-fields.has-trace-element-fields {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--space-3) var(--space-4);
}

.app-dialog-fields.has-trace-element-fields > .form-field:not(.trace-element-dialog-field) {
    grid-column:1 / -1;
}

.trace-element-group-heading {
    grid-column:1 / -1;
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-top:var(--space-2);
    padding:9px 12px;
    border-left:4px solid var(--accent);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
}

.trace-element-group-heading strong {
    color:var(--text-primary);
    font-size:0.95rem;
}

.trace-element-group-heading span {
    color:var(--text-secondary);
    font-size:0.78rem;
}

.trace-element-group-heading--anionen {
    border-left-color:var(--status-warning);
    background:color-mix(in srgb, var(--status-warning) 10%, var(--surface-raised));
}

.trace-kationen-field,
.trace-anionen-field {
    padding:9px;
    border:1px solid color-mix(in srgb, var(--accent) 34%, var(--border-color));
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 5%, var(--surface-card));
}

.trace-anionen-field {
    border-color:color-mix(in srgb, var(--status-warning) 34%, var(--border-color));
    background:color-mix(in srgb, var(--status-warning) 5%, var(--surface-card));
}

.app-dialog-input-with-suffix {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:8px;
}

.app-dialog-input-with-suffix input {
    margin-bottom:0;
}

.app-dialog-input-suffix {
    min-width:24px;
    text-align:left;
}

.app-dialog-fields.has-trace-element-fields .trace-element-dialog-field > input {
    margin-bottom:0;
}

@media (max-width: 820px) and (min-width: 581px) {
    .app-dialog-fields.has-trace-element-fields {
    grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 580px) {
    .app-dialog-fields.has-trace-element-fields {
    grid-template-columns:1fr;
    gap:var(--space-2);
}

    .trace-element-group-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:2px;
}
}
.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:none;
    -webkit-backdrop-filter:none;
}

.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-md);
    background:var(--surface-card);
    color:var(--text-primary);
    box-shadow:none;
}

.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:var(--font-caption);
    font-weight:600;
    letter-spacing:0;
    text-transform:uppercase;
}

.legal-modal-header h2 {
    margin:0;
    color:var(--text-primary);
    font-size:var(--font-heading);
}

.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:var(--surface-card);
    border-color:color-mix(in srgb, var(--border-color) 82%, transparent);
    box-shadow:none;
    line-height:1;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    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:var(--radius-md);
    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:var(--surface-card);
    box-shadow:none;
}

.legal-modal-close:active {
    transform:none;
}

.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:var(--surface-card);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.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));
    height:min(720px, calc((100vw - 28px) * 9 / 16), calc(100dvh - max(var(--space-4), var(--safe-top)) - max(var(--space-4), var(--safe-bottom)) - 8px));
    aspect-ratio:16 / 9;
    max-height:none;
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--accent) 34%, var(--border-color));
    border-radius:var(--radius-md);
    background:var(--surface-card);
    color:var(--text-primary);
    box-shadow:none;
}

.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;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.trade-showcase-header h2 {
    margin:2px 0 0;
    font-size:var(--font-heading);
    line-height:0.96;
}

.trade-showcase-header > p {
    margin:0 0 2px;
    color:var(--text-secondary);
    font-size:var(--font-body);
    font-weight:600;
    white-space:nowrap;
}

.trade-showcase-header > .trade-showcase-url {
    color:var(--accent);
    font-size:var(--font-body);
    font-weight:600;
}

.trade-showcase-kicker {
    color:var(--accent);
    font-size:var(--font-body);
    font-weight:600;
    letter-spacing:0;
    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:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 9%, var(--surface-card));
    color:var(--text-primary);
    font-size:var(--font-body);
    font-weight:600;
    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:var(--surface-card);
    box-shadow:none;
}

.trade-showcase-media {
    position:relative;
    min-height:0;
    overflow:hidden;
    border-radius:var(--radius-md);
    isolation:isolate;
}

.trade-showcase-media > img {
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover;
    display:block;
    transform:scale(1.03);
}

.trade-showcase-media::after {
    content:"";
    position:absolute;
    inset:0;
    background:var(--surface-card);
    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:var(--text-primary);
    font-size:var(--font-body);
    font-weight:600;
    text-transform:uppercase;
}

.trade-showcase-media-copy strong {
    color:var(--text-primary);
    font-size:var(--font-body);
    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 var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    color:var(--text-primary);
    box-shadow:none;
    text-decoration:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.trade-showcase-qr img {
    display:block;
    width:100%;
    aspect-ratio:1;
    border:5px solid white;
    border-radius:var(--radius-md);
    background:white;
}

.trade-showcase-qr span {
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.trade-showcase-qr small {
    color:var(--text-primary);
    font-size:var(--font-body);
    font-weight:600;
    text-transform:uppercase;
}

.trade-showcase-qr strong {
    color:var(--text-primary);
    font-size:var(--font-body);
    white-space:nowrap;
}

.trade-showcase-qr:hover {
    border-color:color-mix(in srgb, var(--accent) 72%, white);
    transform:none;
}

.trade-showcase-app {
    display:grid;
    grid-template-rows:auto minmax(0, 1fr);
    min-width:0;
    min-height:0;
    overflow:hidden;
    border-radius:var(--radius-md);
    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:var(--font-body);
}

.trade-showcase-appdot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:none;
}

.trade-showcase-live {
    margin-left:auto;
    color:var(--text-secondary);
    font-weight:600;
}

.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:var(--radius-md);
}

.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:var(--font-body);
}

.trade-showcase-widget-head span {
    color:var(--text-primary);
    font-size:var(--font-body);
    font-weight:600;
}

.trade-showcase-widget-head strong,
.trade-showcase-widget small {
    color:var(--text-secondary);
    font-size:inherit;
    font-weight:600;
    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:var(--font-body);
    font-weight:600;
}

.trade-showcase-stock-row i {
    position:relative;
    height:5px;
    overflow:hidden;
    border-radius:var(--radius-md);
    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:var(--radius-md);
    background:var(--surface-card);
}

.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:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 8%, transparent);
    font-size:var(--font-body);
}

.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:var(--font-body);
    font-weight:600;
    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:var(--radius-md);
}

.trade-showcase-todos i.is-done {
    background:var(--accent);
    box-shadow:none;
}

.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:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 7%, transparent);
    font-size:var(--font-body);
    font-weight:600;
    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:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
}

.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:var(--radius-md);
    background:var(--surface-card);
}

.trade-showcase-cinema::before {
    content:"";
    position:absolute;
    inset:-35%;
    background:var(--surface-card);
    opacity:0.45;
    transform:rotate(-8deg);
    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:var(--font-heading);
    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:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
}

.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-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);
}

.trade-showcase-slide-hero::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--surface-card);
}

.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:var(--font-body);
    font-weight:600;
    letter-spacing:0;
    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:var(--font-body);
    line-height:0.95;
    letter-spacing:0;
}

.trade-showcase-slide-copy h3 {
    font-size:var(--font-body);
}

.trade-showcase-slide-copy p {
    max-width:34em;
    margin:clamp(9px, 1.1vw, 15px) 0 0;
    color:var(--text-primary);
    font-size:var(--font-body);
    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:var(--surface-card);
    box-shadow:none;
}

.trade-showcase-hero-stats span {
    display:grid;
    min-width:clamp(112px, 11vw, 152px);
    padding:clamp(9px, 1vw, 14px);
    border-radius:var(--radius-md);
}

.trade-showcase-hero-stats b {
    color:var(--text-primary);
    font-size:var(--font-body);
    line-height:1;
}

.trade-showcase-hero-stats small {
    color:var(--text-secondary);
    font-weight:600;
}

.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:var(--radius-md);
    background:var(--surface-card);
}

.trade-showcase-device-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:var(--text-secondary);
    font-size:var(--font-body);
    font-weight:600;
}

.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:var(--radius-md);
}

.trade-showcase-metric-grid b {
    color:var(--accent);
    font-size:var(--font-body);
    line-height:1;
}

.trade-showcase-metric-grid small {
    overflow:hidden;
    color:var(--text-secondary);
    font-size:var(--font-body);
    font-weight:600;
    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;
}

.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:var(--radius-md);
}

.trade-showcase-stock-demo strong,
.trade-showcase-recipe-demo strong {
    font-size:var(--font-body);
}

.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:600;
}

.trade-showcase-stock-demo i {
    position:relative;
    height:9px;
    overflow:hidden;
    border-radius:var(--radius-md);
    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:var(--radius-md);
    background:var(--surface-card);
}

.trade-showcase-recipe-demo span {
    color:var(--accent);
    font-size:var(--font-body);
    font-weight:600;
    line-height:1;
}

.trade-showcase-recipe-demo b {
    color:var(--text-primary);
    font-size:var(--font-body);
}

.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:var(--radius-md);
    color:var(--text-primary);
    font-size:var(--font-body);
    font-weight:600;
}

.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:var(--radius-md);
}

.trade-showcase-analysis-demo b {
    color:var(--accent);
    font-size:var(--font-body);
}

.trade-showcase-analysis-demo small {
    color:var(--text-secondary);
    font-size:var(--font-body);
    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(58px, 5.8vw, 78px) minmax(0, 1fr);
    gap:clamp(10px, 1.05vw, 15px);
    align-items:center;
    width:min(36%, 360px);
    min-height:clamp(78px, 7.2vw, 102px);
    padding:clamp(8px, 0.9vw, 12px) clamp(13px, 1.25vw, 18px) clamp(8px, 0.9vw, 12px) clamp(8px, 0.9vw, 12px);
    border:1px solid color-mix(in srgb, var(--accent) 48%, white 14%);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    color:var(--text-primary);
    text-decoration:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    overflow:hidden;
}

.trade-showcase-scan-badge::before {
    content:"";
    position:absolute;
    inset:5px;
    border-radius:var(--radius-md);
    border:1px solid var(--border-color);
    pointer-events:none;
}

.trade-showcase-qr-frame {
    position:relative;
    display:grid;
    place-items:center;
    aspect-ratio:1;
    min-width:0;
    border-radius:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
}

.trade-showcase-qr-frame::after {
    content:"";
    position:absolute;
    inset:-5px;
    z-index:-1;
    border-radius:var(--radius-md);
    background:var(--surface-card);
    opacity:0.75;
}

.trade-showcase-scan-badge img {
    display:block;
    width:84%;
    aspect-ratio:1;
    padding:0;
    border:0;
    border-radius:var(--radius-md);
    background:white;
    box-shadow:none;
}

.trade-showcase-scan-badge > span:last-child {
    display:grid;
    align-content:center;
    justify-items:start;
    gap:5px;
    height:100%;
    min-width:0;
    text-align:left;
}

.trade-showcase-scan-badge strong {
    color:var(--text-primary);
    max-width:100%;
    font-size:var(--font-body);
    font-weight:600;
    line-height:1.08;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
}

.trade-showcase-scan-badge small {
    width:fit-content;
    padding:4px 9px;
    border-radius:var(--radius-md);
    border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    background:color-mix(in srgb, var(--accent) 15%, transparent);
    color:var(--text-primary);
    font-size:var(--font-body);
    font-weight:600;
    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:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
}

.trade-showcase-phone-card b {
    display:grid;
    place-items:center;
    aspect-ratio:1;
    border-radius:var(--radius-md);
    background:var(--surface-card);
    color:var(--text-primary);
    font-size:var(--font-body);
    line-height:1;
}

.trade-showcase-phone-card span {
    color:var(--text-primary);
    font-size:var(--font-body);
    font-weight:600;
    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:var(--radius-md);
    transform:none;
}

.trade-showcase-final-qr strong {
    font-size:var(--font-body);
}

.trade-showcase-flow {
    display:grid;
    grid-template-columns:minmax(0, 1fr) 42px minmax(0, 1fr) 42px minmax(0, 1fr);
    align-items:center;
    gap:clamp(7px, 1vw, 13px);
    margin-top:auto;
}

.trade-showcase-flow span,
.trade-showcase-coral-demo div {
    border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border-color));
    border-radius:var(--radius-md);
    background:var(--surface-card);
    box-shadow:none;
}

.trade-showcase-flow span {
    display:grid;
    place-items:center;
    min-height:clamp(54px, 6vw, 82px);
    padding:clamp(8px, 1.1vw, 15px);
    color:var(--text-primary);
    font-size:var(--font-body);
    font-weight:600;
    line-height:1.12;
    text-align:center;
}

.trade-showcase-flow i {
    position:relative;
    display:block;
    height:3px;
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 28%, transparent);
    overflow:hidden;
}

.trade-showcase-flow i::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

.trade-showcase-coral-demo {
    display:grid;
    gap:clamp(10px, 1.35vw, 18px);
    min-width:0;
}

.trade-showcase-coral-demo div {
    position:relative;
    display:grid;
    grid-template-columns:clamp(54px, 6vw, 82px) minmax(0, 1fr);
    align-items:center;
    gap:clamp(10px, 1.2vw, 16px);
    min-width:0;
    padding:clamp(12px, 1.6vw, 22px);
    overflow:hidden;
}

.trade-showcase-coral-demo div::before {
    content:"";
    position:absolute;
    right:-18px;
    top:50%;
    width:clamp(70px, 9vw, 120px);
    aspect-ratio:1;
    border-radius:var(--radius-md);
    background:var(--surface-card);
    opacity:0.18;
    transform:translateY(-50%);
}

.trade-showcase-coral-demo b {
    position:relative;
    display:grid;
    place-items:center;
    aspect-ratio:1;
    border-radius:var(--radius-md);
    background:var(--surface-card);
    color:var(--text-primary);
    font-size:var(--font-body);
    line-height:1;
}

.trade-showcase-coral-demo span {
    position:relative;
    color:var(--text-primary);
    font-size:var(--font-body);
    font-weight:600;
    line-height:1.22;
}

.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:var(--radius-md);
    background:color-mix(in srgb, var(--text-secondary) 18%, transparent);
}

.trade-showcase-progress span::after {
    content:"";
    display:block;
    width:100%;
    height:100%;
    border-radius:var(--radius-md);
    background:var(--surface-card);
    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; }
}

@keyframes showcaseFlow {
    0% { transform: translateX(-100%); opacity: 0; }
    18%, 78% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

@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:var(--radius-md);
}

    .trade-showcase-content {
    padding:7px;
}

    .trade-showcase-cinema {
    gap:5px;
}

    .trade-showcase-brandbar h2 {
    font-size:var(--font-heading);
}

    .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:var(--font-body);
}

    .trade-showcase-slide-copy p {
    max-width:100%;
    margin-top:5px;
    font-size:var(--font-body);
    line-height:1.24;
}

    .trade-showcase-hero-stats {
    gap:4px;
}

    .trade-showcase-hero-stats span {
    min-width:70px;
    padding:5px 6px;
    border-radius:var(--radius-md);
}

    .trade-showcase-hero-stats b {
    font-size:0.92rem;
}

    .trade-showcase-hero-stats small,
    .trade-showcase-slide-copy span {
    font-size:var(--font-caption);
}

    .trade-showcase-device {
    gap:5px;
    padding:6px;
    border-radius:var(--radius-md);
}

    .trade-showcase-device-bar {
    font-size:var(--font-caption);
}

    .trade-showcase-metric-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:4px;
}

    .trade-showcase-metric-grid span {
    padding:5px;
    border-radius:var(--radius-md);
}

    .trade-showcase-metric-grid b {
    font-size:0.92rem;
}

    .trade-showcase-metric-grid small {
    font-size:var(--font-caption);
}

    .trade-showcase-wide-chart {
    min-height:42px;
    max-height:72px;
}

    .trade-showcase-split-demo,
    .trade-showcase-install-demo,
    .trade-showcase-tool-wall,
    .trade-showcase-coral-demo {
    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,
    .trade-showcase-coral-demo div {
    padding:6px;
    border-radius:var(--radius-md);
}

    .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,
    .trade-showcase-coral-demo span {
    font-size:var(--font-caption);
}

    .trade-showcase-coral-demo {
    grid-template-columns:minmax(0, 1fr);
}

    .trade-showcase-coral-demo div {
    grid-template-columns:28px minmax(0, 1fr);
    gap:6px;
}

    .trade-showcase-coral-demo b {
    border-radius:var(--radius-md);
    font-size:var(--font-caption);
}

    .trade-showcase-flow {
    grid-template-columns:minmax(0, 1fr);
    gap:5px;
}

    .trade-showcase-flow i {
    display:none;
}

    .trade-showcase-flow span {
    min-height:28px;
    padding:5px;
    border-radius:var(--radius-md);
    font-size:var(--font-caption);
}

    .trade-showcase-phone-card {
    grid-template-columns:22px minmax(0, 1fr);
    gap:5px;
}

    .trade-showcase-phone-card b {
    border-radius:var(--radius-md);
    font-size:var(--font-caption);
}

    .trade-showcase-stock-demo label {
    grid-template-columns:30px minmax(0, 1fr) auto;
    gap:3px;
    font-size:var(--font-caption);
}

    .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:var(--font-caption);
    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:38px minmax(0, 1fr);
    gap:6px;
    width:min(42%, 166px);
    min-height:52px;
    padding:5px 8px 5px 5px;
    border-radius:var(--radius-md);
}

    .trade-showcase-qr-frame {
    border-radius:var(--radius-md);
}

    .trade-showcase-qr-frame::after {
    inset:-3px;
    border-radius:var(--radius-md);
}

    .trade-showcase-scan-badge img {
    border-radius:var(--radius-md);
}

    .trade-showcase-scan-badge strong {
    font-size:var(--font-caption);
    line-height:1.08;
    white-space:normal;
}

    .trade-showcase-scan-badge small {
    padding:2px 5px;
    font-size:var(--font-caption);
}

    .trade-showcase-final-qr strong {
    font-size:var(--font-caption);
}

    .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:var(--font-heading);
}
    .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:var(--font-caption);
}

    .trade-showcase-stage { grid-template-columns: minmax(0, 1fr); }
    .trade-showcase-appbar {
    min-height:20px;
    padding:2px 7px;
    font-size:var(--font-caption);
}
    .trade-showcase-dashboard {
    gap:3px;
    padding:3px;
}
    .trade-showcase-widget {
    padding:4px;
    border-radius:var(--radius-md);
}
    .trade-showcase-widget-head {
    margin-bottom:2px;
}
    .trade-showcase-widget-head span {
    font-size:var(--font-body);
}
    .trade-showcase-widget-head strong,
    .trade-showcase-widget small {
    font-size:var(--font-body);
}
    .trade-showcase-stock-row {
    grid-template-columns:23px minmax(0, 1fr) 19px;
    gap:3px;
    font-size:var(--font-body);
}
    .trade-showcase-mix {
    margin-bottom:2px;
    padding:1px 4px;
    font-size:var(--font-body);
}
    .trade-showcase-todos > div:not(.trade-showcase-widget-head) {
    gap:3px;
    font-size:var(--font-body);
}
    .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:var(--radius-md);
    font-size:var(--font-body);
}
    .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) {
    
}

html.legal-embedded,
html.legal-embedded body.legal-page {
    background:transparent;
}

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)));
}
    .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-md);
}
    .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:var(--radius-md);
    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:var(--font-caption);
    font-weight:600;
    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;
}
}











@media (max-width: 1023px) {
    

    

    

    

    

    

    

    

    

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

@media (min-width: 1024px) {
    

    

    

    

    

    

    #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] {
    border-style:dashed!important;
    cursor:default;
}

@media (max-width: 1023px) {
    

    .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:600;
    text-transform:uppercase;
}

.dashboard-page-head h2,
.warehouse-page-head h2 {
    margin:2px 0;
    color:var(--text-primary);
    font-size:var(--font-heading);
    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:var(--font-body);
    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:600;
}

.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:var(--font-body);
    line-height:1.05;
    overflow:hidden;
    text-overflow:ellipsis;
}

.dashboard-date-value i {
    display:block;
    margin-top:2px;
    font-size:var(--font-caption);
    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:none;
}

.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-md);
    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:var(--radius-md);
    background:var(--surface-raised);
}
.dashboard-progress::-webkit-progress-bar {
    background:var(--surface-raised);
    border-radius:var(--radius-md);
}
.dashboard-progress::-webkit-progress-value {
    background:var(--accent);
    border-radius:var(--radius-md);
}
.dashboard-progress::-moz-progress-bar {
    background:var(--accent);
    border-radius:var(--radius-md);
}

.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:var(--radius-md);
    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-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:600;
}
.search-input,
.filter-select {
    height:var(--control-height);
    min-height:var(--control-height);
    padding:0 var(--space-3)!important;
    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;
}

.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-md);
    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:var(--font-body);
    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-md);
    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:var(--font-body);
    font-weight:600;
    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:var(--font-caption);
    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-md);
    background:var(--surface-raised);
}
.inventory-facts dt {
    color:var(--text-secondary);
    font-size:var(--font-caption);
}
.inventory-facts dd {
    margin:2px 0 0;
    color:var(--text-primary);
    font-size:var(--font-body);
    font-weight:600;
    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:var(--font-caption);
    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;
    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;
}
    .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;
}
    .warehouse-meta {
    margin-top:6px;
    font-size:var(--font-caption);
    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;
}
    .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;
}
    .warehouse-filter-result {
    justify-content:space-between;
    white-space:normal;
}
    
    .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:var(--font-caption);
}
    .inventory-card .threshold-btn {
    min-width:30px;
    min-height:30px;
    font-size:var(--font-caption);
}
    .inventory-stock-value .stock {
    font-size:1.1rem;
}
    .inventory-status {
    padding:4px 7px;
    font-size:var(--font-caption);
}
    .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;
}
    .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-md);
    background:var(--surface-card);
    box-shadow:none;
}

.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:600;
    text-transform:uppercase;
}

.logbook-page-header {
    grid-template-columns:minmax(0, 1fr) auto auto;
    background:var(--surface-card);
    border-color:var(--border-color);
}

.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:600;
}

.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:none;
}
.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-md);
    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:var(--radius-md);
    background:var(--accent);
}

progress.mini-progress::-webkit-progress-value {
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

progress.mini-progress::-moz-progress-bar {
    border-radius:var(--radius-md);
    background:var(--surface-card);
}

@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:var(--font-caption);
    font-weight:600;
}

.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:var(--radius-md);
    background:var(--surface-raised);
}
.usage-stat-progress::-webkit-progress-value {
    border-radius:var(--radius-md);
    background:var(--accent);
}
.usage-stat-progress::-moz-progress-bar {
    border-radius:var(--radius-md);
    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:var(--font-caption);
}

.prognose-badge {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
}

.prognose-badge strong {
    font-size:var(--font-caption);
    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;
    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:600;
}

.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;
}

.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:600;
}
.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-md);
    background:var(--surface-card);
    box-shadow:none;
}

.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:none;
}

.reorder-open-index {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 18%, transparent);
    color:var(--accent);
    font-size:0.78rem;
    font-weight:600;
}

.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:600;
    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:var(--font-caption);
}
    .coral-zone-cell span {
    font-size:var(--font-caption);
}
    .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:var(--font-caption);
}
    .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 {
    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-md);
    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-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:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.settings-group-nav button {
    width:auto;
    min-width:max-content;
    min-height:40px;
    padding:8px 13px;
}

.settings-group-nav button:hover,
.settings-group-nav button:focus-visible {
    transform:none;
}



#einstellungen > .card[hidden],
#einstellungen > .settings-group-label[hidden] {
    display:none!important;
}

#einstellungen > .card {
    padding:var(--space-4) var(--space-5);
}



.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;
}

.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-md);
    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-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 {
    width:min(100%, 1180px);
    max-width:1180px;
    box-sizing:border-box;
    margin-inline:auto;
}

.icp-import-card .button-row {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:var(--space-3);
}

.icp-import-card .button-row > button {
    margin:0;
}

.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-summary-side {
    display:flex;
    align-items:center;
    gap:12px;
    flex:0 0 auto;
}

.icp-history-summary-meta {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    font-weight:600;
    white-space:nowrap;
}

.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-import-guide {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-3);
    margin-bottom:var(--space-3);
}

.icp-import-steps {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-bottom:var(--space-3);
}

.icp-import-step {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    column-gap:9px;
    align-items:start;
    padding:11px 12px;
    border:1px solid color-mix(in srgb, var(--primary) 28%, var(--border-color));
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-elevated) 68%, transparent);
}

.icp-import-step > span {
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    border-radius:50%;
    color:var(--surface-card);
    background:var(--primary);
    font-weight:600;
}

.icp-import-step strong,
.icp-import-step small {
    display:block;
    grid-column:2;
}

.icp-import-step strong {
    color:var(--text-primary);
    font-size:0.8rem;
}

.icp-import-step small {
    margin-top:3px;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    line-height:1.4;
}

.icp-import-source-note {
    margin-bottom:var(--space-3);
    padding:9px 11px;
    border-left:3px solid var(--status-warning);
    border-radius:var(--radius-md);
    color:var(--text-secondary);
    background:color-mix(in srgb, var(--status-warning) 8%, transparent);
    font-size:0.76rem;
    line-height:1.45;
}

.icp-import-source-note strong,
.icp-token-help b {
    color:var(--text-primary);
}

.label-optional {
    color:var(--text-secondary);
    font-size:0.7em;
    font-weight:600;
}

.icp-import-note .icp-token-help {
    color:var(--text-secondary);
}

.icp-import-guide > div {
    padding:var(--space-3);
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-elevated) 68%, transparent);
}

.icp-import-guide strong,
.icp-import-guide span {
    display:block;
}

.icp-import-guide strong {
    color:var(--text-primary);
    margin-bottom:5px;
}

.icp-import-guide span {
    color:var(--text-secondary);
    line-height:1.45;
    white-space:normal;
}

.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-md);
    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:var(--radius-md);
    color:var(--text-secondary);
    background:color-mix(in srgb, var(--surface-elevated) 72%, transparent);
    font-weight:600;
    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:var(--font-caption);
    opacity:0.8;
}



.icp-compare-chip:hover span {
    transform:none;
}

.icp-compare-results {
    margin-bottom:var(--space-4);
}

.icp-compare-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-3);
    width:100%;
}

.icp-compare-card {
    width:100%;
    margin-bottom:0;
}

.icp-chart-scroll {
    width:100%;
}

.icp-chart-scroll .measurement-chart {
    display:block;
    width:100%;
    max-width:100%;
}

.icp-compare-card .icp-chart-scroll .measurement-chart {
    min-width:0;
}

.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;
    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-md);
    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);
    align-items:center;
    flex-wrap:wrap;
    padding:10px 12px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-elevated) 70%, transparent);
    color:var(--text-secondary);
}

.icp-preview-summary.is-success {
    border-color:color-mix(in srgb, var(--success) 42%, var(--border-color));
    background:color-mix(in srgb, var(--success) 10%, var(--surface-elevated));
}

.icp-preview-summary.is-warning {
    border-color:color-mix(in srgb, var(--warning) 48%, var(--border-color));
    background:color-mix(in srgb, var(--warning) 12%, var(--surface-elevated));
}

.icp-preview-summary.is-error {
    border-color:color-mix(in srgb, var(--danger) 52%, var(--border-color));
    background:color-mix(in srgb, var(--danger) 12%, var(--surface-elevated));
}

.icp-preview-summary strong {
    color:var(--text-primary);
}

.icp-import-meta-preview {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:var(--space-3);
}

.icp-import-meta-preview span {
    display:grid;
    gap:2px;
    min-width:128px;
    padding:8px 10px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-elevated) 74%, transparent);
}

.icp-import-meta-preview small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
}

.icp-import-meta-preview strong {
    color:var(--primary);
    font-size:0.88rem;
}

.icp-report-meta {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:0 0 12px;
}

.icp-report-meta span {
    display:grid;
    gap:2px;
    min-width:130px;
    padding:7px 9px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-elevated) 72%, transparent);
}

.icp-report-meta small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
}

.icp-report-meta strong {
    color:var(--primary);
    font-size:0.78rem;
}

.icp-import-check-list {
    display:grid;
    gap:8px;
    margin-top:var(--space-3);
}

.icp-import-check {
    display:grid;
    gap:3px;
    padding:10px 12px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-elevated) 70%, transparent);
}

.icp-import-check.is-success {
    margin-top:var(--space-3);
    border-color:color-mix(in srgb, var(--success) 42%, var(--border-color));
    background:color-mix(in srgb, var(--success) 10%, var(--surface-elevated));
}

.icp-import-check.is-info {
    border-color:color-mix(in srgb, var(--primary) 36%, var(--border-color));
}

.icp-import-check.is-warning {
    border-color:color-mix(in srgb, var(--warning) 48%, var(--border-color));
    background:color-mix(in srgb, var(--warning) 10%, var(--surface-elevated));
}

.icp-import-check.is-error {
    border-color:color-mix(in srgb, var(--danger) 52%, var(--border-color));
    background:color-mix(in srgb, var(--danger) 10%, var(--surface-elevated));
}

.icp-import-check strong {
    color:var(--text-primary);
    font-size:0.86rem;
}

.icp-import-check span {
    color:var(--text-secondary);
    line-height:1.4;
    white-space:normal;
}

.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:600;
    letter-spacing:0;
    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:var(--font-body);
    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:var(--radius-md);
    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:var(--font-caption);
    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:min(620px, 100%);
}

.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:var(--font-caption);
    font-weight:600;
    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) minmax(260px, 34%);
    gap:var(--space-3);
    align-items:center;
    padding:var(--space-2);
    margin-bottom:var(--space-2);
}

.icp-report-main {
    grid-area:main;
}

.icp-report-card {
    grid-template-areas:"main assignment"
        "actions actions";
}

.icp-trace-assignment {
    grid-area:assignment;
    display:grid;
    gap:4px;
    min-width:min(290px, 34vw);
    padding:8px 10px;
    border:1px solid color-mix(in srgb, var(--primary) 28%, var(--border-color));
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-elevated) 62%, transparent);
}

.icp-trace-assignment label {
    color:var(--text-primary);
    font-size:var(--font-caption);
    font-weight:600;
}

.icp-trace-assignment select {
    min-height:38px;
    min-width:0;
    padding:7px 9px;
}

.icp-trace-assignment small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    line-height:1.35;
}

.icp-report-card.active {
    border-color:color-mix(in srgb, var(--primary) 48%, var(--border-color));
}

.icp-report-actions {
    grid-area: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 {
    box-sizing:border-box;
    min-height:42px;
    min-width:92px;
    padding-inline:13px;
    text-align:center;
    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-main > span {
    min-width:0;
}

.icp-report-main > span:last-child {
    flex:0 1 auto;
    max-width:48%;
    text-align:right;
    overflow-wrap:anywhere;
}

.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:none;
}

.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:var(--font-caption);
    font-weight:600;
    letter-spacing:0;
    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;
}

.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-import-guide,
    .icp-import-steps,
    .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-import-card .button-row {
    align-items:stretch;
    flex-direction:column;
    gap:8px;
}

    .icp-import-card .button-row > button {
    width:100%;
    min-height:46px;
}

    .icp-history-summary {
    align-items:flex-start;
}

    .icp-history-summary-side {
    align-items:flex-end;
    flex-direction:column;
    gap:6px;
}

    .icp-report-card {
    grid-template-columns:1fr;
    grid-template-areas:"main"
            "assignment"
            "actions";
}

    .icp-trace-assignment {
    min-width:0;
}

    .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;
}

    .icp-compare-card .icp-chart-scroll .measurement-chart {
    min-width:430px;
}
}

@media (min-width: 761px) and (max-width: 900px) {
    .icp-report-card {
    grid-template-columns:1fr;
    grid-template-areas:"main"
            "assignment"
            "actions";
}

    .icp-trace-assignment {
    min-width:0;
}

    .icp-report-main > span:last-child {
    max-width:42%;
}
}

.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:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 12%, transparent);
    color:var(--accent);
    font-size:var(--font-caption);
    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:600;
}

.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-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%;
}




@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 {
    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;
}





















@media (max-width: 767px) {
    body.theme-badman {
    background-attachment:initial!important;
}

    body.theme-badman::before {
    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;
}

    

    
}

/* Theme cleanup: keep the pink theme polished and consistent with the app UI */
body.theme-girl {
    color-scheme:light;
}

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;
}























.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;
    text-overflow:ellipsis;
}

    .warehouse-switcher button {
    width:100%;
    min-width:0;
}

    .warehouse-meta {
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
}

    

    

    

    

    
}

/* 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:var(--radius-md);
}

    .dashboard-tile > span {
    grid-area:label;
    min-width:0;
    font-size:0.82rem;
    font-weight:600;
    line-height:1.2;
}

    .dashboard-tile > strong {
    grid-area:value;
    justify-self:end;
    max-width:46vw;
    margin:0!important;
    font-size:var(--font-body);
    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;
    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:var(--font-body);
}
}

/* 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;
    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:var(--surface-card);
    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:none;
    backdrop-filter:none;
}

.guide-hero {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    padding:clamp(22px, 4vw, 40px);
    border-radius:var(--radius-md);
    margin-bottom:14px;
}

.guide-hero h1 {
    margin:6px 0 10px;
    font-size:var(--font-heading);
    line-height:0.95;
    letter-spacing:0;
}

.guide-hero p {
    max-width:760px;
    margin:0;
    color:var(--text-secondary);
    font-size:var(--font-body);
    line-height:1.45;
}

.guide-app-link {
    flex:0 0 auto;
    text-decoration:none;
}

.guide-warning {
    border-radius:var(--radius-md);
    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:var(--radius-md);
    margin-bottom:16px;
}

.guide-toc a {
    min-width:0;
    color:var(--text-primary);
    text-decoration:none;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:9px 10px;
    background:color-mix(in srgb, var(--bg-tertiary) 78%, transparent);
    font-weight:600;
    font-size:var(--font-body);
    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:var(--radius-md);
    padding:clamp(18px, 3vw, 30px);
    margin-bottom:16px;
}

.guide-card-wide {
    grid-template-columns:1fr;
}

.guide-copy h2 {
    margin:6px 0 10px;
    font-size:var(--font-heading);
    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:var(--radius-md);
    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:var(--font-caption);
    font-weight:600;
}

.guide-tool-card strong {
    font-size:var(--font-body);
    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:var(--radius-md);
    background:color-mix(in srgb, var(--bg-secondary) 62%, transparent);
}

.guide-subtool-group h3 {
    margin:0 0 10px;
    color:var(--text-primary);
    font-size:var(--font-body);
    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:var(--radius-md);
    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:var(--radius-md);
    border:1px solid var(--border);
    background:var(--bg-primary);
    box-shadow:none;
}

.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:var(--radius-md);
}

    .guide-card {
    grid-template-columns:1fr;
    border-radius:var(--radius-md);
}

    .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:var(--font-caption);
    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:var(--radius-md);
}

    .guide-toc a {
    min-height:34px;
    padding:8px 7px;
    font-size:var(--font-body);
}
}

/* Header compact layout: keeps cloud actions stable on narrow mobile screens. */






@media (max-width: 767px) {
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
}

@media (max-width: 374px) {
    

    

    

    

    

    

    

    

    
}

/* 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:var(--radius-md);
    background:var(--surface-card);
}

.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:var(--font-caption);
}

.tool-visibility-row.is-disabled {
    opacity:0.55;
}

.custom-color-settings {
    margin:12px 0;
    border:1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color));
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-raised) 52%, transparent);
    overflow:hidden;
}

.custom-color-settings summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:52px;
    padding:11px 12px;
    cursor:pointer;
    list-style:none;
}

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

.custom-color-settings summary > span:first-child {
    display:grid;
    gap:2px;
    min-width:0;
}

.custom-color-settings summary strong {
    color:var(--text-primary);
    font-size:0.92rem;
    line-height:1.15;
}

.custom-color-settings summary small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    line-height:1.25;
}

.custom-color-settings-body {
    display:grid;
    gap:10px;
    padding:0 12px 12px;
}

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

.custom-color-picker {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-width:0;
    padding:9px 10px;
    border:1px solid color-mix(in srgb, var(--accent) 14%, var(--border-color));
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 68%, transparent);
    color:var(--text-primary);
    font-weight:600;
    font-size:0.84rem;
}

.custom-color-picker input[type="color"] {
    width:42px;
    height:32px;
    padding:2px;
    cursor:pointer;
}

.custom-color-preview {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    padding:10px;
    border-radius:var(--radius-md);
    border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border-color));
    background:var(--surface-card);
}

.custom-color-preview > span {
    width:28px;
    height:28px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--surface-card);
    box-shadow:none;
}

.custom-color-preview strong,
.custom-color-preview small {
    min-width:0;
    line-height:1.15;
}

.custom-color-preview small {
    margin-left:auto;
    color:var(--text-muted);
    font-weight:600;
    font-size:var(--font-caption);
}

.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;
}

.external-tool-note {
    display:grid;
    gap:4px;
    margin:12px 0;
    padding:12px;
    border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border-color));
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--accent) 7%, var(--surface-card));
}

.external-tool-note strong {
    color:var(--text-primary);
    font-size:0.9rem;
}

.external-tool-note span {
    color:var(--text-secondary);
    font-size:0.78rem;
    line-height:1.35;
}

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

.external-tool-actions a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.external-tool-frame-wrap {
    margin-top:14px;
    border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border-color));
    border-radius:var(--radius-md);
    overflow:hidden;
    background:var(--surface-card);
    min-height:min(760px, 72vh);
}

.external-tool-frame-wrap iframe {
    display:block;
    width:100%;
    min-height:min(760px, 72vh);
    border:0;
    background:var(--surface-card);
}

@media (max-width: 767px) {
    .custom-color-grid {
    grid-template-columns:1fr;
}

    .custom-color-preview {
    align-items:flex-start;
    flex-direction:column;
}

    .custom-color-preview small {
    margin-left:0;
}

    .tool-visibility-grid {
    grid-template-columns:1fr;
}

    .tool-visibility-row {
    min-height:48px;
}

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

    .external-tool-frame-wrap,
    .external-tool-frame-wrap iframe {
    min-height:70vh;
}
}

/* 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: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;
    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;
    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:600;
    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:600;
    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-md);
    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:600;
}

@media (max-width: 374px) {
    

    #tools .tools-command-bar {
    grid-template-columns:minmax(0, 1fr) 42px;
}

    #tools .tools-search-clear {
    width:42px;
    min-width:42px;
}

    
}

@media (forced-colors: active) {
    
}

/* ========================================================================== 
   REEFTOOLS DESIGN SYSTEM 3.3
   A final, shared presentation layer for every app area and color theme.
   ========================================================================== */

:root {
    --status-info:#5cb8e6;
    --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 {
    --status-info:#3976b7;
}

body.theme-mint,
html.theme-mint {
    --status-info:#64b9ee;
}

body.theme-badman,
html.theme-badman {
    --status-info:#7eb5db;
}

body.theme-light,
html.theme-light {
    --status-info:#0879e8;
}

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);
}





















.tab-content {
    gap:16px;
    padding:22px clamp(12px, 2.2vw, 26px) 42px;
}



: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:var(--font-heading);
    font-weight:600;
    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:var(--font-caption);
    font-weight:600;
    letter-spacing:0;
}





@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:none;
    transform:none;
}
}

:where(button, .btn, .btn-primary, .btn-secondary, .btn-cancel, .btn-danger, .btn-warning, .btn-ghost, .btn-in, .btn-out) {
    min-height:42px;
}

:where(button, .btn, .btn-primary, .btn-secondary, .btn-cancel, .btn-danger, .btn-warning, .btn-ghost, .btn-in, .btn-out):hover:not(:disabled) {
    transform:none;
}

:where(button, .btn, .btn-primary, .btn-secondary, .btn-cancel, .btn-danger, .btn-warning, .btn-ghost, .btn-in, .btn-out):active:not(:disabled) {
    transform:none;
    transition-duration:80ms!important;
}











:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    min-height:46px;
}









input[type="checkbox"],
input[type="radio"] {
    accent-color:var(--accent);
}

input[type="range"] {
    accent-color:var(--accent);
}

details > summary {
    border-radius:var(--radius-md);
    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:var(--radius-md);
    background:color-mix(in srgb, currentColor 9%, transparent);
    box-shadow:none;
}

.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:none;
}

.dashboard-tile > span {
    color:var(--text-secondary);
    font-weight:600;
}

.dashboard-tile > strong {
    font-weight:600;
}

.dashboard-actions {
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 94%, transparent);
    box-shadow:none;
}

.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:var(--radius-md);
    background:color-mix(in srgb, var(--status-danger) 10%, transparent);
    color:var(--text-primary);
    font-size:0.8rem;
    line-height:1.1;
    text-align:center;
    white-space:nowrap;
}

.dashboard-progress {
    height:9px;
    box-shadow:none;
}

.dashboard-progress::-webkit-progress-value,
progress.mini-progress::-webkit-progress-value {
    background:var(--surface-card);
    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;
}

.dashboard-chart-area,
.measurement-area {
    transform-origin:center bottom;
}



.measurement-point-group {
    outline:none;
}



.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:var(--radius-md);
    background:color-mix(in srgb, var(--app-bg) 34%, transparent);
}

@supports (content-visibility: auto) {
    #tools .tool-section,
    #einstellungen > .card,
    #icp .icp-history-card,
    #trace-export .trace-workstep,
    #logbuch .logbook-card {
    content-visibility:auto;
    contain-intrinsic-size:1px 420px;
}

    #tools .tool-section[open],
    #einstellungen > .card:has(details[open]) {
    contain-intrinsic-size:auto;
}
}

.measurement-stats div {
    border-color:var(--border-color);
    border-radius:var(--radius-md);
    background:var(--surface-raised);
}

.measurement-stats strong {
    color:var(--accent);
    font-size:var(--font-body);
}

.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);
}

.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:none;
}

#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:none;
}

#tools .tool-info-button {
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    flex:0 0 44px;
    padding:0;
}

#tools .tool-link-button {
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    flex:0 0 44px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    cursor:pointer;
}

#tools .tool-link-button:hover,
#tools .tool-link-button:focus-visible {
    transform:none;
}

/* Global feature search */


.global-search-trigger,
.global-search-close {
    display:inline-grid;
    place-items:center;
    width:44px;
    height:44px;
    min-width:44px;
    padding:0;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-raised) 78%, transparent);
    color:var(--accent);
    box-shadow:none;
    font-size:1.45rem;
    line-height:1;
}

.global-search-trigger:hover,
.global-search-trigger:focus-visible,
.global-search-close:hover,
.global-search-close:focus-visible {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 13%, var(--surface-raised));
    outline:none;
}

.global-search-dialog {
    position:fixed;
    inset:0;
    z-index:22000;
    display:grid;
    place-items:start center;
    padding:max(8vh, 56px) 16px 24px;
}

.global-search-dialog[hidden] {
    display:none!important;
}

.global-search-backdrop {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    border-radius:0;
    background:var(--overlay-backdrop);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.global-search-panel {
    position:relative;
    display:grid;
    grid-template-rows:auto auto auto minmax(0, 1fr);
    gap:14px;
    width:min(720px, 100%);
    max-height:min(760px, 84dvh);
    min-height:0;
    padding:20px;
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--accent) 38%, var(--border-color));
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 96%, var(--nav-bg));
    box-shadow:none;
}

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

.global-search-head h2 {
    margin:3px 0 0;
    font-size:var(--font-heading);
}

.global-search-field,
.settings-search-field {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:10px;
    min-width:0;
    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-raised) 82%, transparent);
    color:var(--accent);
}

.global-search-field {
    padding:0 14px;
}

.global-search-field input,
.settings-search-field input {
    width:100%;
    min-width:0;
    margin:0;
}

.global-search-field input {
    min-height:50px;
    padding:0;
}



.global-search-status,
.settings-search-status {
    min-height:18px;
    margin:0;
    color:var(--text-secondary);
    font-size:0.78rem;
}

.global-search-results {
    display:grid;
    gap:8px;
    min-height:0;
    max-height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    padding-right:3px;
}

.global-search-result {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-rows:auto auto auto;
    grid-template-areas:"type arrow"
        "title arrow"
        "description arrow";
    align-items:start;
    gap:4px 14px;
    width:100%;
    min-width:0;
    min-height:82px;
    padding:12px 14px;
    overflow:hidden;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-raised) 72%, transparent);
    color:var(--text-primary);
    text-align:left;
    box-shadow:none;
}

.global-search-result,
.global-search-result * {
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    hyphens:auto!important;
}

.global-search-result:hover,
.global-search-result:focus-visible {
    transform:none;
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
    outline:none;
}

.global-search-result-type {
    grid-area:type;
    color:var(--accent);
    font-size:var(--font-caption);
    font-weight:600;
    text-transform:uppercase;
}

.global-search-result strong {
    grid-area:title;
    min-width:0;
    font-size:0.96rem;
    line-height:1.22;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

.global-search-result small {
    grid-area:description;
    min-width:0;
    margin-top:1px;
    color:var(--text-secondary);
    font-size:0.78rem;
    line-height:1.3;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

.global-search-result-arrow {
    grid-area:arrow;
    align-self:center;
    color:var(--secondary);
    font-size:1.5rem;
}

.global-search-empty {
    display:grid;
    gap:5px;
    padding:28px 16px;
    border:1px dashed var(--border-color);
    border-radius:var(--radius-md);
    color:var(--text-secondary);
    text-align:center;
}

/* Settings information architecture */
.settings-control-center {
    display:grid;
    gap:10px;
    padding:14px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 86%, transparent);
    box-shadow:none;
}

.setup-assistant-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-color:color-mix(in srgb, var(--accent) 42%, var(--border-color));
    background:color-mix(in srgb, var(--accent) 8%, var(--surface-card));
}

.setup-assistant-card h3 {
    margin:4px 0 5px;
}

.setup-assistant-card p {
    max-width:760px;
    margin-bottom:0;
}

.setup-assistant-card > button {
    flex:0 0 auto;
    width:auto;
}

.settings-search-field {
    padding-left:13px;
}

.settings-search-field input {
    min-height:46px;
    padding:0;
}

.settings-search-field button {
    width:40px;
    height:40px;
    min-width:40px;
    margin-right:3px;
    padding:0;
}

.settings-control-center .settings-group-nav {
    position:static;
    top:auto;
    z-index:auto;
    margin:0;
    padding:0 0 2px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.settings-group-label {
    display:flex;
    align-items:center;
    gap:10px;
    margin:14px 0 0;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    font-weight:600;
    letter-spacing:0;
    text-transform:uppercase;
}

.settings-group-label::after {
    content:"";
    height:1px;
    flex:1;
    background:var(--border-color);
}



@keyframes settingsSearchHighlight {
    0%, 100% { box-shadow: var(--shadow-sm); }
    35%, 72% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent), var(--shadow-md); }
}

@media (max-width: 767px) {
    .global-search-dialog {
    place-items:end center;
    padding:12px;
}

    .global-search-panel {
    width:100%;
    max-height:88dvh;
    padding:16px;
    border-radius:var(--radius-md);
}

    .global-search-result {
    grid-template-rows:auto auto auto;
    min-height:88px;
    padding:11px 12px;
}

    .settings-control-center {
    padding:12px;
}

    .setup-assistant-card {
    align-items:stretch;
    flex-direction:column;
    gap:14px;
}

    .setup-assistant-card > button {
    width:100%;
}

    .settings-control-center .settings-group-nav {
    margin-inline:0;
}
}

@media (max-width: 430px) {
    

    

    
}



@keyframes toolDeeplinkPulse {
    0%, 100% {
        box-shadow: inset 0 3px 0 color-mix(in srgb, var(--accent) 70%, transparent), var(--shadow-md);
    }
    24%, 72% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent), 0 18px 44px color-mix(in srgb, var(--accent) 18%, transparent);
        border-color: color-mix(in srgb, var(--accent) 72%, var(--border-color));
    }
}

.logbook-hero,
.logbook-card {
    background:var(--surface-card);
}

.logbook-card-details[open] {
    border-color:color-mix(in srgb, var(--accent) 30%, var(--border-color));
    box-shadow:none;
}

.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;
    box-shadow:none;
}

.settings-accordion {
    overflow:clip;
}

.settings-accordion[open] {
    border-color:color-mix(in srgb, var(--accent) 30%, var(--border-color));
    box-shadow:none;
}

.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:var(--overlay-backdrop);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}





.toast {
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-overlay) 96%, transparent);
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.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);
}





@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) {
    

    

    

    

    .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:var(--font-heading);
}

    .modal-content {
    width:min(100%, 520px);
    max-width:520px;
    max-height:calc(100dvh - 28px);
    padding:18px;
}
}

@media (max-width: 767px) {
    

    .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;
}

    
}

/* 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:var(--font-body);
    line-height:1.4;
}
}

/* Desktop side navigation: keep labels cleanly left aligned. */
@media (min-width: 1024px) {
    

    
}

/* Mobile slide-out navigation: align entries like the desktop sidebar. */
@media (max-width: 1023px) {
    

    
}

.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-md);
    font-size:1.2rem;
    font-weight:600;
    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;
}
}

/* Dashboard settings: compact configurator for overview widgets and measurement charts. */
.dashboard-settings-panel {
    display:grid;
    gap:var(--space-4);
    min-width:0;
}

.settings-toggle-row,
.dashboard-setting-tile,
.dashboard-measurement-setting {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    align-items:start;
    gap:10px;
    min-width:0;
}

.settings-toggle-row {
    padding:12px 14px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-raised) 64%, transparent);
}

.settings-toggle-row input,
.dashboard-setting-tile input,
.dashboard-measurement-setting input {
    width:18px;
    height:18px;
    margin-top:2px;
    accent-color:var(--accent);
}

.settings-toggle-title,
.dashboard-setting-tile strong,
.dashboard-measurement-setting strong {
    display:block;
    min-width:0;
    color:var(--text-primary);
    font-size:0.93rem;
    line-height:1.2;
}

.settings-toggle-row small,
.dashboard-setting-tile small,
.dashboard-measurement-setting small {
    display:block;
    min-width:0;
    margin-top:3px;
    color:var(--text-secondary);
    font-size:0.76rem;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
}

.dashboard-settings-block {
    display:grid;
    gap:var(--space-3);
    min-width:0;
    padding:14px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-raised) 36%, transparent);
}

.dashboard-settings-head {
    display:grid;
    gap:4px;
    min-width:0;
}

.dashboard-settings-head strong {
    color:var(--text-primary);
    font-size:1rem;
    line-height:1.2;
}

.dashboard-settings-head small {
    color:var(--text-secondary);
    line-height:1.35;
}

.dashboard-settings-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap:10px;
}

.dashboard-setting-tile,
.dashboard-measurement-setting {
    min-height:68px;
    padding:11px 12px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 84%, transparent);
}

.dashboard-measurement-settings-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap:10px;
}

.dashboard-measurement-setting.has-data {
    border-color:color-mix(in srgb, var(--accent) 30%, var(--border-color));
}

.dashboard-measurement-setting.no-data {
    opacity:0.74;
}



.dashboard-measurement-setting:has(input:disabled) {
    opacity:0.48;
}

.dashboard-settings-range-grid {
    grid-template-columns:minmax(0, 240px);
}

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

.dashboard-settings-actions button {
    width:auto;
}

@media (max-width: 560px) {
    .dashboard-settings-block {
    padding:12px;
}

    .dashboard-settings-grid,
    .dashboard-measurement-settings-grid,
    .dashboard-settings-range-grid {
    grid-template-columns:1fr;
}

    .dashboard-settings-actions {
    display:grid;
    grid-template-columns:1fr;
}

    .dashboard-settings-actions button {
    width:100%;
}
}
/* Separate direct corrections for Ba, Li and Mo */
.trace-osci-workflow-summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    cursor:pointer;
    list-style:none;
}

.trace-osci-workflow-summary::-webkit-details-marker {
    display:none;
}
.trace-osci-workflow-summary::after {
    content:"⌄";
    color:var(--text-secondary);
    font-size:1.35rem;
    transition:transform var(--transition-fast) var(--ease-standard);
}
.trace-osci-workflow-card[open] .trace-osci-workflow-summary::after {
    transform:rotate(180deg);
}
.trace-osci-workflow-summary h3 {
    margin:2px 0 0;
}
.trace-osci-workflow-body {
    padding-top:16px;
}

.trace-direct-elements-card {
    grid-column:1 / -1;
    border-color:var(--border-color);
}

/* The direct-element calculator follows the same compact tile behavior as the other tools. */
.trace-direct-elements-card.tool-tile-collapsed {
    display:block;
    grid-column:span 1;
    min-height:84px;
    padding:14px;
    cursor:pointer;
}

.trace-direct-elements-card.tool-tile-collapsed > .trace-direct-elements-head {
    display:grid!important;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-rows:auto auto;
    align-items:center;
    gap:4px 10px;
    margin:0;
}

.trace-direct-elements-card.tool-tile-collapsed > .trace-direct-elements-head > div {
    display:contents;
}

.trace-direct-elements-card.tool-tile-collapsed .workflow-eyebrow {
    grid-column:1;
    grid-row:1;
    margin:0;
}

.trace-direct-elements-card.tool-tile-collapsed h3 {
    grid-column:1;
    grid-row:2;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    margin:0;
    font-size:var(--font-body);
    line-height:1.14;
}

.trace-direct-elements-card.tool-tile-collapsed h3 .tool-title-text {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.trace-direct-elements-card.tool-tile-collapsed .hint {
    display:none;
}

.trace-direct-elements-card.tool-tile-collapsed .trace-start-solution-badge {
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
}

.trace-direct-elements-card.tool-tile-collapsed > #traceDirectElementsCalculator {
    display:none!important;
}

/* Keep the nested header visible despite the generic tile hide rule. */
#tools .trace-direct-elements-card.tool-tile-collapsed > .trace-direct-elements-head {
    display:grid!important;
}

#tools .trace-direct-elements-card.tool-tile-collapsed > .trace-direct-elements-head > div {
    display:contents!important;
}

#tools .trace-direct-elements-card.tool-tile-collapsed .workflow-eyebrow {
    display:none;
}

#tools .trace-direct-elements-card.tool-tile-collapsed h3 {
    grid-column:1;
    grid-row:1;
    width:auto;
}

#tools .trace-direct-elements-card.tool-tile-collapsed h3 .tool-title-text {
    white-space:normal;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

#tools .trace-direct-elements-card.tool-tile-collapsed .hint {
    display:-webkit-box!important;
    grid-column:1;
    grid-row:2;
    margin:0;
    color:var(--text-muted);
    font-size:var(--font-body);
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.trace-direct-elements-head,
.trace-direct-elements-toolbar,
.trace-direct-element-title,
.trace-direct-element-inputs,
.trace-direct-result {
    display:flex;
}

.trace-direct-card-actions {
    display:flex;
    justify-content:flex-end;
    margin:8px 0;
}

.trace-direct-elements-head {
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-4);
}

.trace-direct-elements-head h3 {
    margin:2px 0 6px;
}

.trace-direct-elements-explainer {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:18px 0;
    padding:12px 14px;
    border:1px solid color-mix(in srgb, var(--status-warning) 42%, var(--border-color));
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--status-warning) 8%, transparent);
}

.trace-direct-elements-explainer span:last-child,
.trace-direct-element-title > span:last-child {
    display:grid;
    gap:2px;
}

.trace-direct-elements-explainer small,
.trace-direct-element-title small,
.trace-direct-result small,
.trace-direct-element-note,
.trace-direct-elements-footnote {
    color:var(--text-secondary);
    font-size:.86rem;
}

.trace-direct-elements-toolbar {
    align-items:end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
}

.trace-direct-volume-note {
    color:var(--text-secondary);
    padding-bottom:9px;
}

.trace-direct-calculate-button {
    align-self:end;
    white-space:nowrap;
}

.trace-direct-elements-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
}

.trace-direct-element-card {
    min-width:0;
    padding:14px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.trace-direct-element-card--add {
    border-color:color-mix(in srgb, var(--status-warning) 55%, var(--border-color));
}
.trace-direct-element-card--complete {
    border-color:color-mix(in srgb, var(--status-success) 55%, var(--border-color));
}

.trace-direct-element-title {
    align-items:center;
    gap:10px;
    min-height:48px;
}

.trace-direct-element-symbol {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:50%;
    color:var(--accent);
    background:color-mix(in srgb, var(--accent) 14%, transparent);
    font-weight:600;
}

.trace-direct-element-inputs {
    gap:10px;
    margin-top:14px;
}

.trace-direct-element-inputs label {
    display:grid;
    gap:4px;
    min-width:0;
    flex:1;
    color:var(--text-secondary);
    font-size:.8rem;
}

.trace-direct-element-inputs label span {
    font-size:var(--font-caption);
}

.trace-direct-element-inputs input {
    width:100%;
}

.trace-direct-presets {
    display:flex;
    gap:6px;
    margin:10px 0 12px;
}

.trace-direct-preset-option {
    display:grid;
    flex:1 1 0;
    min-width:0;
    gap:1px;
    padding:8px 6px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--surface-card) 72%, transparent);
    color:var(--text-secondary);
    cursor:pointer;
    text-align:left;
    transition:border-color var(--transition-fast) var(--ease-standard), background var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.trace-direct-preset-option:hover,
.trace-direct-preset-option:focus-visible {
    border-color:var(--accent);
    color:var(--text-primary);
}

.trace-direct-preset-option.is-selected {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 15%, var(--surface-card));
    color:var(--text-primary);
    box-shadow:none;
}

.trace-direct-preset-option > span {
    font-size:.76rem;
    font-weight:600;
}

.trace-direct-preset-option small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
}

.trace-direct-preset-option strong {
    margin-top:3px;
    color:var(--accent);
    font-size:.92rem;
}

.trace-direct-preset-option em {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    font-style:normal;
    font-weight:500;
}

.trace-direct-result {
    align-items:center;
    flex-wrap:wrap;
    gap:8px 12px;
    padding:10px 0;
    border-top:1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-bottom:1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.trace-direct-result strong {
    font-size:1.1rem;
}
.trace-direct-result small {
    width:100%;
}
.trace-direct-result p {
    margin:0;
    color:var(--text-secondary);
    font-size:.82rem;
}
.trace-direct-element-note {
    margin:10px 0 0;
    line-height:1.4;
}
.trace-direct-element-note span {
    display:block;
    margin-top:3px;
    color:var(--status-warning);
}
.trace-direct-elements-footnote {
    margin:16px 0 0;
    line-height:1.5;
}
.trace-direct-sources {
    margin-top:12px;
    border-top:1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    padding-top:10px;
}
.trace-direct-sources summary {
    color:var(--accent);
    cursor:pointer;
    font-weight:600;
}
.trace-direct-sources-body {
    max-width:850px;
    padding-top:8px;
    color:var(--text-secondary);
    font-size:.82rem;
    line-height:1.5;
}
.trace-direct-sources-body p {
    margin:7px 0;
}
.trace-direct-sources-body ul {
    margin:8px 0 0;
    padding-left:20px;
}
.trace-direct-sources-body a {
    color:var(--accent);
}

@media (max-width: 900px) {
    .trace-direct-elements-grid {
    grid-template-columns:1fr;
}
}

@media (max-width: 560px) {
    .trace-direct-elements-head,
    .trace-direct-elements-toolbar {
    display:grid;
}
    .trace-direct-elements-head {
    gap:8px;
}
    .trace-direct-volume-note {
    padding-bottom:0;
}
    .trace-direct-calculate-button {
    justify-self:start;
}
    .trace-direct-card-actions {
    justify-content:stretch;
}
    .trace-direct-card-actions .trace-direct-calculate-button {
    width:100%;
}
    .trace-direct-presets {
    gap:4px;
}
    .trace-direct-preset-option {
    padding:7px 4px;
}
    .trace-direct-preset-option > span {
    font-size:var(--font-caption);
}
    .trace-direct-preset-option strong {
    font-size:.82rem;
}
}