:root{
  --bg:#0b0e14;
  --surface:#141822;
  --surface-2:#1a1f2b;
  --line:#262b38;
  --text:#e8e6de;
  --text-muted:#8a8f9c;
  --gold:#d4a24e;
  --gold-dim:#7a5f31;
  --radius-dial: clamp(120px, 24vw, 210px);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:'Inter', sans-serif; min-height:100vh; overflow-x:hidden; }
::selection{ background:var(--gold-dim); color:var(--text); }
a{ color:inherit; text-decoration:none; }
h1{ font-family:'Fraunces', serif; font-weight:600; font-size:26px; margin:0 0 20px; }
h3{ margin:0 0 12px; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }

button, .btn{
  font-family:'IBM Plex Mono', monospace;
  background:transparent;
  color:var(--text-muted);
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px 12px;
  font-size:12px;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
button:hover, .btn:hover{ border-color:var(--text-muted); color:var(--text); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

input, textarea, select{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:13px;
  padding:8px 10px;
}
label{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--text-muted); }

.wrap{ max-width:1080px; margin:0 auto; padding:24px 24px 64px; }

/* ---------- top bar ---------- */
.topbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.wordmark{ display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.14em; color:var(--text-muted); }
.wordmark svg{ width:18px; height:18px; flex-shrink:0; }
.wordmark b{ color:var(--text); font-weight:600; }
.topbar nav{ display:flex; align-items:center; gap:18px; font-size:13px; color:var(--text-muted); flex-wrap:wrap; }
.topbar nav a:hover{ color:var(--text); }
.topbar nav form{ display:inline; }
.topbar nav form button{ padding:0; border:none; font-family:'Inter', sans-serif; font-size:13px; color:var(--text-muted); }
.topbar nav form button:hover{ color:var(--text); }

.philosophy{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:clamp(16px, 2.2vw, 20px); color:var(--text);
  margin:-10px 0 24px; max-width:560px; line-height:1.4;
}

.flash{ background:var(--surface); border:1px solid var(--gold-dim); color:var(--text); padding:10px 14px; border-radius:8px; margin-bottom:18px; font-size:13px; }
.flash-error{ border-color:#8a4a4a; }

/* ---------- dial ---------- */
.dial-section{ position:relative; display:flex; justify-content:center; align-items:center; margin:32px 0 40px; height:calc(var(--radius-dial) * 2 + 140px); }
.dial{ position:relative; width:1px; height:1px; }
.spokes{ position:absolute; top:50%; left:50%; width:calc(var(--radius-dial) * 2); height:calc(var(--radius-dial) * 2); transform:translate(-50%,-50%); pointer-events:none; }

.hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--surface-2), var(--surface) 70%);
  border:1px solid var(--gold-dim);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:2px; z-index:2;
}
.hub .needle{
  position:absolute; width:2px; height:42px; top:50%; left:50%;
  margin-top:-40px; margin-left:-1px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  transform-origin:bottom center; animation:spin 220s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .hub .needle{ animation:none; } }
.hub .label{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.08em; color:var(--text); margin-top:6px; }
.hub .sub{ font-family:'Fraunces', serif; font-style:italic; font-size:10px; color:var(--text-muted); max-width:88px; line-height:1.3; }

.dial-node{
  --radius: var(--radius-dial);
  position:absolute; top:50%; left:50%;
  transform:rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle)));
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:96px; margin-left:-48px; margin-top:-30px; text-align:center;
  border:none; background:none; padding:0; font-family:inherit; cursor:pointer;
}
.dial-node .dot{
  width:44px; height:44px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease, border-color .15s ease;
  color:var(--node-color);
}
.dial-node .dot svg{ width:18px; height:18px; }
.dial-node:hover .dot, .dial-node:focus-visible .dot{ transform:scale(1.08); border-color:var(--node-color); }
.dial-node .name{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--text-muted); line-height:1.3; }
.dial-node:hover .name{ color:var(--text); }

/* angle and colour are now set inline per-category via style="--angle:...; --node-color:..." */

@media (max-width: 680px){
  .dial-section{
    --radius-dial: 135px;
    height:calc(var(--radius-dial) * 2 + 90px);
    margin:24px 0 32px;
  }
  .hub{ width:86px; height:86px; }
  .hub .needle{ height:30px; margin-top:-28px; }
  .hub .label{ font-size:8px; letter-spacing:0.06em; }
  .hub .sub{ font-size:7.5px; max-width:58px; line-height:1.2; }
  .dial-node{ width:58px; margin-left:-29px; margin-top:-22px; gap:4px; }
  .dial-node .dot{ width:32px; height:32px; }
  .dial-node .dot svg{ width:13px; height:13px; }
  .dial-node .name{ font-size:8px; line-height:1.15; }
}

