/* ============================================================
   SmartPlant — Organic Premium 設計系統
   深色為主（:root）+ 亮色可切換（[data-theme="light"]）
   ============================================================ */

/* ── 設計 Token：深色（預設）─────────────────────────────── */
:root {
    /* 表面 / 背景 */
    --bg:          #14160F;   /* 溫暖深橄欖近黑 */
    --bg-elev:     #1C1F16;   /* 卡片表面 */
    --bg-elev-2:   #262A1F;   /* 輸入框 / 更高層 */
    --border:      #343A2B;   /* 低對比暖綠邊框 */
    --border-strong:#474E3B;

    /* 文字 */
    --text:        #ECEADF;   /* 暖白 */
    --text-muted:  #A2A68F;   /* 霧化鼠尾草灰 */
    --text-subtle: #929782;

    /* 品牌 */
    --primary:        #8ABF97;  /* 深色底上的霧化葉綠 */
    --primary-strong: #A3D1AE;
    --primary-contrast:#10130C;
    --primary-soft:   rgba(138,191,151,.14);

    /* 強調（沙金）*/
    --accent:      #D9AB5A;
    --accent-soft: rgba(217,171,90,.16);

    /* 感測語義色 */
    --c-temp:  #E59266;  /* 溫度 — 陶土橘 */
    --c-hum:   #6FAEC0;  /* 空氣濕度 — 霧藍 */
    --c-light: #E3BB5A;  /* 光照 — 蜜金 */
    --c-soil:  #B197C9;  /* 土壤濕度 — 暮紫 */

    /* 狀態 */
    --success: #74BC8E;
    --warning: #D9A441;
    --danger:  #DD7059;

    /* 陰影 */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow:    0 8px 28px -10px rgba(0,0,0,.55);
    --shadow-lg: 0 24px 56px -16px rgba(0,0,0,.65);

    /* 圓角（有機感 → 偏大）*/
    --radius-sm: 9px;
    --radius:    16px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* 字型 */
    --font-ui:      "Inter","Noto Sans TC",-apple-system,"Segoe UI",sans-serif;
    --font-display: "Fraunces","Noto Serif TC",Georgia,serif;

    /* 動效 */
    --ease: cubic-bezier(.4,0,.2,1);
}

/* ── 設計 Token：亮色 ────────────────────────────────────── */
[data-theme="light"] {
    --bg:          #FAF8F3;
    --bg-elev:     #FFFFFF;
    --bg-elev-2:   #F3EEE2;
    --border:      #E7E1D2;
    --border-strong:#D8D0BC;

    --text:        #2A2A24;
    --text-muted:  #5F5C51;
    --text-subtle: #69665A;

    --primary:        #2F5D3A;
    --primary-strong: #264C30;
    --primary-contrast:#FFFFFF;
    --primary-soft:   rgba(47,93,58,.09);

    --accent:      #BB8730;
    --accent-soft: rgba(187,135,48,.13);

    --c-temp:  #C9743F;
    --c-hum:   #3F87A0;
    --c-light: #BD9026;
    --c-soil:  #8A6FB0;

    --success: #3E8E5E;
    --warning: #B8862B;
    --danger:  #C0533B;

    --shadow-sm: 0 1px 2px rgba(60,50,30,.06);
    --shadow:    0 10px 28px -12px rgba(60,50,30,.16);
    --shadow-lg: 0 28px 56px -18px rgba(60,50,30,.20);
}

/* ── 舊變數相容別名（沿用既有 inline style 的 var(--sp-*)）──── */
:root {
    --sp-bg:     var(--bg);
    --sp-bg2:    var(--bg-elev-2);
    --sp-text:   var(--text);
    --sp-muted:  var(--text-muted);
    --sp-border: var(--border);
    --sp-green:  var(--primary);
    --sp-red:    var(--danger);
}

/* ── 基礎 ────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }

html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background .4s var(--ease), color .4s var(--ease);
}

/* 深色底的有機光暈背景 */
:root body {
    background-image:
        radial-gradient(900px 500px at 85% -10%, rgba(138,191,151,.08), transparent 60%),
        radial-gradient(700px 500px at 5% 110%, rgba(217,171,90,.06), transparent 55%);
    background-attachment: fixed;
}

h1,h2,h3,h4,h5 { letter-spacing: -.01em; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-strong); }

::selection { background: var(--primary-soft); }

/* 鍵盤使用者可清楚辨識焦點，滑鼠點擊則不額外顯示外框 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 82%, white);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--bg);
}
.skip-link {
    position: fixed; left: 1rem; top: .5rem; z-index: 3000;
    transform: translateY(-160%); padding: .65rem 1rem;
    border-radius: var(--radius-sm); background: var(--primary); color: var(--primary-contrast);
    font-weight: 700; box-shadow: var(--shadow-lg); transition: transform .18s var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--primary-contrast); }

/* 捲軸 */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-track { background: transparent; }

.text-muted { color: var(--text-muted) !important; }
.font-display { font-family: var(--font-display); }
.fw-600 { font-weight: 600; }

/* ── 導覽列 ──────────────────────────────────────────────── */
.sp-nav {
    min-height: 60px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--border);
}
.sp-nav .navbar-brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.18rem;
    color: var(--text) !important;
    display: flex; align-items: center; gap: .5rem;
}
.sp-nav .navbar-brand .brand-mark {
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--primary), var(--primary-strong));
    color: var(--primary-contrast);
    box-shadow: var(--shadow-sm);
}
.sp-nav .nav-link {
    color: var(--text-muted) !important;
    font-size: .9rem; font-weight: 500; line-height: 1.5;
    min-height: 44px;
    padding: .55rem .8rem !important;
    border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; gap: .4rem;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.sp-nav .nav-link:hover { color: var(--text) !important; background: var(--primary-soft); }
.sp-nav .navbar-actions { align-items: center; gap: .25rem; }
.sp-nav .theme-toggle-item { display: flex; align-items: center; }
.sp-nav .dropdown-menu {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); font-size: .9rem;
    padding: .4rem;
}
.sp-nav .dropdown-item {
    color: var(--text); border-radius: var(--radius-sm); padding: .5rem .7rem;
    min-height: 44px; width: 100%;
    display: flex; align-items: center; gap: .55rem;
}
.sp-nav .dropdown-item:hover { background: var(--primary-soft); color: var(--text); }
.sp-nav .planter-switcher-form { margin: 0; }
.sp-nav .planter-option.is-active { color: var(--primary); font-weight: 600; }
.sp-nav .planter-option__mark {
    flex: 0 0 1rem; width: 1rem; text-align: center;
}
.dropdown-divider { border-color: var(--border); }
.sp-nav .planter-switcher-toggle {
    appearance: none; width: auto; max-width: 15rem;
    border: 0; background: transparent;
    cursor: pointer; touch-action: manipulation; text-align: left;
}
.sp-nav .planter-switcher-toggle > * { pointer-events: none; }
.sp-nav #active-planter-name {
    max-width: 10.5rem; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.sp-nav #planter-dropdown-menu { min-width: 13rem; }

