/* Life OS — «светлый изумруд», уровень «Мягкий». Все визуальные значения — переменные. */
@view-transition { navigation: auto; }

:root {
  --bg: #e6efe9;
  --bg-glow: #bfe6cf;
  --bg-glow-2: #d3dff0;
  --text: #13261f;
  --muted: #5b7369;
  --faint: #93a89f;
  --tile: #fbfdfcc7;
  --tile-hi: #fffffff0;
  --surface: #fbfdfc;
  --soft: #eef5f1;
  --line: #0f3d3214;
  --accent: #10b981;
  --accent-ink: #047857;
  --grad: linear-gradient(135deg, #10b981, #84cc16);
  --glow: #10b98140;
  --on-accent: #ffffff;
  --bad: #e5484d;
  --warn: #d97706;
  --shadow: 0 1px 2px #0f3d320a, 0 8px 28px #0f3d3212;
  --shadow-hi: 0 2px 4px #0f3d320d, 0 14px 36px #0f3d321a;
  --radius: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fast: 160ms;
  --mid: 260ms;
  --font: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(1100px 650px at 0% -5%, var(--bg-glow) 0, transparent 60%),
    radial-gradient(800px 560px at 105% 100%, var(--bg-glow-2) 0, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
svg.lucide { width: 20px; height: 20px; stroke-width: 1.75; flex: none; }
.muted { color: var(--muted); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 80px 1fr 340px; min-height: 100vh; }
.main { padding: 34px 30px 40px; min-width: 0; }

/* side rail */
.rail { padding: 22px 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: sticky; top: 0; height: 100vh; z-index: 50; }
.logo { width: 44px; height: 44px; border-radius: 14px; background: var(--grad); display: grid; place-items: center;
  color: var(--on-accent); font-weight: 800; margin-bottom: 14px; box-shadow: 0 8px 24px var(--glow); }
.nav { position: relative; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--muted);
  transition: background var(--fast) var(--ease), color var(--fast), transform var(--fast) var(--ease); }
.nav:hover { background: var(--tile-hi); color: var(--text); transform: translateY(-1px); }
.nav.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.nav.on::before { content: ""; position: absolute; left: -17px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
  background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.nav .tip { position: absolute; left: 58px; white-space: nowrap; background: var(--surface); border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 8px; font-size: 12px; color: var(--text); opacity: 0; transform: translateX(-4px);
  pointer-events: none; transition: var(--fast) var(--ease); z-index: 60; box-shadow: var(--shadow); }
.nav:hover .tip { opacity: 1; transform: none; }
.rail .sep { width: 26px; height: 1px; background: var(--line); margin: 6px 0; }
.rail form { margin-top: auto; }
.rail form button { width: 46px; height: 46px; border-radius: 15px; border: 0; background: none; color: var(--faint); cursor: pointer; display: grid; place-items: center; }
.rail form button:hover { color: var(--bad); background: var(--tile-hi); }

/* project badge */
.pbadge { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.pbadge svg.lucide { width: 15px; height: 15px; }
.pbadge.lg { width: 44px; height: 44px; border-radius: 14px; }
.pbadge.lg svg.lucide { width: 22px; height: 22px; }
.ptag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ptag i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

/* ---------- headings ---------- */
.day { font-size: 42px; font-weight: 800; letter-spacing: -.035em; margin: 0; line-height: 1.05; }
.sub { color: var(--muted); margin: 6px 0 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill { background: var(--tile-hi); border: 1px solid var(--line); padding: 3px 10px; border-radius: 20px; font-size: 13px; color: var(--text); }
.page-h { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.page-h h1 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; margin: 0; }

/* ---------- tiles ---------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.grid > * { min-width: 0; }
.tile { background: var(--tile); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  backdrop-filter: blur(18px); box-shadow: var(--shadow);
  transition: transform var(--mid) var(--ease), background var(--mid), box-shadow var(--mid); }
.tile:hover { transform: translateY(-2px); background: var(--tile-hi); box-shadow: var(--shadow-hi); }
.tile.flat:hover { transform: none; }
.w2 { grid-column: span 2; } .w3 { grid-column: span 3; } .w4 { grid-column: span 4; }
.tile-h { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.tile-h svg.lucide { width: 16px; height: 16px; }
.tile-h .right { margin-left: auto; }
.big { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.big.bad { color: var(--bad); }
.lbl { color: var(--muted); font-size: 13px; margin-top: 6px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.section-h { font-size: 13px; color: var(--muted); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }

/* ---------- quick entry ---------- */
.entry { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.entry > svg.lucide { color: var(--accent); }
.entry input { flex: 1; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 16px; min-width: 0; }
.entry input::placeholder { color: var(--faint); }
.entry kbd { font: 12px var(--font); color: var(--faint); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.tile:has(.entry input:focus) { border-color: #10b98166; box-shadow: 0 0 0 4px #10b9811f, var(--shadow); }
.parsed { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 14px; }
.parsed:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 5px 10px; font-size: 13px; animation: pop var(--mid) var(--ease) both; }
.chip svg.lucide { width: 14px; height: 14px; color: var(--accent); }
.chip.fail svg.lucide { color: var(--warn); }
.chip:nth-child(2) { animation-delay: 50ms; } .chip:nth-child(3) { animation-delay: 100ms; } .chip:nth-child(4) { animation-delay: 150ms; }

/* ---------- tasks ---------- */
.task { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; transition: background var(--fast); animation: fade-in var(--mid) var(--ease) both; }
.task:hover { background: #10b9810d; }
.check { width: 22px; height: 22px; border-radius: 50%; border: 1.75px solid var(--faint); display: grid; place-items: center;
  flex: none; position: relative; background: none; padding: 0; cursor: pointer; transition: border-color var(--fast); }
.check:hover { border-color: var(--accent); }
.check::after { content: ""; position: absolute; inset: -1.75px; border-radius: 50%; background: var(--grad); transform: scale(0);
  transition: transform var(--mid) var(--ease); }
.check svg.lucide { width: 13px; height: 13px; color: var(--on-accent); stroke-width: 3; position: relative; z-index: 1;
  opacity: 0; transform: scale(.5); transition: var(--mid) var(--ease) 60ms; }
.task.done .check { border-color: transparent; }
.task.done .check::after { transform: scale(1); }
.task.done .check svg.lucide { opacity: 1; transform: none; }
.task .body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.task .meta, .task .ptag { flex: none; }
.task .t { position: relative; display: inline; transition: color var(--mid);
  background: linear-gradient(var(--faint), var(--faint)) no-repeat 0 55% / 0 1.5px; }
.task.done .t { color: var(--faint); background-size: 100% 1.5px; transition: color var(--mid), background-size var(--mid) var(--ease); }
.task summary { list-style: none; cursor: pointer; }
.task summary::-webkit-details-marker { display: none; }
.task details[open] { padding-bottom: 6px; }
.meta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.meta svg.lucide { width: 14px; height: 14px; }
.meta.late { color: var(--bad); }
.icon-btn { width: 32px; height: 32px; border-radius: 10px; border: 0; background: none; color: var(--faint); display: grid; place-items: center;
  cursor: pointer; opacity: 0; transition: opacity var(--fast), background var(--fast), color var(--fast); }
.icon-btn svg.lucide { width: 17px; height: 17px; }
.task:hover .icon-btn, .icon-btn:focus-visible { opacity: 1; }
.icon-btn:hover { background: var(--soft); color: var(--text); }
.subtasks { margin: -4px 0 6px 34px; }
.task.leaving { animation: leave 300ms var(--ease) forwards; }
.empty { color: var(--faint); font-size: 14px; padding: 10px 8px; display: flex; align-items: center; gap: 8px; }

/* ---------- forms ---------- */
input, select, textarea, button { font: inherit; color: var(--text); }
.field, select, textarea, input[type=date], input[type=time], input[type=number], input[type=password], input[type=text].field {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; outline: 0;
  transition: border-color var(--fast), box-shadow var(--fast); }
.field:focus, select:focus, textarea:focus, input:focus { border-color: #10b98166; box-shadow: 0 0 0 3px #10b9811a; }
textarea { width: 100%; min-height: 120px; resize: vertical; line-height: 1.5; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row .grow { flex: 1; min-width: 160px; }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--grad); color: var(--on-accent); border: 0; border-radius: 12px;
  padding: 10px 16px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px var(--glow);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--glow); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: none; font-weight: 600; }
.btn.ghost:hover { background: var(--tile-hi); }
.btn.danger { background: var(--surface); color: var(--bad); border: 1px solid #e5484d33; box-shadow: none; }
.btn svg.lucide { width: 17px; height: 17px; }
.add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 8px 2px; }
.add > svg.lucide { flex: none; }
.add input[name=title] { flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 8px 0; font-size: 15px; }
.add input[name=title]::placeholder { color: var(--faint); }
.add .opt { font-size: 13px; padding: 6px 10px; display: none; }
.add:focus-within .opt { display: inline-block; animation: pop var(--fast) var(--ease) both; }
.add input[name=name] { flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 8px 0; font-size: 15px; }

/* pickers */
.swatches, .icons { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches label, .icons label { cursor: pointer; }
.swatches input, .icons input { display: none; }
.swatches span { display: block; width: 28px; height: 28px; border-radius: 9px; background: var(--c); border: 3px solid transparent;
  transition: transform var(--fast) var(--ease); }
.swatches input:checked + span { border-color: var(--surface); box-shadow: 0 0 0 2px var(--c); }
.swatches span:hover { transform: scale(1.08); }
.icons span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface);
  border: 1px solid var(--line); color: var(--muted); transition: var(--fast) var(--ease); }
.icons input:checked + span { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px #10b9811f; }
.icons span:hover { color: var(--text); }

/* ---------- projects ---------- */
.proj { display: flex; align-items: center; gap: 14px; padding: 6px 0; border-radius: 14px; }
.ring { --p: 0; width: 60px; height: 60px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); display: grid; place-items: center;
  transition: --p 1s var(--ease); }
.ring span { width: 47px; height: 47px; border-radius: 50%; background: var(--surface); display: grid; place-items: center;
  font-weight: 800; font-size: 13px; }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.proj b { display: block; font-size: 15px; }
.proj small { color: var(--muted); }
.bar { height: 8px; background: var(--soft); border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--grad); border-radius: 6px; width: 0; transition: width 1s var(--ease); }
.note { white-space: pre-wrap; background: var(--soft); border-radius: 14px; padding: 12px 14px; font-size: 14px; }

/* ---------- assistant ---------- */
.side { padding: 22px 22px 22px 0; position: sticky; top: 0; height: 100vh; }
.chat { height: 100%; background: var(--tile); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column;
  backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.chat-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.chat-h small { display: block; color: var(--muted); font-size: 12px; }
.chat-h .close { margin-left: auto; display: none; }
.avatar { width: 38px; height: 38px; border-radius: 12px; background: var(--grad); display: grid; place-items: center;
  color: var(--on-accent); font-weight: 800; position: relative; flex: none; }
.avatar::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 5px #10b98126; } }
.msgs { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.msg { max-width: 88%; background: var(--soft); border-radius: 16px 16px 16px 6px; padding: 10px 13px; font-size: 14px;
  white-space: pre-wrap; animation: pop var(--mid) var(--ease) both; }
.msg.user { align-self: flex-end; background: var(--grad); color: var(--on-accent); border-radius: 16px 16px 6px 16px; font-weight: 500; }
.msg .ch { display: inline-flex; vertical-align: middle; margin-left: 6px; opacity: .7; }
.msg .ch svg.lucide { width: 12px; height: 12px; }
.typing { display: none; gap: 4px; padding: 12px 14px; }
.typing.htmx-request { display: flex; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.send { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.send input { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; outline: 0; min-width: 0; }
.send button { width: 42px; border: 0; border-radius: 14px; background: var(--grad); color: var(--on-accent); display: grid; place-items: center;
  cursor: pointer; transition: transform var(--fast) var(--ease); }
.send button:active { transform: scale(.94); }
.send button:disabled { opacity: .5; }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login { width: 100%; max-width: 360px; text-align: center; padding: 30px; }
.login .logo { margin: 0 auto 16px; width: 56px; height: 56px; border-radius: 18px; font-size: 22px; }
.login h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.02em; }
.login input { width: 100%; margin: 18px 0 12px; }
.login .btn { width: 100%; justify-content: center; }

/* ---------- motion ---------- */
.rise { animation: rise 520ms var(--ease) both; }
.d1 { animation-delay: 40ms; } .d2 { animation-delay: 80ms; } .d3 { animation-delay: 120ms; } .d4 { animation-delay: 160ms; }
.d5 { animation-delay: 200ms; } .d6 { animation-delay: 240ms; } .d7 { animation-delay: 280ms; } .d8 { animation-delay: 320ms; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes leave { to { opacity: 0; transform: translateX(12px); height: 0; padding-top: 0; padding-bottom: 0; margin: 0; } }
::view-transition-old(root) { animation: 180ms var(--ease) both fade-out; }
::view-transition-new(root) { animation: 260ms var(--ease) both rise; }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- mobile ---------- */
.tabbar { display: none; }
@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }
  .side { display: none; position: fixed; inset: 0 0 86px 0; height: auto; padding: 12px; z-index: 40; }
  .side.open { display: block; animation: rise var(--mid) var(--ease) both; }
  .chat-h .close { display: grid; }
  .main { padding: 22px 16px 100px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .w2, .w3, .w4 { grid-column: span 2; }
  .day { font-size: 34px; }
  .tabbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; height: 62px; border-radius: 20px; z-index: 45;
    background: #fbfdfcd9; border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(20px);
    justify-content: space-around; align-items: center; }
  .tabbar a, .tabbar button { color: var(--muted); display: grid; place-items: center; gap: 2px; font-size: 10px; background: none; border: 0; cursor: pointer; }
  .tabbar .on { color: var(--accent); }
  .icon-btn { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- habits ---------- */
#new-habit:not([open]) { display: none; }
#new-habit summary { list-style: none; }
#new-habit summary::-webkit-details-marker { display: none; }
.grp { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin: 12px 8px 4px; }
.habit { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 14px; transition: background var(--fast); animation: fade-in var(--mid) var(--ease) both; }
.habit:hover { background: #10b9810d; }
.habit .nm { flex: 1; min-width: 0; font-weight: 600; }
.habit .nm small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.habit.frozen .nm { color: var(--muted); }
.hico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.tap { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--faint); display: grid; place-items: center; cursor: pointer; flex: none;
  background: none; color: transparent; transition: background var(--mid) var(--ease), border-color var(--mid), box-shadow var(--mid), transform var(--fast); }
.tap:active { transform: scale(.92); }
.tap svg.lucide { width: 16px; height: 16px; stroke-width: 3; }
.tap.on { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 4px 14px var(--glow); }
.qty { display: flex; align-items: center; gap: 6px; }
.qty button { width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; color: var(--muted); }
.qty button:hover { color: var(--text); border-color: var(--accent); }
.qty b { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.mini-ring { width: 30px; height: 30px; border-radius: 50%; flex: none; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--soft) 0); display: grid; place-items: center; }
.mini-ring span { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); }
.streak { color: var(--warn); display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.streak svg.lucide { width: 12px; height: 12px; }
.hrow { padding: 12px 0; border-bottom: 1px solid var(--line); }
.hrow:last-of-type { border: 0; }
.hrow .top { display: flex; align-items: center; gap: 10px; }
.hrow .top small { margin-left: auto; color: var(--muted); font-size: 12px; }
.hrow .top .icon-btn { opacity: .5; }
.chain { display: grid; grid-template-rows: repeat(7, 11px); grid-auto-flow: column; grid-auto-columns: 11px; gap: 3px; margin-top: 8px; overflow: hidden; }
.chain i, .legend i { border-radius: 3px; background: var(--soft); display: block; }
.chain i.off { opacity: .35; }
.chain i.fut { background: transparent; }
.l1 { background: color-mix(in srgb, var(--c, #10b981) 25%, white) !important; }
.l2 { background: color-mix(in srgb, var(--c, #10b981) 55%, white) !important; }
.l3 { background: var(--c, #10b981) !important; }
.fz { background: repeating-linear-gradient(135deg, #dbeafe, #dbeafe 3px, #fff 3px, #fff 6px) !important; }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); align-items: center; margin-top: 12px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 12px; height: 12px; }

/* ---------- calendar ---------- */
.cal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.cal-head h1 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.seg { display: flex; background: var(--soft); border-radius: 12px; padding: 3px; }
.seg a { padding: 7px 14px; border-radius: 9px; font-size: 13px; color: var(--muted); }
.seg a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }
.arrows { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.ib { width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--muted); }
.ib:hover { color: var(--text); }
.cal-day { display: grid; grid-template-columns: 1fr 290px; gap: 14px; align-items: start; }
.timeline { padding: 14px 14px 14px 0; }
.dgrid { display: grid; grid-template-columns: 58px 1fr; }
.labels { position: relative; }
.labels div { position: absolute; right: 10px; transform: translateY(-50%); font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.track { position: relative; border-left: 1px solid var(--line); }
.hr { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.hr.half { border-top: 1px dashed #0f3d320b; }
.ev { position: absolute; left: 8px; right: 12px; border-radius: 12px; padding: 6px 12px; font-size: 14px; overflow: hidden; cursor: pointer;
  display: flex; gap: 10px; align-items: baseline; line-height: 1.3; z-index: 2;
  background: color-mix(in srgb, var(--c) 14%, white); border-left: 4px solid var(--c); box-shadow: 0 1px 2px #0001;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast); animation: pop var(--mid) var(--ease) both; }
.ev:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.ev b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev small { color: var(--muted); white-space: nowrap; }
.ev.tall { flex-direction: column; gap: 2px; padding: 9px 12px; }
.ev.q { background: repeating-linear-gradient(135deg, #fff7ed, #fff7ed 8px, #ffedd5 8px, #ffedd5 16px); border-left-color: var(--warn); }
.ev.q small { color: var(--warn); }
.ev.travel { background: var(--soft); border-left: 4px dashed var(--faint); font-size: 12px; }
.ev.task-ev { left: 30%; background: var(--surface); border: 1px dashed #0f3d3233; border-left: 4px solid var(--c); align-items: center; cursor: default; }
.ev.task-ev svg.lucide { width: 15px; height: 15px; color: var(--muted); align-self: center; }
.ev.task-ev.done b { text-decoration: line-through; color: var(--faint); }
.free { position: absolute; left: 8px; right: 12px; border: 1.5px dashed #10b98166; border-radius: 12px; display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 12px; font-size: 13px; color: var(--accent-ink); background: #10b98108; cursor: pointer; z-index: 1; transition: background var(--fast); }
.free:hover { background: #10b98117; }
.free svg.lucide { width: 15px; height: 15px; }
.now { position: absolute; left: 0; right: 0; height: 2px; background: var(--bad); z-index: 5; pointer-events: none; }
.now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.now span { position: absolute; left: -56px; top: -9px; font-size: 11px; color: #fff; background: var(--bad); border-radius: 6px; padding: 1px 5px; }
.drop-hint { position: absolute; left: 8px; right: 12px; height: 26px; border-radius: 10px; background: #10b98126; border: 1.5px solid var(--accent);
  display: none; align-items: center; padding: 0 10px; font-size: 12px; color: var(--accent-ink); pointer-events: none; z-index: 6; }
.track.dragging .drop-hint { display: flex; }
.task.drag { cursor: grab; }
.task.drag:active { cursor: grabbing; }
.grip { color: var(--faint); display: grid; }
.grip svg.lucide { width: 15px; height: 15px; }
.stat { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); padding: 6px 0; }
.stat b { color: var(--text); text-align: right; }
.week { display: grid; grid-template-columns: 50px repeat(7, 1fr); }
.wh { text-align: center; padding: 6px 0 10px; font-size: 12px; color: var(--muted); border-radius: 12px; }
.wh:hover { background: var(--soft); }
.wh b { display: block; font-size: 20px; color: var(--text); width: 36px; margin: 2px auto 0; border-radius: 10px; }
.wh.today b { color: #fff; background: var(--accent); }
.wgrid div { height: var(--px); border-top: 1px solid var(--line); font-size: 11px; color: var(--faint); padding-right: 8px; text-align: right; }
.wcol { position: relative; border-left: 1px solid var(--line); transition: background var(--fast); }
.wcol:hover { background: #10b9810a; }
.wcol.lvl-light { background: linear-gradient(#bbf7d033, transparent 60%); }
.wcol.lvl-norm { background: linear-gradient(#6ee7b733, transparent 60%); }
.wcol.lvl-heavy { background: linear-gradient(#fca5a540, transparent 60%); }
.wev { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 3px 6px; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--c) 16%, white); border-left: 3px solid var(--c); color: var(--text); }
.wev.q { border-left-color: var(--warn); }
.load { display: flex; gap: 14px; margin-top: 14px; font-size: 12px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.load > span:not(.pill) { display: inline-flex; align-items: center; gap: 6px; }
.load i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.load i.lvl-light { background: #bbf7d0; } .load i.lvl-norm { background: #6ee7b7; } .load i.lvl-heavy { background: #fca5a5; }
.dialog { border: 0; border-radius: var(--radius); padding: 22px; width: min(460px, calc(100vw - 32px)); background: var(--surface); color: var(--text);
  box-shadow: 0 30px 80px #0f3d3240; }
.dialog[open] { animation: pop var(--mid) var(--ease) both; }
.dialog::backdrop { background: #13261f33; backdrop-filter: blur(3px); }
.daystrip { display: flex; flex-direction: column; gap: 6px; }
.daystrip a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, white);
  border-left: 3px solid var(--c); font-size: 14px; }
.daystrip small { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 82px; }
@media (max-width: 1000px) {
  .cal-day { grid-template-columns: 1fr; }
  .week { grid-template-columns: 34px repeat(7, 1fr); }
  .wev { font-size: 10px; padding: 2px 3px; }
  .arrows { margin-left: 0; }
}

/* ---------- month ---------- */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mh { text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 4px; }
.mcell { min-height: 112px; border-radius: 14px; padding: 8px; background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; overflow: hidden; transition: transform var(--fast) var(--ease), box-shadow var(--fast); }
.mcell:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.mcell.out { opacity: .45; }
.mcell.lvl-light { background: linear-gradient(#bbf7d026, var(--surface)); }
.mcell.lvl-norm { background: linear-gradient(#6ee7b733, var(--surface)); }
.mcell.lvl-heavy { background: linear-gradient(#fca5a540, var(--surface)); }
.mnum { font-weight: 700; font-size: 14px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; }
.mcell.today .mnum { background: var(--accent); color: #fff; }
.mev { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--c) 14%, white); border-left: 3px solid var(--c); }
.mev.q { border-left-color: var(--warn); }
.mev small { color: var(--muted); }
.mmore { font-size: 11px; color: var(--muted); padding-left: 6px; }
@media (max-width: 1000px) { .mcell { min-height: 64px; padding: 4px; } .mev { font-size: 10px; padding: 1px 3px; } .mev small { display: none; } }

/* ---------- weekday picker ---------- */
.weekdays { display: flex; gap: 6px; flex-wrap: wrap; }
.weekdays input { display: none; }
.weekdays span { display: grid; place-items: center; width: 42px; height: 36px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font-size: 13px; cursor: pointer; transition: var(--fast) var(--ease); }
.weekdays input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- budget ---------- */
.tile.hero { background: var(--grad); color: #fff; border: 0; box-shadow: 0 10px 30px var(--glow); }
.tile.hero .tile-h, .tile.hero .lbl, .tile.hero small { color: #ecfdf5; }
.big small { font-size: 18px; color: var(--muted); font-weight: 600; }
.qsum { font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.up { color: #047857; }
.donut-wrap { display: flex; gap: 20px; align-items: center; }
.donut { width: 170px; height: 170px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.donut span { width: 112px; height: 112px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; align-content: center;
  text-align: center; font-weight: 800; font-size: 16px; line-height: 1.15; }
.donut span small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.legend-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; flex: 1; min-width: 0; }
.legend-list div { display: flex; align-items: center; gap: 8px; }
.legend-list i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-list b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dbars { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 6px; }
.dbars div { flex: 1; border-radius: 5px 5px 2px 2px; background: #10b98155; transition: height .8s var(--ease); }
.dbars div.hi { background: var(--bad); }
.dbars div.today { background: var(--accent); }
.dbars div.future { background: var(--soft); }
.axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 6px; }
.limit { margin: 10px 0; }
.limit .top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.limit .top b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pbar { height: 8px; background: var(--soft); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.pbar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--grad); transition: width 1s var(--ease); }
.pbar i.warn { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.acc { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 14px; }
.acc .sum { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.calc label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin: 8px 0; }
.calc input { width: 120px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-align: right; background: var(--surface); }
.calc .res { background: var(--soft); border-radius: 14px; padding: 12px 14px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.calc .res b { font-size: 22px; display: block; color: var(--text); }
.op { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 12px; transition: background var(--fast); }
.op:hover { background: #10b9810d; }
.op .nm { flex: 1; min-width: 0; }
.op .nm small { display: block; color: var(--muted); font-size: 12px; }
.op .sum { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op:hover .icon-btn { opacity: 1; }
.op.dup { opacity: .45; }
.seg label span { display: block; padding: 7px 14px; border-radius: 9px; font-size: 13px; color: var(--muted); cursor: pointer; }
.seg label input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }
@media (max-width: 1000px) { .donut-wrap { flex-direction: column; align-items: stretch; } .donut { margin: 0 auto; } }

select.needed-review { border-color: #f59e0b; color: #b45309; }
select.needed-no { border-color: #ef4444; color: #b91c1c; }

.flash { display: flex; align-items: center; gap: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.flash svg.lucide { color: #ea580c; }

/* ---------- goals ---------- */
.goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.goal { display: flex; flex-direction: column; gap: 10px; }
.goal-top { display: flex; gap: 14px; align-items: center; }
.goal-title { flex: 1; min-width: 0; }
.goal-title b { display: block; font-size: 17px; }
.goal-title small { display: block; font-size: 12px; }
.goal-num { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.goal-num .muted { font-size: 14px; font-weight: 600; }
.state { font-size: 12px; padding: 4px 10px; border-radius: 20px; white-space: nowrap; background: var(--soft); color: var(--muted); }
.state-on_track, .state-done { background: #d1fae5; color: #047857; }
.state-behind, .state-overdue { background: #fee2e2; color: #b91c1c; }
.goal-meta { font-size: 13px; }
.spark { width: 100%; height: 54px; }
.spark-line { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-target { stroke: var(--c); stroke-opacity: .35; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.spark-dot { fill: var(--c); }
.goal-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.gstep { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 5px 10px; font-size: 13px; cursor: pointer; color: var(--text); }
.gstep svg.lucide { width: 14px; height: 14px; color: var(--muted); }
.gstep.done { color: var(--faint); text-decoration: line-through; }
.gstep.done svg.lucide { color: var(--accent); }
.goal-actions { gap: 10px; }
@media (max-width: 1000px) { .goals { grid-template-columns: 1fr; } }