/* ---------- panels / strip ---------- */
.strip{ display:grid; grid-template-columns: 1.1fr 0.8fr 1.4fr; gap:14px; margin-bottom:14px; }
.strip-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media (max-width: 800px){ .strip, .strip-2{ grid-template-columns:1fr; } }

.panel{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:14px; }

/* today's log */
.todo-add{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.todo-add input[type=text]{ flex:1; min-width:160px; }
.todo-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.todo-list li{ display:flex; align-items:center; gap:10px; font-size:14px; padding:6px 0; border-bottom:1px dashed var(--line); }
.todo-list li:last-child{ border-bottom:none; }
.todo-list li span{ flex:1; }
.todo-list .priority-high{ border-left:2px solid #b5654a; padding-left:8px; }
.todo-list .priority-medium{ border-left:2px solid var(--gold); padding-left:8px; }
.todo-list .priority-low{ border-left:2px solid var(--text-muted); padding-left:8px; }
.check{ border-radius:50%; width:26px; height:26px; padding:0; display:flex; align-items:center; justify-content:center; }
.remove{ border:none; color:var(--text-muted); font-size:16px; padding:0 4px; }
.remove:hover{ color:#b5654a; }
.empty{ color:var(--text-muted); font-size:13px; font-style:italic; }

/* recovery */
.recovery .count{ font-family:'IBM Plex Mono', monospace; font-size:38px; font-weight:600; color:var(--gold); line-height:1; }
.recovery .count a{ font-size:16px; }
.recovery .since{ font-size:12px; color:var(--text-muted); margin-top:8px; }

/* quote */
.quote blockquote{ font-family:'Fraunces', serif; font-style:italic; font-size:16px; line-height:1.55; margin:0; color:var(--text); }

/* charts */
.chart-wrap{ position:relative; width:100%; height:220px; }
.chart-wrap canvas{ position:absolute; top:0; left:0; width:100% !important; height:100% !important; }

.chart-legend{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-bottom:12px; font-size:12px; color:var(--text-muted); }
.chart-legend span{ display:inline-flex; align-items:center; gap:6px; }
.chart-legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; }

.range-filter{ display:flex; gap:6px; margin-bottom:14px; }
.range-filter button{ padding:5px 10px; }
.range-filter button.active{ border-color:var(--gold); color:var(--gold); }

/* recovery goal rows */
.recovery-goal{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line); flex-wrap:wrap; }
.recovery-goal:last-child{ border-bottom:none; }
.recovery-goal .rg-name{ flex:1; min-width:120px; font-size:14px; }
.recovery-goal .rg-days{ font-family:'IBM Plex Mono', monospace; color:var(--gold); font-size:15px; min-width:70px; }
.recovery-goal .rg-since{ font-size:12px; color:var(--text-muted); min-width:110px; }
.recovery-goal form{ display:inline; }
.main-badge{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-dim); border-radius:5px; padding:2px 6px; }
.goal-add-row{ display:flex; gap:8px; flex-wrap:wrap; }
.goal-add-row input[type="text"]{ flex:1; min-width:140px; }

/* projects mini */
.projects-mini ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.projects-mini li{ display:flex; justify-content:space-between; font-size:13px; border-bottom:1px dashed var(--line); padding-bottom:6px; }
.projects-mini li:last-child{ border-bottom:none; }
.muted{ color:var(--text-muted); }