/* 行動版漢堡鈕 */
.navbar-toggler { border: 1px solid var(--border); padding: .3rem .5rem; }
.navbar-toggler:focus { box-shadow: none; }
:root .navbar-toggler-icon { filter: invert(1) brightness(1.8) grayscale(.3); }
[data-theme="light"] .navbar-toggler-icon { filter: none; }

/* 圖示尺寸（Lucide）*/
[data-lucide] { width: 1.05em; height: 1.05em; stroke-width: 2; }
.icon-sm [data-lucide], [data-lucide].sm { width: 16px; height: 16px; }

/* ── 主題切換按鈕 ─────────────────────────────────────────── */
.theme-toggle {
    width: 38px; height: 38px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: var(--bg-elev);
    color: var(--text-muted); display: grid; place-items: center; cursor: pointer;
    transition: all .2s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }

/* ── 按鈕 ────────────────────────────────────────────────── */
.btn { border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; transition: all .2s var(--ease); }
.btn-primary {
    background: var(--primary); border-color: var(--primary); color: var(--primary-contrast);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); color: var(--primary-contrast); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary:active { transform: translateY(0); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #1a1407; }
.btn-accent:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-secondary-sp {
    background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500;
}
.btn-secondary-sp:hover { border-color: var(--border-strong); background: var(--bg-elev-2); color: var(--text); }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--primary-soft); color: var(--text); }

/* ── 卡片 ────────────────────────────────────────────────── */
.sp-card, .stat-card, .config-section {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.sp-card { padding: 1.4rem 1.5rem; }
.sp-card--pad-lg { padding: 1.75rem; }
.config-section { padding: 1.4rem 1.5rem; margin-bottom: 1rem; }
.config-section h6 {
    font-size: .72rem; color: var(--text-subtle); text-transform: uppercase;
    letter-spacing: .08em; margin-bottom: 1.1rem; font-weight: 600;
}
.card-title-sp { font-size: .92rem; font-weight: 600; letter-spacing: .01em; }

/* ── 數值卡 ──────────────────────────────────────────────── */
.stat-card {
    padding: 1.3rem 1.4rem; position: relative; overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
/* 左側語義色條 */
.stat-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--metric, var(--primary)); opacity: .9;
}
.stat-card--temp  { --metric: var(--c-temp); }
.stat-card--hum   { --metric: var(--c-hum); }
.stat-card--light { --metric: var(--c-light); }
.stat-card--soil  { --metric: var(--c-soil); }
.stat-card__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.stat-card__icon {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--metric, var(--primary)) 16%, transparent);
    color: var(--metric, var(--primary));
}
.stat-card__label {
    font-size: .76rem; color: var(--text-muted); letter-spacing: .03em; font-weight: 500;
    text-transform: none;
}
.stat-card__value {
    font-family: var(--font-display);
    font-size: 2.3rem; font-weight: 600; line-height: 1; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.stat-card__value .unit { font-size: 1rem; font-weight: 500; color: var(--text-muted); margin-left: .15rem; font-family: var(--font-ui); }
.stat-card__trend { font-size: .8rem; margin-top: .5rem; display: flex; align-items: center; gap: .25rem; }
.trend-up   { color: var(--c-temp); }
.trend-down { color: var(--c-hum); }
.trend-flat { color: var(--text-subtle); }

/* ── 控制列 + 開關 ───────────────────────────────────────── */
.control-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 0; border-bottom: 1px solid var(--border);
}
.control-row:last-child { border-bottom: none; }
.control-row__name { font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: .55rem; }
.control-row__name .ctl-icon {
    width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary);
}
.control-row__status { font-size: .82rem; color: var(--text-muted); display: flex; align-items: center; gap: .45rem; margin-top: .25rem; }
.status-dot, .online-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot--on  { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); }
.status-dot--off { background: var(--text-subtle); }
.online-dot--on  { background: var(--success); animation: pulse 2.2s infinite; }
.online-dot--pending { background: var(--accent); animation: pulse 1.1s infinite; }
.online-dot--off { background: var(--text-subtle); }
@keyframes pulse { 0%,100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent);} 50%{ box-shadow: 0 0 0 6px transparent;} }

