:root {
  --bg:#0d0d12; --surface:#17171f; --surface2:#1f1f2a;
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.13);
  --text:#e6e3f3; --text2:#8e89a8; --text3:#4e4963;
  --accent:#7c5af0; --accent-dim:rgba(124,90,240,0.18);
  --green:#22c55e; --red:#ef4444; --amber:#f59e0b; --blue:#60a5fa;
  --r:10px; --r-sm:7px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow-x: hidden; font-family: 'DM Sans', system-ui, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
/* While the Chat tab is open, the page itself must not scroll — only the
   message list (.chat-list) does. Toggled via body.chat-locked in chat.js.
   #view-dash is taken out of document flow entirely (position:fixed) so
   there is nothing for the outer browser window to scroll, regardless of
   how much the mobile address bar/chrome grows or shrinks. */
html.chat-locked, body.chat-locked { height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; }
body.chat-locked #view-dash {
  position: fixed; inset: 0; overflow: hidden; padding-bottom: 0.75rem;
  display: flex; flex-direction: column;
  overscroll-behavior: contain; touch-action: pan-y;
}
body.chat-locked #chat-section { flex: 1; min-height: 0; }
body.chat-locked .chat-list { overscroll-behavior: contain; touch-action: pan-y; }

#bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; z-index: 999; }
#bar.go   { transform: scaleX(0.85); transition: transform 3s cubic-bezier(0.1,0.5,0.5,1); }
#bar.done { transform: scaleX(1);    transition: transform 0.15s; }

.hidden { display: none !important; }

/* ── Auth screens (login / setup) ── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border2); border-radius: 16px; padding: 2.5rem 2rem; }
.auth-icon { width: 46px; height: 46px; background: var(--accent-dim); border: 1px solid var(--accent); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--accent); margin-bottom: 1.5rem; }
.auth-card h1 { font-size: 19px; font-weight: 600; margin-bottom: 5px; }
.auth-card p  { font-size: 13px; color: var(--text2); margin-bottom: 2rem; }
.label { display: block; font-size: 12px; font-weight: 500; color: var(--text2); margin-bottom: 6px; margin-top: 12px; }
.label:first-of-type { margin-top: 0; }
.input, .select, .textarea { width: 100%; padding: 10px 13px; background: var(--bg); border: 1px solid var(--border2); border-radius: var(--r-sm); color: var(--text); font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.15s; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
.btn-primary { width: 100%; padding: 10px; background: var(--accent); color: #fff; border: none; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; margin-top: 1.25rem; transition: opacity 0.15s, transform 0.1s; }
.btn-primary:hover  { opacity: 0.88; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-secondary { padding: 8px 14px; background: var(--surface2); color: var(--text); border: 1px solid var(--border2); border-radius: var(--r-sm); font-size: 13px; font-family: inherit; cursor: pointer; transition: all 0.15s; }
.btn-secondary:hover { background: var(--surface); border-color: var(--accent); }
.btn-danger { padding: 8px 14px; background: rgba(239,68,68,0.1); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); border-radius: var(--r-sm); font-size: 13px; font-family: inherit; cursor: pointer; transition: all 0.15s; }
.btn-danger:hover { background: rgba(239,68,68,0.18); }
.error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13px; margin-top: 1rem; display: none; }
.error.show { display: block; }

/* ── Dashboard ──
   #view-dash itself is full-width; each tab's own section sets its own
   max-width so wide tabs (Shop, Oura) can use more of the viewport while
   Tasks/Habits/Notes/Emails stay narrow and centered like before. */
#view-dash { padding: 1.5rem 1rem 5rem; }
.dash-head, .tabs,
#tasks-section, #habits-section, #notes-section, #emails-section {
  max-width: 760px; margin-left: auto; margin-right: auto;
}
#shop-section, #oura-section, #finance-section { max-width: 1400px; margin-left: auto; margin-right: auto; }
.dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 36px; height: 36px; background: var(--accent-dim); border: 1px solid var(--accent); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--accent); flex-shrink: 0; }
.logo h1   { font-size: 17px; font-weight: 600; line-height: 1.2; }
.logo small{ display: block; font-size: 11px; color: var(--text3); font-weight: 400; }

