/* ─── Design Tokens ─────────────────────────────────────────────────────── */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap');

:root {
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
  --font-display: 'Satoshi', 'Helvetica Neue', sans-serif;
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem; --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.12);
  --content-narrow: 640px; --content-default: 960px; --content-wide: 1200px;
  --priority-red: #dc2626; --priority-red-bg: #fef2f2; --priority-red-border: #fca5a5;
  --priority-orange: #ea580c; --priority-orange-bg: #fff7ed; --priority-orange-border: #fdba74;
  --priority-yellow: #ca8a04; --priority-yellow-bg: #fefce8; --priority-yellow-border: #fde047;
  --priority-green: #16a34a; --priority-green-bg: #f0fdf4; --priority-green-border: #86efac;
}

:root, [data-theme="light"] {
  --color-bg: #f7f6f2; --color-surface: #ffffff; --color-surface-2: #fbfbf9;
  --color-surface-offset: #f3f0ec; --color-divider: #e5e2de; --color-border: #d4d1ca;
  --color-text: #28251d; --color-text-muted: #7a7974; --color-text-faint: #bab9b4;
  --color-text-inverse: #f9f8f4;
  --color-primary: #01696f; --color-primary-hover: #0c4e54; --color-primary-active: #0f3638;
  --color-primary-highlight: #e0f2f3;
  --color-error: #dc2626; --color-success: #437a22; --color-warning: #964219;
}

[data-theme="dark"] {
  --color-bg: #171614; --color-surface: #1c1b19; --color-surface-2: #242320;
  --color-surface-offset: #1d1c1a; --color-divider: #2d2c2a; --color-border: #393836;
  --color-text: #cdccca; --color-text-muted: #908f8d; --color-text-faint: #5a5957;
  --color-text-inverse: #2b2a28;
  --color-primary: #4f98a3; --color-primary-hover: #227f8b; --color-primary-active: #1a626b;
  --color-primary-highlight: #1e3335;
  --color-error: #ef4444; --color-success: #6daa45; --color-warning: #bb653b;
  --priority-red: #ef4444; --priority-red-bg: #2a1515; --priority-red-border: #7f1d1d;
  --priority-orange: #f97316; --priority-orange-bg: #2a1d10; --priority-orange-border: #9a3412;
  --priority-yellow: #eab308; --priority-yellow-bg: #2a2510; --priority-yellow-border: #854d0e;
  --priority-green: #22c55e; --priority-green-bg: #0f2a18; --priority-green-border: #166534;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #171614; --color-surface: #1c1b19; --color-surface-2: #242320;
    --color-surface-offset: #1d1c1a; --color-divider: #2d2c2a; --color-border: #393836;
    --color-text: #cdccca; --color-text-muted: #908f8d; --color-text-faint: #5a5957;
    --color-text-inverse: #2b2a28;
    --color-primary: #4f98a3; --color-primary-hover: #227f8b; --color-primary-active: #1a626b;
    --color-primary-highlight: #1e3335;
    --color-error: #ef4444; --color-success: #6daa45; --color-warning: #bb653b;
    --priority-red: #ef4444; --priority-red-bg: #2a1515; --priority-red-border: #7f1d1d;
    --priority-orange: #f97316; --priority-orange-bg: #2a1d10; --priority-orange-border: #9a3412;
    --priority-yellow: #eab308; --priority-yellow-bg: #2a2510; --priority-yellow-border: #854d0e;
    --priority-green: #22c55e; --priority-green-bg: #0f2a18; --priority-green-border: #166534;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
  }
}

/* ─── Login Screen ──────────────────────────────────────────────────────── */
.login-screen { display:flex; align-items:center; justify-content:center; min-height:100dvh; padding:var(--space-4); background:var(--color-bg); }
.login-card { background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-xl); padding:var(--space-10); width:100%; max-width:400px; box-shadow:var(--shadow-lg); }
.login-logo { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-8); justify-content:center; }
.login-logo h1 { font-size:var(--text-lg); font-weight:700; }
.login-logo span { font-size:var(--text-xs); color:var(--color-text-muted); display:block; }
.login-error { background:var(--priority-red-bg); color:var(--priority-red); font-size:var(--text-sm); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); margin-bottom:var(--space-4); border:1px solid var(--priority-red-border); }
.login-card .form-group { margin-bottom:var(--space-5); }
.login-card .btn-primary { width:100%; justify-content:center; padding:var(--space-3) var(--space-4); }
.totp-input { letter-spacing:0.3em; font-size:var(--text-lg); text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.qr-container { text-align:center; margin:var(--space-4) 0; }
.qr-container img { display:inline-block; border-radius:var(--radius-md); max-width:200px; }
.totp-secret { font-family:monospace; font-size:var(--text-sm); background:var(--color-bg); padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); word-break:break-all; text-align:center; margin:var(--space-3) 0; }

