/* ============================================================================
   Life — design system. Dark-first, no external assets (system type stack,
   hand-rolled SVG charts, inline icons).
   ========================================================================= */

:root {
  --bg:        #0a0b11;
  --bg-2:      #0e1017;
  --surface:   #14161f;
  --surface-2: #1b1e2a;
  --surface-3: #232739;
  --border:        rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.17);
  --text:      #f2f4fa;
  --text-dim:  #adb4c8;
  --text-mute: #7c849b;

  --accent:    #7c6cff;
  --accent-2:  #22d3ee;
  --accent-soft: rgba(124,108,255,.14);

  --good: #34d399;
  --warn: #fbbf24;
  --bad:  #fb7185;
  --info: #60a5fa;

  --radius:    16px;
  --radius-sm: 11px;
  --radius-xs: 8px;
  --shadow:    0 1px 0 rgba(255,255,255,.05) inset, 0 20px 40px -26px rgba(0,0,0,.9);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -32px rgba(0,0,0,.95);

  --sidebar-w: 244px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 620; letter-spacing: -.022em; line-height: 1.15; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-2); text-decoration: none; }
::selection { background: rgba(124,108,255,.35); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: content-box; }

/* ---------------- ambient background ---------------- */
.aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.aurora::before, .aurora::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .30;
}
.aurora::before {
  width: 720px; height: 720px; top: -300px; left: -160px;
  background: radial-gradient(circle at 50% 50%, rgba(124,108,255,.32), transparent 68%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.aurora::after {
  width: 640px; height: 640px; top: 22%; right: -240px;
  background: radial-gradient(circle at 50% 50%, rgba(34,211,238,.18), transparent 68%);
  animation: drift2 32s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(90px, 70px, 0) scale(1.12); } }
@keyframes drift2 { to { transform: translate3d(-70px, 50px, 0) scale(1.08); } }

/* ---------------- layout ---------------- */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px;
  padding: 22px 16px 18px; border-right: 1px solid var(--border);
  background: linear-gradient(180deg, #12141d, #0c0e15);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 2px; }
.brand-mark { display: grid; place-items: center; filter: drop-shadow(0 6px 14px rgba(124,108,255,.35)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 17px; letter-spacing: -.03em; }
.brand-text small { color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-dim); cursor: pointer; text-align: left;
  font-size: 14.5px; font-weight: 500; transition: background .16s, color .16s, transform .16s;
}
.nav-item svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav-item:hover { background: rgba(255,255,255,.045); color: var(--text); }
.nav-item.active {
  background: linear-gradient(100deg, rgba(124,108,255,.22), rgba(34,211,238,.08));
  color: #fff; box-shadow: inset 0 0 0 1px rgba(124,108,255,.28);
}
.nav-item.active svg { opacity: 1; }
.nav-item .nav-badge {
  margin-left: auto; font-size: 11.5px; font-weight: 650; padding: 1px 7px; border-radius: 20px;
  background: rgba(255,255,255,.1); color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.nav-item.active .nav-badge { background: rgba(0,0,0,.28); color: #dfe2ee; }
.nav-badge.is-alert { background: rgba(251,113,133,.2); color: #ffc2cc; }

.side-stats { margin-top: auto; display: grid; gap: 7px; padding: 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); }
.side-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.side-stat span { color: var(--text-mute); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.side-stat b { font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.side-stat b.bad { color: var(--bad); }
.side-stat b.good { color: var(--good); }

.side-foot { display: flex; flex-direction: column; gap: 2px; }
.ghost-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border: 0; border-radius: var(--radius-xs); background: transparent;
  color: var(--text-mute); font-size: 13px; cursor: pointer; transition: background .14s, color .14s;
}
.ghost-btn:hover { background: rgba(255,255,255,.05); color: var(--text); }
kbd {
  font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 5px;
  background: rgba(255,255,255,.07); border: 1px solid var(--border-strong); color: var(--text-dim);
}

.main { min-width: 0; display: flex; flex-direction: column; padding: 20px 26px 40px; }

/* ---------------- topbar ---------------- */
.topbar { display: flex; align-items: center; gap: 16px; padding: 6px 0 16px; }
.topbar-titles { min-width: 0; }
.topbar-titles h1 { font-size: 24px; }
.topbar-titles p { color: var(--text-mute); font-size: 13px; margin-top: 3px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.search-wrap { position: relative; }
.search-wrap input {
  width: 250px; padding: 10px 12px 10px 34px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color .15s, background .15s, width .2s;
}
.search-wrap input::placeholder { color: var(--text-mute); }
.search-wrap input:focus { outline: none; border-color: rgba(124,108,255,.55); background: rgba(124,108,255,.07); width: 290px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px;
  border: 1.9px solid var(--text-mute); border-radius: 50%; pointer-events: none; }
.search-icon::after { content: ""; position: absolute; right: -5px; bottom: -3px; width: 7px; height: 1.9px;
  background: var(--text-mute); transform: rotate(45deg); border-radius: 2px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  cursor: pointer; font-size: 14px; font-weight: 550; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .2s;
}
.btn:hover { background: rgba(255,255,255,.09); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #6a5cff 55%, #4f7bff);
  border-color: transparent; color: #fff;
  box-shadow: 0 10px 26px -12px rgba(124,108,255,.85), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { box-shadow: 0 14px 32px -12px rgba(124,108,255,.95), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { background: rgba(255,255,255,.06); color: var(--text); }
.btn-block { width: 100%; justify-content: center; padding: 12px; }
.btn-danger { border-color: rgba(251,113,133,.4); color: #ffb1bf; background: rgba(251,113,133,.1); }
.btn-danger:hover { background: rgba(251,113,133,.18); }
.btn.is-busy { opacity: .7; pointer-events: none; }
.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text-dim); cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,.08); color: var(--text); }

/* ---------------- quick add ---------------- */
.quickadd { margin-bottom: 20px; }
.qa-bar {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px;
  border-radius: 14px; border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow); transition: border-color .18s, box-shadow .2s;
}
.qa-bar:focus-within { border-color: rgba(124,108,255,.5); box-shadow: 0 0 0 4px rgba(124,108,255,.1), var(--shadow); }
.qa-plus { color: var(--accent); font-size: 19px; line-height: 1; }
.qa-bar input { flex: 1; border: 0; background: transparent; padding: 9px 2px; outline: none; font-size: 15px; }
.qa-bar input::placeholder { color: var(--text-mute); }
.qa-submit { padding: 8px 14px; }
.qa-preview { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 4px 0; min-height: 0; }
.qa-preview:empty { display: none; }
.qa-chip {
  font-size: 12px; padding: 3px 9px; border-radius: 20px; font-weight: 560;
  background: rgba(124,108,255,.16); border: 1px solid rgba(124,108,255,.3); color: #cfc9ff;
  animation: pop .18s ease both;
}
.qa-chip.cat { background: rgba(34,211,238,.13); border-color: rgba(34,211,238,.28); color: #a8ecf7; }
.qa-chip.prio-high { background: rgba(251,113,133,.16); border-color: rgba(251,113,133,.34); color: #ffc2cc; }
.qa-chip.prio-medium { background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.3); color: #ffe0a3; }
.qa-chip.prio-low { background: rgba(96,165,250,.14); border-color: rgba(96,165,250,.3); color: #c0daff; }
.qa-hint { font-size: 12px; color: var(--text-mute); padding: 3px 9px; }

/* ---------------- cards ---------------- */
.card {
  border-radius: var(--radius); border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
}
.card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 16px 18px 0; }
.card-head h3 { font-size: 14.5px; }
.card-head .card-sub { color: var(--text-mute); font-size: 12.5px; }
.card-head .spacer { margin-left: auto; }
.card-body { padding: 14px 18px 18px; }

/* ---------------- stat tiles ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px; }
.stat {
  position: relative; overflow: hidden; padding: 16px 17px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-3), var(--surface));
  box-shadow: var(--shadow); transition: transform .18s, border-color .18s;
}
.stat:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.stat::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, var(--tint, rgba(124,108,255,.3)), transparent 70%); opacity: .5;
}
.stat-label { display: flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: 12px;
  text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
.stat-value { margin-top: 9px; color: #fff; font-size: 34px; font-weight: 660; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: 1; }
.stat-foot { margin-top: 7px; font-size: 12.5px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.trend-up { color: var(--good); } .trend-down { color: var(--bad); }

/* ---------------- charts ---------------- */
.chart-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.bar-row { display: grid; grid-template-columns: 58px 1fr 34px; align-items: center; gap: 10px; padding: 5px 0; }
.bar-day { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.bar-track { height: 9px; border-radius: 20px; background: rgba(255,255,255,.09); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: left; animation: grow .6s cubic-bezier(.2,.7,.3,1) both; }
.bar-count { font-size: 12.5px; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }

.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut-legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.donut-legend .row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.donut-legend .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.donut-legend .name { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend .n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }

@keyframes grow { from { transform: scaleX(0); } }
@keyframes pop { from { opacity: 0; transform: translateY(3px) scale(.96); } }

/* ---------------- columns / lists ---------------- */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }

.list { display: flex; flex-direction: column; gap: 8px; }
.list:empty::after { content: "Nothing here."; color: var(--text-mute); font-size: 13.5px; padding: 10px 2px; }

.ticket {
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 13px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  cursor: pointer; transition: transform .14s, border-color .14s, background .14s, box-shadow .18s;
}
.ticket:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: 0 12px 26px -18px rgba(0,0,0,.9); }
.ticket.dragging { opacity: .45; }
.ticket.done { opacity: .58; }
.ticket.done .t-title { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.ticket.is-example { border-style: dashed; }
.ticket.is-overdue { box-shadow: inset 3px 0 0 -1px var(--bad); }

.check {
  flex: none; width: 21px; height: 21px; margin-top: 1px; border-radius: 7px; cursor: pointer;
  border: 1.7px solid var(--border-strong); background: rgba(0,0,0,.25); display: grid; place-items: center;
  transition: background .15s, border-color .15s, transform .1s;
}
.check:hover { border-color: var(--accent); transform: scale(1.06); }
.check svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: opacity .14s, transform .14s; }
.ticket.done .check { background: linear-gradient(135deg, var(--good), #10b981); border-color: transparent; }
.ticket.done .check svg { opacity: 1; transform: scale(1); }
.check[data-priority="high"] { border-color: rgba(251,113,133,.7); }
.check[data-priority="medium"] { border-color: rgba(251,191,36,.6); }

.t-main { flex: 1; min-width: 0; }
.t-title { font-size: 14.5px; font-weight: 550; letter-spacing: -.01em; overflow-wrap: anywhere; }
.t-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 6px; }
.t-snip { color: var(--text-mute); font-size: 12.5px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 560;
  padding: 2.5px 8px; border-radius: 20px; border: 1px solid transparent; white-space: nowrap;
  background: rgba(255,255,255,.09); color: var(--text-dim);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.cat { background: color-mix(in srgb, var(--c) 16%, transparent); border-color: color-mix(in srgb, var(--c) 34%, transparent); color: var(--c); }
.chip.prio-high { background: rgba(251,113,133,.15); border-color: rgba(251,113,133,.34); color: #ffb3c0; }
.chip.prio-medium { background: rgba(251,191,36,.13); border-color: rgba(251,191,36,.3); color: #ffdb8f; }
.chip.prio-low { background: rgba(96,165,250,.13); border-color: rgba(96,165,250,.3); color: #b3d1ff; }
.chip.status-doing { background: rgba(167,139,250,.15); border-color: rgba(167,139,250,.32); color: #cdbcff; }
.chip.status-waiting { background: rgba(251,191,36,.13); border-color: rgba(251,191,36,.3); color: #ffdb8f; }
.chip.status-done { background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.3); color: #93e9c6; }
.chip.status-inbox { background: rgba(153,160,181,.14); border-color: rgba(153,160,181,.28); }
.chip.due { background: rgba(255,255,255,.05); }
.chip.due.overdue { background: rgba(251,113,133,.15); border-color: rgba(251,113,133,.34); color: #ffb3c0; }
.chip.due.today { background: rgba(124,108,255,.16); border-color: rgba(124,108,255,.34); color: #cfc9ff; }
.chip.tag { background: rgba(255,255,255,.045); color: var(--text-mute); }
.chip.recur { background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.26); color: #a8ecf7; }

.t-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.t-grip { color: var(--text-mute); font-size: 15px; line-height: 1; cursor: grab; padding: 2px 4px; user-select: none; }
.t-grip:active { cursor: grabbing; }
.t-del { border: 0; background: transparent; color: var(--text-mute); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; opacity: 0; }
.ticket:hover .t-del { opacity: 1; }
.t-del:hover { color: var(--bad); background: rgba(251,113,133,.12); }
@media (hover: none) { .t-del { opacity: .6; } }

/* ---------------- view toolbar ---------------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); }
.seg button {
  border: 0; background: transparent; color: var(--text-dim); padding: 6px 12px; border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 550; transition: background .15s, color .15s;
}
.seg button:hover { color: var(--text); }
.seg button.active { background: rgba(124,108,255,.24); color: #fff; box-shadow: inset 0 0 0 1px rgba(124,108,255,.3); }
.toolbar .spacer { margin-left: auto; }
.select {
  padding: 8px 11px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text-dim); font-size: 13.5px; cursor: pointer;
}
.select:focus { outline: none; border-color: rgba(124,108,255,.5); }
.count-pill { font-size: 12.5px; color: var(--text-mute); font-variant-numeric: tabular-nums; }

/* ---------------- calendar ---------------- */
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.cal-head div { text-align: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-mute); font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.day {
  min-height: 104px; min-width: 0; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); display: flex; flex-direction: column; gap: 5px;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.day.dim { opacity: .38; }
.day.today { border-color: rgba(124,108,255,.5); background: rgba(124,108,255,.07); box-shadow: 0 0 0 1px rgba(124,108,255,.16); }
.day.drop-target { border-color: var(--accent-2); background: rgba(34,211,238,.1); box-shadow: 0 0 0 3px rgba(34,211,238,.14); }
.day-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-dim); }
.day-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.day.today .day-num { color: #cfc9ff; }
.day-weekday { display: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); }
.day-tickets { display: flex; flex-direction: column; gap: 4px; overflow: hidden; min-width: 0; }
.cal-chip {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 7px; border-radius: 7px;
  background: color-mix(in srgb, var(--c, #7c6cff) 18%, rgba(255,255,255,.04));
  border-left: 2.5px solid var(--c, #7c6cff); color: var(--text);
  cursor: grab; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; min-width: 0;
  transition: transform .1s, background .14s;
}
.cal-chip:hover { transform: translateX(1px); filter: brightness(1.15); }
.cal-chip.done { opacity: .5; text-decoration: line-through; }
.cal-chip .time { color: var(--text-mute); font-variant-numeric: tabular-nums; font-size: 10.5px; }
.cal-chip .cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c, #7c6cff); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #7c6cff) 22%, transparent); }
.cal-chip .cal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-more { font-size: 11px; color: var(--text-mute); padding-left: 3px; }

.tray { margin-top: 16px; }
.tray-items { display: flex; gap: 8px; flex-wrap: wrap; }
.tray-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px;
  background: rgba(255,255,255,.045); border: 1px dashed var(--border-strong); font-size: 13px;
  cursor: grab; transition: background .14s, border-color .14s;
}
.tray-chip:hover { background: rgba(255,255,255,.08); border-color: var(--accent); }
.tray-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--accent)); }

.week-view { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.week-col { display: flex; flex-direction: column; gap: 7px; min-height: 320px; min-width: 0; padding: 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); }
.week-col.today { border-color: rgba(124,108,255,.45); background: rgba(124,108,255,.06); }
.week-col.drop-target { border-color: var(--accent-2); background: rgba(34,211,238,.09); }
.week-col-head { display: flex; align-items: baseline; justify-content: space-between; }
.week-col-head b { font-size: 13px; }
.week-col-head span { font-size: 11px; color: var(--text-mute); }

/* ---------------- agenda ---------------- */
.agenda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; align-items: start; }
.section-title { display: flex; align-items: center; gap: 9px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-dim); font-weight: 650; margin-bottom: 10px; }
.section-title .n { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.section-title.accent { color: #cfc9ff; }
.section-title.danger { color: #ffb3c0; }

/* ---------------- drawer ---------------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(4,5,9,.62); backdrop-filter: blur(3px); animation: fade .18s ease both; }
@keyframes fade { from { opacity: 0; } }

.drawer {
  position: fixed; z-index: 50; top: 0; right: 0; height: 100vh; width: min(460px, 100vw);
  overflow-y: auto; padding: 22px 22px 40px;
  background: linear-gradient(180deg, #181b26, #101219);
  border-left: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  animation: slideIn .26s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes slideIn { from { transform: translateX(30px); opacity: .4; } }
.drawer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.drawer-head .spacer { margin-left: auto; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-mute); font-weight: 600; }
.field input, .field textarea, .field select {
  padding: 10px 12px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); outline: none; transition: border-color .15s, background .15s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(124,108,255,.55); background: rgba(124,108,255,.06); }
.field textarea { resize: vertical; min-height: 84px; font-family: inherit; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field input[type="date"], .field input[type="time"] { color-scheme: dark; }

.pill-group { display: flex; flex-wrap: wrap; gap: 7px; }
.pill {
  padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: rgba(255,255,255,.04);
  color: var(--text-dim); font-size: 13px; cursor: pointer; transition: all .14s;
}
.pill:hover { color: var(--text); border-color: var(--border-strong); }
.pill.active { background: linear-gradient(135deg, rgba(124,108,255,.32), rgba(34,211,238,.18)); color: #fff; border-color: rgba(124,108,255,.5); }
.pill.cat.active { background: color-mix(in srgb, var(--c) 30%, transparent); border-color: var(--c); color: #fff; }
.pill.cat .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 6px; }

.drawer-foot { display: flex; gap: 10px; margin-top: 22px; }
.drawer-foot .spacer { margin-left: auto; }
.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-mute); }
.meta-row code { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }

/* ---------------- modal ---------------- */
.modal-host { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(4,5,9,.6); backdrop-filter: blur(3px); animation: fade .16s both; }
.modal {
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto; padding: 22px; border-radius: 18px;
  background: linear-gradient(180deg, #191d29, #101219);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  animation: popUp .22s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes popUp { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.modal h2 { font-size: 18px; margin-bottom: 4px; }
.modal .modal-sub { color: var(--text-mute); font-size: 13px; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .spacer { margin-left: auto; }
.kbd-grid { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; align-items: center; }
.kbd-grid b { font-size: 13px; color: var(--text-dim); font-weight: 500; }

/* ---------------- toast ---------------- */
.toast-host { position: fixed; z-index: 70; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  padding: 11px 17px; border-radius: 12px; font-size: 13.5px; font-weight: 520;
  background: #191d29; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  animation: toastIn .22s cubic-bezier(.2,.7,.3,1) both; display: flex; align-items: center; gap: 10px;
}
.toast.undo { pointer-events: auto; }
.toast button { border: 0; background: transparent; color: var(--accent-2); cursor: pointer; font-weight: 600; font-size: 13px; }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } }
.toast.out { animation: toastOut .2s ease both; }
@keyframes toastOut { to { transform: translateY(8px); opacity: 0; } }

/* ---------------- mobile ---------------- */
.tabbar { display: none; }
.only-mobile { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; z-index: 55; inset: 0 auto 0 0; width: 268px; transform: translateX(-104%);
    transition: transform .24s cubic-bezier(.2,.7,.3,1); box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: none; }
  .main { padding: 14px 16px 96px; }
  /* A wide button group must not stretch the layout viewport on a phone: let it scroll instead. */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .toolbar { min-width: 0; }
  .toolbar .select { flex: 1 1 132px; min-width: 0; }
  .only-mobile { display: grid; }
  .topbar h1 { font-size: 20px; }
  .search-wrap input { width: 150px; }
  .search-wrap input:focus { width: 190px; }
  .btn-primary .btn-label { display: none; }
  .chart-row, .cols { grid-template-columns: minmax(0, 1fr); }
  .cal-grid { gap: 4px; }
  .day { min-height: 72px; padding: 5px; }
  .cal-head { margin-bottom: 5px; }
  .cal-head div { font-size: 9.5px; letter-spacing: .03em; }
  .day-weekday { display: none; }
  .cal-chip { padding: 3px 5px; }
  /* phone: a day cell is ~48px wide — show coloured bars instead of truncated words */
  .cal-chip { height: 11px; padding: 0; border-radius: 4px; border-left: 0; width: 100%; background: color-mix(in srgb, var(--c, #7c6cff) 62%, #0d0f16); }
  .cal-chip .cal-dot, .cal-chip .cal-title, .cal-chip .time { display: none; }
  .day-tickets { gap: 3px; }
  .week-view { grid-template-columns: 1fr; }
  .week-col { min-height: 0; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 45;
    bottom: 0; left: 0; right: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: #12141d; border-top: 1px solid var(--border);
  }
  .tab-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: transparent;
    color: var(--text-mute); font-size: 10px; cursor: pointer; padding: 4px 0; border-radius: 10px;
  }
  .tab-item svg { width: 21px; height: 21px; }
  .tab-item.active { color: #cfc9ff; }
  .tab-add {
    background: linear-gradient(135deg, var(--accent), #4f7bff); color: #fff; border-radius: 14px;
    margin: -14px 10px 0; box-shadow: 0 12px 26px -12px rgba(124,108,255,.9); justify-content: center;
  }
  .toast-host { bottom: 88px; }
}

@media (max-width: 560px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 13px 14px; }
  .stat-value { font-size: 27px; }
  .stat-foot { font-size: 11.5px; }
  .card-head .card-sub { display: none; }
  .card-sub { display: none; }
  .topbar { flex-wrap: wrap; }
  .search-wrap { flex: 1; }
  .toolbar .select { flex: 1; }
  .field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------------- view transition ---------------- */
.view-host { min-width: 0; }
.view-enter { animation: viewIn .28s cubic-bezier(.2,.7,.3,1) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(7px); } }
.view-host > * { animation: viewIn .3s cubic-bezier(.2,.7,.3,1) both; }
.view-host > *:nth-child(2) { animation-delay: .04s; }
.view-host > *:nth-child(3) { animation-delay: .08s; }
.view-host > *:nth-child(4) { animation-delay: .12s; }
.view-host > *:nth-child(5) { animation-delay: .16s; }

/* ---------------- login page ---------------- */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-wrap { position: relative; z-index: 1; width: min(380px, 92vw); text-align: center; }
.login-card {
  padding: 32px 28px 26px; border-radius: 20px; text-align: left;
  background: linear-gradient(180deg, #1a1e2a, #11131b);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  animation: popUp .3s cubic-bezier(.2,.7,.3,1) both;
}
.login-mark { display: grid; place-items: center; margin-bottom: 14px; filter: drop-shadow(0 8px 20px rgba(124,108,255,.4)); }
.login-card h1 { font-size: 26px; text-align: center; }
.login-sub { text-align: center; color: var(--text-mute); font-size: 13.5px; margin: 4px 0 22px; }
.login-card .field { margin-bottom: 16px; }
.login-error { color: #ffb3c0; font-size: 13px; min-height: 18px; margin-top: 12px; text-align: center; }
.login-foot { margin-top: 16px; color: var(--text-mute); font-size: 12.5px; }