:root { color-scheme: light; --ink:#163532; --muted:#657c78; --green:#23675e; --green-dark:#174d47; --mint:#dcece6; --cream:#f6f3ea; --card:rgba(255,255,255,.78); --line:rgba(25,65,60,.12); --shadow:0 24px 70px rgba(28,66,59,.10); font-family:"DM Sans","Noto Sans TC",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(145deg,#edf4ee 0%,#f7f2e8 50%,#e8f0eb 100%); }
button,input,textarea { font:inherit; }
button { color:inherit; }
.sky-glow { position:fixed; z-index:-1; inset:0; overflow:hidden; }
.sky-glow::before,.sky-glow::after { content:""; position:absolute; border-radius:50%; filter:blur(2px); }
.sky-glow::before { width:620px;height:620px;right:-180px;top:-260px;background:rgba(245,190,105,.2); }
.sky-glow::after { width:520px;height:520px;left:-260px;top:35%;background:rgba(91,163,145,.12); }
.topbar { max-width:1180px;margin:auto;padding:28px 24px;display:flex;align-items:center;justify-content:space-between; }
.brand { display:flex;gap:11px;align-items:center;color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:-.02em; }
.brand-mark { display:grid;place-items:center;width:35px;height:35px;border-radius:11px;color:white;background:var(--green);font-family:serif;font-style:italic; }
.header-actions { display:flex;align-items:center;gap:10px; }
.shell { max-width:1180px;margin:auto;padding:35px 24px 72px; }
.hero { display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px; }
.eyebrow,.section-label { color:var(--green);font-size:.72rem;font-weight:700;letter-spacing:.18em;margin:0 0 9px; }
h1 { margin:0;font-family:Georgia,"Noto Serif TC",serif;font-size:clamp(2.7rem,6vw,5.5rem);font-weight:400;letter-spacing:-.055em;line-height:1.05; }
.hero-copy { max-width:560px;color:var(--muted);font-size:1.05rem;line-height:1.7;margin:18px 0 0; }
.date-chip { min-width:145px;padding:18px 22px;border-left:1px solid var(--line);display:flex;flex-direction:column;color:var(--muted); }
.date-chip strong { font-family:Georgia,serif;font-size:2rem;color:var(--ink);font-weight:400; }
.dashboard-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.card { border:1px solid rgba(255,255,255,.7);background:var(--card);backdrop-filter:blur(18px);border-radius:26px;padding:30px;box-shadow:var(--shadow); }
.weather-card { background:linear-gradient(155deg,rgba(26,82,75,.97),rgba(42,105,91,.91));color:white;position:relative;overflow:hidden; }
.weather-card::after { content:"";position:absolute;width:310px;height:310px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-130px;top:-160px;box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.018);pointer-events:none; }
.weather-card .section-label { color:#b9dcd2; }.weather-card h2 { color:white; }
.card-heading,.section-header,.dialog-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:16px; }
h2 { margin:0;font-family:Georgia,"Noto Serif TC",serif;font-weight:400;font-size:1.65rem; }
.round-button,.icon-button { border:0;background:rgba(255,255,255,.12);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.2rem;transition:.2s; }
.round-button:hover,.icon-button:hover { transform:rotate(10deg);background:rgba(255,255,255,.2); }
.weather-empty { min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#d0e4de; }
.empty-weather-icon { font-size:3.5rem;line-height:1; }.weather-empty p { margin:10px 0 18px; }
.weather-primary { display:flex;justify-content:space-between;align-items:center;min-height:150px; }
.temperature { font-family:Georgia,serif;font-size:5rem;letter-spacing:-.08em; }.weather-description { margin:-5px 0 0;color:#d6e7e2;text-transform:capitalize; }
.weather-icon { width:105px;height:105px;filter:drop-shadow(0 15px 20px rgba(0,0,0,.13)); }
.metrics { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14); }
.metric { display:flex;align-items:center;gap:10px;padding:18px 5px; }.metric+.metric { border-left:1px solid rgba(255,255,255,.14);padding-left:18px; }
.metric-icon { font-size:1.3rem;color:#bfe0d7; }.metric div { display:flex;flex-direction:column; }.metric small { color:#b9d4cd; }.metric strong { font-size:.95rem;margin-top:2px; }
.city-search { display:flex;gap:9px;margin-top:20px; }.city-search input { flex:1;min-width:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);color:white; }.city-search input::placeholder { color:#b5cec8; }
input,textarea { width:100%;border:1px solid var(--line);border-radius:13px;padding:13px 15px;background:rgba(255,255,255,.62);color:var(--ink);outline:none;transition:.2s; }
input:focus,textarea:focus { border-color:#559286;box-shadow:0 0 0 3px rgba(70,139,126,.12); }
.button { border:0;border-radius:12px;padding:11px 17px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.2s; }.button:hover { transform:translateY(-1px); }.button:disabled { opacity:.55;cursor:wait; }
.primary { background:#e8b96e;color:#2d342a;box-shadow:0 8px 18px rgba(25,40,30,.12); }.secondary { background:rgba(255,255,255,.92);color:var(--green-dark); }.ghost { background:rgba(255,255,255,.6);border:1px solid var(--line); }
.mood-card { display:flex;flex-direction:column; }.step-pill { background:var(--mint);padding:6px 11px;border-radius:999px;font-size:.8rem;color:var(--green);font-weight:700; }
.mood-scale { display:grid;grid-template-columns:repeat(5,1fr);gap:7px;border:0;padding:0;margin:38px 0 32px; }
.mood-scale label { cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center; }.mood-scale input { position:absolute;opacity:0;pointer-events:none; }
.mood-face { width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:#f3f2ec;font-size:1.85rem;filter:grayscale(.65);transition:.2s; }
.mood-scale label:hover .mood-face,.mood-scale input:checked+.mood-face { transform:translateY(-5px) scale(1.07);filter:none;background:#f6dfb7;box-shadow:0 9px 22px rgba(146,100,35,.16); }.mood-scale input:focus-visible+.mood-face { outline:3px solid #4a887d; }
.mood-scale small { font-size:.72rem;color:var(--muted); }.note-label { display:flex;justify-content:space-between;font-size:.88rem;font-weight:600;margin-bottom:8px; }.note-label span { color:var(--muted);font-weight:400; }.form-footer { display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:15px; }.save-button { margin-left:auto; }
.status { min-height:1.2em;margin:10px 0 0;font-size:.82rem;color:#d6e7e2; }.mood-card .status { color:var(--green);margin:0; }
.history-section { margin-top:55px; }.section-header { align-items:end;margin-bottom:22px; }.text-button { border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer; }
.history-actions { display:flex;align-items:center;gap:12px; }
.record-list { display:grid;gap:10px; }.record-item { position:relative;display:grid;grid-template-columns:110px 1fr 1fr 2fr 35px;align-items:center;gap:20px;background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:17px;padding:16px 18px; }
.record-date,.record-weather,.record-mood { display:flex;align-items:center;gap:11px; }.record-date { flex-direction:column;align-items:flex-start;gap:2px; }.record-date span,.record-weather span,.record-mood small { font-size:.78rem;color:var(--muted); }.record-weather div,.record-mood div { display:flex;flex-direction:column; }.mini-weather,.record-mood>span { font-size:1.6rem!important; }.record-note { margin:0;color:var(--muted);font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.delete-record { background:transparent;color:var(--muted); }
.records-empty { padding:55px;text-align:center;border:1px dashed rgba(30,78,70,.18);border-radius:22px;color:var(--muted); }.records-empty>span { color:#d2a558;font-size:2rem; }.records-empty h3 { color:var(--ink);margin:10px 0 4px; }.records-empty p { margin:0; }
.insight { margin-bottom:14px;padding:13px 17px;background:rgba(224,239,231,.75);border-radius:13px;color:var(--green-dark);font-size:.9rem; }
dialog { border:0;border-radius:24px;padding:0;box-shadow:0 30px 100px rgba(12,42,37,.3);max-width:480px;width:calc(100% - 32px); } dialog::backdrop { background:rgba(16,42,39,.45);backdrop-filter:blur(5px); }.settings-panel { padding:28px; }.settings-panel>p { color:var(--muted);line-height:1.6; }.settings-panel label { display:block;font-weight:600;margin:22px 0 7px; }.settings-panel>small { display:block;color:var(--muted);line-height:1.5;margin-top:8px; }.dialog-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:25px; }.dialog-heading .icon-button { background:#edf1ec; }
.offline-badge { padding:6px 10px;border-radius:999px;background:#f0d9b4;font-size:.75rem;font-weight:600; }.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@media (max-width:800px) { .shell { padding-top:15px; }.hero { align-items:flex-start; }.date-chip { display:none; }.dashboard-grid { grid-template-columns:1fr; }.record-item { grid-template-columns:80px 1fr 1fr 30px; }.record-note { grid-column:2/4; }.delete-record { grid-row:1;grid-column:4; }.history-section { margin-top:38px; } }
@media (max-width:520px) { .topbar { padding:18px 16px; }.shell { padding-left:16px;padding-right:16px; }.hero { margin:20px 0 28px; }.hero-copy { font-size:.95rem; }.card { padding:22px;border-radius:22px; }.mood-scale { margin:30px -5px 28px;gap:1px; }.mood-face { width:47px;height:47px;font-size:1.55rem;border-radius:15px; }.mood-scale small { font-size:.66rem; }.metrics { grid-template-columns:1fr; }.metric+.metric { border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-left:5px; }.metric { padding:11px 5px; }.record-item { grid-template-columns:1fr 1fr 28px;gap:12px; }.record-date { grid-column:1/3;flex-direction:row;align-items:center; }.record-weather { grid-column:1; }.record-mood { grid-column:2; }.record-note { grid-column:1/4; }.delete-record { grid-column:3; }.city-search { flex-wrap:wrap; }.city-search input { flex-basis:100%; }.section-header { align-items:flex-start; }.history-actions { flex-direction:column;align-items:flex-end;gap:6px; } }