:root{--background:#f8faf9;--surface:#fff;--surface-subtle:#f1f7f3;--surface-highlight:#e8f5e8;--accent:#16a34a;--accent-strong:#15803d;--danger:#ef4444;--warning:#f59e0b;--text-primary:#0f172a;--text-secondary:#1e293b;--text-muted:#64748b;--border:#e2e8f0;--radius-lg:20px;--radius-md:12px;--radius-sm:8px;--shadow-soft:0 20px 40px -20px rgba(15,23,42,.08);--shadow-sm:0 6px 16px -8px rgba(15,23,42,.06);--transition:200ms ease;--sidebar:100px}*{box-sizing:border-box}body,html{max-width:100vw;overflow-x:hidden;overscroll-behavior:none;background-color:#f0fdf4}html{min-height:100%;background:#f0fdf4}html:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(ellipse at center,#e8f8ef 0,#d2f1e2 35%,#afe6c9 65%,#84d0a6 85%,#1f3a2e 100%)}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:inherit;color:var(--text-primary);min-height:100vh;position:relative}body:before{content:none}.bg-leaves{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23ffffff' stroke-opacity='0.35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 100c30-60 90-60 120 0-30 60-90 60-120 0z'/><path d='M70 70c10 15 18 33 22 55'/><path d='M130 60c-15 20-25 45-30 80'/><path d='M10 10c20 10 40 30 50 60'/><path d='M160 20c-18 14-34 34-42 60'/></g></svg>");background-size:180px 180px;background-repeat:repeat}.mini-sidebar{position:fixed;inset:0 auto 0 0;width:100px;background:#0f1a14;border-right:1px solid hsla(0,0%,100%,.1);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:16px;z-index:100}.mini-sidebar__logo{height:40px;width:40px;border-radius:12px;background:#16a34a;color:#fff;display:grid;place-items:center;font-weight:800}.mini-sidebar__nav{display:grid;grid-gap:12px;gap:12px;margin-top:8px}.mini-sidebar__footer{margin-top:auto;display:grid;padding-top:8px}.mini-sidebar__item{height:44px;width:44px;border-radius:12px;display:grid;place-items:center;color:hsla(0,0%,100%,.7);background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);transition:all .2s ease}.mini-sidebar__item:hover{color:#fff;background:hsla(0,0%,100%,.1);transform:scale(1.04)}.mini-sidebar__item--active{color:#16a34a;background:#fff;box-shadow:0 0 0 1px rgba(34,197,94,.3)}.mini-sidebar-offset{margin-left:var(--sidebar);width:calc(100% - var(--sidebar))}a{color:inherit;text-decoration:none}main{width:min(1260px,100%);margin:0 auto;padding:24px 24px 32px}.detail-main{width:min(1440px,100%);margin:0 auto;padding:12px;display:grid;grid-gap:28px;gap:28px;justify-items:center;min-height:100vh;place-items:center;place-content:center}.detail-breadcrumbs{display:flex}.breadcrumb-link{color:var(--text-muted);font-size:.9rem;transition:color var(--transition)}.breadcrumb-link:hover{color:var(--text-secondary)}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-gap:24px;gap:24px}.detail-hero{background:var(--surface);border:2px solid rgba(34,197,94,.4);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-gap:10px;gap:10px;padding:28px 28px 28px 18px;align-items:start;position:relative;overflow:hidden;.detail-left{display:grid;grid-gap:12px;gap:12px;align-content:start;width:380px;max-width:100%}width:100%;max-width:1400px;min-height:560px;margin:0 auto}.detail-hero:after{content:none}.detail-hero:before{content:"";position:absolute;right:-60px;top:-60px;width:520px;height:520px;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><g fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M40 150c40-80 120-80 160 0-40 80-120 80-160 0z'/><path d='M90 110c16 26 28 56 34 96'/><path d='M190 100c-22 30-36 70-44 120'/><path d='M20 40c28 16 60 44 76 88'/><path d='M250 60c-26 20-48 48-60 88'/></g></svg>");background-size:260px 260px;background-repeat:repeat;transform:rotate(6deg)}.detail-hero-body{position:relative;display:grid;grid-gap:18px;gap:18px;margin-top:12px}.detail-hero-top{display:flex;align-items:center;gap:12px}.detail-id{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.detail-hero h1{margin:0;font-size:2.05rem;color:var(--text-secondary)}.detail-subtitle{margin:0;color:var(--text-muted);font-size:1rem}.detail-hero-metrics{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.detail-hero-metric{display:grid;grid-gap:6px;gap:6px}.detail-hero-metric--pump{align-self:start;margin-top:0}.detail-hero-metric--pump .water-button{margin-top:0}.metric-label{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}.metric-value{font-size:1.3rem;font-weight:600;color:var(--text-secondary)}.detail-image-shell{position:relative;display:grid;place-items:center;justify-items:start;justify-self:start;max-width:none;padding:8px;margin-top:10px;margin-left:14px}.detail-image-frame{width:380px;height:380px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(148,163,184,.3)}.detail-image-placeholder{width:380px;height:380px;border-radius:var(--radius-lg);border:2px dashed rgba(148,163,184,.35);display:flex;align-items:center;justify-content:center;background:rgba(236,253,245,.6);color:var(--text-muted);font-size:.95rem;text-align:center;padding:16px}.detail-plant-image{border-radius:var(--radius-lg);display:block}.detail-image-content{display:grid;grid-gap:20px;gap:20px;justify-items:center}.water-action{display:grid;grid-gap:12px;gap:12px;justify-items:center}.water-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 24px;font-weight:600;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition),transform var(--transition);min-width:180px}.water-button.water-button--inline{padding:5px 12px;min-width:auto;font-size:.8rem;line-height:1}.water-button:active,.water-button:hover:not(:disabled){background:var(--accent-strong);transform:none}.water-button:active{padding:12px 24px}.water-button.water-button--inline:active{padding:5px 12px}.water-button:disabled{cursor:not-allowed;opacity:.75;transform:none}.water-button__spinner{width:16px;height:16px;border-radius:999px;border:2px solid hsla(0,0%,100%,.4);border-top-color:#fff;animation:water-spin .6s linear infinite}@keyframes water-spin{to{transform:rotate(1turn)}}.water-feedback{min-height:20px;font-size:.85rem}.water-feedback__message{display:inline-block}.water-feedback__message--success{color:var(--accent-strong)}.water-feedback__message--error{color:var(--danger)}.detail-side{display:grid;grid-gap:12px;gap:12px;align-content:start;padding-top:8px}.growth-card{background:#e5f7d9;padding:16px}.care-tips,.growth-card{border:1px solid rgba(34,197,94,.25);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.care-tips{margin-top:12px;background:var(--surface-subtle);padding:14px 16px;position:relative;z-index:1;width:calc(100% - 30px);margin-left:22px;margin-right:8px;font-size:.9rem}.care-tips__title{font-weight:600;color:var(--text-secondary);margin-bottom:8px}.care-tips__list{margin:0;padding-left:18px;color:var(--text-primary);display:grid;grid-gap:6px;gap:6px}.care-tips__loading{width:18px;height:18px;border-radius:999px;border:2px solid rgba(15,23,42,.15);border-top:2px solid var(--accent);animation:care-spin .8s linear infinite}@keyframes care-spin{to{transform:rotate(1turn)}}.growth-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.growth-title{font-weight:600}.growth-period{color:var(--text-muted);font-size:.85rem}.growth-graph{height:185px;display:grid;align-items:stretch;justify-items:stretch;background:linear-gradient(180deg,hsla(0,0%,100%,.6),hsla(0,0%,100%,0));border-radius:10px}.growth-graph>*{width:100%;height:100%}.species-info{margin:.5rem 0;padding:.75rem;background:rgba(16,185,129,.1);border-radius:8px;border-left:3px solid var(--accent-strong,#16a34a)}.species-common{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.species-scientific{font-size:.9rem;font-style:italic;color:var(--text-muted);margin-top:.25rem}.detail-plant-image{width:100%;height:100%;object-fit:cover;border-radius:12px}.growth-scale{color:var(--text-muted);font-size:.8rem;margin-top:6px}.detail-tiles{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.detail-tile{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;justify-content:space-between}.tile-label{color:var(--text-muted);font-size:.9rem}.tile-value{font-weight:600;color:var(--text-secondary)}.tile-value--small{font-size:.9rem}.audio-card{background:#889696;border-radius:var(--radius-md);color:#fff;padding:14px;display:grid;grid-gap:8px;gap:8px}.audio-title{font-weight:600}.audio-wave{height:56px;border-radius:10px;background:repeating-linear-gradient(90deg,hsla(0,0%,100%,.35),hsla(0,0%,100%,.35) 2px,transparent 0,transparent 12px)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:0 1px 3px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.08);transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition)}.card:hover{transform:none;border-color:var(--border);box-shadow:var(--shadow-soft)}.card h3{margin-top:0;margin-bottom:8px;font-size:1.1rem;color:var(--text-secondary)}.card p{margin:0;color:var(--text-muted)}.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600;white-space:nowrap}.badge.badge--healthy{background:rgba(52,211,153,.18);color:var(--accent)}.badge.badge--warning{background:rgba(251,191,36,.18);color:var(--warning)}.badge.badge--critical{background:hsla(0,91%,71%,.18);color:var(--danger)}.badge.badge--scheduled{background:rgba(52,211,153,.12);color:var(--accent)}.badge.badge--watering{background:rgba(37,99,235,.18);color:#60a5fa}.badge.badge--idle{background:rgba(148,163,184,.12);color:var(--text-muted)}.table{width:100%;border-collapse:collapse;margin-top:8px}.table thead{text-transform:uppercase;font-size:.75rem;letter-spacing:.04em;color:var(--text-muted)}.table td,.table th{padding:8px 0;border-bottom:1px solid var(--border)}.table tr:last-child td{border-bottom:none}.table td{color:var(--text-secondary)}.plant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:16px;gap:16px;margin-top:16px}.plant-grid--wide{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.plant-card--compact{min-height:190px}.plant-card-link{display:block;color:inherit}.plant-card{position:relative;background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border);padding:20px;box-shadow:var(--shadow-sm);transition:transform var(--transition),border-color var(--transition)}.plant-card:hover{transform:none;border-color:var(--border)}.plant-card-link:hover .plant-card{border-color:rgba(34,197,94,.4);box-shadow:var(--shadow-soft);transform:translateY(-2px)}.add-plant-card{position:relative;background:var(--surface);border-radius:var(--radius-md);border:2px dashed var(--border);padding:20px;box-shadow:none;transition:all var(--transition);cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:200px}.add-plant-card:hover{border-color:var(--accent);background:var(--surface-subtle);transform:none}.add-plant-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.add-plant-plus{font-size:2.5rem;font-weight:300;color:var(--text-muted);line-height:1}.add-plant-text{font-size:.9rem;color:var(--text-muted);font-weight:500}.add-plant-card:hover .add-plant-plus,.add-plant-card:hover .add-plant-text{color:var(--accent)}.plant-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.plant-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px;margin-top:12px}.meta-item{display:flex;flex-direction:column;gap:4px}.plant-image-thumb{width:100%;aspect-ratio:1/1;min-height:140px;border-radius:var(--radius-md);border:2px dashed rgba(148,163,184,.35);background:rgba(236,253,245,.6)}.plant-image-thumb img{width:100%;height:100%;display:block;object-fit:cover;border-radius:var(--radius-md)}.meta-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em}.meta-value{font-size:.95rem;color:var(--text-primary);font-weight:600}.progress{width:100%;height:6px;border-radius:999px;background:#eef2f7;overflow:hidden}.progress>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-strong))}.sparkline{display:flex;gap:4px;align-items:flex-end;height:36px}.sparkline-bar{flex:1 1;background:rgba(34,197,94,.35);border-radius:4px}.sparkline-bar.is-low{background:rgba(239,68,68,.35)}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:24px;gap:24px}.detail-card{background:linear-gradient(135deg,#fff,#f6fff6);border:1px solid rgba(226,232,240,.9);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);display:grid;grid-gap:18px;gap:18px}.detail-card header h2{margin:0 0 6px}.detail-card--status{grid-column:span 2}.detail-status-grid{display:grid;grid-gap:18px;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.detail-status-item{display:grid;grid-gap:8px;gap:8px}.detail-trend{display:flex;align-items:flex-end;gap:12px}.detail-trend-bar{display:grid;grid-gap:6px;gap:6px;justify-items:center;width:40px;height:160px;align-content:end}.detail-trend-bar .sparkline-bar{width:100%;border-radius:12px}.trend-label{font-size:.7rem;color:var(--text-muted)}.trend-value{font-size:.8rem;color:var(--text-secondary)}.detail-actions{list-style:none;margin:0;padding:0;display:grid;grid-gap:12px;gap:12px}.detail-actions li{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;border-radius:var(--radius-md);background:rgba(240,253,244,.7);border:1px solid rgba(226,232,240,.8)}.detail-action-title{margin:0;font-weight:600;color:var(--text-secondary)}.detail-action-icon{font-size:1.3rem}.header{display:flex;flex-direction:column;gap:18px;margin-bottom:32px}.header-row{flex-wrap:wrap;gap:16px;justify-content:space-between}.header-row,.header-title{display:flex;align-items:center}.header-title{gap:12px}.header-title h1{margin:0;font-size:2rem}.header-actions{display:flex;gap:12px}.button{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-sm);padding:12px 18px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);font-weight:600;cursor:pointer;transition:background var(--transition),color var(--transition),border var(--transition)}.button.button--primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;border:1px solid rgba(34,197,94,.8)}.button:hover{border-color:rgba(34,197,94,.45);background:var(--surface-highlight)}.filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.filter-bar input{flex:1 1 250px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;color:var(--text-primary);transition:border var(--transition),box-shadow var(--transition)}.filter-bar input:focus{outline:none;border-color:rgba(34,197,94,.5);box-shadow:0 0 0 3px rgba(34,197,94,.2)}.filter-select{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);padding:12px 14px;min-width:160px}.section-title{margin:0 0 12px;font-size:1.25rem}.secondary-text{color:var(--text-muted);font-size:.9rem}.timeline{display:flex;flex-direction:column;gap:16px;margin-top:16px}.timeline-item{justify-content:space-between}.timeline-item,.timeline-plant{display:flex;align-items:center}.timeline-plant{gap:12px;font-weight:600;color:var(--text-secondary)}.timeline-time{color:var(--text-muted);font-size:.85rem}.health-distribution{display:flex;gap:16px;align-items:center;margin-top:16px}.health-ring{width:72px;height:72px;border-radius:50%;background:conic-gradient(var(--accent) 0deg,var(--accent) 220deg,#e5e7eb 220deg,#e5e7eb 1turn);display:grid;place-items:center;font-weight:700;color:var(--text-secondary)}@media (max-width:768px){main{padding:24px 20px 60px}.detail-main{padding:24px 20px 68px}.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.detail-hero,.plant-grid,.plant-meta{grid-template-columns:1fr}.detail-hero{gap:20px}.detail-card--status{grid-column:span 1}}