/* ─── Layout ────────────────────────────────────────────────────────────── */
.app-layout { display:flex; min-height:100dvh; }
.sidebar { width:260px; background:var(--color-surface); border-right:1px solid var(--color-divider); display:flex; flex-direction:column; padding:var(--space-6) 0; position:fixed; top:0; left:0; bottom:0; z-index:100; transition:transform 0.3s ease; }
.sidebar-header { padding:0 var(--space-6) var(--space-6); border-bottom:1px solid var(--color-divider); margin-bottom:var(--space-4); }
.sidebar-logo { display:flex; align-items:center; gap:var(--space-3); }
.sidebar-logo svg { flex-shrink:0; }
.sidebar-logo h1 { font-size:var(--text-lg); font-weight:700; color:var(--color-text); line-height:1.2; }
.sidebar-logo span { font-size:var(--text-xs); color:var(--color-text-muted); display:block; margin-top:2px; }
.sidebar-nav { flex:1; padding:0 var(--space-3); overflow-y:auto; }
.nav-section-label { font-size:var(--text-xs); font-weight:600; color:var(--color-text-faint); text-transform:uppercase; letter-spacing:0.05em; padding:var(--space-4) var(--space-3) var(--space-2); }
.nav-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:500; color:var(--color-text-muted); cursor:pointer; width:100%; text-align:left; }
.nav-item:hover { background:var(--color-surface-offset); color:var(--color-text); }
.nav-item.active { background:var(--color-primary-highlight); color:var(--color-primary); }
.nav-item svg { width:18px; height:18px; flex-shrink:0; }
.nav-badge { margin-left:auto; background:var(--color-surface-offset); color:var(--color-text-muted); font-size:var(--text-xs); font-weight:600; padding:1px 8px; border-radius:var(--radius-full); min-width:22px; text-align:center; }
.nav-item.active .nav-badge { background:var(--color-primary); color:var(--color-text-inverse); }
.sidebar-bottom { padding:var(--space-3); border-top:1px solid var(--color-divider); margin-top:auto; }
.sidebar-user { padding:var(--space-2) var(--space-3); position:relative; }
.user-selector { display:flex; align-items:center; gap:var(--space-3); cursor:pointer; padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); width:100%; }
.user-selector:hover { background:var(--color-surface-offset); }
.user-avatar { width:34px; height:34px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:var(--text-sm); flex-shrink:0; }
.user-info { flex:1; min-width:0; }
.user-name { font-size:var(--text-sm); font-weight:600; color:var(--color-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:var(--text-xs); color:var(--color-text-muted); }
.main-content { flex:1; margin-left:260px; display:flex; flex-direction:column; min-height:100dvh; }

/* ─── Top Bar ───────────────────────────────────────────────────────────── */
.top-bar { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-8); border-bottom:1px solid var(--color-divider); background:var(--color-surface); position:sticky; top:0; z-index:50; }
.mobile-menu-btn { display:none; padding:var(--space-2); border-radius:var(--radius-md); }
.mobile-menu-btn:hover { background:var(--color-surface-offset); }
.search-bar { flex:1; max-width:420px; position:relative; }
.search-bar input { width:100%; padding:var(--space-2) var(--space-4); padding-left:38px; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); font-size:var(--text-sm); }
.search-bar input:focus { border-color:var(--color-primary); outline:none; box-shadow:0 0 0 3px var(--color-primary-highlight); }
.search-bar svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--color-text-faint); }
.top-bar-actions { display:flex; align-items:center; gap:var(--space-2); margin-left:auto; }
.btn { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:600; cursor:pointer; border:1px solid transparent; white-space:nowrap; }
.btn-primary { background:var(--color-primary); color:white; }
.btn-primary:hover { background:var(--color-primary-hover); }
.btn-secondary { background:var(--color-surface); color:var(--color-text); border-color:var(--color-border); }
.btn-secondary:hover { background:var(--color-surface-offset); }
.btn-ghost { background:transparent; color:var(--color-text-muted); }
.btn-ghost:hover { background:var(--color-surface-offset); color:var(--color-text); }
.btn-danger { background:var(--color-error); color:white; }
.btn-danger:hover { opacity:0.9; }
.btn-sm { padding:var(--space-1) var(--space-3); font-size:var(--text-xs); }
.btn svg { width:16px; height:16px; }
.theme-toggle { padding:var(--space-2); border-radius:var(--radius-md); color:var(--color-text-muted); }
.theme-toggle:hover { background:var(--color-surface-offset); color:var(--color-text); }

