:root { --ink:#eef8fb; --muted:#9fc0cd; --muted-strong:#c2dbe2; --bg:#061723; --panel:#0b2535; --panel-2:#0e2e41; --line:rgba(167,225,242,.16); --aqua:#75e9ff; --blue:#3d95ff; --green:#72edbb; --yellow:#ffd36d; --coral:#ff9c72; --danger:#ff8798; --shadow:0 18px 50px rgba(0,6,11,.24); }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 75% -20%, rgba(37,144,181,.22), transparent 34rem), var(--bg); font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; min-height:100vh; }
button, input, select { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.55; } svg { width:19px; height:19px; stroke-width:2; }
.hidden { display:none !important; }.eyebrow { color:var(--aqua); font-size:.68rem; font-weight:800; letter-spacing:.12em; margin:0 0 .35rem; }.muted { color:var(--muted); font-size:.86rem; }.empty-state { color:var(--muted); margin:0; padding:1.2rem 0; text-align:center; }.mobile-only { display:none; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:1.5rem; background:linear-gradient(145deg, rgba(7,38,55,.82), rgba(3,14,23,.96)), url("placeholder.jpg") center/cover; }.login-panel { width:min(100%, 410px); padding:2.7rem; background:rgba(6,24,36,.9); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:8px; }.brand-mark { width:46px; height:46px; display:grid; place-items:center; color:#06202d; background:var(--aqua); border-radius:8px; margin-bottom:2rem; }.brand-mark.compact { width:32px; height:32px; margin:0; }.login-panel h1 { font-size:2rem; line-height:1.18; margin:.2rem 0 .7rem; }.login-copy { color:var(--muted); margin:0 0 2rem; line-height:1.65; }
.form-stack { display:grid; gap:1rem; }.form-stack label, .form-grid label, .range-row label, .timer-inline label { display:grid; gap:.45rem; color:var(--muted-strong); font-size:.82rem; }.form-stack input, .form-stack select, .form-grid input, .range-row input, .timer-inline input, .command-form input { min-width:0; width:100%; color:var(--ink); background:#071e2c; border:1px solid var(--line); border-radius:5px; padding:.72rem .78rem; outline:none; }.form-stack input:focus, .form-stack select:focus, .form-grid input:focus, .range-row input:focus, .timer-inline input:focus, .command-form input:focus { border-color:var(--aqua); box-shadow:0 0 0 3px rgba(117,233,255,.1); }.text-button { color:var(--aqua); background:transparent; border:0; display:inline-flex; gap:.4rem; align-items:center; padding:.35rem 0; margin-top:1rem; font-size:.85rem; }.text-button svg { width:16px; }
.app-shell { display:grid; grid-template-columns:238px minmax(0,1fr); min-height:100vh; }.sidebar { position:sticky; top:0; height:100vh; padding:1.55rem 1rem; background:rgba(5,23,35,.9); border-right:1px solid var(--line); display:flex; flex-direction:column; }.sidebar-brand { display:flex; align-items:center; gap:.7rem; font-weight:800; font-size:.98rem; padding:.2rem .45rem 1.9rem; }.main-nav { display:grid; gap:.35rem; }.nav-item { width:100%; border:0; padding:.76rem .85rem; background:transparent; color:var(--muted); border-radius:6px; display:flex; align-items:center; gap:.75rem; text-align:left; font-weight:650; font-size:.9rem; }.nav-item:hover, .nav-item.active { color:var(--ink); background:rgba(117,233,255,.12); }.nav-item.active { box-shadow:inset 2px 0 0 var(--aqua); }.sidebar-bottom { margin-top:auto; padding:.8rem .45rem; }.connection-pill { color:var(--muted); font-size:.75rem; display:flex; gap:.45rem; align-items:center; }.connection-pill span { width:7px; height:7px; border-radius:100%; background:var(--yellow); }.connection-pill.online span { background:var(--green); }
.app-main { padding:0 clamp(1rem, 3vw, 3.2rem) 3rem; max-width:1680px; width:100%; margin:auto; }.topbar { min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }.topbar h1 { margin:0; letter-spacing:0; font-size:1.55rem; }.topbar-actions, .profile { display:flex; align-items:center; gap:.7rem; }.device-picker { display:grid; gap:.22rem; color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.04em; }.device-picker select { min-width:184px; max-width:260px; color:var(--ink); background:#092332; border:1px solid var(--line); border-radius:5px; padding:.42rem .55rem; outline:none; }.device-picker select:focus { border-color:var(--aqua); }.profile { padding-left:.7rem; border-left:1px solid var(--line); font-size:.86rem; }.profile-initial { width:31px; height:31px; border-radius:100%; display:grid; place-items:center; background:#1e6076; font-weight:800; }.icon-button { width:36px; height:36px; display:inline-grid; place-items:center; color:var(--muted-strong); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:5px; }.icon-button:hover { color:var(--ink); border-color:rgba(117,233,255,.45); }.page { display:none; }.page.active-page { display:block; }.status-strip { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; color:var(--muted); font-size:.8rem; min-height:25px; margin-bottom:1.2rem; }.status-dot { width:7px; height:7px; background:var(--yellow); border-radius:100%; }.status-dot.online { background:var(--green); }.strip-separator { height:14px; width:1px; background:var(--line); margin:0 .2rem; }
.panel { background:linear-gradient(145deg, rgba(15,48,66,.94), rgba(8,31,46,.96)); border:1px solid var(--line); border-radius:7px; box-shadow:var(--shadow); padding:clamp(1rem, 2vw, 1.3rem); }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }.panel-heading h2, .section-heading h2 { font-size:1.05rem; margin:0; letter-spacing:0; }.panel-heading p:not(.eyebrow) { margin:.26rem 0 0; color:var(--muted); font-size:.82rem; }.tag { color:var(--aqua); padding:.3rem .5rem; border:1px solid rgba(117,233,255,.26); background:rgba(117,233,255,.08); border-radius:4px; font-size:.73rem; white-space:nowrap; }.overview-grid { display:grid; grid-template-columns:minmax(315px, 1.32fr) minmax(320px, 1fr); gap:1rem; }.camera-panel { min-height:417px; }.camera-frame { position:relative; overflow:hidden; aspect-ratio:16/9; background:#061823; border:1px solid var(--line); border-radius:5px; }.camera-frame img { width:100%; height:100%; object-fit:cover; display:block; }.camera-empty { inset:0; position:absolute; display:grid; place-content:center; gap:.6rem; text-align:center; color:var(--muted); background:linear-gradient(135deg, rgba(6,28,41,.82), rgba(6,23,35,.92)); }.camera-empty svg { width:32px; height:32px; margin:auto; }.camera-empty.loaded { display:none; }.camera-meta { min-height:23px; color:var(--muted); font-size:.75rem; display:flex; justify-content:space-between; gap:.5rem; padding-top:.55rem; }.button-row { display:flex; gap:.55rem; margin-top:.5rem; }.button { min-height:36px; border:1px solid transparent; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.55rem .8rem; font-size:.82rem; font-weight:750; }.button svg { width:16px; }.button-primary { background:var(--aqua); color:#05202d; }.button-primary:hover { background:#9bf0ff; }.button-secondary { background:rgba(255,255,255,.05); color:var(--ink); border-color:var(--line); }.button-secondary:hover { border-color:rgba(117,233,255,.5); }.button-wide { width:100%; }.metrics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.metric-card { min-height:200px; display:flex; flex-direction:column; justify-content:flex-end; padding:1rem; border-radius:7px; border:1px solid var(--line); background:rgba(7,30,45,.58); }.metric-card p { color:var(--muted); margin:1.1rem 0 .38rem; font-size:.82rem; }.metric-card strong { font-size:1.4rem; letter-spacing:0; }.metric-card small { font-size:.72rem; margin-left:.18rem; color:var(--muted-strong); }.metric-card span { color:var(--muted); font-size:.73rem; margin-top:.35rem; }.metric-icon, .heading-icon, .quick-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:6px; color:var(--blue); background:rgba(61,149,255,.14); }.metric-icon.aqua, .heading-icon.aqua, .quick-icon.aqua { color:var(--aqua); background:rgba(117,233,255,.12); }.metric-icon.yellow, .heading-icon.yellow, .quick-icon.yellow { color:var(--yellow); background:rgba(255,211,109,.12); }.metric-icon.green, .heading-icon.green, .quick-icon.green { color:var(--green); background:rgba(114,237,187,.12); }.heading-icon.coral, .quick-icon.coral { color:var(--coral); background:rgba(255,156,114,.12); }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin:2rem 0 1rem; }.section-heading .text-button { margin:0; }.quick-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; }.quick-action { min-height:82px; padding:.8rem; color:var(--ink); background:rgba(11,39,55,.67); border:1px solid var(--line); border-radius:6px; display:flex; align-items:center; gap:.7rem; text-align:left; }.quick-action:hover { border-color:rgba(117,233,255,.4); transform:translateY(-1px); }.quick-action > span:nth-child(2) { display:grid; gap:.24rem; }.quick-action b { font-size:.83rem; }.quick-action small { color:var(--muted); font-size:.7rem; }.quick-action > svg { margin-left:auto; color:var(--muted); width:17px; }.switch-display { width:31px; height:18px; border-radius:20px; margin-left:auto; background:#304c5b; position:relative; }.switch-display::after { content:""; position:absolute; width:13px; height:13px; background:#d4e2e7; border-radius:50%; top:2.5px; left:3px; transition:.2s; }.switch-display.on { background:var(--green); }.switch-display.on::after { left:15px; background:#083020; }.activity-panel { margin-top:1rem; }.activity-list { display:grid; }.activity-item { padding:.72rem 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; color:var(--muted-strong); font-size:.84rem; }.activity-item small { color:var(--muted); white-space:nowrap; }
.page-intro { color:var(--muted); margin:-.4rem 0 1.2rem; font-size:.9rem; }.control-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.control-card { min-height:365px; }.control-card .panel-heading { justify-content:flex-start; }.control-main { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; }.big-stat { display:block; font-size:2.15rem; font-weight:800; }.big-stat small { font-size:.9rem; color:var(--muted); margin-left:.25rem; }.big-label { font-weight:750; font-size:1rem; }.toggle { display:flex; align-items:center; gap:.6rem; color:var(--muted-strong); font-size:.82rem; }.toggle input { position:absolute; opacity:0; }.toggle span { width:42px; height:23px; border-radius:20px; background:#345363; border:1px solid rgba(255,255,255,.12); position:relative; }.toggle span::after { content:""; position:absolute; left:3px; top:3px; width:15px; height:15px; background:#e9f8fb; border-radius:50%; transition:.18s; }.toggle input:checked + span { background:var(--green); }.toggle input:checked + span::after { left:21px; background:#083322; }.segmented { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:5px; overflow:hidden; margin-bottom:1rem; }.segmented button { color:var(--muted); background:transparent; border:0; padding:.55rem; font-size:.8rem; }.segmented button.active { color:var(--ink); background:rgba(117,233,255,.12); }.range-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:1rem 0; }.slider-label { display:grid; grid-template-columns:1fr auto; gap:.5rem; color:var(--muted-strong); font-size:.82rem; margin:1rem 0; }.slider-label input { grid-column:1/-1; accent-color:var(--aqua); width:100%; }.slider-label output { color:var(--aqua); font-weight:750; }.color-presets { display:flex; gap:.55rem; margin:.6rem 0 1rem; }.color-presets button { width:26px; height:26px; background:var(--swatch); border:2px solid transparent; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.25); }.color-presets button:hover { border-color:var(--aqua); }.timer-inline { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:.6rem; margin:1rem 0; }.checkbox-label { display:flex !important; align-items:center; gap:.4rem; padding-bottom:.72rem; white-space:nowrap; }.pump-timers { display:grid; gap:.65rem; }.pump-timer-row { display:grid; grid-template-columns:auto 1fr 1fr auto; align-items:center; gap:.5rem; padding:.55rem 0; border-top:1px solid var(--line); }.pump-timer-row span { color:var(--muted); font-size:.78rem; }.pump-timer-row input[type="time"] { min-width:0; color:var(--ink); background:#071e2c; border:1px solid var(--line); padding:.35rem; border-radius:4px; }.pump-timer-row input[type="checkbox"] { accent-color:var(--green); }.feeder-card { display:flex; flex-direction:column; }.feed-history { color:var(--muted); margin:1rem 0 auto; font-size:.86rem; }.feeder-card .button + .button { margin-top:.65rem; }
.schedule-list { display:grid; }.schedule-row { display:grid; grid-template-columns:52px 1.25fr 1fr auto auto; gap:1rem; align-items:center; padding:1rem .2rem; border-top:1px solid var(--line); }.schedule-row:first-child { border-top:0; }.schedule-time { font-size:1.12rem; font-weight:800; }.schedule-name { display:grid; gap:.22rem; }.schedule-name small, .weekday-copy { color:var(--muted); font-size:.76rem; }.schedule-actions { display:flex; gap:.4rem; }.schedule-switch { width:42px; }.feature-grid, .settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.ai-card p { color:var(--muted); line-height:1.6; font-size:.86rem; }.voice-card { grid-column:1/-1; }.file-input { display:block; width:100%; color:var(--muted); background:#071e2c; border:1px dashed var(--line); border-radius:5px; padding:.65rem; margin:1rem 0; font-size:.8rem; }.file-input::file-selector-button { border:0; color:#06202d; background:var(--aqua); border-radius:4px; margin-right:.7rem; padding:.45rem .65rem; font-weight:750; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1rem; }.form-grid button { grid-column:1/-1; justify-self:start; }.command-form { display:grid; grid-template-columns:1fr auto; gap:.55rem; margin:1rem 0; }.primary-icon { color:#05202d; background:var(--aqua); border-color:var(--aqua); }.ai-result { margin-top:1rem; border-top:1px solid var(--line); padding-top:1rem; color:var(--muted-strong); font-size:.84rem; line-height:1.65; }.ai-result strong { color:var(--ink); }.ai-result ul { margin:.4rem 0 0 1.1rem; padding:0; }.settings-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.compact-form { max-width:450px; }.compact-form .button { justify-self:start; }.modal { width:min(920px, calc(100vw - 2rem)); max-height:min(720px, calc(100vh - 2rem)); overflow:auto; color:var(--ink); background:linear-gradient(145deg, #0e3043, #071f2e); border:1px solid var(--line); border-radius:7px; box-shadow:0 26px 80px rgba(0,0,0,.55); padding:1.3rem; }.modal::backdrop { background:rgba(0,8,13,.67); backdrop-filter:blur(3px); }.modal-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; }.modal-header h2 { margin:0; font-size:1.1rem; }.small-modal { width:min(460px, calc(100vw - 2rem)); }.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }.gallery-image { position:relative; aspect-ratio:1; overflow:hidden; border-radius:5px; background:#061823; border:1px solid var(--line); }.gallery-image img { width:100%; height:100%; display:block; object-fit:cover; }.gallery-image span { position:absolute; inset:auto 0 0; padding:.45rem; background:rgba(4,20,30,.8); color:var(--muted-strong); font-size:.7rem; }.weekday-field { border:0; padding:0; margin:0; }.weekday-field legend { color:var(--muted-strong); font-size:.82rem; padding:0 0 .45rem; }.weekday-picker { display:grid; grid-template-columns:repeat(7,1fr); gap:.35rem; }.weekday-picker label { display:block; }.weekday-picker input { position:absolute; opacity:0; }.weekday-picker span { display:grid; place-items:center; height:30px; color:var(--muted); border:1px solid var(--line); border-radius:4px; font-size:.72rem; cursor:pointer; }.weekday-picker input:checked + span { color:#05202d; background:var(--aqua); border-color:var(--aqua); }.toast-region { position:fixed; z-index:30; right:1rem; top:1rem; display:grid; gap:.55rem; pointer-events:none; }.toast { width:min(360px,calc(100vw - 2rem)); color:var(--ink); background:#113449; border:1px solid var(--line); border-left:3px solid var(--aqua); border-radius:5px; box-shadow:var(--shadow); padding:.75rem .9rem; font-size:.84rem; animation:toast-in .2s ease-out; }.toast.error { border-left-color:var(--danger); }.toast.success { border-left-color:var(--green); } @keyframes toast-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:1120px) { .overview-grid { grid-template-columns:1fr; }.camera-panel { min-height:auto; }.metrics-grid { grid-template-columns:repeat(4,1fr); }.metric-card { min-height:150px; }.settings-grid { grid-template-columns:1fr 1fr; }.settings-grid > :last-child { grid-column:1/-1; } }
@media (max-width:820px) { .app-shell { display:block; }.sidebar { display:none; position:fixed; z-index:20; inset:0 auto 0 0; width:240px; box-shadow:var(--shadow); }.sidebar.open { display:flex; }.mobile-only { display:inline-grid; }.app-main { padding:0 1rem 2rem; }.topbar { min-height:82px; gap:.6rem; }.topbar h1 { font-size:1.28rem; }.device-picker select { min-width:128px; max-width:145px; }.profile > span:not(.profile-initial) { display:none; }.profile { padding-left:0; border:0; }.metrics-grid { grid-template-columns:repeat(2,1fr); }.quick-actions { grid-template-columns:repeat(2,1fr); }.control-grid, .feature-grid, .settings-grid { grid-template-columns:1fr; }.voice-card { grid-column:auto; }.timer-inline { grid-template-columns:1fr 1fr; }.timer-inline .checkbox-label { grid-column:1/-1; padding-bottom:0; }.schedule-row { grid-template-columns:1fr auto; gap:.55rem; }.schedule-row > :nth-child(2), .schedule-row > :nth-child(3) { grid-column:1/-1; }.schedule-actions { grid-column:1; }.schedule-row .schedule-switch { grid-column:2; grid-row:1; }.gallery-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .login-panel { padding:2rem 1.45rem; }.button-row .button { padding:.55rem .5rem; }.button-row .button svg { display:none; }.quick-actions { grid-template-columns:1fr; }.metric-card { min-height:135px; }.range-row, .form-grid { grid-template-columns:1fr; }.form-grid button { grid-column:auto; }.topbar-actions { gap:.35rem; }.panel { padding:1rem; } }