/* Reef Lab: shared tokens and components. Feature CSS owns layout, not appearance. */
:root,
html.theme-mint, body.theme-mint,
html.theme-badman, body.theme-badman {
    color-scheme: dark;
    --app-bg: #101719;
    --nav-bg: #101719;
    --surface-card: #172124;
    --surface-raised: #1d2a2e;
    --surface-overlay: #172124;
    --border-color: #2c3c40;
    --text-primary: #e9f1f1;
    --text-secondary: #a2b5b9;
    --accent: #53d3c7;
    --accent-strong: #70e0d5;
    --accent-contrast: #072b28;
    --status-success: #74d7b1;
    --status-warning: #eec773;
    --status-danger: #f1828c;
    --product-blue: #75baf0;
    --product-violet: #bd91e8;
    --product-lilac: #b4a0de;
    --product-gray: #aab5bb;
    --product-green: #73cc96;
    --product-orange: #efaa63;
    --product-pale-yellow: #e5d783;
    --overlay-backdrop: rgb(0 0 0 / 65%);
    --font-caption: .75rem;
    --font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-small: .8125rem;
    --font-body: .875rem;
    --font-section: 1rem;
    --font-heading: 1.5rem;
    --font-value: 1.625rem;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-card: 8px;
    --radius-control: 8px;
    --radius-pill: 8px;
    --shadow-subtle: none;
    --shadow-raised: 0 8px 24px rgb(0 0 0 / 15%);
    --shadow-overlay: 0 16px 48px rgb(0 0 0 / 28%);
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: var(--shadow-overlay);
    --shadow-soft: none;
    --header-height: 76px;
    --nav-width: 208px;
    --mobile-nav-height: 72px;
    --content-max: 1240px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
    --bg: var(--app-bg);
    --card-bg: var(--surface-card);
    --primary: var(--accent);
    --secondary: var(--accent);
    --text: var(--text-primary);
    --text-muted: var(--text-secondary);
    --danger: var(--status-danger);
    --success: var(--status-success);
    --warning: var(--status-warning);
    --border: var(--border-color);
    --stock-empty: var(--status-danger);
    --stock-critical: var(--status-danger);
    --stock-warning: var(--status-warning);
    --stock-optimal: var(--status-success);
}
html.theme-light, body.theme-light,
html.theme-girl, body.theme-girl {
    color-scheme: light;
    --app-bg: #f5f7f8;
    --nav-bg: #f5f7f8;
    --surface-card: #ffffff;
    --surface-raised: #eef3f4;
    --surface-overlay: #ffffff;
    --border-color: #d5dfe2;
    --text-primary: #17282c;
    --text-secondary: #526a71;
    --accent: #087e78;
    --accent-strong: #06635e;
    --accent-contrast: #ffffff;
    --status-success: #197454;
    --status-warning: #8f6307;
    --status-danger: #b33748;
}
html.theme-girl, body.theme-girl { --accent: #9f3b67; --accent-strong: #813053; }
html.theme-mint, body.theme-mint { --accent: #76d7c3; --accent-strong: #91e3d2; }
html.theme-badman, body.theme-badman { --accent: #f49b9f; --accent-strong: #f5b3b6; }
body, html[class*="theme-"] {
    --bg: var(--app-bg);
    --card-bg: var(--surface-card);
    --primary: var(--accent);
    --secondary: var(--accent);
    --text: var(--text-primary);
    --text-muted: var(--text-secondary);
    --danger: var(--status-danger);
    --success: var(--status-success);
    --warning: var(--status-warning);
    --border: var(--border-color);
    --stock-empty: var(--status-danger);
    --stock-critical: var(--status-danger);
    --stock-warning: var(--status-warning);
    --stock-optimal: var(--status-success);
}
html, :root { font-family: var(--font-family); font-size: 16px; }
body { display: block; margin: 0; font-size: var(--font-body); line-height: 1.5; background: var(--app-bg); color: var(--text-primary); background-image: none; transition: none; }
body.theme-badman { background-image: none; }
body:is(.guide-page,.legal-page) { background: var(--app-bg); }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
body :is(button,.btn,.button) { border-radius: var(--radius-control); }
body:has(.app-dialog.is-open, .global-search-dialog:not([hidden]), .modal[style*="display: flex"])::before { display: none; }
:where(h1,h2,h3,h4,h5,h6) { color: var(--text-primary); font-weight: 600; letter-spacing: 0; line-height: 1.3; overflow-wrap: anywhere; }
h1 { font-size: var(--font-heading); }
h2 { font-size: 1.25rem; }
h3, h4 { font-size: var(--font-section); }
small, .hint, .field-help, .item-hint { font-size: var(--font-caption); color: var(--text-secondary); line-height: 1.5; }
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
:where(strong,b) { font-weight: 600; }
/* Shared actions, including generated dialogs and custom feature controls. */
button, .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-out, .btn-in, .btn-ghost, .btn-warning, .btn-cancel, .button {
    font-size: var(--font-body);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    padding: 10px 14px;
    min-height: 40px;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    text-decoration: none;
    overflow-wrap: anywhere;
}
:is(button,.btn,.button):hover:not(:disabled):not(:where([class*="backdrop"])) { background: color-mix(in srgb, var(--surface-raised) 80%, var(--text-primary) 6%); border-color: var(--text-secondary); transform: none; box-shadow: none; }
:is(button,.btn,.button):active:not(:disabled):not(:where([class*="backdrop"])) { background: var(--surface-card); transform: none; }
.btn-primary, .btn-in, button[type="submit"]:not(.btn-secondary):not(.btn-danger):not(.btn-out) { background: var(--accent); border-color: transparent; color: var(--accent-contrast); font-weight: 600; }
.btn-primary:is(:hover,:active):not(:disabled), .btn-in:is(:hover,:active):not(:disabled), button[type="submit"]:is(:hover,:active):not(:disabled):not(.btn-secondary):not(.btn-danger):not(.btn-out) { background: var(--accent-strong); border-color: transparent; }
.btn-secondary, .btn-ghost, .btn-cancel { background: transparent; }
.btn-danger, .btn-warning { background: color-mix(in srgb, var(--status-danger) 8%, var(--surface-card)); color: var(--status-danger); border-color: color-mix(in srgb, var(--status-danger) 45%, var(--border-color)); }
.btn-warning { color: var(--status-warning); background: var(--surface-card); border-color: var(--status-warning); }
/* Auslagern is a routine action; deletion remains explicitly destructive. */
.btn-out { background: transparent; color: var(--text-primary); border-color: var(--border-color); }
:is(button,.btn,.button):disabled, [aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
:is(button,.btn,.button).active, button[aria-pressed="true"], button[aria-selected="true"], button[aria-current="step"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-card)); color: var(--accent); }
:is(a,button,input,textarea,select,summary,[tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: var(--focus-ring); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea {
    background: var(--app-bg); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-control); padding: 10px 12px; min-height: 42px; box-shadow: none; font-size: var(--font-body); font-weight: 400; transition: border-color 140ms ease;
}
select { appearance: auto; background-image: none; padding-right: 10px; }
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: .8; }
:is(input,select,textarea):hover:not(:disabled) { border-color: var(--text-secondary); }
:is(input,select,textarea):disabled { opacity: .55; cursor: not-allowed; }
:is(input,textarea)[aria-invalid="true"] { border-color: var(--status-danger); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }
.switch .slider { background: var(--border-color); border-radius: var(--radius-control); }
.switch .slider::before { background: var(--text-primary); border-radius: var(--radius-sm); box-shadow: none; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { background: var(--accent-contrast); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 3px; }
select option { background: var(--surface-card); color: var(--text-primary); }
/* Repeated items have frames; page sections are unframed. */
.card, .inventory-card, .dashboard-widget, .dashboard-panel, .logbook-card, .measurement-chart-card, .measurement-detail-card, .tool-tile-card, .tool-compact-card, .stat-block, .protocol-entry, .coral-card, .resource-link-card {
    background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: none;
}
.card { padding: var(--space-5); margin-bottom: var(--space-4); }
.card:hover, .inventory-card:hover, .dashboard-widget:hover, .coral-card:hover, .tool-tile-card:hover { transform: none; box-shadow: none; border-color: var(--border-color); }
.card .card, .card .trace-workstep, .card .custom-cr-section { box-shadow: none; border-radius: 0; border: 0; background: transparent; }
.workflow-card, .tool-section, .settings-card, .settings-accordion, #einstellungen > .card {
    background: transparent; border: 0; border-radius: 0; border-top: 1px solid var(--border-color); box-shadow: none; padding: var(--space-5) 0;
}
.tab-content > .card, .tools-shell > .card, .coral-page > .card {
    background: transparent; border: 0; border-top: 1px solid var(--border-color); border-radius: 0; padding: var(--space-4) 0; box-shadow: none;
}
.warehouse-control-card, .warehouse-filter-panel { background: transparent; border: 0; border-radius: 0; border-block-end: 1px solid var(--border-color); padding: var(--space-4) 0; box-shadow: none; }
.warehouse-switcher { grid-template-columns: minmax(0,1fr) repeat(3,44px); }
.warehouse-switcher button { min-height: 44px; height: 44px; }
.trace-workstep { background: transparent; border: 0; padding: var(--space-4) 0; box-shadow: none; }
.trace-workstep, .trace-config-grid { grid-template-columns: minmax(0,1fr); min-width: 0; }
@media (min-width: 768px) { .trace-config-grid { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); } }
.input-group { margin-bottom: var(--space-4); }
.input-group > label, .field-label { font-size: var(--font-small); font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
.btn-group, .workflow-actions { gap: var(--space-2); }
summary { color: var(--text-primary); font-weight: 500; }
.settings-accordion > summary, .tool-section > summary, .trace-workflow-accordion > summary { background: transparent; padding: var(--space-4) 0; border-radius: 0; }
.workflow-card > summary, .tool-section > summary, .settings-accordion > summary { margin: 0; width: 100%; background: transparent; }
/* All expandable section headings use the same visibly framed control. */
#app .tab-content details > summary {
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: var(--surface-raised); padding: var(--space-4); margin: 0;
    box-sizing: border-box; width: 100%; min-width: 0; min-height: 56px;
    white-space: normal; overflow-wrap: anywhere;
}
#app .tab-content details > summary:hover { border-color: var(--text-secondary); background: var(--surface-raised); }
#app .tab-content details[open] > summary { border-color: var(--border-color); background: var(--surface-raised); }
#tools .tool-section { background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: var(--space-5); overflow: visible; }
#tools .tool-card-grid { border: 0; padding: var(--space-4); }
#app .icp-history-body { border: 0; padding: var(--space-4); }
#app .icp-history-summary > div { min-width: 0; }
/* Workflow headings frame each group; expanded content follows the same inset. */
.workflow-page { --workflow-inset: var(--space-4); }
.workflow-page > .workflow-card, .workflow-page .trace-mixture-grid > .workflow-card {
    background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: var(--space-5); overflow: visible;
}
.workflow-page :is(.workflow-card > summary,.reef-manager-import-compact > summary,.trace-history-summary,.cr-routine-head) {
    background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    padding: var(--workflow-inset); margin: 0; width: 100%; min-width: 0; min-height: 56px; box-sizing: border-box;
}
.workflow-page :is(.workflow-card,.reef-manager-import-compact,.trace-history-block)[open] > summary { border-color: var(--border-color); background: var(--surface-raised); }
.workflow-page :is(.trace-osci-workflow-body,.trace-start-solution-body,.trace-calculator-body) { padding: var(--workflow-inset); }
.workflow-page .cr-routine-options { margin: var(--space-4) var(--workflow-inset); }
.workflow-page .cr-routine-description { margin: 0 var(--workflow-inset) var(--space-4); }
.workflow-page .cr-paste-card { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-card); padding: var(--workflow-inset); }
.workflow-page .cr-paste-card :is(h3,h4) { margin-top: 0; }
.workflow-page .trace-workstep { padding: var(--space-4) 0; }
.workflow-page .trace-step-head { padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-raised); }
.workflow-page .trace-mixture-card > :not(summary) { margin-inline: var(--workflow-inset); }
.workflow-page .trace-mixture-card > summary + div { padding-top: var(--space-4); }
.workflow-page .reef-manager-import-compact { border: 0; border-radius: 0; background: transparent; padding: 0 0 var(--space-4); }
.workflow-page .reef-manager-import-compact > :not(summary) { margin: var(--space-4) var(--workflow-inset) 0; }
.workflow-page .reef-manager-history-config .hint { margin-inline: 0; }
.workflow-page .trace-history-content { padding-inline: var(--workflow-inset); }
.workflow-page :is(summary,.cr-routine-head,.trace-step-head) :is(h3,p) { margin-top: 0; }
.workflow-page :is(summary,.cr-routine-head) p:last-child { margin-bottom: 0; }
/* Informational actions align their contents, not only the text itself. */
:is(.cr-routine-option,.trace-osci-workflow-step,.trace-history-status-action,.measurement-list-button,.icp-value-row,.global-search-result) { justify-content: start; text-align: start; white-space: normal; }
:is(.cr-routine-option,.trace-osci-workflow-step,.trace-history-status-action) { grid-template-columns: minmax(0,1fr); justify-items: start; align-content: start; }
:is(.cr-routine-option,.trace-osci-workflow-step) > :is(strong,small) { width: 100%; min-width: 0; white-space: normal; }
.status-badge, .trace-status-pill, .inventory-status, .warehouse-access-badge, .version-badge, .osci-system-note { border-radius: var(--radius-sm); box-shadow: none; font-size: var(--font-caption); font-weight: 500; }
.trace-history-status, .demo-mode-badge { border-radius: var(--radius-control); box-shadow: none; font-size: var(--font-caption); font-weight: 500; }
.demo-mode-badge { background: color-mix(in srgb,var(--status-warning) 8%,var(--surface-card)); color: var(--status-warning); border-color: var(--status-warning); }
body.demo-profile-active::before { display: none; }
.trace-history-status { color: var(--text-primary); text-align: left; }
.status-badge--success, .success-text, .status-ok { color: var(--status-success); }
.status-badge--warning, .warning-text { color: var(--status-warning); }
.status-badge--danger, .danger-text { color: var(--status-danger); }
.workflow-message, .tool-experimental-banner, .alert-box, .guide-warning { background: var(--surface-raised); border: 0; border-inline-start: 3px solid var(--accent); border-radius: var(--radius-sm); box-shadow: none; padding: var(--space-4); }
.workflow-message--warning, .tool-experimental-banner, .guide-warning { border-inline-start-color: var(--status-warning); }
.workflow-message--error { border-inline-start-color: var(--status-danger); }
.workflow-message--success { border-inline-start-color: var(--status-success); }
table { border-collapse: collapse; font-size: var(--font-small); }
th { color: var(--text-secondary); font-weight: 500; font-size: var(--font-caption); background: transparent; }
th, td { border-color: var(--border-color); padding: 12px; }
tbody tr { background: transparent; }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-raised) 45%, transparent); }
/* All application dialogs share one surface; their existing visibility remains intact. */
.modal-content, .app-dialog-panel, .global-search-panel, .cloud-transfer-panel, .legal-modal-content, .stock-choice-panel, .sync-dialog-panel { background: var(--surface-overlay); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--shadow-overlay); }
.global-search-head { background: transparent; border-bottom: 1px solid var(--border-color); }
.global-search-result { background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.global-search-results { grid-auto-rows: minmax(min-content,auto); }
.global-search-results .global-search-result { min-height: 96px; height: auto; overflow: visible; }
.toast { border-radius: var(--radius-md); background: var(--surface-overlay); color: var(--text-primary); border: 1px solid var(--border-color); box-shadow: var(--shadow-raised); }
.menu-backdrop, .app-dialog-backdrop, .global-search-backdrop, .modal { background: var(--overlay-backdrop); backdrop-filter: none; }
.menu-backdrop { z-index: 3000; }
/* Application chrome */
#appHeader { position: sticky; top: 0; z-index: 200; padding: 12px 24px; min-height: var(--header-height); background: var(--nav-bg); border-bottom: 1px solid var(--border-color); box-shadow: none; backdrop-filter: none; }
.header-main { display: flex; align-items: center; gap: 12px; }
.header-title-block { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex: 1; gap: 16px; min-width: 0; }
.header-title-container { display: flex; align-items: center; gap: 10px; min-width: 0; }
#appHeader h1 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.header-cloud-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.header-sync-indicator, .header-quick-sync-button { background: transparent; min-height: 36px; padding: 8px 10px; border-radius: var(--radius-md); font-size: var(--font-caption); }
.header-quick-sync-button { display: inline-flex; align-items: center; justify-content: center; }
.header-sync-indicator { display: flex; align-items: center; gap: 6px; }
.header-sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); }
.header-sync-indicator.is-connected .header-sync-dot { background: var(--status-success); }
.header-sync-indicator:is(.is-warning,.is-unsynced,.is-transferring) .header-sync-dot { background: var(--status-warning); }
.header-sync-indicator.is-offline .header-sync-dot { background: var(--text-secondary); }
.header-sync-indicator:is(.is-warning,.is-unsynced) { color: var(--status-warning); }
.header-sync-actions-wrap { position: relative; }
.header-quick-sync-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 205; display: grid; min-width: 180px; padding: 8px; background: var(--surface-overlay); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); gap: 4px; }
.header-quick-sync-menu[hidden] { display: none; }
.header-quick-sync-menu button { text-align: left; }
.header-icon-actions { display: flex; align-items: center; gap: 8px; }
.global-search-trigger span { font-size: 22px; line-height: 1; }
.header-sync-copy strong { display: none; }
.header-sync-copy small { font-size: var(--font-caption); }
.version-badge { color: var(--text-secondary); background: transparent; border: 1px solid var(--border-color); padding: 2px 6px; }
.subtitle { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--text-secondary); min-width: 0; }
.subtitle strong { white-space: normal; overflow-wrap: anywhere; }
.subtitle span { font-size: var(--font-caption); text-transform: none; letter-spacing: 0; }
.subtitle strong { font-size: var(--font-caption); font-weight: 500; }
.community-project-badge { color: var(--text-secondary); border: 0; background: transparent; font-size: 10px; padding: 8px 0; line-height: 1.5; white-space: normal; }
.menu-toggle, .global-search-trigger { width: 40px; height: 40px; min-height: 40px; border: 1px solid var(--border-color); background: transparent; padding: 8px; border-radius: var(--radius-md); }
.menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 5px; }
.menu-toggle .bar { display: block; width: 100%; height: 2px; background: var(--text-secondary); }
#main-nav.nav-menu { position: fixed; display: flex; flex-direction: column; gap: 16px; background: var(--nav-bg); border-color: var(--border-color); box-shadow: none; overflow-y: auto; }
.nav-menu-header { display: flex; justify-content: space-between; align-items: center; }
.nav-menu-header span { font-size: var(--font-section); font-weight: 600; }
.close-menu { width: 40px; height: 40px; padding: 0; }
#main-nav .nav-support-button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%; min-height: 56px; padding: 14px 16px; font-size: var(--font-body); font-weight: 600; text-align: center; }
#main-nav .nav-links { display: grid; gap: 8px; padding: 0; }
#main-nav .nav-links button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--font-small); min-height: 40px; padding: 10px; justify-content: flex-start; }
#main-nav .nav-links button:hover { background: var(--surface-raised); color: var(--text-primary); transform: none; }
#main-nav .nav-links button.active, #main-nav .nav-links button[aria-current="page"] { background: var(--surface-raised); color: var(--accent); border-color: transparent; box-shadow: none; }
.nav-group-label { font-size: 10px; font-weight: 500; color: var(--text-secondary); }
.nav-menu-utility { display: grid; gap: 8px; }
.nav-menu-utility > * { width: 100%; text-align: left; }
.nav-menu-utility .community-project-badge { order: 5; }
.nav-menu-utility .header-quick-sync-button { justify-content: flex-start; }
#app { width: min(var(--content-max), 100%); margin-inline: auto; }
.tab-content { padding: var(--space-5); max-width: 100%; }
.tab-content.active { animation: none; }
:is(.warehouse-page-head,.dashboard-page-head,.settings-page-head,.section-page-head,.workflow-page-head,.logbook-page-header) { background: transparent; border: 0; box-shadow: none; padding: 0 0 var(--space-5); }
:is(.warehouse-page-head,.dashboard-page-head,.settings-page-head,.section-page-head,.workflow-page-head,.logbook-page-header) h2 { font-size: var(--font-heading); font-weight: 600; line-height: 1.3; }
:is(.section-eyebrow,.workflow-eyebrow,.inventory-category,.settings-group-label span) { font-size: var(--font-caption); font-weight: 500; letter-spacing: 0; color: var(--text-secondary); }
.osci-system-note { color: var(--text-secondary); background: transparent; border: 0; padding-inline: 0; font-weight: 400; }
.inventory-card--lean { padding: 18px; }
.inventory-card-head { position: static; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; background: transparent; padding: 0; border: 0; animation: none; }
.inventory-card-head h3 { margin: 2px 0 0; font-size: var(--font-section); }
.inventory-stock-row { margin-block: 18px; }