/* ─── View Toggle ───────────────────────────────────────────────────────── */
.view-toggle { display:flex; gap:2px; background:var(--color-surface-offset); border-radius:var(--radius-md); padding:2px; }
.view-toggle button { padding:var(--space-1) var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-xs); font-weight:600; color:var(--color-text-muted); }
.view-toggle button.active { background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-sm); }

/* ─── Stats Bar ─────────────────────────────────────────────────────────── */
.stats-bar { display:flex; gap:var(--space-4); padding:var(--space-6) var(--space-8); overflow-x:auto; }
.stat-card { flex:1; min-width:100px; padding:var(--space-4) var(--space-5); background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); cursor:pointer; transition:all var(--transition-interactive); }
.stat-card:hover { border-color:var(--color-border); box-shadow:var(--shadow-sm); }
.stat-card.active { border-color:var(--color-primary); box-shadow:0 0 0 1px var(--color-primary); }
.stat-value { font-size:var(--text-xl); font-weight:700; font-variant-numeric:tabular-nums; line-height:1; margin-bottom:var(--space-1); }
.stat-label { font-size:var(--text-xs); color:var(--color-text-muted); font-weight:500; }
.stat-card[data-priority="red"] .stat-value { color:var(--priority-red); }
.stat-card[data-priority="orange"] .stat-value { color:var(--priority-orange); }
.stat-card[data-priority="yellow"] .stat-value { color:var(--priority-yellow); }
.stat-card[data-priority="green"] .stat-value { color:var(--priority-green); }

/* ─── Notes Grid ────────────────────────────────────────────────────────── */
.notes-area { flex:1; padding:0 var(--space-8) var(--space-8); }
.notes-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); gap:var(--space-4); flex-wrap:wrap; }
.notes-header h2 { font-size:var(--text-lg); font-weight:700; }
.notes-count { font-size:var(--text-xs); color:var(--color-text-muted); font-weight:500; }
.notes-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--space-4); }