/* ── 表單 ────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius-sm); font-size: .9rem; padding: .6rem .8rem;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control::placeholder { color: var(--text-subtle); }
.form-control:focus, .form-select:focus {
    background: var(--bg-elev-2); color: var(--text);
    border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-label { font-size: .82rem; color: var(--text-muted); font-weight: 500; margin-bottom: .35rem; }
.field-hint { font-size: .74rem; color: var(--text-subtle); margin-top: .3rem; }
.field-error { display: block; min-height: 1em; margin-top: .25rem; font-size: .76rem; }
.field-validation-valid { min-height: 0; margin-top: 0; }
.validation-summary-valid { display: none; }
.validation-summary-errors {
    padding: .75rem .9rem; border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent);
    background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger);
    font-size: .84rem;
}
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* ── 徽章 / 標籤 ─────────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .7rem; border-radius: var(--radius-pill);
    font-size: .76rem; font-weight: 600;
    background: var(--primary-soft); color: var(--primary);
}
.pill--muted { background: var(--bg-elev-2); color: var(--text-muted); }
.pill--accent { background: var(--accent-soft); color: var(--accent); }

/* ── 載入骨架 ────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(100deg, var(--bg-elev-2) 30%, var(--border) 50%, var(--bg-elev-2) 70%);
    background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; color: transparent !important;
}
@keyframes shimmer { 0%{ background-position: 200% 0;} 100%{ background-position: -200% 0;} }

/* ── 認證頁 ──────────────────────────────────────────────── */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
@media (max-width: 860px) { .auth-shell { grid-template-columns: 1fr; } .auth-brand { display: none !important; } }
.auth-brand {
    position: relative; overflow: hidden; padding: 3.5rem; display: flex; flex-direction: column; justify-content: space-between;
    background:
        radial-gradient(700px 420px at 80% 10%, rgba(217,171,90,.16), transparent 60%),
        linear-gradient(160deg, #1d2417, #11160e 70%);
    color: var(--text);
}
.auth-brand__glow { position: absolute; inset: 0; background: radial-gradient(420px 420px at 30% 80%, rgba(138,191,151,.18), transparent 60%); }
.auth-panel { display: grid; place-items: center; padding: 2.5rem 1.5rem; background: var(--bg); }
.auth-card { width: 100%; max-width: 400px; }

/* ── 頁面標題列 ──────────────────────────────────────────── */
.page-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.page-hero__title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; margin: 0; }

/* 區段標題 */
.section-eyebrow { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); font-weight: 600; }

/* ── 狀態 Hero（儀表板焦點）─────────────────────────────── */
.status-hero {
    background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 13%, var(--bg-elev)), var(--bg-elev) 62%);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 1.5rem 1.6rem; box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.status-hero__title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; margin: .15rem 0 0; }
.status-hero__verdict { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.status-hero__badge { display: flex; align-items: center; gap: .85rem; }
.hero-badge__icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex-shrink: 0;
    background: var(--primary-soft); color: var(--primary); }
.hero-badge__icon.is-warn  { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.hero-badge__icon.is-alert { background: color-mix(in srgb, var(--danger) 18%, transparent);  color: var(--danger); }
.hero-badge__state  { font-size: 1.08rem; font-weight: 700; line-height: 1.2; }
.hero-badge__advice { font-size: .85rem; color: var(--text-muted); margin-top: .15rem; max-width: 30ch; }
.status-hero__action { white-space: nowrap; }
@media (max-width: 680px) {
    .status-hero { padding: 1.25rem; }
    .status-hero__verdict { width: 100%; justify-content: space-between; }
    .status-hero__action { flex: 1; }
}

/* ── 數值卡：狀態標 + 範圍條 ─────────────────────────────── */
.stat-state { font-size: .7rem; font-weight: 700; padding: .15rem .55rem; border-radius: var(--radius-pill); white-space: nowrap; }
.stat-state.is-ok    { background: var(--primary-soft); color: var(--primary); }
.stat-state.is-warn  { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.stat-state.is-alert { background: color-mix(in srgb, var(--danger) 18%, transparent);  color: var(--danger); }
.stat-range { position: relative; height: 6px; border-radius: 99px; background: var(--bg-elev-2); margin-top: .95rem; }
.stat-range__safe { position: absolute; top: 0; bottom: 0; border-radius: 99px;
    background: color-mix(in srgb, var(--metric, var(--primary)) 38%, transparent); transition: left .4s var(--ease), width .4s var(--ease); }
.stat-range__marker { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
    background: var(--metric, var(--primary)); transform: translate(-50%,-50%);
    box-shadow: 0 0 0 3px var(--bg-elev); transition: left .4s var(--ease); }
.stat-card__foot { font-size: .72rem; color: var(--text-subtle); margin-top: .5rem; }

/* ── 開關 ───────────────────────────────────────────────── */
.switch { width: 54px; height: 31px; border-radius: 99px; border: none; padding: 0; cursor: pointer;
    background: var(--bg-elev-2); position: relative; transition: background .25s var(--ease); flex-shrink: 0; }
.switch__knob { position: absolute; top: 3px; left: 3px; width: 25px; height: 25px; border-radius: 50%;
    background: var(--text-subtle); transition: left .25s var(--ease), background .25s var(--ease); }
.switch.is-on { background: var(--primary); }
.switch.is-on .switch__knob { left: 26px; background: var(--primary-contrast); }

/* ── 指標切換 chip ──────────────────────────────────────── */
.metric-chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.metric-chip { font-size: .82rem; font-weight: 600; padding: .4rem .85rem; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem; transition: all .2s var(--ease); }
.metric-chip:hover { border-color: var(--border-strong); color: var(--text); }
.metric-chip.is-active { background: color-mix(in srgb, var(--c-active, var(--primary)) 16%, transparent);
    border-color: var(--c-active, var(--primary)); color: var(--c-active, var(--primary)); }
.chart-wrap { position: relative; height: 260px; }
@media (max-width: 768px) { .chart-wrap { height: 220px; } }

/* ── 社群 ───────────────────────────────────────────────── */
.comm-toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.comm-search { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.comm-search > [data-lucide] { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-subtle); width: 16px; height: 16px; pointer-events: none; }
.comm-search input { padding-left: 2.2rem; }
.comm-cats { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .3rem; -ms-overflow-style: none; scrollbar-width: none; }
.comm-cats::-webkit-scrollbar { height: 0; }
.comm-cats .metric-chip { flex-shrink: 0; }

.comm-card { display: block; text-decoration: none; color: inherit; background: var(--bg-elev);
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); height: 100%; }
.comm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); color: inherit; }
.comm-card__cover { position: relative; aspect-ratio: 4/3; background: var(--bg-elev-2); display: grid; place-items: center; overflow: hidden; }
.comm-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.comm-card__cover-ph { font-size: 2.4rem; opacity: .45; }
.comm-card__cat { position: absolute; top: .6rem; left: .6rem; font-size: .72rem; font-weight: 600;
    padding: .22rem .65rem; border-radius: var(--radius-pill); border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(8px); color: var(--text); }