/* Dense inventory overview; booking actions stay inside the opened product. */
#lager .lager-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
}
#lager .lager-toolbar .toolbar-divider { display: none; }
#lager .lager-toolbar > .toolbar-field:first-child { grid-column: 1 / -1; }
#lager :is(.lager-toolbar, .inventory-quick-booking) .toolbar-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 6px;
    height: auto;
    padding: 0;
    background: transparent;
}
#lager :is(.lager-toolbar, .inventory-quick-booking) label {
    position: static;
    width: auto;
    height: 16px;
    margin: 0;
    clip: auto;
    overflow: visible;
    font-size: 12px;
    line-height: 16px;
}
#lager :is(.lager-toolbar, .inventory-quick-booking) :is(input, select) {
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    margin: 0;
    box-sizing: border-box;
}
#lager .toolbar-field { min-width: 0; width: 100%; }
#lager .warehouse-page-head { padding-block: 0 8px; }
#lager .warehouse-control-card, #lager .warehouse-filter-panel { padding-block: 12px; }
#lager .warehouse-filter-foot { gap: 12px; margin-block: 12px; }
#lager .inventory-quick-booking {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 8px;
    padding-block: 12px;
    border-top: 1px solid var(--border-color);
}
#lager .inventory-quick-booking select { width: 100%; min-width: 0; }
#lager .inventory-quick-booking:not(:has(button:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
#lager .inventory-quick-booking button { min-height: 44px; padding: 10px 12px; }
#lager-container .inventory-card-grid { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; }
#lager-container .inventory-card--lean {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    min-width: 0;
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-inline-start: 3px solid color-mix(in srgb, var(--stock-color) 70%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#lager-container .inventory-card--lean.card-warning { border-color: var(--border-color); border-inline-start-color: color-mix(in srgb, var(--stock-color) 70%, transparent); background: transparent; }
#lager-container .inventory-card--lean:hover { background: var(--surface-card); }
#lager-container .inventory-product-toggle {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 6px 4px 6px 10px;
    text-align: start;
    white-space: normal;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
#lager-container .inventory-product-toggle:hover:not(:disabled) { background: transparent; }
#lager-container .inventory-product-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
#lager-container .inventory-product-copy strong { min-width: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
#lager-container .inventory-stock-row { display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-width: max-content; margin: 0; }
#lager-container .inventory-stock-row .stock { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
#lager-container .stock-status { border-inline-start: 3px solid var(--stock-color); padding-inline-start: 6px; font-size: 12px; white-space: nowrap; }
#lager-container .inventory-symbol { flex: 0 0 auto; padding: 2px 5px; border: 0; border-radius: 4px; background: var(--surface-raised); font-size: 11px; }
#lager-container .product-history { display: contents; }
#app #lager-container .product-history > summary {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 22px;
    line-height: 1;
    list-style: none;
}
#app #lager-container .product-history > summary::-webkit-details-marker { display: none; }
#app #lager-container .product-history > summary > span { display: block; transition: transform 120ms ease; }
#app #lager-container .product-history[open] > summary > span { transform: rotate(90deg); }
#lager-container .inventory-history-body { grid-column: 1 / -1; min-width: 0; padding: 0 8px 12px 10px; }
#lager-container .inventory-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; }
#lager-container .inventory-card-actions button { min-height: 44px; }
#lager-container .inventory-meter { grid-column: 1 / -1; padding: 0 10px 6px; }
#lager-container .inventory-meter meter { display: block; width: 100%; height: 6px; accent-color: var(--stock-color); }
#lager-container .inventory-meter small { display: block; color: var(--text-secondary); font-size: 11px; }
#lager-container .category-title { margin-block: 12px 8px; font-size: 13px; }
@media (max-width: 700px) {
    #lager .lager-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #lager .lager-toolbar > .toolbar-field:first-child { grid-column: 1 / -1; }
    #lager .inventory-quick-booking { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #lager .inventory-quick-booking .toolbar-field { grid-column: 1 / -1; }
}