.actions { display: flex; gap: 7px; align-items: center; }
.btn-ghost { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; background: transparent; border: 1px solid var(--border2); border-radius: var(--r-sm); color: var(--text2); font-size: 13px; font-family: inherit; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.btn-ghost:hover { background: var(--surface); color: var(--text); }
.btn-ghost.accent { border-color: rgba(124,90,240,0.5); color: var(--accent); }
.btn-ghost.accent:hover { background: var(--accent-dim); }
.btn-ghost .ti { font-size: 15px; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.85s linear infinite; }

/* User menu */
.user-menu { position: relative; }
.user-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; background: var(--surface); border: 1px solid var(--border2); border-radius: 20px; color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; }
.user-pill:hover { border-color: var(--accent); }
.avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; flex-shrink: 0; }
.avatar.sm { width: 18px; height: 18px; font-size: 9px; }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r); padding: 6px; min-width: 200px; z-index: 50; box-shadow: 0 8px 28px rgba(0,0,0,0.45); }
.user-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: transparent; border: none; color: var(--text); font-size: 13px; font-family: inherit; text-align: left; border-radius: 6px; cursor: pointer; }
.user-dropdown button:hover { background: var(--surface2); }
.user-dropdown button .ti { font-size: 15px; color: var(--text2); }
.user-dropdown hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

/* Tabs */
.tabs { display: flex; gap: 4px; margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 4px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex-shrink: 0; white-space: nowrap; padding: 6px 16px; font-size: 13px; font-weight: 500; font-family: inherit; color: var(--text2); background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--surface2); color: var(--text); }
.tab-count { font-size: 11px; padding: 1px 6px; background: var(--bg); border-radius: 8px; color: var(--text3); }
.tab.active .tab-count { color: var(--accent); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 1.25rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; }
.stat-lbl { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.stat-val { font-size: 24px; font-weight: 600; line-height: 1; }
.c-default{ color: var(--text); }
.c-blue   { color: var(--blue); }
.c-green  { color: var(--green); }
.c-red    { color: var(--red); }
.c-amber  { color: var(--amber); }
.stat-sub { font-size: 11px; color: var(--text3); margin-top: 5px; }

/* Filters */
.filters { display: flex; gap: 6px; margin-bottom: 1rem; flex-wrap: wrap; }
.f-btn { padding: 5px 14px; font-size: 13px; font-family: inherit; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text2); cursor: pointer; transition: all 0.15s; }
.f-btn:hover  { border-color: var(--border2); color: var(--text); }
.f-btn.active { background: var(--surface2); border-color: var(--border2); color: var(--text); }

/* Tasks */
.todo-list { display: flex; flex-direction: column; gap: 6px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.todo-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; display: flex; align-items: flex-start; gap: 11px; transition: border-color 0.15s; animation: fadeIn 0.18s ease both; position: relative; }
.todo-item:hover { border-color: var(--border2); }
.todo-item.done { opacity: 0.4; }
.todo-item.done .todo-title { text-decoration: line-through; color: var(--text3); }

.check { flex-shrink: 0; margin-top: 2px; width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; font-size: 11px; }
.check:hover  { border-color: var(--accent); }
.check.ticked { background: var(--green); border-color: var(--green); color: #fff; }

.todo-body  { flex: 1; min-width: 0; }
.todo-row1  { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.todo-title { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; word-break: break-word; }
.todo-row2  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.badge { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 9px; white-space: nowrap; }
.b-urgent { background: rgba(239,68,68,0.14); color: #fca5a5; }
.b-normal { background: rgba(96,165,250,0.14); color: #93c5fd; }
.b-low    { background: rgba(255,255,255,0.06); color: var(--text3); }
.b-team   { background: rgba(124,90,240,0.14); color: var(--accent); display: inline-flex; align-items: center; gap: 3px; }

.owner { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text3); }

.todo-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text3); flex-wrap: wrap; }
.todo-meta span { display: inline-flex; align-items: center; gap: 4px; }
.todo-meta .ti { font-size: 12px; }

.menu-btn { background: transparent; border: none; color: var(--text3); cursor: pointer; padding: 4px 6px; border-radius: 5px; font-size: 16px; }
.menu-btn:hover { background: var(--surface2); color: var(--text); }

.item-menu { position: absolute; right: 14px; top: 40px; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r); padding: 5px; min-width: 170px; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.item-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: transparent; border: none; color: var(--text); font-size: 13px; font-family: inherit; text-align: left; border-radius: 5px; cursor: pointer; }
.item-menu button:hover { background: var(--surface2); }
.item-menu button.danger { color: #fca5a5; }
.item-menu button .ti { font-size: 15px; }

.section-sep { font-size: 11px; font-weight: 500; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.8rem 0 0.3rem; }
.habit-section-label { font-size:11px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:.07em; margin:0 0 .6rem; display:flex; align-items:center; gap:5px; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--text3); font-size: 14px; }
.empty .ti { font-size: 30px; display: block; margin-bottom: 8px; }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.modal-bg.show { opacity: 1; pointer-events: auto; }
.modal { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r); padding: 1.5rem; max-height: 90vh; overflow-y: auto; }
.modal-large { max-width: 600px; }
.modal h2 { font-size: 17px; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1.25rem; }