/* table */
.table{ width:100%; border-collapse:collapse; font-size:13px; }
.table th{ text-align:left; color:var(--text-muted); font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:8px 10px; border-bottom:1px solid var(--line); }
.table td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
.badge{ display:inline-block; padding:3px 8px; border-radius:5px; font-size:11px; font-family:'IBM Plex Mono', monospace; text-transform:capitalize; }
/* dashboard stat strip - deliberately small, ambient, not a headline feature */
.stat-strip{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  font-size:12px; color:var(--text-muted);
  margin:10px 0 24px;
}
.stat-strip b{ color:var(--text); font-family:'IBM Plex Mono', monospace; font-weight:600; }
.stat-strip a{ color:var(--text-muted); }
.stat-strip a:hover{ color:var(--text); }
.stat-strip .stat-warn b{ color:#d18b74; }

.strip-3{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin-bottom:14px; }
@media (max-width: 900px){ .strip-3{ grid-template-columns:1fr; } }

.check.done{ background:rgba(212,162,78,.18); color:var(--gold); border-color:var(--gold-dim); }

/* project status badges */
.status-active{ background:rgba(212,162,78,.15); color:var(--gold); }
.status-blocked{ background:rgba(181,101,74,.18); color:#d18b74; }
.status-complete{ background:rgba(108,143,92,.18); color:#9ac683; }
.status-archived{ background:rgba(138,143,156,.15); color:var(--text-muted); }

/* task status badges (note: status-complete is shared with Projects above) */
.status-not_started{ background:rgba(138,143,156,.15); color:var(--text-muted); }
.status-open{ background:rgba(91,124,153,.18); color:#8fb2cf; }
.status-ongoing{ background:rgba(212,162,78,.15); color:var(--gold); }
.status-on_hold, .status-on_hold_delivery, .status-on_hold_third_party{ background:rgba(181,101,74,.15); color:#d18b74; }

/* task queue table + ticket view */
.priority-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.priority-dot.high{ background:#b5654a; }
.priority-dot.medium{ background:var(--gold); }
.priority-dot.low{ background:var(--text-muted); }

.ticket-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:14px; align-items:start; }
@media (max-width: 900px){ .ticket-layout{ grid-template-columns:1fr; } }

.ticket-notes{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:10px; }
.ticket-notes li{ background:var(--surface-2); border-radius:8px; padding:10px 12px; font-size:13px; }
.ticket-notes .note-meta{ font-size:11px; color:var(--text-muted); margin-bottom:4px; font-family:'IBM Plex Mono', monospace; }
.note-add textarea{ width:100%; min-height:70px; margin-bottom:8px; }

.field-panel label{ margin-bottom:12px; }
.field-panel select, .field-panel input{ width:100%; }
.ics-link{ display:inline-block; margin-top:6px; }

/* pulse-behaviour category orb */
@keyframes dial-pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.28); box-shadow:0 0 0 10px rgba(255,255,255,0.06); }
  100%{ transform:scale(1); }
}
.dot.pulse-anim{ animation:dial-pulse 0.6s ease; }
@media (prefers-reduced-motion: reduce){ .dot.pulse-anim{ animation:none; } }

/* global analytics range filter */
.global-filter{
  display:flex; align-items:center; gap:10px;
  margin:4px 0 16px;
  font-size:12px; color:var(--text-muted);
}
.global-filter .range-filter{ margin-bottom:0; }

/* radar chart */
.chart-wrap-radar{ position:relative; width:100%; height:320px; }
.chart-wrap-radar canvas{ position:absolute; top:0; left:0; width:100% !important; height:100% !important; }

/* categories management page */
.category-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px dashed var(--line);
}
.category-row:last-child{ border-bottom:none; }
.cat-dot{ width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.cat-name{ font-size:14px; min-width:120px; }
.behavior-badge{ background:var(--surface-2); color:var(--text-muted); }
.cat-score{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--text-muted); }
.cat-goal{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--gold); }
.category-form{ margin-top:10px; }
.category-form input[type="color"]{ width:60px; height:36px; padding:2px; }