/* ─── Note Card ─────────────────────────────────────────────────────────── */
.note-card { background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:all var(--transition-interactive); position:relative; }
.note-card:hover { box-shadow:var(--shadow-md); border-color:var(--color-border); transform:translateY(-1px); }
.note-card.done { opacity:0.6; }
.note-card-priority { height:4px; width:100%; }
.note-card-priority[data-priority="red"] { background:var(--priority-red); }
.note-card-priority[data-priority="orange"] { background:var(--priority-orange); }
.note-card-priority[data-priority="yellow"] { background:var(--priority-yellow); }
.note-card-priority[data-priority="green"] { background:var(--priority-green); }
.note-card-body { padding:var(--space-4); }
.note-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-2); }
.note-card-title { font-size:var(--text-sm); font-weight:700; color:var(--color-text); line-height:1.35; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.note-card.done .note-card-title { text-decoration:line-through; }
.note-card-content { font-size:var(--text-xs); color:var(--color-text-muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:var(--space-3); }
.note-card-meta { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; }
.note-card-author { display:flex; align-items:center; gap:var(--space-2); }
.note-card-author .user-avatar { width:22px; height:22px; font-size:10px; }
.note-card-author span { font-size:var(--text-xs); color:var(--color-text-muted); }
.note-card-tags { display:flex; gap:var(--space-1); flex-wrap:wrap; margin-top:var(--space-2); }
.tag { font-size:10px; font-weight:600; padding:1px 6px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:0.03em; }
.tag-private { background:var(--color-surface-offset); color:var(--color-text-muted); }
.tag-delegated { background:var(--color-primary-highlight); color:var(--color-primary); }
.tag-nodelete { background:var(--priority-green-bg); color:var(--priority-green); }
.tag-overdue { background:var(--priority-red-bg); color:var(--priority-red); }
.note-card-deadline { font-size:var(--text-xs); color:var(--color-text-faint); display:flex; align-items:center; gap:4px; }
.note-card-deadline svg { width:12px; height:12px; }

/* ─── Compact List View ─────────────────────────────────────────────────── */
.notes-list { display:flex; flex-direction:column; gap:2px; }
.note-list-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--color-surface); border-radius:var(--radius-md); cursor:pointer; transition:background var(--transition-interactive); border-left:4px solid transparent; }
.note-list-item:hover { background:var(--color-surface-offset); }
.note-list-item.done { opacity:0.5; }
.note-list-item[data-priority="red"] { border-left-color:var(--priority-red); }
.note-list-item[data-priority="orange"] { border-left-color:var(--priority-orange); }
.note-list-item[data-priority="yellow"] { border-left-color:var(--priority-yellow); }
.note-list-item[data-priority="green"] { border-left-color:var(--priority-green); }
.note-list-date { font-size:var(--text-xs); color:var(--color-text-faint); font-variant-numeric:tabular-nums; min-width:75px; flex-shrink:0; }
.note-list-title { flex:1; font-size:var(--text-sm); font-weight:600; color:var(--color-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-list-item.done .note-list-title { text-decoration:line-through; }
.note-list-author { display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; }
.note-list-author .user-avatar { width:22px; height:22px; font-size:10px; }
.note-list-author-name { font-size:var(--text-xs); color:var(--color-text-muted); min-width:80px; }
.note-list-tags { display:flex; gap:var(--space-1); flex-shrink:0; }
.note-list-company { font-size:var(--text-xs); color:var(--color-text-muted); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─── Modal ─────────────────────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:oklch(0 0 0 / 0.5); z-index:200; align-items:center; justify-content:center; padding:var(--space-4); }
.modal-overlay.active { display:flex; }
.modal { background:var(--color-surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); width:100%; max-width:560px; max-height:90vh; overflow-y:auto; animation:modal-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes modal-in { from { opacity:0; transform:scale(0.96) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--color-divider); }
.modal-header h3 { font-size:var(--text-lg); font-weight:700; }
.modal-close { padding:var(--space-1); border-radius:var(--radius-sm); color:var(--color-text-muted); }
.modal-close:hover { background:var(--color-surface-offset); color:var(--color-text); }
.modal-body { padding:var(--space-6); }
.form-group { margin-bottom:var(--space-5); }
.form-label { display:block; font-size:var(--text-sm); font-weight:600; color:var(--color-text); margin-bottom:var(--space-2); }
.form-input { width:100%; padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg); font-size:var(--text-sm); }
.form-input:focus { border-color:var(--color-primary); outline:none; box-shadow:0 0 0 3px var(--color-primary-highlight); }
textarea.form-input { min-height:100px; resize:vertical; }
select.form-input { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%237a7974' stroke-width='2'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.form-hint { font-size:var(--text-xs); color:var(--color-text-faint); margin-top:var(--space-1); }
.form-error { font-size:var(--text-xs); color:var(--color-error); margin-top:var(--space-1); }

.priority-selector { display:flex; gap:var(--space-2); }
.priority-btn { flex:1; padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); font-size:var(--text-xs); font-weight:600; text-align:center; border:2px solid transparent; cursor:pointer; transition:all var(--transition-interactive); }
.priority-btn[data-priority="red"] { background:var(--priority-red-bg); color:var(--priority-red); border-color:var(--priority-red-border); }
.priority-btn[data-priority="orange"] { background:var(--priority-orange-bg); color:var(--priority-orange); border-color:var(--priority-orange-border); }
.priority-btn[data-priority="yellow"] { background:var(--priority-yellow-bg); color:var(--priority-yellow); border-color:var(--priority-yellow-border); }
.priority-btn[data-priority="green"] { background:var(--priority-green-bg); color:var(--priority-green); border-color:var(--priority-green-border); }
.priority-btn:not(.active) { opacity:0.45; border-color:transparent; }
.priority-btn.active { opacity:1; box-shadow:var(--shadow-sm); }
.form-row { display:flex; gap:var(--space-4); }
.form-row > * { flex:1; }
.checkbox-group { display:flex; gap:var(--space-6); flex-wrap:wrap; }
.checkbox-label { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--color-text); cursor:pointer; }
.checkbox-label input[type="checkbox"] { width:18px; height:18px; accent-color:var(--color-primary); cursor:pointer; }
.modal-footer { display:flex; justify-content:flex-end; gap:var(--space-3); padding:var(--space-4) var(--space-6); border-top:1px solid var(--color-divider); }

/* ─── Collapsible Section ───────────────────────────────────────────────── */
.collapsible-header { display:flex; align-items:center; gap:var(--space-2); cursor:pointer; font-size:var(--text-sm); font-weight:600; color:var(--color-text-muted); padding:var(--space-3) 0; border-top:1px solid var(--color-divider); margin-top:var(--space-4); }
.collapsible-header svg { transition:transform 0.2s ease; width:16px; height:16px; }
.collapsible-header.open svg { transform:rotate(90deg); }
.collapsible-body { display:none; padding-top:var(--space-3); }
.collapsible-body.open { display:block; }

/* ─── Detail Modal ──────────────────────────────────────────────────────── */
.detail-priority-bar { height:6px; width:100%; }
.detail-priority-bar[data-priority="red"] { background:var(--priority-red); }
.detail-priority-bar[data-priority="orange"] { background:var(--priority-orange); }
.detail-priority-bar[data-priority="yellow"] { background:var(--priority-yellow); }
.detail-priority-bar[data-priority="green"] { background:var(--priority-green); }
.detail-content { padding:var(--space-6); }
.detail-title { font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-3); }
.detail-text { font-size:var(--text-base); color:var(--color-text-muted); line-height:1.7; white-space:pre-wrap; margin-bottom:var(--space-6); }
.detail-meta { display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4); background:var(--color-bg); border-radius:var(--radius-md); margin-bottom:var(--space-4); }
.detail-meta-row { display:flex; align-items:center; justify-content:space-between; font-size:var(--text-sm); }
.detail-meta-label { color:var(--color-text-muted); font-weight:500; }
.detail-meta-value { color:var(--color-text); font-weight:600; }
.detail-actions { display:flex; gap:var(--space-3); flex-wrap:wrap; }