.comm-card__body { padding: .9rem 1rem 1.1rem; }
.comm-card__title { font-weight: 600; font-size: .96rem; line-height: 1.35; margin-bottom: .55rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.comm-card__row { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-muted); margin-top: .3rem; }
.comm-card__row [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; }

.stars { color: var(--accent); letter-spacing: 1px; font-size: .85rem; }
.stars .empty { color: var(--text-subtle); opacity: .45; }

/* Feed 分頁籤 */
.feed-tabs { display: inline-flex; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px; }
.feed-tab { border: none; background: transparent; color: var(--text-muted); font-weight: 600; font-size: .85rem; padding: .4rem 1.05rem; border-radius: var(--radius-pill); cursor: pointer; transition: all .2s var(--ease); }
.feed-tab:hover { color: var(--text); }
.feed-tab.is-active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-sm); }

/* 精選卡（更大 + 金色強調）*/
.comm-card--featured { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.comm-card--featured:hover { border-color: var(--accent); }
.comm-card__feat-badge { position: absolute; top: .6rem; right: .6rem; background: var(--accent); color: #1a1407;
    font-size: .7rem; font-weight: 700; padding: .2rem .6rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: .25rem; }
.comm-card__feat-badge [data-lucide] { width: 12px; height: 12px; }

.fab { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 54px; height: 54px; border-radius: 50%;
    background: var(--primary); color: var(--primary-contrast); border: none; display: grid; place-items: center;
    z-index: 100; box-shadow: var(--shadow); text-decoration: none; transition: transform .2s var(--ease); }
.fab:hover { color: var(--primary-contrast); transform: translateY(-2px); }

/* 留言 */
.comment { display: flex; gap: .75rem; padding: .9rem 0; border-bottom: 1px solid var(--border); }
.comment:last-child { border-bottom: none; }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
    font-size: .8rem; font-weight: 700; background: var(--primary-soft); color: var(--primary); }
.comment__author { font-size: .82rem; font-weight: 600; }
.comment__time { font-size: .72rem; color: var(--text-subtle); }
.comment__body { font-size: .88rem; line-height: 1.6; margin-top: .2rem; }
.comment__replies { margin-top: .6rem; padding-left: .9rem; border-left: 2px solid var(--border); }

/* 參數比較表 */
.param-compare { width: 100%; border-collapse: collapse; }
.param-compare th, .param-compare td { padding: .6rem .8rem; font-size: .85rem; text-align: left; border-bottom: 1px solid var(--border); }
.param-compare th { font-size: .72rem; color: var(--text-subtle); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.param-compare tr:last-child td { border-bottom: none; }
.param-compare .is-diff { background: var(--accent-soft); }
.param-compare .is-diff td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* 上傳拖放區 */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2.2rem; text-align: center;
    cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.upload-zone:hover, .upload-zone.is-drag { border-color: var(--primary); background: var(--primary-soft); }
.upload-zone__icon { width: 48px; height: 48px; border-radius: 14px; margin: 0 auto .7rem; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.preview-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.preview-item { position: relative; width: 92px; height: 92px; }
.preview-item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.preview-item .rm { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--danger); color: #fff; border: none; font-size: .7rem; cursor: pointer; display: grid; place-items: center; }

/* 星等輸入 */
.star-pick { font-size: 1.5rem; cursor: pointer; color: var(--text-subtle); opacity: .5; transition: color .15s, opacity .15s; }
.star-pick.on { color: var(--accent); opacity: 1; }
.rating-radio:focus-visible + .star-pick {
    outline: 3px solid color-mix(in srgb, var(--primary) 82%, white);
    outline-offset: 3px; border-radius: 4px;
}

/* ── 設定頁 ──────────────────────────────────────────────── */
.master-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 13%, var(--bg-elev)), var(--bg-elev) 62%);
    border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.3rem 1.5rem; box-shadow: var(--shadow-sm); }
.master-toggle__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex-shrink: 0; }

.setting-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.4rem 1.5rem; height: 100%; transition: opacity .25s var(--ease); }
.setting-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.15rem; }
.setting-head__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent2, var(--primary)) 16%, transparent); color: var(--accent2, var(--primary)); flex-shrink: 0; }
.setting-head__title { font-weight: 600; font-size: .95rem; }
.setting-head__sub { font-size: .76rem; color: var(--text-subtle); }

/* 表單開關（Bootstrap form-switch 套主題色）*/
.form-check-input { background-color: var(--bg-elev-2); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.form-switch .form-check-input { width: 2.6rem; height: 1.4rem; cursor: pointer; }

/* ── Modal（深色化，全 app 共用）──────────────────────────── */
.modal-content { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--border) !important; }
.modal-title { font-family: var(--font-display); font-weight: 600; }
:root .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
[data-theme="light"] .btn-close { filter: none; }