.scope-radio { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.scope-radio label { padding: 10px; border: 1px solid var(--border2); border-radius: var(--r-sm); cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; transition: all 0.15s; }
.scope-radio label:hover { border-color: var(--accent); }
.scope-radio input { display: none; }
.scope-radio input:checked + .scope-content { color: var(--accent); }
.scope-radio label:has(input:checked) { background: var(--accent-dim); border-color: var(--accent); }

/* User list table */
.user-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 6px; }
.user-row-info { flex: 1; min-width: 0; }
.user-row-name { font-size: 13px; font-weight: 500; }
.user-row-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.user-actions { display: flex; gap: 4px; }
.user-actions button { padding: 4px 8px; font-size: 12px; }

.key-box { background: var(--bg); border: 1px solid var(--border2); border-radius: var(--r-sm); padding: 10px 12px; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--accent); word-break: break-all; margin-top: 6px; }

.last-sync { text-align: center; font-size: 12px; color: var(--text3); margin-top: 1.5rem; }

@media(max-width:520px) {
  .stats   { grid-template-columns: repeat(2,1fr); }
  .actions { gap: 5px; }
  .btn-ghost span:not(.tab-count) { display: none; }
  .dash-head { gap: 8px; }
  .ovw-name { width: 80px; }
}

/* ── Habits ──────────────────────────────────────────────────────────── */
.habits-date-nav { display:flex; align-items:center; gap:8px; margin-bottom:.9rem; }
.date-nav-btn { background:var(--surface); border:1px solid var(--border2); border-radius:var(--r-sm); color:var(--text2); cursor:pointer; padding:5px 13px; font-size:17px; line-height:1; transition:all .15s; }
.date-nav-btn:hover { color:var(--text); border-color:var(--accent); }
.date-nav-btn:disabled { opacity:.3; cursor:default; }
.date-nav-label { flex:1; text-align:center; font-size:14px; font-weight:500; }

.hprog-wrap { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:11px 14px; margin-bottom:1rem; }
.hprog-track { flex:1; height:5px; background:var(--surface2); border-radius:3px; overflow:hidden; }
.hprog-fill  { height:100%; background:var(--green); border-radius:3px; transition:width .3s; }
.hprog-label { font-size:13px; font-weight:600; white-space:nowrap; }

