/* FontAwesome SVG sizing fallback — prevents oversized icons if CSP blocks
   FA's dynamically injected <style> element (which has no nonce). */
.svg-inline--fa {
    display: var(--fa-display, inline-block);
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}

:root {
    /* Light mode (default) */
    --color-bg: #f8f9fa;
    --color-fg: #212529;
    --color-accent: #0b6fdf;
    --color-accent-hover: #0056b3;
    --color-danger: #c9302c;
    --color-border: #ced4da;
    --color-card: #fff;
    --color-card-border: #dee2e6;
    --color-muted: #636a70;
    --color-row-hover: #e9ecef;
    --color-table-header: #e9ecef;
    --color-dropdown-bg: #fff;
    --color-dropdown-fg: #212529;
    --color-dropdown-border: #ced4da;
    --color-input-bg: #fff;
    --color-input-fg: #212529;
    --color-input-border: #ced4da;
    --color-input-focus-border: #007bff;
    --color-btn-secondary-bg: #e9ecef;
    --color-btn-secondary-fg: #212529;
    --color-btn-secondary-border: #ced4da;
    --color-btn-secondary-hover-bg: #dee2e6;
    --color-view-btn-border: #ced4da;
    --color-view-btn-hover-bg: #e9ecef;
    --color-view-btn-hover-fg: #495057;
    --color-view-btn-active-bg: #0d6efd;
    --color-view-btn-active-fg: #fff;
    --color-view-btn-active-border: #0d6efd;
    --color-table-bg: #fff;
    --color-table-th: #e9ecef;
    --color-spinner-overlay: rgba(0, 0, 0, 0.5);

    /* Component-specific - feel free to add/adjust for your app */
    --color-dropdown-menu-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    --color-thumb-hover: #e9ecef;
    --color-success-bg: #d4edda;
}

[data-bs-theme="dark"] {
    --color-bg: #121212;
    --color-fg: #ffffff;
    --color-accent: #4d9aff;
    --color-accent-hover: #63a4d4;
    --color-danger: #ff6b6b;
    --color-border: #707070;
    --color-card: #212529;
    --color-card-border: #707070;
    --color-muted: #aaaaaa;
    --color-row-hover: #222232;
    --color-table-header: #2e2e2e;
    --color-dropdown-bg: #1e1e1e;
    --color-dropdown-fg: #fff;
    --color-dropdown-border: #707070;
    --color-input-bg: #2e2e2e;
    --color-input-fg: #fff;
    --color-input-border: #7e7e7e;
    --color-input-focus-border: #90cdf4;
    --color-btn-secondary-bg: #333;
    --color-btn-secondary-fg: #fff;
    --color-btn-secondary-border: #7e7e7e;
    --color-btn-secondary-hover-bg: #444;
    --color-view-btn-border: #707070;
    --color-view-btn-hover-bg: #444;
    --color-view-btn-hover-fg: #fff;
    --color-view-btn-active-bg: #0d6efd;
    --color-view-btn-active-fg: #ffffff;
    --color-view-btn-active-border: #0d6efd;
    --color-table-bg: #1e1e1e;
    --color-table-th: #212529;
    --color-spinner-overlay: rgba(0,0,0,0.85);

    --color-dropdown-menu-shadow: 0px 4px 6px rgba(0,0,0,0.3);
    --color-thumb-hover: #333;
    --color-success-bg: #267f2f;
}

/*  GENERAL BODY/TEXT/BACKGROUND */
body {
    background-color: var(--color-bg);
    color: var(--color-fg);
}

/* Theme-aware utility classes that replace hardcoded Bootstrap bg-light/text-dark etc. */
.bg-themed {
    background-color: var(--color-table-header);
    color: var(--color-fg);
}

.table-themed thead {
    background-color: var(--color-table-th);
    color: var(--color-fg);
}

.text-themed {
    color: var(--color-fg) !important;
}

.drop-highlight {
    background-color: var(--color-row-hover);
}

/* Top menu (mockup M2, option F): every icon has its name underneath; the
   page you're on is green with a bold name and a bar on the header's bottom
   line, the others gray until hovered. */
header .isley-nav {
    --nav-c: #16a34a;
    --nav-mut: #64748b;
    align-items: center;
    gap: 2px;
}
[data-bs-theme="dark"] header .isley-nav {
    --nav-c: #4ade80;
    --nav-mut: #8b949e;
}
header .isley-nav .nav-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 52px;
    padding: 5px 8px;
    border-radius: 8px;
    color: var(--nav-mut);
    line-height: 1;
}
header .isley-nav .nav-link:hover,
header .isley-nav .nav-link.active { color: var(--nav-c); }
header .isley-nav .nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(22, 163, 74, .3); }
header .isley-nav .nav-link > .fa { display: block; width: 1.2em; height: 1.2em; line-height: 1.2em; text-align: center; }
header .isley-nav .nav-lbl { font-size: 11px; font-weight: 500; white-space: nowrap; }
header .isley-nav .nav-link.active .nav-lbl { font-weight: 700; }
/* The bar sits just under the item; on wide screens (one-row header) it
   lands on the header's bottom border. */
header .isley-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -4px;
    height: 3px;
    border-radius: 3px;
    background: var(--nav-c);
}
@media (min-width: 992px) {
    header .isley-nav .nav-link.active::after { bottom: calc(-.5rem - 1px); border-radius: 3px 3px 0 0; }
}
@media (max-width: 420px) {
    header .isley-nav .nav-link { min-width: 0; padding: 5px 5px; }
}
/* Drawn menu icons: f = filled shape, g = filled leaf, l = line. */
.nav-ic { width: 1.2em; height: 1.2em; flex: none; overflow: visible; }
.nav-ic .f { fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.nav-ic .g { fill: currentColor; }
.nav-ic .l { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
header #languageDropdown {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Cards and containers */
.card {
    padding: 20px;
    background: var(--color-card);
    color: var(--color-fg);
    border: 1px solid var(--color-card-border);
}

/* ROWS, HOVER, TABLES */
.clickable-row {
    cursor: pointer;
}
.clickable-row:hover {
    background-color: var(--color-row-hover);
}
.table {
    background-color: var(--color-table-bg);
    border-color: var(--color-border);
    color: var(--color-fg);
}
.table thead, .table .table-dark, .table-dark th {
    background-color: var(--color-table-th);
    color: var(--color-fg);
}

th, td {
    color: var(--color-fg);
}

/* Responsive Images */
@media (max-width: 768px) {
    .mb-3 img {
        margin-bottom: 1rem;
    }
}

/* VIDEO.JS OVERRIDES */
.video-js {
    border-radius: 0.375rem;
    box-shadow: var(--color-dropdown-menu-shadow);
}

/* COMPONENTS: DROPDOWN */
.dropdown {
    position: relative;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background: var(--color-dropdown-bg);
    border: 1px solid var(--color-dropdown-border);
    box-shadow: var(--color-dropdown-menu-shadow);
    padding: 10px;
    z-index: 10;
    color: var(--color-dropdown-fg);
}
.dropdown.open .dropdown-menu {
    display: block;
}
.dropdown-button {
    cursor: pointer;
    background: var(--color-accent);
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
}
.dropdown-button i {
    margin-left: 5px;
}

/* BUTTONS */
.btn-outline-primary {
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.btn-outline-primary:hover {
    background-color: var(--color-accent);
    color: #fff;
}
.btn-secondary {
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-fg);
    border: 1px solid var(--color-btn-secondary-border);
}
.btn-secondary:hover {
    background-color: var(--color-btn-secondary-hover-bg);
    color: var(--color-btn-secondary-fg);
}
.btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/* INPUTS/DATES */
.date-picker-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.date-picker-container input {
    width: 100%;
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    color: var(--color-input-fg);
}
.date-picker-container input:focus {
    outline: none;
    border-color: var(--color-input-focus-border);
}

/* CUSTOM BUTTONS */
.view-button {
    background-color: transparent;
    color: var(--color-muted);
    border: 1px solid var(--color-view-btn-border);
    transition: background-color 0.3s, color 0.3s;
}
.view-button:hover {
    background-color: var(--color-view-btn-hover-bg);
    color: var(--color-view-btn-hover-fg);
}
.view-button.active {
    background-color: var(--color-view-btn-active-bg);
    color: var(--color-view-btn-active-fg);
    border-color: var(--color-view-btn-active-border);
}

/* MISC */
.sortable {
    cursor: pointer;
    white-space: nowrap;
}
.sortable .fa-sort,
.sortable .fa-sort-up,
.sortable .fa-sort-down {
    margin-left: 0.35rem;
    vertical-align: middle;
}
.sortable .fa-sort-up,
.sortable .fa-sort-down {
    display: none;
}
.sortable.asc .fa-sort,
.sortable.desc .fa-sort {
    display: none;
}
.sortable.asc .fa-sort-up {
    display: inline-block;
}
.sortable.desc .fa-sort-down {
    display: inline-block;
}
.thumbnail-img {
    cursor: pointer;
    object-fit: contain;
    height: 220px;
    width: 100%;
    transition: transform 0.2s;
}
.thumbnail-img:hover {
    transform: scale(1.05);
}

/* Drop Area */
#dropArea {
    cursor: pointer;
    background-color: var(--color-bg);
    transition: background-color 0.3s;
}
#dropArea.border-success {
    background-color: var(--color-success-bg);
}

/* Spinner Overlay */
.spinner-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--color-spinner-overlay);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1056;
}

/* Share Options */
#shareOptions a {
    display: inline-block;
    margin: 0.5em 0;
}
#shareOptions {
    text-align: center;
}

/* Flex controls */
.controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Graph Container */
.graph-container {
    height: 500px;
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 15px;
}

/* Growth History */
.growth-history-card {
    --growth-accent: var(--color-accent);
    --growth-accent-soft: rgba(0, 123, 255, 0.25);
    --growth-row-bg: var(--color-bg);
    --growth-row-bg-hover: var(--color-row-hover);
}
.growth-history-panel {
    height: 100%;
}
.growth-section + .growth-section {
    margin-top: 20px;
}
.growth-section-title {
    color: var(--color-muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.growth-current-value {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.growth-current-meta {
    color: var(--color-muted);
    font-size: 0.95rem;
}
.growth-stage-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.growth-stage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--growth-row-bg);
    border: 1px solid var(--color-card-border);
}
.growth-stage-row.is-current {
    border-color: var(--color-accent);
    background: var(--growth-row-bg-hover);
}
.growth-stage-title {
    font-weight: 600;
}
.growth-stage-pill {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 123, 255, 0.35);
    background: var(--growth-accent-soft);
    color: var(--growth-accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.growth-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.growth-total-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.75rem;
    background: var(--color-card);
}
.growth-total-pill strong {
    color: var(--color-fg);
}
.growth-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 34px;
}
.growth-timeline::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--growth-accent);
    opacity: 0.35;
    border-radius: 999px;
}
.growth-timeline-item {
    position: relative;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--color-card-border);
    background: var(--color-card);
}
.growth-timeline-item::before {
    content: "";
    position: absolute;
    left: -27px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--growth-accent);
    box-shadow: 0 0 0 6px var(--growth-accent-soft);
}
.growth-timeline-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 12px 0 0 12px;
    background: linear-gradient(180deg, rgba(0, 123, 255, 0.45), rgba(0, 123, 255, 0.04));
    opacity: 0.6;
}
.growth-timeline-item.is-current {
    border-color: var(--growth-accent);
}
.growth-timeline-item.is-current::before {
    box-shadow: 0 0 0 8px var(--growth-accent-soft);
}
.growth-timeline-stage {
    font-weight: 600;
    margin-bottom: 6px;
}
.growth-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.growth-timeline-range {
    color: var(--color-muted);
    font-size: 0.85rem;
}
.growth-timeline-duration {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 123, 255, 0.35);
    background: rgba(0, 123, 255, 0.12);
    color: var(--growth-accent);
    font-size: 0.7rem;
    font-weight: 600;
}
.growth-history-empty {
    color: var(--color-muted);
    text-align: center;
    padding: 12px 0 4px;
    font-size: 0.9rem;
}

@media (max-width: 992px) {
    .growth-history-grid {
        grid-template-columns: 1fr;
    }
}

[data-bs-theme="dark"] .growth-history-card {
    --growth-accent-soft: rgba(79, 125, 255, 0.25);
    --growth-row-bg: rgba(255, 255, 255, 0.04);
    --growth-row-bg-hover: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .growth-total-pill {
    background: rgba(18, 18, 18, 0.8);
}
[data-bs-theme="dark"] .growth-stage-pill {
    border-color: rgba(122, 168, 255, 0.5);
    background: rgba(122, 168, 255, 0.2);
    color: #cfe0ff;
}
[data-bs-theme="dark"] .growth-timeline-duration {
    border-color: rgba(122, 168, 255, 0.5);
    background: rgba(122, 168, 255, 0.2);
    color: #cfe0ff;
}

/* Plant status ribbon */
.plant-status-ribbon {
    gap: 12px;
    padding: 6px 4px;
    overflow-x: auto; /* ensure horizontal scrolling when needed */
    -webkit-overflow-scrolling: touch;
    position: relative; /* positioning context for connector */
    align-items: center; /* ensure vertical centering of steps */
    /* defaults for connector variables (safe fallbacks before JS runs) */
    --p-ribbon-left: 0px;
    --p-ribbon-total-width: 100%;
    --p-ribbon-progress: 0px;
    --p-ribbon-top: 50%;
}
.plant-status-ribbon .status-step {
    /* make each step a fixed-size column when possible but still allow overflow */
    flex: 0 0 auto;
    position: relative;
    min-width: 72px;
    /* Use grid to keep icon, name and date in fixed row positions so steps stay aligned */
    display: grid;
    grid-template-rows: auto 1.2rem auto;
    align-items: center;
    justify-items: center;
    width: 110px;
    min-height: 110px;
    padding: 0.5rem;
    box-sizing: border-box;
    z-index: 2; /* above connector */
}
.plant-status-ribbon .status-step .status-icon,
.plant-status-ribbon .status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-muted);
    position: relative;
    z-index: 3; /* icon should be above any progress bar */
}
.plant-status-ribbon .status-step .status-icon:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.15);
}
.plant-status-ribbon .status-step .status-icon i,
.plant-status-ribbon .status-icon i {
    font-size: 24px !important;
    line-height: 1;
}
.plant-status-ribbon .status-step .status-name,
.plant-status-ribbon .status-name {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 1.2rem; /* reserve space */
    margin-top: 0.5rem;
    font-weight: 600;
}
.plant-status-ribbon .status-step .status-date,
.plant-status-ribbon .status-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-top: 0.25rem;
    min-height: 2.2rem; /* allow date block to size for two stacked lines */
}
.plant-status-ribbon .status-date .status-date-day {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%;
    font-size: 0.85rem;
    line-height: 1.1rem;
}
.plant-status-ribbon .status-date .status-date-time {
    font-size: 0.75rem;
    line-height: 1rem;
    display: block;
    width: 100%;
}
/* Ensure buttons don't stretch */
.plant-status-ribbon .status-step .btn.status-icon {
    padding: 0;
}
/* Responsive: reduce width on small screens */
@media (max-width: 576px) {
    .plant-status-ribbon .status-step { width: 90px; min-height: 100px; }
    .plant-status-ribbon .status-icon { width: 48px; height: 48px; }
    .plant-status-ribbon .status-icon i { font-size: 20px !important; }
}

/* Connector baseline (grey) and progress overlay (accent) - controlled via CSS vars set by JS */
.plant-status-ribbon::before,
.plant-status-ribbon::after {
    content: '';
    position: absolute;
    left: var(--p-ribbon-left, 0px);
    height: 3px;
    top: var(--p-ribbon-top, 50%);
    transform: translateY(-50%);
    border-radius: 999px;
    z-index: 0; /* behind steps */
}
/* grey baseline spanning from first to last step centers */
.plant-status-ribbon::before {
    width: var(--p-ribbon-total-width, 100%);
    background: var(--color-border);
    opacity: 1;
}
/* colored overlay: width set by JS via --p-ribbon-progress (px) measured from container left; subtract left to get overlay width */
.plant-status-ribbon::after {
    left: var(--p-ribbon-left, 0px);
    width: calc(var(--p-ribbon-progress, 0px) - var(--p-ribbon-left, 0px));
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
    pointer-events: none;
    z-index: 1; /* above baseline, below steps */
}

/* Ensure overlay doesn't render a negative width */
.plant-status-ribbon[style*="--p-ribbon-progress: 0px"]::after {
    width: 0px !important;
}

/* State styles (placed after Bootstrap to ensure cascade applies) */
.plant-status-ribbon .status-step.status-past .status-icon,
.plant-status-ribbon .status-step.status-past .btn.status-icon {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.plant-status-ribbon .status-step.status-current .status-icon,
.plant-status-ribbon .status-step.status-current .btn.status-icon {
    background: var(--color-accent-hover);
    color: #fff;
    border-color: var(--color-accent-hover);
}
.plant-status-ribbon .status-step.status-future .status-icon {
    background-color: var(--color-card);
}
.plant-status-ribbon .status-step.status-future .status-icon svg {
    opacity: 0.45;
}
.plant-status-ribbon .status-step.status-pending .status-icon {
    opacity: 0.7;
    border-style: dashed;
}

/* Dead status color when active/current */
.plant-status-ribbon .status-step.status-current.status-dead .status-icon,
.plant-status-ribbon .status-step.status-current.status-dead .btn.status-icon {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}

@media (max-width: 768px) {
    .plant-status-ribbon {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
    }
    .plant-status-ribbon::before { left: 16px; right: 16px; }
}

/* ===== Skip to content link ===== */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 0.375rem 0;
}
.skip-to-content:focus {
    left: 0;
    outline: 2px solid var(--color-accent-hover);
    outline-offset: 2px;
}

/* ===== Breadcrumbs ===== */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.breadcrumb-item a {
    color: var(--color-accent);
    text-decoration: none;
}
.breadcrumb-item a:hover {
    text-decoration: underline;
}
.breadcrumb-item.active {
    color: var(--color-muted);
}

/* ===== Required field indicator ===== */
.form-label.required::after {
    content: ' *';
    color: var(--color-danger);
    font-weight: 700;
}

/* ===== Form validation feedback ===== */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-danger);
}
.invalid-feedback {
    color: var(--color-danger);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* ===== Submit button spinner ===== */
.btn .btn-spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}
.btn.is-loading .btn-spinner {
    display: inline-block;
}
.btn.is-loading {
    pointer-events: none;
    opacity: 0.75;
}

/* ===== Touch target sizing ===== */
/* Ensure icon-only action buttons meet the 44px touch target guideline.
   Applies to .btn-sm buttons that contain only an icon (no visible text). */
.btn-icon-action {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
}

/* ===== Empty state ===== */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-muted);
}
.empty-state i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
    opacity: 0.5;
}
.empty-state p {
    margin: 0;
    font-size: 0.95rem;
}

/* Strain type badges */
.strain-badge-auto {
    background: #fef3c7;
    color: #92400e;
    font-size: 0.85rem;
    padding: 0.4em 1em;
    border-radius: 999px;
    font-weight: 600;
}
.strain-badge-photo {
    background: #e0f2fe;
    color: #075985;
    font-size: 0.85rem;
    padding: 0.4em 1em;
    border-radius: 999px;
    font-weight: 600;
}

/* Indica/Sativa gradient ratio bar */
.strain-ratio-bar {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e 0%, #22c55e 100%);
    overflow: hidden;
    position: relative;
}
.strain-ratio-fill {
    height: 100%;
    border-radius: 999px 0 0 999px;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    transition: width 0.3s ease;
}
.strain-indica-text {
    color: #a855f7;
}
.strain-sativa-text {
    color: #22c55e;
}
[data-bs-theme="dark"] .strain-indica-text {
    color: #c4b5fd;
}
[data-bs-theme="dark"] .strain-sativa-text {
    color: #6ee7b7;
}

/* Strain info list */
.strain-info-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-card-border);
}
.strain-info-list li:last-child {
    border-bottom: none;
}
.strain-info-label {
    color: var(--color-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}
.strain-info-value {
    font-weight: 500;
    text-align: right;
}

/* Strain ratio section */
.strain-ratio-section {
    padding: 0.5rem 0;
}

/* ===== Shared List View Base (Strains, Sensors, Plants, Activities) ===== */
.strains-controls,
.sensors-controls,
.plants-controls,
.activities-controls {
    margin-bottom: 1.5rem;
}
.strains-controls-row,
.sensors-controls-row,
.plants-controls-row,
.activities-controls-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.strains-controls-row .btn-group .view-button,
.strains-controls-row .btn-group .layout-toggle,
.plants-controls-row .btn-group .view-button,
.plants-controls-row .btn-group .layout-toggle,
.activities-controls-row .btn-group .layout-toggle {
    border: 1px solid var(--color-view-btn-border);
    background: transparent;
    color: var(--color-fg);
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.35rem 0.9rem;
    transition: all 0.15s;
}
.strains-controls-row .btn-group .layout-toggle,
.plants-controls-row .btn-group .layout-toggle,
.activities-controls-row .btn-group .layout-toggle {
    padding: 0.35rem 0.65rem;
}
.strains-controls-row .btn-group .view-button:hover,
.strains-controls-row .btn-group .layout-toggle:hover,
.plants-controls-row .btn-group .view-button:hover,
.plants-controls-row .btn-group .layout-toggle:hover,
.activities-controls-row .btn-group .layout-toggle:hover {
    background: var(--color-view-btn-hover-bg);
    color: var(--color-view-btn-hover-fg);
}
.strains-controls-row .btn-group .view-button.active,
.strains-controls-row .btn-group .layout-toggle.active,
.plants-controls-row .btn-group .view-button.active,
.plants-controls-row .btn-group .layout-toggle.active,
.activities-controls-row .btn-group .layout-toggle.active {
    background: var(--color-view-btn-active-bg);
    color: var(--color-view-btn-active-fg);
    border-color: var(--color-view-btn-active-border);
}
.strains-search-wrap,
.sensors-search-wrap,
.plants-search-wrap,
.activities-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
    max-width: 320px;
}
.strains-search-icon,
.sensors-search-icon,
.plants-search-icon,
.activities-search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    font-size: 0.8rem;
    pointer-events: none;
}
.strains-search-wrap .form-control,
.sensors-search-wrap .form-control,
.plants-search-wrap .form-control,
.activities-search-wrap .form-control {
    padding-left: 2rem;
    background: var(--color-input-bg);
    color: var(--color-input-fg);
    border-color: var(--color-input-border);
}
.strains-filters-row,
.sensors-filters-row,
.plants-filters-row,
.activities-filters-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.strains-filter-group,
.sensors-filter-group,
.plants-filter-group,
.activities-filter-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.strains-filter-label,
.sensors-filter-label,
.plants-filter-label,
.activities-filter-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.strains-filter-group .form-select,
.sensors-filter-group .form-select,
.plants-filter-group .form-select,
.activities-filter-group .form-select,
.activities-filter-group .form-control {
    min-width: 120px;
    font-size: 0.85rem;
    background: var(--color-input-bg);
    color: var(--color-input-fg);
    border-color: var(--color-input-border);
}
.strains-result-count,
.sensors-result-count,
.plants-result-count,
.activities-result-count {
    font-size: 0.82rem;
}