/* ── 表格（深色化，全 app 共用）──────────────────────────── */
.table { color: var(--text); border-color: var(--border); }
.table > :not(caption) > * > * { background-color: transparent; color: var(--text); border-color: var(--border); box-shadow: none; }
.table thead th { color: var(--text-subtle); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.table tbody tr:hover > * { background-color: var(--bg-elev-2); }

/* ── Toast 通知 ─────────────────────────────────────────── */
.toast-host { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 2000;
    display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
.toast-item { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border);
    border-left: 3px solid var(--primary); border-radius: var(--radius-sm); padding: .7rem 1.1rem;
    box-shadow: var(--shadow-lg); font-size: .88rem; font-weight: 500; max-width: 92vw;
    display: flex; align-items: center; gap: .5rem; animation: toastIn .25s var(--ease); }
.toast-item.is-error   { border-left-color: var(--danger); }
.toast-item.is-success { border-left-color: var(--success); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* 黏底操作列 */
.sticky-bottom-bar {
    position: sticky; bottom: 0; z-index: 10; margin-top: 2rem;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border); padding: .85rem 0 calc(.85rem + env(safe-area-inset-bottom));
}

/* 工具 */
.divider { height: 1px; background: var(--border); border: 0; margin: 1.25rem 0; }
.elev-hover { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.elev-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* ── 行動版與動態偏好 ───────────────────────────────────── */
@media (max-width: 767.98px) {
    .sp-nav .navbar-collapse {
        max-height: calc(100dvh - 60px); overflow-y: auto;
        padding: .7rem 0 calc(1rem + env(safe-area-inset-bottom));
    }
    .sp-nav .navbar-nav { align-items: stretch !important; gap: .2rem; }
    .sp-nav .nav-item { margin-right: 0 !important; }
    .sp-nav .dropdown-menu { position: static; width: 100%; margin: .25rem 0; box-shadow: none; }
    .app-main-container { padding-top: 1.25rem !important; padding-bottom: 1.5rem !important; }
}

@media (max-width: 575.98px) {
    .page-hero { flex-direction: column; align-items: stretch; }
    .page-hero > .btn { width: 100%; justify-content: center; }
    .page-hero__title { font-size: 1.55rem; }
    .sp-card, .config-section, .setting-card { padding: 1.15rem; }

    /* 設定與分享表單在窄螢幕改為單欄；儀表板數值卡仍保留兩欄。 */
    .setting-card .row > .col-6,
    .config-section .row > .col-6,
    #featured-grid > .col-6,
    #community-grid > .col-6 { width: 100%; }

    .sticky-bottom-bar { margin-left: -.75rem; margin-right: -.75rem; padding-left: .75rem; padding-right: .75rem; }
    .sticky-bottom-bar > .d-flex { flex-direction: column-reverse; align-items: stretch !important; }
    .sticky-bottom-bar > .d-flex > .d-flex:first-child {
        flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: .15rem;
    }
    .sticky-bottom-bar > .d-flex > .d-flex:first-child > * { flex: 0 0 auto; }
    .sticky-bottom-bar > .d-flex > .d-flex:last-child { justify-content: space-between; }
    .sticky-bottom-bar > .d-flex > .d-flex:last-child .btn { min-width: 96px; }

    .toast-host { bottom: calc(.8rem + env(safe-area-inset-bottom)); width: calc(100% - 1.5rem); }
    .toast-item { width: 100%; justify-content: center; }
    .fab { bottom: calc(1rem + env(safe-area-inset-bottom)); right: 1rem; }
}

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

/* ── 即時影像狀態 ───────────────────────────────────────── */
.camera-stage { position: relative; width: 100%; max-width: 800px; margin: 0 auto; }
.camera-frame,
.camera-overlay {
    width: 100%; aspect-ratio: 16/9; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-elev-2);
}
.camera-frame { display: none; object-fit: cover; }
.camera-overlay {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .55rem; padding: 1.25rem; text-align: center;
}
.camera-overlay__icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--text-muted); }
.camera-overlay__icon [data-lucide] { width: 42px; height: 42px; }
.camera-overlay__title { font-size: .95rem; font-weight: 650; }
.camera-overlay__hint { max-width: 48ch; margin-bottom: .25rem; color: var(--text-muted); font-size: .8rem; }
.camera-config-hint { color: var(--text-muted); font-size: .78rem; }
.camera-config-hint pre {
    display: block; width: fit-content; max-width: 100%; margin: .6rem auto 0;
    overflow-x: auto; text-align: left; padding: .55rem .75rem;
    background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font-size: .75rem;
}
.camera-spin { animation: cameraSpin 1s linear infinite; }
@keyframes cameraSpin { to { transform: rotate(360deg); } }

/* ============================================================
   Living Botanical Lab — 2026 visual direction
   以植物生命狀態為主角，結合自然誌編排與精密觀測儀器語彙。
   ============================================================ */
:root {
    --bg: #08100B;
    --bg-elev: #101A13;
    --bg-elev-1: #101A13;
    --bg-elev-2: #18241B;
    --border: rgba(211, 237, 193, .12);
    --border-strong: rgba(211, 237, 193, .24);
    --text: #F2F1E6;
    --text-muted: #A8B39D;
    --text-subtle: #7F8D79;
    --primary: #B7DE73;
    --primary-strong: #CEF493;
    --primary-contrast: #10160B;
    --primary-soft: rgba(183, 222, 115, .12);
    --accent: #F0C86E;
    --accent-soft: rgba(240, 200, 110, .13);
    --c-temp: #F39A6D;
    --c-hum: #78BED2;
    --c-light: #F4CF73;
    --c-soil: #C3A5DC;
    --success: #91D59A;
    --warning: #E7B85C;
    --danger: #EF7D66;
    --shadow-sm: 0 1px 0 rgba(255,255,255,.025), 0 8px 26px rgba(0,0,0,.16);
    --shadow: 0 20px 48px -24px rgba(0,0,0,.8);
    --shadow-lg: 0 36px 90px -34px rgba(0,0,0,.9);
    --radius-sm: 12px;
    --radius: 22px;
    --radius-lg: 34px;
    --lab-line: rgba(209, 237, 187, .08);
    --lab-glow: rgba(183, 222, 115, .16);
}

[data-theme="light"] {
    --bg: #F2F0E7;
    --bg-elev: #FBFAF4;
    --bg-elev-1: #FBFAF4;
    --bg-elev-2: #EAEADF;
    --border: rgba(42, 69, 42, .12);
    --border-strong: rgba(42, 69, 42, .24);
    --text: #172019;
    --text-muted: #5D6A5D;
    --text-subtle: #778277;
    --primary: #477029;
    --primary-strong: #34591B;
    --primary-contrast: #FFFFFF;
    --primary-soft: rgba(71, 112, 41, .10);
    --accent: #B57A22;
    --accent-soft: rgba(181, 122, 34, .11);
    --lab-line: rgba(42, 69, 42, .08);
    --lab-glow: rgba(71, 112, 41, .10);
    --shadow-sm: 0 1px 0 rgba(255,255,255,.7), 0 10px 28px rgba(53,65,42,.07);
    --shadow: 0 24px 54px -30px rgba(45,59,36,.28);
    --shadow-lg: 0 42px 90px -40px rgba(45,59,36,.35);
}