/* Match the compact product-list layout while keeping management actions available. */
#lager .warehouse-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 0 0 14px;
    border: 0;
}
#lager .warehouse-page-head h2 { margin: 0; font-size: clamp(22px, 1.5rem, 26px); }
#lager .warehouse-page-head > strong { color: var(--text-secondary); font-size: var(--font-body); font-weight: 400; text-align: end; }
#lager .warehouse-page-head { flex-direction: row; }
#lager .warehouse-manager { margin: 0 0 12px; border: 0; padding: 0; }
#lager .warehouse-manager > summary,
#lager .warehouse-quick-filters > summary,
#lager #inventoryQuickBooking > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-caption);
    list-style: none;
}
#app #lager .warehouse-manager > summary,
#app #lager .warehouse-quick-filters > summary { border: 0; border-radius: 0; background: transparent; }
#app #lager .warehouse-manager > summary:hover,
#app #lager .warehouse-quick-filters > summary:hover { border-color: transparent; background: transparent; }
#lager .warehouse-manager > summary::-webkit-details-marker,
#lager .warehouse-quick-filters > summary::-webkit-details-marker,
#lager #inventoryQuickBooking > summary::-webkit-details-marker { display: none; }
#lager :is(.warehouse-manager,.warehouse-quick-filters,#inventoryQuickBooking) > summary::after { content: '⌄'; color: var(--text-secondary); }
#lager :is(.warehouse-manager,.warehouse-quick-filters,#inventoryQuickBooking)[open] > summary::after { content: '⌃'; }
#lager .warehouse-manager[open] .warehouse-control-card { margin: 0; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--surface-card); }
#lager .warehouse-manager .warehouse-control-head { margin-bottom: 8px; }
#lager .warehouse-manager .warehouse-meta { font-size: var(--font-caption); }
#lager .warehouse-manager .osci-system-note { margin-top: 8px; font-size: var(--font-caption); }
#lager .warehouse-filter-panel { margin: 0; padding: 0; border: 0; }
#lager .lager-toolbar { gap: 8px; }
#lager .lager-toolbar .toolbar-field { gap: 4px; }
#lager .lager-toolbar label { color: var(--text-secondary); font-size: var(--font-caption); }
#lager .lager-toolbar :is(input,select) { height: 44px; min-height: 44px; }
#lager .warehouse-quick-filters { margin-top: 4px; border: 0; padding: 0; }
#lager .warehouse-quick-filters[open] .lager-filter-chips { display: flex; gap: 8px; padding: 0 0 8px; }
#lager .warehouse-quick-filters .lager-filter-chips button { flex: 1 1 0; min-height: 38px; }
#lager #inventoryQuickBooking { display: block; margin-top: 8px; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-control); background: transparent; }
#lager #inventoryQuickBooking > summary { min-height: 46px; padding: 8px 14px; color: var(--text-primary); font-size: var(--font-body); }
#lager #inventoryQuickBooking[open] > summary { border-bottom: 1px solid var(--border-color); }
#lager .inventory-quick-booking-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 8px; padding: 10px; }
#lager .inventory-quick-booking-fields .toolbar-field { display: grid; gap: 4px; }
#lager .inventory-quick-booking-fields label { color: var(--text-secondary); font-size: var(--font-caption); }
#lager .inventory-quick-booking-fields button { min-height: 44px; }
#lager .inventory-list-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 12px 0 0; padding: 0 0 10px; border-bottom: 1px solid var(--border-color); }
#lager .inventory-list-meta #stock-alerts { min-width: 0; }
#lager .inventory-list-meta .warehouse-filter-result { justify-content: flex-end; }
#lager #stock-alerts .alert-summary { display: block; margin: 0; padding: 0; border: 0; background: transparent; color: var(--status-warning); font-size: var(--font-body); }
#lager #stock-alerts details.alert-summary { border: 0; }
#lager #stock-alerts .alert-title { display: flex; justify-content: flex-start; gap: 5px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--status-warning); font-size: var(--font-body); list-style: none; }
#lager #stock-alerts .alert-title::-webkit-details-marker { display: none; }
#lager #stock-alerts .alert-title > span:last-child { display: none; }
#lager #stock-alerts .alert-row { margin-top: 8px; }
#lager-container .inventory-category-section .category-title { margin: 12px 0 4px; color: var(--text-secondary); font-size: var(--font-caption); font-weight: 500; text-transform: uppercase; }
#lager-container .inventory-card--lean { border-inline-start: 0 !important; }
#lager-container .inventory-card--lean[data-product-color="blue"] { --inventory-product-color: var(--product-blue); }
#lager-container .inventory-card--lean[data-product-color="violet"] { --inventory-product-color: var(--product-violet); }
#lager-container .inventory-card--lean[data-product-color="lilac"] { --inventory-product-color: var(--product-lilac); }
#lager-container .inventory-card--lean[data-product-color="gray"] { --inventory-product-color: var(--product-gray); }
#lager-container .inventory-card--lean[data-product-color="green"] { --inventory-product-color: var(--product-green); }
#lager-container .inventory-card--lean[data-product-color="orange"] { --inventory-product-color: var(--product-orange); }
#lager-container .inventory-card--lean[data-product-color="pale-yellow"] { --inventory-product-color: var(--product-pale-yellow); }
#lager-container .inventory-color-mark { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--inventory-product-color, var(--border-color)); }
#lager-container .inventory-symbol { color: var(--inventory-product-color, var(--accent)); background: color-mix(in srgb, var(--inventory-product-color, var(--accent)) 12%, var(--surface-raised)); }
#lager-container .inventory-favorite-marker { flex: 0 0 auto; color: var(--status-warning); font-size: 14px; line-height: 1; }
@media (max-width: 520px) {
    #lager .inventory-quick-booking-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #lager .inventory-quick-booking-fields .toolbar-field { grid-column: 1 / -1; }
}