/* ─── Settings Panel ────────────────────────────────────────────────────── */
.settings-panel { max-width:var(--content-default); margin:0 auto; padding:var(--space-8); }
.settings-section { background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:var(--space-6); margin-bottom:var(--space-6); }
.settings-section h3 { font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-5); padding-bottom:var(--space-3); border-bottom:1px solid var(--color-divider); }
.user-list { display:flex; flex-direction:column; gap:var(--space-3); }
.user-list-item { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-4); background:var(--color-bg); border-radius:var(--radius-md); }
.user-list-item .user-info { flex:1; }
.user-list-actions { display:flex; gap:var(--space-2); }
.color-options { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.color-option { width:32px; height:32px; border-radius:var(--radius-full); cursor:pointer; border:3px solid transparent; transition:border-color var(--transition-interactive); }
.color-option.active, .color-option:hover { border-color:var(--color-text); }
.toggle-switch { position:relative; width:44px; height:24px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:var(--color-border); border-radius:var(--radius-full); transition:0.3s; }
.toggle-slider::before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:white; border-radius:50%; transition:0.3s; }
.toggle-switch input:checked + .toggle-slider { background:var(--color-primary); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(20px); }

/* ─── Empty State ───────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:var(--space-16) var(--space-8); }
.empty-state svg { width:64px; height:64px; color:var(--color-text-faint); margin:0 auto var(--space-4); }
.empty-state h3 { font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-2); }
.empty-state p { font-size:var(--text-sm); color:var(--color-text-muted); margin:0 auto var(--space-6); max-width:360px; }

/* ─── Mobile ────────────────────────────────────────────────────────────── */
.mobile-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:oklch(0 0 0 / 0.3); z-index:99; }

@media (max-width: 768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .mobile-overlay.active { display:block; }
  .main-content { margin-left:0; }
  .mobile-menu-btn { display:flex; }
  .stats-bar { padding:var(--space-4); gap:var(--space-3); }
  .stat-card { min-width:90px; padding:var(--space-3); }
  .stat-value { font-size:var(--text-lg); }
  .notes-area { padding:0 var(--space-4) var(--space-4); }
  .notes-grid { grid-template-columns:1fr; }
  .top-bar { padding:var(--space-3) var(--space-4); }
  .form-row { flex-direction:column; gap:var(--space-4); }
  .checkbox-group { flex-direction:column; gap:var(--space-3); }
  .priority-selector { flex-wrap:wrap; }
  .note-list-company, .note-list-tags { display:none; }
  .note-list-author-name { display:none; }
  .settings-panel { padding:var(--space-4); }
}

.app-footer { padding:var(--space-4) var(--space-8); text-align:center; font-size:var(--text-xs); color:var(--color-text-faint); border-top:1px solid var(--color-divider); }
.app-footer a { color:var(--color-text-muted); text-decoration:none; }
.app-footer a:hover { color:var(--color-primary); }

/* Utility */
.hidden { display:none !important; }
.pw-strength { display:flex; gap:2px; margin-top:var(--space-2); }
.pw-strength-bar { height:4px; flex:1; border-radius:2px; background:var(--color-divider); transition:background 0.3s; }
.pw-strength-bar.active { background:var(--color-error); }
.pw-strength-bar.medium { background:var(--priority-yellow); }
.pw-strength-bar.strong { background:var(--color-success); }

/* Backup Codes Grid */
.backup-codes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
}
.backup-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
}
.backup-code code {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}

/* Backup List */
.backup-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.backup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
}
.backup-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}