.strains-table-wrap,
.sensors-table-wrap,
.plants-table-wrap,
.activities-table-wrap {
    border-radius: 8px;
    overflow: hidden;
    overflow-x: auto;
}
.strains-table,
.sensors-table,
.plants-table,
.activities-table {
    font-size: 0.9rem;
    margin-bottom: 0;
}
.strains-table,
.sensors-table,
.plants-table {
    background: var(--color-table-bg);
}
.strains-table thead th,
.sensors-table thead th,
.plants-table thead th,
.activities-table thead th {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    white-space: nowrap;
    padding: 0.6rem 0.75rem;
}
.strains-table td,
.sensors-table td,
.plants-table td,
.activities-table td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    border-color: var(--color-card-border);
}
.strains-table thead th,
.sensors-table thead th,
.plants-table thead th {
    background: var(--color-table-th);
    border-bottom: 2px solid var(--color-card-border);
}
.st-row:hover,
.sn-row:hover,
.pt-row:hover {
    background: var(--color-row-hover);
}

.st-sortable,
.sn-sortable,
.pt-sortable,
.al-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.st-sortable:hover,
.sn-sortable:hover,
.pt-sortable:hover,
.al-sortable:hover {
    color: var(--bs-primary);
}

/* ===== Strains List Page ===== */

/* Card grid — flex rows with uniform card height */
.strains-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.strains-grid .sc-card-link {
    flex: 1 1 340px;
    max-width: calc(33.333% - 0.667rem);
    min-width: 300px;
}
@media (max-width: 1200px) {
    .strains-grid .sc-card-link {
        max-width: calc(50% - 0.5rem);
    }
}
@media (max-width: 700px) {
    .strains-grid .sc-card-link {
        max-width: 100%;
        flex-basis: 100%;
    }
}

/* Individual card */
.sc-card-link {
    display: block;
    cursor: pointer;
}
.sc-card-link:hover .sc-card {
    border-color: var(--color-accent);
    box-shadow: 0 2px 12px rgba(11, 111, 223, 0.12);
    transform: translateY(-1px);
}
.sc-card {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: 10px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    cursor: pointer;
    width: 100%;
    min-height: 165px;
}
[data-bs-theme="dark"] .sc-card-link:hover .sc-card {
    box-shadow: 0 2px 12px rgba(77, 154, 255, 0.15);
}

/* Card header */
.sc-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.sc-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.sc-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-accent);
    line-height: 1.3;
}
.sc-breeder {
    font-size: 0.82rem;
    color: var(--color-muted);
    font-weight: 500;
}
.sc-ext-link {
    color: var(--color-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: color 0.15s;
}
.sc-ext-link:hover {
    color: var(--color-accent);
}

/* Card body */
.sc-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.sc-desc {
    font-size: 0.84rem;
    color: var(--color-fg);
    opacity: 0.85;
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-lineage {
    font-size: 0.78rem;
    color: var(--color-muted);
    line-height: 1.4;
    padding: 0.3rem 0.55rem;
    background: var(--color-bg);
    border-radius: 6px;
    border: 1px solid var(--color-card-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-lineage i {
    opacity: 0.6;
}
.sc-cycle-row {
    margin-top: 0.4rem;
    font-size: 0.78rem;
}
.sc-cycle i {
    opacity: 0.6;
}

/* Card footer */
.sc-card-footer {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: nowrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-card-border);
    margin-top: auto;
}
.sc-meta-left {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}
.sc-meta-left .strain-badge-auto,
.sc-meta-left .strain-badge-photo {
    font-size: 0.7rem;
    padding: 0.2em 0.6em;
}
.sc-dominance {
    font-size: 0.75rem;
    color: var(--color-muted);
    font-weight: 500;
    white-space: nowrap;
}
.sc-ratio-mini {
    flex: 1;
    height: 5px;
    min-width: 40px;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e 0%, #22c55e 100%);
    overflow: hidden;
}
.sc-ratio-mini-fill {
    height: 100%;
    border-radius: 999px 0 0 999px;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
}
.sc-meta-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.82rem;
    color: var(--color-muted);
    flex-shrink: 0;
}

/* ===== Strains Table View ===== */
.st-strain-name {
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}
.st-strain-name:hover {
    text-decoration: underline;
}
.st-short-desc {
    font-size: 0.78rem;
    color: var(--color-muted);
    line-height: 1.35;
    margin-top: 0.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.st-cell-breeder {
    white-space: nowrap;
}
.st-cell-lineage {
    font-size: 0.82rem;
    color: var(--color-muted);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.st-ratio-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.st-ratio-label {
    font-size: 0.78rem;
    color: var(--color-muted);
    white-space: nowrap;
}
.st-th-name { min-width: 180px; }
.st-th-lineage { min-width: 150px; }

/* Empty state */
.strains-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

/* ===== Sensors Listing Page ===== */
.sensors-action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sn-sensor-name {
    font-weight: 600;
    color: var(--color-accent);
}
.sn-th-name { min-width: 160px; }
.sn-th-zone { min-width: 100px; }
.sn-th-source { min-width: 100px; }
.sn-th-device { min-width: 100px; }
.sn-th-type { min-width: 80px; }
.sn-th-unit { min-width: 60px; }
.sn-th-visibility { min-width: 100px; }
.sensors-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

/* ===== Strain Edit Page ===== */
.strain-preview-card {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.strain-preview-card .markdown-body {
    font-size: 0.92rem;
}

/* Markdown body base styling */
.markdown-body {
    line-height: 1.7;
    word-wrap: break-word;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: var(--color-fg);
}
.markdown-body h1 { font-size: 1.6rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.35rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.3em; }
.markdown-body h3 { font-size: 1.15rem; }
.markdown-body p { margin-bottom: 0.75em; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin-bottom: 0.75em; }
.markdown-body li { margin-bottom: 0.25em; }
.markdown-body code {
    background: var(--color-bg);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.88em;
}
.markdown-body pre {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1em;
    overflow-x: auto;
}
.markdown-body pre code {
    background: transparent;
    padding: 0;
}
.markdown-body a {
    color: var(--color-accent);
}
.markdown-body hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.5em 0;
}
.markdown-body img {
    max-width: 100%;
    border-radius: 6px;
}
.markdown-body blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 1em;
    margin-left: 0;
    color: var(--color-muted);
}

/* ===== Lineage Editor ===== */
.lineage-entry-row {
    position: relative;
}
.lineage-match-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.lineage-matched {
    color: var(--color-accent);
    background: rgba(59, 130, 246, 0.15);
}
.lineage-unmatched {
    color: #c0392b;
    background: rgba(192, 57, 43, 0.15);
}
[data-bs-theme="dark"] .lineage-unmatched {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.15);
}

/* Autocomplete dropdown */
.lineage-autocomplete-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    max-height: 200px;
    overflow-y: auto;
}
.lineage-autocomplete-item {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--color-border);
}
.lineage-autocomplete-item:last-child {
    border-bottom: none;
}
.lineage-autocomplete-item:hover {
    background: var(--color-bg);
}

/* ===== Reusable Autocomplete Select ===== */
.isley-ac-wrapper {
    position: relative;
}
.isley-ac-input {
    background: var(--color-input-bg);
    color: var(--color-input-fg);
    border-color: var(--color-input-border);
}
.isley-ac-input:focus {
    border-color: var(--color-input-focus-border);
}
.isley-ac-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    max-height: 240px;
    overflow-y: auto;
}
.isley-ac-item {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-fg);
}
.isley-ac-item:last-child {
    border-bottom: none;
}
.isley-ac-item:hover,
.isley-ac-item.active {
    background: var(--color-row-hover);
}
.isley-ac-item strong {
    color: var(--color-accent);
}
.isley-ac-new-item {
    color: var(--color-accent);
    font-weight: 500;
}
.isley-ac-separator {
    height: 1px;
    background: var(--color-border);
    margin: 0;
}
/* Nothing matches (e.g. a strain that hasn't been added yet): a note, not a choice. */
.isley-ac-note {
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    color: var(--color-fg);
    white-space: normal;
    cursor: default;
}
.isley-ac-note a {
    text-decoration: none;
}

/* The bar on a strain's page that leads back to Add Plant / Edit plant. */
.sf-back {
    background: var(--bs-success-bg-subtle);
    border: 1px solid var(--bs-success-border-subtle);
    border-radius: 12px;
    padding: 0.7rem 1rem;
}

/* ============================================
   PLANTS LIST PAGE
   Mirrors strains-* pattern for consistency
   ============================================ */

/* Controls bar */

/* Card grid */
.plants-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.plants-grid .pc-card-link {
    flex: 1 1 340px;
    max-width: calc(33.333% - 0.667rem);
    min-width: 300px;
}
@media (max-width: 1200px) {
    .plants-grid .pc-card-link {
        max-width: calc(50% - 0.5rem);
    }
}
@media (max-width: 700px) {
    .plants-grid .pc-card-link {
        max-width: 100%;
        flex-basis: 100%;
    }
}

/* Individual plant card */
.pc-card-link {
    display: block;
    cursor: pointer;
}
.pc-card-link:hover .pc-card {
    border-color: var(--color-accent);
    box-shadow: 0 2px 12px rgba(11, 111, 223, 0.12);
    transform: translateY(-1px);
}
.pc-card {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: 10px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    cursor: pointer;
    width: 100%;
    min-height: 155px;
}
[data-bs-theme="dark"] .pc-card-link:hover .pc-card {
    box-shadow: 0 2px 12px rgba(77, 154, 255, 0.15);
}

/* Card header */
.pc-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.pc-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.pc-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-accent);
    line-height: 1.3;
}
.pc-subtitle {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.pc-strain {
    font-size: 0.84rem;
    color: var(--color-fg);
    font-weight: 500;
    opacity: 0.85;
}
.pc-breeder {
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* Card body */
.pc-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.pc-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pc-zone {
    font-size: 0.78rem;
    color: var(--color-muted);
    white-space: nowrap;
}

/* Status badges */
.pc-status-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: capitalize;
}
.pc-status-germ {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}
.pc-status-seed {
    background: linear-gradient(135deg, #84cc16, #65a30d);
    color: #fff;
}
.pc-status-veg {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}
.pc-status-flower {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
}
.pc-status-dry {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
}
.pc-status-cure {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: #fff;
}
.pc-status-harvest {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}
.pc-status-dead {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #fff;
}
.pc-status-default {
    background: var(--color-btn-secondary-bg);
    color: var(--color-fg);
}

/* Clone badge */
.pc-clone-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1em 0.5em;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--color-accent);
    white-space: nowrap;
}

/* Card footer */
.pc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: nowrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-card-border);
    margin-top: auto;
}
.pc-meta-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}
.pc-meta-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.pc-stat {
    font-size: 0.78rem;
    color: var(--color-muted);
    white-space: nowrap;
    font-weight: 500;
}
.pc-flower-days {
    color: #a855f7;
}

/* Water/feed indicators */
.pc-water-indicator,
.pc-feed-indicator {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1em 0.45em;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-accent);
}
.pc-water-warn {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-danger);
}
.pc-feed-indicator {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.pc-feed-warn {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-danger);
}

/* Quick action buttons (card) */
.pc-quick-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.pc-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--color-card-border);
    background: transparent;
    color: var(--color-muted);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}
.pc-action-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: rgba(11, 111, 223, 0.06);
}

/* ===== Plants Table View ===== */
.pt-plant-name {
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}
.pt-plant-name:hover {
    text-decoration: underline;
}
.pt-short-desc {
    font-size: 0.78rem;
    color: var(--color-muted);
    line-height: 1.35;
    margin-top: 0.15rem;
}
.pt-cell-strain {
    white-space: nowrap;
}
.pt-th-name { min-width: 160px; }
.pt-th-strain { min-width: 140px; }
.pt-th-zone { min-width: 100px; }
.pt-th-status { min-width: 100px; }
.pt-th-age { min-width: 80px; }
.pt-th-detail { min-width: 80px; }
.pt-th-actions { min-width: 100px; text-align: center; }

/* Empty state */
.plants-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

/* ===== Plant Detail Page Infobox ===== */
.plant-infobox {
    border-left: 3px solid var(--color-accent);
}
.plant-infobox .card-title {
    font-size: 1rem;
    letter-spacing: 0.03em;
}

/* Large status badge for detail page */
.pc-status-lg {
    font-size: 0.9rem;
    padding: 0.35em 1.2em;
}

/* ===== Plant Hero Banner ===== */
.plant-hero {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    min-height: 200px;
    background-size: cover;
    background-position: center 40%;
    display: flex;
    align-items: flex-end;
}
.plant-hero--no-img {
    min-height: 140px;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb,13,110,253),0.15) 0%, rgba(var(--bs-primary-rgb,13,110,253),0.04) 100%);
}
.plant-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.12) 100%);
    pointer-events: none;
}
.plant-hero--no-img .plant-hero-overlay { display: none; }
/* Hero carousel-style nav arrows */
.plant-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    color: rgba(255,255,255,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
    transition: color 0.18s, opacity 0.18s, transform 0.18s;
    opacity: 0.8;
    cursor: pointer;
}
.plant-hero-nav:hover {
    color: #fff;
    transform: translateY(-50%) scale(1.05);
    opacity: 1;
    text-decoration: none;
}
.plant-hero-nav--prev { left: 0.85rem; }
.plant-hero-nav--next { right: 0.85rem; }
.plant-hero--no-img .plant-hero-nav {
    color: rgba(var(--bs-body-color-rgb, 33,37,41), 0.6);
    text-shadow: none;
}
.plant-hero--no-img .plant-hero-nav:hover {
    color: var(--color-accent);
}
.plant-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1.25rem 2.6rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}
@media (max-width: 575.98px) {
    .plant-hero-content {
        padding: 1rem 2rem;
    }
}
.plant-hero-title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.plant-hero--no-img .plant-hero-title { color: var(--color-text); text-shadow: none; }
.plant-hero-sub {
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    margin: 0.25rem 0 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.plant-hero--no-img .plant-hero-sub { color: var(--color-muted); text-shadow: none; }
.plant-hero-sep { margin: 0 0.35rem; opacity: 0.6; }
.plant-hero-link {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
}
.plant-hero-link:hover { text-decoration: underline; color: #fff; }
.plant-hero--no-img .plant-hero-link { color: var(--color-accent); }
.plant-hero-badges {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* Hero sensor overlay */
.plant-hero-sensors {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    z-index: 2;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 60%;
}
.hero-sensor-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    text-decoration: none;
    font-size: 0.72rem;
    line-height: 1.3;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.hero-sensor-chip:hover {
    background: rgba(0,0,0,0.65);
    border-color: rgba(255,255,255,0.35);
    color: #fff;
}
.hero-sensor-inherited {
    border-style: dashed;
    opacity: 0.8;
}
.hero-sensor-vpd-ideal {
    border-color: #22c55e;
}
.hero-sensor-vpd-ideal .hero-sensor-val {
    color: #22c55e;
}
.hero-sensor-vpd-low {
    border-color: #3b82f6;
}
.hero-sensor-vpd-low .hero-sensor-val {
    color: #3b82f6;
}
.hero-sensor-vpd-high {
    border-color: #f87171;
}
.hero-sensor-vpd-high .hero-sensor-val {
    color: #f87171;
}
.hero-sensor-name {
    opacity: 0.7;
    font-weight: 500;
}
.hero-sensor-val {
    font-weight: 700;
}
.hero-sensor-unit {
    font-weight: 400;
    opacity: 0.7;
    margin-left: 1px;
    font-size: 0.65rem;
}
/* No-image hero: adjust sensor chip styling */
.plant-hero--no-img .hero-sensor-chip {
    background: var(--color-card);
    border-color: var(--color-border);
    color: var(--color-text);
    backdrop-filter: none;
}
.plant-hero--no-img .hero-sensor-chip:hover {
    border-color: var(--color-accent);
}

/* Hero action buttons */
.plant-hero-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.plant-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    background: rgba(0,0,0,0.4);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s;
    backdrop-filter: blur(6px);
    text-decoration: none;
    cursor: pointer;
}
.plant-action-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.6);
    color: #fff;
    transform: translateY(-1px);
}
.plant-hero--no-img .plant-action-btn {
    background: var(--color-card);
    border-color: var(--color-border);
    color: var(--color-text);
    backdrop-filter: none;
}
.plant-hero--no-img .plant-action-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.plant-action-edit { border-color: rgba(var(--bs-primary-rgb,13,110,253),0.6); }
.plant-action-measure { border-color: rgba(var(--bs-primary-rgb,13,110,253),0.4); }
.plant-action-activity { border-color: rgba(var(--bs-success-rgb,25,135,84),0.4); }
.plant-action-photo { border-color: rgba(255,255,255,0.3); }
.plant-action-link { border-color: rgba(var(--bs-info-rgb,13,202,240),0.4); }
.plant-action-kill { border-color: rgba(var(--bs-danger-rgb,220,53,69),0.5); color: #ff6b6b; }
.plant-action-kill:hover { background: rgba(220,53,69,0.3); border-color: rgba(220,53,69,0.7); color: #ff4444; }
.plant-hero--no-img .plant-action-kill { color: var(--bs-danger); border-color: rgba(var(--bs-danger-rgb,220,53,69),0.4); }
.plant-hero--no-img .plant-action-kill:hover { border-color: var(--bs-danger); color: var(--bs-danger); }

/* ===== Horizontal Timeline ===== */
.htl-track {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    padding: 0.5rem 0 0.75rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.htl-track::-webkit-scrollbar { height: 4px; }
.htl-track::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.htl-connector {
    flex: 0 0 auto;
    width: 32px;
    height: 2px;
    background: var(--color-border);
    margin-top: 19px;
    flex-shrink: 0;
}
.htl-connector-filled {
    background: var(--color-accent);
}
.htl-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 64px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}
.htl-node.htl-future { opacity: 0.35; }
.htl-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    border: 2px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-muted);
    transition: all 0.2s;
    position: relative;
}
.htl-reached .htl-icon {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.htl-active .htl-icon {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb,13,110,253),0.2);
}
.htl-node:hover .htl-icon {
    transform: scale(1.08);
}
.htl-label {
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 0.4rem;
    color: var(--color-text);
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.htl-meta {
    margin-top: 0.15rem;
    min-height: 1.1em;
}
.htl-days {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-accent);
    background: rgba(var(--bs-primary-rgb,13,110,253),0.08);
    padding: 0.1em 0.45em;
    border-radius: 999px;
}
.htl-active .htl-days {
    background: rgba(var(--bs-primary-rgb,13,110,253),0.15);
}
.htl-date {
    font-size: 0.62rem;
    color: var(--color-muted);
}

/* Responsive: collapse to vertical on narrow screens */
@media (max-width: 576px) {
    .htl-track {
        flex-direction: column;
        align-items: flex-start;
        overflow-x: visible;
        padding-left: 20px;
        position: relative;
    }
    .htl-track::before {
        content: "";
        position: absolute;
        left: 19px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--color-border);
    }
    .htl-connector {
        width: 2px;
        height: 16px;
        margin-top: 0;
        margin-left: 18px;
    }
    .htl-node {
        flex-direction: row;
        text-align: left;
        gap: 0.65rem;
        min-width: 0;
        width: 100%;
        padding: 0.25rem 0;
    }
    .htl-icon {
        flex-shrink: 0;
        z-index: 1;
    }
    .htl-label {
        margin-top: 0;
        font-size: 0.82rem;
        max-width: none;
    }
    .htl-meta {
        margin-top: 0;
        margin-left: auto;
    }
    .plant-hero { min-height: 160px; }
    .plant-hero-title { font-size: 1.4rem; }
    .plant-hero-actions { gap: 0.35rem; }
    .plant-action-btn { width: 34px; height: 34px; font-size: 0.78rem; }
    .plant-hero-sensors { max-width: 100%; top: 0.4rem; right: 0.4rem; }
    .hero-sensor-chip { font-size: 0.65rem; padding: 0.15rem 0.4rem; }
}

/* ===== Sensor Sidebar Grid ===== */
.sensor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.sensor-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.35rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-border);
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.sensor-tile:hover {
    border-color: var(--color-accent);
    background: rgba(var(--bs-primary-rgb, 13,110,253), 0.04);
}
.sensor-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.sensor-reading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.sensor-unit {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-muted);
}
.sensor-meta {
    font-size: 0.65rem;
    color: var(--color-muted);
    font-style: italic;
    margin-top: 0.1rem;
}
.sensor-inherited {
    border-style: dashed;
}

/* ===== Plant Mini Table ===== */
.plant-mini-table {
    font-size: 0.85rem;
}
.plant-mini-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    border-bottom-width: 1px;
    padding: 0.4rem 0.5rem;
}
.plant-mini-table tbody td {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
}
.plant-mini-date {
    white-space: nowrap;
    font-size: 0.78rem;
}
.plant-mini-note {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    font-style: italic;
}

/* ===== Plant Activity Notebook (full-width, collapsible) ===== */
.plant-activity-links .btn-link {
    font-size: 0.8rem;
}
.plant-notebook-card .card-title {
    font-weight: 600;
}
.plant-notebook-table {
    font-size: 0.95rem;
}
.plant-notebook-table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    border-bottom-width: 1px;
    background: transparent;
}
.plant-notebook-col-date {
    width: 11rem;
    white-space: nowrap;
}
.plant-notebook-col-type {
    width: 9rem;
}
.plant-notebook-note {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
}
.plant-notebook-table .clickable-row {
    cursor: pointer;
}

/* ===== Activity Log page ===== */
/* Activity table */
.activities-table {
    font-size: 0.95rem;
}
.activities-table thead th {
    background: transparent;
    border-color: var(--color-border);
}
.activities-table tbody tr {
    transition: background-color 0.15s;
}
.activities-table tbody tr:hover {
    background-color: var(--color-hover-bg);
}
.al-th-date {
    width: 12rem;
}
.al-th-plant {
    width: 12%;
}
.al-th-strain {
    width: 12%;
}
.al-th-zone {
    width: 10%;
}
.al-th-activity {
    width: 12%;
}
.al-th-note {
    flex-grow: 1;
}
.al-cell-date {
    white-space: nowrap;
    font-size: 0.9rem;
}
.al-cell-plant {
    white-space: nowrap;
}
.al-cell-strain {
    white-space: nowrap;
}
.al-cell-zone {
    white-space: nowrap;
}
.al-cell-activity {
    white-space: nowrap;
}
.al-cell-note {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
    font-size: 0.9rem;
}
.activities-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-muted);
}

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