/* Dense summary headers need room to wrap on narrow phones. */
@media (max-width: 520px) {
    #trace-export .trace-history-summary {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }
    #trace-export .trace-history-summary > span:first-child,
    #trace-export .trace-history-summary-side { width: 100%; min-width: 0; }
    #trace-export .trace-history-summary-side {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 6px 10px;
    }
    #trace-export .trace-history-summary small,
    #trace-export .trace-history-count { flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
    #icp .icp-history-summary { align-items: stretch; flex-direction: column; gap: 8px; }
    #icp .icp-history-summary > div,
    #icp .icp-history-summary-side { width: 100%; min-width: 0; }
    #icp .icp-history-summary-side { align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
    #icp .icp-history-summary-meta { white-space: normal; overflow-wrap: anywhere; }
    #tools .tool-section-summary > span:first-child { flex: 1 1 auto; min-width: 0; }
}

#app #cr-export .workflow-page-head { margin-bottom: var(--space-2); padding-bottom: var(--space-2); }
#app #cr-export .cr-mixing-overview-card { overflow: hidden; margin: 0 0 var(--space-4); padding: 0; }
#app #cr-export .cr-mixing-overview-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 14px 16px;
    list-style: none;
    border: 0;
    border-radius: 0;
    background: transparent;
}
#app #cr-export .cr-mixing-overview-card[open] > .cr-mixing-overview-summary { border-bottom: 1px solid var(--border-color); }
#app #cr-export .cr-mixing-overview-summary::-webkit-details-marker,
#app #cr-export .cr-mixing-batch > summary::-webkit-details-marker { display: none; }
#app #cr-export .cr-mixing-overview-summary > span:first-child,
#app #cr-export .cr-mixing-batch-title { display: grid; gap: 3px; min-width: 0; }
#app #cr-export .cr-mixing-overview-summary strong,
#app #cr-export .cr-mixing-batch-title strong { color: var(--text-primary); font-size: var(--font-section); }
#app #cr-export .cr-mixing-overview-summary small,
#app #cr-export .cr-mixing-batch-title small { color: var(--text-secondary); font-size: var(--font-caption); line-height: 1.4; }
#app #cr-export .cr-mixing-overview-count,
#app #cr-export .cr-mixing-progress { flex: 0 0 auto; color: var(--text-secondary); font-size: var(--font-caption); font-weight: 600; text-align: end; }
#app #cr-export .cr-mixing-overview-content { display: grid; gap: 10px; padding: 0 12px 12px; }
#app #cr-export .cr-mixing-empty { margin: 0; padding: 4px; color: var(--text-secondary); font-size: var(--font-small); }
#app #cr-export .cr-mixing-batches { display: grid; gap: 8px; min-width: 0; }
#app #cr-export .cr-mixing-batch { min-width: 0; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--surface-card); }
#app #cr-export .cr-mixing-batch > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 54px;
    padding: 10px 12px;
    list-style: none;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
