:root {
  --bg: #FBF6EF; --card: #FFFFFF; --card2: #F4ECE2; --line: #EADFD2;
  --text: #4A3B2E; --muted: #8C7B6B; --faint: #B9AA9A;
  --feed: #E9B9A0; --feed-ink: #5A2E18; --feed-soft: #F6E1D5;
  --L: #E59A73; --R: #C98BA6;
  --sleep: #C9D8C5; --sleep-ink: #2F4A2C; --sleep-bar: #8FB08A;
  --med: #DCD3EE; --med-ink: #463A6B;
  --accent: #B5603A; --danger: #B3412E; --ok: #4F7F49;
  --now: #D9534F;
  --radius: 20px;
  --tabh: 58px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] { --bg:#16161A; --card:#222228; --card2:#2A2A31; --line:#33333C;
    --text:#E8E2D6; --muted:#9A948A; --faint:#6A665F;
    --feed:#3A2E1C; --feed-ink:#F2B866; --feed-soft:#2C251B; --L:#F2B866; --R:#E08E6D;
    --sleep:#1F2436; --sleep-ink:#9DB0F0; --sleep-bar:#6F84CF; --med:#2B2540; --med-ink:#C3B6F0;
    --accent:#F2B866; --danger:#F07C6A; --ok:#8CC784; --now:#F07C6A; color-scheme: dark; }
}
html[data-theme="dark"] { --bg:#16161A; --card:#222228; --card2:#2A2A31; --line:#33333C;
  --text:#E8E2D6; --muted:#9A948A; --faint:#6A665F;
  --feed:#3A2E1C; --feed-ink:#F2B866; --feed-soft:#2C251B; --L:#F2B866; --R:#E08E6D;
  --sleep:#1F2436; --sleep-ink:#9DB0F0; --sleep-bar:#6F84CF; --med:#2B2540; --med-ink:#C3B6F0;
  --accent:#F2B866; --danger:#F07C6A; --ok:#8CC784; --now:#F07C6A; color-scheme: dark; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
body { overscroll-behavior-y: none; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
input, select, textarea { font: inherit; font-size: 16px; color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; min-height: 44px; }
input[type="datetime-local"], input[type="date"] { -webkit-appearance: none; appearance: none; }
.num { font-variant-numeric: tabular-nums; }

#view { padding: calc(env(safe-area-inset-top) + 12px) 16px calc(var(--tabh) + env(safe-area-inset-bottom) + 24px); max-width: 560px; margin: 0 auto; }
#tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 10; }
#tabs button { flex: 1; height: var(--tabh); display: flex; align-items: center; justify-content: center; color: var(--faint); }
#tabs button.on { color: var(--accent); }
#tabs svg { width: 26px; height: 26px; }

.top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 40px; }
.top h1 { font-size: 22px; font-weight: 600; margin: 0; }
.top .age { color: var(--muted); font-size: 15px; }
.top .sp { flex: 1; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.sync { position: relative; }
.sync::after { content: ""; position: absolute; right: 7px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); border: 2px solid var(--bg); }
.sync.pending::after { background: #E0A33A; }
.sync.offline::after, .sync.auth::after { background: var(--danger); }

.card { background: var(--card); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.lbl { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.lbl svg { width: 16px; height: 16px; }
.big { font-size: 44px; font-weight: 600; letter-spacing: -1.5px; line-height: 1.05; }
.big small { font-size: 17px; font-weight: 500; letter-spacing: 0; margin-left: 2px; color: var(--muted); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 4px; background: var(--feed-soft); color: var(--feed-ink); font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.pill.sleep { background: var(--sleep); color: var(--sleep-ink); }
.pill.ghost { background: var(--card2); color: var(--muted); font-weight: 500; }
.side { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--L); }
.side.R { background: var(--R); }
html[data-theme="dark"] .side, html[data-theme="auto"] .side { color: #fff; }

.lr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.lrbtn { height: 116px; border-radius: 26px; background: var(--feed); color: var(--feed-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform .08s; position: relative; }
.lrbtn:active { transform: scale(.97); }
.lrbtn .s { font-size: 40px; font-weight: 700; line-height: 1; }
.lrbtn .t { font-size: 17px; font-weight: 600; min-height: 22px; }
.lrbtn .hint { position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 700; opacity: .7; }
.lrbtn.on { background: var(--feed-ink); color: var(--card); box-shadow: 0 0 0 4px var(--feed); }
.lrbtn.on .t::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 2px; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .2; } }

.sleepbtn { width: 100%; min-height: 72px; border-radius: 24px; background: var(--sleep); color: var(--sleep-ink); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 19px; font-weight: 600; margin-bottom: 12px; padding: 10px 16px; }
.sleepbtn svg { width: 26px; height: 26px; }
.sleepbtn.on { background: var(--sleep-ink); color: var(--card); }
.sleepbtn .sub { font-size: 13px; font-weight: 500; opacity: .75; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.chip { min-height: 36px; padding: 0 12px; border-radius: 99px; background: var(--card2); color: var(--text); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.chip.on { background: var(--feed-ink); color: var(--card); }
.chip.sl.on { background: var(--sleep-ink); }
.chip svg { width: 16px; height: 16px; }
.chip.warn { background: #F7D9A8; color: #6A4300; }
.stopbtn { min-height: 44px; padding: 0 18px; border-radius: 99px; background: var(--text); color: var(--card); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.stopbtn svg { width: 18px; height: 18px; }

.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.stat { background: var(--card); border-radius: 18px; padding: 12px; }
.stat .v { font-size: 22px; font-weight: 600; letter-spacing: -.5px; }
.stat .k { font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.stat .k svg { width: 14px; height: 14px; }

.meds { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.med { min-height: 40px; padding: 0 14px; border-radius: 99px; background: var(--card); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; border: 1.5px dashed var(--line); }
.med.done { background: var(--med); color: var(--med-ink); border-style: solid; border-color: transparent; }
.med svg { width: 18px; height: 18px; }

.list { background: var(--card); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; min-height: 52px; }
.item:last-child { border-bottom: 0; }
.item .ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--feed-soft); color: var(--feed-ink); }
.item .ic.sleep { background: var(--sleep); color: var(--sleep-ink); }
.item .ic.med { background: var(--med); color: var(--med-ink); }
.item .ic.star { background: #F6E7B8; color: #6C5300; }
.item .ic svg { width: 18px; height: 18px; }
.item .m { flex: 1; min-width: 0; }
.item .m b { font-weight: 600; }
.item .m div { font-size: 13px; color: var(--muted); }
.item .r { color: var(--muted); font-size: 14px; text-align: right; }
.empty { color: var(--faint); text-align: center; padding: 18px; font-size: 14px; }

.fab { position: fixed; right: 18px; bottom: calc(var(--tabh) + env(safe-area-inset-bottom) + 16px); width: 56px; height: 56px; border-radius: 50%; background: var(--text); color: var(--card); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.18); z-index: 9; }
.fab svg { width: 28px; height: 28px; }

h2 { font-size: 15px; font-weight: 600; color: var(--muted); margin: 20px 4px 8px; display: flex; align-items: center; gap: 6px; }
h2 svg { width: 18px; height: 18px; }

/* Sheet */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-wrap[hidden] { display: none; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.35); animation: fade .15s; }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--bg); border-radius: 24px 24px 0 0; padding: 14px 16px calc(env(safe-area-inset-bottom) + 18px); animation: up .2s ease-out; -webkit-overflow-scrolling: touch; }
@keyframes up { from { transform: translateY(40px); opacity: .6; } }
@keyframes fade { from { opacity: 0; } }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 10px; }
.sheet h3 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.field { margin: 12px 0; }
.field > label { display: block; font-size: 13px; color: var(--muted); margin: 0 2px 4px; }
.seg { display: flex; background: var(--card2); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; min-height: 40px; border-radius: 9px; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.segrow { display: grid; grid-template-columns: 80px minmax(0,1fr) 36px; grid-template-areas: "side s rm" "side e rm"; gap: 6px; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.segrow:last-child { border-bottom: 0; }
.segrow .sidesel { grid-area: side; align-self: stretch; flex-direction: column; }
.segrow [name=s] { grid-area: s; } .segrow [name=e] { grid-area: e; } .segrow > :last-child { grid-area: rm; }
.segrow input { padding: 8px 10px; font-size: 16px; min-height: 42px; min-width: 0; }
.segrow .seg button { min-height: 34px; }
.btns { display: flex; gap: 10px; margin-top: 16px; }
.btn { flex: 1; min-height: 50px; border-radius: 14px; background: var(--card2); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.primary { background: var(--text); color: var(--card); }
.btn.danger { color: var(--danger); flex: 0 0 56px; }
.err { color: var(--danger); font-size: 14px; margin-top: 8px; min-height: 0; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }

/* Toast */
.toast { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 10px); animation: drop .2s ease-out; background: var(--text); color: var(--card); border-radius: 99px; padding: 6px 6px 6px 16px; display: flex; align-items: center; gap: 8px; z-index: 60; font-size: 14px; font-weight: 600; max-width: calc(100% - 32px); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.toast[hidden] { display: none; }
.toast button { min-height: 34px; padding: 0 12px; border-radius: 99px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; gap: 4px; }
html[data-theme="dark"] .toast button { background: rgba(0,0,0,.12); }
.toast svg { width: 16px; height: 16px; }

/* Kalender */
.calwrap { position: relative; height: calc(100vh - 140px - var(--tabh) - env(safe-area-inset-bottom) - env(safe-area-inset-top)); height: calc(100dvh - 140px - var(--tabh) - env(safe-area-inset-bottom) - env(safe-area-inset-top)); overflow: auto; background: var(--card); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.cal { display: flex; position: relative; }
.cal .hours { position: sticky; left: 0; z-index: 3; background: var(--card); width: 30px; flex: none; }
.cal .hours div { position: absolute; right: 4px; font-size: 10px; color: var(--faint); transform: translateY(-6px); }
.cal .col { width: 44px; flex: none; position: relative; border-left: 1px solid var(--line); }
.cal .col.today { background: color-mix(in srgb, var(--feed-soft) 45%, transparent); }
.cal .head { position: sticky; top: 0; z-index: 2; background: var(--card); height: 38px; text-align: center; font-size: 11px; color: var(--muted); line-height: 1.2; padding-top: 4px; border-bottom: 1px solid var(--line); }
.cal .head b { display: block; font-size: 14px; color: var(--text); }
.cal .hours .head { position: sticky; top: 0; }
.cal .grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); }
.cal .blk { position: absolute; left: 3px; right: 3px; border-radius: 4px; min-height: 3px; }
.cal .blk.sleep { background: var(--sleep-bar); opacity: .85; left: 6px; right: 6px; }
.cal .blk.L { background: var(--L); }
.cal .blk.R { background: var(--R); }
.cal .blk.feed { z-index: 1; left: 12px; right: 12px; }
.cal .nowline { pointer-events: none; position: absolute; left: 0; right: 0; height: 2px; background: var(--now); z-index: 2; }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); margin: 8px 4px 0; align-items: center; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

/* Charts */
.chart { width: 100%; height: auto; display: block; }
.chart text { font-size: 10px; fill: var(--muted); stroke: none; }
.chart .ax { stroke: var(--line); stroke-width: 1; }

/* Milestones */
.ms .item .r { font-size: 12px; }
.ms .done .m b { color: var(--text); }
.ms .todo .ic { background: var(--card2); color: var(--faint); }
.ms .soon .ic { background: #F6E7B8; color: #6C5300; }

/* Statistik */
.funstat { width: 100%; text-align: left; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-bottom: 1px solid var(--line); }
.funstat:last-child { border-bottom: 0; }
.funstat .e { font-size: 26px; line-height: 1; width: 34px; text-align: center; }
.funstat .v { font-size: 20px; font-weight: 600; }
.funstat .k { font-size: 13px; color: var(--muted); }
.funstat .c { font-size: 14px; margin-top: 2px; }

/* Login */
.login { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; max-width: 340px; margin: 0 auto; }
.login .logo { font-size: 56px; text-align: center; }
.banner { background: var(--feed-soft); color: var(--feed-ink); border-radius: 16px; padding: 10px 14px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; }
.banner button { padding: 6px 12px; background: var(--card); border-radius: 99px; }
@keyframes drop { from { transform: translate(-50%, -20px); opacity: 0; } }
.addbtn { background: var(--text); color: var(--card); }
.chart rect, .chart circle[stroke="none"] { stroke: none; }
h2.between { justify-content: space-between; } h2 .chip { min-height: 30px; font-size: 13px; }