/* ===== Plant Measurements (grouped in sidebar) ===== */
.pm-group {
    border-bottom: 1px solid var(--color-border);
    padding: 0.45rem 0;
}
.pm-group:last-child {
    border-bottom: none;
}
.pm-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.35rem;
    border-radius: 0.25rem;
    transition: background 0.12s;
}
.pm-summary[style*="cursor"] {
    /* clickable rows get a hover */
}
.pm-summary:hover {
    background: rgba(var(--bs-primary-rgb, 13,110,253), 0.05);
}
.pm-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-latest {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-shrink: 0;
}
.pm-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-accent);
}
.pm-date {
    font-size: 0.72rem;
    color: var(--color-muted);
    white-space: nowrap;
}
.pm-toggle {
    font-size: 0.7rem;
    color: var(--color-muted);
    margin-left: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.pm-history {
    padding-left: 0.6rem;
    margin-top: 0.15rem;
    border-left: 2px solid var(--color-border);
    margin-left: 0.35rem;
}
.pm-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.2rem 0.35rem;
    border-radius: 0.2rem;
    transition: background 0.12s;
}
.pm-history-row:hover {
    background: rgba(var(--bs-primary-rgb, 13,110,253), 0.05);
}
.pm-hist-date {
    font-size: 0.75rem;
    color: var(--color-muted);
    white-space: nowrap;
}
.pm-hist-val {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
}

/* =====================================================================
   Plant page (views/plant.html + js/plant-page.js): header, notebook
   (one entry per day), photo panel; "All plants" mode. Mockup #6.
   ===================================================================== */
.pp {
    --pp-acc: #0d9488;
    --pp-acc-btn: #0d9488;
    --pp-acc-soft: rgba(13, 148, 136, .14);
    --pp-ink: var(--color-fg);
    --pp-muted: var(--color-muted);
    --pp-card: var(--color-card);
    --pp-line: #eef2f1;
    --pp-soft: #f6f9f8;
    --pp-sel: #e6f5f3;
    --pp-seg: #e2e8f0;
    --pp-faint: #94a3b8;
    --pp-shadow: 0 1px 3px rgba(15, 40, 35, .08);
    padding-bottom: 1rem;
}
[data-bs-theme="dark"] .pp {
    --pp-acc: #2dd4bf;
    --pp-acc-soft: rgba(45, 212, 191, .16);
    --pp-line: #2c3237;
    --pp-soft: #262c31;
    --pp-sel: rgba(45, 212, 191, .12);
    --pp-seg: #2e3338;
    --pp-faint: #8b95a1;
    --pp-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.pp-crumb { display: flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--pp-muted); margin: .5rem 0 .45rem; }
.pp-crumb a { color: var(--pp-acc); text-decoration: none; }
.pp-crumb-sep { color: var(--pp-faint); }
.pp-crumb-nav { margin-left: auto; display: flex; gap: .25rem; }
.pp-crumb-nav a { width: 28px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--pp-card); box-shadow: var(--pp-shadow); }