/* ---------- journal ---------- */
.week-strip{ display:flex; align-items:center; gap:4px; margin-bottom:20px; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
.week-strip .nav-arrow{ padding:6px 10px; flex-shrink:0; }
.week-strip .day-btn{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 12px; border-radius:8px; flex-shrink:0;
  color:var(--text-muted); font-family:'IBM Plex Mono', monospace; font-size:11px;
  border:1px solid transparent; background:none;
}
.week-strip .day-btn .day-name{ text-transform:uppercase; letter-spacing:0.05em; }
.week-strip .day-btn .day-num{ font-size:15px; font-weight:600; color:var(--text); }
.week-strip .day-btn.today{ border-color:var(--gold-dim); }
.week-strip .day-btn.selected{ background:var(--gold); }
.week-strip .day-btn.selected .day-num, .week-strip .day-btn.selected .day-name{ color:#0b0e14; }
.week-strip .today-btn{ margin-left:auto; flex-shrink:0; }
@media (max-width: 480px){
  .week-strip .day-btn{ padding:6px 8px; }
  .week-strip .today-btn{ margin-left:8px; }
}

.journal-header{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:6px; }
.journal-date{ font-family:'Fraunces', serif; font-weight:600; font-size:24px; }
.journal-date .today-badge{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--gold); margin-left:10px; vertical-align:middle; }

.journal-title-input{
  width:100%; border:none; background:transparent; outline:none;
  font-family:'Fraunces', serif; font-size:28px; font-weight:600; color:var(--text);
  padding:10px 0; border-bottom:1px solid var(--line); margin:10px 0 16px;
}
.journal-title-input::placeholder{ color:var(--text-muted); font-weight:400; }

.mantra-label{ display:block; font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
.mantra-input{
  width:100%; border:none; background:transparent; outline:none;
  font-family:'Fraunces', serif; font-style:italic; font-size:16px; color:var(--gold);
  padding:6px 0; border-bottom:1px dashed var(--line); margin-bottom:18px;
}
.mantra-input::placeholder{ color:var(--text-muted); font-style:italic; }

.mood-row{ display:flex; align-items:center; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.mood-row .mood-label{ font-size:12px; color:var(--text-muted); margin-right:4px; }
.mood-btn{
  font-size:20px; padding:8px 12px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--line);
  filter:grayscale(1); opacity:0.45; transition:filter .15s ease, opacity .15s ease, border-color .15s ease;
}
.mood-btn:hover{ opacity:0.75; }
.mood-btn.active{ filter:grayscale(0); opacity:1; border-color:var(--gold-dim); background:rgba(212,162,78,.12); }

.attachment-strip{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:16px; }
.attachment-thumb{
  position:relative; flex-shrink:0; width:84px; height:84px; border-radius:8px;
  overflow:hidden; border:1px solid var(--line); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
}
.attachment-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.attachment-thumb .video-icon{ font-size:24px; color:var(--text-muted); }
.attachment-thumb .remove-form{ position:absolute; top:2px; right:2px; }
.attachment-thumb .remove{ background:rgba(11,14,20,.75); border-radius:50%; width:20px; height:20px; padding:0; font-size:13px; line-height:1; border:none; }
.attachment-add{
  flex-shrink:0; width:84px; height:84px; border-radius:8px;
  border:1px dashed var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:26px; cursor:pointer; background:none;
}
.attachment-add input{ display:none; }

/* Quill editor, re-themed dark to match the rest of the app */
.ql-toolbar.ql-snow{ background:var(--surface-2); border-color:var(--line) !important; border-radius:10px 10px 0 0; }
.ql-container.ql-snow{ border-color:var(--line) !important; border-radius:0 0 10px 10px; background:var(--surface); font-family:'Lora', serif; }
.ql-editor{ min-height:320px; color:var(--text); font-family:'Lora', serif; font-size:16px; line-height:1.8; }
.ql-editor.ql-blank::before{ color:var(--text-muted); font-style:normal; font-family:'Lora', serif; }
.ql-editor img{ max-width:420px; max-height:420px; width:auto; height:auto; border-radius:8px; margin:10px 0; display:block; cursor:zoom-in; }

/* read-only display of saved rich text (e.g. internal notes) — same look, no editor chrome/min-height */
.rich-content{ font-family:'Lora', serif; font-size:14px; line-height:1.7; color:var(--text); }
.rich-content img{ max-width:320px; max-height:320px; width:auto; height:auto; border-radius:8px; margin:8px 0; display:block; cursor:zoom-in; }
.rich-content p{ margin:0 0 10px; }
.rich-content p:last-child{ margin-bottom:0; }
.ql-snow .ql-stroke{ stroke:var(--text-muted); }
.ql-snow .ql-fill{ fill:var(--text-muted); }
.ql-snow .ql-picker{ color:var(--text-muted); }
.ql-snow .ql-picker-options{ background:var(--surface-2); border-color:var(--line) !important; }
.ql-snow .ql-picker-item{ color:var(--text); }
.ql-snow .ql-tooltip{ background:var(--surface-2); border:1px solid var(--line); color:var(--text); box-shadow:none; }
.ql-snow .ql-tooltip input[type=text]{ background:var(--surface); color:var(--text); border-color:var(--line); }
.ql-toolbar.ql-snow .ql-picker-label{ color:var(--text-muted); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke{ stroke:var(--text); }
.ql-snow.ql-toolbar button.ql-active .ql-stroke{ stroke:var(--gold); }
.ql-snow.ql-toolbar button.ql-active .ql-fill{ fill:var(--gold); }
/* Some mobile browsers render Quill's underlying native <select> alongside
   its custom-styled .ql-picker UI instead of the select staying hidden —
   looks like a duplicated dropdown underneath the real one. The custom
   picker is a full replacement in every context, so force the native
   element hidden everywhere rather than relying on Quill's own CSS to do it. */
.ql-toolbar select{ display:none !important; }
.ql-picker-context-label{
  font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em;
  margin-right:4px; align-self:center; vertical-align:middle; display:inline-block;
}

/* momentum */
.momentum-panel .momentum-row{ display:flex; align-items:baseline; gap:14px; margin:6px 0 10px; flex-wrap:wrap; }
.momentum-score{ font-family:'IBM Plex Mono', monospace; font-size:36px; font-weight:600; color:var(--gold); }
.momentum-state{ font-size:14px; color:var(--text-muted); font-family:'IBM Plex Mono', monospace; }
.momentum-direction{ font-size:14px; font-weight:500; }
.momentum-direction.momentum-rising{ color:#8fc47a; }
.momentum-direction.momentum-falling{ color:#c0453f; }
.momentum-direction.momentum-steady{ color:var(--text-muted); }
.momentum-breakdown{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); margin-bottom:10px; font-family:'IBM Plex Mono', monospace; }
.momentum-note{ font-size:12px; color:var(--text-muted); margin:0; max-width:560px; }
.momentum-divider{ height:1px; background:var(--line); margin:20px 0; }
.direction-score{ color:#5b8fc7; }
.momentum-insight{
  font-family:'Fraunces', serif; font-style:italic; font-size:15px; color:var(--text);
  margin:2px 0 10px;
}

/* well-being */
.wb-summary-row{ display:flex; gap:24px; flex-wrap:wrap; margin-bottom:16px; }
.wb-summary-row > div{ display:flex; flex-direction:column; gap:4px; }
.wb-summary-label{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.wb-summary-value{ font-family:'IBM Plex Mono', monospace; font-size:20px; font-weight:600; color:var(--text); }

.bmi-band{ position:relative; display:flex; height:36px; border-radius:8px; overflow:hidden; }
.bmi-segment{ display:flex; align-items:center; justify-content:center; font-size:11px; color:#0b0e14; font-weight:600; }
.bmi-under{ flex:14; background:#8fb2cf; }
.bmi-healthy{ flex:26; background:#8fc47a; }
.bmi-over{ flex:20; background:#e8b45a; }
.bmi-obese{ flex:40; background:#c0453f; }
.bmi-marker{
  position:absolute; top:-4px; width:3px; height:44px; background:#fff;
  border-radius:2px; box-shadow:0 0 0 2px rgba(11,14,20,.6);
  transform:translateX(-1.5px);
}

/* neglected areas */
.neglected-panel .neglected-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.neglected-panel .neglected-row:last-child{ border-bottom:none; }
.neglected-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.neglected-name{ flex:1; color:var(--text); }
.neglected-days{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:#c0453f; }

/* drag-to-reorder chart panels */
.drag-handle{ cursor:grab; user-select:none; }
.chart-panel[draggable="true"]:active{ cursor:grabbing; }

/* top stats row: task/project strips + happiness box */
.top-stats-row{ display:flex; gap:14px; align-items:stretch; flex-wrap:wrap; margin-bottom:14px; }
.top-stats-col{ flex:1; min-width:260px; }
.top-stats-col .stat-strip{ margin:0 0 6px; }
.happiness-box{
  flex:0 0 170px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:12px;
}
.happiness-label{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.happiness-score{ font-family:'IBM Plex Mono', monospace; font-size:30px; font-weight:600; color:var(--gold); }
.happiness-emoji{ font-size:20px; vertical-align:2px; }
.happiness-note{ font-size:11px; color:var(--text-muted); }

/* mantra panel */
.mantra-panel .mantra-header{ font-size:12px; color:var(--text-muted); margin-bottom:6px; font-family:'IBM Plex Mono', monospace; }
.mantra-panel blockquote{ font-family:'Fraunces', serif; font-style:italic; font-size:17px; line-height:1.5; margin:0; color:var(--gold); overflow-wrap:break-word; word-break:break-word; max-width:100%; }

/* memories fade slideshow */
.memory-fade{ position:relative; width:100%; height:280px; border-radius:10px; overflow:hidden; background:var(--surface-2); }
.memory-slide{ position:absolute; inset:0; opacity:0; transition:opacity 2s ease; }
.memory-slide.active{ opacity:1; }
.memory-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.memory-caption{
  position:absolute; bottom:0; left:0; right:0; padding:14px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  font-size:13px; color:#f2f0ea;
}

.project-form, .settings-form{ display:flex; flex-direction:column; gap:10px; max-width:480px; }
.project-form label, .settings-form label{ flex-direction:row; align-items:center; gap:8px; }
.project-form label input, .settings-form label input{ flex:1; }
.project-form textarea{ min-height:60px; }
details{ margin-top:8px; }
details summary{ cursor:pointer; color:var(--text-muted); font-size:12px; }
details form{ margin-top:10px; }

/* goal list */
.goal-list{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; }
.goal-list li{ display:flex; align-items:center; gap:10px; font-size:14px; padding:6px 0; border-bottom:1px dashed var(--line); }
.goal-list li:last-child{ border-bottom:none; }
.goal-list li span{ flex:1; }
.tick{ border-radius:50%; width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center; }
.tick.done{ background:rgba(212,162,78,.18); color:var(--gold); border-color:var(--gold-dim); }
.goal-add{ display:flex; gap:8px; }
.goal-add input{ flex:1; }

/* settings quote list */
.quote-add{ display:flex; gap:8px; margin-bottom:14px; }
.quote-add textarea{ flex:1; min-height:50px; }
.quote-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.quote-list li{ display:flex; align-items:center; gap:10px; font-size:13px; border-bottom:1px dashed var(--line); padding-bottom:8px; }
.quote-list li span{ flex:1; }
.quote-list li .muted{ opacity:.5; }

/* login */
.login-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:32px 28px; width:320px; display:flex; flex-direction:column; gap:14px; }
.login-card .wordmark{ justify-content:center; margin-bottom:10px; font-size:15px; }
.login-card label{ gap:5px; }
.remember{ flex-direction:row; align-items:center; gap:8px; }
.remember input{ width:auto; }

footer{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color:var(--text-muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---- gym ---- */
.gym-inline-confirm{ margin-top:10px; padding:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; animation:gymFadeIn .15s ease; }
.gym-inline-confirm p{ margin:0 0 10px; font-size:13px; color:var(--text); }
.gym-inline-confirm button{ font-size:12px; padding:5px 12px; }
.gym-confirm-no{ margin-left:8px; opacity:.7; }
@keyframes gymFadeIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.gym-workout-list{ list-style:none; padding:0; margin:0; }
.gym-exercise-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line); }
.gym-exercise-row:last-child{ border-bottom:none; }
.gym-exercise-check{ width:24px; height:24px; border:2px solid var(--line); border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; background:var(--surface-2); flex-shrink:0; transition:background .15s; color:transparent; }
.gym-exercise-check.checked{ background:var(--gold); border-color:var(--gold); color:#0b0e14; }
.gym-exercise-name{ flex:1; font-size:14px; }
.gym-exercise-name.done{ text-decoration:line-through; color:var(--text-muted); }
.gym-exercise-tag{ font-size:10px; font-family:'IBM Plex Mono', monospace; color:var(--text-muted); background:var(--surface-2); border-radius:4px; padding:2px 6px; }
.gym-exercise-tag.bonus{ color:#6fae8f; }

.gym-score-bar{ height:8px; border-radius:4px; background:var(--line); overflow:hidden; margin:6px 0; }
.gym-score-fill{ height:100%; border-radius:4px; background:var(--gold); transition:width .4s ease; }

.gym-attendance-grid{ display:flex; gap:6px; flex-wrap:wrap; }
.gym-day-dot{ width:32px; height:32px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:10px; font-family:'IBM Plex Mono', monospace; color:var(--text-muted); flex-direction:column; line-height:1; }
.gym-day-dot.attended{ background:var(--gold); border-color:var(--gold); color:#0b0e14; }
.gym-day-dot .dot-day{ font-size:13px; font-weight:600; }

.gym-progress-gallery{ display:flex; gap:12px; flex-wrap:wrap; }
.gym-photo-thumb{ position:relative; border-radius:10px; overflow:hidden; width:140px; }
.gym-photo-thumb img{ width:140px; height:180px; object-fit:cover; display:block; }
.gym-photo-caption{ position:absolute; bottom:0; left:0; right:0; padding:8px; background:linear-gradient(to top, rgba(0,0,0,.72), transparent); font-size:11px; color:#f2f0ea; }
.gym-photo-remove{ position:absolute; top:4px; right:4px; }