:root { --ink:#39453d; --muted:#7d887e; --rose:#d7878c; --rose-deep:#bd6d73; --blush:#f8e8e5; --sage:#99ad95; --sage-deep:#617d68; --paper:#fffdfa; --line:rgba(82,100,84,.13); --shadow:0 22px 60px rgba(74,91,77,.09); --page-bg:#f7f3eb; --card-bg:rgba(255,253,250,.88); --card-border:rgba(255,255,255,.76); --modal-bg:#fffdfa; --modal-shadow:0 30px 100px rgba(45,55,47,.23); --control-bg:#faf8f3; --control-hover:#f3eee8; --overlay-bg:rgba(36,43,38,.42); --primary-bg:#39453d; --primary-hover:#47564c; --primary-fg:#fff; --danger-bg:#f8e8e5; --danger-fg:#bd6d73; --scroll-thumb:#b9b7ae; --scroll-track:#efebe4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--page-bg); font-family:"Songti SC","STSong","Noto Serif SC","PingFang SC",serif; }
button,input,textarea { font:inherit; }
button { color:inherit; }
.app-shell { min-height:100vh; position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(251,248,242,.82),rgba(247,243,235,.88)),url('huaqi-garden.png') center bottom/cover fixed; }
.app-shell:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.25; background-image:radial-gradient(rgba(70,80,65,.15) .5px,transparent .5px); background-size:7px 7px; mix-blend-mode:multiply; }
.topbar { height:88px; padding:0 max(30px,calc((100vw - 1220px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(252,249,243,.72); backdrop-filter:blur(16px); position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; border:0; background:none; cursor:pointer; text-align:left; }
.brand-mark { width:42px; height:42px; border:1px solid rgba(190,109,115,.25); border-radius:50% 50% 46% 54%; display:grid; place-items:center; color:var(--rose-deep); background:rgba(255,253,250,.8); box-shadow:inset 0 0 0 6px rgba(248,232,229,.5); }
.brand b { display:block; font-size:22px; letter-spacing:.18em; font-weight:500; }
.brand small { display:block; margin-top:3px; color:var(--muted); font-size:11px; letter-spacing:.14em; }
.desktop-nav { display:flex; align-items:center; gap:34px; }
.desktop-nav button { border:0; background:none; font-size:14px; color:#707b72; cursor:pointer; padding:32px 2px 29px; position:relative; }
.desktop-nav button.active { color:var(--rose-deep); }
.desktop-nav button.active:after { content:""; position:absolute; left:50%; bottom:20px; width:16px; height:2px; border-radius:2px; transform:translateX(-50%); background:var(--rose); }
.privacy-pill { border:1px solid rgba(96,125,104,.18); background:rgba(255,255,255,.55); padding:9px 14px; border-radius:30px; color:var(--sage-deep); font-size:12px; cursor:pointer; }
.top-actions { display:flex; align-items:center; gap:9px; }
.logout-form { margin:0; }
.logout-form button { border:0; background:transparent; color:var(--muted); font-size:11px; cursor:pointer; padding:8px 5px; }
.logout-form button:hover { color:var(--rose-deep); }
.content { width:min(1220px,calc(100% - 48px)); margin:auto; padding:64px 0 34px; position:relative; z-index:1; }
.welcome-line { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; }
.eyebrow,.section-kicker { color:var(--sage-deep); font-size:12px; letter-spacing:.24em; text-transform:uppercase; }
.welcome-line h1 { margin:9px 0 0; font-size:30px; letter-spacing:.11em; font-weight:500; }
.welcome-line p { color:var(--muted); font-size:13px; letter-spacing:.08em; margin:0 0 4px; }
.paper-card { background:var(--card-bg); border:1px solid var(--card-border); box-shadow:var(--shadow); backdrop-filter:blur(10px); }
.dashboard-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:20px; }
.compact-dashboard { grid-template-columns:1fr; }.compact-dashboard .hero-card { min-height:245px; }
.hero-card { min-height:285px; border-radius:28px; padding:38px 40px; position:relative; overflow:hidden; display:flex; align-items:center; }
.hero-card:before { content:""; position:absolute; inset:0 auto 0 0; width:6px; background:linear-gradient(180deg,var(--sage),#c9d3c2); }
.hero-card:after { content:"✿"; position:absolute; right:180px; top:22px; color:rgba(215,135,140,.12); font-size:120px; transform:rotate(16deg); }
.hero-copy { position:relative; z-index:2; }
.count { display:flex; align-items:baseline; color:var(--rose-deep); margin:2px 0 -4px; }
.count strong { font-family:Georgia,serif; font-size:78px; line-height:1.1; font-weight:400; }
.count span { font-size:18px; margin-left:8px; }
.hero-copy>p { color:var(--muted); font-size:14px; margin:0 0 24px; }
.hero-copy>p b { color:var(--ink); font-weight:500; }
.phase-line { border-top:1px dashed rgba(82,100,84,.22); padding-top:17px; font-size:14px; letter-spacing:.04em; }
.phase-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--sage); margin-right:8px; }
.phase-dot.recorded,.phase-dot.period { background:var(--rose); }.phase-dot.fertile,.phase-dot.ovulation { background:#d8aa71; }
.cycle-orbit { position:absolute; right:42px; top:36px; width:126px; height:126px; border-radius:50%; display:grid; place-items:center; text-align:center; background:radial-gradient(circle,rgba(255,253,250,.95) 55%,transparent 57%),conic-gradient(var(--rose) 0 38%,#eaded9 38% 65%,var(--sage) 65% 92%,#e7e3d9 92%); box-shadow:0 8px 30px rgba(78,92,81,.09); }
.cycle-orbit:before { content:""; position:absolute; inset:-7px; border:1px dashed rgba(96,125,104,.2); border-radius:50%; }
.cycle-orbit strong { display:block; font:400 30px Georgia,serif; }.cycle-orbit span { display:block; font-size:10px; color:var(--muted); margin-top:2px; }
.record-button { position:absolute; right:35px; bottom:34px; border:0; border-radius:24px; padding:11px 19px; background:var(--ink); color:#fff; cursor:pointer; box-shadow:0 9px 25px rgba(57,69,61,.18); }
.record-button span { color:#f2c5c5; font-size:17px; }
.rhythm-card { border-radius:28px; padding:31px 32px; }
.card-heading { display:flex; justify-content:space-between; align-items:flex-start; }
.card-heading h2,.ai-content h2,.care-card h2 { margin:6px 0 0; font-size:20px; font-weight:500; letter-spacing:.08em; }
.card-heading button { border:0; background:none; color:var(--muted); cursor:pointer; font-size:11px; }
.rhythm-list { margin-top:19px; }
.rhythm-list>div { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.rhythm-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; font-size:12px; }.rhythm-icon.rose { color:var(--rose-deep); background:var(--blush); }.rhythm-icon.green { color:var(--sage-deep); background:#edf2e9; }.rhythm-icon.gold { color:#a57a45; background:#f7efe1; }
.rhythm-list p { margin:0; }.rhythm-list small { display:block; color:var(--muted); font-size:10px; margin-bottom:4px; }.rhythm-list b { font-weight:500; font-size:13px; }.rhythm-list em { font-style:normal; font-size:10px; color:var(--muted); }
.calendar-card { margin-top:20px; border-radius:30px; padding:28px 32px 18px; }
.calendar-head { display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--line); padding-bottom:22px; }
.month-switcher { display:flex; align-items:center; gap:13px; }.month-switcher button { width:32px; height:32px; border:0; border-radius:50%; background:var(--control-hover); cursor:pointer; font-size:22px; line-height:1; }.month-switcher h2 { margin:0 4px; font:400 22px Georgia,serif; }.month-switcher h2 i { font-style:normal; color:var(--muted); padding:0 3px; }.month-switcher .today-button { width:auto; height:auto; border-radius:18px; font-size:11px; color:var(--sage-deep); padding:7px 12px; margin-left:4px; }
.legend { display:flex; gap:8px; background:var(--control-hover); padding:5px; border-radius:22px; }.legend button { border:0; background:none; color:var(--muted); font-size:11px; padding:8px 12px; border-radius:17px; cursor:pointer; }.legend button.active { background:var(--modal-bg); color:var(--rose-deep); box-shadow:0 4px 12px rgba(80,90,80,.07); }.legend i { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; background:#aab2aa; }.legend i.period { background:var(--rose); }.legend i.fertile { background:#d8aa71; }.legend i.safe { background:var(--sage); }
.week-row,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }.week-row { padding:18px 0 10px; }.week-row span { text-align:center; color:#9ca49c; font-size:11px; }.calendar-grid { row-gap:8px; }.day { height:62px; border:0; border-radius:17px; background:transparent; cursor:pointer; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:.2s ease; }.day:hover { background:#f7f3ed; transform:translateY(-1px); }.day span { font:400 16px Georgia,serif; }.day small { min-height:14px; margin-top:3px; color:var(--muted); font-size:9px; }.day.outside { opacity:.28; }.day.recorded:not(.muted) { background:linear-gradient(145deg,#f9e6e4,#fff5f3); color:var(--rose-deep); }.day.recorded:not(.muted) small { color:var(--rose-deep); }.day.period:not(.muted) { background:rgba(248,232,229,.24); color:var(--rose-deep); box-shadow:inset 0 0 0 1px rgba(215,135,140,.28); }.day.period:not(.muted) small { color:var(--rose-deep); }.day.fertile:not(.muted) small,.day.ovulation:not(.muted) small { color:#a47742; }.day.ovulation:not(.muted):after { content:""; position:absolute; top:8px; right:calc(50% - 15px); width:5px; height:5px; border-radius:50%; background:#d3a369; }.day.safe:not(.muted) small { color:var(--sage-deep); }.day.is-today { outline:1px solid rgba(189,109,115,.45); outline-offset:-4px; }.day.muted { opacity:.18; }
.calendar-note { text-align:center; color:#a2a9a1; font-size:10px; letter-spacing:.08em; margin:15px 0 0; }
.lower-grid { display:grid; grid-template-columns:1.4fr .6fr; gap:20px; margin-top:20px; }.ai-card,.care-card { border-radius:27px; padding:28px 30px; }.ai-card { display:grid; grid-template-columns:65px 1fr auto; align-items:center; gap:22px; }.ai-seal { width:60px; height:60px; border-radius:20px 20px 26px 20px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#849b87,#536e5b); font:400 17px Georgia,serif; box-shadow:inset 0 0 0 5px rgba(255,255,255,.12); }.ai-content h2 { margin:3px 0 7px; }.ai-content p { margin:0; color:var(--muted); font-size:12px; line-height:1.75; max-width:650px; }.ai-content .ai-result { color:#58645b; }.ai-source { display:block; color:var(--sage-deep); margin-top:8px; font-size:9px; letter-spacing:.08em; }.ai-button { min-width:118px; border:1px solid rgba(96,125,104,.2); background:#edf2e9; color:var(--sage-deep); padding:11px 16px; border-radius:22px; cursor:pointer; font-size:12px; }.ai-button:disabled { opacity:.7; }.spinner { display:inline-block; width:11px; height:11px; border:1px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; margin-right:4px; } @keyframes spin { to { transform:rotate(360deg); } }
.care-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }.care-tools { display:flex; align-items:center; gap:6px; }.care-tools button { border:1px solid var(--line); background:rgba(255,255,255,.5); color:var(--muted); cursor:pointer; }.care-tools svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.care-location { min-height:30px; display:flex; align-items:center; gap:5px; border-radius:16px; padding:5px 9px; font-size:9px; }.care-location.active { color:var(--sage-deep); background:#edf2e9; }.care-refresh { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; padding:0; }.care-tools button:disabled { cursor:wait; opacity:.55; }.care-card h2 { margin:13px 0 0; }.care-card blockquote { margin:9px 0 8px; font-size:13px; line-height:1.85; color:#5d695f; }.care-meta { display:block; color:var(--muted); font-size:9px; line-height:1.5; margin-bottom:13px; }.care-tags { display:flex; flex-wrap:wrap; gap:7px; }.care-tags span { font-size:10px; color:var(--rose-deep); background:var(--blush); padding:6px 10px; border-radius:14px; }
.weather-overview { margin-top:17px; }.weather-consent { width:100%; display:flex; align-items:center; gap:10px; padding:12px 13px; border:1px dashed rgba(96,125,104,.26); border-radius:17px; background:rgba(153,173,149,.08); color:var(--ink); text-align:left; cursor:pointer; }.weather-consent>svg { width:21px; height:21px; flex:0 0 auto; fill:none; stroke:var(--sage-deep); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.weather-consent>span { min-width:0; flex:1; }.weather-consent b,.weather-consent small { display:block; }.weather-consent b { font-size:11px; font-weight:500; }.weather-consent small { margin-top:3px; color:var(--muted); font-size:8px; line-height:1.45; }.weather-consent i { flex:0 0 auto; color:var(--sage-deep); font-size:9px; font-style:normal; }.weather-consent.unavailable { cursor:default; opacity:.76; }.weather-days { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.weather-day { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr); gap:2px 8px; align-items:center; padding:12px 11px; border:1px solid var(--line); border-radius:17px; background:var(--control-bg); }.weather-icon { grid-row:1/3; width:32px; height:32px; display:grid; place-items:center; color:var(--sage-deep); }.weather-icon svg,.weather-alert-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }.weather-day>div { min-width:0; }.weather-day small,.weather-day b,.weather-day em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.weather-day small { color:var(--muted); font-size:8px; }.weather-day b { margin-top:2px; font-size:11px; font-weight:500; }.weather-day em { margin-top:3px; color:var(--muted); font-size:7.5px; font-style:normal; }.weather-temperature { grid-column:2; font:400 11px Georgia,serif; color:var(--ink); }.weather-alert { display:flex; align-items:flex-start; gap:10px; margin-top:8px; padding:11px 12px; border:1px solid rgba(216,170,113,.24); border-radius:16px; background:rgba(216,170,113,.1); }.weather-alert.rain { border-color:rgba(215,135,140,.25); background:var(--blush); }.weather-alert-icon { width:25px; height:25px; flex:0 0 auto; color:#b1844f; }.weather-alert.rain .weather-alert-icon { color:var(--rose-deep); }.weather-alert b { display:block; font-size:10px; font-weight:500; }.weather-alert p { margin:3px 0 0; color:var(--muted); font-size:8.5px; line-height:1.55; }.weather-overview+.care-card h2,.care-card .weather-overview~h2 { margin-top:19px; }
footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:42px 8px 18px; color:#879087; }.footer-actions { display:flex; align-items:center; gap:13px; }.footer-actions button { border:0; background:none; color:#657067; font-size:12px; cursor:pointer; }.footer-actions i { width:1px; height:13px; background:#aeb5ae; }.footer-actions+input { display:none; } footer>div:first-child b { display:block; color:#68756a; letter-spacing:.18em; font-weight:500; } footer>div:first-child span { font-size:9px; letter-spacing:.08em; } footer p { text-align:right; margin:0; font-size:9px; line-height:1.5; }
.mobile-nav { display:none; }
.record-mode-hint { margin:8px 0 0; color:var(--muted); font-size:10px; line-height:1.6; }.record-manager { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }.record-manager-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:9px; }.record-manager-head b { font-size:12px; font-weight:500; letter-spacing:.06em; }.record-manager-head small { color:var(--muted); font-size:9px; }.record-history-list { display:grid; gap:7px; max-height:160px; overflow:auto; padding-right:3px; }.record-history-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px 9px 13px; border:1px solid var(--line); border-radius:14px; background:#faf8f3; font:400 11px Georgia,"Songti SC",serif; }.record-history-item button { display:flex; align-items:center; gap:4px; border:0; border-radius:13px; padding:6px 9px; background:var(--blush); color:var(--rose-deep); cursor:pointer; font-size:10px; }.record-history-item svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.record-history-empty { margin:0; padding:12px; text-align:center; color:var(--muted); font-size:10px; border:1px dashed var(--line); border-radius:13px; }.modal-backdrop { position:fixed; inset:0; background:rgba(48,57,50,.3); backdrop-filter:blur(6px); z-index:30; display:grid; place-items:center; padding:20px; animation:fade .2s ease; }.record-modal { width:min(550px,100%); max-height:92vh; overflow:auto; background:#fffdf9; border-radius:30px; padding:36px; box-shadow:0 30px 100px rgba(45,55,47,.23); position:relative; animation:rise .3s ease; }.close { position:absolute; right:22px; top:18px; width:32px; height:32px; border:0; border-radius:50%; background:#f3eee8; cursor:pointer; font-size:19px; }.record-modal h2 { margin:7px 0 5px; font-size:23px; font-weight:500; }.date-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }.record-modal label,.record-modal legend { color:var(--muted); font-size:11px; letter-spacing:.06em; }.record-modal input,.record-modal textarea { display:block; width:100%; margin-top:8px; border:1px solid var(--line); border-radius:13px; padding:12px; background:#faf8f3; color:var(--ink); outline:none; }.record-modal input:focus,.record-modal textarea:focus { border-color:rgba(189,109,115,.45); }.record-modal fieldset { border:0; padding:0; margin:22px 0 0; }.choice-row { display:flex; gap:9px; margin-top:9px; }.choice-row.wrap { flex-wrap:wrap; }.choice-row button { border:1px solid var(--line); background:#faf8f3; padding:9px 13px; border-radius:18px; font-size:11px; cursor:pointer; }.choice-row button.active { background:var(--blush); color:var(--rose-deep); border-color:rgba(215,135,140,.28); }.note-label { display:block; margin-top:22px; }.record-modal textarea { resize:vertical; }.modal-actions { display:flex; align-items:center; gap:10px; margin-top:21px; }.save-button { flex:1; border:0; background:var(--ink); color:#fff; padding:13px; border-radius:21px; cursor:pointer; }.delete-button { border:1px solid rgba(189,109,115,.3); background:var(--blush); color:var(--rose-deep); padding:12px 17px; border-radius:21px; cursor:pointer; }.toast { position:fixed; z-index:50; left:50%; bottom:28px; transform:translateX(-50%); color:#fff; background:rgba(57,69,61,.93); padding:11px 18px; border-radius:22px; box-shadow:0 12px 30px rgba(45,55,47,.2); font-size:12px; animation:rise .25s ease; }
.modal-backdrop { background:var(--overlay-bg); }.record-modal { background:var(--modal-bg); color:var(--ink); border:1px solid var(--card-border); box-shadow:var(--modal-shadow); scrollbar-color:var(--scroll-thumb) var(--scroll-track); }.record-modal::-webkit-scrollbar,.record-history-list::-webkit-scrollbar { width:8px; }.record-modal::-webkit-scrollbar-track,.record-history-list::-webkit-scrollbar-track { background:var(--scroll-track); border-radius:8px; }.record-modal::-webkit-scrollbar-thumb,.record-history-list::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border-radius:8px; border:2px solid var(--scroll-track); }.record-modal .close { background:var(--control-hover); color:var(--ink); }.record-modal input,.record-modal textarea,.choice-row button,.record-history-item { background:var(--control-bg); color:var(--ink); }.record-modal input { color-scheme:inherit; accent-color:var(--rose); }.choice-row button.active,.record-history-item button,.delete-button { background:var(--danger-bg); color:var(--danger-fg); }.save-button { background:var(--primary-bg); color:var(--primary-fg); }.save-button:hover { background:var(--primary-hover); }.record-modal input:focus,.record-modal textarea:focus { border-color:var(--rose); box-shadow:0 0 0 3px rgba(215,135,140,.18); }
.ongoing-toggle { display:flex!important; align-items:flex-start; gap:11px; margin-top:14px; padding:12px 14px; border:1px solid rgba(215,135,140,.22); border-radius:15px; background:var(--blush); cursor:pointer; letter-spacing:0!important; }.ongoing-toggle input { flex:0 0 auto; width:17px!important; height:17px; margin:1px 0 0!important; padding:0!important; accent-color:var(--rose-deep); }.ongoing-toggle span { display:grid; gap:3px; }.ongoing-toggle b { color:var(--ink); font-size:11px; font-weight:600; }.ongoing-toggle small { color:var(--muted); font-size:9px; line-height:1.5; letter-spacing:0; }
.reminder-modal { width:min(420px,100%); padding:38px 34px 30px; border:1px solid var(--card-border); border-radius:30px; background:var(--modal-bg); color:var(--ink); box-shadow:var(--modal-shadow); position:relative; text-align:center; animation:rise .3s ease; }.reminder-modal .close { position:absolute; right:18px; top:16px; width:32px; height:32px; border:0; border-radius:50%; background:var(--control-hover); color:var(--ink); cursor:pointer; font-size:19px; }.reminder-flower { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 16px; border-radius:18px; background:linear-gradient(145deg,#f5d6d3,#fff0ed); color:var(--rose-deep); font:500 25px Georgia,"Songti SC",serif; box-shadow:0 10px 24px rgba(189,109,115,.12); }.reminder-modal h2 { margin:8px 0 10px; font-size:22px; font-weight:500; }.reminder-modal>p { margin:0 auto; max-width:320px; color:var(--muted); font-size:12px; line-height:1.8; }.reminder-actions { display:flex; gap:10px; margin-top:24px; }.reminder-actions button { flex:1; border:1px solid var(--line); border-radius:20px; padding:12px; background:var(--control-bg); color:var(--ink); cursor:pointer; }.reminder-actions button:last-child { border-color:transparent; background:var(--primary-bg); color:var(--primary-fg); }
@keyframes fade { from{opacity:0} } @keyframes rise { from{opacity:0;transform:translateY(10px)} }

@media (max-width:900px) {
  .topbar { height:72px; padding:0 20px; }.desktop-nav { display:none; }.content { width:min(100% - 30px,700px); padding:34px 0 110px; }.welcome-line { align-items:flex-start; }.welcome-line p { display:none; }.welcome-line h1 { font-size:24px; }.dashboard-grid,.lower-grid { grid-template-columns:1fr; }.hero-card { min-height:300px; padding:32px 27px; }.rhythm-card { padding:28px 25px; }.calendar-card { padding:24px 18px 15px; }.calendar-head { align-items:flex-start; flex-direction:column; }.legend { width:100%; justify-content:space-between; }.legend button { flex:1; padding:8px 4px; }.day { height:56px; }.ai-card { grid-template-columns:54px 1fr; padding:25px 22px; }.ai-seal { width:50px; height:50px; border-radius:17px; }.ai-button { grid-column:1/-1; width:100%; }.mobile-nav { display:flex; position:fixed; z-index:20; bottom:12px; left:50%; transform:translateX(-50%); width:min(calc(100% - 24px),560px); justify-content:space-around; background:rgba(255,253,249,.93); backdrop-filter:blur(17px); border:1px solid rgba(255,255,255,.8); border-radius:24px; box-shadow:0 15px 45px rgba(55,67,58,.16); padding:8px 6px calc(8px + env(safe-area-inset-bottom)); }.mobile-nav button { border:0; background:none; color:#8b948c; font-size:9px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 18px; cursor:pointer; }.mobile-nav button span { font-size:19px; line-height:1; }.mobile-nav button.active { color:var(--rose-deep); }.mobile-nav button.active span { transform:translateY(-1px); }.toast { bottom:92px; } footer { grid-template-columns:1fr auto; } footer p { grid-column:1/-1; text-align:left; }
}

@media (max-width:900px) { .compact-dashboard .hero-card { min-height:250px; } }
@media (max-width:560px) {
  .brand small { display:none; }.privacy-pill { font-size:10px; }.content { width:calc(100% - 24px); }.hero-card { align-items:flex-start; }.count strong { font-size:68px; }.cycle-orbit { width:94px; height:94px; right:25px; top:35px; }.cycle-orbit strong { font-size:24px; }.record-button { right:24px; bottom:27px; }.hero-card:after { right:100px; }.rhythm-list>div { grid-template-columns:42px 1fr; }.rhythm-list em { display:none; }.month-switcher { width:100%; justify-content:space-between; }.month-switcher h2 { font-size:19px; }.day { height:50px; border-radius:13px; }.day span { font-size:14px; }.day small { font-size:8px; }.week-row { padding-top:14px; }.date-fields { grid-template-columns:1fr; }.record-modal { padding:32px 22px; border-radius:25px; } footer>div:first-child { display:none; } footer { display:block; text-align:center; } footer p { text-align:center; margin-top:12px; }.footer-actions { justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
.hidden { display:none!important; }
.ai-button[disabled],.save-button[disabled] { cursor:wait; opacity:.65; }

.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; overflow:hidden; background:linear-gradient(90deg,rgba(249,245,237,.9),rgba(249,245,237,.68)),url('huaqi-garden.png') center/cover fixed; }
.login-shell:before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; background-image:radial-gradient(rgba(70,80,65,.18) .5px,transparent .5px); background-size:7px 7px; }
.login-card { width:min(430px,100%); padding:42px 44px 36px; border:1px solid rgba(255,255,255,.82); border-radius:32px; background:rgba(255,253,249,.91); backdrop-filter:blur(16px); box-shadow:0 28px 90px rgba(62,76,65,.16); position:relative; z-index:1; }
.login-card:after { content:"✿"; position:absolute; top:25px; right:31px; color:rgba(215,135,140,.14); font-size:58px; transform:rotate(14deg); }
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:34px; }
.login-brand b { display:block; font-size:21px; letter-spacing:.18em; font-weight:500; }
.login-brand small { display:block; margin-top:3px; color:var(--muted); font-size:10px; letter-spacing:.12em; }
.login-card h1 { font-size:28px; font-weight:500; letter-spacing:.1em; margin:8px 0 8px; }
.login-card>p { color:var(--muted); font-size:12px; margin:0 0 25px; }
.login-form label { display:block; color:var(--muted); font-size:11px; letter-spacing:.06em; margin-top:15px; }
.login-form input { display:block; width:100%; margin-top:8px; border:1px solid var(--line); border-radius:15px; padding:13px 14px; background:var(--control-bg); color:var(--ink); outline:none; transition:.2s ease; }
.login-form input:focus { border-color:rgba(189,109,115,.5); box-shadow:0 0 0 4px rgba(248,232,229,.65); }
.login-form button { width:100%; border:0; border-radius:22px; padding:13px; margin-top:25px; background:var(--ink); color:#fff; cursor:pointer; box-shadow:0 10px 25px rgba(57,69,61,.18); }
.login-form button:hover { background:#46534a; }
.login-error { border:1px solid rgba(189,109,115,.2); background:var(--blush); color:var(--rose-deep); border-radius:13px; padding:10px 12px; font-size:11px; margin-bottom:12px; }
.login-footnote { display:block; text-align:center; color:#9ba39b; font-size:9px; margin-top:17px; letter-spacing:.04em; }

@media (max-width:560px) {
  .login-card { padding:34px 25px 29px; border-radius:27px; }
  .login-card:after { font-size:45px; right:20px; }
  .top-actions { gap:3px; }
  .logout-form button { font-size:10px; }
}

.theme-toggle { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.55); color:var(--sage-deep); cursor:pointer; transition:transform .2s ease,background .2s ease; }
.theme-toggle:hover { transform:rotate(-8deg); }
.theme-toggle svg { width:17px; height:17px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.login-theme-toggle { position:fixed; z-index:5; top:22px; right:24px; }
.user-pill,.admin-link { white-space:nowrap; border:1px solid var(--line); border-radius:18px; padding:8px 11px; color:var(--muted); font-size:11px; text-decoration:none; background:rgba(255,255,255,.42); }
.admin-link { color:var(--sage-deep); }

.admin-shell { min-height:100vh; padding:40px 24px; background:linear-gradient(180deg,rgba(251,248,242,.88),rgba(247,243,235,.9)),url('huaqi-garden.png') center bottom/cover fixed; }
.admin-wrap { width:min(980px,100%); margin:0 auto; }
.admin-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:24px; }
.admin-head h1 { margin:7px 0 0; font-size:28px; font-weight:500; letter-spacing:.08em; }
.admin-head-actions { display:flex; align-items:center; gap:10px; }
.back-link { color:var(--sage-deep); text-decoration:none; font-size:12px; border:1px solid var(--line); background:rgba(255,255,255,.55); border-radius:20px; padding:9px 14px; }
.admin-grid { display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:start; }
.admin-card { border-radius:26px; padding:28px; }
.admin-card h2 { font-size:18px; font-weight:500; margin:4px 0 18px; }
.admin-form label { display:block; color:var(--muted); font-size:11px; margin:13px 0; }
.admin-form input,.admin-form select { width:100%; display:block; margin-top:7px; border:1px solid var(--line); border-radius:13px; padding:11px 12px; color:var(--ink); background:var(--control-bg); outline:none; }
.admin-form input:focus,.admin-form select:focus { border-color:rgba(189,109,115,.5); box-shadow:0 0 0 4px rgba(248,232,229,.55); }
.admin-form button,.user-action { border:0; border-radius:18px; padding:10px 14px; color:#fff; background:var(--ink); cursor:pointer; font-size:11px; }
.admin-form button { width:100%; margin-top:6px; }
.admin-divider { height:1px; background:var(--line); margin:26px 0; }
.admin-message { border-radius:13px; padding:10px 12px; margin:0 0 14px; font-size:11px; }
.admin-message.ok { background:#edf2e9; color:var(--sage-deep); }
.admin-message.error { background:var(--blush); color:var(--rose-deep); }
.users-table { width:100%; border-collapse:collapse; font-size:12px; }
.users-table th { color:var(--muted); font-weight:400; text-align:left; border-bottom:1px solid var(--line); padding:10px 8px; }
.users-table td { padding:13px 8px; border-bottom:1px solid var(--line); }
.role-badge,.status-badge { display:inline-block; padding:5px 8px; border-radius:12px; font-size:9px; background:var(--blush); color:var(--rose-deep); }
.status-badge { background:#edf2e9; color:var(--sage-deep); }
.status-badge.disabled { background:#eeeae3; color:var(--muted); }
.user-action { padding:7px 10px; background:transparent; color:var(--rose-deep); border:1px solid rgba(189,109,115,.25); }

html[data-theme="dark"] { color-scheme:dark; --ink:#e7e1d7; --muted:#aaa99f; --rose:#df969d; --rose-deep:#edaab0; --blush:#4a3236; --sage:#9eb29b; --sage-deep:#b5c8b1; --paper:#252925; --line:rgba(226,222,208,.12); --shadow:0 24px 70px rgba(0,0,0,.32); --page-bg:#171b18; --card-bg:rgba(36,41,36,.92); --card-border:rgba(255,255,255,.07); --modal-bg:#252a25; --modal-shadow:0 32px 110px rgba(0,0,0,.5); --control-bg:#1b201c; --control-hover:#30352f; --overlay-bg:rgba(5,8,6,.72); --primary-bg:#536e5b; --primary-hover:#607c68; --primary-fg:#fff; --danger-bg:#4a3236; --danger-fg:#f0b4ba; --scroll-thumb:#5d635d; --scroll-track:#202420; }
html[data-theme="dark"] body { background:#171b18; }
html[data-theme="dark"] .app-shell { background:linear-gradient(180deg,rgba(20,25,21,.88),rgba(18,22,19,.94)),url('huaqi-garden.png') center bottom/cover fixed; }
html[data-theme="dark"] .app-shell:before,html[data-theme="dark"] .login-shell:before { opacity:.13; mix-blend-mode:screen; }
html[data-theme="dark"] .topbar { background:rgba(27,32,28,.83); }
html[data-theme="dark"] .brand-mark,html[data-theme="dark"] .privacy-pill,html[data-theme="dark"] .theme-toggle,html[data-theme="dark"] .user-pill,html[data-theme="dark"] .admin-link,html[data-theme="dark"] .back-link { background:rgba(44,50,45,.82); }
html[data-theme="dark"] .desktop-nav button { color:#aaa99f; }
html[data-theme="dark"] .paper-card,html[data-theme="dark"] .admin-card { background:rgba(36,41,36,.9); border-color:rgba(255,255,255,.06); }
html[data-theme="dark"] .cycle-orbit { background:radial-gradient(circle,#282d28 55%,transparent 57%),conic-gradient(var(--rose) 0 38%,#514244 38% 65%,var(--sage) 65% 92%,#454842 92%); box-shadow:0 8px 30px rgba(0,0,0,.28); }
html[data-theme="dark"] .rhythm-icon.green,html[data-theme="dark"] .ai-button { background:#344036; }
html[data-theme="dark"] .rhythm-icon.gold { background:#493d2e; color:#ddbd8b; }
html[data-theme="dark"] .month-switcher button,html[data-theme="dark"] .legend,html[data-theme="dark"] .close { background:#30352f; }
html[data-theme="dark"] .legend button.active { background:#454b44; box-shadow:none; }
html[data-theme="dark"] .day:hover { background:#30352f; }
html[data-theme="dark"] .day.recorded:not(.muted) { background:linear-gradient(145deg,#4a3336,#3a2c2d); }
html[data-theme="dark"] .day.period:not(.muted) { background:rgba(74,51,54,.24); box-shadow:inset 0 0 0 1px rgba(237,170,176,.3); }
html[data-theme="dark"] .care-card blockquote,html[data-theme="dark"] .ai-content .ai-result { color:#c8c7bc; }
html[data-theme="dark"] .care-tools button { background:#30352f; }
html[data-theme="dark"] .care-location.active { background:#344036; color:var(--sage-deep); }
html[data-theme="dark"] .weather-consent { background:rgba(158,178,155,.08); border-color:rgba(181,200,177,.22); }
html[data-theme="dark"] .weather-day { background:var(--control-bg); }
html[data-theme="dark"] .weather-alert:not(.rain) { background:rgba(216,170,113,.09); }
html[data-theme="dark"] .footer-actions button,html[data-theme="dark"] footer>div:first-child b { color:#bebdb3; }
html[data-theme="dark"] .mobile-nav { background:rgba(31,36,31,.94); border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .modal-backdrop { background:var(--overlay-bg); }
html[data-theme="dark"] .record-modal { background:var(--modal-bg); color:var(--ink); border-color:var(--card-border); }
html[data-theme="dark"] .record-modal input,html[data-theme="dark"] .record-modal textarea,html[data-theme="dark"] .choice-row button,html[data-theme="dark"] .login-form input,html[data-theme="dark"] .admin-form input,html[data-theme="dark"] .admin-form select { background:var(--control-bg); color:var(--ink); }
html[data-theme="dark"] .login-shell { background:linear-gradient(90deg,rgba(19,23,20,.91),rgba(19,23,20,.82)),url('huaqi-garden.png') center/cover fixed; }
html[data-theme="dark"] .login-card { background:rgba(34,39,34,.94); border-color:rgba(255,255,255,.07); box-shadow:0 28px 90px rgba(0,0,0,.45); }
html[data-theme="dark"] .admin-shell { background:linear-gradient(180deg,rgba(20,25,21,.9),rgba(18,22,19,.95)),url('huaqi-garden.png') center bottom/cover fixed; }
html[data-theme="dark"] .status-badge { background:#344036; }
html[data-theme="dark"] .status-badge.disabled { background:#363936; }
html[data-theme="dark"] .record-button { background:linear-gradient(145deg,#9b626a,#805059); color:#fff; box-shadow:0 11px 28px rgba(0,0,0,.3); }
html[data-theme="dark"] .record-button:hover { background:linear-gradient(145deg,#a0656d,#8b565e); }
html[data-theme="dark"] .save-button,html[data-theme="dark"] .login-form button,html[data-theme="dark"] .admin-form button { background:var(--primary-bg); color:var(--primary-fg); box-shadow:0 10px 26px rgba(0,0,0,.26); }
html[data-theme="dark"] .save-button:hover,html[data-theme="dark"] .login-form button:hover,html[data-theme="dark"] .admin-form button:hover { background:var(--primary-hover); }
html[data-theme="dark"] .delete-button { background:var(--danger-bg); color:var(--danger-fg); border-color:rgba(237,170,176,.25); }
html[data-theme="dark"] .record-history-item { background:var(--control-bg); }
html[data-theme="dark"] .record-history-item button { background:var(--danger-bg); color:var(--danger-fg); }

@media (max-width:900px) {
  .admin-grid { grid-template-columns:1fr; }
  .user-pill { display:none; }
  .admin-link { padding:7px 9px; font-size:10px; }
}
@media (max-width:560px) {
  .theme-toggle { width:32px; height:32px; flex-basis:32px; }
  .privacy-pill { padding:8px 9px; }
  .admin-link { display:none; }
  .admin-shell { padding:24px 14px; }
  .admin-head { align-items:flex-start; }
  .admin-head-actions { flex-wrap:wrap; justify-content:flex-end; }
  .admin-card { padding:20px 16px; overflow-x:auto; }
  .users-table { min-width:520px; }
}