/* ---------- Header ---------- */
.pp-hero { display: grid; grid-template-columns: 1fr 36%; height: 196px; background: var(--pp-card); border-radius: 16px; overflow: hidden; box-shadow: var(--pp-shadow); transition: height .2s ease; }
.pp-htxt { padding: .85rem 1.15rem .7rem; display: flex; flex-direction: column; min-width: 0; }
.pp-hero h1 { font-size: 1.55rem; font-weight: 800; margin: 0; line-height: 1.15; color: var(--pp-ink); }
.pp-sub { color: var(--pp-muted); font-size: .88rem; }
.pp-sub a { color: inherit; }
.pp-desc { color: var(--pp-muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-facts { display: flex; align-items: center; gap: .35rem .9rem; flex-wrap: wrap; font-size: .85rem; color: var(--pp-muted); margin-top: .45rem; }
.pp-facts b { color: var(--pp-ink); }
.pp-facts .sep { color: var(--pp-faint); }
.pp-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .18rem .5rem; border-radius: 6px; background: #fef3c7; color: #92400e; }
.pp-tag.photo { background: #fef9c3; color: #a16207; }
.pp-tag.neutral { background: var(--pp-seg); color: var(--pp-ink); }
.pp-tag a { color: inherit; }
[data-bs-theme="dark"] .pp-tag { background: rgba(251, 191, 36, .14); color: #fcd34d; }
[data-bs-theme="dark"] .pp-tag.photo { background: rgba(250, 204, 21, .13); color: #fde047; }
[data-bs-theme="dark"] .pp-tag.neutral { background: var(--pp-seg); color: var(--pp-ink); }
.pp-track { display: flex; align-items: flex-start; margin-top: auto; padding-top: .55rem; }
.pp-stg { --sc: #94a3b8; flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pp-stg:last-child { flex: none; }
.pp-stg-row { display: flex; align-items: center; width: 100%; }
.pp-node { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: .72rem; background: var(--pp-seg); color: var(--pp-faint); padding: 0; transition: transform .12s, box-shadow .12s; }
.pp-node[data-stage] { cursor: pointer; }
.pp-node[data-stage]:hover { transform: scale(1.12); box-shadow: 0 0 0 3px var(--pp-acc-soft); }
.pp-stg.done .pp-node { background: var(--sc); color: #fff; }
.pp-stg.cur .pp-node { background: var(--pp-card); color: var(--sc); box-shadow: 0 0 0 4px var(--sc), 0 0 0 7px color-mix(in srgb, var(--sc) 25%, transparent); }
.pp-seg-line { flex: 1; height: 6px; margin: 0 3px; border-radius: 3px; background: var(--pp-seg); }
.pp-stg.done .pp-seg-line { background: var(--sc); }
.pp-stg.cur .pp-seg-line { background: linear-gradient(90deg, var(--sc) 0 45%, var(--pp-seg) 45% 100%); }
.pp-lbl { font-size: .68rem; color: var(--pp-faint); margin-top: .3rem; white-space: nowrap; line-height: 1.15; }
.pp-stg.done .pp-lbl { color: var(--pp-muted); }
.pp-stg.cur .pp-lbl { color: var(--sc); font-weight: 800; }
.pp-lbl small { display: block; font-weight: 600; opacity: .8; font-size: inherit; }
.pp-hphoto { position: relative; background: #0b1110; overflow: hidden; }
.pp-hphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-hphoto .pp-nophoto { position: absolute; inset: 0; display: grid; place-items: center; color: #94a3b8; font-size: .85rem; text-align: center; }
.pp-src { position: absolute; left: .6rem; top: .6rem; display: flex; background: rgba(0, 0, 0, .45); border-radius: 99px; padding: 2px; backdrop-filter: blur(4px); }
.pp-src button { border: 0; background: transparent; color: #e2e8f0; font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 99px; }
.pp-src button.on { background: #fff; color: #172322; }
.pp-live-badge { position: absolute; left: .6rem; bottom: .6rem; display: none; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 800; color: #fff; background: rgba(220, 38, 38, .9); padding: .15rem .5rem; border-radius: 5px; }
.pp-live-badge i { font-size: .5rem; animation: pp-blink 1.2s infinite; }
@keyframes pp-blink { 50% { opacity: .25; } }
.pp-hphoto.live .pp-live-badge { display: inline-flex; }
.pp-live-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.2rem; display: none; }
.pp-hphoto.live .pp-live-play { display: block; }
.pp-hphoto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.pp-hacts { position: absolute; right: .6rem; bottom: .6rem; display: flex; gap: .35rem; }
.pp-hacts a, .pp-hacts button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(4px); display: grid; place-items: center; text-decoration: none; }
.pp-hacts a:hover, .pp-hacts button:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.pp-hacts .danger { color: #fecaca; }
.pp-hero.slim { height: 112px; }
.pp-hero.slim .pp-sub, .pp-hero.slim .pp-desc, .pp-hero.slim .pp-lbl, .pp-hero.slim .pp-src { display: none; }
.pp-hero.slim .pp-htxt { padding-top: .6rem; }
.pp-hero.slim h1 { font-size: 1.2rem; }
.pp-hero.slim .pp-facts { margin-top: .2rem; }
.pp-hero.slim .pp-track { padding-top: .35rem; }
.pp-hero.slim .pp-node { width: 22px; height: 22px; font-size: .6rem; }

/* All plants header */
.pp-hero.all, .pp-hero.all.slim { grid-template-columns: 1fr; height: auto; }
.pp-allh { padding: .75rem 1.15rem .8rem; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.pp-allh .ttl { display: flex; align-items: baseline; gap: .4rem .8rem; flex-wrap: wrap; }
.pp-allh h1 { font-size: 1.45rem; }
.pp-hero.all.slim .pp-sub { display: none; }
.pp-pchips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 4px; }
.pp-pchip { --sc: #64748b; display: flex; align-items: center; gap: .55rem; border: 1px solid var(--pp-line); background: var(--pp-card); color: var(--pp-ink); border-radius: 12px; padding: .35rem .75rem .35rem .45rem; text-align: left; flex: none; text-decoration: none; }
.pp-pchip:hover { border-color: var(--pp-acc); box-shadow: 0 0 0 1px var(--pp-acc); color: var(--pp-ink); }
.pp-pchip .av { width: 36px; height: 36px; margin: 4px; border-radius: 50%; background: var(--pp-seg) center/cover; display: grid; place-items: center; color: var(--pp-faint); flex: none; box-shadow: 0 0 0 2px var(--pp-card), 0 0 0 4px var(--sc); }
.pp-pchip b { display: block; font-size: .86rem; line-height: 1.2; }
.pp-pchip small { display: block; font-size: .72rem; font-weight: 800; color: var(--sc); }
.pp-pchip small span { color: var(--pp-faint); font-weight: 600; }
.pp-pchip.off { opacity: .45; }

/* ---------- Notebook ---------- */
.pp-main { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 1rem; margin-top: .8rem; }
.pp-nb { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pp-toolbar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .45rem; }
.pp-toolbar h2 { font-size: 1.05rem; font-weight: 800; margin: 0 .3rem 0 0; color: var(--pp-ink); }
.pp-segsw { display: inline-flex; background: var(--pp-seg); border-radius: 9px; padding: 2px; }
.pp-segsw button { border: 0; background: transparent; font-size: .78rem; font-weight: 600; padding: .25rem .6rem; border-radius: 7px; color: var(--pp-muted); }
.pp-segsw button.on { background: var(--pp-card); color: var(--pp-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pp-b { border: 0; border-radius: 9px; font-size: .8rem; padding: .35rem .7rem; background: var(--pp-card); color: var(--pp-ink); box-shadow: var(--pp-shadow); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; }
.pp-b:hover { color: var(--pp-ink); box-shadow: 0 0 0 1px var(--pp-acc); }
.pp-b.primary { background: var(--pp-acc-btn); color: #fff; }
.pp-b.primary:hover { color: #fff; filter: brightness(1.08); }
.pp-b.active { box-shadow: 0 0 0 2px var(--pp-acc); }
.pp-b .n { background: var(--pp-acc-btn); color: #fff; border-radius: 99px; padding: 0 .38rem; font-size: .68rem; margin-left: .25rem; }
.pp-right { margin-left: auto; display: flex; gap: .4rem; }
.pp-srch { position: relative; width: 190px; }
.pp-srch i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--pp-faint); font-size: .75rem; }
.pp-srch input { width: 100%; border: 0; border-radius: 9px; padding: .35rem .6rem .35rem 1.85rem; font-size: .8rem; background: var(--pp-card); color: var(--pp-ink); box-shadow: var(--pp-shadow); }
.pp-srch input:focus { outline: 2px solid var(--pp-acc); }
.pp-all .pp-right .pp-b:not(.primary) .lbl-t { display: none; }
.pp-popwrap { position: relative; }
.pp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 260px; max-height: 70vh; overflow-y: auto; background: var(--pp-card); border-radius: 12px; padding: .7rem; box-shadow: 0 10px 30px rgba(15, 40, 35, .25); display: none; }
.pp-pop.right { left: auto; right: 0; width: auto; min-width: 200px; }
.pp-pop.open { display: block; }
.pp-pop h6 { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-muted); margin: 0 0 .4rem; }
.pp-pop label { display: flex; align-items: center; gap: .5rem; font-size: .88rem; padding: .2rem 0; cursor: pointer; color: var(--pp-ink); white-space: nowrap; }
.pp-pop label.tent { font-weight: 700; }
.pp-pop label.sub { padding-left: 1.3rem; }
.pp-pop label small { margin-left: auto; color: var(--pp-faint); padding-left: .6rem; }
.pp-pop hr { margin: .55rem 0; opacity: .15; }
.pp-pop .mode, .pp-pop .quick { display: flex; gap: .3rem; margin: .5rem 0 .2rem; }
.pp-pop .quick { margin: 0 0 .4rem; }
.pp-pop .mode button, .pp-pop .quick button { flex: 1; border: 1px solid var(--pp-line); background: var(--pp-card); color: var(--pp-ink); border-radius: 7px; font-size: .75rem; padding: .25rem; }
.pp-pop .mode button.on { background: var(--pp-acc-btn); color: #fff; border-color: var(--pp-acc-btn); }
.pp-pop a.pp-menu-item { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem; border-radius: 7px; color: var(--pp-ink); text-decoration: none; font-size: .86rem; white-space: nowrap; }
.pp-pop a.pp-menu-item:hover { background: var(--pp-soft); }
.pp-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .45rem; font-size: .78rem; color: var(--pp-muted); }
.pp-chips:empty { display: none; }
.pp-fchip { display: inline-flex; align-items: center; gap: .3rem; background: var(--pp-card); border-radius: 99px; padding: .15rem .25rem .15rem .55rem; font-size: .78rem; color: var(--pp-ink); box-shadow: var(--pp-shadow); }
.pp-fchip i.t { color: var(--c, var(--pp-acc)); }
.pp-fchip button { border: 0; background: var(--pp-seg); border-radius: 50%; width: 18px; height: 18px; font-size: .6rem; color: var(--pp-muted); line-height: 1; padding: 0; }
.pp-link { border: 0; background: none; color: var(--pp-acc); font-size: .78rem; padding: 0; }
.pp-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 1rem 6px; margin: -6px -8px 0 -6px; }
.pp-ico { --c: #888; display: inline-grid; place-items: center; position: relative; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-size: .72rem; border: 0; padding: 0; flex: none; }
.pp-ico .cnt { position: absolute; top: -6px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px; background: #e5484d; color: #fff; font-size: .6rem; font-weight: 700; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--pp-card); }
/* Photos: teal (the photo panel's color), so it can't be mistaken for the gray Note icon. */
.pp-ico.cam { --c: #0d9488; cursor: pointer; }
[data-bs-theme="dark"] .pp-ico.cam { --c: #2dd4bf; }
.pp-row { --sc: #94a3b8; display: grid; grid-template-columns: 78px auto minmax(0, 1fr) auto; gap: .7rem; align-items: start; padding: .55rem .8rem; cursor: pointer; position: relative; color: var(--pp-ink); }
.pp-row.all { grid-template-columns: 70px 185px auto minmax(0, 1fr) auto; }
.pp-row .dd { font-weight: 800; font-size: .95rem; line-height: 1.1; }
.pp-row .dd small { display: block; font-size: .68rem; font-weight: 600; color: var(--pp-faint); margin-top: .15rem; white-space: nowrap; }
.pp-row .ics { display: flex; gap: 3px; flex-wrap: wrap; max-width: 92px; min-width: 24px; }
.pp-row .tx { font-size: .9rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.pp-row .tx .muted { color: var(--pp-faint); font-style: italic; }
.pp-row .mval { font-weight: 700; color: #a16207; white-space: nowrap; }
[data-bs-theme="dark"] .pp-row .mval { color: #facc15; }
.pp-row .edit { visibility: hidden; border: 0; background: var(--pp-seg); color: var(--pp-ink); border-radius: 8px; font-size: .75rem; padding: .2rem .55rem; white-space: nowrap; }
.pp-row.is-selected .edit { visibility: visible; }
.pp-row:hover { background: var(--pp-soft); }
.pp-row mark { background: #fef08a; color: #172322; padding: 0 .1rem; border-radius: 3px; }
.pp-row .who { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pp-row .who a { font-weight: 700; font-size: .86rem; color: var(--pp-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-row .who a:hover { color: var(--pp-acc); text-decoration: underline; }
.pp-stgt { --c: #64748b; font-size: .68rem; font-weight: 800; color: var(--c); display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.pp-stgt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.pp-week { margin-bottom: .6rem; }
.pp-week-h { --sc: #94a3b8; display: flex; align-items: center; gap: .45rem; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-muted); padding: .2rem .2rem .3rem; }
.pp-week-h .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sc); }
.pp-week-h .st { color: var(--sc); }
.pp-week-b, .pp-list-b { background: var(--pp-card); border-radius: 14px; box-shadow: var(--pp-shadow); }
.pp-list-b { overflow: hidden; }
.pp-week-b .pp-row { border-top: 1px solid var(--pp-line); border-radius: 12px; }
.pp-week-b .pp-row:first-child { border-top: 0; }
.pp-week-b .pp-row.is-selected { background: var(--pp-card); box-shadow: 0 6px 22px rgba(13, 148, 136, .22), 0 0 0 2px var(--pp-acc); z-index: 2; border-top-color: transparent; }
.pp-week-b .pp-row.is-selected + .pp-row { border-top-color: transparent; }
.pp-month { padding: .3rem .8rem; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-faint); background: var(--pp-soft); }
.pp-list-b .pp-row { border-top: 1px solid var(--pp-line); padding-top: .45rem; padding-bottom: .45rem; }
.pp-list-b .pp-month + .pp-row { border-top: 0; }
.pp-list-b .pp-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sc); opacity: .55; }
.pp-list-b .pp-row.is-selected { background: var(--pp-sel); }
.pp-list-b .pp-row.is-selected::before { opacity: 1; width: 4px; }
.pp-empty { text-align: center; color: var(--pp-faint); padding: 2rem 1rem; background: var(--pp-card); border-radius: 14px; }
.pp-empty i { font-size: 1.6rem; display: block; margin-bottom: .5rem; }

/* ---------- Photo panel ---------- */
.pp-panel { display: flex; flex-direction: column; min-height: 0; }
.pp-ptab { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; background: var(--pp-acc-btn); color: #fff; border-radius: 12px 12px 0 0; padding: .35rem .8rem; font-weight: 700; font-size: .86rem; max-width: 100%; }
.pp-pbody { flex: 1; min-height: 0; overflow-y: auto; background: var(--pp-card); border-radius: 0 14px 14px 14px; box-shadow: 0 6px 22px rgba(13, 148, 136, .18), 0 0 0 2px var(--pp-acc); padding: .6rem; }
.pp-pbody img { width: 100%; border-radius: 10px; display: block; cursor: zoom-in; }
.pp-pbody img + img { margin-top: .5rem; }
.pp-pempty { height: 100%; min-height: 220px; border-radius: 10px; background: var(--pp-soft); display: grid; place-items: center; text-align: center; color: var(--pp-faint); font-size: .9rem; }
.pp-pempty i.big { font-size: 1.6rem; display: block; margin-bottom: .4rem; opacity: .6; }
.pp-pplants { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .6rem; }
.pp-pplant { display: flex; align-items: center; gap: .5rem; font-size: .86rem; }
.pp-pplant a { font-weight: 700; color: var(--pp-ink); text-decoration: none; }
.pp-pplant a:hover { color: var(--pp-acc); text-decoration: underline; }
.pp-pplant small { margin-left: auto; color: var(--pp-muted); font-size: .74rem; white-space: nowrap; }
.pp-pcap { font-size: .74rem; font-weight: 700; color: var(--pp-muted); margin: .2rem 0 .35rem; }
.pp-pnote { font-size: .78rem; color: var(--pp-muted); margin-top: .6rem; }

/* ---------- Windows ---------- */
.pp-dialog { border: 0; border-radius: 14px; }
.pp-tchips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pp-tchip { --c: #888; border: 1px solid var(--color-card-border); background: var(--pp-card, var(--color-card)); color: var(--color-fg); border-radius: 99px; padding: .3rem .7rem; font-size: .85rem; }
.pp-tchip i { color: var(--c); margin-right: .2rem; }
.pp-tchip.on { background: var(--c); border-color: var(--c); color: #fff; }
.pp-tchip.on i { color: #fff; }
.pp-mrow { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.pp-viewer .modal-content { background: rgba(10, 12, 16, .96); color: #e8ebf0; border: 0; }
.pp-vtop { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .75rem 1rem; font-size: .9rem; flex-wrap: wrap; }
.pp-vtop .acts { display: flex; gap: .4rem; align-items: center; }
.pp-vbody { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-height: 0; }
.pp-vbody img { max-width: 92%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.pp-vnav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; }
.pp-vnav.prev { left: 1rem; }
.pp-vnav.next { right: 1rem; }
/* Decorate / Delete under the photo, away from the close button at the top. */
.pp-vacts { display: flex; gap: .6rem; justify-content: center; padding: .6rem .75rem 0; }
.pp-vstrip { display: flex; gap: .4rem; justify-content: center; padding: .75rem; overflow-x: auto; }
.pp-vstrip img { height: 54px; border-radius: 4px; opacity: .5; cursor: pointer; }
.pp-vstrip img.active { opacity: 1; outline: 2px solid #2dd4bf; }
.pp-gal-day { margin-bottom: 1rem; }
.pp-gal-date { font-weight: 600; font-size: .85rem; margin-bottom: .4rem; }
.pp-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.pp-gal-item { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: var(--color-row-hover); }
.pp-gal-item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.pp-gal-jump { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .92); color: #0d9488; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }

/* Desktop: header, toolbar and photo panel stay put; only the notebook scrolls. */
@media (min-width: 992px) {
    .pp-main { height: var(--pp-main-h, 70vh); min-height: 420px; }
}
@media (max-width: 1199px) {
    .pp-main { grid-template-columns: minmax(0, 1fr) 340px; }
    .pp-row.all { grid-template-columns: 70px 160px auto minmax(0, 1fr) auto; }
}
@media (max-width: 991px) {
    .pp-main { grid-template-columns: minmax(0, 1fr); }
    .pp-panel { display: none; }
    .pp-scroll { overflow: visible; }
    .pp-row.all { grid-template-columns: 70px minmax(0, 1fr) auto; }
    .pp-row.all .who { grid-column: 2; grid-row: 1; flex-direction: row; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
    .pp-row.all .ics { grid-column: 3; grid-row: 1; justify-content: flex-end; max-width: none; }
    .pp-row.all .tx { grid-column: 1 / -1; grid-row: 2; }
    .pp-row.all .edit { grid-column: 3; grid-row: 3; justify-self: end; }
    .pp-row.all:not(.is-selected) .edit { display: none; }
}
@media (max-width: 575px) {
    .pp-hero { grid-template-columns: 1fr; height: auto; }
    .pp-hphoto { order: -1; height: 170px; }
    .pp-lbl { display: none; }
    .pp-stg.cur .pp-lbl { display: block; font-size: .7rem; }
    .pp-lbl small { display: none; }
    .pp-node { width: 24px; height: 24px; }
    .pp-hacts a, .pp-hacts button { width: 44px; height: 44px; }
    .pp-row { grid-template-columns: 76px 1fr auto; }
    .pp-row .ics { grid-column: 2; max-width: none; }
    .pp-row .tx { grid-column: 1 / -1; grid-row: 2; }
    .pp-row.all { grid-template-columns: 66px minmax(0, 1fr) auto; }
    .pp-toolbar .lbl-t { display: none; }
    .pp-right { margin-left: 0; }
    .pp-srch { width: 100%; order: 5; }
    .pp-pchips { flex-wrap: nowrap; overflow-x: auto; }
}

/* Settings > Activities: icon + color per activity type */
.act-look { --act-c: #64748b; }
.act-icons, .act-colors { display: flex; flex-wrap: wrap; gap: .3rem; }
.act-pick { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--color-card-border); background: var(--color-card); color: var(--act-c); display: grid; place-items: center; padding: 0; }
.act-pick.on { background: var(--act-c); color: #fff; border-color: var(--act-c); }
.act-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--color-card); background: var(--c); box-shadow: 0 0 0 1px var(--color-card-border); padding: 0; }
.act-swatch.on { box-shadow: 0 0 0 2px var(--color-fg); }
.act-chip { --c: #64748b; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-size: .72rem; margin-right: .35rem; }

/* =====================================================================
   Strains page (views/strains.html + js/strains-page.js), mockup S4:
   Seed Vault / Wanted / All strains tabs, cards or list, quick actions.
   ===================================================================== */
.sp {
    --sp-acc: #16a34a;
    --sp-acc-dark: #15803d;
    --sp-ink: var(--color-fg);
    --sp-muted: var(--color-muted);
    --sp-card: var(--color-card);
    --sp-line: #e7ecea;
    --sp-soft: #f8fafc;
    --sp-seg: #e2e8f0;
    --sp-faint: #94a3b8;
    --sp-shadow: 0 1px 2px rgba(15, 40, 35, .06);
    padding-bottom: 2rem;
}
[data-bs-theme="dark"] .sp {
    --sp-line: #2c3237;
    --sp-soft: #262c31;
    --sp-seg: #2e3338;
    --sp-faint: #8b95a1;
    --sp-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.sp-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .4rem 0 .9rem; }
.sp-top h1 { font-size: 1.6rem; font-weight: 800; margin: 0; color: var(--sp-ink); }
.sp-top p { margin: .1rem 0 0; color: var(--sp-muted); }
.sp-adds { display: flex; gap: .45rem; }
.sp-add { border: 0; border-radius: 10px; font-size: .85rem; font-weight: 600; padding: .45rem .85rem; white-space: nowrap; }
.sp-add.primary { background: var(--sp-acc); color: #fff; }
.sp-add.primary:hover { background: var(--sp-acc-dark); }
.sp-add.secondary { background: var(--sp-card); color: var(--sp-ink); box-shadow: 0 0 0 1px var(--sp-line); }
.sp-add.secondary:hover { box-shadow: 0 0 0 1px var(--sp-acc); color: var(--sp-acc); }

.sp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: .8rem; }
.sp-tab { border: 0; background: var(--sp-card); border-radius: 14px; padding: .7rem .9rem; text-align: left; box-shadow: var(--sp-shadow); display: flex; gap: .75rem; align-items: center; color: var(--sp-ink); }
.sp-tab .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--sp-seg); color: var(--sp-muted); font-size: 1rem; flex: none; }
.sp-tab b { font-size: 1rem; display: block; }
.sp-tab small { color: var(--sp-muted); font-size: .76rem; }
.sp-tab .n { margin-left: auto; font-size: 1.4rem; font-weight: 800; color: var(--sp-faint); }
.sp-tab.on { box-shadow: 0 0 0 2px var(--sp-acc), 0 6px 18px rgba(22, 163, 74, .15); }
.sp-tab.on .ic { background: var(--sp-acc); color: #fff; }
.sp-tab.on .n { color: var(--sp-acc); }
.sp-tab[data-tab=vault].on .ic { background: #475569; color: #fff; }
.sp-tab[data-tab=wanted].on { box-shadow: 0 0 0 2px #f59e0b, 0 6px 18px rgba(245, 158, 11, .15); }
.sp-tab[data-tab=wanted].on .ic { background: #f59e0b; color: #fff; }
.sp-tab[data-tab=wanted].on .n { color: #d97706; }

.sp-bar { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.sp-bar-r { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sp-filters { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.sp-filters .form-select { width: auto; border-radius: 9px; font-size: .8rem; }
.sp-search { position: relative; flex: 1; min-width: 180px; max-width: 320px; }
.sp-search i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--sp-faint); font-size: .78rem; }
.sp-search input { width: 100%; border: 1px solid var(--color-input-border); border-radius: 9px; padding: .32rem .6rem .32rem 1.9rem; font-size: .82rem; background: var(--color-input-bg); color: var(--color-input-fg); }
.sp-quick-sort { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--sp-muted); }
.sp-seg { display: inline-flex; background: var(--sp-seg); border-radius: 9px; padding: 2px; }
.sp-seg button { border: 0; background: transparent; font-size: .78rem; font-weight: 600; padding: .25rem .6rem; border-radius: 7px; color: var(--sp-muted); white-space: nowrap; }
.sp-seg button.on { background: var(--sp-card); color: var(--sp-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.sp-summary { font-size: .82rem; color: var(--sp-muted); }
.sp-summary b { color: var(--sp-ink); }
.sp-summary .warn { color: #c2410c; }

.sp-b { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .14rem .5rem; border-radius: 99px; white-space: nowrap; }
.sp-b i { font-size: .68rem; }
.sp-b.seeds { background: #dcfce7; color: #166534; }
.sp-step { display: inline-flex; align-items: center; gap: .2rem; }
.sp-step button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--sp-line); background: var(--sp-card); color: var(--sp-muted); font-size: .85rem; line-height: 1; padding: 0; display: inline-grid; place-items: center; }
.sp-step button:hover:not(:disabled) { border-color: #16a34a; color: #16a34a; }
.sp-step button:disabled { opacity: .5; }
.sp-step .sp-step-n { min-width: 1.4em; text-align: center; }
.sp-b.wanted { background: #fef3c7; color: #92400e; }
.sp-b.none { background: var(--sp-seg); color: var(--sp-faint); }
.sp-b.muted { background: var(--sp-seg); color: var(--sp-muted); }
.sp-b.old { background: #ffedd5; color: #c2410c; }
.sp-b.grow { background: #f3e8ff; color: #7e22ce; }
.sp-b.auto { background: #fef3c7; color: #92400e; }
.sp-b.photo { background: #e0f2fe; color: #075985; }
.sp-b.photo i { color: #f59e0b; }

.sp-btn { border: 1px solid var(--sp-line); background: var(--sp-card); color: var(--sp-ink); border-radius: 8px; font-size: .76rem; font-weight: 600; padding: .25rem .55rem; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.sp-btn:hover { border-color: var(--sp-acc); color: var(--sp-acc); }
.sp-btn.primary { background: var(--sp-acc); border-color: var(--sp-acc); color: #fff; }
.sp-btn.primary:hover { background: var(--sp-acc-dark); border-color: var(--sp-acc-dark); color: #fff; }
.sp-btn.on { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.sp-acts { display: flex; gap: .3rem; flex-wrap: wrap; }

.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .7rem; }
.sp-card { background: var(--sp-card); border-radius: 14px; padding: .8rem .9rem; box-shadow: var(--sp-shadow); display: flex; flex-direction: column; gap: .45rem; }
.sp-card:hover { box-shadow: 0 6px 18px rgba(15, 40, 35, .12); }
.sp-nm { font-weight: 800; font-size: 1.02rem; color: var(--sp-ink); text-decoration: none; line-height: 1.2; }
.sp-nm:hover { color: var(--sp-acc); }
.sp-br { font-size: .8rem; color: var(--sp-muted); }
.sp-bs { display: flex; flex-wrap: wrap; gap: .3rem; }
.sp-bs:empty { display: none; }
.sp-ds { font-size: .82rem; color: var(--sp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-lin { font-size: .78rem; color: var(--sp-muted); background: var(--sp-soft); border: 1px solid var(--sp-line); border-radius: 7px; padding: .2rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-lin i { color: var(--sp-faint); margin-right: .3rem; }
.sp-loc { font-size: .75rem; color: var(--sp-muted); }
.sp-foot { margin-top: auto; padding-top: .45rem; border-top: 1px solid var(--sp-line); }

.sp-tbl { background: var(--sp-card); border-radius: 14px; box-shadow: var(--sp-shadow); overflow-x: auto; }
.sp-tbl table { width: 100%; border-collapse: collapse; min-width: 860px; color: var(--sp-ink); }
.sp-tbl th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sp-muted); padding: .5rem .7rem; background: var(--sp-soft); font-weight: 700; white-space: nowrap; }
.sp-tbl th.s { cursor: pointer; }
.sp-tbl th.s:hover { color: var(--sp-ink); }
.sp-tbl th.s i { margin-left: .25rem; opacity: .5; }
.sp-tbl th.s.on { color: var(--sp-acc); }
.sp-tbl th.s.on i { opacity: 1; }
.sp-tbl td { padding: .5rem .7rem; border-top: 1px solid var(--sp-line); font-size: .86rem; vertical-align: middle; }
.sp-tbl td .sp-nm { font-size: .92rem; }
.sp-tbl td .sp-br { font-size: .74rem; }
.sp-lin-c { font-size: .8rem; color: var(--sp-muted); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-age-o { color: #c2410c; font-weight: 700; }
.sp-tbl tr.old td:first-child { box-shadow: inset 4px 0 0 #f97316; }
.sp-empty { text-align: center; color: var(--sp-faint); padding: 2.5rem 1rem; background: var(--sp-card); border-radius: 14px; }
.sp-empty i { font-size: 1.8rem; display: block; margin-bottom: .5rem; }

/* Windows (also rendered outside .sp, so plain theme variables) */
.sp-dialog { border: 0; border-radius: 14px; }
.sp-dest { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.sp-dest label { border: 1px solid var(--color-card-border); border-radius: 10px; padding: .5rem; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.sp-dest label input { display: none; }
.sp-dest label i { color: #94a3b8; }
.sp-dest label b { font-size: .85rem; }
.sp-dest label small { font-size: .7rem; color: var(--color-muted); }
.sp-dest label.on { border-color: #16a34a; background: rgba(22, 163, 74, .08); box-shadow: 0 0 0 2px rgba(22, 163, 74, .2); }
.sp-dest label.on i { color: #16a34a; }
.sp-results { max-height: 52vh; overflow-y: auto; }
.sp-res { display: flex; gap: .75rem; align-items: center; padding: .6rem .7rem; border: 1px solid var(--color-card-border); border-radius: 10px; margin-bottom: .4rem; }
.sp-res.have { background: var(--color-row-hover); }
.sp-have { background: rgba(59, 130, 246, .12); color: #1e40af; border-radius: 8px; padding: .35rem .55rem; font-size: .8rem; margin-top: .35rem; }
[data-bs-theme="dark"] .sp-have { color: #93c5fd; }
.sp-pick { background: var(--color-row-hover); border-radius: 10px; padding: .55rem .7rem; }

@media (max-width: 767px) {
    .sp-tabs { gap: .35rem; }
    .sp-tab { flex-direction: column; align-items: flex-start; gap: .3rem; padding: .55rem; }
    .sp-tab small { display: none; }
    .sp-tab .n { margin-left: 0; font-size: 1.1rem; }
    .sp-tab .ic { width: 32px; height: 32px; }
    .sp-adds { width: 100%; }
    .sp-adds .sp-add { flex: 1; }
}
@media (max-width: 575px) {
    .sp-search { max-width: none; flex-basis: 100%; }
    .sp-filters .form-select { flex: 1 1 45%; }
    .sp-dest { grid-template-columns: 1fr; }
    .sp-dest label { flex-direction: row; gap: .5rem; text-align: left; }
    .sp-btn { padding: .4rem .6rem; }
}

/* Our own icons (outline style, drawn for Isley), used like Font Awesome:
   <i class="ic-vault"></i> takes the text color and font size. */
.ic-vault { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; background-color: currentColor;
    -webkit-mask: url(/static/img/icons/vault.svg) center / contain no-repeat; mask: url(/static/img/icons/vault.svg) center / contain no-repeat; }
.sp-tab .ic .ic-vault { font-size: 1.1rem; }
.sp-empty .ic-vault { margin: 0 auto .5rem; }

/* Type badges: the yellow/orange sun on Photoperiod (as on the new pages). */
.strain-badge-photo i { color: #f59e0b; }

/* =====================================================================
   Older pages in the new look until each is redesigned (Add/Edit plant,
   strain page, Add/Edit strain): green instead of blue, bold headings,
   softer cards. Wrap the page's container in .ns.
   ===================================================================== */
.ns {
    --color-accent: #16a34a;
    --color-accent-hover: #15803d;
    --bs-primary: #16a34a;
    --bs-primary-rgb: 22, 163, 74;
    --bs-link-color: #15803d;
    --bs-link-color-rgb: 21, 128, 61;
    --bs-link-hover-color: #166534;
    --bs-link-hover-color-rgb: 22, 101, 52;
}
[data-bs-theme="dark"] .ns {
    --color-accent: #16a34a;
    --color-accent-hover: #22c55e;
    --bs-link-color: #4ade80;
    --bs-link-color-rgb: 74, 222, 128;
    --bs-link-hover-color: #86efac;
    --bs-link-hover-color-rgb: 134, 239, 172;
}
.ns h1.text-primary, .ns .card-title.text-primary, .ns h2.text-primary, .ns h3.text-primary { color: var(--color-fg) !important; }
.ns .card-title i, .ns h1 > i:first-child { color: #16a34a; }
.ns h1, .ns .display-5 { font-weight: 800; letter-spacing: -.01em; }
.ns .display-5 { font-size: 1.9rem; line-height: 1.15; }
.ns h1.h3 { font-size: 1.5rem; }
.ns .card-title { font-weight: 800; }
.ns .card { border: 0; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 40, 35, .08); }
[data-bs-theme="dark"] .ns .card { box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.ns .btn-primary {
    --bs-btn-bg: #16a34a; --bs-btn-border-color: #16a34a;
    --bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d;
    --bs-btn-active-bg: #166534; --bs-btn-active-border-color: #166534;
    --bs-btn-disabled-bg: #16a34a; --bs-btn-disabled-border-color: #16a34a;
}
.ns .btn-outline-primary {
    --bs-btn-color: #16a34a; --bs-btn-border-color: #16a34a;
    --bs-btn-hover-bg: #16a34a; --bs-btn-hover-border-color: #16a34a; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #15803d; --bs-btn-active-border-color: #15803d;
}
.ns .form-control:focus, .ns .form-select:focus, .ns .form-check-input:focus {
    border-color: #4ade80; box-shadow: 0 0 0 .25rem rgba(22, 163, 74, .2);
}
.ns .form-check-input:checked { background-color: #16a34a; border-color: #16a34a; }

/* =====================================================================
   Environment page (views/sensors.html + js/sensors-page.js), mockup E4:
   tent switch, readings strip, stacked charts, AC Infinity device lane.
   Manage sensors (views/sensors-manage.html) shares the .sx basics.
   ===================================================================== */
.sx {
    --sx-acc: #16a34a;
    --sx-acc-dark: #15803d;
    --sx-ink: var(--color-fg);
    --sx-muted: var(--color-muted);
    --sx-card: var(--color-card);
    --sx-line: #e7ecea;
    --sx-soft: #f8fafc;
    --sx-seg: #e2e8f0;
    --sx-faint: #94a3b8;
    --sx-shadow: 0 1px 2px rgba(15, 40, 35, .06);
    padding-bottom: 2rem;
}
[data-bs-theme="dark"] .sx {
    --sx-line: #2c3237;
    --sx-soft: #262c31;
    --sx-seg: #2e3338;
    --sx-faint: #8b95a1;
    --sx-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.sx-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: .4rem 0 .9rem; }
.sx-top h1 { font-size: 1.6rem; font-weight: 800; margin: 0; color: var(--sx-ink); }
.sx-top p { margin: .1rem 0 0; color: var(--sx-muted); }
.sx-top-r { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.sx-link { color: var(--sx-acc); text-decoration: none; font-size: .85rem; font-weight: 600; border: 0; background: none; padding: 0; white-space: nowrap; }
.sx-link:hover { color: var(--sx-acc-dark); text-decoration: underline; }
.sx-seg { display: inline-flex; background: var(--sx-seg); border-radius: 9px; padding: 2px; flex-wrap: wrap; }
.sx-seg button { border: 0; background: transparent; font-size: .8rem; font-weight: 600; padding: .3rem .65rem; border-radius: 7px; color: var(--sx-muted); white-space: nowrap; }
.sx-seg button.on { background: var(--sx-card); color: var(--sx-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.sx-seg button.on i { color: var(--sx-acc); }
.sx-btn { border: 0; background: var(--sx-acc); color: #fff; border-radius: 8px; font-size: .8rem; font-weight: 600; padding: .35rem .75rem; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.sx-btn:hover { background: var(--sx-acc-dark); color: #fff; }
.sx-card { background: var(--sx-card); border-radius: 14px; box-shadow: var(--sx-shadow); margin-bottom: 1rem; overflow: hidden; }

.sx-readings { display: flex; gap: .5rem; overflow-x: auto; padding: 2px 2px .4rem; margin-bottom: .6rem; }
.sx-read { --c: #888; flex: 1 0 140px; border: 0; background: var(--sx-card); border-radius: 12px; padding: .5rem .7rem; text-align: left; box-shadow: var(--sx-shadow);
    display: flex; flex-direction: column; gap: .1rem; transition: opacity .15s, box-shadow .15s; color: var(--sx-ink); cursor: pointer; min-width: 0; }
.sx-read .lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sx-muted); display: flex; align-items: center; gap: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-read .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.sx-read .val { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.sx-read .val small, .sx-m-lbl .v small { font-size: .74rem; font-weight: 600; color: var(--sx-muted); margin-left: .2rem; }
.sx-read .st { font-size: .66rem; font-weight: 700; color: #b45309; }
.sx-read:hover { box-shadow: 0 0 0 2px var(--c); }
.sx-read.off { opacity: .45; }
.sx-read.off .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }

.sx-range { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .55rem .7rem; border-bottom: 1px solid var(--sx-line); }
.sx-when { display: flex; gap: .5rem; align-items: center; font-size: .85rem; flex: 1; min-width: 0; flex-wrap: wrap; color: var(--sx-ink); }
.sx-when span { color: var(--sx-faint); }
.sx-mark { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; color: #166534; background: #dcfce7; border-radius: 99px; padding: .15rem .25rem .15rem .6rem; white-space: nowrap; }
.sx-mark[hidden] { display: none; }
.sx-mark button { border: 0; background: transparent; color: inherit; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; padding: 0; }
.sx-mark button:hover { background: rgba(22, 101, 52, .15); }
[data-bs-theme="dark"] .sx-mark { background: rgba(22, 163, 74, .2); color: #86efac; }
.sx-m-chart canvas, .sx-lane-chart canvas { cursor: crosshair; }
.sx-step { border: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--sx-seg); color: var(--sx-ink); flex: none; }
.sx-step:disabled { opacity: .35; }
.sx-custom { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .5rem .7rem; border-bottom: 1px solid var(--sx-line); font-size: .82rem; background: var(--sx-soft); color: var(--sx-ink); }
.sx-custom input { border: 1px solid var(--color-input-border); border-radius: 7px; padding: .2rem .4rem; font-size: .82rem; background: var(--color-input-bg); color: var(--color-input-fg); }

.sx-mult { display: grid; grid-template-columns: 170px minmax(0, 1fr); border-top: 1px solid var(--sx-line); }
.sx-mult:first-child { border-top: 0; }
.sx-m-lbl { padding: .55rem .4rem .55rem .8rem; display: flex; flex-direction: column; justify-content: center; gap: .05rem; border-right: 1px solid var(--sx-line); min-width: 0; }
.sx-m-lbl .nm { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sx-muted); display: flex; align-items: center; gap: .35rem; min-width: 0; }
.sx-m-lbl .nm .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sx-m-lbl .v { font-size: 1.3rem; font-weight: 800; line-height: 1.1; color: var(--sx-ink); }
.sx-m-lbl .mm { font-size: .7rem; color: var(--sx-faint); }
.sx-m-lbl .when { font-size: .66rem; color: var(--sx-acc); font-weight: 700; min-height: .9rem; }
.sx-m-chart { position: relative; height: 118px; padding: .35rem .7rem .15rem 0; min-width: 0; }
.sx-mult.last .sx-m-chart { height: 140px; }
.sx-hint { font-size: .72rem; color: var(--sx-faint); padding: .4rem .9rem .45rem; }
.sx-note { padding: 2rem 1rem; text-align: center; color: var(--sx-muted); font-size: .9rem; }

.sx-lane { display: grid; grid-template-columns: 170px minmax(0, 1fr); border-top: 1px solid var(--sx-line); }
.sx-lane[hidden] { display: none; }
.sx-lane-labels { display: flex; flex-direction: column; padding: .3rem 0 .3rem .7rem; border-right: 1px solid var(--sx-line); min-width: 0; }
.sx-dev { --c: #888; flex: 1; display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--sx-ink); min-height: 26px; min-width: 0; }
.sx-dev i { color: var(--c); width: 14px; text-align: center; }
.sx-dev span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-dev b { font-size: .72rem; color: var(--sx-muted); padding-right: .4rem; }
.sx-lane-chart { position: relative; padding: .3rem .7rem .3rem 0; min-width: 0; }

.sx-empty { text-align: center; color: var(--sx-muted); padding: 2.5rem 1rem; background: var(--sx-card); border-radius: 14px; box-shadow: var(--sx-shadow); }
.sx-empty i { font-size: 1.8rem; display: block; margin-bottom: .5rem; color: var(--sx-faint); }
.sx-empty b { display: block; color: var(--sx-ink); font-size: 1.05rem; }
.sx-empty p { max-width: 460px; margin: .3rem auto .9rem; }

@media (max-width: 767px) {
    .sx-read { flex: 0 0 132px; }
    .sx-mult, .sx-lane { grid-template-columns: 104px minmax(0, 1fr); }
    .sx-m-lbl .v { font-size: 1.05rem; }
    .sx-m-lbl .mm, .sx-dev b { display: none; }
    .sx-when { font-size: .75rem; order: -1; flex-basis: 100%; justify-content: center; }
    .sx-top-r { width: 100%; justify-content: space-between; }
}

/* Manage sensors (views/sensors-manage.html + js/sensors-manage.js). */
.sm-crumb { display: inline-block; font-size: .8rem; color: var(--sx-acc); text-decoration: none; margin-top: .3rem; }
.sm-crumb:hover { text-decoration: underline; color: var(--sx-acc-dark); }
.sm .sx-top { margin-top: .2rem; }
.sm-btn { border: 0; border-radius: 10px; font-size: .85rem; font-weight: 600; padding: .45rem .85rem; background: var(--sx-acc); color: #fff; white-space: nowrap; }
.sm-btn:hover { background: var(--sx-acc-dark); }
.sm-btn.light { background: var(--sx-card); color: var(--sx-ink); box-shadow: 0 0 0 1px var(--sx-line); }
.sm-btn.light:hover { box-shadow: 0 0 0 1px var(--sx-acc); color: var(--sx-acc); }
.sm-btn.small { padding: .28rem .7rem; font-size: .8rem; border-radius: 8px; }
.sm-btn:disabled { opacity: .7; }
.sm-ebtn { border: 1px solid var(--sx-line); background: var(--sx-card); border-radius: 8px; font-size: .78rem; padding: .25rem .6rem; color: var(--sx-ink); white-space: nowrap; }
.sm-ebtn:hover { border-color: var(--sx-acc); color: var(--sx-acc); }

.sm-integ { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.sm-ic { background: var(--sx-card); border-radius: 14px; padding: .8rem .9rem; box-shadow: var(--sx-shadow); display: flex; gap: .8rem; align-items: flex-start; color: var(--sx-ink); }
.sm-ic .logo { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 1.1rem; flex: none; }
.sm-ic .logo.aci { background: #e0f2fe; color: #0369a1; }
.sm-ic .logo.eco { background: #fef3c7; color: #a16207; }
.sm-ic .logo.ha { background: #e0f2fe; color: #0284c7; }
.sm-found-tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 0 0 .4rem; }
.sm-found-tools .sm-search { flex: 1; min-width: 200px; max-width: 360px; }
.sm-found-none { color: var(--sx-muted); font-size: .85rem; padding: .3rem 0; }
.st-ha-result { display: block; margin-top: .35rem; font-weight: 600; }
.st-aci-stay { display: block; margin-top: .3rem; color: #15803d; }
[data-bs-theme="dark"] .st-aci-stay { color: #4ade80; }
.st-ha-result.ok { color: #15803d; }
.st-ha-result.bad { color: #b91c1c; }
[data-bs-theme="dark"] .st-ha-result.ok { color: #4ade80; }
[data-bs-theme="dark"] .st-ha-result.bad { color: #f87171; }
.sm-ic-b { min-width: 0; }
.sm-ic h3 { font-size: .98rem; font-weight: 800; margin: 0; }
.sm-ic .meta { font-size: .8rem; color: var(--sx-muted); }
.sm-ic .st { font-weight: 700; font-size: .78rem; }
.sm-ic .st i { font-size: .55rem; vertical-align: middle; margin-right: .3rem; }
.sm-ic .st.ok { color: #15803d; }
.sm-ic .st.warn { color: #b45309; }
.sm-ic .st.off { color: var(--sx-faint); }
.sm-ic .st.bad { color: #b91c1c; }
[data-bs-theme="dark"] .sm-ic .st.bad { color: #f87171; }
.sm-ic-problem { font-size: .76rem; color: #b91c1c; margin: .1rem 0 .15rem; line-height: 1.35; }
[data-bs-theme="dark"] .sm-ic-problem { color: #fca5a5; }
.sm-ic .acts { margin-left: auto; }
.sm-ic .acts a { font-size: .78rem; color: var(--sx-acc); text-decoration: none; white-space: nowrap; }
.sm-ic .acts a:hover { text-decoration: underline; }

.sm-found { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 14px; padding: .7rem .9rem; margin-bottom: 1rem; color: var(--sx-ink); }
[data-bs-theme="dark"] .sm-found { background: rgba(22, 163, 74, .1); border-color: rgba(74, 222, 128, .3); }
.sm-found h3 { font-size: .95rem; font-weight: 800; margin: 0 0 .5rem; color: #166534; }
[data-bs-theme="dark"] .sm-found h3 { color: #4ade80; }
.sm-found-row { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-top: 1px solid rgba(22, 163, 74, .18); flex-wrap: wrap; }
.sm-found-row:first-of-type { border-top: 0; }
.sm-found-row .nm { flex: 1; min-width: 180px; }
.sm-found-row .nm small { display: block; color: var(--sx-muted); font-size: .75rem; }
.sm-found-row select, .sm-found-row input { width: auto; max-width: 220px; font-size: .82rem; border-radius: 8px; }
.sm-found-all { text-align: right; padding-top: .3rem; }

.sm-tools { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin-bottom: .7rem; }
.sm-search { position: relative; flex: 1; min-width: 180px; max-width: 300px; }
.sm-search i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--sx-faint); font-size: .78rem; }
.sm-search input { width: 100%; border: 1px solid var(--color-input-border); border-radius: 9px; padding: .32rem .6rem .32rem 1.9rem; font-size: .82rem; background: var(--color-input-bg); color: var(--color-input-fg); }
.sm-tools .form-select { width: auto; border-radius: 9px; font-size: .8rem; }
.sm-check { font-size: .82rem; color: var(--sx-muted); display: flex; align-items: center; gap: .35rem; }

.sm-zone { background: var(--sx-card); border-radius: 14px; box-shadow: var(--sx-shadow); margin-bottom: .9rem; overflow: hidden; color: var(--sx-ink); }
.sm-zone-h { display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; border-bottom: 1px solid var(--sx-line); }
.sm-zone-h > i { color: var(--sx-acc); }
.sm-zone-h h2 { font-size: 1rem; font-weight: 800; margin: 0; }
.sm-zone-h .n { color: var(--sx-muted); font-size: .82rem; }
.sm-zone-h a { margin-left: auto; font-size: .8rem; color: var(--sx-acc); text-decoration: none; white-space: nowrap; }
.sm-zone-h a:hover { text-decoration: underline; }
.sm-zone-empty { padding: .8rem .9rem; font-size: .85rem; color: var(--sx-muted); }
.sm-row { display: grid; grid-template-columns: 14px minmax(0, 2.2fr) 1.1fr .9fr 1.5fr auto; gap: .8rem; align-items: center; padding: .5rem .9rem; border-top: 1px solid var(--sx-line); }
.sm-zone-h + .sm-row { border-top: 0; }
.sm-row .live { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
.sm-row .live.stale { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
[data-bs-theme="dark"] .sm-row .live { box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
[data-bs-theme="dark"] .sm-row .live.stale { box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
.sm-row .nm { min-width: 0; }
.sm-row .nm b { font-weight: 700; }
.sm-row .nm small { display: block; color: var(--sx-muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-row .nm .warn { color: #b45309; }
.sm-row .ty { font-size: .8rem; color: var(--sx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-row .ty i { width: 18px; color: var(--sx-faint); }
.sm-row .val { font-weight: 800; white-space: nowrap; }
.sm-row .val small { color: var(--sx-muted); font-weight: 600; font-size: .75rem; }
.sm-row .sm-none { color: var(--sx-faint); font-weight: 500; font-size: .8rem; }
.sm-row.hidden-s { opacity: .55; }
.sm-chips { display: flex; gap: .25rem; flex-wrap: wrap; }
.sm-chip { font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 99px; background: var(--sx-seg); color: var(--sx-muted); white-space: nowrap; }
.sm-chip.env { background: #dcfce7; color: #166534; }
.sm-chip.home { background: #e0f2fe; color: #075985; }
.sm-chip.plant { background: #f3e8ff; color: #7e22ce; }
.sm-chip.hid { color: var(--sx-faint); }
.sm-note { font-size: .78rem; color: var(--sx-muted); background: var(--sx-soft); border-radius: 10px; padding: .55rem .75rem; line-height: 1.9; }
.sm-trouble { margin-top: .8rem; }
.sm-trouble .sx-link { font-weight: 500; font-size: .8rem; color: var(--sx-muted); }

.sm-idbox { background: var(--color-row-hover); border-radius: 10px; padding: .55rem .7rem; font-size: .8rem; display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; color: var(--color-muted); }
.sm-idbox b { color: var(--color-fg); font-weight: 600; word-break: break-word; }
.sm-pchip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--color-card-border); border-radius: 99px; padding: .2rem .6rem; font-size: .8rem; margin: 0 .3rem .3rem 0; background: transparent; color: var(--color-fg); }
.sm-pchip i { color: #94a3b8; }
.sm-pchip.on { background: #f3e8ff; border-color: #d8b4fe; color: #7e22ce; }
.sm-pchip.on i { color: #7e22ce; }
.sm-dump { max-height: 60vh; overflow: auto; padding: 1rem; font-size: .8rem; border: 1px solid var(--color-card-border); border-radius: .25rem; }

@media (max-width: 767px) {
    .sm-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
    .sm-row .ty, .sm-row .sm-chips { display: none; }
    .sm-row .val { grid-column: 2; grid-row: 2; }
    .sm-row .sm-ebtn { grid-column: 3; grid-row: 1 / span 2; }
    .sm-ic .acts { display: none; }
}

/* =====================================================================
   Settings (views/settings.html + js/settings-page.js), mockup ST1:
   side menu with search, sections of cards, auto-save. The side menu
   (common/settings-nav.html) also frames Manage sensors. Uses the .sx
   theme variables (Environment page section above).
   ===================================================================== */
.st-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.2rem; align-items: start; padding-top: .4rem; }
.st-aside { position: sticky; top: 1rem; }
.st-search { position: relative; margin-bottom: .6rem; }
.st-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--sx-faint); font-size: .8rem; }
.st-search input { width: 100%; border: 1px solid var(--color-input-border); border-radius: 10px; padding: .45rem .6rem .45rem 2rem; font-size: .88rem; background: var(--color-input-bg); color: var(--color-input-fg); }
.st-side { background: var(--sx-card); border-radius: 14px; padding: .5rem; box-shadow: var(--sx-shadow); }
.st-side h6 { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sx-faint); margin: .5rem .6rem .25rem; }
.st-side a { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 9px; color: var(--sx-ink); text-decoration: none; font-size: .9rem; }
.st-side a i { width: 18px; text-align: center; color: var(--sx-muted); }
.st-side a:hover { background: var(--sx-soft); }
.st-side a.on { background: #dcfce7; color: #166534; font-weight: 700; }
.st-side a.on i { color: var(--sx-acc); }
[data-bs-theme="dark"] .st-side a.on { background: rgba(22, 163, 74, .18); color: #86efac; }
.st-side a.dim { opacity: .35; }

.st-main { min-width: 0; }
.st-head { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .7rem; margin-bottom: .9rem; }
.st-head h1 { font-size: 1.5rem; font-weight: 800; margin: 0; color: var(--sx-ink); }
.st-head p { flex-basis: 100%; margin: .15rem 0 0; color: var(--sx-muted); }
.st-saved { font-size: .82rem; font-weight: 600; color: #15803d; opacity: 0; transition: opacity .3s; }
.st-saved.show { opacity: 1; }
.st-none { text-align: center; color: var(--sx-faint); padding: 2rem; }
.st-none i { display: block; font-size: 1.5rem; margin-bottom: .4rem; }

.st-sec-h { display: none; }
.st.searching .st-sec-h { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 800; margin: 0 0 .45rem; color: var(--sx-ink); }
.st.searching .st-sec { margin-bottom: 1.2rem; }
.st-sec-h > i { color: var(--sx-acc); }
.st-sec-h a { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--sx-acc); text-decoration: none; }

.st-card { background: var(--sx-card); border-radius: 14px; box-shadow: var(--sx-shadow); margin-bottom: .8rem; padding: .75rem .95rem .6rem; color: var(--sx-ink); }
.st-card[hidden] { display: none; }
.st-card-h { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .2rem; }
.st-card-h > i { color: var(--sx-acc); width: 18px; text-align: center; margin-top: .25rem; }
.st-card-h > div { flex: 1; min-width: 0; }
.st-card-h h3 { font-size: 1rem; font-weight: 800; margin: 0; }
.st-card-h p { margin: .1rem 0 0; color: var(--sx-muted); font-size: .84rem; }
.st-card-h > .st-btn { flex: none; }
.st-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--sx-line); margin: 0; }
.st-card-h + .st-row, .st-card-h + .st-list, .st-card-h + .st-chips { margin-top: .4rem; }
.st-card-h + .st-row { border-top: 0; }
.st-row-l { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.st-row-l label, .st-row-l .st-label { font-weight: 600; font-size: .9rem; margin: 0; }
.st-row-l small { color: var(--sx-muted); font-size: .78rem; }
.st-row-r { flex: none; }
.st-row-r .form-select, .st-row-r .form-control { border-radius: 8px; min-width: 200px; }
.st-row-r .st-num { width: 140px; min-width: 0; }
.st-row-r .input-group.st-num .form-control { min-width: 0; }
.st-range { width: 240px; }
.st-switch { cursor: pointer; }
.st-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; margin: 0; float: none; }
.st .form-check-input:checked { background-color: var(--sx-acc); border-color: var(--sx-acc); }
.st .form-check-input:focus, .st .form-control:focus, .st .form-select:focus { border-color: #4ade80; box-shadow: 0 0 0 .2rem rgba(22, 163, 74, .2); }
.st .form-range::-webkit-slider-thumb { background: var(--sx-acc); }
.st .form-range::-moz-range-thumb { background: var(--sx-acc); }
.st-reveal { padding: .3rem 0 .6rem; }
.st-btn { display: inline-flex; align-items: center; border: 0; border-radius: 9px; font-size: .82rem; font-weight: 600; padding: .35rem .75rem; background: var(--sx-acc); color: #fff; text-decoration: none; white-space: nowrap; }
.st-btn:hover { color: #fff; background: var(--sx-acc-dark); }
.st-btn:disabled { opacity: .6; }
.st-btn.light { background: var(--sx-card); color: var(--sx-ink); box-shadow: 0 0 0 1px var(--sx-line); }
.st-btn.light:hover { color: var(--sx-acc); box-shadow: 0 0 0 1px var(--sx-acc); }
.st-adv { border-top: 1px solid var(--sx-line); padding-top: .45rem; margin-top: .1rem; }
.st-adv summary { font-size: .82rem; color: var(--sx-muted); cursor: pointer; }
.st-adv .st-row { border-top: 0; }
.st-adv-card summary { cursor: pointer; }
.st-note { font-size: .8rem; color: var(--sx-muted); margin: .5rem 0 0; }
.st-empty { text-align: center; color: var(--sx-muted); padding: .8rem; font-size: .88rem; }

.st-list { width: 100%; border-collapse: collapse; color: var(--sx-ink); }
.st-list th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sx-muted); font-weight: 700; padding: .35rem .5rem; text-align: left; }
.st-list td { padding: .45rem .5rem; border-top: 1px solid var(--sx-line); font-size: .88rem; vertical-align: middle; }
.st-list tr.clickable-row { cursor: pointer; }
.st-list tr.clickable-row:hover td { background: var(--sx-soft); }
.st-list .st-row-edit { color: var(--sx-faint); font-size: .8rem; }
.st-list tr.clickable-row:hover .st-row-edit { color: var(--sx-acc); }
.st-list .act-chip { vertical-align: middle; margin-right: .5rem; }
.st-zone-ic { color: var(--sx-acc); margin-right: .5rem; width: 16px; text-align: center; }
.st-url { font-size: .78rem; word-break: break-all; color: var(--sx-muted); }
.st-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: .3rem 0; }
.st-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--sx-line); background: var(--sx-card); color: var(--sx-ink); border-radius: 99px; padding: .2rem .65rem; font-size: .82rem; }
.st-chip i { color: var(--sx-faint); font-size: .66rem; }
.st-chip:hover { border-color: var(--sx-acc); color: var(--sx-acc); }
.st-chip:hover i { color: var(--sx-acc); }
.st-drop { display: block; border: 2px dashed var(--sx-line); border-radius: 10px; padding: .9rem; text-align: center; color: var(--sx-muted); cursor: pointer; margin: .4rem 0 .6rem; }
.st-drop:hover { border-color: var(--sx-acc); color: var(--sx-acc); }

.st-log-tools { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: .5rem 0; }
.st-log-tools .form-select { width: auto; border-radius: 8px; }
.st-log-q { width: 200px; border-radius: 8px; }
.st-log { background: #0f172a; color: #cbd5e1; border-radius: 10px; padding: .6rem .7rem; font: .76rem/1.55 ui-monospace, Menlo, Consolas, monospace; max-height: 480px; overflow: auto; white-space: pre-wrap; word-break: break-all; margin: 0 0 .3rem; }

@media (max-width: 991px) {
    .st-layout { grid-template-columns: minmax(0, 1fr); }
    .st-aside { position: static; min-width: 0; }
    .st-side { display: flex; overflow-x: auto; gap: .2rem; padding: .35rem; }
    .st-side h6 { display: none; }
    .st-side a { white-space: nowrap; }
}
@media (max-width: 767px) {
    .st-row { flex-direction: column; align-items: stretch; gap: .45rem; }
    .st-switch { flex-direction: row; align-items: center; }
    .st-row-r .form-select, .st-row-r .form-control { min-width: 0; width: 100%; }
    .st-range { width: 100%; }
    .st-card-h { flex-wrap: wrap; }
    .st-list td, .st-list th { padding: .35rem .3rem; }
    .st-log-q { width: 100%; }
}

/* =====================================================================
   Plants page (views/plants.html + js/plants-page.js), mockup PL3:
   header card with Growing / Harvested / Dead tabs and a summary, filter
   row, a row per plant with a progress bar to harvest; photo tiles.
   ===================================================================== */
.pl {
    --pl-acc: #16a34a;
    --pl-acc-dark: #15803d;
    --pl-ink: var(--color-fg);
    --pl-muted: var(--color-muted);
    --pl-card: var(--color-card);
    --pl-line: #e7ecea;
    --pl-soft: #f8fafc;
    --pl-seg: #e2e8f0;
    --pl-faint: #94a3b8;
    --pl-shadow: 0 1px 3px rgba(15, 40, 35, .08);
    padding-bottom: 2rem;
}
[data-bs-theme="dark"] .pl {
    --pl-line: #2c3237;
    --pl-soft: #262c31;
    --pl-seg: #2e3338;
    --pl-faint: #8b95a1;
    --pl-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.pl-head { background: var(--pl-card); border-radius: 16px; box-shadow: var(--pl-shadow); padding: .9rem 1.1rem 0; margin: .4rem 0 .9rem; color: var(--pl-ink); }
.pl-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pl-top h1 { font-size: 1.6rem; font-weight: 800; margin: 0; }
.pl-top p { margin: .1rem 0 0; color: var(--pl-muted); }
.pl-add { display: inline-flex; align-items: center; border: 0; border-radius: 10px; font-size: .88rem; font-weight: 600; padding: .5rem .95rem; background: var(--pl-acc); color: #fff; white-space: nowrap; text-decoration: none; }
.pl-add:hover { background: var(--pl-acc-dark); color: #fff; }
.pl-tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--pl-line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pl-tabs::-webkit-scrollbar { display: none; }
.pl-tabs button { border: 0; background: none; padding: .55rem 0; font-weight: 700; font-size: .92rem; color: var(--pl-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.pl-tabs button .n { font-size: .74rem; background: var(--pl-seg); color: var(--pl-muted); border-radius: 99px; padding: .02rem .45rem; }
.pl-tabs button:hover { color: var(--pl-ink); }
.pl-tabs button.on { color: var(--pl-ink); border-bottom-color: var(--pl-acc); }
.pl-tabs button.on .n { background: #dcfce7; color: #166534; }
.pl-sum { display: flex; flex-wrap: wrap; gap: .45rem; padding: .65rem 0 .8rem; font-size: .82rem; }
.pl-sum:empty { padding: .4rem 0; }
.pl-sum span { background: var(--pl-soft); border: 1px solid var(--pl-line); border-radius: 99px; padding: .2rem .65rem; color: var(--pl-ink); }
.pl-sum span.warn { background: #fef3c7; border-color: #fde68a; color: #92400e; }

.pl-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.pl-search { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
.pl-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--pl-faint); font-size: .8rem; }
.pl-search input { width: 100%; border: 1px solid var(--color-input-border); border-radius: 10px; padding: .4rem .6rem .4rem 2rem; font-size: .86rem; background: var(--color-input-bg); color: var(--color-input-fg); }
.pl-bar .form-select { width: auto; border-radius: 9px; font-size: .82rem; }
.pl-bar .spacer { flex: 1; }
.pl-count { font-size: .82rem; color: var(--pl-muted); }
.pl-clear { border: 0; background: none; color: var(--pl-acc); font-size: .8rem; font-weight: 600; }
.pl-seg { display: inline-flex; background: var(--pl-seg); border-radius: 10px; padding: 3px; }
.pl-seg button { border: 0; background: transparent; font-size: .78rem; font-weight: 600; padding: .25rem .6rem; border-radius: 8px; color: var(--pl-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.pl-seg button.on { background: var(--pl-card); color: var(--pl-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.pl-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; padding: .14rem .48rem; border-radius: 6px; white-space: nowrap; }
.pl-tag.auto { background: #fef3c7; color: #92400e; }
.pl-tag.photo { background: #e0f2fe; color: #075985; }
.pl-tag.photo i { color: #f59e0b; }
.pl-tag.zone { background: var(--pl-seg); color: var(--pl-ink); }
.pl-stage { --c: #888; display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); padding: .16rem .55rem; border-radius: 99px; white-space: nowrap; }
.pl-wf { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; padding: .14rem .5rem; border-radius: 99px; white-space: nowrap; }
.pl-wf.ok { background: #dcfce7; color: #166534; }
.pl-wf.due { background: #fef3c7; color: #92400e; }
.pl-wf.over { background: #fee2e2; color: #b91c1c; }
.pl-hv { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; white-space: nowrap; opacity: .85; }
.pl-hv i { color: #d97706; }
.pl-qa { border: 1px solid var(--pl-line); background: var(--pl-card); color: var(--pl-ink); border-radius: 8px; font-size: .76rem; font-weight: 600; padding: .26rem .6rem; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; text-decoration: none; }
.pl-qa:hover { border-color: var(--pl-acc); color: var(--pl-acc); }
.pl-qa.icon { width: 30px; justify-content: center; padding: .26rem 0; }
.pl-qa.primary { background: var(--pl-acc); border-color: var(--pl-acc); color: #fff; }
.pl-qa.primary:hover { background: var(--pl-acc-dark); color: #fff; }
.pl-noph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, #ecfdf3, #dcfce7); color: #86efac; }
[data-bs-theme="dark"] .pl-sum span.warn { background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .3); color: #fcd34d; }
[data-bs-theme="dark"] .pl-tag.auto { background: rgba(251, 191, 36, .14); color: #fcd34d; }
[data-bs-theme="dark"] .pl-tag.photo { background: rgba(56, 189, 248, .14); color: #7dd3fc; }
[data-bs-theme="dark"] .pl-wf.ok { background: rgba(74, 222, 128, .14); color: #86efac; }
[data-bs-theme="dark"] .pl-wf.due { background: rgba(251, 191, 36, .14); color: #fcd34d; }
[data-bs-theme="dark"] .pl-wf.over { background: rgba(248, 113, 113, .15); color: #fca5a5; }
[data-bs-theme="dark"] .pl-noph { background: linear-gradient(135deg, #14261c, #183a25); color: #2f6b45; }

.pl-rows { background: var(--pl-card); border-radius: 16px; box-shadow: var(--pl-shadow); overflow: hidden; color: var(--pl-ink); }
.pl-r { display: grid; grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 2fr) auto auto; gap: .9rem; align-items: center; padding: .65rem .95rem; border-top: 1px solid var(--pl-line); }
.pl-r:first-child { border-top: 0; }
.pl-r:hover { background: var(--pl-soft); }
.pl-r .ph { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; display: block; text-decoration: none; }
.pl-r .ph img { width: 100%; height: 100%; object-fit: cover; }
.pl-r .ph .pl-noph { font-size: 1.3rem; }
.pl-who { min-width: 0; }
.pl-who .nm { font-weight: 800; font-size: 1.02rem; color: var(--pl-ink); text-decoration: none; }
.pl-who .nm:hover { color: var(--pl-acc); }
.pl-who .sub { font-size: .8rem; color: var(--pl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-who .meta { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .2rem; }
.pl-prog { min-width: 0; }
.pl-prog .lbls { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; color: var(--pl-muted); margin-bottom: .25rem; gap: .5rem; flex-wrap: wrap; }
.pl-prog .lbls b { color: var(--pl-ink); }
.pl-prog .bar { height: 8px; border-radius: 99px; background: var(--pl-seg); overflow: hidden; display: flex; }
.pl-prog .bar span { height: 100%; }
.pl-prog .bar .unknown { width: 100%; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(148, 163, 184, .25) 6px 12px); }
.pl-r .wfs { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; min-width: 64px; }
.pl-r .acts { display: flex; gap: .3rem; }

.pl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.pl-t { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 1; background: #0b1110; box-shadow: var(--pl-shadow); text-decoration: none; }
.pl-t img, .pl-t .pl-noph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; font-size: 2.2rem; }
.pl-t .ov { position: absolute; inset: auto 0 0 0; padding: .6rem .7rem; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; }
.pl-t .ov b { display: block; font-size: .95rem; }
.pl-t .ov small { opacity: .85; font-size: .74rem; }
.pl-t .pl-stage { position: absolute; left: .5rem; top: .5rem; background: rgba(255, 255, 255, .92); }
.pl-t .wfx { position: absolute; right: .5rem; top: .5rem; }
.pl-t:hover { box-shadow: 0 8px 22px rgba(15, 40, 35, .22); }

.pl-empty { text-align: center; color: var(--pl-muted); padding: 2.5rem 1rem; background: var(--pl-card); border-radius: 16px; box-shadow: var(--pl-shadow); }
.pl-empty i { font-size: 1.8rem; color: var(--pl-faint); display: block; margin-bottom: .5rem; }

@media (max-width: 767px) {
    .pl-search { max-width: none; flex-basis: 100%; }
    .pl-bar .form-select { flex: 1 1 45%; }
    .pl-top .pl-add { width: 100%; justify-content: center; }
    .pl-tabs { gap: .9rem; }
    .pl-r { grid-template-columns: 56px minmax(0, 1fr) auto; }
    .pl-r .ph { width: 56px; height: 56px; }
    .pl-r .pl-prog { grid-column: 1 / -1; }
    .pl-r .wfs { flex-direction: row; min-width: 0; grid-column: 1 / 3; }
    .pl-r .acts { grid-column: 3; grid-row: 1; }
    .pl-r .acts .pl-qa:not(.primary) { display: none; }
    .pl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   Home / Today (views/index.html + js/home-page.js), mockup H1: needs
   attention, a section per tent (readings, camera tile, plant cards),
   recent activity, and the Log activity window.
   ===================================================================== */
.hm {
    --hm-acc: #16a34a;
    --hm-acc-dark: #15803d;
    --hm-ink: var(--color-fg);
    --hm-muted: var(--color-muted);
    --hm-card: var(--color-card);
    --hm-line: #e7ecea;
    --hm-soft: #f8faf9;
    --hm-seg: #e2e8f0;
    --hm-faint: #94a3b8;
    --hm-shadow: 0 1px 3px rgba(15, 40, 35, .08);
    padding-bottom: 2rem;
    color: var(--hm-ink);
}
[data-bs-theme="dark"] .hm {
    --hm-line: #2c3237;
    --hm-soft: #1f2428;
    --hm-seg: #2e3338;
    --hm-faint: #8b95a1;
    --hm-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.hm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: .4rem 0 .9rem; }
.hm-top h1 { font-size: 1.6rem; font-weight: 800; margin: 0; }
.hm-top p { margin: .1rem 0 0; color: var(--hm-muted); }
.hm-top-acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.hm-btn { display: inline-flex; align-items: center; border: 0; border-radius: 10px; font-size: .85rem; font-weight: 600; padding: .45rem .85rem; background: var(--hm-acc); color: #fff; white-space: nowrap; text-decoration: none; }
.hm-btn:hover { background: var(--hm-acc-dark); color: #fff; }
.hm-btn.light { background: var(--hm-card); color: var(--hm-ink); box-shadow: 0 0 0 1px var(--hm-line); }
.hm-btn.light:hover { color: var(--hm-acc); box-shadow: 0 0 0 1px var(--hm-acc); }
.hm-btn-s { display: inline-flex; align-items: center; border: 1px solid var(--hm-line); background: var(--hm-card); border-radius: 8px; font-size: .76rem; font-weight: 600; padding: .22rem .55rem; color: var(--hm-ink); white-space: nowrap; }
.hm-btn-s:hover { border-color: var(--hm-acc); color: var(--hm-acc); }
.hm-btn-s.primary { background: var(--hm-acc); border-color: var(--hm-acc); color: #fff; }
.hm-btn-s.primary:hover { background: var(--hm-acc-dark); color: #fff; }
.hm-link { color: var(--hm-acc); font-weight: 600; font-size: .82rem; text-decoration: none; white-space: nowrap; }
.hm-link:hover { color: var(--hm-acc-dark); text-decoration: underline; }
.hm-link-btn { background: none; border: 0; padding: 0; }
.hm-sec-h { display: flex; align-items: baseline; gap: .6rem; margin: 1.1rem 0 .5rem; }
.hm-sec-h h2 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.hm-sec-h h2 i { color: #dc2626; }
.hm-sec-h .n { color: var(--hm-muted); font-size: .85rem; }
.hm-sec-h a { margin-left: auto; }

.hm-alerts { display: grid; gap: .4rem; }
.hm-alert { display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem; border-radius: 11px; font-size: .86rem; background: var(--hm-card); box-shadow: var(--hm-shadow); }
.hm-alert .ai { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.hm-alert.over .ai { background: #fee2e2; color: #b91c1c; }
.hm-alert.warn .ai { background: #fef3c7; color: #b45309; }
.hm-alert.info .ai { background: #e0f2fe; color: #0369a1; }
.hm-alert .ai.vault { background: var(--hm-seg); color: #475569; }
.hm-alert .tx { flex: 1; min-width: 0; }
.hm-alert .acts { display: flex; gap: .3rem; flex-wrap: wrap; }

.hm-care { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; padding: .14rem .5rem; border-radius: 99px; white-space: nowrap; }
.hm-care.ok { background: #e0f2fe; color: #075985; }
.hm-care.due { background: #fef3c7; color: #92400e; }
.hm-care.over { background: #fee2e2; color: #b91c1c; }
.hm-care.none { background: var(--hm-seg); color: var(--hm-faint); }
.hm-stage { --c: #64748b; display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 800; color: var(--c); white-space: nowrap; }
.hm-stage::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.hm-harvest { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; color: #7e22ce; }
.hm-harvest.muted { color: var(--hm-faint); }
[data-bs-theme="dark"] .hm-harvest { color: #c084fc; }
[data-bs-theme="dark"] .hm-care.ok { background: rgba(56, 189, 248, .14); color: #7dd3fc; }
[data-bs-theme="dark"] .hm-care.due { background: rgba(251, 191, 36, .14); color: #fcd34d; }
[data-bs-theme="dark"] .hm-care.over { background: rgba(248, 113, 113, .15); color: #fca5a5; }
[data-bs-theme="dark"] .hm-alert.over .ai { background: rgba(248, 113, 113, .15); color: #fca5a5; }
[data-bs-theme="dark"] .hm-alert.warn .ai { background: rgba(251, 191, 36, .14); color: #fcd34d; }
[data-bs-theme="dark"] .hm-alert.info .ai { background: rgba(56, 189, 248, .14); color: #7dd3fc; }
[data-bs-theme="dark"] .hm-alert .ai.vault { color: #a8b0bb; }
[data-bs-theme="dark"] .hm-light.on { color: #fcd34d; }

.hm-tent { margin-top: 1.1rem; }
.hm-tent-h { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; background: var(--hm-card); border-radius: 14px 14px 0 0; padding: .6rem .9rem; border-bottom: 1px solid var(--hm-line); box-shadow: var(--hm-shadow); }
.hm-tent-h h2 { font-size: 1.05rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: .45rem; }
.hm-tent-h h2 i { color: var(--hm-acc); }
.hm-tent-h > .hm-link { margin-left: auto; }
.hm-tent-b { background: var(--hm-soft); border-radius: 0 0 14px 14px; padding: .8rem; box-shadow: var(--hm-shadow); }
.hm-env { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; font-size: .84rem; color: var(--hm-muted); }
.hm-env b { color: var(--hm-ink); font-size: .95rem; }
.hm-env .sep { width: 1px; height: 18px; background: var(--hm-line); }
@media (max-width: 575.98px) { .hm-env .sep { display: none; } }
.hm-light.on { color: #a16207; }
.hm-light.off { color: var(--hm-muted); }
.hm-empty-t { color: var(--hm-faint); font-size: .85rem; }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .7rem; }

.hm-card { background: var(--hm-card); border-radius: 14px; box-shadow: var(--hm-shadow); display: flex; flex-direction: column; overflow: hidden; }
.hm-card .ph { height: 150px; background: var(--hm-seg) center / cover no-repeat; position: relative; }
.hm-card .ph.none { display: grid; place-items: center; color: var(--hm-faint); font-size: .8rem; }
.hm-card .day { position: absolute; left: .55rem; bottom: .55rem; background: rgba(15, 23, 42, .72); color: #fff; font-size: .74rem; font-weight: 700; padding: .12rem .5rem; border-radius: 99px; }
.hm-card .addph { position: absolute; right: .55rem; bottom: .55rem; border: 0; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .92); color: #334155; }
.hm-card .addph:hover { color: var(--hm-acc); }
.hm-card .bd { padding: .65rem .75rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.hm-card .row1 { display: flex; justify-content: space-between; align-items: center; gap: .4rem; flex-wrap: wrap; }
.hm-card .nm { font-weight: 800; font-size: 1.02rem; color: var(--hm-ink); text-decoration: none; }
.hm-card .nm:hover { color: var(--hm-acc); }
.hm-card .sub { font-size: .78rem; color: var(--hm-muted); }
.hm-card .care { display: flex; gap: .3rem; flex-wrap: wrap; }
.hm-card .ft { margin-top: auto; padding-top: .45rem; border-top: 1px solid var(--hm-line); display: flex; gap: .3rem; flex-wrap: wrap; }

.hm-cam { background: #0b1110; border-radius: 14px; overflow: hidden; position: relative; min-height: 290px; box-shadow: var(--hm-shadow); color: #fff; }
.hm-cam > img, .hm-cam > .video-js { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-cam-none { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .4rem; color: #94a3b8; font-size: .85rem; }
.hm-cam-none i { font-size: 1.6rem; }
.hm-cam .top { position: absolute; left: .6rem; right: .6rem; top: .6rem; display: flex; justify-content: space-between; align-items: center; gap: .4rem; z-index: 2; }
.hm-cam .nm { font-weight: 800; font-size: .95rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.hm-cam .badge-l { display: none; background: #e5484d; font-size: .68rem; font-weight: 800; padding: .14rem .45rem; border-radius: 6px; align-items: center; gap: .3rem; }
.hm-cam .badge-l i { font-size: .45rem; }
.hm-cam.live .badge-l { display: inline-flex; }
.hm-cam .bot { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; display: flex; justify-content: space-between; align-items: center; gap: .4rem; z-index: 2; }
.hm-cam .when { font-size: .74rem; background: rgba(0, 0, 0, .55); padding: .14rem .5rem; border-radius: 99px; }
.hm-cam .when:empty { display: none; }
.hm-cam .play { border: 0; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #0f172a; font-size: .8rem; font-weight: 700; padding: .32rem .8rem; margin-left: auto; }
.hm-cam.live .play { background: #e5484d; color: #fff; }

.hm-recent { background: var(--hm-card); border-radius: 14px; box-shadow: var(--hm-shadow); }
.hm-recent .it { display: grid; grid-template-columns: 100px auto 1fr; gap: .7rem; align-items: start; padding: .5rem .8rem; border-top: 1px solid var(--hm-line); font-size: .86rem; }
.hm-recent .it:first-child { border-top: 0; }
.hm-recent .it.empty { display: block; color: var(--hm-muted); text-align: center; padding: 1rem; }
.hm-recent .d { color: var(--hm-muted); font-size: .78rem; font-weight: 600; }
.hm-recent .p a { font-weight: 700; color: var(--hm-ink); text-decoration: none; }
.hm-recent .p a:hover { color: var(--hm-acc); }
.hm-recent .ics { display: flex; gap: 3px; }
.hm-recent .amt { color: #2f80ed; font-weight: 700; white-space: nowrap; }
.hm-recent .msr { color: var(--hm-muted); font-weight: 600; white-space: nowrap; }
.hm-ico { --c: #888; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: .66rem; }
.hm-none { text-align: center; color: var(--hm-muted); padding: 2.5rem 1rem; background: var(--hm-card); border-radius: 14px; box-shadow: var(--hm-shadow); }
.hm-none > i { font-size: 1.8rem; display: block; margin-bottom: .5rem; color: var(--hm-faint); }
.hm-none-acts { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

.hm-dialog { border: 0; border-radius: 14px; }
.hm-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.hm-chip { --c: #16a34a; border: 1px solid var(--color-card-border); background: transparent; color: var(--color-fg); border-radius: 99px; padding: .28rem .7rem; font-size: .84rem; display: inline-flex; align-items: center; gap: .35rem; }
.hm-chip i { color: var(--c); }
.hm-chip.on { background: var(--c); border-color: var(--c); color: #fff; }
.hm-chip.on i { color: #fff; }
.hm-metrics { display: flex; flex-wrap: wrap; gap: .6rem 1rem; background: var(--color-row-hover); border-radius: 10px; padding: .6rem .7rem; margin-bottom: .8rem; }
.hm-metric { min-width: 180px; }
.hm-metric .input-group { max-width: 200px; }

@media (max-width: 575px) {
    .hm-recent .it { grid-template-columns: 76px 1fr; }
    .hm-recent .ics { display: none; }
    .hm-cam { min-height: 220px; }
    .hm-top-acts { width: 100%; }
    .hm-top-acts .hm-btn { flex: 1; justify-content: center; }
    .hm-tent-h > .hm-link { margin-left: 0; }
}

/* Dark mode: the light-mode pastel pills read as glaring blocks on a dark
   page, so they become tinted versions of the same colors. */
[data-bs-theme="dark"] .sp-b.seeds { background: rgba(74, 222, 128, .14); color: #86efac; }
[data-bs-theme="dark"] .sp-b.wanted,
[data-bs-theme="dark"] .sp-b.auto { background: rgba(251, 191, 36, .14); color: #fcd34d; }
[data-bs-theme="dark"] .sp-b.old { background: rgba(251, 146, 60, .15); color: #fdba74; }
[data-bs-theme="dark"] .sp-b.grow { background: rgba(192, 132, 252, .15); color: #d8b4fe; }
[data-bs-theme="dark"] .sp-b.photo { background: rgba(56, 189, 248, .14); color: #7dd3fc; }
[data-bs-theme="dark"] .sp-btn.on { background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .35); color: #fcd34d; }
[data-bs-theme="dark"] .sm-ic .logo.aci { background: rgba(56, 189, 248, .14); color: #7dd3fc; }
[data-bs-theme="dark"] .sm-ic .logo.eco { background: rgba(251, 191, 36, .14); color: #fcd34d; }
[data-bs-theme="dark"] .sm-ic .logo.ha { background: rgba(14, 165, 233, .14); color: #7dd3fc; }
[data-bs-theme="dark"] .sm-chip.env { background: rgba(74, 222, 128, .14); color: #86efac; }
[data-bs-theme="dark"] .sm-chip.home { background: rgba(56, 189, 248, .14); color: #7dd3fc; }
[data-bs-theme="dark"] .sm-chip.plant { background: rgba(192, 132, 252, .15); color: #d8b4fe; }
[data-bs-theme="dark"] .sm-pchip.on { background: rgba(192, 132, 252, .15); border-color: rgba(192, 132, 252, .4); color: #d8b4fe; }

/* ===== Strain page (one strain, mockup SD1+) ===== */
.sd {
    --sd-acc: #16a34a;
    --sd-acc-dark: #15803d;
    --sd-ink: var(--color-fg);
    --sd-muted: var(--color-muted);
    --sd-card: var(--color-card);
    --sd-line: #e7ecea;
    --sd-soft: #f8faf9;
    --sd-seg: #e2e8f0;
    --sd-faint: #94a3b8;
    --sd-shadow: 0 1px 3px rgba(15, 40, 35, .08);
    padding-bottom: 2rem;
    color: var(--sd-ink);
}
[data-bs-theme="dark"] .sd {
    --sd-line: #2c3237;
    --sd-soft: #1f2428;
    --sd-seg: #2e3338;
    --sd-faint: #8b95a1;
    --sd-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.sd .min-w-0 { min-width: 0; }
.sd .breadcrumb a { color: var(--sd-acc); text-decoration: none; }
.sd .breadcrumb a:hover { text-decoration: underline; }
.sd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: .9rem; align-items: start; }
.sd-cols.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 991.98px) { .sd-cols, .sd-cols.even { grid-template-columns: minmax(0, 1fr); } }
.sd-stack > * + * { margin-top: .8rem; }
.sd-card { background: var(--sd-card); border-radius: 16px; box-shadow: var(--sd-shadow); padding: 1rem 1.1rem; }
.sd-h { font-size: .98rem; font-weight: 800; margin: 0 0 .7rem; display: flex; align-items: center; gap: .45rem; }
.sd-h > i { color: var(--sd-acc); }
.sd-h .sd-vault-ic { color: #64748b; }
.sd-h-r { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--sd-muted); }
.sd-muted { color: var(--sd-muted); }
.sd-faint { color: var(--sd-faint); }
.sd-link { border: 0; background: none; padding: 0; color: var(--sd-acc); font-size: .8rem; font-weight: 600; }
.sd-link:hover { color: var(--sd-acc-dark); text-decoration: underline; }

/* Header */
.sd-head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sd-head h1 { font-size: 1.9rem; font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.sd-by { color: var(--sd-muted); margin: .1rem 0 .55rem; }
.sd-by a { color: var(--sd-acc); font-weight: 600; text-decoration: none; }
.sd-by a:hover { text-decoration: underline; }
.sd-lead { font-size: 1.05rem; color: var(--sd-muted); margin: .6rem 0 0; }
.sd-acts { display: flex; gap: .4rem; flex-wrap: wrap; }
.sd-btn { display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: 10px; font-size: .86rem; font-weight: 600; padding: .45rem .85rem; background: var(--sd-acc); color: #fff; text-decoration: none; white-space: nowrap; }
.sd-btn:hover { background: var(--sd-acc-dark); color: #fff; }
.sd-btn.light { background: var(--sd-card); color: var(--sd-ink); box-shadow: 0 0 0 1px var(--sd-line); }
.sd-btn.light:hover { box-shadow: 0 0 0 1px var(--sd-acc); color: var(--sd-acc); }
.sd-nogrow { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; padding: .65rem .8rem; border-radius: 12px; background: #f0fdf4; border: 1px dashed #86efac; font-size: .88rem; }
.sd-nogrow > i { color: var(--sd-acc); font-size: 1.1rem; }
.sd-nogrow > span { flex: 1; min-width: 12rem; }
[data-bs-theme="dark"] .sd-nogrow { background: rgba(22, 163, 74, .1); border-color: rgba(74, 222, 128, .35); }

/* Badges and chips */
.sd-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.sd-b { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; padding: .16rem .55rem; border-radius: 99px; white-space: nowrap; background: var(--sd-seg); color: var(--sd-ink); text-decoration: none; }
.sd-b.photo { background: #e0f2fe; color: #075985; }
.sd-b.photo i { color: #f59e0b; }
.sd-b.auto { background: #fef3c7; color: #92400e; }
.sd-b.ok { background: #dcfce7; color: #166534; }
.sd-b.wanted { background: #fef3c7; color: #92400e; }
.sd-b.src:hover { background: #cbd5e1; color: var(--sd-ink); }
.sd-chip { font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: 99px; background: var(--sd-soft); border: 1px solid var(--sd-line); }
.sd-chip.fl { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.sd-chip.md { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
[data-bs-theme="dark"] .sd-b.photo { background: rgba(56, 189, 248, .14); color: #7dd3fc; }
[data-bs-theme="dark"] .sd-b.auto,
[data-bs-theme="dark"] .sd-b.wanted { background: rgba(251, 191, 36, .14); color: #fcd34d; }
[data-bs-theme="dark"] .sd-b.ok { background: rgba(74, 222, 128, .14); color: #86efac; }
[data-bs-theme="dark"] .sd-b.src:hover { background: #3a4047; }
[data-bs-theme="dark"] .sd-chip.fl { background: rgba(251, 146, 60, .12); border-color: rgba(251, 146, 60, .3); color: #fdba74; }
[data-bs-theme="dark"] .sd-chip.md { background: rgba(56, 189, 248, .1); border-color: rgba(56, 189, 248, .3); color: #7dd3fc; }

/* Your grows */
.sd-stats { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .3rem; }
.sd-stats span { font-size: .8rem; background: var(--sd-soft); border: 1px solid var(--sd-line); border-radius: 99px; padding: .2rem .65rem; }
.sd-grow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--sd-line); }
.sd-stats + .sd-grow { border-top: 0; }
.sd-grow-ph img, .sd-noph { width: 56px; height: 56px; border-radius: 11px; object-fit: cover; display: grid; place-items: center; }
.sd-noph { background: linear-gradient(135deg, #e8f5ec, #d6eedd); color: #86c79b; font-size: 1.2rem; }
[data-bs-theme="dark"] .sd-noph { background: linear-gradient(135deg, #14261c, #183a25); color: #2f6b45; }
.sd-grow-nm { font-weight: 800; color: var(--sd-ink); text-decoration: none; }
.sd-grow-nm:hover { color: var(--sd-acc); }
.sd-grow-mt { font-size: .78rem; color: var(--sd-muted); display: flex; flex-wrap: wrap; gap: .25rem; }
.sd-grow-rt { text-align: right; font-size: .8rem; color: var(--sd-muted); display: flex; flex-direction: column; }
.sd-grow-rt b { font-size: 1rem; color: var(--sd-ink); }
.sd-stage { --c: #64748b; display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--c); }
.sd-stage::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.sd-stage[data-stage="Germinating"] { --c: #84906b; }
.sd-stage[data-stage="Planted"] { --c: #6f9a44; }
.sd-stage[data-stage="Seedling"] { --c: #65a30d; }
.sd-stage[data-stage="Veg"] { --c: #16a34a; }
.sd-stage[data-stage="Flower"] { --c: #9333ea; }
.sd-stage[data-stage="Drying"] { --c: #d97706; }
.sd-stage[data-stage="Curing"] { --c: #92400e; }
.sd-stage[data-stage="Success"] { --c: #0284c7; }
[data-bs-theme="dark"] .sd-stage[data-stage="Flower"] { --c: #c084fc; }
[data-bs-theme="dark"] .sd-stage[data-stage="Curing"] { --c: #d97706; }
[data-bs-theme="dark"] .sd-stage[data-stage="Success"] { --c: #38bdf8; }
.sd-prog { height: 6px; border-radius: 99px; background: var(--sd-seg); overflow: hidden; margin-top: .35rem; max-width: 260px; }
.sd-prog span { display: block; height: 100%; background: linear-gradient(90deg, #84cc16, #9333ea); }
@media (max-width: 575.98px) {
    .sd-grow { grid-template-columns: 56px minmax(0, 1fr); }
    .sd-grow-rt { grid-column: 2; text-align: left; flex-direction: row; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
}

/* Family diagram */
.sd-fam { display: flex; align-items: center; gap: .5rem; overflow-x: auto; padding-bottom: .2rem; }
.sd-col { display: grid; gap: .45rem; flex: 1 1 0; min-width: 9.5rem; }
.sd-node { display: block; border-radius: 11px; padding: .45rem .7rem; background: var(--sd-soft); border: 1px solid var(--sd-line); font-size: .84rem; font-weight: 600; color: var(--sd-ink); text-decoration: none; }
.sd-node small { display: block; font-weight: 500; color: var(--sd-muted); font-size: .72rem; }
a.sd-node:hover { border-color: var(--sd-acc); }
.sd-node.lib { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.sd-node.ext { color: var(--sd-muted); }
.sd-node.me { background: var(--sd-acc); border-color: var(--sd-acc); color: #fff; font-size: .98rem; text-align: center; padding: .75rem; }
.sd-node.me small { color: #dcfce7; }
.sd-node.kid { background: #faf5ff; border-color: #e9d5ff; color: #6b21a8; }
[data-bs-theme="dark"] .sd-node.lib { background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .3); color: #86efac; }
[data-bs-theme="dark"] .sd-node.kid { background: rgba(192, 132, 252, .1); border-color: rgba(192, 132, 252, .3); color: #d8b4fe; }
.sd-node-wrap { position: relative; }
.sd-node-wrap .sd-node { padding-right: 1.8rem; }
.sd-node-sc { position: absolute; top: .45rem; right: .55rem; font-size: .68rem; color: var(--sd-faint); }
.sd-node-sc:hover { color: var(--sd-acc); }
.sd-node-ext-ic { position: absolute; top: .45rem; right: .55rem; font-size: .68rem; color: var(--sd-faint); }
a.sd-node.ext { position: relative; padding-right: 1.8rem; }
.sd-arr { color: var(--sd-faint); flex: none; }
@media (max-width: 767.98px) {
    .sd-fam { flex-direction: column; align-items: stretch; }
    .sd-col { min-width: 0; }
    .sd-arr { transform: rotate(90deg); align-self: center; }
}

/* About, photos */
.sd-prose { line-height: 1.6; }
.sd-prose > :last-child { margin-bottom: 0; }
.sd-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.sd-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
@media (max-width: 767.98px) { .sd-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Seed Vault */
.sd-vault-n { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.sd-vault-n > b { font-size: 2rem; font-weight: 800; line-height: 1; }
.sd-stepper { display: inline-flex; margin-left: auto; border-radius: 9px; box-shadow: 0 0 0 1px var(--sd-line); overflow: hidden; }
.sd-stepper button { border: 0; background: var(--sd-card); color: var(--sd-ink); width: 32px; height: 30px; font-size: 1rem; }
.sd-stepper button + button { border-left: 1px solid var(--sd-line); }
.sd-stepper button:hover { color: var(--sd-acc); background: var(--sd-soft); }
.sd-vault-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.sd-pack { display: block; margin-bottom: .7rem; text-align: center; }
.sd-pack img { max-width: 100%; max-height: 200px; border-radius: 10px; }

/* Facts */
.sd-facts { list-style: none; padding: 0; margin: .5rem 0 0; }
.sd-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--sd-line); font-size: .86rem; }
.sd-facts li:first-child { border-top: 0; }
.sd-facts li > span:first-child { color: var(--sd-muted); white-space: nowrap; }
.sd-facts li > span:first-child i { width: 1.2em; margin-right: .35rem; color: var(--sd-faint); }
.sd-facts li > span:last-child { font-weight: 600; text-align: right; }
.sd-irat .lbls { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; }
.sd-irat .lbls .i { color: #7c3aed; }
.sd-irat .lbls .s { color: #16a34a; }
[data-bs-theme="dark"] .sd-irat .lbls .i { color: #a78bfa; }
[data-bs-theme="dark"] .sd-irat .lbls .s { color: #4ade80; }
.sd-irat .bar { height: 8px; border-radius: 99px; background: #22c55e; overflow: hidden; margin: .25rem 0; }
.sd-irat .bar span { display: block; height: 100%; background: #8b5cf6; }
.sd-irat .cap { font-size: .78rem; color: var(--sd-muted); text-align: center; }
.sd-pot { margin-top: .6rem; }
.sd-rng { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: .6rem; align-items: center; font-size: .82rem; margin: .3rem 0; }
.sd-rng b { font-size: .78rem; }
.sd-rng .tr { height: 6px; border-radius: 99px; background: var(--sd-seg); position: relative; }
.sd-rng .tr span { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--sd-acc); }
.sd-rng .v { font-weight: 700; white-space: nowrap; }

/* Effects & terpenes */
.sd-sub { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sd-muted); margin: .9rem 0 .4rem; }
.sd-h + .sd-sub { margin-top: 0; }
.sd-eff { display: grid; grid-template-columns: minmax(5rem, auto) minmax(0, 1fr); gap: .35rem .8rem; align-items: center; font-size: .84rem; }
.sd-eff .tr { height: 7px; border-radius: 99px; background: var(--sd-seg); overflow: hidden; }
.sd-eff .tr span { display: block; height: 100%; background: #38bdf8; border-radius: 99px; }
.sd-terp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: center; font-size: .84rem; }
.sd-terp .dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.sd-terp .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--sd-seg); }
.sd-terp .dots i.on { background: #f59e0b; }
.sd-terp .lv { display: inline-block; min-width: 3.6rem; font-size: .74rem; color: var(--sd-muted); text-align: right; }

/* BudMinder wordmark: a light-background and a dark-background version,
   shown by theme (the dark one has lighter greens and white "Minder"). */
.brand-wm { height: 30px; width: auto; display: block; }
.brand-wm-lg { height: 64px; width: auto; max-width: 100%; display: inline-block; }
.brand-dark { display: none !important; }
[data-bs-theme="dark"] .brand-light { display: none !important; }
[data-bs-theme="dark"] .brand-dark { display: block !important; }
[data-bs-theme="dark"] .brand-wm-lg.brand-dark { display: inline-block !important; }
/* ============================================
   SMOKE REPORTS (mockup data/mockups/smoke, "Forest" colors: deep green,
   outlined score numbers, solid badges, no pastel fills). sr-* on top of
   the strain page's sd-* look.
   ============================================ */
:root {
  --sr-acc: #166534; --sr-acc2: #15803d; --sr-gold: #f59e0b;
  --sr-in-bg: transparent; --sr-in-bd: #166534; --sr-in-fg: #166534;
  --sr-grown-bg: #166534; --sr-grown-fg: #fff; --sr-yes-bg: #166534; --sr-yes-fg: #fff;
  --sr-eff-bg: transparent; --sr-eff-bd: #166534; --sr-eff-fg: #166534;
}
[data-bs-theme="dark"] {
  --sr-acc: #22c55e; --sr-acc2: #16a34a; --sr-in-bd: #22c55e; --sr-in-fg: #4ade80;
  --sr-grown-bg: #15803d; --sr-yes-bg: #15803d; --sr-eff-bd: #22c55e; --sr-eff-fg: #4ade80;
}
body { --sr-scorebg: var(--sr-acc); --sr-num: var(--sr-acc); }
/* ---------- shared ---------- */
.sr { padding-bottom: 2rem; --sd-acc: var(--sr-acc); --sd-acc-dark: var(--sr-acc); }
.sr-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: .3rem 0 1rem; }
.sr-top h1 { font-size: 1.7rem; font-weight: 800; margin: 0; }
.sr-top p { margin: .15rem 0 0; color: var(--sd-muted); }
.sr-score { display: inline-flex; align-items: baseline; gap: .1rem; font-weight: 800; color: var(--sr-scorefg, #fff); background: var(--sr-scorebg); box-shadow: inset 0 0 0 1.5px var(--sr-scorebd, transparent); border-radius: 10px; padding: .15rem .5rem; font-size: .95rem; }
.sr-score small { font-size: .7rem; opacity: .85; font-weight: 600; }
.sr-score.mid { background: #ca8a04; }
.sr-score.low { background: #dc2626; }
.sr-src { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .14rem .5rem; border-radius: 99px; }
.sr-src.grown { background: var(--sr-grown-bg); color: var(--sr-grown-fg); box-shadow: inset 0 0 0 1.5px var(--sr-grown-bd, transparent); }
.sr-src.bought { background: #ede9fe; color: #5b21b6; }
[data-bs-theme="dark"] .sr-src.bought { background: rgba(167,139,250,.16); color: #c4b5fd; }
.sr-again { white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; padding: .14rem .55rem; border-radius: 99px; }
.sr-again.yes { background: var(--sr-yes-bg); color: var(--sr-yes-fg); box-shadow: inset 0 0 0 1.5px var(--sr-yes-bd, transparent); }
.sr-again.maybe { background: #fef3c7; color: #92400e; }
.sr-again.no { background: #fee2e2; color: #991b1b; }
[data-bs-theme="dark"] .sr-again.maybe { background: rgba(251,191,36,.14); color: #fcd34d; }
[data-bs-theme="dark"] .sr-again.no { background: rgba(248,113,113,.14); color: #fca5a5; }
.sr-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; padding: .22rem .65rem; border-radius: 99px; background: var(--sd-soft); border: 1px solid var(--sd-line); color: var(--sd-ink); }
.sr-chip.eff { background: var(--sr-eff-bg); border-color: var(--sr-eff-bd); color: var(--sr-eff-fg); }
.sr-chip.side { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.sr-chip.smell { background: #f5f3ff; border-color: #ddd6fe; color: #5b21b6; }
.sr-chip.taste { background: #fdf2f8; border-color: #fbcfe8; color: #9d174d; }
.sr-chip.bud { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
.sr-chip.custom { border-style: dashed; }
[data-bs-theme="dark"] .sr-chip.side { background: rgba(251,146,60,.1); border-color: rgba(251,146,60,.3); color: #fdba74; }
[data-bs-theme="dark"] .sr-chip.smell { background: rgba(167,139,250,.1); border-color: rgba(167,139,250,.3); color: #c4b5fd; }
[data-bs-theme="dark"] .sr-chip.taste { background: rgba(244,114,182,.1); border-color: rgba(244,114,182,.3); color: #f9a8d4; }
[data-bs-theme="dark"] .sr-chip.bud { background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.3); color: #7dd3fc; }
.sr-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---------- list page ---------- */
.sr-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .9rem; }
.sr-seg { display: inline-flex; background: var(--sd-seg); border-radius: 10px; padding: 3px; }
.sr-seg button { border: 0; background: none; padding: .3rem .75rem; border-radius: 8px; font-size: .84rem; font-weight: 600; color: var(--sd-ink); }
.sr-seg button.on { background: var(--sd-card); box-shadow: var(--sd-shadow); }
.sr-search { display: flex; align-items: center; gap: .4rem; background: var(--sd-card); border-radius: 10px; padding: .35rem .7rem; box-shadow: 0 0 0 1px var(--sd-line); }
.sr-search input { border: 0; background: none; outline: none; color: var(--sd-ink); width: 12rem; }
.sr-sel { border-radius: 10px; border: 0; box-shadow: 0 0 0 1px var(--sd-line); background: var(--sd-card); color: var(--sd-ink); padding: .38rem .6rem; font-size: .86rem; }
.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
.sr-card { background: var(--sd-card); border-radius: 16px; box-shadow: var(--sd-shadow); overflow: hidden; text-decoration: none; color: var(--sd-ink); display: block; transition: transform .12s, box-shadow .12s; }
.sr-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,40,35,.14); color: var(--sd-ink); }
.sr-card .ph { position: relative; aspect-ratio: 4/3; background: var(--sd-soft); }
.sr-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.sr-card .ph .sr-score { position: absolute; right: .6rem; bottom: .6rem; font-size: 1.05rem; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.sr-card .ph .sr-src { position: absolute; left: .6rem; top: .6rem; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.sr-card .bd { padding: .7rem .85rem .8rem; }
.sr-card h3 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.sr-card .by { font-size: .82rem; color: var(--sd-muted); margin: .05rem 0 .45rem; }
.sr-card .mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: .5rem 0 .55rem; }
.sr-card .mini div { background: var(--sd-soft); border-radius: 8px; text-align: center; padding: .25rem 0; font-size: .7rem; color: var(--sd-muted); }
.sr-card .mini b { display: block; font-size: .95rem; color: var(--sd-ink); }
.sr-card .ft { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--sd-muted); }
.sr-tbl { width: 100%; background: var(--sd-card); border-radius: 16px; box-shadow: var(--sd-shadow); overflow: hidden; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.sr-tbl th { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sd-muted); padding: .6rem .7rem; border-bottom: 1px solid var(--sd-line); white-space: nowrap; cursor: pointer; }
.sr-tbl th.on { color: var(--sr-acc); }
.sr-tbl td { padding: .55rem .7rem; border-bottom: 1px solid var(--sd-line); vertical-align: middle; }
.sr-tbl tr:last-child td { border-bottom: 0; }
.sr-tbl td.n { text-align: center; font-weight: 700; }
.sr-tbl .thumb { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }
.sr-tbl a { color: var(--sd-ink); font-weight: 700; text-decoration: none; }

/* ---------- report page (product style) ---------- */
.sr-prod { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
@media (max-width: 991.98px) { .sr-prod { grid-template-columns: minmax(0, 1fr); } }
.sr-photo { position: relative; border-radius: 18px; overflow: hidden; background: var(--sd-soft); box-shadow: var(--sd-shadow); aspect-ratio: 4/3; }
.sr-photo img { width: 100%; height: 100%; object-fit: cover; }
.sr-photo .sr-src { position: absolute; left: .8rem; top: .8rem; font-size: .8rem; padding: .25rem .7rem; }
.sr-thumbs { display: flex; gap: .5rem; margin-top: .6rem; }
.sr-thumbs img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; opacity: .65; cursor: pointer; }
.sr-thumbs img.on { opacity: 1; outline: 3px solid var(--sr-acc); outline-offset: 2px; }
.sr-info h1 { font-size: 2.1rem; font-weight: 800; margin: 0; }
.sr-info .by { color: var(--sd-muted); margin: .15rem 0 .7rem; }
.sr-info .by a { color: var(--sd-acc); font-weight: 600; text-decoration: none; }
.sr-big { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; padding: .9rem 1rem; border-radius: 16px; background: var(--sd-card); box-shadow: var(--sd-shadow); }
.sr-big .num { font-size: 2.9rem; font-weight: 900; line-height: 1; color: var(--sr-num); }
.sr-big .num small { font-size: 1rem; color: var(--sd-muted); font-weight: 700; }
.sr-dots { display: flex; gap: 4px; margin: .2rem 0 .25rem; }
.sr-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--sd-seg); display: block; }
.sr-dots i.on { background: var(--sr-acc); }
.sr-dots i.half { background: linear-gradient(90deg, var(--sr-acc) 50%, var(--sd-seg) 50%); }
.sr-big .lbl { font-size: .82rem; color: var(--sd-muted); }
.sr-price { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.sr-price .p { font-size: 1.6rem; font-weight: 800; }
.sr-price .pg { font-weight: 700; color: var(--sr-acc); }
.sr-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .8rem 0; }
.sr-kv div { background: var(--sd-card); border-radius: 12px; box-shadow: 0 0 0 1px var(--sd-line); padding: .45rem .6rem; }
.sr-kv small { display: block; font-size: .7rem; color: var(--sd-muted); text-transform: uppercase; letter-spacing: .03em; }
.sr-kv b { font-size: .98rem; }
.sr-bars .r { display: grid; grid-template-columns: 7.5rem minmax(0,1fr) 2.2rem 2.4rem; gap: .6rem; align-items: center; margin-bottom: .55rem; font-size: .88rem; }
.sr-bars .tr { height: 10px; border-radius: 99px; background: var(--sd-seg); overflow: hidden; }
.sr-bars .tr span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sr-acc2), var(--sr-acc)); }
.sr-bars .v { font-weight: 800; text-align: right; }
.sr-bars .w { font-size: .72rem; color: var(--sd-muted); font-weight: 700; text-align: right; }
.sr-sec h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sd-muted); margin: .8rem 0 .4rem; font-weight: 800; }
.sr-spec { width: 100%; font-size: .88rem; }
.sr-spec td { padding: .38rem 0; border-bottom: 1px solid var(--sd-line); }
.sr-spec td:first-child { color: var(--sd-muted); width: 45%; }
.sr-spec tr:last-child td { border-bottom: 0; }
.sr-bm { font-size: .68rem; color: var(--sr-acc); font-weight: 700; margin-left: .3rem; white-space: nowrap; }
.sr-note { white-space: pre-line; font-size: .95rem; }
.sr-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
.sr-more a { display: flex; gap: .55rem; align-items: center; text-decoration: none; color: var(--sd-ink); background: var(--sd-soft); border-radius: 12px; padding: .45rem; }
.sr-more img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; }
.sr-more small { display: block; color: var(--sd-muted); font-size: .72rem; }

/* ---------- form ---------- */
.sr-form .sd-card { margin-bottom: .9rem; }
.sr-form label.f { display: block; font-size: .8rem; font-weight: 700; margin-bottom: .2rem; }
.sr-form .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem .9rem; }
.sr-from { font-size: .68rem; font-weight: 700; color: var(--sr-acc); margin-left: .35rem; }
.sr-from.sug { color: #ca8a04; }
.sr-pick { display: flex; gap: .4rem; flex-wrap: wrap; }
.sr-pick button { border: 1px solid var(--sd-line); background: var(--sd-card); color: var(--sd-ink); border-radius: 99px; padding: .28rem .7rem; font-size: .84rem; font-weight: 600; }
.sr-pick button.on { background: var(--sr-acc); border-color: var(--sr-acc); color: #fff; }
.sr-pick button.on.side { background: #ea580c; border-color: #ea580c; }
.sr-pick button.on.smell { background: #7c3aed; border-color: #7c3aed; }
.sr-pick button.on.taste { background: #db2777; border-color: #db2777; }
.sr-pick button.on.bud { background: #0284c7; border-color: #0284c7; }
.sr-pick button.other { border-style: dashed; color: var(--sd-muted); }
.sr-pick .otherin { border: 1px dashed var(--sd-acc); border-radius: 99px; padding: .22rem .7rem; font-size: .84rem; width: 11rem; background: var(--sd-card); color: var(--sd-ink); }
.sr-scorerow { display: grid; grid-template-columns: 8.5rem minmax(0,1fr) 3rem; gap: .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--sd-line); }
.sr-scorerow:last-child { border-bottom: 0; }
.sr-scorerow .lbl b { display: block; font-size: .92rem; }
.sr-scorerow .lbl small { color: var(--sd-muted); font-size: .74rem; line-height: 1.2; display: block; }
.sr-ten { display: flex; gap: 4px; flex-wrap: wrap; }
.sr-ten button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--sd-line); background: var(--sd-card); color: var(--sd-ink); font-weight: 700; font-size: .88rem; }
.sr-ten button.in { background: var(--sr-in-bg); border-color: var(--sr-in-bd); color: var(--sr-in-fg); }
.sr-ten button.on { background: var(--sr-acc); border-color: var(--sr-acc); color: #fff; }
.sr-scorerow .wt { font-size: .74rem; font-weight: 800; color: var(--sd-muted); text-align: right; }
.sr-overall { display: flex; align-items: center; gap: .7rem; justify-content: flex-end; margin-top: .6rem; font-weight: 700; }
.sr-tabs { display: flex; gap: .3rem; margin-bottom: .7rem; }
.sr-tabs button { border: 0; background: var(--sd-soft); color: var(--sd-ink); border-radius: 10px; padding: .4rem .8rem; font-size: .85rem; font-weight: 600; box-shadow: 0 0 0 1px var(--sd-line); }
.sr-tabs button.on { background: var(--sr-acc); color: #fff; box-shadow: none; }
.sr-drop { border: 2px dashed var(--sd-line); border-radius: 14px; padding: 1.2rem; text-align: center; color: var(--sd-muted); }
.sr-jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .45rem; }
.sr-jgrid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; cursor: pointer; opacity: .8; }
.sr-jgrid img.on { opacity: 1; outline: 3px solid var(--sr-acc); outline-offset: 2px; }
.sr-ac { position: relative; }
.sr-acdd { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--sd-card); border: 1px solid var(--sd-line); border-radius: 0 0 12px 12px; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.sr-acdd .h { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sd-muted); padding: .45rem .75rem .2rem; font-weight: 800; }
.sr-acdd .it { padding: .45rem .75rem; border-top: 1px solid var(--sd-line); font-size: .9rem; display: flex; justify-content: space-between; gap: .5rem; }
.sr-acdd .it:hover, .sr-acdd .it.on { background: var(--color-row-hover); }
.sr-acdd .it small { color: var(--sd-muted); }
.sr-save { display: flex; justify-content: flex-end; gap: .5rem; }

/* ---------- settings card ---------- */
.sr-wt { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.sr-wt div { display: flex; align-items: center; justify-content: space-between; background: var(--color-row-hover); border-radius: 10px; padding: .4rem .6rem; font-weight: 600; font-size: .88rem; }
.sr-step { display: inline-flex; align-items: center; gap: .35rem; }
.sr-step button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-fg); line-height: 1; }
.sr-step b { min-width: 2rem; text-align: center; }
.sr-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .2rem 1rem; }
.sr-fields label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem 0; font-size: .9rem; }

/* ---------- touchpoints ---------- */
.sr-plbadge { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 800; padding: .12rem .45rem; border-radius: 99px; background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
[data-bs-theme="dark"] .sr-plbadge { background: rgba(251,146,60,.12); color: #fdba74; border-color: rgba(251,146,60,.35); }
.sr-tl { width: 100%; height: 110px; }

/* Smoke report form: the photo list (first = main) */
.sr-plist { display: flex; flex-wrap: wrap; gap: .6rem; }
.sr-pitem { position: relative; width: 112px; height: 112px; border-radius: 12px; overflow: hidden; background: var(--sd-soft); box-shadow: 0 0 0 1px var(--sd-line); }
.sr-pitem.main { box-shadow: 0 0 0 3px var(--sr-acc); }
.sr-pitem img { width: 100%; height: 100%; object-fit: cover; }
.sr-pmain { position: absolute; left: .35rem; top: .35rem; background: var(--sr-acc); color: #fff; font-size: .68rem; font-weight: 800; border-radius: 99px; padding: .05rem .45rem; }
.sr-pacts { position: absolute; right: .3rem; top: .3rem; display: flex; gap: .25rem; }
.sr-pacts button { width: 26px; height: 26px; border: 0; border-radius: 8px; background: rgba(17,24,39,.75); color: #fff; font-size: .75rem; line-height: 1; }
.sr-pacts button:hover { background: rgba(17,24,39,.95); }
.sr-drop { cursor: pointer; }
.sr-drop:hover { border-color: var(--sr-acc); color: var(--sr-acc); }
.sr-sel, .sr-search input { font-size: .86rem; }

/* Plant page: the "Smoke" step after the stages, and the Smoke report button */
.pp-smoke a.pp-node, .pp-smoke span.pp-node { display: inline-grid; place-items: center; text-decoration: none; }
.pp-smoke-btn { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 700; padding: .12rem .55rem; border-radius: 99px;
  background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; text-decoration: none; }
.pp-smoke-btn:hover { background: #ffedd5; color: #9a3412; }
[data-bs-theme="dark"] .pp-smoke-btn { background: rgba(251,146,60,.12); color: #fdba74; border-color: rgba(251,146,60,.35); }
/* Plants page: a plant's smoke reports (latest score) */
.pl-smoke { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 800; padding: .12rem .45rem; border-radius: 99px;
  background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; text-decoration: none; }
[data-bs-theme="dark"] .pl-smoke { background: rgba(251,146,60,.12); color: #fdba74; border-color: rgba(251,146,60,.35); }
.sr-card .ph .sr-score:not(.mid):not(.low) { background: var(--sr-scorebg-photo, var(--sr-scorebg)); }

/* ---------- Smoke report form colors (Forest: solid accents, no pastel fills) ---------- */
.sr-form .sr-c { --cc: #166534; }
.sr-form .sr-c-source { --cc: #166534; }
.sr-form .sr-c-smoke { --cc: #166534; }
.sr-form .sr-c-grow { --cc: #0f766e; }
.sr-form .sr-c-scores { --cc: #eab308; }
.sr-form .sr-c-describe { --cc: #7c3aed; }
.sr-form .sr-c-again { --cc: #166534; }
.sr-form .sr-c-notes { --cc: #475569; }
.sr-form .sr-c-photos { --cc: #1d4ed8; }
[data-bs-theme="dark"] .sr-form .sr-c-grow { --cc: #14b8a6; }
[data-bs-theme="dark"] .sr-form .sr-c-scores { --cc: #facc15; }
[data-bs-theme="dark"] .sr-form .sr-c-describe { --cc: #a78bfa; }
[data-bs-theme="dark"] .sr-form .sr-c-notes { --cc: #94a3b8; }
[data-bs-theme="dark"] .sr-form .sr-c-photos { --cc: #60a5fa; }
[data-bs-theme="dark"] .sr-form .sr-c-smoke, [data-bs-theme="dark"] .sr-form .sr-c-again, [data-bs-theme="dark"] .sr-form .sr-c-source { --cc: #22c55e; }
.sr-form .sr-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cc); color: #fff; font-size: .8rem; flex: none; }
.sr-form .sr-c .sd-h > .sr-ic i { color: #fff; }
.sr-form .sr-c .sd-h { font-size: 1.05rem; }
/* "From my plants" / "Bought flower": the chosen one is filled */
.sr-form .sr-srcseg button.on { color: #fff; }
.sr-form .sr-srcseg button[data-source="grown"].on { background: #166534; }
.sr-form .sr-srcseg button[data-source="bought"].on { background: #6d28d9; }
/* Choice chips: each group in its own color; picked = filled */
.sr-form .sr-pick button { border-width: 1.5px; }
.sr-form .sr-pick[data-kind="effect"] button, .sr-form .sr-pick[data-method] button { --g: #166534; }
.sr-form .sr-pick[data-kind="side"] button { --g: #c2410c; }
.sr-form .sr-pick[data-kind="smell"] button { --g: #7c3aed; }
.sr-form .sr-pick[data-kind="taste"] button { --g: #be185d; }
.sr-form .sr-pick[data-kind="bud"] button { --g: #0369a1; }
[data-bs-theme="dark"] .sr-form .sr-pick[data-kind="effect"] button, [data-bs-theme="dark"] .sr-form .sr-pick[data-method] button { --g: #4ade80; }
[data-bs-theme="dark"] .sr-form .sr-pick[data-kind="side"] button { --g: #fb923c; }
[data-bs-theme="dark"] .sr-form .sr-pick[data-kind="smell"] button { --g: #a78bfa; }
[data-bs-theme="dark"] .sr-form .sr-pick[data-kind="taste"] button { --g: #f472b6; }
[data-bs-theme="dark"] .sr-form .sr-pick[data-kind="bud"] button { --g: #38bdf8; }
.sr-form .sr-pick button:not(.other) { color: var(--g); border-color: color-mix(in srgb, var(--g) 55%, transparent); }
.sr-form .sr-pick button:not(.other):hover { border-color: var(--g); }
.sr-form .sr-pick button.on, .sr-form .sr-pick button.on.side, .sr-form .sr-pick button.on.smell,
.sr-form .sr-pick button.on.taste, .sr-form .sr-pick button.on.bud { background: var(--g); border-color: var(--g); color: #fff; }
[data-bs-theme="dark"] .sr-form .sr-pick button.on { color: #111827; }
.sr-form .sr-pick .otherin { border-color: color-mix(in srgb, var(--cc, #166534) 60%, transparent); }
/* Score numbers stay plain until one is picked; then it and the numbers
   below it fill with their own shade, light green (1) to dark green (10) */
.sr-form .sr-ten button { border-width: 1.5px; }
.sr-form .sr-ten button:hover { border-color: #16a34a; }
.sr-form .sr-ten button.in, .sr-form .sr-ten button.on { background: var(--n); border-color: var(--n); color: var(--nt); }
.sr-form .sr-ten button.on { box-shadow: 0 0 0 2px var(--sd-card), 0 0 0 4px #16a34a; }
/* Grow/buy again */
.sr-form .sr-ag-yes.on { background: #166534; color: #fff; }
.sr-form .sr-ag-maybe.on { background: #b45309; color: #fff; }
.sr-form .sr-ag-no.on { background: #b91c1c; color: #fff; }
/* Labels above each group: a dot in the group color */
.sr-form label.f[data-dot]::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); margin-right: .4rem; vertical-align: middle; }
.sr-form .sr-c .sr-tabs button.on { background: var(--cc); }

/* ===== Help manual (/manual, mockup data/mockups/manual) ===== */
.mn {
    --mn-acc: #16a34a;
    --mn-line: #e7ecea;
    --mn-soft: #f3f6f4;
    --mn-mk: #16a34a;
    --mn-tip-bg: #f0fdf4; --mn-tip-bd: #bbf7d0; --mn-tip-fg: #166534;
    display: grid; grid-template-columns: 240px minmax(0, 1fr) 200px; gap: 2.5rem;
    max-width: 1320px; margin: 0 auto; padding: 1.25rem 1rem 3rem; color: var(--color-fg);
}
[data-bs-theme="dark"] .mn {
    --mn-acc: #4ade80; --mn-line: #2c3237; --mn-soft: #1f2428;
    --mn-tip-bg: rgba(74, 222, 128, .08); --mn-tip-bd: rgba(74, 222, 128, .3); --mn-tip-fg: #86efac;
}
.mn-side { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow-y: auto; font-size: .9rem; padding-bottom: 1rem; }
.mn-search { position: relative; margin-bottom: 1rem; }
.mn-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--color-muted); font-size: .8rem; }
.mn-search input { width: 100%; padding: .45rem .7rem .45rem 2rem; border: 1px solid var(--mn-line); border-radius: 9px; background: var(--color-card); color: var(--color-fg); }
.mn-grp { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-fg); margin: 1.1rem 0 .35rem .5rem; }
.mn-side a { display: block; padding: .28rem .5rem; border-radius: 7px; color: var(--color-fg); text-decoration: none; }
.mn-side a:hover { background: var(--mn-soft); }
.mn-side a.on { background: var(--mn-soft); color: var(--mn-acc); font-weight: 600; }
.mn-results a { margin-bottom: .2rem; }
.mn-results small { display: block; color: var(--color-muted); font-size: .72rem; }
.mn-results span { display: block; color: var(--color-muted); font-size: .78rem; line-height: 1.35; margin-top: .1rem; }
.mn-results .mn-none { color: var(--color-muted); padding: .3rem .5rem; }
.mn-pick { display: none; }

.mn-body { min-width: 0; max-width: 760px; line-height: 1.65; font-size: .98rem; }
.mn-lang { font-size: .85rem; color: var(--color-muted); background: var(--mn-soft); border-radius: 8px; padding: .4rem .7rem; }
.mn-crumb { font-size: .82rem; color: var(--color-muted); margin-bottom: .2rem; }
.mn-body h1 { font-size: 2rem; font-weight: 800; margin-bottom: .8rem; }
.mn-body h2 { font-size: 1.35rem; font-weight: 700; margin: 2.2rem 0 .7rem; scroll-margin-top: 1rem; }
.mn-body h3 { font-size: 1.08rem; font-weight: 700; margin: 1.5rem 0 .5rem; scroll-margin-top: 1rem; }
.mn-body p, .mn-body ul, .mn-body ol { margin-bottom: .9rem; }
.mn-body > p:first-of-type { font-size: 1.05rem; color: var(--color-muted); }
.mn-body a { color: var(--mn-acc); }
.mn-body code { font-size: .88em; background: var(--mn-soft); padding: .1rem .3rem; border-radius: 5px; color: inherit; }
.mn-body table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .92rem; }
.mn-body th, .mn-body td { border-bottom: 1px solid var(--mn-line); padding: .4rem .5rem; text-align: left; vertical-align: top; }
.mn-figwrap { margin: 1rem 0 1.2rem; }
.mn-fig { display: block; border: 1px solid var(--mn-line); border-radius: 12px; overflow: hidden; background: var(--mn-soft); }
.mn-fig img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.mn-fig .dark { display: none; }
[data-bs-theme="dark"] .mn-fig .light { display: none; }
[data-bs-theme="dark"] .mn-fig .dark { display: block; }
.mn-n { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--mn-mk);
        color: #fff; font-size: .75rem; font-weight: 700; margin-right: .35rem; vertical-align: .1em; line-height: 1; }
/* A list whose items start with a number circle: no bullets, circle as the marker. */
.mn-body ul:has(> li > .mn-n:first-child), .mn-body ol:has(> li > .mn-n:first-child) { list-style: none; padding-left: 0; }
.mn-body li:has(> .mn-n:first-child) { padding-left: 1.85rem; text-indent: -1.85rem; margin-bottom: .5rem; }
.mn-body li > .mn-n:first-child { text-indent: 0; }
.mn-body li:has(> .mn-n:first-child) :is(ul, ol) { text-indent: 0; list-style: disc; padding-left: 1.3rem; margin: .3rem 0 0; }
.mn-body li:has(> .mn-n:first-child) li { margin-bottom: .15rem; }
/* Blockquotes are tips: > **Tip:** … */
.mn-body blockquote { background: var(--mn-tip-bg); border: 1px solid var(--mn-tip-bd); border-radius: 10px; padding: .7rem .9rem; margin: 1rem 0; }
.mn-body blockquote p { margin: 0; }
.mn-body blockquote p + p { margin-top: .5rem; }
.mn-body blockquote strong:first-child { color: var(--mn-tip-fg); }
.mn-pn { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--mn-line); }
.mn-pn a { display: block; flex: 1; max-width: 48%; padding: .7rem .9rem; border: 1px solid var(--mn-line); border-radius: 10px; text-decoration: none; color: var(--color-fg); }
.mn-pn a:hover { border-color: var(--mn-acc); }
.mn-pn small { display: block; color: var(--color-muted); font-size: .75rem; }
.mn-pn .next { text-align: right; margin-left: auto; }

.mn-toc { position: sticky; top: 1rem; align-self: start; font-size: .84rem; }
.mn-toc .t { font-weight: 700; margin-bottom: .4rem; }
.mn-toc a { display: block; padding: .2rem 0 .2rem .7rem; border-left: 2px solid var(--mn-line); color: var(--color-muted); text-decoration: none; }
.mn-toc a.on { border-color: var(--mn-acc); color: var(--mn-acc); }

/* Tap a picture: full size over the page; tap again or Esc to close. */
.mn-zoom { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; padding: 1rem; cursor: zoom-out; overflow: auto; }
.mn-zoom img { max-width: none; height: auto; border-radius: 10px; }

@media (max-width: 1100px) { .mn { grid-template-columns: 220px minmax(0, 1fr); } .mn-toc { display: none; } }
@media (max-width: 760px) {
    .mn { display: block; padding-top: .75rem; }
    .mn-side { display: none; }
    .mn-pick { display: flex; margin-bottom: 1rem; }
    .mn-pick select { flex: 1; padding: .45rem .6rem; border: 1px solid var(--mn-line); border-radius: 9px; background: var(--color-card); color: var(--color-fg); }
    .mn-body h1 { font-size: 1.6rem; }
    .mn-zoom { align-items: flex-start; justify-content: flex-start; }
}

/* Demo mode (handlers/demo.go, js/demo.js) */
.bm-demo-banner { background: #fef3c7; color: #78350f; text-align: center; font-size: .88rem; padding: .35rem 1rem; }
[data-bs-theme="dark"] .bm-demo-banner { background: #422006; color: #fde68a; }
.bm-demo-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem); z-index: 2000; background: #1f2937; color: #fff; padding: .6rem 1.1rem; border-radius: 999px; font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100% - 2rem); text-align: center; }
.bm-demo-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== First-run tour (web/static/js/tour.js) ===== */
.bm-tour {
    --bt-paper: #fbf9f3; --bt-rule: #cdbf97; --bt-line: #e3e6ea; --bt-muted: #5d6573; --bt-green: #16a34a;
    --bt-ring: #9333ea; --bt-ring-soft: rgba(147, 51, 234, .08); --bt-clip: #fff; --bt-bg: #f8f9fa;
    position: fixed; inset: 0; z-index: 1070; display: grid; place-items: center; padding: 16px;
}
[data-bs-theme="dark"] .bm-tour {
    --bt-paper: #1b231f; --bt-rule: #4f6b56; --bt-line: #323a42; --bt-muted: #a3acb6; --bt-green: #22c55e;
    --bt-ring: #c084fc; --bt-ring-soft: rgba(192, 132, 252, .1); --bt-clip: #11161a; --bt-bg: #15191d;
}
.bm-tour[hidden] { display: none; }
body.bm-tour-open { overflow: hidden; }
.bt-veil { position: fixed; inset: 0; background: rgba(15, 20, 18, .55); backdrop-filter: blur(2px); }
[data-bs-theme="dark"] .bt-veil { background: rgba(0, 0, 0, .62); }
.bt-wrap { position: relative; width: min(680px, 100%); display: flex; justify-content: center; }
.bt-card { width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--bt-paper); color: var(--color-fg);
    border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); overflow: hidden; }
.bt-card.bt-ask { width: min(470px, 100%); }
.bt-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; color: var(--bt-muted); font-size: 13px; }
.bt-tipno { font-weight: 700; color: var(--bt-green); letter-spacing: .02em; }
.bt-x { margin-left: auto; border: 0; background: none; color: var(--bt-muted); font-size: 18px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.bt-body { padding: 8px 18px 4px; overflow-y: auto; }
.bt-card h2 { margin: 2px 0 12px; font-size: 22px; line-height: 1.25; text-align: center; font-weight: 700; }
.bt-divider { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--bt-green); margin: 4px auto 6px; max-width: 260px; font-size: 15px; }
.bt-divider::before, .bt-divider::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--bt-rule)); }
.bt-divider::after { background: linear-gradient(90deg, var(--bt-rule), transparent); }
.bt-ask-text { text-align: center; margin: 0 0 8px; }
.bt-after { text-align: center; color: var(--bt-muted); font-size: 14px; margin: 4px 0 10px; }
/* A picture, and the rings drawn over it */
.bt-fig { position: relative; margin: 0 0 12px; border: 1px solid var(--bt-line); border-radius: 10px; overflow: hidden; background: var(--bt-bg); }
.bt-fig img { display: block; width: 100%; height: auto; }
.bt-fig img.on { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .5s; }
.bt-fig.lit img.on { opacity: 1; }
/* The ring: two quick beats, then a rest; the line moves out a fixed 3px, so big and small spots beat alike. */
.bt-spot { position: absolute; outline: 2px solid var(--bt-ring); outline-offset: 0; border-radius: 10px; opacity: 0; transform: scale(1.2);
    transition: opacity .3s, transform .35s; pointer-events: none; }
.bt-spot.round { border-radius: 50%; }
.bt-spot.on { opacity: 1; transform: scale(1); animation: bt-beat 1.8s ease-in-out .35s infinite; }
@keyframes bt-beat { 0%, 40%, 100% { outline-offset: 0; opacity: .75; } 12%, 32% { outline-offset: 3px; opacity: 1; } 24% { outline-offset: 0; opacity: .75; } }
/* Lines fill in one at a time; the newest one has a purple bar while it types. */
.bt-ln { position: relative; margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 3px solid transparent; border-radius: 0 6px 6px 0;
    transition: border-color .6s, background-color .6s; }
.bt-ln.now { border-left-color: var(--bt-ring); background: var(--bt-ring-soft); transition: none; }
.bt-ln.muted { color: var(--bt-muted); font-size: 14px; }
.bt-ghost { color: transparent; }
.bt-caret { display: inline-block; width: 2px; height: 1.05em; margin: 0 1px -2px; background: var(--bt-ring); animation: bt-blink .8s steps(1) infinite; }
@keyframes bt-blink { 50% { opacity: 0; } }
/* A clip, its steps listed under it */
.bt-clip { position: relative; margin: 0 0 10px; border: 1px solid var(--bt-line); border-radius: 12px; overflow: hidden; background: var(--bt-clip); }
.bt-clip video, .bt-clip img { display: block; width: 100%; height: auto; aspect-ratio: 880 / 576; max-height: calc(100vh - 430px); min-height: 180px; object-fit: contain; }
.bt-ctl { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.bt-ctl button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(20, 30, 24, .72); color: #fff; cursor: pointer; display: grid; place-items: center; }
.bt-caps { list-style: none; margin: 0 0 10px; padding: 0; }
.bt-caps .bt-ln { margin-bottom: 4px; padding-left: 30px; }
.bt-caps .bt-ln::before { content: ""; position: absolute; left: 10px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--bt-line); }
.bt-caps .bt-ln.seen::before { content: "\f00c"; font: 900 11px/1 "Font Awesome 6 Free"; background: none; color: var(--bt-green); top: .5em; left: 9px; width: auto; height: auto; }
.bt-caps .bt-ln.now::before { background: var(--bt-ring); }
.bt-caps .bt-ln.seen { color: var(--bt-muted); }
.bt-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--bt-line); flex-wrap: wrap; }
.bt-dots { display: flex; gap: 6px; margin-right: auto; }
.bt-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bt-line); }
.bt-dots i.on { background: var(--bt-green); width: 20px; border-radius: 99px; }
.bt-skip { color: var(--bt-muted); text-decoration: none; }
.bm-tour .btn:focus-visible, .bt-x:focus-visible, .bt-ctl button:focus-visible { outline: 2px solid var(--bt-green); outline-offset: 2px; }
@media (max-width: 640px) {
    .bm-tour { place-items: end center; padding: 0; }
    .bt-card { max-height: 92vh; border-radius: 18px 18px 0 0; }
    .bt-card h2 { font-size: 20px; }
    .bt-skip { order: 9; width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .bt-spot.on { animation: none; } }

/* Help manual: the "Take the tour" card on Welcome and the side-menu link */
.mn-tour { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin: 0 0 18px; border-radius: 12px;
    background: #fbf9f3; border: 1px solid #e8dfc4; }
[data-bs-theme="dark"] .mn-tour { background: #1b231f; border-color: #33463a; }
.mn-tour > i { font-size: 22px; color: #16a34a; margin-top: 2px; }
.mn-tour h2 { font-size: 1.05rem; margin: 0 0 2px; font-weight: 700; }
.mn-tour p { margin: 0 0 8px; }
.mn-tour .jump { font-size: .9rem; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.mn-side .mn-tourlink { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #16a34a; margin: 0 0 8px; }

/* Help, Welcome: About BudMinder (version, credits, license) */
.mn-about { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--color-card-border); font-size: .92rem; }
.mn-about h2 { font-size: 1.05rem; }
.mn-about pre { white-space: pre-wrap; font-size: .8rem; background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: 8px; padding: .8rem 1rem; margin-top: .5rem; }
.mn-about summary { cursor: pointer; }

/* The "New release" item in the top menu (header2.html, update.js) */
header .isley-nav .bm-update-btn { border: 0; background: none; color: #16a34a; }
header .isley-nav .bm-update-btn i { animation: bm-update-nudge 2.4s ease-in-out 3; }
header .isley-nav .bm-update-btn .nav-lbl { font-weight: 700; }
@keyframes bm-update-nudge { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-3px); } 90% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { header .isley-nav .bm-update-btn i { animation: none; } }
.bm-upd-vers { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.bm-upd-vers dt { font-weight: 500; color: var(--bs-secondary-color); }
.bm-upd-vers dd { margin: 0; font-weight: 700; }
.bm-upd-notes { max-height: 40vh; overflow: auto; border: 1px solid var(--color-card-border); border-radius: 8px; padding: .6rem .9rem; font-size: .9rem; }
.bm-upd-notes h2, .bm-upd-notes h3 { font-size: 1rem; margin: .6rem 0 .3rem; }
.bm-upd-msg { margin: .8rem 0 0; }