.habit-list { display:flex; flex-direction:column; gap:5px; margin-bottom:.5rem; }
.habit-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px; display:flex; align-items:center; gap:11px; cursor:pointer; transition:border-color .15s,opacity .15s; user-select:none; animation:fadeIn .15s ease both; }
.habit-item:hover { border-color:var(--border2); }
.habit-item.done { opacity:.42; }
.habit-item.done .habit-name { text-decoration:line-through; }
.habit-item.dragging { opacity:.35; }
.habit-item.drag-over { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.drag-grip { color:var(--text3); cursor:grab; display:flex; align-items:center; flex-shrink:0; padding-right:2px; opacity:.45; transition:opacity .15s; }
.drag-grip:active { cursor:grabbing; }
.habit-item:hover .drag-grip { opacity:.9; }
.habit-check { width:20px; height:20px; border-radius:6px; border:1.5px solid var(--border2); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px; transition:all .15s; }
.habit-check.ticked { color:#fff; }
.habit-emoji { font-size:17px; flex-shrink:0; line-height:1; }
.habit-name  { flex:1; font-size:14px; font-weight:500; }
.habit-edit-btn { background:transparent; border:none; color:var(--text3); cursor:pointer; padding:4px 6px; border-radius:5px; font-size:14px; opacity:0; flex-shrink:0; transition:opacity .1s; }
.habit-item:hover .habit-edit-btn { opacity:1; }
.habit-edit-btn:hover { background:var(--surface2); color:var(--text); }

/* Numeric/time/linked habit rows */
.habit-value { font-size:13px; color:var(--text2); font-weight:500; flex-shrink:0; white-space:nowrap; }
.habit-value-input { width:110px; padding:6px 8px; font-size:13px; flex-shrink:0; }
.habit-item-linked { cursor:default; }
.habit-check-linked { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }

/* Habit modal: threshold hint + onboarding panel */
.habit-hint { display:flex; align-items:flex-start; gap:6px; font-size:12px; color:var(--amber,#f59e0b); background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25); border-radius:var(--r-sm); padding:8px 10px; margin-top:6px; line-height:1.5; }
.habit-hint a { color:inherit; text-decoration:underline; }
.habit-onboarding { font-size:12px; color:var(--text3); background:var(--surface2); border-radius:var(--r-sm); padding:10px 12px; margin-top:1rem; line-height:1.5; }
.habit-onboarding p { margin:0 0 4px; color:var(--text2); }
.habit-onboarding ul { margin:0; padding-left:18px; }
.habit-onboarding li { margin-bottom:4px; }

.ovw-toggle { display:flex; gap:6px; margin-bottom:.75rem; }
.ovw-table  { display:flex; flex-direction:column; gap:5px; }
.ovw-row    { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:10px 14px; display:flex; align-items:center; gap:10px; overflow:hidden; }
.ovw-name   { font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; width:120px; flex-shrink:0; overflow:hidden; }
.ovw-name-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ovw-dots   { display:flex; gap:3px; flex:1; min-width:0; align-items:center; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
.ovw-dots::-webkit-scrollbar { display:none; }
.ovw-dot    { border-radius:3px; flex-shrink:0; }
.ovw-dot.miss   { background:var(--surface2); }
.ovw-dot.future { background:var(--bg); border:1px solid var(--border); cursor:default; }
.ovw-meta   { display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:54px; flex-shrink:0; }
.ovw-rate   { font-size:13px; font-weight:600; }
.ovw-streak { font-size:11px; color:var(--text3); }

.icon-picker  { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.icon-opt     { width:36px; height:36px; border-radius:8px; border:1.5px solid var(--border2); background:var(--bg); font-size:17px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; }
.icon-opt:hover,.icon-opt.sel { border-color:var(--accent); background:var(--accent-dim); }
.color-picker { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.color-opt    { width:24px; height:24px; border-radius:50%; border:2px solid transparent; cursor:pointer; outline:2px solid transparent; outline-offset:2px; transition:outline-color .15s; }
.color-opt.sel { outline-color:#fff; }

/* ── NOTES ────────────────────────────────────────────────────────── */
.notes-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:.75rem; }
.note-search-wrap { position:relative; flex:1; }
.note-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:14px; pointer-events:none; }
.note-search-input { padding-left:32px !important; }
.note-tags-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:.6rem; min-height:0; }
.note-tag-filter { background:none; border:1px solid var(--border); border-radius:20px; padding:3px 10px; font-size:12px; color:var(--text2); cursor:pointer; transition:all .15s; font-family:inherit; }
.note-tag-filter.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.note-tag-filter:hover:not(.active) { border-color:var(--border2); color:var(--text1); }
.note-sort-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.note-count { font-size:12px; color:var(--text3); }
.note-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(max-width:520px) {
  .note-grid { grid-template-columns:1fr; }
  .notes-toolbar { flex-wrap:wrap; }
  .note-search-wrap { flex:1 1 100%; }
}
.note-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px; cursor:pointer; transition:border-color .15s; display:flex; flex-direction:column; gap:7px; min-height:80px; animation:fadeIn .15s ease both; }
.note-card:hover { border-color:var(--border2); }
.note-card.pinned { border-color:rgba(124,90,240,.4); }
.note-card-hdr { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.note-card-title { font-weight:600; font-size:14px; color:var(--text1); line-height:1.3; word-break:break-word; }
.note-card-title.untitled { color:var(--text3); font-style:italic; font-weight:400; }
.note-pin-btn { background:none; border:none; cursor:pointer; padding:0 0 0 4px; font-size:12px; flex-shrink:0; color:var(--text3); opacity:.4; transition:opacity .15s; }
.note-pin-btn.pinned { opacity:1; color:var(--accent); }
.note-pin-btn:hover { opacity:1; }
.note-card-preview { font-size:13px; color:var(--text3); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.note-card-footer { display:flex; justify-content:space-between; align-items:flex-end; gap:6px; margin-top:auto; padding-top:4px; }
.note-card-date { font-size:11px; color:var(--text3); flex-shrink:0; }
.note-card-tags { display:flex; gap:4px; flex-wrap:wrap; }
.note-chip { font-size:11px; background:rgba(124,90,240,.15); color:var(--accent); border-radius:4px; padding:2px 7px; line-height:1.4; display:inline-flex; align-items:center; gap:2px; }
.note-chip-rm { background:none; border:none; cursor:pointer; padding:0 0 0 2px; font-size:12px; line-height:1; color:currentColor; opacity:.55; }
.note-chip-rm:hover { opacity:1; }
.note-empty { text-align:center; padding:3rem 1rem; color:var(--text3); font-size:14px; display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.note-empty i { font-size:28px; opacity:.4; }

/* Gallery */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-top:.6rem; }
.gallery-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; cursor:pointer; transition:border-color .15s; display:flex; flex-direction:column; animation:fadeIn .15s ease both; }
.gallery-card:hover { border-color:var(--border2); }
.gallery-thumb { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--bg); }
.gallery-card-footer { padding:8px 10px; display:flex; flex-direction:column; gap:5px; }
.gallery-card-caption { font-size:12px; color:var(--text2); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gallery-card-tags { display:flex; gap:4px; flex-wrap:wrap; }
.gimg-preview-wrap { display:flex; justify-content:center; align-items:center; background:var(--bg); border-radius:var(--r-sm); overflow:hidden; margin-bottom:14px; max-height:50vh; }
.gimg-preview-wrap img { max-width:100%; max-height:50vh; object-fit:contain; }

/* Note editor modal */
.modal-note { max-width:640px; width:calc(100vw - 2rem); padding:0; gap:0; overflow:hidden; }
.note-modal-title { background:none; border:none; outline:none; font-size:20px; font-weight:700; color:var(--text1); width:100%; padding:22px 24px 10px; font-family:inherit; }
.note-modal-title::placeholder { color:var(--text3); }
.note-tags-row { display:flex; align-items:center; flex-wrap:wrap; gap:5px; padding:6px 24px 10px; border-bottom:1px solid var(--border); min-height:38px; }
.note-tag-add { background:none; border:none; outline:none; font-size:12px; color:var(--text2); padding:2px 0; font-family:inherit; min-width:90px; flex:1; }
.note-tag-add::placeholder { color:var(--text3); }
.note-modal-body { background:none; border:none; outline:none; width:100%; min-height:220px; max-height:45vh; resize:none; padding:14px 24px; font-size:14px; color:var(--text1); line-height:1.7; font-family:inherit; overflow-y:auto; }
.note-modal-body::placeholder { color:var(--text3); }
.note-modal-footer { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; border-top:1px solid var(--border); gap:8px; flex-wrap:wrap; }
.note-modal-meta { font-size:11px; color:var(--text3); }

/* ── Emails ─────────────────────────────────────────────────────────── */
.email-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; }
.email-list { display:flex; flex-direction:column; gap:7px; }

.email-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px; transition:border-color .15s; animation:fadeIn .15s ease both; }
.email-card:hover { border-color:var(--border2); }
.email-card.done { opacity:.42; }
.email-card.done .email-subject { text-decoration:line-through; color:var(--text3); }

.email-card-main { display:flex; align-items:flex-start; gap:11px; }

.email-card-check { flex-shrink:0; margin-top:3px; width:17px; height:17px; border-radius:5px; border:1.5px solid var(--border2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; font-size:11px; }
.email-card-check:hover  { border-color:var(--green); }
.email-card-check.ticked { background:var(--green); border-color:var(--green); color:#fff; }

.email-card-content { flex:1; min-width:0; }
.email-card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--text3); margin-bottom:4px; }
.email-scope-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:9px; font-size:11px; font-weight:500; }
.email-scope-badge.personal { background:rgba(96,165,250,.12); color:#93c5fd; }
.email-scope-badge.business { background:rgba(124,90,240,.12); color:var(--accent); }
.email-from { font-weight:600; color:var(--text2); }
.email-date { color:var(--text3); }

.email-subject { font-size:14px; font-weight:500; color:var(--text); margin-bottom:5px; word-break:break-word; }
.email-summary { font-size:13px; color:var(--text2); line-height:1.5; margin-bottom:8px; }

.email-expand-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; background:transparent; border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text3); font-size:12px; font-family:inherit; cursor:pointer; transition:all .15s; margin-top:2px; }
.email-expand-btn:hover { border-color:var(--border2); color:var(--text2); }

.email-body-wrap { margin-top:10px; }
.email-body-inner { background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:12px; }
.email-body-meta { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border); font-size:12px; color:var(--text3); }
.email-body-meta b { color:var(--text2); }
.email-body-text { font-size:13px; color:var(--text2); line-height:1.65; white-space:pre-wrap; word-break:break-word; font-family:inherit; margin:0; }
.email-iframe { width:100%; border:none; min-height:150px; display:block; background:#fff; }

/* ── Finance ──────────────────────────────────────────────────────────── */
.finance-group { margin-bottom:1.5rem; }
.finance-group-head { display:flex; align-items:center; gap:8px; padding:0.8rem 0 0.6rem; }
.finance-group-icon { width:26px; height:26px; border-radius:7px; background:var(--accent-dim); border:1px solid var(--accent); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.finance-group-name { font-size:13px; font-weight:600; color:var(--text); }
.finance-group-sub { font-size:11px; font-weight:500; color:var(--text3); text-transform:uppercase; letter-spacing:0.06em; margin:0.4rem 0 0.5rem; }
.finance-accounts { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.finance-account { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:16px; transition:border-color .15s; }
.finance-account:hover { border-color:var(--border2); }
.finance-account-name { font-size:12px; color:var(--text3); margin-bottom:6px; min-height:14px; }
.finance-account-amount { font-size:20px; font-weight:600; color:var(--text); word-break:break-word; }
.finance-account-currency { font-size:12px; color:var(--text3); margin-top:2px; }

/* ── Shop ─────────────────────────────────────────────────────────────── */
.shop-stats .stat-val { font-size:19px; word-break:break-word; }
.shop-orders { display:flex; flex-direction:column; gap:7px; }
.shop-order { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; transition:border-color .15s; }
.shop-order:hover { border-color:var(--border2); }
.shop-order-main { display:flex; flex-direction:column; gap:3px; min-width:0; }
.shop-order-num { font-size:14px; font-weight:600; color:var(--text); }
.shop-order-cust { font-size:12px; color:var(--text3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shop-order-side { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; }
.shop-order-total { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; }
.shop-order-tags { display:flex; gap:5px; }
.shop-tag { font-size:10px; font-weight:500; padding:2px 7px; border-radius:9px; white-space:nowrap; text-transform:capitalize; }
.shop-tag.pay-paid { background:rgba(34,197,94,.12); color:#86efac; }
.shop-tag.pay-pending { background:rgba(245,158,11,.12); color:#fcd34d; }
.shop-tag.pay-refunded { background:rgba(148,163,184,.14); color:#cbd5e1; }
.shop-tag.ful-no { background:rgba(245,158,11,.12); color:#fcd34d; }
.shop-tag.ful-yes { background:rgba(34,197,94,.12); color:#86efac; }
.shop-orders-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.shop-selectall { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--text2); cursor:pointer; }
.shop-order-check { flex-shrink:0; width:16px; height:16px; cursor:pointer; }
.shop-label-btns { flex-shrink:0; display:inline-flex; gap:5px; }
.shop-label-btn { flex-shrink:0; display:inline-flex; align-items:center; gap:5px; padding:6px 11px; background:transparent; border:1px solid var(--border2); border-radius:var(--r-sm); color:var(--text2); font-size:12px; font-family:inherit; cursor:pointer; transition:all .15s; text-decoration:none; }
.shop-label-btn:hover { border-color:var(--accent); color:var(--accent); }
.shop-label-real { border-color:var(--accent); color:var(--accent); }
.shop-label-real:hover { background:var(--accent); color:#fff; }
.shop-label-dl { border-color:#22c55e; color:#86efac; }
.shop-label-dl:hover { background:rgba(34,197,94,.15); }

/* Label print: start-position grid (2 cols × 4 rows, mirrors the A4 sheet) */
.label-start-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; max-width:220px; }
.label-pos { aspect-ratio:105/74; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; font-family:inherit; color:var(--text2); background:var(--surface2); border:1.5px solid var(--border2); border-radius:var(--r-sm); cursor:pointer; transition:all .15s; }
.label-pos:hover { border-color:var(--accent); color:var(--text); }
.label-pos.sel { background:var(--accent); border-color:var(--accent); color:#fff; }

/* Oura dashboard: toolbar, subtabs, month/year tables, habit correlation */
.oura-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.oura-year-nav { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--text); }
.oura-year-nav button { padding:5px 10px; }
.oura-subtabs { display:flex; gap:4px; background:var(--surface); border:1px solid var(--border2); border-radius:var(--r-sm); padding:3px; }
.oura-subtab { padding:6px 12px; background:transparent; border:none; border-radius:5px; color:var(--text3); font-size:13px; font-family:inherit; cursor:pointer; transition:all .15s; }
.oura-subtab.active { background:var(--surface2); color:var(--text); }
.oura-sync-status { font-size:12px; color:var(--text3); }
.oura-month-block { margin-bottom:22px; }
.oura-month-block h3 { font-size:14px; font-weight:600; color:var(--text); margin:0 0 8px; }
.oura-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-sm); }
.oura-table { border-collapse:collapse; width:100%; font-size:12px; white-space:nowrap; }
.oura-table th, .oura-table td { padding:7px 10px; text-align:right; border-bottom:1px solid var(--border); }
.oura-table th:first-child, .oura-table td:first-child { text-align:left; position:sticky; left:0; background:var(--surface); }
.oura-table th { color:var(--text3); font-weight:500; background:var(--surface); }
.oura-table tbody tr:last-child td { border-bottom:none; }
.oura-avg-row td { font-weight:600; color:var(--text); background:var(--surface2); }
.oura-correlation { margin-top:22px; }
.oura-correlation h3 { font-size:14px; font-weight:600; color:var(--text); margin:0 0 8px; display:flex; align-items:center; gap:6px; }
.oura-correlation-note { font-size:12px; color:var(--text3); margin:0 0 14px; line-height:1.5; max-width:760px; }
.oura-correlation-block { margin-bottom:20px; }
.oura-correlation-block h4 { font-size:13px; font-weight:600; color:var(--text2); margin:0 0 6px; }
.oura-coef-pos { color:#4ade80; }
.oura-coef-neg { color:#f87171; }
.oura-sig { display:inline-block; margin-left:5px; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.oura-sig-strong { background:rgba(34,197,94,.16); color:#4ade80; }
.oura-sig-mod    { background:rgba(34,197,94,.10); color:#86efac; }
.oura-sig-weak   { background:rgba(245,158,11,.14); color:#fcd34d; }
.oura-sig-none   { background:var(--surface2); color:var(--text3); }
.oura-sig-insufficient { background:rgba(148,163,184,.14); color:#94a3b8; }
.oura-coef-cell { cursor:pointer; }
.oura-coef-cell:hover { background:var(--surface2); }
.oura-suggest-chip { cursor:pointer; font-size:11px; }
@media(max-width:520px) {
  .oura-toolbar { flex-direction:column; align-items:stretch; }
  .oura-subtabs { justify-content:center; }
}

/* Oura formatting-rules modal */
.oura-rule-metric { border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 12px; margin-bottom:10px; }
.oura-rule-metric-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:13px; font-weight:600; color:var(--text); }
.oura-rule-metric-head button { padding:4px 10px; font-size:12px; }
.oura-rule-ranges { display:flex; flex-direction:column; gap:6px; }
.oura-rule-range { display:grid; grid-template-columns:1fr auto 1fr auto auto; align-items:center; gap:6px; }
.oura-rule-range .input { padding:6px 8px; font-size:13px; }
.oura-rule-color { width:32px; height:32px; padding:2px; border:1px solid var(--border2); border-radius:var(--r-sm); background:var(--bg); cursor:pointer; }

/* Chat — normal (non-locked) fallback height; see body.chat-locked above
   for the actual layout used while the tab is open. */
#chat-section { display:flex; flex-direction:column; height:60vh; }
.chat-list { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding:4px 4px 10px; }
.chat-msg { display:flex; gap:10px; align-items:flex-start; }
.chat-msg.pinged .chat-msg-text { background:var(--accent-dim); border-color:rgba(124,90,240,.4); }
.chat-msg-body { flex:1; min-width:0; }
.chat-msg-head { display:flex; align-items:baseline; gap:8px; margin-bottom:3px; }
.chat-msg-name { font-size:13px; font-weight:600; color:var(--text); }
.chat-msg-time { font-size:11px; color:var(--text3); }
.chat-msg-text { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 12px; font-size:14px; color:var(--text); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; display:inline-block; max-width:100%; }
.chat-mention { color:var(--accent); font-weight:600; }
.chat-msg-attachment { margin-top:6px; }
.chat-msg-attachment img { display:block; max-width:280px; max-height:280px; border-radius:var(--r-sm); border:1px solid var(--border); cursor:zoom-in; }
.chat-msg-file { display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 12px; font-size:13px; color:var(--text); text-decoration:none; }
.chat-msg-file:hover { border-color:var(--accent); }
.chat-msg-file i { font-size:16px; color:var(--text3); }
.chat-msg-file-size { color:var(--text3); font-size:11px; }
.chat-attach-preview { display:flex; align-items:center; gap:10px; padding:8px 4px 0; flex-shrink:0; }
.chat-attach-preview.hidden { display:none; }
.chat-attach-thumb { position:relative; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border2); border-radius:var(--r-sm); padding:6px 10px; font-size:12px; color:var(--text2); }
.chat-attach-thumb img { width:40px; height:40px; object-fit:cover; border-radius:6px; }
.chat-attach-thumb i.ti-file { font-size:20px; color:var(--text3); }
.chat-attach-remove { cursor:pointer; color:var(--text3); font-size:16px; line-height:1; }
.chat-attach-remove:hover { color:var(--danger, #ef4444); }
.chat-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.82); display:flex; align-items:center; justify-content:center; padding:2rem; z-index:200; cursor:zoom-out; animation:fadeIn .12s ease both; }
.chat-lightbox img { max-width:100%; max-height:100%; border-radius:var(--r-sm); box-shadow:0 12px 40px rgba(0,0,0,.5); cursor:default; }
.chat-composer { position:relative; display:flex; gap:8px; align-items:flex-end; border-top:1px solid var(--border); padding-top:10px; margin-top:6px; flex-shrink:0; }
.chat-input { flex:1; resize:none; max-height:160px; padding:10px 13px; background:var(--bg); border:1px solid var(--border2); border-radius:var(--r-sm); color:var(--text); font-size:14px; font-family:inherit; outline:none; line-height:1.4; overflow-y:auto; }
.chat-input:focus { border-color:var(--accent); }
.chat-input::-webkit-scrollbar { width:6px; }
.chat-input::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
.chat-mention-menu { position:absolute; bottom:calc(100% + 6px); left:0; min-width:220px; max-width:320px; background:var(--surface); border:1px solid var(--border2); border-radius:var(--r-sm); box-shadow:0 8px 28px rgba(0,0,0,0.45); overflow:hidden; z-index:40; }
.chat-mention-opt { display:flex; align-items:center; gap:8px; padding:7px 10px; font-size:13px; color:var(--text); cursor:pointer; }
.chat-mention-opt.active, .chat-mention-opt:hover { background:var(--surface2); }
.chat-mention-opt-user { color:var(--text3); font-size:11px; margin-left:auto; }
.oura-rule-empty { font-size:12px; color:var(--text3); }
.email-loading { font-size:13px; color:var(--text3); padding:6px 0; display:flex; align-items:center; gap:6px; }