:root {
  color-scheme: light;
  --ink: #1d3a3b;
  --muted: #5e7775;
  --glass: rgba(247, 250, 238, 0.78);
  --line: rgba(42, 76, 73, 0.16);
  --teal: #34776f;
  --gold: #e4a33b;
  --blue: #4b7bd8;
  --hour: 48px;
  --shadow: 0 25px 70px rgba(25, 54, 48, 0.22), 0 3px 12px rgba(25, 54, 48, 0.12);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); font-family: "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.scene { position: fixed; inset: 0; z-index: -3; background: url("meadow-observatory-v2.png") center / cover no-repeat; transform: scale(1.008); animation: breathe 22s ease-in-out infinite alternate; }
.atmosphere { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(90deg, rgba(32,78,81,.08), transparent 38%), linear-gradient(180deg, rgba(255,244,199,.05), transparent 48%, rgba(18,54,47,.13)); }
.dashboard { width: 100vw; min-height: 100vh; position: relative; }

.sky-clock { position: fixed; top: clamp(30px,5vh,68px); right: clamp(34px,4vw,76px); display: grid; grid-template-columns: 38px auto auto; align-items: start; gap: 15px; color: rgba(24,56,58,.92); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.sun-mark { width: 34px; height: 34px; margin-top: 8px; border: 1px solid rgba(39,94,91,.32); border-radius: 50%; position: relative; }
.sun-mark::before,.sun-mark::after { content:""; position:absolute; inset:-7px 15px; border-left:1px solid rgba(39,94,91,.24); }
.sun-mark::after { transform:rotate(90deg); }
.sun-mark span { position:absolute; inset:7px; border-radius:50%; background:#f5bf59; box-shadow:0 0 20px rgba(245,191,89,.7); }
.clock-copy { min-width:138px; }
.clock-copy p { margin:0; }
#greeting { font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
#clock { display:block; margin:-2px 0 -3px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.8rem,4vw,4.35rem); letter-spacing:-.065em; line-height:1; }
#date { color:rgba(35,74,75,.78); font-size:.75rem; font-weight:650; }
.weather { display:flex; align-items:center; gap:9px; margin:12px 0 0 12px; padding-left:20px; border-left:1px solid rgba(39,84,83,.22); }
.weather-icon { font-size:1.15rem; color:#d98c29; }
.weather strong,.weather small { display:block; white-space:nowrap; }
.weather strong { font-size:.73rem; }
.weather small { margin-top:2px; color:rgba(44,79,79,.72); font-size:.62rem; }

.field-station { position:fixed; left:clamp(37vw,39vw,42vw); bottom:clamp(22px,3.5vh,50px); width:min(850px,calc(61vw - 32px)); overflow:hidden; border:1px solid rgba(255,255,255,.76); border-radius:26px; background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 38%),var(--glass); box-shadow:var(--shadow); backdrop-filter:blur(25px) saturate(1.2); -webkit-backdrop-filter:blur(25px) saturate(1.2); transition:opacity 280ms ease,transform 420ms cubic-bezier(.2,.8,.2,1); }
.field-station::before { content:""; position:absolute; inset:6px; border:1px solid rgba(45,80,75,.08); border-radius:20px; pointer-events:none; z-index:4; }
.field-station.is-collapsed { opacity:0; transform:translateY(40px) scale(.96); pointer-events:none; }

.station-topline { min-height:65px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:12px 17px; border-bottom:1px solid var(--line); }
.station-title { display:flex; align-items:center; gap:9px; }
.station-title small,.station-title strong { display:block; white-space:nowrap; }
.station-title small { color:#537274; font-size:.5rem; font-weight:850; letter-spacing:.15em; }
.station-title strong { margin-top:1px; font-family:Georgia,serif; font-size:.92rem; font-weight:600; }
.leaf-mark { display:inline-block; width:24px; height:24px; border:1px solid rgba(38,95,79,.28); border-radius:50%; position:relative; flex:0 0 auto; }
.leaf-mark::before { content:""; position:absolute; width:9px; height:13px; left:7px; top:4px; border-radius:9px 2px 9px 2px; background:#4b8b6b; transform:rotate(22deg); }

.quick-dock { display:flex; justify-content:center; gap:4px; }
.quick-dock a { display:flex; align-items:center; gap:5px; padding:5px 7px; border-radius:9px; color:#4b6866; text-decoration:none; font-size:.54rem; font-weight:700; transition:160ms ease; }
.quick-dock a span { display:grid; width:22px; height:22px; place-items:center; border-radius:7px; background:rgba(51,113,101,.09); color:#327168; font-size:.7rem; }
.quick-dock a:hover { transform:translateY(-1px); background:rgba(255,255,255,.55); color:#244e4b; }

.station-actions { display:flex; align-items:center; gap:7px; }
.google-button { display:flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid rgba(55,92,87,.15); border-radius:10px; background:rgba(255,255,255,.44); color:#466663; cursor:pointer; font-size:.55rem; font-weight:800; }
.google-button i { width:7px; height:7px; border-radius:50%; background:#a8b8b1; }
.google-button.connected i { background:#49a675; box-shadow:0 0 7px rgba(73,166,117,.6); }
.google-button:hover { background:white; }
.round-button { width:29px; height:29px; border:1px solid rgba(41,80,75,.17); border-radius:50%; background:rgba(255,255,255,.38); color:#3d6260; cursor:pointer; }
.round-button:hover { transform:translateY(-1px); background:rgba(255,255,255,.75); }

.station-grid { display:grid; grid-template-columns:1.38fr .92fr; min-height:340px; }
.module { min-width:0; padding:17px 18px 13px; }
.calendar-module { border-right:1px solid var(--line); }
.module-heading { min-height:40px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.module-heading > div:first-child { display:flex; gap:8px; align-items:center; }
.module-number { display:grid; width:21px; height:21px; place-items:center; border-radius:50%; background:rgba(57,108,96,.1); color:#3c6d64; font-size:.47rem; font-weight:800; }
.module-heading small { display:block; color:#6a7d7b; font-size:.48rem; font-weight:850; letter-spacing:.14em; }
.module-heading h2 { margin:1px 0 0; font-family:Georgia,serif; font-size:1rem; font-weight:600; }
.calendar-date { display:flex; align-items:center; gap:5px; color:#54716f; }
.calendar-date strong { font:600 1.15rem/1 Georgia,serif; }
.calendar-date span { font-size:.48rem; font-weight:850; letter-spacing:.08em; }

.calendar-scroll { height:253px; margin-top:5px; overflow-y:auto; overscroll-behavior:contain; border:1px solid rgba(54,89,84,.1); border-radius:14px; background:rgba(255,255,255,.25); scrollbar-width:thin; scrollbar-color:rgba(59,98,91,.25) transparent; }
.calendar-canvas { position:relative; min-height:calc(var(--hour) * 24); margin-left:42px; }
.hour-row { position:absolute; left:0; right:0; height:var(--hour); border-top:1px solid rgba(58,92,88,.1); }
.hour-row span { position:absolute; right:calc(100% + 8px); top:-6px; width:34px; text-align:right; color:#788a88; font-size:.47rem; }
.events-layer { position:absolute; inset:0 7px 0 6px; }
.calendar-event { position:absolute; left:5px; right:4px; min-height:25px; overflow:hidden; padding:5px 7px 5px 10px; border-left:3px solid var(--event-color,#4b7bd8); border-radius:5px; background:color-mix(in srgb,var(--event-color,#4b7bd8) 13%,rgba(255,255,255,.58)); color:#315254; box-shadow:0 2px 7px rgba(47,79,76,.06); }
.calendar-event strong,.calendar-event small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calendar-event strong { font-size:.58rem; }
.calendar-event small { margin-top:1px; color:#687c7a; font-size:.46rem; }
.calendar-placeholder { position:absolute; top:calc(var(--hour) * 9); left:12px; right:12px; padding:10px; border:1px dashed rgba(58,99,92,.23); border-radius:8px; color:#6d807e; text-align:center; font-size:.55rem; }
.now-line { position:absolute; z-index:3; left:-2px; right:7px; height:1px; background:#df5a51; box-shadow:0 0 5px rgba(223,90,81,.3); }
.now-line::before { content:""; position:absolute; left:-4px; top:-3px; width:7px; height:7px; border-radius:50%; background:#df5a51; }
.now-line span { position:absolute; right:0; top:-12px; padding:1px 4px; border-radius:3px; background:#df5a51; color:white; font-size:.4rem; font-weight:900; }
.calendar-status,.task-footer { display:flex; align-items:center; justify-content:space-between; padding-top:8px; color:#647b79; font-size:.49rem; }
.calendar-status span,.task-footer span { display:flex; align-items:center; gap:5px; }
.calendar-status button,.task-footer button { border:0; background:transparent; color:#3c756e; cursor:pointer; font-size:.48rem; font-weight:800; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#4b7bd8; box-shadow:0 0 6px rgba(75,123,216,.4); }
.status-dot.local { background:#d39e42; box-shadow:none; }

.tasks-module { display:flex; min-height:0; flex-direction:column; }
.task-count { margin-top:3px; padding:4px 7px; border-radius:999px; background:rgba(57,108,96,.08); color:#587572; font-size:.46rem; font-weight:800; }
.task-entry { display:flex; gap:6px; margin-top:9px; }
.task-entry input { min-width:0; flex:1; padding:8px 10px; border:1px solid rgba(50,87,81,.13); border-radius:10px; outline:0; background:rgba(255,255,255,.38); color:#284c49; font-family:Georgia,serif; font-size:.7rem; }
.task-entry input:focus { border-color:rgba(48,113,104,.38); background:rgba(255,255,255,.62); }
.task-entry input::placeholder { color:#7b8c89; }
.task-entry input:disabled { cursor:not-allowed; opacity:.72; }
.task-entry button { width:31px; border:0; border-radius:10px; background:#3c766e; color:white; cursor:pointer; font-size:1rem; }
.task-entry button:hover { background:#285f58; }
.task-entry button:disabled { cursor:not-allowed; background:#8ca59f; opacity:.72; }
.task-list { flex:1; max-height:214px; margin:9px 0 0; padding:0; overflow:auto; list-style:none; }
.task-item { display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:7px; min-height:38px; padding:5px 2px; border-bottom:1px solid rgba(53,87,82,.09); }
.task-check { width:17px; height:17px; border:1px solid rgba(45,91,84,.3); border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; color:transparent; font-size:.57rem; }
.task-check:hover { border-color:#3f7e73; background:rgba(75,139,121,.1); }
.task-item.done .task-check { background:#4c927c; color:white; }
.task-copy { min-width:0; }
.task-copy strong { display:block; overflow:hidden; color:#315653; font-family:Georgia,serif; font-size:.66rem; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.task-copy small { display:block; margin-top:1px; color:#81908e; font-size:.44rem; }
.task-remove { border:0; background:transparent; color:#96a29f; cursor:pointer; font-size:.8rem; opacity:0; }
.task-item:hover .task-remove { opacity:1; }
.tasks-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#718582; text-align:center; }
.tasks-empty span { display:grid; width:31px; height:31px; place-items:center; border:1px solid rgba(51,97,88,.16); border-radius:50%; background:rgba(255,255,255,.3); color:#4e8579; }
.tasks-empty strong { margin-top:7px; font:600 .7rem Georgia,serif; }
.tasks-empty small { margin-top:2px; font-size:.48rem; }
.task-footer { border-top:1px solid rgba(53,87,82,.08); }

.station-footer { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:10px 18px 12px; border-top:1px solid var(--line); color:#536f6d; }
.quote-mark { color:#c98f38; font:2rem/1 Georgia,serif; }
.station-footer p { margin:0; font:italic .65rem Georgia,serif; }
.quote-day { color:#788987; font-size:.43rem; font-weight:850; letter-spacing:.12em; }

.restore-button { position:fixed; left:42vw; bottom:38px; display:flex; align-items:center; gap:9px; padding:9px 14px 9px 9px; border:1px solid rgba(255,255,255,.65); border-radius:999px; background:rgba(248,250,235,.8); color:#315754; box-shadow:var(--shadow); backdrop-filter:blur(16px); cursor:pointer; font:700 .65rem/1 "Segoe UI",sans-serif; }
.motes { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.motes i { position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(255,248,210,.9); box-shadow:0 0 7px rgba(255,240,171,.8); animation:drift 12s linear infinite; }
.motes i:nth-child(1){left:46%;top:72%;animation-delay:-2s}.motes i:nth-child(2){left:58%;top:62%;animation-delay:-8s}.motes i:nth-child(3){left:73%;top:77%;animation-delay:-5s}.motes i:nth-child(4){left:84%;top:48%;animation-delay:-10s}.motes i:nth-child(5){left:65%;top:85%;animation-delay:-1s}.motes i:nth-child(6){left:92%;top:71%;animation-delay:-6s}
@keyframes breathe { from{transform:scale(1.008)} to{transform:scale(1.024) translate3d(-.25%,-.15%,0)} }
@keyframes drift { 0%{transform:translate(0,18px);opacity:0}15%{opacity:.85}80%{opacity:.65}100%{transform:translate(28px,-80px);opacity:0} }

@media (max-width:1200px) { .field-station{left:34vw;width:calc(65vw - 24px)} .quick-dock a{font-size:0}.quick-dock a span{font-size:.7rem} }
@media (max-height:760px) { .sky-clock{top:22px}.field-station{bottom:17px}.calendar-scroll{height:220px}.station-grid{min-height:305px}.task-list{max-height:180px} }
@media (max-width:780px) { body{overflow:auto;background:#a7d9dc}.dashboard{min-height:100svh;padding:165px 10px 18px}.sky-clock{position:absolute;top:24px;right:20px}.weather{display:none}.field-station{position:relative;left:auto;bottom:auto;width:100%}.station-topline{grid-template-columns:1fr auto}.quick-dock{grid-row:2;grid-column:1/-1}.quick-dock a{font-size:.5rem}.station-grid{grid-template-columns:1fr}.calendar-module{border-right:0;border-bottom:1px solid var(--line)}.station-footer{grid-template-columns:auto 1fr}.quote-day{display:none}.restore-button{left:18px;bottom:18px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} }