#app #cr-export .cr-mixing-batch > summary:hover,
#app #cr-export .cr-mixing-batch[open] > summary { border: 0; border-radius: 0; background: transparent; }
#app #cr-export .cr-mixing-batch > summary::after { content: '⌄'; flex: 0 0 auto; color: var(--text-secondary); }
#app #cr-export .cr-mixing-batch[open] > summary::after { content: '⌃'; }
#app #cr-export .cr-mixing-batch.is-complete > summary { background: color-mix(in srgb, var(--status-success) 7%, var(--surface-card)); }
#app #cr-export .cr-mixing-progress-track { height: 6px; overflow: hidden; margin: 0 12px; border-radius: 999px; background: var(--border-color); }
#app #cr-export .cr-mixing-progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--status-success); transition: width 180ms ease; }
#app #cr-export .cr-mixing-checklist { display: grid; padding: 4px 12px 10px; }
#app #cr-export .cr-mixing-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 52px;
    border-top: 1px solid var(--border-color);
    cursor: pointer;
}
#app #cr-export .cr-mixing-item > input { width: 20px; height: 20px; margin: 0; }
#app #cr-export .cr-mixing-item-name { display: grid; min-width: 0; }
#app #cr-export .cr-mixing-item-name strong { overflow-wrap: anywhere; font-size: var(--font-small); font-weight: 500; }
#app #cr-export .cr-mixing-item-name small { color: var(--text-secondary); font-size: var(--font-caption); }
#app #cr-export .cr-mixing-item-state { color: var(--text-secondary); font-size: var(--font-caption); }
#app #cr-export .cr-mixing-item.is-mixed .cr-mixing-item-state { color: var(--status-success); }
#app #cr-export .cr-mixing-item.is-mixed .cr-mixing-item-name { opacity: .72; }
#app #cr-export .cr-mixing-item.has-shortage .cr-mixing-shortage { color: var(--status-warning); font-weight: 600; }
#app #cr-export .cr-mixing-item > input:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 420px) {
    #app #cr-export .cr-mixing-overview-summary { align-items: flex-start; flex-direction: column; gap: 5px; }
    #app #cr-export .cr-mixing-overview-summary > span,
    #app #cr-export .cr-mixing-overview-count { width: 100%; min-width: 0; text-align: start; }
    #app #cr-export .cr-mixing-batch > summary { align-items: flex-start; }
    #app #cr-export .cr-mixing-progress { white-space: normal; overflow-wrap: anywhere; text-align: end; }
}
.inventory-card--lean .stock { background: transparent; padding: 0; color: var(--text-primary); font-size: var(--font-value); font-weight: 500; }
.inventory-card--lean .inventory-card-actions button { background: transparent; color: var(--text-primary); border-color: var(--border-color); }
.inventory-symbol { background: var(--surface-raised); color: var(--accent); border: 0; border-radius: var(--radius-sm); }
.inventory-card--lean .product-history { border: 0; padding: 0; color: var(--text-secondary); }
.inventory-card--lean .product-history summary { font-size: var(--font-caption); color: var(--text-secondary); }
.settings-group-nav { background: transparent; border: 0; border-bottom: 1px solid var(--border-color); border-radius: 0; box-shadow: none; padding: 8px 0; position: static; }
.settings-group-nav button { border: 0; background: transparent; color: var(--text-secondary); padding: 8px 12px; }
#app #tools .balling-powder-card { min-width: 0; }
#app #tools .balling-powder-card .calculator-input-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
#app #tools .balling-powder-card .input-group { min-width: 0; }
#app #tools .balling-powder-card .input-group[hidden] { display: none; }
#app #tools .balling-calc-result { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
#app #tools .balling-calc-result .tool-row { min-width: 0; }
#app #tools .balling-calc-result .field-help { margin: 0; color: var(--text-secondary); line-height: 1.5; }
#app #tools .balling-preparation { min-width: 0; padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-raised); }
#app #tools .balling-preparation h4 { margin: 0 0 var(--space-2); }
#app #tools .balling-preparation ul { margin: 0; padding-left: 1.25rem; color: var(--text-secondary); }
#app #tools .balling-preparation li + li { margin-top: var(--space-1); }
#app #tools .balling-preparation .field-help { margin-top: var(--space-2); }
#app #tools .balling-mix-history { margin-top: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--surface-card); }
#app #tools .balling-mix-history > summary { padding: var(--space-3); color: var(--text-primary); cursor: pointer; }
#app #tools .balling-mix-history-list { padding: 0 var(--space-3) var(--space-2); }
#app #tools .balling-mix-history-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-color); }
#app #tools .balling-mix-history-row > span { display: grid; gap: var(--space-1); min-width: 0; }
#app #tools .balling-mix-history-row small { color: var(--text-secondary); overflow-wrap: anywhere; }
#app #tools .balling-mix-history-row button { flex: 0 0 auto; }
.settings-group-nav button.active { color: var(--accent); background: var(--surface-raised); }
.settings-control-center { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin-bottom: 8px; }
.settings-search-field { background: var(--app-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0 12px; }
.settings-search-field input { border: 0; background: transparent; box-shadow: none; }
.settings-search-field input:focus-visible { outline-offset: -3px; }
.settings-page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-page-actions button { flex: 0 1 auto; width: auto; }
#einstellungen > .card { margin: 0; padding: 0; border: 0; }
#einstellungen > .card > .settings-accordion { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--border-color); }
.settings-accordion-body { padding: 16px 0 24px; }
.settings-group-label { margin: 24px 0 0; }
.settings-group-label::before { display: none; }
.trace-history-list, .trace-history-row { min-width: 0; max-width: 100%; }
.trace-history-row > * { min-width: 0; }
.trace-history-head-actions, .trace-history-add-button { max-width: 100%; min-width: 0; }
.trace-history-status-action { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
    .trace-history-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .trace-history-date, .trace-history-actions { grid-column: 1 / -1; }
    .trace-history-status-action { grid-column: 1 / -1; justify-self: start; }
    .trace-history-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .trace-history-actions button { flex: 1 1 120px; min-width: 0; }
}
.settings-group-label { border-bottom: 1px solid var(--border-color); padding-bottom: 12px; }
.settings-group-label span { background: transparent; padding: 0; font-size: var(--font-section); color: var(--text-primary); }
.settings-accordion-summary-main h3, .settings-accordion-summary-main strong { font-size: var(--font-section); }
.settings-accordion-hint { width: 24px; height: 24px; flex-basis: 24px; border: 0; background: transparent; border-radius: 0; color: var(--text-secondary); }
.settings-group-label span { border: 0; text-transform: none; }
.trace-history-row-inactive { opacity: 1; color: var(--text-secondary); }
.dashboard-hero { background: transparent; border: 0; border-bottom: 1px solid var(--border-color); padding: 0 0 24px; border-radius: 0; }
.guide-hero, .guide-card, .legal-card { background: transparent; border-radius: 0; border: 0; border-bottom: 1px solid var(--border-color); box-shadow: none; }
.guide-shell, .legal-shell { max-width: 1040px; }
.guide-toc { background: transparent; border: 0; border-bottom: 1px solid var(--border-color); box-shadow: none; border-radius: 0; }
.guide-feature-grid article, .legal-address-card { background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); }
@media (min-width: 1024px) {
    #main-nav.nav-menu { position: fixed; top: var(--measured-header-height, var(--header-height)); left: 0; right: auto; bottom: 0; width: var(--nav-width); height: calc(100dvh - var(--measured-header-height, var(--header-height))); transform: none; padding: 20px 12px; border: 0; border-right: 1px solid var(--border-color); overflow-y: auto; display: flex; flex-direction: column; }
    #main-nav .nav-menu-header { display: none; }
    #main-nav .nav-links { display: grid; }
    #main-nav .nav-menu-utility { display: grid; }
    body:has(#app) #app { margin-left: var(--nav-width); margin-right: 0; width: calc(100% - var(--nav-width)); max-width: 1500px; }
    body:has(#app) .app-footer { margin-left: var(--nav-width); }
    #appHeader .menu-toggle { display: none; }
    .mobile-bottom-nav { display: none; }
    #main-nav .nav-work-group, #main-nav .nav-utility-group { display: grid; gap: 4px; }
}
@media (max-width: 1023px) {
    #appHeader { padding: 12px 16px; }
    .header-title-block { flex-wrap: wrap; gap: 6px; }
    .header-cloud-bar { gap: 6px; }
    #main-nav.nav-menu { top: 0; right: -300px; left: auto; bottom: 0; width: min(300px, 90vw); height: 100dvh; padding: 20px; z-index: 3001; border-left: 1px solid var(--border-color); transition: transform 180ms ease; }
    #main-nav.nav-menu.open { transform: translateX(-300px); }
    #app { width: 100%; }
    .nav-work-group, .nav-utility-group { display: grid; gap: 4px; }
}
.mobile-bottom-nav { display: none; }
body.menu-open .mobile-bottom-nav { visibility: hidden; pointer-events: none; }
.design-reveal { opacity: 1; transform: none; transition: none; }
@media (max-width: 767px) {
    body:has(#app) { padding-bottom: calc(var(--mobile-nav-height) + var(--safe-bottom)); }
    .tab-content { padding: 20px 16px 28px; }
    .card { padding: var(--space-4); }
    .workflow-card, .settings-card, .tool-section { padding: var(--space-4) 0; }
    #appHeader { display: grid; grid-template-columns: minmax(0,1fr) 94px; gap: 4px 8px; padding: 10px 16px; }
    #appHeader .header-main, #appHeader .header-title-block { display: contents; }
    #appHeader .header-title-container { grid-column: 1; grid-row: 1; gap: 4px; flex-wrap: nowrap; }
    #appHeader .header-title-container .version-badge { font-size: 10px; padding: 2px 4px; }
    #appHeader .demo-mode-badge { font-size: 10px; padding: 3px 6px; min-height: 24px; }
    #appHeader .header-icon-actions { grid-column: 2; grid-row: 1; justify-content: flex-end; }
    #appHeader .header-cloud-bar { grid-column: 2; grid-row: 2; display: flex; flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
    #appHeader .subtitle { grid-column: 1; grid-row: 2; margin: 0; }
    #appHeader .subtitle > span { display: none; }
    #appHeader h1 { font-size: 18px; }
    #appHeader .header-main { align-items: center; }
    .header-title-block { flex: 1; }
    #appHeader .header-cloud-bar { width: auto; }
    .header-sync-indicator { padding: 4px 8px; min-height: 28px; border: 0; }
    .header-quick-sync-button { min-height: 28px; padding: 4px 8px; }
    #appHeader :is(.header-sync-indicator,.header-quick-sync-button) { min-height: 28px; padding: 4px; font-size: 11px; }
    #appHeader .header-sync-indicator { gap: 4px; padding-inline: 2px; }
    #appHeader .header-sync-copy small { font-size: 10px; }
    .header-sync-copy small { font-size: 11px; }
    .header-title-container { gap: 6px; flex-wrap: wrap; }
    .header-icon-actions { gap: 6px; }
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) { font-size: 16px; }
    :is(button,.btn,summary) { min-height: 44px; }
    .mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; border: 0; border-top: 1px solid var(--border-color); border-radius: 0; background: var(--nav-bg); padding: 8px 8px calc(8px + var(--safe-bottom)); min-height: var(--mobile-nav-height); box-shadow: none; backdrop-filter: none; z-index: 100; }
    .mobile-bottom-nav button { border: 0; padding: 6px 2px; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); min-height: 48px; display: flex; flex-direction: column; gap: 4px; }
    .mobile-bottom-nav button.active, .mobile-bottom-nav button[aria-current="page"] { background: var(--surface-raised); color: var(--accent); box-shadow: none; }
    .mobile-bottom-nav .mobile-nav-label { display: block; font-size: 10px; font-weight: 500; line-height: 1.3; white-space: normal; }
    .mobile-bottom-nav .nav-icon { width: 20px; height: 20px; }
    .inventory-card--lean .inventory-card-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .inventory-card--lean .inventory-card-actions button { font-size: var(--font-caption); padding: 8px; }
    .modal-content, .app-dialog-panel, .global-search-panel { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

.supply-profile-fieldset {
    min-width: 0;
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
}
.supply-profile-fieldset legend { padding-inline: var(--space-2); font-weight: 600; }
.supply-profile-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--space-2) var(--space-4); }
.supply-profile-option { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; }
.supply-profile-option input { accent-color: var(--accent); }
.supply-profile-aquarium { margin-bottom: var(--space-3); }
.sangokai-balance-calculators { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
#tools .tool-card-grid > .tool-compact-card[data-tool-id="sangokai-mengen-und-mischen"] { grid-column: 1 / -1; width: 100%; max-width: none; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; container: sangokai / inline-size; }
.tool-compact-card[data-tool-id="sangokai-mengen-und-mischen"] > .workflow-eyebrow { display: block; margin: 0 var(--space-1) var(--space-3); color: var(--accent); font-size: var(--font-caption); font-weight: 700; }
.sangokai-submenu { margin-top: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--surface-raised); overflow: hidden; }
.sangokai-submenu > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; padding: var(--space-4); cursor: pointer; touch-action: manipulation; user-select: none; list-style: none; }
.sangokai-submenu > summary::-webkit-details-marker { display: none; }
.sangokai-submenu > summary > span:first-child { display: grid; gap: var(--space-1); min-width: 0; }
.sangokai-submenu > summary strong { font-size: var(--font-body); font-weight: 600; }
.sangokai-submenu > summary small { color: var(--text-secondary); font-size: var(--font-small); line-height: 1.4; overflow-wrap: anywhere; }
.sangokai-submenu > summary .settings-accordion-hint { flex: 0 0 18px; }
.sangokai-submenu-content { min-width: 0; padding: 0 var(--space-4) var(--space-4); }
.sangokai-submenu-content > .hint:first-child { margin-top: 0; }
.sangokai-submenu-content > .sangokai-calculator-panel:first-child { margin-top: 0; }
.sangokai-calculator-panel { min-width: 0; padding: var(--space-4); border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--surface-raised); }
.sangokai-calculator-panel h4 { margin: 0 0 var(--space-3); }
#tools .sangokai-calculator-panel .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
#tools .sangokai-calculator-panel .tool-grid > .input-group:last-child { grid-column: 1 / -1; }
#tools .sangokai-dilution-panel .tool-grid > .input-group:last-child { grid-column: auto; }
.sangokai-calculator-panel .tool-result { min-height: 52px; margin-block: var(--space-3); }
.sangokai-calculator-panel .tool-result small { display: block; margin-top: var(--space-1); color: var(--text-secondary); }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; margin-bottom: 6px; }
.field-label-row > label { min-width: 0; margin: 0; }
.field-info { position: relative; z-index: 5; flex: 0 0 auto; }
#app .tab-content details.field-info > summary,
#app .tab-content details.field-info[open] > summary { display: grid; place-items: center; width: 26px; min-width: 26px; height: 26px; min-height: 26px; padding: 0; margin: 0; border: 1px solid var(--border-color); border-radius: 50%; background: var(--surface-card); color: var(--text-secondary); font-size: var(--font-caption); font-weight: 700; line-height: 1; list-style: none; cursor: pointer; }
#app .tab-content details.field-info > summary::-webkit-details-marker { display: none; }
#app .tab-content details.field-info > summary:hover,
#app .tab-content details.field-info > summary:focus-visible { border-color: var(--accent); color: var(--accent); }
.field-info > p { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 8; width: min(280px, calc(100vw - 56px)); margin: 0; padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-raised, 0 8px 24px rgb(0 0 0 / 28%)); font-size: var(--font-caption); font-weight: 400; line-height: 1.5; }
.sangokai-dilution-panel { margin-top: var(--space-4); }
#tools .tool-tile-card { scroll-margin-top: calc(var(--measured-header-height, var(--header-height)) + 12px); }
#app #tools .tool-card-grid > .dose-tracker-card:not(.tool-tile-collapsed) { grid-column: 1 / -1; width: 100%; max-width: none; }
.dose-tracker-card { container: dosing / inline-size; }
.dose-tracker-panel { min-width: 0; }
#tools .dose-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--space-3); }
#tools .dose-primary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#tools .dose-fields > .input-group { grid-column: auto; min-width: 0; margin-bottom: 0; }
#app #tools .dose-tracker-panel .input-group :is(input,select) { width: 100%; min-width: 0; height: 44px; min-height: 44px; margin: 0; }
#app #tools .dose-tracker-panel .tool-result { max-width: none; }
#app #tools .dose-tracker-card > h3 { flex-wrap: wrap; }
#app #tools .dose-tracker-card > h3 .tool-tile-toggle { justify-content: flex-start; }
.dose-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.dose-actions button { flex: 0 1 auto; min-height: 44px; }
.dose-solution-context { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-3); }
.dose-solution-context .field-help { flex: 1 1 240px; margin: 0; }
.dose-solution-context button { min-height: 40px; }
.dose-product-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.app-dialog.is-dose-product .app-dialog-panel { width: min(100%, 640px); max-width: 640px; }
.app-dialog-fields.has-dose-product-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--space-3); }
.has-dose-product-fields > .form-field { min-width: 0; }
.has-dose-product-fields > .dose-product-full, .dose-product-preview { grid-column: 1 / -1; }
#appDialog .has-dose-product-fields :is(input, select) { height: 44px; min-height: 44px; margin: 0; font-size: var(--font-body); }
.has-dose-product-fields .field-description { overflow-wrap: anywhere; }
.dose-product-preview { margin: var(--space-2) 0 0; padding-block: var(--space-3); border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: var(--font-small); line-height: 1.5; overflow-wrap: anywhere; }
.dose-product-preview.is-valid { color: var(--accent); }
.dose-balling-batch { margin-top: var(--space-3); padding-block: var(--space-3); border-block: 1px solid var(--border-color); }
.dose-balling-batch > strong { display: block; margin-bottom: var(--space-3); }
.dose-calculation-warning { color: var(--status-warning); }
.sangokai-calculator-panel .tool-result { max-width: none; }
.tool-compact-card[data-tool-id="sangokai-mengen-und-mischen"] .sangokai-submenu { margin-top: var(--space-3); }
.dose-options { margin-top: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--surface-card); }
.dose-options > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; padding: var(--space-3); cursor: pointer; list-style: none; }
.dose-options > summary::-webkit-details-marker { display: none; }
.dose-options > summary > span:first-child { display: grid; gap: var(--space-1); min-width: 0; }
.dose-options > summary strong { font-size: var(--font-body); font-weight: 600; }
.dose-options > summary small { color: var(--text-secondary); font-size: var(--font-small); line-height: 1.4; overflow-wrap: anywhere; }
.dose-options .dose-fields { padding: 0 var(--space-3); }
.dose-options > .field-help { margin: 0; padding: 0 var(--space-3) var(--space-3); }
.dose-options[open] > summary { border-bottom: 1px solid var(--border-color); }
.dose-history { margin-top: var(--space-4); }
.dose-history h5 { margin: 0 0 var(--space-2); }
.dose-history-list { display: grid; }
.dose-trend { min-width: 0; margin: var(--space-4) 0; padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--surface-card); }
.dose-trend-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.dose-trend-head span, .dose-trend .field-help { color: var(--text-secondary); font-size: var(--font-caption); }
.dose-trend svg { display: block; width: 100%; height: auto; margin-top: var(--space-2); overflow: visible; }
.dose-grid { stroke: var(--border-color); stroke-width: 1; stroke-dasharray: 3 5; }
.dose-axis-label, .dose-target-label { fill: var(--text-secondary); font-size: 12px; }
.dose-target-line { stroke: var(--warning); stroke-width: 2; stroke-dasharray: 6 5; }
.dose-trend-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dose-draw 700ms ease-out forwards; }
.dose-trend-point { fill: var(--accent); stroke: var(--surface-card); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: dose-point-in 360ms ease-out both; }
.dose-trend-point:nth-of-type(2) { animation-delay: 50ms; }
.dose-trend .field-help { margin: 0; }
@keyframes dose-draw { to { stroke-dashoffset: 0; } }
@keyframes dose-point-in { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dose-trend-line, .dose-trend-point { animation: none; stroke-dashoffset: 0; } }
.dose-history-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; padding: var(--space-3) 0; border-top: 1px solid var(--border-color); }
.dose-history-row > span { display: grid; gap: var(--space-1); min-width: 0; }
.dose-history-row small { color: var(--text-secondary); overflow-wrap: anywhere; }
.dose-history-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 0 0 auto; }
.dose-history-actions button { min-width: 96px; }
.sangokai-calculation-note { margin-top: var(--space-4); }
@media (max-width: 480px) { .dose-axis-label, .dose-target-label { font-size: 30px; } }
.sangokai-calculation-note span { display: block; }
.resource-inline-link { display: inline-block; margin: 0 var(--space-3) var(--space-1) 0; color: var(--accent-strong); }
@media (max-width: 480px) { .app-dialog-fields.has-dose-product-fields { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { #appDialog .has-dose-product-fields :is(input, select) { font-size: 16px; } }
@media (max-width: 700px) {
    .sangokai-balance-calculators { grid-template-columns: minmax(0, 1fr); }
    .supply-profile-fieldset { padding: var(--space-3); }
    .dose-history-row { align-items: stretch; flex-direction: column; gap: var(--space-2); }
    .dose-history-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dose-history-actions button { min-width: 0; width: 100%; }
}
@container sangokai (max-width: 900px) {
    .sangokai-balance-calculators { grid-template-columns: minmax(0, 1fr); }
}
@container sangokai (max-width: 520px) {
    #tools .sangokai-calculator-panel .tool-grid { grid-template-columns: minmax(0, 1fr); }
    #tools .sangokai-calculator-panel .tool-grid > .input-group:last-child { grid-column: auto; }
}
@container dosing (max-width: 700px) { #tools .dose-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container dosing (max-width: 480px) {
    #tools .dose-fields, #tools .dose-primary-grid { grid-template-columns: minmax(0, 1fr); }
    #app #tools .dose-tracker-card:not(.tool-tile-collapsed) > h3 .tool-tile-toggle { flex-basis: 100%; }
    .dose-actions button { width: 100%; }
}

#app #cr-export .cr-waterchange-calculator { overflow: hidden; margin: 0 0 var(--space-4); padding: 0; }
#app #cr-export .cr-waterchange-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 64px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}
#app #cr-export .cr-waterchange-summary::-webkit-details-marker { display: none; }
#app #cr-export .cr-waterchange-summary > span:first-child { display: grid; gap: 3px; min-width: 0; }
#app #cr-export .cr-waterchange-summary strong { color: var(--text-primary); font-size: var(--font-section); }
#app #cr-export .cr-waterchange-summary small { color: var(--text-secondary); font-size: var(--font-caption); line-height: 1.4; }
#app #cr-export .cr-waterchange-summary-action { flex: 0 0 auto; color: var(--text-secondary); transition: transform 160ms ease; }
#app #cr-export .cr-waterchange-calculator[open] .cr-waterchange-summary-action { transform: rotate(180deg); }
#app #cr-export .cr-waterchange-calculator[open] > .cr-waterchange-summary { border-bottom: 1px solid var(--border-color); }
#app #cr-export .cr-waterchange-body { padding: var(--space-4); }
#app #cr-export .cr-waterchange-body > .hint { max-width: 76ch; margin: 0 0 var(--space-4); }
#app #cr-export .cr-waterchange-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
#app #cr-export .cr-waterchange-grid .input-group { min-width: 0; margin: 0; }
#app #cr-export .cr-waterchange-grid .input-group > small { display: block; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--font-caption); }
#app #cr-export .cr-waterchange-result { min-width: 0; margin-top: var(--space-4); }
#app #cr-export .cr-waterchange-result-summary { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-2); }
#app #cr-export .cr-waterchange-result-summary span { color: var(--text-secondary); font-size: var(--font-caption); }
#app #cr-export .cr-waterchange-doses { display: grid; gap: var(--space-2); }
#app #cr-export .cr-waterchange-dose { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--surface-raised); }
#app #cr-export .cr-waterchange-dose > span { display: grid; gap: var(--space-1); min-width: 0; }
#app #cr-export .cr-waterchange-dose small { color: var(--text-secondary); overflow-wrap: anywhere; }
#app #cr-export .cr-waterchange-dose > b { flex: 0 0 auto; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
#app #cr-export .cr-waterchange-dose.is-over-target > b { color: var(--status-warning); }
#app #cr-export .cr-waterchange-body > .field-help { margin: var(--space-3) 0 0; }
@media (max-width: 700px) {
    #app #cr-export .cr-waterchange-summary { align-items: flex-start; }
    #app #cr-export .cr-waterchange-body { padding: var(--space-3); }
    #app #cr-export .cr-waterchange-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    #app #cr-export .cr-waterchange-result-summary { display: grid; }
    #app #cr-export .cr-waterchange-dose { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { #app #cr-export .cr-waterchange-summary-action { transition: none; } }

/* App launcher: shared feature accents use the existing theme and product palette. */
:is(.dashboard-app-tile,.dashboard-launcher-status,.workspace-app-bar) { --launcher-color: var(--accent); }
:is(.dashboard-app-tile,.dashboard-launcher-status,.workspace-app-bar)[data-color="blue"] { --launcher-color: var(--launcher-blue, var(--product-blue)); }
:is(.dashboard-app-tile,.dashboard-launcher-status,.workspace-app-bar)[data-color="green"] { --launcher-color: var(--launcher-green, var(--product-green)); }
:is(.dashboard-app-tile,.dashboard-launcher-status,.workspace-app-bar)[data-color="violet"] { --launcher-color: var(--launcher-violet, var(--product-violet)); }
:is(.dashboard-app-tile,.dashboard-launcher-status,.workspace-app-bar)[data-color="orange"] { --launcher-color: var(--launcher-orange, var(--product-orange)); }
:is(.dashboard-app-tile,.dashboard-launcher-status,.workspace-app-bar)[data-color="yellow"] { --launcher-color: var(--status-warning); }
:is(.dashboard-app-tile,.dashboard-launcher-status,.workspace-app-bar)[data-color="muted"] { --launcher-color: var(--text-secondary); }
html:is(.theme-light,.theme-girl) { --launcher-blue: #2469a3; --launcher-green: #287645; --launcher-violet: #8648ad; --launcher-orange: #935313; }

#app #uebersicht .dashboard-launcher { width: min(100%, 980px); margin: 0 auto; padding: 0 0 24px; }
#app #uebersicht .dashboard-launcher-aquarium { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--surface-card); }
#app #uebersicht .dashboard-aquarium-copy { display: grid; gap: 2px; min-width: 0; }
#app #uebersicht .dashboard-aquarium-copy > span { color: var(--text-secondary); font-size: 10px; text-transform: uppercase; }
#app #uebersicht .dashboard-aquarium-copy > strong { font-size: 15px; overflow-wrap: anywhere; }
#app #uebersicht .dashboard-aquarium-copy > small { font-size: 11px; color: var(--text-secondary); }
#app #uebersicht :is(.dashboard-aquarium-picker,.dashboard-aquarium-manage) { flex: 0 0 40px; width: 40px; height: 40px; min-height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-control); background: var(--surface-raised); }
#app #uebersicht .dashboard-aquarium-picker { position: relative; font-size: 20px; }
#app #uebersicht .dashboard-aquarium-picker select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#app #uebersicht .dashboard-aquarium-picker:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
#app #uebersicht .dashboard-aquarium-manage .nav-icon { width: 19px; height: 19px; }
#app #uebersicht .dashboard-aquarium-create { flex: 0 0 auto; max-width: 45%; padding: 8px 10px; font-size: var(--font-caption); }
#app #uebersicht .dashboard-launcher-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 20px 1px 14px; }
#app #uebersicht .dashboard-launcher-heading h2 { margin: 0 0 4px; font-size: 25px; line-height: 1.2; }
#app #uebersicht .dashboard-launcher-heading p { margin: 0; font-size: 12px; color: var(--text-secondary); }
#app #uebersicht .dashboard-launcher-edit { flex: 0 0 auto; border: 0; padding: 5px; font-size: var(--font-caption); color: var(--accent); background: transparent; }
#app #uebersicht .dashboard-launcher-status-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 20px; }
#app #uebersicht .dashboard-launcher-status { display: flex; align-items: center; justify-content: flex-start; gap: 9px; min-width: 0; min-height: 66px; padding: 10px; text-align: left; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--surface-card); }
#app #uebersicht .dashboard-launcher-status:only-child { grid-column: 1 / -1; }
#app #uebersicht :is(.dashboard-app-tile,.dashboard-launcher-status) { white-space: normal; }
#app #uebersicht .dashboard-status-icon { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-md); background: color-mix(in srgb,var(--launcher-color) 14%,var(--surface-card)); color: var(--launcher-color); font-weight: 600; font-variant-numeric: tabular-nums; }
#app #uebersicht .dashboard-status-icon .nav-icon { width: 19px; height: 19px; }
#app #uebersicht .dashboard-launcher-status > span:last-child { display: grid; gap: 2px; min-width: 0; }
#app #uebersicht .dashboard-launcher-status strong { font-size: 12px; overflow-wrap: anywhere; }
#app #uebersicht .dashboard-launcher-status small { font-size: 11px; line-height: 1.35; color: var(--text-secondary); overflow-wrap: anywhere; }
#app #uebersicht .dashboard-launcher-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 1px 10px; }
#app #uebersicht .dashboard-launcher-section-head h3 { margin: 0; font-size: 14px; }
#app #uebersicht .dashboard-launcher-section-head > span { color: var(--text-secondary); font-size: 11px; }
#app #uebersicht .dashboard-launcher-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 11px; margin: 0 0 10px; border: 1px solid var(--border-color); border-radius: var(--radius-control); background: var(--app-bg); }
#app #uebersicht .dashboard-launcher-search > span { color: var(--text-secondary); font-size: 22px; }
#app #uebersicht .dashboard-launcher-search input { flex: 1; min-width: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; }
#app #uebersicht .dashboard-launcher-search:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
#app #uebersicht .dashboard-launcher-filters { display: flex; gap: 6px; overflow-x: auto; padding: 3px 3px 9px; margin: 0 -3px 5px; scrollbar-width: none; }
#app #uebersicht .dashboard-launcher-filters::-webkit-scrollbar { display: none; }
#app #uebersicht .dashboard-launcher-filter { flex: 0 0 auto; min-height: 40px; padding: 7px 10px; font-size: 11px; color: var(--text-secondary); background: var(--surface-raised); }
#app #uebersicht .dashboard-launcher-filter[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb,var(--accent) 12%,var(--surface-card)); }
#app #uebersicht .dashboard-app-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
#app #uebersicht .dashboard-app-tile { position: relative; display: grid; grid-template-rows: 43px auto 1fr; align-items: start; align-content: start; justify-items: start; gap: 8px; min-width: 0; min-height: 134px; padding: 11px; text-align: left; color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--surface-card); transition: border-color 150ms ease,background-color 150ms ease,transform 150ms ease; }
#app #uebersicht .dashboard-app-tile[hidden] { display: none; }
#app #uebersicht .dashboard-app-tile:is(:hover,:focus-visible):not(:disabled) { border-color: var(--launcher-color); background: var(--surface-raised); }
#app #uebersicht .dashboard-app-tile:active:not(:disabled) { transform: scale(.98); }
#app #uebersicht .dashboard-app-icon { width: 43px; height: 43px; display: grid; place-items: center; justify-self: start; margin: 0; border-radius: var(--radius-md); background: color-mix(in srgb,var(--launcher-color) 15%,var(--surface-card)); color: var(--launcher-color); }
#app #uebersicht .dashboard-app-icon .nav-icon { width: 24px; height: 24px; }
#app #uebersicht .dashboard-app-tile > strong { display: block; min-width: 0; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
#app #uebersicht .dashboard-app-tile > small { display: block; min-width: 0; margin: 0; font-size: 11px; line-height: 1.35; color: var(--text-secondary); overflow-wrap: anywhere; }
#app #uebersicht .dashboard-app-open { position: absolute; top: 21px; right: 9px; color: var(--text-secondary); font-size: 18px; line-height: 1; }
#app #uebersicht .dashboard-launcher-empty { display: grid; justify-items: center; gap: 12px; padding: 24px 12px; text-align: center; color: var(--text-secondary); }
#app #uebersicht .dashboard-launcher-empty[hidden] { display: none; }
#app #uebersicht .dashboard-launcher-additional { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color); scroll-margin-top: calc(var(--measured-header-height, var(--header-height)) + 16px); }
#app #uebersicht .dashboard-launcher-additional[hidden] { display: none; }
#app #uebersicht .dashboard-additional-close { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; font-size: 22px; }
#app #uebersicht a.dashboard-app-tile { text-decoration: none; }
#app #uebersicht .dashboard-launcher-insights { margin-top: 24px; border-top: 1px solid var(--border-color); }
#app #uebersicht .dashboard-launcher-insights > summary { display: flex; align-items: center; padding: 16px 1px; cursor: pointer; }
#app #uebersicht .dashboard-launcher-insights > summary > span { display: grid; gap: 3px; min-width: 0; }
#app #uebersicht .dashboard-launcher-insights > summary strong { font-size: var(--font-body); }
#app #uebersicht .dashboard-launcher-insights > summary small { color: var(--text-secondary); font-size: 11px; }
#app #uebersicht .dashboard-launcher-insights-content { display: grid; gap: 16px; padding-bottom: 16px; }
#app #uebersicht .dashboard-launcher-insights-content > * { margin-block: 0; }

.header-brand-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-md); object-fit: contain; }
#app .workspace-app-bar { display: flex; align-items: center; gap: 8px; margin: 16px 24px 0; }
#app .workspace-app-bar[hidden] { display: none; }
#app .workspace-home-button { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; min-height: 40px; padding: 0; font-size: 25px; }
#app .workspace-app-icon { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--launcher-color); background: color-mix(in srgb,var(--launcher-color) 15%,var(--surface-card)); }
#app .workspace-app-icon .nav-icon { width: 22px; height: 22px; }
#app .workspace-app-title { display: grid; gap: 1px; min-width: 0; }
#app .workspace-app-title strong { font-size: var(--font-body); overflow-wrap: anywhere; }
#app .workspace-app-title small { color: var(--text-secondary); font-size: 11px; }

@media (min-width: 700px) {
    #app #uebersicht .dashboard-app-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
    #app #uebersicht .dashboard-app-tile { min-height: 148px; padding: 16px; }
    #app #uebersicht .dashboard-app-tile > strong { font-size: var(--font-body); }
    #app #uebersicht .dashboard-app-tile > small { font-size: var(--font-caption); }
    #app #uebersicht .dashboard-app-open { top: 26px; right: 14px; }
    #app #uebersicht .dashboard-launcher-status { min-height: 72px; }
}
@media (max-width: 767px) {
    #app #uebersicht .dashboard-launcher-search input { font-size: 16px; }
    #app .workspace-app-bar { margin-inline: 16px; }
    .header-brand-icon { width: 26px; height: 26px; }
}
@media (max-width: 360px) {
    #app #uebersicht .dashboard-app-grid { gap: 6px; }
    #app #uebersicht .dashboard-app-tile { padding: 9px; grid-template-rows: 39px auto 1fr; }
    #app #uebersicht .dashboard-app-icon { width: 39px; height: 39px; }
    #app #uebersicht .dashboard-app-tile > strong { font-size: 11px; }
    #app #uebersicht .dashboard-app-tile > small { font-size: 10px; }
    #app #uebersicht .dashboard-launcher-status { gap: 7px; padding: 9px; }
    #app #uebersicht .dashboard-launcher-heading h2 { font-size: 23px; }
    #appHeader h1 { font-size: 16px; }
    #appHeader .header-title-container { gap: 3px; }
    #appHeader .header-title-container .version-badge { font-size: 9px; }
    .header-brand-icon { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    #app #uebersicht .dashboard-app-tile { transition: none; }
    #app #uebersicht .dashboard-app-tile:active:not(:disabled) { transform: none; }
}