body {
    min-height: 100vh;
    background-color: var(--bg);
    background-image:
        radial-gradient(800px 540px at 92% -8%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 66%),
        radial-gradient(760px 620px at -8% 92%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
        linear-gradient(90deg, transparent 49.8%, var(--lab-line) 50%, transparent 50.2%);
    background-size: auto, auto, 96px 100%;
}

.living-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.living-ambient__grain {
    position: absolute; inset: 0; opacity: .18;
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--text) 18%, transparent) .55px, transparent .75px);
    background-size: 5px 5px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.living-ambient__leaf {
    position: absolute; width: 420px; height: 720px;
    border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
    border-radius: 100% 0 100% 0; opacity: .5;
}
.living-ambient__leaf::before,
.living-ambient__leaf::after {
    content: ''; position: absolute; left: 50%; top: 8%; bottom: 8%; width: 1px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    transform: rotate(32deg); transform-origin: bottom;
}
.living-ambient__leaf::after { transform: rotate(58deg); }
.living-ambient__leaf--one { right: -250px; top: 16%; transform: rotate(-18deg); }
.living-ambient__leaf--two { left: -300px; bottom: -280px; transform: rotate(152deg) scale(.82); }
.sp-nav {
    position: sticky;
    top: 0;
    z-index: 1020;
}
.app-main-container { position: relative; z-index: 1; }

.sp-nav {
    min-height: 76px; padding: .65rem 0 0;
    background: transparent; border: 0; backdrop-filter: none;
}
.sp-nav .container {
    min-height: 60px; padding: .45rem .65rem .45rem .8rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
    backdrop-filter: blur(22px) saturate(135%);
    box-shadow: var(--shadow-sm);
}
.sp-nav .navbar-brand { gap: .65rem; padding: 0; }
.sp-nav .navbar-brand .brand-mark {
    width: 38px; height: 38px; border-radius: 50% 50% 48% 18%;
    background: radial-gradient(circle at 34% 28%, var(--primary-strong), var(--primary) 50%, color-mix(in srgb, var(--primary) 65%, #27451d));
    box-shadow: 0 0 0 5px var(--primary-soft), 0 12px 28px -14px var(--primary);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; }
.brand-copy small { margin-top: .26rem; color: var(--text-subtle); font: 600 .5rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.sp-nav .nav-link.active { background: var(--primary-soft); color: var(--primary-strong) !important; }
.theme-toggle { width: 40px; height: 40px; background: transparent; }

.app-main-container { max-width: 1320px; padding-top: 2.3rem !important; padding-bottom: 4rem !important; }
.page-hero__title { font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 500; letter-spacing: -.035em; }
.section-eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--primary); letter-spacing: .14em; }
.section-eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: .6; }

.sp-card, .stat-card, .config-section, .setting-card {
    border-color: var(--border);
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--bg-elev) 94%, var(--primary) 6%), var(--bg-elev) 52%),
        var(--bg-elev);
    box-shadow: var(--shadow-sm);
}
.sp-card, .config-section, .setting-card { border-radius: 28px 12px 28px 12px; }
.btn { border-radius: var(--radius-pill); padding-inline: 1rem; }
.btn-primary { box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--primary) 70%, transparent); }
.form-control, .form-select {
    border-radius: 14px; min-height: 44px;
    background: color-mix(in srgb, var(--bg-elev-2) 88%, transparent);
}
.pill { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }

@media (max-width: 767.98px) {
    .sp-nav { min-height: 64px; padding: 0; }
    .sp-nav .container { border-radius: 0; border-width: 0 0 1px; padding: .55rem .75rem; }
    .sp-nav .nav-link {
        display: flex; width: 100%; min-height: 44px;
        padding: .65rem .75rem !important;
    }
    .sp-nav .planter-switcher-toggle { max-width: none; }
    .sp-nav #active-planter-name { max-width: calc(100vw - 8rem); }
    .sp-nav .theme-toggle { width: 44px; height: 44px; }
    .brand-copy small { display: none; }
    .app-main-container { padding-top: 1.35rem !important; padding-bottom: 2.5rem !important; }
}

@media (max-width: 575.98px) {
    .living-ambient__leaf--one { right: -360px; }
    .page-hero__title { font-size: 2rem; }
}

/* ── 儀表板：把數值面板轉成一座有生命的觀測台 ─────────── */
.living-dashboard { display: grid; gap: 1.5rem; }

.living-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .78fr);
    grid-template-areas:
        "intro organism"
        "vitals organism"
        "controls controls";
    gap: clamp(1.35rem, 3vw, 2.5rem);
    overflow: hidden;
    min-height: 680px;
    padding: clamp(1.3rem, 3.2vw, 2.7rem);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    border-radius: 46px 16px 46px 16px;
    background:
        radial-gradient(520px 520px at 80% 24%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 68%),
        radial-gradient(460px 260px at 5% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%),
        linear-gradient(145deg, color-mix(in srgb, var(--bg-elev) 93%, var(--primary) 7%), var(--bg-elev) 57%, color-mix(in srgb, var(--bg) 92%, black));
    box-shadow: var(--shadow-lg);
}
.living-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .3;
    background-image:
        linear-gradient(var(--lab-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--lab-line) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(135deg, #000, transparent 62%);
}
.living-hero__texture {
    position: absolute;
    z-index: -1;
    right: -14%;
    top: -26%;
    width: 58%;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius: 50%;
    box-shadow:
        0 0 0 48px color-mix(in srgb, var(--primary) 2%, transparent),
        0 0 0 49px color-mix(in srgb, var(--primary) 8%, transparent),
        0 0 0 96px color-mix(in srgb, var(--primary) 2%, transparent),
        0 0 0 97px color-mix(in srgb, var(--primary) 6%, transparent);
}

.living-hero__intro { grid-area: intro; align-self: end; max-width: 670px; }
.living-hero__index {
    margin-bottom: clamp(1.2rem, 3vw, 2.6rem);
    color: var(--text-subtle);
    font: 650 .64rem/1 var(--font-ui);
    letter-spacing: .22em;
}
.living-hero__title {
    max-width: 11ch;
    margin: .28rem 0 .7rem;
    font-size: clamp(2.7rem, 6.6vw, 6.2rem);
    font-weight: 450;
    line-height: .93;
    letter-spacing: -.065em;
    text-wrap: balance;
}
.living-hero__meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.living-hero__meta .pill {
    min-height: 30px;
    background: color-mix(in srgb, var(--bg-elev-2) 76%, transparent);
    backdrop-filter: blur(12px);
}

.living-verdict {
    justify-content: space-between;
    margin-top: clamp(1.5rem, 3vw, 2.6rem);
    padding-top: 1.15rem;
    border-top: 1px solid var(--border);
}
.living-verdict__message { min-width: 0; }
.living-verdict .hero-badge__icon {
    width: 52px;
    height: 52px;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    border-radius: 50% 50% 48% 20%;
}
.living-verdict__title { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 550; }
.living-verdict__advice { max-width: 42ch; line-height: 1.55; }

.living-hero__organism {
    grid-area: organism;
    position: relative;
    display: grid;
    place-items: center;
    min-height: 450px;
}
.living-hero__organism::after {
    content: "BIOSPHERE / LIVE";
    position: absolute;
    right: 0;
    bottom: 2%;
    color: var(--text-subtle);
    font: 600 .55rem/1 var(--font-ui);
    letter-spacing: .22em;
    writing-mode: vertical-rl;
}
.living-plant {
    position: relative;
    width: min(100%, 420px);
    aspect-ratio: 1 / 1.12;
    display: grid;
    place-items: center;
    transform-origin: 50% 90%;
    animation: living-breathe 5.8s ease-in-out infinite;
}
.living-plant__art {
    position: relative;
    z-index: 2;
    width: 88%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 35px 35px rgba(0,0,0,.26));
}
.living-plant__shadow { fill: rgba(0, 0, 0, .26); filter: blur(7px); }
.living-plant__pot-back { fill: #4d382c; }
.living-plant__pot-front { fill: url(#none); fill: #694c38; }
.living-plant__pot-rim { fill: #826249; }
.living-plant__soil { fill: #2d2118; }
.living-plant__stem {
    fill: none;
    stroke: color-mix(in srgb, var(--primary) 58%, #2e5a31);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.living-plant__stem--main { stroke-width: 9; }
.living-plant__leaf {
    fill: color-mix(in srgb, var(--primary) 78%, #2f6c3d);
    stroke: color-mix(in srgb, var(--primary-strong) 45%, transparent);
    stroke-width: 1;
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: living-leaf 6.5s ease-in-out infinite;
}
.living-plant__leaf--two, .living-plant__leaf--four { animation-delay: -2.1s; }
.living-plant__leaf--three, .living-plant__leaf--top { animation-delay: -3.7s; }
.living-plant__halo {
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
    border-radius: 50%;
    animation: living-orbit 14s linear infinite;
}
.living-plant__halo--outer { inset: 0; opacity: .7; }
.living-plant__halo--inner { inset: 14%; animation-direction: reverse; animation-duration: 10s; opacity: .45; }
.living-plant__halo::before {
    content: "";
    position: absolute;
    top: 12%;
    left: 7%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 20px var(--primary);
}
.living-plant__particle {
    position: absolute;
    z-index: 3;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-strong);
    box-shadow: 0 0 12px var(--primary);
    animation: living-particle 5.2s ease-in-out infinite;
}
.living-plant__particle--one { left: 16%; top: 31%; }
.living-plant__particle--two { right: 13%; top: 23%; animation-delay: -1.8s; }
.living-plant__particle--three { right: 22%; bottom: 19%; animation-delay: -3.2s; }

.living-dashboard[data-health="attention"] .living-plant__leaf,
.living-dashboard[data-health="alert"] .living-plant__leaf { fill: color-mix(in srgb, var(--warning) 46%, #497446); }
.living-dashboard[data-health="alert"] .living-plant__halo,
.living-dashboard[data-health="error"] .living-plant__halo { border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.living-dashboard[data-health="offline"] .living-plant,
.living-dashboard[data-health="waiting"] .living-plant { filter: saturate(.45); opacity: .68; animation-duration: 10s; }
.living-dashboard[data-online="true"] .living-vitals__timestamp::before { background: var(--success); box-shadow: 0 0 10px var(--success); }

.living-vitals {
    grid-area: vitals;
    align-self: end;
    min-width: 0;
}
.living-vitals__heading, .living-control-dock__head, .living-history__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.living-vitals__heading { margin-bottom: .85rem; }
.living-vitals__title, .living-control-dock__title, .living-history__title {
    margin: .25rem 0 0;
    font-family: var(--font-display);
    font-weight: 520;
    letter-spacing: -.03em;
}
.living-vitals__title { font-size: 1.55rem; }
.living-vitals__timestamp {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    color: var(--text-subtle);
    font: 700 .58rem/1 var(--font-ui);
    letter-spacing: .18em;
}
.living-vitals__timestamp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-subtle); }
.living-metric {
    position: relative;
    min-width: 0;
    padding: 1rem;
    border-radius: 18px 7px 18px 7px;
    background: color-mix(in srgb, var(--bg-elev-2) 78%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: none;
}
.living-metric:hover { transform: translateY(-2px); }
.living-metric--primary {
    min-height: 168px;
    margin-bottom: .75rem;
    padding: 1.15rem 1.25rem;
    background:
        radial-gradient(300px 170px at 100% 0%, color-mix(in srgb, var(--c-soil) 15%, transparent), transparent 72%),
        color-mix(in srgb, var(--bg-elev-2) 83%, transparent);
}
.living-metric--primary .stat-card__value { font-size: clamp(3.6rem, 6vw, 5.4rem); line-height: .95; }
.living-metric--primary .living-metric__human { max-width: 35ch; font-size: .85rem; }
.living-vitals__secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.living-metric .stat-card__head { margin-bottom: .5rem; }
.living-metric .stat-card__icon { width: 30px; height: 30px; border-radius: 9px; }
.living-metric .stat-card__value { font-size: clamp(1.65rem, 2.8vw, 2.45rem); }
.living-metric__human { min-height: 2.5em; margin-top: .4rem; color: var(--text-muted); font-size: .72rem; line-height: 1.4; }
.living-metric .stat-range { margin-top: .75rem; }
.living-metric[data-state="attention"] { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }
.living-metric[data-state="missing"] { opacity: .58; }

.living-control-dock {
    grid-area: controls;
    padding-top: 1.35rem;
    border-top: 1px solid var(--border);
}
.living-control-dock__title { font-size: 1.45rem; }
.living-control-dock__notice { margin-top: .75rem; }
.living-control-dock__tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.living-control {
    min-height: 82px;
    padding: .85rem .9rem;
    border: 1px solid var(--border);
    border-radius: 16px 7px 16px 7px;
    background: color-mix(in srgb, var(--bg-elev-2) 68%, transparent);
}
.living-control:last-child { border-bottom: 1px solid var(--border); }
.living-control__identity { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.living-control__identity .ctl-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
}
.living-control[data-state="on"] { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--primary-soft); }
.living-control[data-state="pending"] { opacity: .68; }

.living-history {
    padding: clamp(1.3rem, 3vw, 2.2rem);
    border-radius: 16px 42px 16px 42px;
}
.living-history__head { align-items: flex-start; }
.living-history__title { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.living-history__lede { max-width: 48ch; margin: .55rem 0 0; color: var(--text-muted); }
.living-history__ranges { padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-elev-2); }
.living-history__ranges .btn { border: 0; box-shadow: none; }
.living-history__metrics { margin: 1.5rem 0 1rem; }
.living-history__chart {
    min-height: 330px;
    padding: .8rem;
    border: 1px solid var(--border);
    border-radius: 18px 7px 18px 7px;
    background:
        linear-gradient(var(--lab-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--lab-line) 1px, transparent 1px),
        color-mix(in srgb, var(--bg) 42%, transparent);
    background-size: 40px 40px, 40px 40px, auto;
}

/* ── 社群：植物生活誌的層次與深色主題相容 ──────────────── */
.journal-hero {
    border-radius: 50px 18px 50px 18px;
    background:
        radial-gradient(circle at 82% 15%, rgba(183,222,115,.25), transparent 27%),
        radial-gradient(circle at 91% 76%, rgba(240,200,110,.12), transparent 26%),
        linear-gradient(125deg, #0b1b11 0%, #153322 55%, #284c31 100%);
}
.journal-hero::before {
    content: "FIELD NOTES";
    position: absolute;
    z-index: -1;
    right: clamp(1rem, 4vw, 3.5rem);
    top: 50%;
    color: rgba(242,241,230,.035);
    font: italic 500 clamp(4.2rem, 11vw, 9.5rem)/.8 var(--font-display);
    letter-spacing: -.07em;
    transform: translateY(-50%);
    white-space: nowrap;
}
.journal-toolbar { background: color-mix(in srgb, var(--bg-elev) 88%, transparent); backdrop-filter: blur(20px); }
.journal-card { background: var(--bg-elev); border-radius: 28px 10px 28px 10px; box-shadow: var(--shadow-sm); }
.journal-card__title { font-weight: 520; }
.journal-card--featured { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
.story-hero { border-radius: 52px 18px 30px 18px; }
.story-meta { background: var(--bg-elev); }
.story-prose__body { max-width: 64ch; }
.story-settings { background: linear-gradient(150deg, color-mix(in srgb, var(--bg-elev) 88%, var(--accent) 12%), var(--bg-elev)); }

@keyframes living-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.012); }
}
@keyframes living-leaf {
    0%, 100% { transform: rotate(-.8deg); }
    50% { transform: rotate(1.5deg); }
}
@keyframes living-orbit { to { transform: rotate(360deg); } }
@keyframes living-particle {
    0%, 100% { opacity: .15; transform: translateY(9px) scale(.7); }
    50% { opacity: .9; transform: translateY(-10px) scale(1); }
}

@media (max-width: 1099.98px) {
    .living-hero {
        grid-template-columns: minmax(0, 1fr) minmax(270px, .72fr);
        grid-template-areas:
            "intro organism"
            "vitals vitals"
            "controls controls";
    }
    .living-hero__organism { min-height: 380px; }
    .living-plant { max-width: 350px; }
}

@media (max-width: 767.98px) {
    .living-hero {
        grid-template-columns: 1fr;
        grid-template-areas: "intro" "organism" "vitals" "controls";
        gap: 1.4rem;
        min-height: 0;
        border-radius: 30px 10px 30px 10px;
    }
    .living-hero__intro { align-self: auto; }
    .living-hero__index { margin-bottom: 1.3rem; }
    .living-hero__title { max-width: 12ch; font-size: clamp(2.7rem, 15vw, 4.4rem); }
    .living-hero__organism { min-height: 330px; margin: -1rem 0; }
    .living-plant { width: min(92%, 330px); }
    .living-vitals__secondary { grid-template-columns: 1fr; }
    .living-metric { min-height: auto; }
    .living-metric__human { min-height: 0; }
    .living-control-dock__tools { grid-template-columns: 1fr; }
    .living-history__head { display: grid; }
    .living-history__ranges { width: 100%; overflow-x: auto; }
    .living-history__ranges .btn { flex: 1 0 auto; }
    .journal-hero { border-radius: 30px 10px 30px 10px; }
    .journal-hero::before { top: 28%; right: -3rem; }
    .story-hero { border-radius: 28px 10px 22px 10px; }
}

@media (max-width: 419.98px) {
    .living-hero { padding: 1.05rem; }
    .living-verdict { align-items: stretch; }
    .living-verdict__action { width: 100%; }
    .living-hero__organism { min-height: 290px; }
    .living-metric--primary .stat-card__value { font-size: 3.5rem; }
    .living-history { padding: 1.05rem; }
    .living-history__chart { min-height: 260px; padding: .35rem; }
}