/* ============================================================
       PERSONAL OS — PHASE 1 + PHASE 2
       A single-file SPA life operating system
       ============================================================ */

    /* ─── CSS Reset & Base ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; overflow: hidden; }
    body {
      font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
      background: #111111;
      color: #d1cbb6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overscroll-behavior-y: none;
    }
    input, textarea, select, button { font-family: inherit; color: inherit; }
    button { cursor: pointer; border: none; background: none; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
    textarea { resize: vertical; }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; }
    ::placeholder { color: #5a5a5a; }

    /* ─── Design Tokens ─── */
    :root {
      --bg-primary: #111111;
      --bg-secondary: #171717;
      --bg-tertiary: #1e1e1e;
      --bg-active: #2a2a2a;
      --border: #272727;
      --border-active: #4a4a4a;
      --text-primary: #d1cbb6;
      --text-secondary: #8a8a8a;
      --text-muted: #5a5a5a;
      --accent-beige: #c2b5a5;
      --accent-rose: #c9a9a9;
      --accent-sage: #a3b5a3;
      --accent-clay: #c4a882;
      --success: #7c9473;
      --danger: #c47065;
    }

    /* ─── App Shell ─── */
    #app-shell { position: relative; width: 100%; height: 100%; z-index: 10; display: flex; flex-direction: column; }

    /* ─── Header ─── */
    .app-header {
      position: sticky; top: 0; z-index: 50;
      height: 56px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 16px;
      background: rgba(17, 17, 17, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .app-header-left, .app-header-right { display: flex; align-items: center; gap: 8px; }
    .app-header-center { position: absolute; left: 50%; transform: translateX(-50%); font-size: 15px; font-weight: 500; color: var(--text-primary); }
    .app-icon { width: 22px; height: 22px; object-fit: contain; display: block; }
    .app-title { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
    .header-date { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-secondary); }
    .header-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text-secondary); transition: all 0.15s ease; }
    .header-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
    .header-btn:active { transform: scale(0.95); }

    /* ─── Main Content ─── */
    .app-main { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }
    .content-wrapper { max-width: 720px; margin: 0 auto; padding: 0 16px 80px; }
    @media (min-width: 768px) { .content-wrapper { padding: 0 24px 40px; } }

    /* ─── Bottom Navigation (Mobile) ─── */
    .bottom-nav {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
      height: 64px;
      display: flex; align-items: center; justify-content: space-around;
      background: rgba(17, 17, 17, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-top: 1px solid var(--border);
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 56px; height: 48px; border-radius: 10px; transition: all 0.15s ease; color: var(--text-muted); }
    .nav-item svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .nav-item .nav-label { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; }
    .nav-item.active { color: var(--accent-beige); }
    .nav-item:active { opacity: 0.7; }

    /* ─── Desktop Sidebar ─── */
    @media (min-width: 1024px) {
      .bottom-nav { display: none; }
      .app-shell-desktop { flex-direction: row !important; }
      .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 100;
        width: 200px; flex-shrink: 0;
        display: flex; flex-direction: column;
        background: rgba(17, 17, 17, 0.95);
        backdrop-filter: blur(16px);
        border-right: 1px solid var(--border);
        padding: 16px 8px;
      }
      .sidebar-header { display: flex; align-items: center; gap: 10px; padding: 8px 12px 20px; }
      .sidebar-header .app-icon { width: 26px; height: 26px; }
      .sidebar-header .app-title { font-size: 13px; color: var(--text-secondary); }
      .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
      .sidebar-item {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px; border-radius: 8px;
        color: var(--text-muted); font-size: 13px; font-weight: 500;
        transition: all 0.15s ease; position: relative;
      }
      .sidebar-item:hover { background: var(--bg-secondary); color: var(--text-secondary); }
      .sidebar-item.active { background: var(--bg-active); color: var(--accent-beige); }
      .sidebar-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--accent-beige); border-radius: 0 2px 2px 0; }
      .sidebar-item svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
      .sidebar-footer { padding: 8px 12px; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }
      .app-main { margin-left: 200px; }
      .content-wrapper { max-width: 680px; }
    .content-wrapper.calendar-wide { max-width: 1100px; }
    .content-wrapper.planner-wide { max-width: 1120px; }
    @media (min-width: 860px) { .content-wrapper.health-wide { max-width: 1120px; } }
    }
    @media (max-width: 1023px) { .sidebar { display: none; } }

    /* ─── Typography ─── */
    .text-display { font-family: 'Geist', sans-serif; font-size: 32px; font-weight: 300; letter-spacing: -0.02em; color: var(--text-primary); }
    .text-title { font-family: 'Geist', sans-serif; font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--text-primary); }
    .text-subtitle { font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 500; color: var(--text-primary); }
    .text-body { font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 400; color: var(--text-primary); line-height: 1.5; }
    .text-caption { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 400; color: var(--text-secondary); }
    .text-mono { font-family: 'Geist Mono', monospace; font-size: 14px; font-weight: 400; color: var(--text-primary); }
    .text-nav { font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
    .text-tiny { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }

    /* ─── Cards ─── */
    .card {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px;
      transition: transform 0.15s ease, background-color 0.2s ease;
    }
    .card:active { transform: scale(0.98); }
    .card-hover:hover { background: var(--bg-tertiary); }

    /* ─── Section Labels ─── */
    .section-label { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }

    /* ─── Buttons ─── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      padding: 10px 16px; border-radius: 6px;
      font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 500;
      transition: all 0.15s ease; border: 1px solid transparent;
    }
    .btn-primary { background: var(--accent-beige); color: #111; }
    .btn-primary:hover { filter: brightness(1.1); }
    .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border); }
    .btn-secondary:hover { background: var(--bg-active); }
    .btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
    .btn-danger:hover { background: rgba(196, 112, 101, 0.1); }
    .btn-ghost { background: transparent; color: var(--text-secondary); }
    .btn-ghost:hover { color: var(--text-primary); background: var(--bg-tertiary); }
    .btn-sm { padding: 6px 12px; font-size: 12px; }
    .btn-full { width: 100%; }

    /* ─── Pills ─── */
    .pill {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 6px 12px; border-radius: 9999px;
      font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 400;
      background: var(--bg-tertiary); color: var(--text-secondary);
      transition: all 0.15s ease; cursor: pointer; border: 1px solid transparent; user-select: none;
    }
    .pill:hover { background: var(--bg-active); color: var(--text-primary); }
    .pill.active { background: var(--bg-active); color: var(--accent-beige); border-color: var(--border-active); }

    /* ─── Inputs ─── */
    .input {
      width: 100%; padding: 10px 12px;
      background: var(--bg-tertiary); color: var(--text-primary);
      border: 1px solid var(--border); border-radius: 8px;
      font-size: 14px; outline: none;
      transition: border-color 0.2s ease;
    }
    .input:focus { border-color: var(--border-active); }
    .input:disabled { opacity: 0.5; cursor: not-allowed; }
    .select { appearance: none; cursor: pointer; }
    .textarea { min-height: 80px; line-height: 1.5; }

    /* ─── Forms ─── */
    .form-group { margin-bottom: 16px; }
    .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
    .form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

    /* ─── Empty State ─── */
    .empty-state { text-align: center; padding: 48px 24px; }
    .empty-state-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.4; }
    .empty-state-title { font-size: 15px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
    .empty-state-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

    /* ─── Placeholder Cards ─── */
    .placeholder-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    @media (min-width: 640px) { .placeholder-grid { grid-template-columns: repeat(3, 1fr); } }
    .placeholder-card {
      background: var(--bg-secondary); border: 1px solid var(--border);
      border-radius: 10px; padding: 16px;
      transition: all 0.15s ease;
    }
    .placeholder-card:hover { background: var(--bg-tertiary); }
    .placeholder-card-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 14px; }
    .placeholder-card-title { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
    .placeholder-card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
    .placeholder-card-badge { display: inline-block; margin-top: 8px; font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--bg-tertiary); color: var(--text-muted); }

    /* ─── Coming Soon Grid Items ─── */
    .feature-list { display: flex; flex-direction: column; gap: 8px; }
    .feature-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      background: var(--bg-secondary); border: 1px solid var(--border);
      border-radius: 8px;
    }
    .feature-item-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
    .feature-item-text { flex: 1; }
    .feature-item-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .feature-item-desc { font-size: 11px; color: var(--text-muted); }
    .feature-item-badge { font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--bg-tertiary); color: var(--text-muted); white-space: nowrap; }

    /* ─── Area Badge ─── */
    .area-badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 8px; border-radius: 4px;
      font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.04em;
    }
    .area-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

    /* ─── Tag Pill ─── */
    .tag-pill {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 8px; border-radius: 4px;
      font-family: 'Geist Mono', monospace; font-size: 10px;
      background: var(--bg-tertiary); color: var(--text-secondary);
    }

    /* ─── Color Picker ─── */
    .color-options { display: flex; gap: 8px; flex-wrap: wrap; }
    .color-option { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.15s ease; }
    .color-option:hover { transform: scale(1.1); }
    .color-option.selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary); }

    /* ─── Modal System ─── */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      display: flex; align-items: flex-end; justify-content: center;
      opacity: 0; transition: opacity 0.2s ease;
    }
    .modal-overlay.visible { opacity: 1; }
    .modal-panel {
      background: var(--bg-secondary);
      border-radius: 16px 16px 0 0;
      width: 100%; max-height: 92vh;
      display: flex; flex-direction: column;
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .modal-overlay.visible .modal-panel { transform: translateY(0); }
    @media (min-width: 640px) {
      .modal-overlay { align-items: center; }
      .modal-panel { max-width: 520px; border-radius: 16px; max-height: 85vh; box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
    }
    @media (min-width: 640px) {
      .modal-panel.writing-modal { width: calc(100vw - 48px); max-width: 980px; max-height: 92vh; }
      .modal-panel.writing-modal .modal-body { padding: 24px; }
    }
    .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .modal-title { font-size: 15px; font-weight: 500; color: var(--text-primary); }
    .modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text-secondary); font-size: 18px; transition: all 0.15s ease; }
    .modal-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }
    .modal-body { flex: 1; overflow-y: auto; padding: 20px; }
    .modal-footer { display: flex; gap: 10px; padding: 12px 20px 20px; border-top: 1px solid var(--border); flex-shrink: 0; }
    .modal-footer .btn { flex: 1; }

    /* ─── Toast System ─── */
    .toast-container { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
    .toast {
      background: var(--bg-active);
      border-radius: 8px;
      padding: 12px 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      font-size: 13px; color: var(--text-primary);
      opacity: 0; transform: translateY(20px);
      transition: all 0.3s ease;
      pointer-events: auto;
      max-width: 90vw; text-align: center;
    }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast-success { border-left: 3px solid var(--accent-sage); }
    .toast-error { border-left: 3px solid var(--danger); }

    /* ─── Confirm Dialog ─── */
    .confirm-body { text-align: center; padding: 8px 0 16px; }
    .confirm-title { font-size: 16px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
    .confirm-message { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
    .confirm-input { margin-top: 16px; text-align: center; }

    /* ─── Settings Specific ─── */
    .settings-section { margin-bottom: 32px; }
    .settings-section-title { font-size: 15px; font-weight: 500; color: var(--text-primary); margin-bottom: 12px; }
    .settings-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
    .settings-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; border-bottom: 1px solid var(--border);
    }
    .settings-row:last-child { border-bottom: none; }
    .settings-row-left { display: flex; align-items: center; gap: 10px; }
    .settings-row-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
    .settings-row-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .settings-row-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

    /* ─── Toggle Switch ─── */
    .toggle-switch { position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--bg-tertiary); border: 1px solid var(--border); cursor: pointer; transition: all 0.2s; flex-shrink: 0; }
    .toggle-switch.on { background: var(--accent-beige); border-color: var(--accent-beige); }
    .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-secondary); transition: all 0.2s; }
    .toggle-switch.on::after { left: 20px; background: #111; }

    /* ─── Background Animation Settings ─── */
    .bg-color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
    .bg-color-swatch { width: 100%; aspect-ratio: 1; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: all 0.15s; position: relative; }
    .bg-color-swatch:hover { transform: scale(1.08); }
    .bg-color-swatch.active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary); }
    .bg-color-swatch .swatch-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.15s; }
    .bg-color-swatch.active .swatch-check { opacity: 1; }
    .bg-color-add { width: 100%; aspect-ratio: 1; border-radius: 8px; border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 20px; cursor: pointer; transition: all 0.15s; background: transparent; }
    .bg-color-add:hover { border-color: var(--border-active); color: var(--text-primary); background: var(--bg-tertiary); }
    .color-input-row { display: flex; gap: 8px; align-items: center; }
    .color-input-row input[type="color"] { width: 44px; height: 36px; border: none; border-radius: 8px; cursor: pointer; background: none; padding: 2px; }
    .color-input-row input[type="text"] { flex: 1; }

    .area-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; transition: background 0.15s; }
    .area-row:hover { background: var(--bg-tertiary); }
    .area-row-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
    .area-row-name { flex: 1; font-size: 13px; color: var(--text-primary); }
    .area-row-actions { display: flex; gap: 4px; }
    .area-row-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text-muted); font-size: 13px; transition: all 0.15s; }
    .area-row-btn:hover { background: var(--bg-active); color: var(--text-primary); }
    .tag-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; transition: background 0.15s; }
    .tag-row:hover { background: var(--bg-tertiary); }
    .tag-row-name { flex: 1; font-size: 12px; color: var(--text-primary); font-family: 'Geist Mono', monospace; }
    .tag-row-type { font-size: 10px; color: var(--text-muted); font-family: 'Geist Mono', monospace; }

    /* ─── More Menu Sheet (Mobile) ─── */
    .more-sheet-overlay {
      position: fixed; inset: 0; z-index: 150;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0; transition: opacity 0.2s ease;
      pointer-events: none;
    }
    .more-sheet-overlay.visible { opacity: 1; pointer-events: auto; }
    .more-sheet {
      position: fixed; bottom: 64px; left: 16px; right: 16px; z-index: 151;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 8px;
      max-height: calc(100vh - 88px); overflow-y: auto;
      transform: translateY(20px); opacity: 0;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }
    .more-sheet-overlay.visible + .more-sheet { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .more-sheet-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px; border-radius: 10px;
      color: var(--text-primary); font-size: 14px;
      transition: background 0.15s;
    }
    .more-sheet-item:hover { background: var(--bg-tertiary); }
    .more-sheet-item svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

    /* ─── Ambient Dust Canvas ─── */
    #dust-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

    /* ─── Loading Screen ─── */
    .loading-screen { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); transition: opacity 0.3s ease; }
    .loading-screen.hidden { opacity: 0; pointer-events: none; }
    .module-loading-state { min-height: 280px; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
    .module-loading-card { width: min(100%, 420px); padding: 28px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-secondary); text-align: center; }
    .module-loading-spinner { width: 28px; height: 28px; margin: 0 auto 16px; border: 2px solid rgba(255,255,255,0.10); border-top-color: var(--accent-beige); border-radius: 50%; animation: module-loading-spin 0.75s linear infinite; }
    .module-loading-title { color: var(--text-primary); font-size: 15px; font-weight: 600; }
    .module-loading-desc { margin-top: 7px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
    .history-load-more { display: flex; justify-content: center; padding: 14px 0 4px; }
    @keyframes module-loading-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .module-loading-spinner { animation: none; border-top-color: rgba(255,255,255,0.10); } }
    .loading-icon { width: 56px; height: 56px; object-fit: contain; animation: loadingPulse 1.5s ease-in-out 2; }
    @keyframes loadingPulse { 0%, 100% { transform: scale(0.95); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } }

    /* ─── 404 Screen ─── */
    .not-found { text-align: center; padding: 80px 24px; }
    .not-found-title { font-size: 18px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
    .not-found-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }

    /* ─── Home Screen Specific ─── */
    .greeting-block { padding-top: 24px; margin-bottom: 24px; }
    .greeting-text { font-size: 22px; font-weight: 400; color: var(--text-primary); margin-bottom: 4px; }
    .greeting-date { font-size: 14px; color: var(--text-secondary); }
    .focus-card { margin-bottom: 12px; }
    .focus-label { color: var(--accent-clay); margin-bottom: 8px; }
    .focus-task { font-size: 15px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
    .focus-meta { display: flex; align-items: center; gap: 8px; }
    .habits-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 24px; }
    .habit-day { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 11px; flex-shrink: 0; }
    .habit-day.done { background: var(--accent-sage); color: #111; }
    .habit-day.current { background: var(--bg-tertiary); border: 1px solid var(--border-active); color: var(--text-primary); }
    .habit-day.future { background: var(--bg-tertiary); color: var(--text-muted); }
    .areas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; }
    @media (min-width: 640px) { .areas-grid { grid-template-columns: repeat(3, 1fr); } }
    .area-card { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.15s ease; }
    .area-card:hover { background: var(--bg-tertiary); }
    .area-card:active { transform: scale(0.98); }
    .area-card-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .area-card-info { flex: 1; min-width: 0; }
    .area-card-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .area-card-count { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); margin-top: 1px; }
    .quick-log-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 24px; }
    .quick-log-pill { white-space: nowrap; }
    .activity-list { display: flex; flex-direction: column; gap: 8px; }
    .activity-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-secondary); border-radius: 8px; }
    .activity-icon { font-size: 14px; flex-shrink: 0; }
    .activity-text { flex: 1; font-size: 12px; color: var(--text-secondary); }
    .activity-time { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); white-space: nowrap; }

    /* ═══════════════════════════════════════════════════════════════
       PHASE 2 — PLANNER / TASK SYSTEM CSS
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Planner Layout ─── */
    .planner-header { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; margin-bottom: 20px; }
    .planner-title { font-size: 22px; font-weight: 400; color: var(--text-primary); }
    .planner-actions { display: flex; gap: 8px; }

    /* ─── Planner Tabs ─── */
    .planner-tabs { display: flex; gap: 4px; margin-bottom: 20px; overflow-x: auto; }
    .planner-tab {
      padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
      color: var(--text-secondary); background: transparent; white-space: nowrap;
      transition: all 0.15s ease; border: 1px solid transparent; cursor: pointer;
    }
    .planner-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
    .planner-tab.active { color: var(--accent-beige); background: var(--bg-active); border-color: var(--border); }

    /* Planner visual refresh */
    .planner-page { display: flex; flex-direction: column; gap: 12px; }
    .planner-hero { position: relative; overflow: hidden; padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.09); background: radial-gradient(circle at 12% 18%, rgba(196,168,130,0.26), transparent 32%), radial-gradient(circle at 86% 10%, rgba(163,181,163,0.18), transparent 31%), linear-gradient(135deg, rgba(196,168,130,0.16), rgba(23,23,23,0.94) 58%); box-shadow: 0 18px 46px rgba(0,0,0,0.22); }
    .planner-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent-clay), var(--accent-beige), var(--accent-sage), #38bdf8); opacity: 0.9; }
    .planner-hero-grid { display: grid; grid-template-columns: 1fr; gap: 16px; position: relative; z-index: 1; }
    .planner-kicker { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent-clay); margin-bottom: 8px; }
    .planner-hero-title { font-size: 27px; line-height: 1.08; font-weight: 650; color: var(--text-primary); margin-bottom: 8px; }
    .planner-hero-sub { font-size: 12px; line-height: 1.5; color: var(--text-secondary); max-width: 620px; }
    .planner-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
    .planner-action { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); color: var(--text-primary); font-size: 12px; text-decoration: none; cursor: pointer; }
    .planner-action:hover { background: rgba(255,255,255,0.075); border-color: rgba(255,255,255,0.14); }
    .planner-action.primary { background: rgba(196,168,130,0.18); border-color: rgba(196,168,130,0.34); color: var(--accent-beige); }
    .planner-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .planner-stat-card { min-height: 92px; padding: 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(145deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(255,255,255,0.035)); }
    .planner-stat-label { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; }
    .planner-stat-value { font-size: 23px; font-weight: 650; color: var(--text-primary); line-height: 1; }
    .planner-stat-sub { font-size: 11px; color: var(--text-secondary); margin-top: 6px; line-height: 1.35; }
    .planner-panel { padding: 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(23,23,23,0.78); overflow: hidden; }
    .planner-panel-title { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: 12px; }
    .planner-overview-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .planner-page .day-nav { margin-bottom: 0; padding-bottom: 2px; }
    .planner-page .day-chip { min-width: 58px; background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.08); }
    .planner-page .day-chip:hover { background: rgba(255,255,255,0.06); }
    .planner-page .day-chip.selected { background: rgba(196,168,130,0.15); border-color: rgba(196,168,130,0.42); }
    .planner-page .progress-section, .planner-page .quick-add { margin-bottom: 0; }
    .planner-overview-grid .quick-add { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.075); }
    .planner-page .quick-add-input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); }
    .planner-page .quick-add-input:focus { border-color: rgba(196,168,130,0.48); box-shadow: 0 0 0 3px rgba(196,168,130,0.08); }
    .planner-page .task-section, .planner-page .upcoming-group, .planner-page .rule-card { padding: 14px; margin-bottom: 0; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: rgba(23,23,23,0.78); }
    .planner-page .task-section-header { margin-bottom: 12px; }
    .planner-page .task-row { background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.075); }
    .planner-page .task-row:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
    .planner-page .completed-toggle { padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(23,23,23,0.62); }
    .planner-page .completed-tasks.open { padding-top: 8px; }
    .planner-page .empty-state { margin-bottom: 0; border-radius: 10px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); }
    @media (min-width: 860px) { .planner-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: center; } .planner-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .planner-hero-title { font-size: 34px; } }
    @media (min-width: 960px) { .planner-overview-grid { grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr); align-items: stretch; } }
    @media (max-width: 360px) { .planner-stat-grid { grid-template-columns: 1fr; } }

    /* ─── Day Navigator ─── */
    .day-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 20px; }
    .day-nav::-webkit-scrollbar { height: 3px; }
    .day-chip {
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      min-width: 52px; padding: 8px 6px; border-radius: 10px;
      background: var(--bg-secondary); border: 1px solid var(--border);
      cursor: pointer; transition: all 0.15s ease; flex-shrink: 0;
    }
    .day-chip:hover { background: var(--bg-tertiary); }
    .day-chip.selected { background: var(--bg-active); border-color: var(--accent-beige); }
    .day-chip.today { border-color: var(--accent-clay); }
    .day-chip .day-name { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
    .day-chip .day-num { font-family: 'Geist Mono', monospace; font-size: 15px; font-weight: 500; color: var(--text-primary); }
    .day-chip .day-count { font-family: 'Geist Mono', monospace; font-size: 9px; color: var(--text-muted); }
    .day-chip.selected .day-name, .day-chip.selected .day-count { color: var(--accent-beige); }
    .day-chip.today .day-name { color: var(--accent-clay); }

    /* ─── Progress Bar ─── */
    .progress-section { margin-bottom: 20px; }
    .progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .progress-label { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
    .progress-value { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--accent-sage); }
    .progress-track { height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; }
    .progress-fill { height: 100%; background: var(--accent-sage); border-radius: 2px; transition: width 0.3s ease; }
    .avg-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
    .avg-label { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }
    .avg-value { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--accent-beige); }

    /* ─── Quick Add Input ─── */
    .quick-add { margin-bottom: 20px; }
    .quick-add-input {
      width: 100%; padding: 12px 14px;
      background: var(--bg-secondary); color: var(--text-primary);
      border: 1px solid var(--border); border-radius: 10px;
      font-size: 14px; outline: none;
      transition: border-color 0.2s ease;
    }
    .quick-add-input:focus { border-color: var(--accent-beige); }
    .quick-add-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

    /* ─── Task Section ─── */
    .task-section { margin-bottom: 20px; }
    .task-section-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
    }
    .task-section-title {
      font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 400;
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .task-section-count { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }

    /* ─── Task Row ─── */
    .task-row {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 12px;
      background: var(--bg-secondary); border: 1px solid var(--border);
      border-radius: 8px; margin-bottom: 6px;
      transition: all 0.15s ease; position: relative;
    }
    .task-row:hover { background: var(--bg-tertiary); border-color: var(--border-active); }
    .task-row.overdue { border-left: 3px solid var(--danger); }
    .task-row.done { opacity: 0.5; }
    .task-row.done .task-title { text-decoration: line-through; color: var(--text-muted); }
    .task-row.skipped { opacity: 0.4; }
    .task-row.skipped .task-title { text-decoration: line-through; color: var(--text-muted); }

    .task-checkbox {
      width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 1px; cursor: pointer;
      transition: all 0.15s ease; font-size: 10px; color: transparent;
    }
    .task-checkbox:hover { border-color: var(--accent-sage); }
    .task-checkbox.checked { background: var(--accent-sage); border-color: var(--accent-sage); color: #111; }

    .task-body { flex: 1; min-width: 0; }
    .task-title { font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.4; word-break: break-word; }
    .task-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
    .task-meta-item { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }
    .task-meta-item.due { color: var(--danger); }
    .task-meta-item.time { color: var(--accent-clay); }
    .task-priority-dot { width: 6px; height: 6px; border-radius: 50%; }
    .task-priority-none { display: none; }
    .task-priority-low { background: var(--text-muted); }
    .task-priority-medium { background: var(--accent-beige); }
    .task-priority-high { background: var(--danger); }
    .task-notes-icon { font-size: 10px; color: var(--text-muted); margin-left: 2px; }

    .task-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s ease; }
    .task-row:hover .task-actions { opacity: 1; }
    .task-action-btn {
      width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
      border-radius: 5px; color: var(--text-muted); font-size: 11px;
      transition: all 0.15s;
    }
    .task-action-btn:hover { background: var(--bg-active); color: var(--text-primary); }

    /* ─── Completed Tasks Collapsible ─── */
    .completed-toggle {
      display: flex; align-items: center; gap: 8px; padding: 8px 0;
      color: var(--text-muted); font-size: 12px; cursor: pointer;
      font-family: 'Geist Mono', monospace;
      transition: color 0.15s;
    }
    .completed-toggle:hover { color: var(--text-secondary); }
    .completed-toggle-arrow { font-size: 10px; transition: transform 0.2s ease; }
    .completed-toggle.open .completed-toggle-arrow { transform: rotate(90deg); }
    .completed-tasks { display: none; }
    .completed-tasks.open { display: block; }

    /* ─── Task Modal Specific ─── */
    .modal-row { display: flex; gap: 12px; }
    .modal-row .form-group { flex: 1; }
    .modal-status-hint { font-size: 11px; color: var(--text-muted); margin-top: -10px; margin-bottom: 12px; }

    /* ─── Upcoming Groups ─── */
    .upcoming-group { margin-bottom: 24px; }
    .upcoming-group-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px; padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }
    .upcoming-group-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .upcoming-group-count { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }

    /* ─── Utility ─── */
    .hidden { display: none !important; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
    .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
    .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
    .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
    .text-center { text-align: center; } .w-full { width: 100%; }
    .space-y-2 > * + * { margin-top: 8px; }
    .space-y-3 > * + * { margin-top: 12px; }

    /* ═══════════════════════════════════════════════════════════════
       PHASE 3 — CALENDAR & RECURRING TASKS CSS
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Calendar Navigation ─── */
    .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .cal-nav-title { font-size: 18px; font-weight: 400; color: var(--text-primary); }
    .cal-nav-actions { display: flex; gap: 6px; }
    .cal-nav-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--bg-tertiary); color: var(--text-secondary); font-size: 14px; transition: all 0.15s; }
    .cal-nav-btn:hover { background: var(--bg-active); color: var(--text-primary); }
    .cal-nav-today { padding: 6px 12px; font-size: 12px; font-weight: 500; background: var(--bg-tertiary); color: var(--text-secondary); border-radius: 6px; }
    .cal-nav-today:hover { background: var(--bg-active); color: var(--text-primary); }

    /* ─── Calendar Grid ─── */
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
    .cal-weekday { padding: 8px 4px; text-align: center; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-secondary); }
    .cal-cell { min-height: 90px; padding: 6px; background: var(--bg-secondary); cursor: pointer; transition: background 0.15s; position: relative; }
    .cal-cell:hover { background: var(--bg-tertiary); }
    .cal-cell.empty { background: var(--bg-primary); cursor: default; }
    .cal-cell.today { outline: 2px solid var(--accent-clay); outline-offset: -2px; z-index: 1; }
    .cal-cell.selected { background: var(--bg-active); }
    .cal-cell .cal-day-num { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
    .cal-cell.today .cal-day-num { color: var(--accent-clay); font-weight: 500; }
    .cal-cell.selected .cal-day-num { color: var(--accent-beige); }
    .cal-item { font-size: 9px; padding: 1px 4px; border-radius: 3px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
    .cal-item.task { background: var(--accent-beige)18; color: var(--accent-beige); }
    .cal-item.deadline { background: var(--danger)18; color: var(--danger); }
    .cal-item.recurringOccurrence { background: var(--accent-sage)18; color: var(--accent-sage); }
    .cal-item.event { background: var(--accent-clay)18; color: var(--accent-clay); }
    .cal-item.done { opacity: 0.4; text-decoration: line-through; }
    .cal-item.skipped { opacity: 0.3; }
    .cal-more { font-size: 9px; color: var(--text-muted); padding: 0 4px; }

    /* ─── Day Detail ─── */
    .day-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
    .day-detail-title { font-size: 18px; font-weight: 400; color: var(--text-primary); }
    .day-detail-actions { display: flex; gap: 8px; }
    .day-section-title { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 16px 0 8px; }
    .day-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-secondary); border-radius: 6px; margin-bottom: 4px; border: 1px solid var(--border); }
    .day-item:hover { background: var(--bg-tertiary); }
    .day-item-type { font-family: 'Geist Mono', monospace; font-size: 9px; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
    .day-item-type.task { background: var(--accent-beige)18; color: var(--accent-beige); }
    .day-item-type.deadline { background: var(--danger)18; color: var(--danger); }
    .day-item-type.recurringOccurrence { background: var(--accent-sage)18; color: var(--accent-sage); }
    .day-item-type.event { background: var(--accent-clay)18; color: var(--accent-clay); }
    .day-item-body { flex: 1; min-width: 0; }
    .day-item-title { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .day-item-meta { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); margin-top: 2px; }
    .day-item-time { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--accent-clay); flex-shrink: 0; }

    /* ─── Recurring Rule Card ─── */
    .rule-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; transition: all 0.15s; }
    .rule-card:hover { background: var(--bg-tertiary); border-color: var(--border-active); }
    .rule-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .rule-title-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
    .rule-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
    .rule-summary { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--accent-clay); margin-bottom: 6px; }
    .rule-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .rule-meta-item { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }
    .rule-habit-badge, .task-habit-badge { display: inline-flex; align-items: center; min-height: 18px; padding: 3px 7px; border-radius: 5px; background: rgba(163,181,163,0.14); color: var(--accent-sage); border: 1px solid rgba(163,181,163,0.22); font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; }
    .task-habit-badge { min-height: 17px; padding: 3px 6px; }
    .habit-rule-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
    .habit-rule-stat { padding: 12px; border-radius: 10px; border: 1px solid rgba(163,181,163,0.16); background: rgba(163,181,163,0.055); }
    .habit-rule-label { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 7px; }
    .habit-rule-value { font-size: 20px; font-weight: 650; color: var(--text-primary); line-height: 1; }
    .habit-rule-sub { font-size: 11px; color: var(--text-secondary); margin-top: 5px; line-height: 1.35; }
    .rule-actions { display: flex; gap: 4px; margin-top: 10px; }
    .rule-actions .btn-sm { padding: 4px 10px; font-size: 11px; }

    /* ─── Occurrence row (in task lists) ─── */
    .occ-tag { font-family: 'Geist Mono', monospace; font-size: 9px; padding: 1px 5px; border-radius: 3px; background: var(--accent-sage)18; color: var(--accent-sage); margin-left: 6px; }

    /* ─── Calendar tabs ─── */
    .cal-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
    .cal-tab { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; }
    .cal-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
    .cal-tab.active { color: var(--accent-beige); background: var(--bg-active); border-color: var(--border); }

    /* Time blocking week view */
    .week-shell { display: flex; flex-direction: column; gap: 14px; }
    .week-view-options { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .week-start-select { width: auto; min-width: 94px; height: 32px; padding: 5px 26px 5px 9px; font-size: 12px; }
    .week-grid-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary); }
    .week-grid { min-width: 900px; }
    .week-header-row { display: grid; grid-template-columns: 58px repeat(7, minmax(110px, 1fr)); position: sticky; top: 0; z-index: 5; background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
    .week-time-corner { border-right: 1px solid var(--border); }
    .week-day-head { padding: 9px 8px; border-right: 1px solid var(--border); cursor: pointer; }
    .week-day-head:last-child { border-right: 0; }
    .week-day-head.today { background: rgba(196, 112, 101, 0.09); }
    .week-day-name { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; color: var(--text-muted); }
    .week-day-date { font-size: 14px; color: var(--text-primary); margin-top: 2px; }
    .week-body { display: grid; grid-template-columns: 58px repeat(7, minmax(110px, 1fr)); }
    .week-time-axis { position: relative; border-right: 1px solid var(--border); background: var(--bg-primary); }
    .week-time-label { position: absolute; right: 8px; transform: translateY(-50%); font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }
    .week-time-label.first { transform: translateY(4px); }
    .week-day-column { position: relative; border-right: 1px solid var(--border); background: linear-gradient(to bottom, transparent calc(100% - 1px), var(--border) 0) 0 0 / 100% 56px; cursor: crosshair; }
    .week-day-column:last-child { border-right: 0; }
    .week-day-column.today { background-color: rgba(196, 112, 101, 0.045); }
    .week-day-column:hover { background-color: rgba(194, 181, 165, 0.035); }
    .week-block { position: absolute; z-index: 2; padding: 6px 7px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--block-color, var(--accent-beige)) 55%, transparent); background: color-mix(in srgb, var(--block-color, var(--accent-beige)) 18%, var(--bg-secondary)); color: var(--text-primary); box-shadow: 0 4px 14px rgba(0,0,0,0.18); overflow: hidden; cursor: grab; touch-action: none; }
    .week-block:active { cursor: grabbing; }
    .week-block.readonly { cursor: pointer; opacity: 0.82; border-style: dashed; }
    .week-block.conflict { box-shadow: inset 0 0 0 1px var(--danger), 0 4px 14px rgba(0,0,0,0.18); }
    .week-block.dragging { opacity: 0.78; z-index: 8; box-shadow: 0 8px 24px rgba(0,0,0,0.34); }
    .week-block-title { font-size: 11px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .week-block-meta { margin-top: 3px; display: flex; align-items: center; gap: 5px; font-family: 'Geist Mono', monospace; font-size: 9px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .week-block-type { text-transform: uppercase; color: var(--block-color, var(--accent-beige)); }
    .week-conflict-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--danger); flex-shrink: 0; }
    .week-resize-handle { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 8px; border-bottom: 2px solid color-mix(in srgb, var(--block-color, var(--accent-beige)) 65%, transparent); cursor: ns-resize; }
    .week-current-line { position: absolute; left: 0; right: 0; z-index: 4; height: 1px; background: var(--accent-clay); box-shadow: 0 0 8px rgba(196, 112, 101, 0.55); pointer-events: none; }
    .week-current-line::before { content: ''; position: absolute; left: -4px; top: -3px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent-clay); }
    .unscheduled-panel { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--bg-secondary); }
    .unscheduled-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .unscheduled-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .unscheduled-count { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }
    .unscheduled-list { display: grid; gap: 6px; }
    .unscheduled-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary); }
    .unscheduled-body { flex: 1; min-width: 0; }
    .unscheduled-name { font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .unscheduled-meta { margin-top: 2px; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }
    @media (max-width: 640px) {
      .cal-nav { align-items: flex-start; flex-direction: column; gap: 10px; }
      .cal-tabs { overflow-x: auto; padding-bottom: 2px; }
      .week-grid { min-width: 1040px; }
      .week-header-row, .week-body { grid-template-columns: 52px repeat(7, 140px); }
      .week-block-title { font-size: 10px; }
    }


    /* ═══════════════════════════════════════════════════════════════
       PHASE 4 — TIMER / TIME TRACKING CSS
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Timer Layout ─── */
    .timer-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding: 24px 16px; }
    @media (min-width: 1024px) { .timer-container { min-height: 70vh; padding: 40px 24px; } }
    .timer-display { font-family: 'Geist Mono', monospace; font-size: 56px; font-weight: 300; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; }
    @media (min-width: 640px) { .timer-display { font-size: 72px; } }
    @media (min-width: 1024px) { .timer-display { font-size: 140px; } }
    .timer-status { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 32px; }
    @media (min-width: 1024px) { .timer-status { font-size: 16px; margin-bottom: 48px; } }
    .timer-status.running { color: var(--accent-sage); }
    .timer-status.paused { color: var(--accent-clay); }

    /* ─── Timer Controls ─── */
    .timer-controls { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
    .timer-btn { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: all 0.15s ease; border: 2px solid var(--border); color: var(--text-secondary); background: var(--bg-secondary); }
    .timer-btn:hover { transform: scale(1.05); border-color: var(--border-active); }
    .timer-btn:active { transform: scale(0.95); }
    .timer-btn.primary { width: 80px; height: 80px; background: var(--accent-beige); color: #111; border-color: var(--accent-beige); font-size: 28px; }
    .timer-btn.primary:hover { filter: brightness(1.1); }
    .timer-btn.danger { border-color: var(--danger); color: var(--danger); }
    .timer-btn.danger:hover { background: rgba(196, 112, 101, 0.1); }
    @media (min-width: 1024px) { .timer-btn { width: 80px; height: 80px; font-size: 26px; } .timer-btn.primary { width: 100px; height: 100px; font-size: 36px; } }
    .timer-btn-label { font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 8px; text-align: center; }

    /* ─── Timer Selectors ─── */
    .timer-selectors { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; margin-bottom: 24px; }
    .timer-selectors .form-group { margin-bottom: 0; }
    .timer-selectors .form-label { font-size: 10px; }

    /* ─── Goal Progress ─── */
    .goal-section { width: 100%; max-width: 320px; margin-bottom: 24px; }
    .goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .goal-label { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
    .goal-value { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--accent-beige); }
    .goal-track { height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; }
    .goal-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; }

    /* ─── Timer Tabs ─── */
    .timer-tabs { display: flex; gap: 4px; margin-bottom: 20px; }
    .timer-tab { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .timer-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
    .timer-tab.active { color: var(--accent-beige); background: var(--bg-active); border-color: var(--border); }

    /* ─── Session Row ─── */
    .session-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; transition: all 0.15s; }
    .session-row:hover { background: var(--bg-tertiary); }
    .session-row.excluded { opacity: 0.5; }
    .session-area { width: 4px; height: 36px; border-radius: 2px; flex-shrink: 0; }
    .session-body { flex: 1; min-width: 0; }
    .session-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .session-meta { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); margin-top: 2px; }
    .session-duration { font-family: 'Geist Mono', monospace; font-size: 14px; color: var(--accent-clay); flex-shrink: 0; }
    .session-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
    .session-row:hover .session-actions { opacity: 1; }

    /* ─── Dashboard Stats ─── */
    .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
    @media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
    .stat-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 16px; text-align: center; }
    .stat-value { font-family: 'Geist Mono', monospace; font-size: 24px; font-weight: 400; color: var(--text-primary); margin-bottom: 4px; }
    .stat-label { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

    /* ─── Bar Chart ─── */
    /* Timer Insights Dashboard */
    @media (min-width: 860px) { .content-wrapper.timer-wide { max-width: 1040px; } }
    .timer-insights { --timer-insight-color: var(--accent-timer); padding-bottom: 28px; }
    .timer-insights-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 10px 0 18px; }
    .timer-insights-kicker { font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--timer-insight-color); margin-bottom: 7px; }
    .timer-insights-title { font-size: 25px; font-weight: 600; letter-spacing: -0.025em; color: var(--text-primary); }
    .timer-insights-subtitle { margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
    .timer-scope-control { min-width: 230px; }
    .timer-scope-label { display: block; margin-bottom: 6px; font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
    .timer-scope-select { background-color: var(--bg-secondary); border-color: color-mix(in srgb, var(--timer-insight-color) 45%, var(--border)); font-weight: 500; }

    .timer-total-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(190px, 0.55fr); gap: 16px; padding: 24px; margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--timer-insight-color) 30%, var(--border)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--timer-insight-color) 12%, var(--bg-secondary)), var(--bg-secondary) 58%); }
    .timer-total-hero::after { content: ''; position: absolute; width: 190px; height: 190px; right: -70px; top: -90px; border-radius: 50%; background: var(--timer-insight-color); opacity: 0.07; filter: blur(4px); pointer-events: none; }
    .timer-total-label { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
    .timer-total-value { margin: 8px 0 10px; font-family: 'Geist Mono', monospace; font-size: clamp(36px, 6vw, 60px); font-weight: 400; line-height: 1; letter-spacing: -0.055em; color: var(--text-primary); }
    .timer-total-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; font-size: 11px; color: var(--text-secondary); }
    .timer-total-meta span { display: inline-flex; align-items: center; gap: 6px; }
    .timer-total-meta i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--timer-insight-color); }
    .timer-hero-average { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 16px 18px; border: 1px solid rgba(255,255,255,0.07); border-radius: 11px; background: rgba(0,0,0,0.14); }
    .timer-hero-average-value { margin: 8px 0 5px; font-family: 'Geist Mono', monospace; font-size: 24px; color: var(--timer-insight-color); }
    .timer-hero-average-note { font-size: 10px; line-height: 1.4; color: var(--text-muted); }

    .timer-period-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
    .timer-period-card { min-width: 0; padding: 17px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); }
    .timer-period-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
    .timer-period-label { font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
    .timer-period-tag { padding: 3px 7px; border-radius: 10px; background: color-mix(in srgb, var(--timer-insight-color) 12%, transparent); font-family: 'Geist Mono', monospace; font-size: 8px; color: var(--timer-insight-color); }
    .timer-period-value { font-family: 'Geist Mono', monospace; font-size: 25px; line-height: 1.15; color: var(--text-primary); }
    .timer-period-caption { margin-top: 4px; font-size: 10px; color: var(--text-muted); }
    .timer-period-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 13px; margin-top: 14px; border-top: 1px solid var(--border); }
    .timer-period-detail-value { font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--text-secondary); }
    .timer-period-detail-label { margin-top: 3px; font-size: 9px; color: var(--text-muted); }

    .timer-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.75fr); gap: 10px; }
    .timer-insight-panel { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); }
    .timer-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
    .timer-panel-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
    .timer-panel-note { margin-top: 3px; font-size: 10px; color: var(--text-muted); }
    .timer-panel-total { flex-shrink: 0; font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--timer-insight-color); }
    .timer-trend-chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 10px; border-bottom: 1px solid var(--border); }
    .timer-trend-day { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
    .timer-trend-bar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--timer-insight-color) 62%, var(--bg-active)); transition: opacity 0.15s, transform 0.15s; transform-origin: bottom; }
    .timer-trend-day:hover .timer-trend-bar { opacity: 0.78; transform: scaleY(1.025); }
    .timer-trend-day.today .timer-trend-bar { background: var(--timer-insight-color); }
    .timer-trend-label { height: 10px; font-family: 'Geist Mono', monospace; font-size: 7px; color: var(--text-muted); }
    .timer-breakdown-list { display: flex; flex-direction: column; gap: 13px; }
    .timer-breakdown-row { cursor: pointer; }
    .timer-breakdown-row:hover .timer-breakdown-name { color: var(--text-primary); }
    .timer-breakdown-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .timer-breakdown-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .timer-breakdown-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--text-secondary); transition: color 0.15s; }
    .timer-breakdown-value { flex-shrink: 0; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-primary); }
    .timer-breakdown-track { height: 5px; overflow: hidden; border-radius: 4px; background: var(--bg-tertiary); }
    .timer-breakdown-fill { height: 100%; min-width: 2px; border-radius: inherit; }
    .timer-breakdown-empty { padding: 20px 0; text-align: center; font-size: 11px; line-height: 1.5; color: var(--text-muted); }

    @media (max-width: 700px) {
      .timer-insights-head { align-items: stretch; flex-direction: column; gap: 13px; }
      .timer-scope-control { min-width: 0; }
      .timer-total-hero { grid-template-columns: 1fr; padding: 19px; }
      .timer-period-grid { grid-template-columns: 1fr; }
      .timer-analysis-grid { grid-template-columns: 1fr; }
      .timer-trend-chart { height: 125px; gap: 2px; }
      .timer-trend-label { font-size: 6px; }
    }

    .chart-section { margin-bottom: 24px; }
    .chart-title { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 12px; }
    .chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
    .chart-bar-wrapper { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
    .chart-bar { width: 100%; border-radius: 3px 3px 0 0; transition: height 0.3s ease; min-height: 2px; }
    .chart-bar-label { font-family: 'Geist Mono', monospace; font-size: 8px; color: var(--text-muted); text-align: center; }
    .chart-empty { text-align: center; padding: 24px; color: var(--text-muted); font-size: 12px; }

    /* ─── Category Row ─── */
    .cat-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; transition: background 0.15s; }
    .cat-row:hover { background: var(--bg-tertiary); }
    .cat-name { flex: 1; font-size: 13px; color: var(--text-primary); }
    .cat-area { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }
    .cat-badge { font-family: 'Geist Mono', monospace; font-size: 9px; padding: 2px 6px; border-radius: 3px; }
    .cat-badge.excluded { background: var(--bg-tertiary); color: var(--text-muted); }

    /* ─── Duration Input Row ─── */
    .duration-row { display: flex; gap: 12px; }
    .duration-row .form-group { flex: 1; }

    /* ═══════════════════════════════════════════════════════════════
       PHASE 5 — DAILY TRACKING CSS
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Track Tabs ─── */
    .track-tabs { display: flex; gap: 4px; margin-bottom: 20px; }
    .track-tab { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .track-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
    .track-tab.active { color: var(--accent-beige); background: var(--bg-active); border-color: var(--border); }
    .track-date-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 2px; }
    .track-date-btn { width: 34px; height: 34px; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
    .track-date-btn:hover:not(:disabled) { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-active); }
    .track-date-btn:disabled { opacity: 0.35; cursor: default; }
    .track-date-chip { min-width: 72px; padding: 7px 10px; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; flex-shrink: 0; }
    .track-date-chip:hover { background: var(--bg-tertiary); color: var(--text-primary); }
    .track-date-chip.active { background: var(--bg-active); border-color: var(--accent-beige); color: var(--accent-beige); }
    .track-date-chip-day { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; color: var(--text-muted); }
    .track-date-chip.active .track-date-chip-day { color: var(--accent-beige); }
    .track-date-chip-date { font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--text-primary); }
    .track-date-chip.active .track-date-chip-date { color: var(--accent-beige); }
    .track-date-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }

    /* ─── Rating Groups ─── */
    .rating-group { margin-bottom: 24px; }
    .rating-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .rating-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
    .rating-value { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--accent-beige); min-width: 28px; text-align: right; }
    .rating-scale { display: flex; gap: 6px; }
    .rating-btn { flex: 1; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-secondary); font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
    .rating-btn:hover { border-color: var(--border-active); color: var(--text-primary); }
    .rating-btn.selected { background: var(--bg-active); color: var(--accent-beige); border-color: var(--accent-beige); }
    .rating-btn.low { background: rgba(196, 112, 101, 0.15); border-color: var(--danger); color: var(--danger); }
    .rating-btn.low.selected { background: var(--danger); color: #fff; }
    .rating-btn.high { background: rgba(124, 148, 115, 0.15); border-color: var(--success); color: var(--success); }
    .rating-btn.high.selected { background: var(--success); color: #fff; }

    /* ─── Section Divider ─── */
    .track-section { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
    .track-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .track-section-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
    .track-section-title .toggle-icon { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; display: inline-block; }
    .track-section-title.collapsed .toggle-icon { transform: rotate(-90deg); }

    /* ─── Sleep Form ─── */
    .sleep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .sleep-grid .form-group { margin-bottom: 0; }
    .sleep-duration-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    .sleep-duration-inputs .input { min-width: 0; }
    @media (max-width: 480px) { .sleep-grid { grid-template-columns: 1fr; } }

    /* ─── Tag Groups ─── */
    .tag-group { margin-bottom: 16px; }
    .tag-group-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; }
    .tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
    .context-tag { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 9999px; font-size: 12px; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; user-select: none; }
    .context-tag:hover { background: var(--bg-active); color: var(--text-primary); }
    .context-tag.active { background: var(--bg-active); color: var(--accent-beige); border-color: var(--accent-beige); }
    .context-tag.added { background: rgba(124, 148, 115, 0.15); color: var(--success); border-color: var(--success); }

    /* ─── Injury Row ─── */
    .injury-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
    .injury-name { flex: 1; font-size: 13px; color: var(--text-primary); }
    .injury-severity { display: flex; gap: 4px; }
    .severity-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
    .severity-dot:hover { transform: scale(1.2); }
    .severity-dot.active { background: var(--danger); border-color: var(--danger); }
    .severity-dot.filled { background: var(--danger); opacity: 0.4; border-color: var(--danger); }

    /* ─── MVD Checklist ─── */
    .mvd-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; transition: all 0.15s; cursor: pointer; }
    .mvd-item:hover { background: var(--bg-tertiary); }
    .mvd-checkbox { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; transition: all 0.15s; flex-shrink: 0; }
    .mvd-checkbox.checked { background: var(--success); border-color: var(--success); color: #fff; }
    .mvd-name { flex: 1; font-size: 13px; color: var(--text-primary); }
    .mvd-name.checked { text-decoration: line-through; color: var(--text-muted); }
    .mvd-summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; }
    .mvd-summary-count { font-family: 'Geist Mono', monospace; font-size: 14px; color: var(--accent-beige); }
    .mvd-summary-label { font-size: 11px; color: var(--text-muted); }

    /* ─── Anti-Goal Card ─── */
    .anti-goal-card { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
    .anti-goal-card.violated { border-color: var(--danger); background: rgba(196, 112, 101, 0.08); }
    .anti-goal-card.kept { border-color: var(--success); background: rgba(124, 148, 115, 0.08); }
    .anti-goal-toggle { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: all 0.15s; flex-shrink: 0; background: transparent; }
    .anti-goal-toggle.violated { background: var(--danger); border-color: var(--danger); color: #fff; }
    .anti-goal-toggle.kept { background: var(--success); border-color: var(--success); color: #fff; }
    .anti-goal-name { flex: 1; font-size: 13px; color: var(--text-primary); }
    .anti-goal-name.violated { text-decoration: line-through; color: var(--danger); }

    /* ─── Smart Prompt ─── */
    .smart-prompt { padding: 12px 14px; background: rgba(196, 112, 101, 0.08); border: 1px solid rgba(196, 112, 101, 0.25); border-radius: 8px; margin-bottom: 16px; }
    .smart-prompt-title { font-size: 12px; font-weight: 600; color: var(--danger); margin-bottom: 6px; }
    .smart-prompt-text { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
    .smart-prompt-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

    /* ─── Reflection Textarea ─── */
    .reflection-textarea { width: 100%; min-height: 80px; padding: 10px 12px; background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; outline: none; transition: border-color 0.2s; resize: vertical; }
    .reflection-textarea:focus { border-color: var(--border-active); }
    .reflection-group { margin-bottom: 14px; }
    .reflection-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }

    /* ─── History Cards ─── */
    .history-card { padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
    .history-card:hover { background: var(--bg-tertiary); }
    .history-date { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-primary); margin-bottom: 8px; }
    .history-ratings { display: flex; gap: 12px; }
    .history-rating { font-family: 'Geist Mono', monospace; font-size: 11px; }
    .history-rating .r-label { color: var(--text-muted); }
    .history-rating .r-value { color: var(--accent-beige); }
    .history-mvd { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
    .history-empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px; }

    /* Track visual refresh */
    .track-page { display: flex; flex-direction: column; gap: 12px; }
    .track-hero { position: relative; overflow: hidden; padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.09); background: radial-gradient(circle at 10% 18%, rgba(124,148,115,0.28), transparent 32%), radial-gradient(circle at 88% 12%, rgba(45,212,191,0.18), transparent 30%), linear-gradient(135deg, rgba(124,148,115,0.18), rgba(23,23,23,0.94) 58%); box-shadow: 0 18px 46px rgba(0,0,0,0.22); }
    .track-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent-track), #2dd4bf, #38bdf8, #c084fc); opacity: 0.9; }
    .track-hero-grid { display: grid; grid-template-columns: 1fr; gap: 16px; position: relative; z-index: 1; }
    .track-kicker { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent-track); margin-bottom: 8px; }
    .track-hero-title { font-size: 27px; line-height: 1.08; font-weight: 650; color: var(--text-primary); margin-bottom: 8px; }
    .track-hero-sub { font-size: 12px; line-height: 1.5; color: var(--text-secondary); max-width: 620px; }
    .track-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
    .track-action { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); color: var(--text-primary); font-size: 12px; text-decoration: none; cursor: pointer; }
    .track-action:hover { background: rgba(255,255,255,0.075); border-color: rgba(255,255,255,0.14); }
    .track-action.primary { background: rgba(124,148,115,0.18); border-color: rgba(124,148,115,0.34); color: var(--accent-track); }
    .track-score-wrap { display: flex; align-items: center; justify-content: center; }
    .track-score-ring { width: 132px; height: 132px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: conic-gradient(var(--score-color) calc(var(--score) * 1%), rgba(255,255,255,0.06) 0); position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
    .track-score-ring::after { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: rgba(18,18,18,0.94); border: 1px solid rgba(255,255,255,0.07); }
    .track-score-value { position: relative; z-index: 1; font-family: 'Geist Mono', monospace; font-size: 25px; color: var(--text-primary); }
    .track-score-label { position: relative; z-index: 1; font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 4px; }
    .track-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .track-kpi-card { min-height: 92px; padding: 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(145deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(255,255,255,0.035)); }
    .track-kpi-label { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; }
    .track-kpi-value { font-size: 23px; font-weight: 650; color: var(--text-primary); line-height: 1; }
    .track-kpi-sub { font-size: 11px; color: var(--text-secondary); margin-top: 6px; line-height: 1.35; }
    .track-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
    .track-day-tile { min-height: 88px; padding: 8px 6px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.035); display: flex; flex-direction: column; justify-content: space-between; }
    .track-day-top { display: flex; justify-content: space-between; gap: 4px; font-family: 'Geist Mono', monospace; font-size: 9px; color: var(--text-muted); }
    .track-day-bar { height: 38px; display: flex; align-items: flex-end; }
    .track-day-fill { width: 100%; min-height: 3px; border-radius: 5px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 48%, transparent)); }
    .track-day-score { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-secondary); text-align: right; }
    .track-panel { padding: 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(23,23,23,0.84); overflow: hidden; }
    .track-panel-title { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: 12px; }
    .track-page .track-section { padding: 14px; margin-bottom: 0; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: rgba(23,23,23,0.78); }
    .track-page .track-section-title { margin-bottom: 0; }
    .track-page .track-section-content { margin-top: 14px; }
    .track-page .rating-group:last-child { margin-bottom: 0; }
    .track-ribbon-svg { width: 100%; min-height: 190px; overflow: visible; }
    .track-ribbon-grid { stroke: rgba(255,255,255,0.08); stroke-width: 0.7; }
    .track-ribbon-label { font-family: 'Geist Mono', monospace; font-size: 9px; fill: var(--text-muted); }
    .track-ribbon-point { transition: opacity 0.15s ease; }
    .track-ribbon-point:hover { opacity: 0.78; }
    .track-ribbon-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .track-ribbon-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-secondary); }
    .track-ribbon-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
    .track-history-page { display: flex; flex-direction: column; gap: 12px; }
    .track-history-hero { padding: 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(135deg, rgba(124,148,115,0.16), rgba(255,255,255,0.035)); }
    .track-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
    .history-card.v2 { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)); }
    .history-card.v2::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--c, var(--accent-track)); }
    .history-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
    .history-score-pill { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--text-primary); padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--accent-track)) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--accent-track)) 35%, transparent); white-space: nowrap; }
    .history-metric-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
    .history-metric { padding: 7px 6px; border-radius: 7px; background: rgba(255,255,255,0.035); min-width: 0; }
    .history-metric-label { font-family: 'Geist Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }
    .history-metric-value { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-primary); }
    @media (min-width: 860px) { .content-wrapper.track-wide { max-width: 1040px; } .track-hero-grid { grid-template-columns: minmax(0, 1fr) 160px; align-items: center; } .track-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .track-hero-title { font-size: 34px; } }
    @media (max-width: 560px) { .track-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .track-history-grid { grid-template-columns: 1fr; } .history-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .track-kpi-grid { grid-template-columns: 1fr; } }

    /* ─── Summary Bar on Home ─── */
    .daily-summary-bar { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; }
    .daily-summary-item { display: flex; align-items: center; gap: 6px; }
    .daily-summary-dot { width: 8px; height: 8px; border-radius: 50%; }
    .daily-summary-label { font-size: 11px; color: var(--text-muted); }
    .daily-summary-value { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-primary); }

    /* ═══════════════════════════════════════════════════════════════
       PHASE 6 — HABITS MODULE CSS
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Habit Tabs ─── */
    .habit-tabs { display: flex; gap: 4px; margin-bottom: 20px; }
    .habit-tab { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .habit-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
    .habit-tab.active { color: var(--accent-beige); background: var(--bg-active); border-color: var(--border); }

    /* ─── Habit Progress Bar ─── */
    .habit-progress-bar { height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; margin-bottom: 16px; }
    .habit-progress-fill { height: 100%; background: var(--accent-sage); border-radius: 2px; transition: width 0.3s ease; }

    /* ─── Habit Card ─── */
    .habit-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; transition: all 0.15s; }
    .habit-card:hover { background: var(--bg-tertiary); }
    .habit-card.done { border-color: rgba(124, 148, 115, 0.3); }
    .habit-card.skipped { opacity: 0.6; }
    .habit-check { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; color: transparent; cursor: pointer; transition: all 0.15s; flex-shrink: 0; margin-top: 2px; background: transparent; }
    .habit-check:hover { border-color: var(--border-active); }
    .habit-check.done { background: var(--success); border-color: var(--success); color: #fff; }
    .habit-check.skipped { background: var(--bg-active); border-color: var(--text-muted); color: var(--text-muted); }
    .habit-body { flex: 1; min-width: 0; }
    .habit-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
    .habit-name.done { text-decoration: line-through; color: var(--text-muted); }
    .habit-meta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
    .habit-badge { font-family: 'Geist Mono', monospace; font-size: 9px; padding: 2px 7px; border-radius: 3px; letter-spacing: 0.04em; }
    .habit-badge.area { background: var(--bg-active); color: var(--text-secondary); }
    .habit-badge.streak { background: rgba(196, 168, 130, 0.12); color: var(--accent-clay); }
    .habit-badge.consistency { background: rgba(163, 181, 163, 0.12); color: var(--accent-sage); }
    .habit-badge.freq { background: var(--bg-tertiary); color: var(--text-muted); }

    /* ─── Habit Detail Panel (expandable) ─── */
    .habit-detail { padding-top: 10px; border-top: 1px solid var(--border); margin-top: 10px; }
    .habit-detail.hidden { display: none; }
    .habit-detail-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
    .habit-detail-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }

    /* ─── Quality/Version/Resistance Pills ─── */
    .detail-pills { display: flex; gap: 4px; }
    .detail-pill { padding: 5px 10px; border-radius: 6px; font-size: 11px; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
    .detail-pill:hover { background: var(--bg-active); color: var(--text-primary); }
    .detail-pill.selected { background: var(--bg-active); color: var(--accent-beige); border-color: var(--accent-beige); }
    .detail-pill.quality-1.selected { background: rgba(196, 112, 101, 0.2); color: var(--danger); border-color: var(--danger); }
    .detail-pill.quality-5.selected { background: rgba(124, 148, 115, 0.2); color: var(--success); border-color: var(--success); }

    /* ─── Habit Note Input ─── */
    .habit-note-input { width: 100%; padding: 8px 10px; background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; outline: none; margin-top: 6px; }
    .habit-note-input:focus { border-color: var(--border-active); }

    /* ─── Habit Mini Note ─── */
    .habit-mini-note { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-style: italic; }

    /* ─── Habit History Grid ─── */
    .habit-history-grid { display: flex; gap: 3px; align-items: flex-end; flex-wrap: wrap; }
    .habit-history-cell { width: 10px; height: 10px; border-radius: 2px; background: var(--bg-tertiary); transition: all 0.15s; cursor: pointer; }
    .habit-history-cell.done { background: var(--accent-sage); }
    .habit-history-cell.done-min { background: rgba(196, 168, 130, 0.6); }
    .habit-history-cell.done-full { background: var(--accent-sage); }
    .habit-history-cell.done-extra { background: var(--accent-clay); }
    .habit-history-cell.skipped { background: var(--bg-active); }
    .habit-history-cell.missed { background: rgba(196, 112, 101, 0.25); }
    .habit-history-cell.today { box-shadow: 0 0 0 1.5px var(--accent-beige); }
    .habit-history-row { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
    .habit-history-row:last-child { border-bottom: none; }
    .habit-history-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .habit-history-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
    .habit-history-stats { display: flex; gap: 12px; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }

    /* ─── Habit Form ─── */
    .habit-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    @media (max-width: 480px) { .habit-form-grid { grid-template-columns: 1fr; } }
    .habit-form-group { margin-bottom: 12px; }
    .habit-form-group.full { grid-column: 1 / -1; }
    .habit-form-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; display: block; }
    .habit-day-selector { display: flex; gap: 4px; }
    .habit-day-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-secondary); font-size: 11px; font-family: 'Geist Mono', monospace; cursor: pointer; transition: all 0.15s; }
    .habit-day-btn:hover { background: var(--bg-active); color: var(--text-primary); }
    .habit-day-btn.selected { background: var(--bg-active); color: var(--accent-beige); border-color: var(--accent-beige); }

    /* ─── Streak Display ─── */
    .streak-display { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--accent-clay); }
    .streak-display.cold { color: var(--text-muted); }
    .consistency-display { font-family: 'Geist Mono', monospace; font-size: 11px; }

    /* ─── Section: Completed / Skipped habits ─── */
    .habit-section-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

    /* ─── Home habit summary ─── */
    .home-habit-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; }
    .home-habit-progress { flex: 1; height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; }
    .home-habit-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
    .home-habit-text { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--text-muted); white-space: nowrap; }

    /* ─── Track habit summary ─── */
    .track-habit-summary { display: flex; align-items: center; gap: 10px; padding: 10px 0; }

    /* ═══════════════════════════════════════════════════════════════
       PHASE 7 — FITNESS / HEALTH TRACKING CSS
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Health Tabs ─── */
    .health-tabs { display: flex; gap: 4px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 2px; }
    .health-tab { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .health-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
    .health-tab.active { color: var(--accent-beige); background: var(--bg-active); border-color: var(--border); }

    /* ─── Health Dashboard ─── */
    .health-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    @media (max-width: 480px) { .health-dashboard-grid { grid-template-columns: 1fr; } }
    .health-dash-card { padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.15s; }
    .health-dash-card:hover { background: var(--bg-tertiary); }
    .health-dash-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
    .health-dash-value { font-family: 'Geist Mono', monospace; font-size: 18px; color: var(--text-primary); }
    .health-dash-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .health-signal-panel { margin-bottom: 16px; padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; }
    .health-signal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .health-signal-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
    .health-signal-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
    .health-signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    @media (max-width: 720px) { .health-signal-grid { grid-template-columns: 1fr; } }
    .health-signal-card { padding: 12px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
    .health-signal-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
    .health-signal-value { font-family: 'Geist Mono', monospace; font-size: 20px; color: var(--text-primary); }
    .health-signal-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }
    .health-signal-delta.good { color: var(--success); }
    .health-signal-delta.warn { color: var(--accent-clay); }
    .health-signal-chart { margin-top: 8px; }
    .health-ribbon-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); overflow: hidden; }
    .health-ribbon-title { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: 8px; }
    .health-tip-list { display: grid; gap: 8px; margin-top: 12px; }
    .health-tip { padding: 9px 10px; border-radius: 8px; background: var(--bg-active); border-left: 3px solid var(--accent-health); }
    .health-tip-title { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
    .health-tip-text { font-size: 11px; line-height: 1.45; color: var(--text-secondary); }

    /* ─── Screen Time ─── */
    .st-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .st-cat-card { padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-tertiary); }
    .st-cat-name { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
    .st-cat-input { width: 100%; font-family: 'Geist Mono', monospace; font-size: 14px; text-align: center; }
    .st-cat-total { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 4px; }
    .st-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .st-bar-label { width: 90px; font-size: 12px; color: var(--text-secondary); text-align: right; flex-shrink: 0; }
    .st-bar-track { flex: 1; height: 20px; background: var(--bg-tertiary); border-radius: 6px; overflow: hidden; position: relative; }
    .st-bar-fill { height: 100%; border-radius: 6px; transition: width 0.3s; min-width: 2px; }
    .st-bar-value { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; font-family: 'Geist Mono', monospace; color: var(--text-primary); }
    .st-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
    .st-day-col { text-align: center; }
    .st-day-label { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; font-family: 'Geist Mono', monospace; }
    .st-day-bar-track { height: 80px; background: var(--bg-tertiary); border-radius: 6px; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
    .st-day-bar-fill { width: 100%; border-radius: 6px; transition: height 0.3s; min-height: 2px; background: linear-gradient(to top, var(--accent-clay), var(--accent-beige)); }
    .st-day-value { font-size: 10px; font-family: 'Geist Mono', monospace; color: var(--text-primary); margin-top: 4px; }
    .st-total-box { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: var(--bg-tertiary); border-radius: 10px; border: 1px solid var(--border); margin-bottom: 16px; }
    .st-total-number { font-family: 'Geist Mono', monospace; font-size: 32px; font-weight: 600; color: var(--accent-beige); }
    .st-total-label { font-size: 13px; color: var(--text-secondary); }
    .st-section-title { font-size: 12px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; margin-top: 20px; }

    /* ─── Workout Card ─── */
    .workout-card { padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
    .workout-card:hover { background: var(--bg-tertiary); }
    .workout-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
    .workout-meta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
    .workout-exercise-list { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
    .workout-type-badge { font-family: 'Geist Mono', monospace; font-size: 9px; padding: 2px 7px; border-radius: 3px; letter-spacing: 0.04em; background: var(--bg-active); color: var(--text-secondary); }

    /* ─── Exercise Block ─── */
    .exercise-block { padding: 12px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; }
    /* Superset groups — visual connectors */
    .exercise-block.superset-first  { border-left: 3px solid var(--accent-clay); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; border-bottom: 1px dashed var(--border-active); }
    .exercise-block.superset-mid    { border-left: 3px solid var(--accent-clay); border-radius: 0; margin-bottom: 0; border-top: none; border-bottom: 1px dashed var(--border-active); }
    .exercise-block.superset-last   { border-left: 3px solid var(--accent-clay); border-top-left-radius: 0; border-top-right-radius: 0; margin-bottom: 10px; border-top: none; }
    .superset-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; background: var(--accent-clay); color: #111; margin-right: 8px; flex-shrink: 0; }
    .superset-controls { display: flex; gap: 4px; margin-bottom: 8px; }
    .superset-btn { padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-muted); transition: all 0.15s; white-space: nowrap; }
    .superset-btn:hover { border-color: var(--border-active); color: var(--text-primary); background: var(--bg-active); }
    .superset-btn.link { border-color: var(--accent-clay); color: var(--accent-clay); }
    .superset-btn.unlink { border-color: var(--accent-rose); color: var(--accent-rose); }
    .workout-exercise-superset { display: inline-flex; align-items: center; gap: 4px; }
    .workout-exercise-superset .ss-letter { font-family: 'Geist Mono', monospace; font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px; background: var(--accent-clay); color: #111; }

    /* ─── Workout Volume Tracker ─── */
    .volume-grid { display: grid; grid-template-columns: 1fr 80px; gap: 8px; align-items: center; }
    .volume-row { display: contents; }
    .volume-muscle-input { font-size: 13px; }
    .volume-sets-input { font-size: 13px; text-align: center; font-family: 'Geist Mono', monospace; }
    .volume-header { font-size: 10px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
    .volume-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .volume-tag { font-size: 11px; font-family: 'Geist Mono', monospace; padding: 3px 8px; border-radius: 5px; background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary); }
    .volume-tag strong { color: var(--accent-beige); }
    .pr-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .pr-badge { font-size: 10px; font-family: 'Geist Mono', monospace; padding: 3px 7px; border-radius: 999px; background: rgba(194, 168, 130, 0.12); border: 1px solid rgba(194, 168, 130, 0.35); color: var(--accent-beige); }
    .exercise-library-chip { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--text-muted); padding:2px 6px; border:1px solid var(--border); border-radius:999px; background:var(--bg-secondary); }
    .exercise-note-input { width:100%; min-height:42px; margin-top:8px; padding:8px 9px; background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border); border-radius:6px; font-size:12px; resize:vertical; outline:none; }
    .exercise-note-input:focus { border-color:var(--accent-beige); background:var(--bg-active); }
    .exercise-muscle-preview { display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 8px; }
    .workout-progress-controls { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 12px; }
    .workout-progress-controls .selected { background:var(--accent-beige); color:var(--bg-primary); border-color:var(--accent-beige); }
    .muscle-bar-row { display:grid; grid-template-columns:minmax(70px, 0.9fr) minmax(110px, 2fr) 54px; gap:8px; align-items:center; margin-bottom:7px; font-size:11px; color:var(--text-secondary); }
    .muscle-bar-track { height:8px; border-radius:999px; background:var(--bg-tertiary); overflow:hidden; border:1px solid var(--border); }
    .muscle-bar-fill { height:100%; border-radius:999px; background:var(--accent-health); }
    .tracked-exercise-grid { display:grid; gap:8px; margin:10px 0 14px; }
    .tracked-exercise-row { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
    .workout-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .workout-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
      padding: 18px;
      border: 1px solid rgba(196,112,101,0.22);
      border-radius: 10px;
      background:
        linear-gradient(135deg, rgba(196,112,101,0.18), rgba(124,148,115,0.08) 42%, rgba(23,23,23,0.90) 72%),
        var(--bg-secondary);
      overflow: hidden;
    }
    .workout-hero-kicker, .workout-section-kicker, .workout-stat-label {
      font-family: 'Geist Mono', monospace;
      font-size: 9px;
      line-height: 1.2;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .workout-hero h1 {
      margin: 6px 0 4px;
      color: var(--text-primary);
      font-size: 30px;
      line-height: 1;
      font-weight: 650;
      letter-spacing: 0;
    }
    .workout-hero-subtitle { color: var(--accent-beige); font-family: 'Geist Mono', monospace; font-size: 12px; }
    .workout-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .workout-last-strip {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      min-width: 0;
    }
    .workout-last-strip span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
    .workout-last-strip strong { color: var(--text-primary); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
    .workout-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .workout-stat-card {
      min-height: 92px;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)), var(--bg-secondary);
      position: relative;
      overflow: hidden;
    }
    .workout-stat-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      height: 3px;
      background: var(--accent-health);
      opacity: 0.86;
    }
    .workout-stat-card:nth-child(2)::before { background: var(--accent-beige); }
    .workout-stat-card:nth-child(3)::before { background: var(--accent-sage); }
    .workout-stat-card:nth-child(4)::before { background: var(--accent-clay); }
    .workout-stat-value {
      margin-top: 10px;
      color: var(--text-primary);
      font-size: 22px;
      font-weight: 650;
      line-height: 1.05;
      overflow-wrap: anywhere;
    }
    .workout-stat-sub { margin-top: 6px; color: var(--text-muted); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
    .workout-panel {
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)), var(--bg-secondary);
      overflow: hidden;
    }
    .workout-volume-panel { border-color: rgba(196,112,101,0.24); background: linear-gradient(145deg, rgba(196,112,101,0.08), rgba(23,23,23,0.86) 48%), var(--bg-secondary); }
    .workout-progress-panel { opacity: 0.98; background: linear-gradient(145deg, rgba(124,148,115,0.075), rgba(23,23,23,0.86) 50%), var(--bg-secondary); }
    .workout-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .workout-section-title { margin-top: 3px; color: var(--text-primary); font-size: 15px; font-weight: 600; line-height: 1.25; }
    .workout-section-sub { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
    .workout-range-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .workout-range-btn {
      min-height: 28px;
      padding: 5px 8px;
      border-radius: 7px;
      border: 1px solid var(--border);
      background: var(--bg-tertiary);
      color: var(--text-secondary);
      font-size: 11px;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .workout-range-btn:hover { color: var(--text-primary); background: var(--bg-active); }
    .workout-range-btn.selected { color: var(--bg-primary); background: var(--accent-beige); border-color: var(--accent-beige); }
    .muscle-bar-list { display: flex; flex-direction: column; gap: 9px; }
    .muscle-bar-row { grid-template-columns: minmax(74px, 0.72fr) minmax(120px, 2fr) 44px; margin-bottom: 0; }
    .muscle-bar-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .muscle-bar-track { height: 12px; background: rgba(255,255,255,0.045); }
    .muscle-bar-fill { background: linear-gradient(90deg, var(--accent-health), var(--accent-beige)); }
    .muscle-bar-fill.goal-under { background: linear-gradient(90deg, var(--accent-health), var(--accent-clay)); }
    .muscle-bar-fill.goal-near { background: linear-gradient(90deg, var(--accent-clay), var(--accent-beige)); }
    .muscle-bar-fill.goal-met { background: linear-gradient(90deg, var(--accent-sage), var(--accent-beige)); }
    .muscle-bar-fill.goal-over { background: linear-gradient(90deg, var(--accent-sage), #d8c8a6); }
    .muscle-bar-value { font-family: 'Geist Mono', monospace; color: var(--text-primary); text-align: right; }
    .muscle-goal-note { font-family: 'Geist Mono', monospace; font-size: 9px; color: var(--text-muted); margin-top: 2px; }
    .muscle-goal-note.met { color: var(--accent-sage); }
    .muscle-goal-note.near { color: var(--accent-beige); }
    .muscle-goal-note.under { color: var(--accent-clay); }
    .muscle-goal-form { display: grid; grid-template-columns: minmax(0, 1fr) 86px 28px; gap: 8px; align-items: center; margin-bottom: 7px; }
    .muscle-goal-form .input { min-height: 34px; padding: 7px 9px; font-size: 12px; }
    .muscle-goal-remove { width: 28px; height: 28px; border-radius: 6px; color: var(--text-muted); background: var(--bg-tertiary); border: 1px solid var(--border); }
    .muscle-goal-remove:hover { color: var(--danger); border-color: rgba(196,112,101,0.45); }
    .muscle-goal-help { margin-bottom: 12px; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
    .workout-empty-inline {
      padding: 16px;
      border-radius: 8px;
      background: rgba(255,255,255,0.035);
      color: var(--text-muted);
      font-size: 12px;
      text-align: center;
    }
    .tracked-exercise-picker { display: flex; gap: 8px; margin-bottom: 10px; }
    .tracked-exercise-picker select { flex: 1; min-width: 0; }
    .tracked-exercise-card { margin-top: 12px; padding-top: 2px; }
    .tracked-exercise-name { font-size: 12px; color: var(--text-primary); font-weight: 600; }
    .tracked-exercise-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
    .tracked-chart-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
    .tracked-chart-pill { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.075); background: rgba(255,255,255,0.04); border-radius: 6px; padding: 4px 7px; }
    .tracked-chart-pill strong { color: var(--accent-beige); font-weight: 500; }
    .workout-progress-panel .chart-label { font-size: 7px; opacity: 0.82; }
    .workout-progress-panel .chart-value-label { fill: var(--accent-beige); font-size: 8px; opacity: 0.95; }
    .workout-progress-panel .chart-dot { r: 4; }
    .workout-progress-panel .chart-line { stroke-width: 2.4; }
    .workout-recent-section { display: flex; flex-direction: column; gap: 8px; }
    .workout-recent-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .workout-card-modern {
      margin-bottom: 0;
      padding: 10px 12px;
      border-left: 3px solid rgba(196,112,101,0.72);
      background: linear-gradient(135deg, rgba(196,112,101,0.08), rgba(194,181,165,0.04) 42%, transparent 70%), var(--bg-secondary);
    }
    .workout-card-modern:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.12); border-left-color: var(--accent-health); }
    .workout-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .workout-card-modern .workout-title { font-size: 13px; line-height: 1.25; }
    .workout-card-modern .workout-type-badge { font-size: 8px; padding: 2px 6px; }
    .workout-card-date { margin-top: 3px; color: var(--text-muted); font-family: 'Geist Mono', monospace; font-size: 10px; }
    .workout-card-modern .workout-exercise-list { margin-top: 6px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .workout-card-modern .volume-summary, .workout-card-modern .pr-summary { margin-top: 6px; gap: 4px; }
    .workout-card-modern .volume-tag { font-size: 9px; padding: 2px 6px; border-radius: 4px; }
    .workout-card-modern .pr-badge { font-size: 8px; padding: 2px 6px; }
    .workout-metric-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
    .workout-metric-row span {
      padding: 3px 6px;
      border-radius: 5px;
      background: rgba(255,255,255,0.045);
      color: var(--text-secondary);
      font-family: 'Geist Mono', monospace;
      font-size: 9px;
      line-height: 1.15;
    }
    .workout-empty-strong {
      padding: 28px 18px;
      border: 1px solid rgba(196,112,101,0.22);
      border-radius: 10px;
      background: var(--bg-secondary);
      text-align: center;
    }
    .workout-empty-title { color: var(--text-primary); font-size: 18px; font-weight: 650; }
    .workout-empty-copy { margin: 6px 0 16px; color: var(--text-muted); font-size: 13px; }
    @media (min-width: 760px) {
      .workout-hero { grid-template-columns: minmax(0, 1fr) auto minmax(190px, 0.42fr); align-items: center; }
      .workout-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .workout-panel { padding: 16px; }
      .workout-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 980px) {
      .workout-page { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
      .workout-hero, .workout-stats-grid, .workout-recent-section, .workout-empty-strong { grid-column: 1 / -1; }
      .workout-volume-panel { grid-column: span 7; min-height: 100%; }
      .workout-progress-panel { grid-column: span 5; min-height: 100%; }
      .workout-recent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 520px) {
      .workout-hero-actions { display: grid; grid-template-columns: 1fr; }
      .workout-section-head { flex-direction: column; }
      .workout-range-controls { width: 100%; justify-content: flex-start; }
      .tracked-exercise-picker { flex-direction: column; }
      .muscle-bar-row { grid-template-columns: minmax(58px, 0.62fr) minmax(96px, 1.45fr) 38px; gap: 6px; }
      .workout-stats-grid { grid-template-columns: 1fr; }
    }
    .exercise-name { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
    .set-row { display: grid; grid-template-columns: 30px 1fr 1fr 1fr 1fr 30px; gap: 6px; align-items: center; margin-bottom: 4px; }
    .set-row-header { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
    .set-cell { font-size: 12px; color: var(--text-primary); }
    input.set-cell { width: 100%; min-width: 0; padding: 6px 7px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 5px; font-size: 12px; font-family: 'Geist Mono', monospace; outline: none; }
    input.set-cell::placeholder { color: var(--text-secondary); opacity: 1; }
    input.set-cell:focus { border-color: var(--accent-beige); background: var(--bg-active); }

    /* ─── Supplement Log Row ─── */
    .modal-panel.workout-modal {
      width: 100%;
      max-height: 88vh;
      background: linear-gradient(145deg, rgba(196,112,101,0.055), rgba(23,23,23,0.96) 34%), var(--bg-secondary);
    }
    .workout-form-shell { display: flex; flex-direction: column; gap: 12px; }
    .workout-form-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 12px; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; background: rgba(255,255,255,0.025); }
    .workout-form-meta .habit-form-group.full { grid-column: 1 / -1; }
    .workout-form-meta .habit-form-label { margin-bottom: 4px; font-size: 9px; }
    .workout-form-meta .input { min-height: 34px; padding: 7px 9px; font-size: 12px; }
    .workout-form-meta .reflection-textarea { min-height: 46px !important; padding: 8px 9px; font-size: 12px; }
    .workout-editor-section { position: relative; padding: 12px 12px 0; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; background: rgba(255,255,255,0.02); }
    .workout-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .workout-editor-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-family: 'Geist Mono', monospace; }
    .workout-add-exercise-footer {
      position: sticky;
      bottom: 0;
      z-index: 2;
      margin: 10px -12px 0;
      padding: 10px 12px 12px;
      border-top: 1px solid rgba(255,255,255,0.07);
      background: linear-gradient(180deg, rgba(23,23,23,0.86), var(--bg-secondary));
    }
    .workout-add-exercise-footer .btn { width: 100%; }
    .workout-modal .exercise-block { padding: 10px; margin-bottom: 8px; background: rgba(255,255,255,0.035); }
    .workout-modal .exercise-block .input { min-height: 34px; padding: 7px 9px; }
    .workout-modal .exercise-note-input { min-height: 34px; padding: 7px 8px; font-size: 11px; margin-top: 6px; }
    .workout-modal .exercise-muscle-preview { margin: 4px 0 6px; gap: 4px; }
    .workout-modal .exercise-library-chip { font-size: 9px; padding: 2px 5px; }
    .exercise-last-session {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 2px 0 8px;
      padding: 8px 9px;
      border: 1px solid rgba(216,194,158,0.18);
      border-radius: 7px;
      background: rgba(216,194,158,0.055);
    }
    .exercise-last-session-copy { min-width: 0; flex: 1; }
    .exercise-last-session-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
    .exercise-last-session-heading strong { color: var(--accent-beige); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
    .exercise-last-session-heading span { color: var(--text-muted); font-size: 10px; }
    .exercise-last-sets { display: flex; flex-wrap: wrap; gap: 4px; }
    .exercise-last-set {
      padding: 3px 6px;
      border-radius: 5px;
      background: rgba(255,255,255,0.045);
      color: var(--text-secondary);
      font-family: 'Geist Mono', monospace;
      font-size: 10px;
      white-space: nowrap;
    }
    .exercise-last-session .btn { flex-shrink: 0; }
    .workout-modal .superset-controls { margin-bottom: 0; gap: 3px; }
    .workout-modal .superset-btn { font-size: 9px; padding: 3px 6px; }
    .workout-modal .set-row-header { font-size: 8px; }
    .workout-modal input.set-cell { padding: 5px 6px; font-size: 11px; min-height: 30px; }
    .workout-modal .volume-summary { margin-top: 0; gap: 4px; }
    .workout-modal .volume-tag { font-size: 9px; padding: 2px 6px; }
    .workout-modal-volume { padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.07); background: rgba(196,112,101,0.055); }
    @media (min-width: 640px) {
      .modal-panel.workout-modal { width: min(920px, calc(100vw - 48px)); max-width: 920px; max-height: 88vh; }
      .modal-panel.workout-modal .modal-body { padding: 14px; }
      .modal-panel.workout-modal .modal-header { padding: 13px 16px; }
      .modal-panel.workout-modal .modal-footer { padding: 10px 14px 14px; }
      .workout-form-meta { grid-template-columns: 130px 150px minmax(180px, 1fr) 96px 90px; align-items: end; }
      .workout-form-meta .habit-form-group.full { grid-column: auto; }
      .workout-form-meta .workout-notes-field { grid-column: 1 / -1; }
      .workout-editor-section { padding: 12px 14px 0; }
      .workout-add-exercise-footer { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
    }
    @media (max-width: 520px) {
      .workout-form-meta { grid-template-columns: 1fr; }
      .workout-editor-head { align-items: flex-start; flex-direction: column; }
      .exercise-last-session { align-items: stretch; flex-direction: column; }
      .exercise-last-session .btn { width: 100%; }
    }

    .supp-log-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
    .supp-log-row.skipped { opacity: 0.5; }
    .supp-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
    .supp-check.taken { background: var(--success); border-color: var(--success); color: #fff; }
    .supp-check.skipped { background: var(--bg-active); border-color: var(--text-muted); color: var(--text-muted); }
    .supp-name { flex: 1; font-size: 13px; color: var(--text-primary); }
    .supp-name.skipped { text-decoration: line-through; color: var(--text-muted); }
    .supp-dose { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--text-muted); }

    /* ─── Body Stat Row ─── */
    .body-stat-row { padding: 12px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; }
    .health-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
    .health-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
    .body-stat-date { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--text-primary); margin-bottom: 4px; }
    .body-stat-values { display: flex; gap: 14px; flex-wrap: wrap; }
    .body-stat-item { font-size: 12px; }
    .body-stat-item .label { color: var(--text-muted); }
    .body-stat-item .value { font-family: 'Geist Mono', monospace; color: var(--accent-beige); }

    /* Body measurements dashboard */
    .body-page { --body-sage: #a3b5a3; --body-rose: #c9a9a9; --body-clay: #c4a882; display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
    .body-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 144px; padding: 24px; border-radius: 14px; background: radial-gradient(circle at 78% 18%, rgba(163,181,163,0.18), transparent 34%), linear-gradient(135deg, rgba(196,168,130,0.12), rgba(23,23,23,0.96) 52%), var(--bg-secondary); }
    .body-hero::after { content: ''; position: absolute; width: 180px; height: 180px; right: -72px; bottom: -116px; border-radius: 50%; border: 22px solid rgba(201,169,169,0.08); pointer-events: none; }
    .body-hero > * { position: relative; z-index: 1; }
    .body-hero h1 { color: var(--text-primary); font-size: 29px; font-weight: 650; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
    .body-hero p { max-width: 590px; margin-top: 9px; color: #a6a39a; font-size: 13px; line-height: 1.55; text-wrap: pretty; }
    .body-log-button { flex: 0 0 auto; min-height: 42px; padding-inline: 16px; white-space: nowrap; }
    .body-log-button span { margin-right: 5px; font-size: 18px; line-height: 0; }
    .body-meta-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 1px 2px; color: #929089; font-family: 'Geist Mono', monospace; font-size: 10px; }
    .body-meta-line strong { color: #c5c0b0; font-weight: 500; }
    .body-snapshot { display: flex; align-items: stretch; overflow-x: auto; border-radius: 12px; background: rgba(23,23,23,0.92); }
    .body-snapshot-item { position: relative; flex: 1 0 170px; min-height: 104px; padding: 16px; }
    .body-snapshot-item + .body-snapshot-item::before { content: ''; position: absolute; top: 16px; bottom: 16px; left: 0; width: 1px; background: rgba(255,255,255,0.075); }
    .body-snapshot-label { color: #908f89; font-size: 11px; }
    .body-snapshot-value { margin-top: 8px; color: #ddd7c5; font-family: 'Geist Mono', monospace; font-size: 23px; line-height: 1; }
    .body-snapshot-value span { margin-left: 4px; color: #929089; font-size: 11px; }
    .body-snapshot-delta { margin-top: 10px; color: #86857f; font-family: 'Geist Mono', monospace; font-size: 9px; }
    .body-snapshot-delta.up::before, .body-snapshot-delta.down::before { display: inline-block; margin-right: 5px; color: var(--body-clay); }
    .body-snapshot-delta.up::before { content: '↗'; }
    .body-snapshot-delta.down::before { content: '↘'; color: var(--body-sage); }
    .body-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr); gap: 12px; }
    .body-panel { min-width: 0; padding: 17px; border: 1px solid rgba(255,255,255,0.075); border-radius: 12px; background: rgba(23,23,23,0.91); }
    .body-weight-panel { border-color: rgba(163,181,163,0.16); background: radial-gradient(circle at 88% 4%, rgba(163,181,163,0.09), transparent 36%), rgba(23,23,23,0.93); }
    .body-fat-panel { border-color: rgba(201,169,169,0.14); background: radial-gradient(circle at 90% 5%, rgba(201,169,169,0.08), transparent 38%), rgba(23,23,23,0.93); }
    .body-chart-heading, .body-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
    .body-panel-title { color: #d5cfbc; font-size: 13px; font-weight: 600; }
    .body-panel-sub { margin-top: 3px; color: #929089; font-size: 10px; line-height: 1.4; }
    .body-chart-change { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
    .body-chart-change strong { color: #c9c4b4; font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 500; }
    .body-chart-change span { color: #929089; font-size: 9px; }
    .body-panel .chart-svg { overflow: visible; }
    .body-panel .chart-grid { stroke: rgba(255,255,255,0.07); }
    .body-panel .chart-line { stroke-width: 2; vector-effect: non-scaling-stroke; }
    .body-panel .chart-area-fill { opacity: 0.09; }
    .body-panel .chart-dot { stroke: #171717; stroke-width: 2; vector-effect: non-scaling-stroke; }
    .body-panel .chart-label { fill: #96948c; font-size: 8px; }
    .body-panel .chart-value-label { fill: #aaa698; font-size: 8px; }
    .body-chart-empty { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #929089; font-size: 11px; text-align: center; }
    .body-chart-empty.compact { min-height: 120px; padding: 16px; line-height: 1.5; }
    .body-inline-action { color: #bfb7a3; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
    .body-measurement-panel { padding: 0; overflow: hidden; }
    .body-measurement-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 246px; }
    .body-metric-picker { padding: 18px; background: rgba(255,255,255,0.018); }
    .body-metric-buttons { display: flex; flex-direction: column; gap: 3px; max-height: 194px; margin-top: 12px; overflow-y: auto; padding-right: 3px; }
    .body-metric-button { width: 100%; padding: 8px 9px; border-radius: 7px; color: #8f8e87; font-size: 11px; text-align: left; transition: color 180ms ease, background-color 180ms ease; }
    .body-metric-button:hover { color: #d1cbb6; background: rgba(255,255,255,0.045); }
    .body-metric-button:focus-visible { outline: 2px solid var(--body-sage); outline-offset: -2px; }
    .body-metric-button.active { color: #d8d1bd; background: rgba(196,168,130,0.12); }
    .body-selected-chart { min-width: 0; padding: 18px; border-left: 1px solid rgba(255,255,255,0.065); }
    .body-lower-grid { display: grid; grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr); gap: 12px; align-items: start; }
    .body-symmetry-row { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.055); }
    .body-symmetry-row:last-child { border-bottom: 0; }
    .body-symmetry-head { display: flex; justify-content: space-between; gap: 10px; color: #a5a196; font-size: 10px; }
    .body-symmetry-head span:last-child { color: #929089; font-family: 'Geist Mono', monospace; font-size: 9px; }
    .body-symmetry-bars { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 7px; align-items: center; margin-top: 9px; }
    .body-symmetry-axis { height: 18px; background: rgba(255,255,255,0.14); }
    .body-symmetry-side { display: flex; align-items: center; gap: 6px; color: #8c8a82; font-family: 'Geist Mono', monospace; font-size: 8px; }
    .body-symmetry-side i { display: block; width: var(--bar); max-width: calc(100% - 28px); height: 6px; border-radius: 999px; background: var(--body-sage); opacity: 0.72; }
    .body-symmetry-side.left { justify-content: flex-end; }
    .body-symmetry-side.left i { background: var(--body-clay); }
    .body-history { min-width: 0; }
    .body-history-heading { display: flex; justify-content: space-between; align-items: flex-end; margin: 2px 2px 10px; }
    .body-history-heading h2 { color: #d1cbb6; font-size: 14px; font-weight: 600; }
    .body-history-heading p { margin-top: 3px; color: #929089; font-size: 10px; }
    .body-page .body-stat-row { padding: 12px 13px; margin-bottom: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,0.06); border-radius: 0; background: rgba(23,23,23,0.76); transition: background-color 180ms ease; }
    .body-page .body-stat-row:first-of-type { border-radius: 10px 10px 0 0; }
    .body-page .body-stat-row:last-child { border-bottom: 0; border-radius: 0 0 10px 10px; }
    .body-page .body-stat-row:hover { background: rgba(30,30,30,0.96); }
    .body-page .health-row-top { margin-bottom: 7px; }
    .body-page .body-stat-date { margin-bottom: 0; color: #aaa698; font-size: 10px; }
    .body-page .body-stat-values { gap: 6px; }
    .body-page .body-stat-item { display: inline-flex; align-items: baseline; gap: 5px; min-height: 25px; padding: 5px 7px; border-radius: 6px; background: rgba(255,255,255,0.035); font-size: 10px; }
    .body-page .body-stat-item.featured { background: rgba(163,181,163,0.10); }
    .body-page .body-stat-item .label { color: #929089; }
    .body-page .body-stat-item .value { color: #bcb6a5; }
    .body-page .body-stat-item.featured .value { color: #c9d0c1; }
    .body-stat-note { margin-top: 8px; color: #929089; font-size: 10px; line-height: 1.45; }
    .body-empty { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 46px 22px; border: 1px solid rgba(163,181,163,0.13); border-radius: 12px; background: radial-gradient(circle at 50% 20%, rgba(163,181,163,0.08), transparent 34%), rgba(23,23,23,0.74); text-align: center; }
    .body-empty-visual { position: relative; width: 168px; height: 76px; margin-bottom: 24px; }
    .body-empty-line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.075); }
    .body-empty-line.one { top: 12px; } .body-empty-line.two { top: 38px; } .body-empty-line.three { top: 64px; }
    .body-empty-visual::before { content: ''; position: absolute; inset: 6px 4px 7px; background: linear-gradient(165deg, transparent 0 15%, rgba(163,181,163,0.28) 16% 17%, transparent 18% 32%, rgba(196,168,130,0.50) 33% 35%, transparent 36% 53%, rgba(201,169,169,0.38) 54% 56%, transparent 57%); clip-path: polygon(0 78%, 18% 55%, 36% 66%, 58% 20%, 76% 43%, 100% 8%, 100% 100%, 0 100%); }
    .body-empty-visual span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #a3b5a3; box-shadow: 0 0 0 3px #171717; }
    .body-empty-visual span:nth-of-type(1) { left: 27px; top: 42px; } .body-empty-visual span:nth-of-type(2) { left: 95px; top: 18px; background: #c4a882; } .body-empty-visual span:nth-of-type(3) { right: 5px; top: 8px; background: #c9a9a9; }
    .body-empty h2 { color: #d7d0bd; font-size: 19px; font-weight: 600; }
    .body-empty p { max-width: 460px; margin: 9px auto 17px; color: #918f87; font-size: 12px; line-height: 1.55; }
    .body-empty-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 20px; }
    .body-empty-tags span { padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,0.05); color: #8e8c84; font-family: 'Geist Mono', monospace; font-size: 9px; }
    @media (max-width: 820px) {
      .body-dashboard-grid, .body-lower-grid { grid-template-columns: 1fr; }
      .body-measurement-layout { grid-template-columns: 170px minmax(0, 1fr); }
    }
    @media (max-width: 600px) {
      .body-page { gap: 10px; }
      .body-hero { align-items: flex-start; flex-direction: column; min-height: 0; padding: 19px; }
      .body-hero h1 { font-size: 24px; }
      .body-log-button { width: 100%; }
      .body-meta-line { align-items: flex-start; flex-direction: column; gap: 4px; }
      .body-snapshot-item { flex-basis: 146px; min-height: 96px; padding: 14px; }
      .body-snapshot-value { font-size: 20px; }
      .body-measurement-layout { grid-template-columns: 1fr; }
      .body-metric-picker { padding-bottom: 11px; }
      .body-metric-buttons { flex-direction: row; max-height: none; overflow-x: auto; padding-bottom: 3px; }
      .body-metric-button { width: auto; flex: 0 0 auto; padding-inline: 11px; }
      .body-selected-chart { border-top: 1px solid rgba(255,255,255,0.065); border-left: 0; }
      .body-chart-heading { flex-direction: column; }
      .body-chart-change { align-items: flex-start; text-align: left; }
      .body-panel { padding: 14px; }
    }
    @media (prefers-reduced-motion: reduce) { .body-metric-button, .body-page .body-stat-row { transition: none; } }
    @media (min-width: 720px) {
      .modal-panel.body-stat-modal { width: min(760px, calc(100vw - 48px)); max-width: 760px; max-height: 90vh; }
      .body-stat-modal .habit-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    /* ─── Bloodwork Row ─── */
    .blood-row { padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
    .blood-marker { font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .blood-value { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--accent-beige); }
    .blood-range { font-size: 11px; color: var(--text-muted); }

    /* ─── Health Event Row ─── */
    .health-event-row { padding: 12px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; border-left: 3px solid var(--accent-rose); }
    .health-event-type { font-family: 'Geist Mono', monospace; font-size: 9px; padding: 2px 7px; border-radius: 3px; background: var(--bg-active); color: var(--text-secondary); display: inline-block; margin-bottom: 4px; }
    .health-event-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .health-event-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

    /* ─── Autocomplete Dropdown ─── */
    .autocomplete-dropdown { position: absolute; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; z-index: 100; max-height: 160px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.3); min-width: 200px; }
    .autocomplete-item { padding: 8px 12px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
    .autocomplete-item:hover { background: var(--bg-tertiary); }

    /* ─── Cardio Card ─── */
    .cardio-card { padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
    .cardio-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
    .cardio-meta { display: flex; gap: 12px; margin-top: 4px; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--text-muted); }

    /* ═══════════════════════════════════════════════════════════════
       PHASE 7.5 — VISUAL POLISH + CHART FOUNDATION
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Module Accent Colors ─── */
    :root {
      --accent-planner: #c2b5a5;
      --accent-calendar: #8fa5b5;
      --accent-timer: #c4a882;
      --accent-track: #7c9473;
      --accent-habits: #a3b5a3;
      --accent-health: #c47065;
    }

    /* ─── Cards with Area-Colored Left Border ─── */
    .card-colored {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent-beige);
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 8px;
      transition: all 0.15s ease;
    }
    .card-colored:hover { background: var(--bg-tertiary); }
    .card-colored.planner { border-left-color: var(--accent-planner); }
    .card-colored.calendar { border-left-color: var(--accent-calendar); }
    .card-colored.timer { border-left-color: var(--accent-timer); }
    .card-colored.track { border-left-color: var(--accent-track); }
    .card-colored.habits { border-left-color: var(--accent-habits); }
    .card-colored.health { border-left-color: var(--accent-health); }

    /* ─── Stat Card ─── */
    .stat-card {
      padding: 16px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }
    .stat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--accent-beige);
      opacity: 0.5;
    }
    .stat-card.planner::before { background: var(--accent-planner); }
    .stat-card.timer::before { background: var(--accent-timer); }
    .stat-card.track::before { background: var(--accent-track); }
    .stat-card.habits::before { background: var(--accent-habits); }
    .stat-card.health::before { background: var(--accent-health); }
    .stat-label { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px; }
    .stat-value { font-family: 'Geist Mono', monospace; font-size: 22px; font-weight: 500; color: var(--text-primary); }
    .stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .stat-trend { font-family: 'Geist Mono', monospace; font-size: 10px; margin-top: 4px; }
    .stat-trend.up { color: var(--success); }
    .stat-trend.down { color: var(--danger); }

    /* ─── Chart Containers ─── */
    .chart-container { padding: 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
    .chart-title { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; }
    .chart-svg { width: 100%; overflow: visible; }
    .chart-bar { transition: opacity 0.15s ease; }
    .chart-bar:hover { opacity: 0.8; }
    .chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .chart-dot { transition: r 0.15s ease; }
    .chart-dot:hover { r: 5; }
    .chart-label { font-family: 'Geist Mono', monospace; font-size: 9px; fill: var(--text-muted); }
    .chart-axis { stroke: var(--border); stroke-width: 0.5; }
    .chart-grid { stroke: var(--border); stroke-width: 0.3; opacity: 0.5; }
    .chart-area-fill { opacity: 0.1; }

    /* ─── Donut Chart ─── */
    .donut-container { display: flex; align-items: center; gap: 16px; }
    .donut-center-text { font-family: 'Geist Mono', monospace; font-size: 18px; fill: var(--text-primary); }
    .donut-legend { display: flex; flex-direction: column; gap: 6px; }
    .donut-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
    .donut-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

    /* ─── Progress Ring ─── */
    .progress-ring-circle { transition: stroke-dashoffset 0.5s ease; }

    /* ─── Heatmap (Habits) ─── */
    .heatmap-cell { width: 10px; height: 10px; border-radius: 2px; transition: all 0.15s ease; }
    .heatmap-cell:hover { transform: scale(1.3); z-index: 1; }
    .heatmap-cell.level-0 { background: var(--bg-tertiary); }
    .heatmap-cell.level-1 { background: rgba(124, 148, 115, 0.25); }
    .heatmap-cell.level-2 { background: rgba(124, 148, 115, 0.45); }
    .heatmap-cell.level-3 { background: rgba(124, 148, 115, 0.65); }
    .heatmap-cell.level-4 { background: rgba(124, 148, 115, 0.85); }

    /* ─── Better Empty States ─── */
    .empty-v2 { text-align: center; padding: 40px 24px; }
    .empty-v2-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.3; }
    .empty-v2-title { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
    .empty-v2-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }
    .empty-v2-action { display: inline-flex; }

    /* ─── Status Badges ─── */
    .badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 7px; border-radius: 3px;
      font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.04em;
    }
    .badge-done { background: rgba(124, 148, 115, 0.12); color: var(--success); }
    .badge-skipped { background: rgba(138, 138, 138, 0.1); color: var(--text-muted); }
    .badge-overdue { background: rgba(196, 112, 101, 0.12); color: var(--danger); }
    .badge-planned { background: rgba(194, 181, 165, 0.1); color: var(--accent-planner); }
    .badge-area { background: var(--bg-active); }

    /* ─── Mini Progress Bars ─── */
    .mini-progress { height: 3px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; }
    .mini-progress-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }

    /* ─── Module Header Accent ─── */
    .module-header { position: relative; padding-bottom: 8px; margin-bottom: 16px; }
    .module-header::after {
      content: '';
      position: absolute; bottom: 0; left: 0;
      width: 40px; height: 2px;
      background: var(--accent-beige);
      border-radius: 1px;
    }
    .module-header.planner::after { background: var(--accent-planner); }
    .module-header.timer::after { background: var(--accent-timer); }
    .module-header.track::after { background: var(--accent-track); }
    .module-header.habits::after { background: var(--accent-habits); }
    .module-header.health::after { background: var(--accent-health); }

    /* ─── Greeting Card ─── */
    .greeting-card {
      padding: 20px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 16px;
      position: relative;
      overflow: hidden;
    }
    .greeting-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--accent-beige);
      opacity: 0.6;
    }
    .greeting-title { font-size: 13px; color: var(--text-muted); margin-bottom: 2px; }
    .greeting-name { font-size: 20px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.01em; }
    .greeting-date { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); margin-top: 8px; }

    /* ─── Nav active improvements ─── */
    .nav-item.active { color: var(--accent-beige); position: relative; }
    .nav-item.active::after {
      content: '';
      position: absolute;
      bottom: 2px;
      width: 16px; height: 2px;
      background: var(--accent-beige);
      border-radius: 1px;
    }

    /* ═══════════════════════════════════════════════════════════════
       PHASE 8 — JOURNAL + LIBRARY CSS
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Journal ─── */
    .journal-entry-card { padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--accent-clay); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
    .journal-entry-card:hover { background: var(--bg-tertiary); }
    .journal-type-badge { display: inline-block; font-family: 'Geist Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 3px; background: rgba(194, 168, 130, 0.12); color: var(--accent-clay); margin-bottom: 6px; }
    .journal-title { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
    .journal-preview { font-size: 12px; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .journal-editor-body { width: 100%; min-height: 200px; padding: 12px; background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; line-height: 1.6; outline: none; resize: vertical; }
    .writing-modal .longform-editor { min-height: clamp(320px, 48vh, 620px) !important; }
    .writing-modal .supporting-editor { min-height: 96px !important; }
    .journal-editor-body:focus { border-color: var(--border-active); }
    .journal-editor-summary { width: 100%; min-height: 60px; padding: 10px 12px; background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; line-height: 1.5; outline: none; resize: vertical; }
    .journal-meta-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
    .journal-export-badge { font-family: 'Geist Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 3px; }
    .journal-export-badge.full { background: rgba(124, 148, 115, 0.12); color: var(--success); }
    .journal-export-badge.summary_only { background: rgba(194, 168, 130, 0.12); color: var(--accent-clay); }
    .journal-export-badge.exclude { background: rgba(138, 138, 138, 0.1); color: var(--text-muted); }

    /* ─── Library Cards ─── */
    .library-card { padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
    .library-card:hover { background: var(--bg-tertiary); }
    .library-card.idea { border-left: 3px solid var(--accent-clay); }
    .library-card.note { border-left: 3px solid var(--accent-calendar); }
    .library-card.quote { border-left: 3px solid var(--accent-rose); }
    .library-card.principle { border-left: 3px solid var(--accent-sage); }
    .library-card.media { border-left: 3px solid var(--accent-health); }
    .library-title { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
    .library-body { font-size: 12px; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .library-meta { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
    .status-badge { font-family: 'Geist Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 3px; }
    .status-badge.raw { background: rgba(194, 168, 130, 0.12); color: var(--accent-clay); }
    .status-badge.developing { background: rgba(159, 154, 194, 0.15); color: #9f9ac2; }
    .status-badge.active { background: rgba(124, 148, 115, 0.12); color: var(--success); }
    .status-badge.used { background: rgba(143, 165, 181, 0.15); color: #8fa5b5; }
    .status-badge.archived { background: rgba(138, 138, 138, 0.1); color: var(--text-muted); text-decoration: line-through; }
    .status-badge.want { background: rgba(194, 168, 130, 0.12); color: var(--accent-clay); }
    .status-badge.finished { background: rgba(124, 148, 115, 0.12); color: var(--success); }
    .status-badge.abandoned { background: rgba(196, 112, 101, 0.1); color: var(--danger); }

    /* ─── Quote Card ─── */
    .quote-card { padding: 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--accent-rose); border-radius: 10px; margin-bottom: 8px; }
    .quote-text { font-size: 14px; font-style: italic; color: var(--text-primary); line-height: 1.6; margin-bottom: 8px; }
    .quote-author { font-size: 12px; color: var(--text-secondary); }
    .quote-source { font-size: 10px; color: var(--text-muted); font-family: 'Geist Mono', monospace; }
    .quote-fav { cursor: pointer; font-size: 16px; transition: all 0.15s; }
    .quote-fav.active { color: var(--accent-clay); }

    /* ─── Principle Card ─── */
    .principle-card { padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--accent-sage); border-radius: 10px; margin-bottom: 8px; }
    .principle-statement { font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 1.5; margin-bottom: 6px; }
    .principle-explanation { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

    /* ─── Media Card ─── */
    .media-card { padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--accent-health); border-radius: 10px; margin-bottom: 8px; }
    .media-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
    .media-creator { font-size: 12px; color: var(--text-secondary); }
    .media-rating { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--accent-clay); }

    /* ─── Search Bar ─── */
    .search-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; }
    .search-bar input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 13px; outline: none; }
    .search-bar input::placeholder { color: var(--text-muted); }
    .search-bar .search-icon { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
    .knowledge-hero { display: grid; gap: 12px; margin: 16px 0 16px; }
    .knowledge-hero-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
    .knowledge-title { font-size: 22px; font-weight: 400; color: var(--text-primary); letter-spacing: 0; }
    .knowledge-subtitle { font-size: 13px; color: var(--text-secondary); line-height: 1.5; max-width: 520px; margin-top: 4px; }
    .knowledge-search { margin-bottom: 0; padding: 10px 12px; background: rgba(30, 30, 30, 0.92); }
    .knowledge-search input { font-size: 14px; }
    .knowledge-filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 16px; }
    .knowledge-filter-row .pill { margin-bottom: 0; }
    .journal-date-strip { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 8px; align-items: center; margin-bottom: 12px; }
    .journal-date-center { text-align: center; min-width: 0; }
    .journal-date-main { font-size: 15px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .journal-date-note { font-family: 'Geist Mono', monospace; font-size: 9px; color: var(--accent-sage); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
    .journal-compose-card { padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--accent-rose); border-radius: 10px; margin-bottom: 16px; }
    .journal-compose-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    .journal-compose-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
    .journal-compose-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-top: 4px; }
    .journal-search-results { margin-top: 16px; }
    .library-quick-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
    @media (min-width: 640px) { .library-quick-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
    .library-quick-card { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.15s; text-align: left; }
    .library-quick-card:hover { background: var(--bg-tertiary); }
    .library-quick-icon { font-size: 14px; color: var(--accent-beige); width: 16px; text-align: center; }
    .library-quick-label { font-size: 12px; font-weight: 500; color: var(--text-primary); }
    .library-filter-bar { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin-bottom: 16px; }
    .library-filter-bar .search-bar { flex: 1 1 240px; margin-bottom: 0; }
    .library-filter-bar .input { min-height: 38px; }
    .library-section { margin-top: 18px; }
    .library-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .library-section-title { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
    .library-section-link { font-size: 12px; color: var(--accent-beige); text-decoration: none; white-space: nowrap; }
    .library-result-card { padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--accent-beige); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
    .library-result-card:hover { background: var(--bg-tertiary); }
    .library-result-card.idea { border-left-color: var(--accent-clay); }
    .library-result-card.note { border-left-color: var(--accent-calendar); }
    .library-result-card.quote { border-left-color: var(--accent-rose); }
    .library-result-card.principle { border-left-color: var(--accent-sage); }
    .library-result-card.media { border-left-color: var(--accent-health); }
    .library-result-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
    .library-result-kind { font-family: 'Geist Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
    .library-result-title { font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 1.35; }
    .library-result-body { font-size: 12px; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
    .library-empty-note { padding: 12px 14px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-muted); font-size: 12px; text-align: center; }

    /* ─── Library Tabs ─── */
    .library-tabs { display: flex; gap: 4px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 2px; }
    .library-tab { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .library-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
    .library-tab.active { color: var(--accent-beige); background: var(--bg-active); border-color: var(--border); }

    /* ─── Privacy indicator ─── */
    .privacy-lock { font-size: 10px; color: var(--text-muted); margin-left: 4px; }

    /* ═══════════════════════════════════════════════════════════════
       PHASE 9 — REVIEWS + IDENTITIES + EXPERIMENTS + RECORDS
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Review Tabs ─── */
    .review-tabs { display: flex; gap: 4px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 2px; }
    .review-tab { padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .review-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
    .review-tab.active { color: var(--accent-beige); background: var(--bg-active); border-color: var(--border); }

    /* ─── Review Card ─── */
    .review-card { padding: 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; }
    .review-card-title { font-size: 15px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
    .review-card-meta { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
    .review-card-body { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

    /* ─── Metric Grid ─── */
    .metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
    .metric-cell { padding: 10px; background: var(--bg-tertiary); border-radius: 8px; }
    .metric-label { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }
    .metric-value { font-size: 16px; font-weight: 500; color: var(--text-primary); }

    /* ─── Identity Card ─── */
    .identity-card { padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--accent-beige); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
    .identity-card:hover { background: var(--bg-tertiary); }
    .identity-name { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
    .identity-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
    .identity-stats { display: flex; gap: 12px; margin-top: 8px; }
    .identity-stat { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); }
    .identity-stat strong { color: var(--accent-beige); font-weight: 500; }
    .identity-vote-bar { height: 4px; background: var(--bg-tertiary); border-radius: 2px; margin-top: 8px; overflow: hidden; }
    .identity-vote-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }

    /* ─── Experiment Card ─── */
    .experiment-card { padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
    .experiment-card:hover { background: var(--bg-tertiary); }
    .experiment-title { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
    .experiment-hypothesis { font-size: 12px; color: var(--text-secondary); font-style: italic; margin-bottom: 6px; }
    .experiment-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .experiment-badge { font-family: 'Geist Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 3px; }
    .experiment-badge.planned { background: rgba(159, 154, 194, 0.15); color: #9f9ac2; }
    .experiment-badge.active { background: rgba(124, 148, 115, 0.12); color: var(--success); }
    .experiment-badge.completed { background: rgba(124, 148, 115, 0.12); color: var(--success); }
    .experiment-badge.abandoned { background: rgba(196, 112, 101, 0.1); color: var(--danger); }
    .adherence-track { height: 4px; background: var(--bg-tertiary); border-radius: 2px; margin-top: 6px; overflow: hidden; }
    .adherence-fill { height: 100%; border-radius: 2px; background: var(--accent-sage); transition: width 0.3s ease; }
    .experiment-checkins { display: grid; gap: 6px; margin-top: 10px; }
    .experiment-checkin-item { display: grid; grid-template-columns: auto minmax(78px, auto) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.025); }
    .experiment-checkin-date { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-secondary); white-space: nowrap; }
    .experiment-checkin-note { min-width: 0; font-size: 11px; color: var(--text-secondary); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .experiment-checkin-score { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-muted); white-space: nowrap; }
    .experiment-checkin-more { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
    .experiment-modal .experiment-checkins { margin-top: 6px; }
    .experiment-modal .experiment-checkin-item { grid-template-columns: auto minmax(88px, auto) minmax(0, 1fr) auto; padding: 9px 10px; }
    .experiment-modal .experiment-checkin-note { white-space: normal; font-size: 12px; }
    .experiment-checkin-entry-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(100px, 0.7fr) minmax(120px, 0.9fr); gap: 8px; align-items: center; }
    .experiment-checkin-entry-row .input { width: 100% !important; }
    @media (min-width: 640px) {
      .modal-panel.experiment-modal { width: calc(100vw - 48px); max-width: 1040px; max-height: 92vh; }
      .modal-panel.experiment-modal .modal-body { padding: 18px; }
    }
    @media (min-width: 900px) {
      .experiment-modal .habit-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .experiment-modal .habit-form-group.full { grid-column: 1 / -1; }
    }
    @media (max-width: 560px) {
      .experiment-checkin-item { grid-template-columns: auto minmax(74px, auto) minmax(0, 1fr); }
      .experiment-checkin-score { grid-column: 2 / -1; }
      .experiment-checkin-entry-row { grid-template-columns: 1fr; }
    }

    /* ─── Record Card ─── */
    .record-card { padding: 12px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--accent-clay); border-radius: 10px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
    .record-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .record-value { font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--accent-clay); }
    .record-date { font-size: 10px; color: var(--text-muted); }

    /* ─── Area Status ─── */
    .area-status { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 3px; display: inline-block; }
    .area-status.active { background: rgba(124, 148, 115, 0.12); color: var(--success); }
    .area-status.light { background: rgba(194, 168, 130, 0.12); color: var(--accent-clay); }
    .area-status.neglected { background: rgba(196, 112, 101, 0.08); color: var(--danger); }
    .area-status.nodata { background: rgba(138, 138, 138, 0.08); color: var(--text-muted); }

    /* ─── Review Prompt ─── */
    .review-prompt { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; font-style: italic; }
    .review-answer { width: 100%; min-height: 60px; padding: 10px 12px; background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; line-height: 1.5; outline: none; resize: vertical; margin-bottom: 12px; }
    .review-answer:focus { border-color: var(--border-active); }

    /* ─── Check-in row ─── */
    .checkin-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
    .checkin-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .checkin-dot.done { background: var(--accent-sage); }
    .checkin-dot.partial { background: var(--accent-clay); }
    .checkin-dot.missed { background: var(--danger); }
    .checkin-dot.pending { background: var(--bg-active); }

    /* ─── Dashboard action grid ─── */
    .action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
    .action-card { padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.15s; text-align: center; }
    .action-card:hover { background: var(--bg-tertiary); }
    .action-icon { font-size: 20px; margin-bottom: 6px; }
    .action-label { font-size: 12px; font-weight: 500; color: var(--text-primary); }
    .action-desc { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

    /* ═══════════════════════════════════════════════════════════════
       PHASE 10 — EXPORT CENTER + ANALYTICS
       ═══════════════════════════════════════════════════════════════ */
    .export-tabs { display: flex; gap: 3px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 2px; }
    .export-tab { padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .export-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
    .export-tab.active { color: var(--accent-beige); background: var(--bg-active); border-color: var(--border); }

    .preset-card { padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--accent-clay); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
    .preset-card:hover { background: var(--bg-tertiary); }
    .preset-title { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 3px; }
    .preset-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
    .preset-meta { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 6px; }

    .export-opt-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
    .export-opt-row:last-child { border-bottom: none; }
    .export-opt-label { color: var(--text-primary); }
    .export-opt-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .export-warning { padding: 8px 12px; background: rgba(196, 112, 101, 0.08); border: 1px solid rgba(196, 112, 101, 0.2); border-radius: 8px; font-size: 12px; color: var(--accent-rose); margin: 8px 0; }
    .export-success { padding: 8px 12px; background: rgba(124, 148, 115, 0.08); border: 1px solid rgba(124, 148, 115, 0.2); border-radius: 8px; font-size: 12px; color: var(--accent-sage); margin: 8px 0; }

    .export-preview-box { padding: 12px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px; font-family: 'Geist Mono', monospace; font-size: 11px; line-height: 1.5; color: var(--text-secondary); max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }

    .export-counts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 12px 0; }
    .export-count-cell { padding: 8px 10px; background: var(--bg-tertiary); border-radius: 6px; }
    .export-count-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
    .export-count-value { font-size: 14px; font-weight: 500; color: var(--text-primary); }

    .module-toggle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .module-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--text-primary); transition: all 0.15s; }
    .module-toggle:hover { background: var(--bg-secondary); }
    .module-toggle.active { border-color: var(--accent-clay); background: rgba(194, 168, 130, 0.08); }
    .module-toggle input { cursor: pointer; }

    .coverage-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; }
    .coverage-bar { flex: 1; height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
    .coverage-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
    .coverage-label { width: 100px; color: var(--text-secondary); flex-shrink: 0; }
    .coverage-pct { width: 36px; text-align: right; color: var(--text-muted); font-family: 'Geist Mono', monospace; font-size: 10px; }

    /* Home dashboard */
    .home-dashboard { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; }
    .home-hero { position: relative; overflow: hidden; padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.09); background: radial-gradient(circle at 10% 12%, rgba(255,92,138,0.20), transparent 30%), radial-gradient(circle at 88% 16%, rgba(56,189,248,0.18), transparent 32%), radial-gradient(circle at 76% 92%, rgba(45,212,191,0.13), transparent 30%), linear-gradient(135deg, rgba(194,181,165,0.13), rgba(23,23,23,0.92) 58%); box-shadow: 0 18px 46px rgba(0,0,0,0.28); }
    .home-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, #ff5c8a, #ff9f43, #2dd4bf, #38bdf8, #c084fc); opacity: 0.75; }
    .home-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; position: relative; z-index: 1; }
    .home-kicker { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent-beige); margin-bottom: 7px; }
    .home-hero-title { font-size: 28px; line-height: 1.05; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; max-width: 440px; overflow-wrap: anywhere; }
    .home-hero-summary { display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; }
    .home-hero-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); color: var(--text-secondary); font-size: 12px; line-height: 1.35; }
    .home-hero-pill.strong { color: var(--text-primary); background: rgba(194,181,165,0.10); border-color: rgba(194,181,165,0.20); }
    .home-hero-side { display: flex; align-items: flex-start; justify-content: flex-end; gap: 14px; flex-shrink: 0; }
    .home-hero-meter { width: 92px; height: 92px; flex-shrink: 0; display: grid; place-items: center; }
    .home-hero-timer { min-width: 230px; max-width: 320px; padding: 12px; border-radius: 10px; border: 1px solid rgba(45,212,191,0.22); background: rgba(17,17,17,0.44); box-shadow: 0 16px 40px rgba(0,0,0,0.18); cursor: pointer; }
    .home-hero-timer.live { border-color: rgba(45,212,191,0.34); background: linear-gradient(145deg, rgba(45,212,191,0.10), rgba(17,17,17,0.48)); }
    .home-hero-timer-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .home-hero-timer-label { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
    .home-hero-timer-time { font-family: 'Geist Mono', monospace; font-size: 26px; line-height: 1; color: var(--text-primary); margin-bottom: 7px; overflow-wrap: anywhere; }
    .home-hero-timer-note { font-size: 11px; line-height: 1.35; color: var(--text-secondary); overflow-wrap: anywhere; margin-top: 7px; }
    .home-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; position: relative; z-index: 1; }
    .home-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 8px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); color: var(--text-primary); font-size: 12px; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
    .home-action:hover { transform: translateY(-1px); background: rgba(255,255,255,0.075); border-color: rgba(255,255,255,0.14); }
    .home-action.primary { background: rgba(194,181,165,0.16); border-color: rgba(194,181,165,0.28); color: var(--accent-beige); }
    .home-priority-grid, .home-grid, .home-visual-grid, .home-lower-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .home-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-kpi { min-height: 112px; padding: 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(145deg, color-mix(in srgb, var(--c) 15%, transparent), rgba(255,255,255,0.035)); cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; }
    .home-kpi:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c) 34%, rgba(255,255,255,0.1)); }
    .home-kpi-label { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; }
    .home-kpi-value { font-size: 24px; font-weight: 650; color: var(--text-primary); line-height: 1; }
    .home-kpi-sub { font-size: 11px; color: var(--text-secondary); margin-top: 6px; line-height: 1.35; }
    .home-panel { padding: 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(23,23,23,0.86); overflow: hidden; }
    .home-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .home-panel-title { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); }
    .home-panel-link { font-size: 11px; color: var(--accent-beige); text-decoration: none; }
    .home-tasks-panel { background: linear-gradient(145deg, rgba(255,92,138,0.10), rgba(23,23,23,0.90) 44%), rgba(23,23,23,0.86); }
    .home-tasks-headline { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .home-tasks-count { font-size: 30px; font-weight: 650; line-height: 1; color: var(--text-primary); }
    .home-tasks-count span { color: #ff5c8a; }
    .home-tasks-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.4; margin-top: 4px; }
    .home-task-list { display: flex; flex-direction: column; gap: 10px; }
    .home-task-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: flex-start; padding: 13px; border-radius: 9px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid var(--c, var(--accent-planner)); cursor: pointer; }
    .home-task-item:hover { background: rgba(255,255,255,0.065); }
    .home-task-item.done { opacity: 0.62; background: rgba(255,255,255,0.025); }
    .home-task-check { width: 28px; height: 28px; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--c, var(--accent-planner)) 52%, var(--border)); display: inline-flex; align-items: center; justify-content: center; color: transparent; background: rgba(255,255,255,0.02); flex-shrink: 0; font-size: 14px; transition: all 0.15s ease; }
    .home-task-check.checked { color: #111; background: var(--c, var(--accent-planner)); border-color: var(--c, var(--accent-planner)); }
    .home-task-title { font-size: 16px; line-height: 1.35; color: var(--text-primary); overflow-wrap: anywhere; }
    .home-task-item.done .home-task-title { text-decoration: line-through; color: var(--text-secondary); }
    .home-task-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .home-task-chip { display: inline-flex; align-items: center; min-height: 23px; padding: 4px 7px; border-radius: 6px; background: rgba(255,255,255,0.055); color: var(--text-secondary); font-family: 'Geist Mono', monospace; font-size: 10px; line-height: 1.2; }
    .home-task-chip.due { color: var(--danger); background: rgba(196,112,101,0.12); }
    .home-task-chip.area { color: var(--c, var(--accent-planner)); background: color-mix(in srgb, var(--c, var(--accent-planner)) 14%, transparent); }
    .home-task-chip.priority { color: #ffd166; background: rgba(255,209,102,0.12); }
    .home-more-tasks { margin-top: 12px; color: var(--text-muted); font-size: 12px; text-align: center; }
    .home-timer-card { position: relative; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 14% 18%, rgba(255,159,67,0.22), transparent 34%), radial-gradient(circle at 92% 10%, rgba(45,212,191,0.16), transparent 30%), rgba(23,23,23,0.88); }
    .home-timer-card.live { border-color: rgba(45,212,191,0.30); box-shadow: 0 0 0 1px rgba(45,212,191,0.08), 0 18px 46px rgba(0,0,0,0.24); }
    .home-live-indicator { display: inline-flex; align-items: center; gap: 7px; color: #2dd4bf; font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
    .home-live-dot { width: 8px; height: 8px; border-radius: 999px; background: #2dd4bf; box-shadow: 0 0 0 0 rgba(45,212,191,0.52); animation: homeLivePulse 1.6s ease-out infinite; }
    @keyframes homeLivePulse { 0% { box-shadow: 0 0 0 0 rgba(45,212,191,0.52); } 100% { box-shadow: 0 0 0 11px rgba(45,212,191,0); } }
    .home-timer-time { font-family: 'Geist Mono', monospace; font-size: 38px; line-height: 1; color: var(--text-primary); margin: 18px 0 10px; overflow-wrap: anywhere; }
    .home-timer-detail { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
    .home-timer-note { color: var(--text-secondary); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; margin-bottom: 14px; }
    .home-timer-empty { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin: 18px 0; }
    .home-focus-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; align-items: end; min-height: 132px; }
    .home-focus-day { display: flex; flex-direction: column; gap: 6px; align-items: center; min-width: 0; }
    .home-focus-track { width: 100%; height: 92px; display: flex; align-items: flex-end; border-radius: 8px; background: rgba(255,255,255,0.04); padding: 5px; }
    .home-focus-fill { width: 100%; min-height: 4px; border-radius: 5px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 48%, transparent)); }
    .home-focus-label { font-family: 'Geist Mono', monospace; font-size: 9px; color: var(--text-muted); }
    .home-empty-compact { padding: 18px; color: var(--text-muted); font-size: 12px; text-align: center; border-radius: 8px; background: rgba(255,255,255,0.03); }
    .home-summary-list { display: flex; flex-direction: column; gap: 8px; }
    .home-summary-row { padding: 10px; border-radius: 8px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.055); cursor: pointer; }
    .home-summary-title { font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.35; overflow-wrap: anywhere; }
    .home-summary-meta { font-size: 11px; color: var(--text-secondary); line-height: 1.4; margin-top: 3px; }
    .home-module-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .home-module-card { min-height: 100%; }
    .home-module-card .module-header { margin-top: 0 !important; }
    .home-module-card .section-label { margin-bottom: 10px !important; }
    .home-module-card .card-colored { margin-bottom: 0 !important; }
    .home-bottom-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
    .home-bottom-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
    .home-priority-habit { height: 100%; }
    .ecl-panel { background: rgba(20,20,20,0.90); border-color: rgba(194,181,165,0.14); }
    .ecl-header { align-items: flex-start; margin-bottom: 14px; }
    .ecl-week-note { margin-top: 5px; color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
    .ecl-week-note span { color: var(--text-muted); }
    .ecl-history-link { min-height: 32px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--accent-beige); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
    .ecl-history-link:hover { background: rgba(194,181,165,0.08); }
    .ecl-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
    .ecl-intention-block { min-width: 0; }
    .ecl-question { color: var(--text-primary); font-size: 14px; font-weight: 500; line-height: 1.4; margin-bottom: 10px; }
    .ecl-choice-row { display: flex; flex-wrap: wrap; gap: 7px; }
    .ecl-choice { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; background: rgba(255,255,255,0.025); color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease; }
    .ecl-choice span { color: var(--ecl-color); font-size: 16px; line-height: 1; }
    .ecl-choice:hover { border-color: color-mix(in srgb, var(--ecl-color) 42%, var(--border)); color: var(--text-primary); }
    .ecl-choice.selected { border-color: color-mix(in srgb, var(--ecl-color) 55%, var(--border)); background: color-mix(in srgb, var(--ecl-color) 13%, transparent); color: var(--text-primary); }
    .ecl-intention-hint { margin-top: 8px; color: var(--text-muted); font-size: 10px; line-height: 1.45; }
    .ecl-reflection-heading { display: flex; justify-content: space-between; gap: 12px; color: var(--text-primary); font-size: 12px; margin-bottom: 8px; }
    .ecl-reflection-heading span:last-child { color: var(--text-muted); font-size: 10px; }
    .ecl-dimension-list { display: flex; flex-direction: column; gap: 6px; }
    .ecl-dimension { min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 5px; border-radius: 8px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); }
    .ecl-dimension.completed { background: color-mix(in srgb, var(--ecl-color) 8%, rgba(255,255,255,0.02)); border-color: color-mix(in srgb, var(--ecl-color) 25%, rgba(255,255,255,0.05)); }
    .ecl-toggle { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; padding: 5px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
    .ecl-mark { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ecl-color) 52%, var(--border)); border-radius: 999px; color: var(--ecl-color); font-size: 14px; }
    .ecl-dimension.completed .ecl-mark { background: var(--ecl-color); color: #151515; }
    .ecl-dimension-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .ecl-dimension-copy strong { color: var(--text-primary); font-size: 12px; font-weight: 500; }
    .ecl-dimension-copy small { overflow: hidden; color: var(--text-secondary); font-size: 10px; font-weight: 400; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
    .ecl-dimension-actions { display: flex; align-items: center; gap: 2px; }
    .ecl-dimension-actions button { min-height: 34px; padding: 5px 7px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); font: inherit; font-size: 10px; cursor: pointer; }
    .ecl-dimension-actions button:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
    .ecl-detail-copy { margin-bottom: 18px; max-width: 58ch; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
    .ecl-optional { color: var(--text-muted); font-weight: 400; }
    .ecl-field-hint { margin-top: 7px; color: var(--text-muted); font-size: 10px; line-height: 1.4; }
    .ecl-history { display: flex; flex-direction: column; gap: 16px; }
    .ecl-range-row { display: flex; flex-wrap: wrap; gap: 5px; }
    .ecl-range-row button { min-height: 34px; padding: 6px 10px; border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,0.035); color: var(--text-secondary); font: inherit; font-size: 11px; cursor: pointer; }
    .ecl-range-row button.active { border-color: rgba(194,181,165,0.30); background: rgba(194,181,165,0.10); color: var(--text-primary); }
    .ecl-history-context { margin: -6px 0 0; max-width: 68ch; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
    .ecl-history-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .ecl-history-stats > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; padding: 13px 14px; border-right: 1px solid var(--border); }
    .ecl-history-stats > div:last-child { border-right: 0; }
    .ecl-stat-symbol { grid-row: span 2; color: var(--ecl-color); font-size: 19px; }
    .ecl-history-stats strong { color: var(--text-primary); font-family: 'Geist Mono', monospace; font-size: 18px; font-weight: 500; }
    .ecl-history-stats span:last-child { color: var(--text-secondary); font-size: 10px; }
    .ecl-history-section { padding-top: 2px; }
    .ecl-history-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
    .ecl-history-heading strong { display: block; color: var(--text-primary); font-size: 13px; font-weight: 500; }
    .ecl-history-heading span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 10px; line-height: 1.45; }
    .ecl-chart-wrap { width: 100%; overflow: hidden; }
    .ecl-chart { display: block; width: 100%; height: auto; min-height: 210px; }
    .ecl-chart-grid { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
    .ecl-chart-label { fill: var(--text-muted); font-family: 'Geist Mono', monospace; font-size: 9px; }
    .ecl-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 2px; color: var(--text-secondary); font-size: 10px; }
    .ecl-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .ecl-chart-legend i, .ecl-compare-table i { width: 7px; height: 7px; display: inline-block; border-radius: 999px; }
    .ecl-history-empty { display: grid; min-height: 180px; place-items: center; padding: 20px; border-radius: 8px; background: rgba(255,255,255,0.025); color: var(--text-muted); font-size: 11px; text-align: center; }
    .ecl-compare-table { border-top: 1px solid var(--border); }
    .ecl-compare-table > div { display: grid; grid-template-columns: minmax(120px, 1fr) 110px 110px; gap: 12px; align-items: center; min-height: 38px; padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,0.055); color: var(--text-secondary); font-size: 11px; }
    .ecl-compare-table > div span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--text-primary); }
    .ecl-compare-table .ecl-compare-head { min-height: 30px; color: var(--text-muted); font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; }
    .ecl-compare-table .ecl-compare-head span:first-child { color: var(--text-muted); }
    button.ecl-choice:focus-visible, button.ecl-toggle:focus-visible, .ecl-dimension-actions button:focus-visible, .ecl-history-link:focus-visible, .ecl-range-row button:focus-visible { outline: 2px solid var(--accent-beige); outline-offset: 2px; }
    @media (min-width: 640px) {
      .modal-panel.ecl-history-modal { width: calc(100vw - 48px); max-width: 900px; max-height: 92vh; }
    }
    @media (min-width: 860px) {
      .content-wrapper.home-wide { max-width: 1120px; }
      .home-priority-grid { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
      .home-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.65fr); align-items: start; }
      .home-visual-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.75fr); }
      .home-lower-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
      .home-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .home-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .home-bottom-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr); }
      .home-hero-title { font-size: 34px; }
      .home-tasks-panel { grid-column: span 3; }
      .home-tasks-panel.full { grid-column: 1 / -1; }
      .home-tasks-panel { padding: 11px; }
      .home-tasks-headline { margin-bottom: 11px; }
      .home-task-list { gap: 7px; }
      .home-task-item { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 9px 11px; }
      .home-task-check { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }
      .home-task-title { font-size: 13px; }
      .home-task-meta { margin-top: 5px; gap: 5px; }
      .home-task-chip { min-height: 19px; padding: 3px 6px; font-size: 9px; }
      .home-tasks-count { font-size: 24px; }
    }
    @media (max-width: 520px) {
      .home-hero-top { flex-direction: column; }
      .home-hero-side { width: 100%; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
      .home-hero-meter { width: 76px; height: 76px; }
      .home-hero-timer { width: 100%; min-width: 0; max-width: none; }
      .home-hero-title { font-size: 25px; }
      .home-kpi-grid { grid-template-columns: 1fr; }
      .home-timer-card { min-height: 190px; }
      .home-timer-time { font-size: 32px; }
      .home-tasks-headline { align-items: flex-start; flex-direction: column; }
      .home-task-item { grid-template-columns: 26px minmax(0, 1fr); padding: 12px; }
      .home-task-title { font-size: 15px; }
      .ecl-layout { grid-template-columns: 1fr; gap: 18px; }
      .ecl-choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .ecl-choice { justify-content: center; padding-inline: 7px; }
      .ecl-reflection-heading span:last-child { display: none; }
      .ecl-dimension-copy small { max-width: 48vw; }
      .ecl-history-stats > div { padding: 11px 8px; }
      .ecl-stat-symbol { display: none; }
      .ecl-history-stats strong { font-size: 16px; }
      .ecl-compare-table > div { grid-template-columns: minmax(90px, 1fr) 72px 72px; gap: 6px; font-size: 10px; }
    }

    /* Goals */
    @media (min-width: 860px) { .content-wrapper.goals-wide { max-width: 1220px; } }
    .goals-page { padding-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .goals-hero {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(45,212,191,0.18);
      border-radius: 10px;
      padding: 18px;
      background:
        radial-gradient(circle at 8% 16%, rgba(45,212,191,0.20), transparent 30%),
        radial-gradient(circle at 84% 8%, rgba(255,92,138,0.15), transparent 28%),
        linear-gradient(135deg, rgba(194,181,165,0.14), rgba(23,23,23,0.91) 44%, rgba(124,148,115,0.10)),
        var(--bg-secondary);
      box-shadow: 0 18px 46px rgba(0,0,0,0.22);
    }
    .goals-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: linear-gradient(120deg, rgba(0,0,0,0.72), transparent 70%);
      pointer-events: none;
    }
    .goals-hero-row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .goals-kicker { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; color: #2dd4bf; margin-bottom: 8px; }
    .goals-title { font-size: 32px; line-height: 1.02; font-weight: 680; color: var(--text-primary); margin-bottom: 8px; letter-spacing: 0; }
    .goals-subtitle { max-width: 720px; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
    .goals-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .goals-hero-actions { align-self: start; justify-content: flex-start; }
    .goals-compass {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      min-width: 0;
      padding: 12px;
      border: 1px solid rgba(45,212,191,0.20);
      border-radius: 9px;
      background: rgba(18,18,18,0.62);
    }
    .goals-radar {
      width: 118px;
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background:
        conic-gradient(from -45deg, #2dd4bf 0 calc(var(--score, 0) * 1%), rgba(255,255,255,0.07) 0 100%),
        radial-gradient(circle, rgba(17,17,17,0.98) 0 52%, transparent 53%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    }
    .goals-radar-core {
      width: 82px;
      aspect-ratio: 1;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #121212;
      border: 1px solid rgba(45,212,191,0.22);
    }
    .goals-radar-value { color: var(--text-primary); font-family: 'Geist Mono', monospace; font-size: 23px; line-height: 1; }
    .goals-radar-label { margin-top: 5px; color: var(--text-muted); font-family: 'Geist Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; }
    .goals-compass-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; min-width: 0; }
    .goals-compass-item { min-width: 0; padding: 9px; border-radius: 7px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); }
    .goals-compass-label { font-family: 'Geist Mono', monospace; font-size: 8px; color: #d6cbb3; text-transform: uppercase; letter-spacing: 0.08em; }
    .goals-compass-value { margin-top: 4px; color: #f5edda; font-size: 15px; line-height: 1; font-weight: 700; overflow-wrap: anywhere; }
    .goals-toolbar { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 8px; align-items: center; padding: 10px; border: 1px solid rgba(45,212,191,0.18); border-radius: 10px; background: linear-gradient(135deg, rgba(45,212,191,0.08), rgba(255,255,255,0.035)), rgba(18,18,18,0.94); }
    .goals-toolbar .input, .goals-toolbar .select {
      width: 100%;
      min-height: 36px;
      background-color: #202020;
      border-color: rgba(255,255,255,0.14);
      color: #eee7d4;
      font-weight: 520;
    }
    .goals-toolbar .input:hover, .goals-toolbar .select:hover { background-color: #262626; border-color: rgba(45,212,191,0.34); color: #fff5dc; }
    .goals-toolbar .input:focus, .goals-toolbar .select:focus { background-color: #262626; border-color: #2dd4bf; color: #fff5dc; box-shadow: 0 0 0 3px rgba(45,212,191,0.12); }
    .goals-toolbar .select option { background: #181818; color: #f3ead4; }
    .goals-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    @media (min-width: 720px) { .goals-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .goals-stat { position: relative; overflow: hidden; min-height: 96px; padding: 14px 14px 14px 16px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(145deg, color-mix(in srgb, var(--stat-color, #2dd4bf) 18%, transparent), rgba(255,255,255,0.035)), #181818; }
    .goals-stat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--stat-color, #2dd4bf); opacity: 0.86; }
    .goals-stat:nth-child(2) { --stat-color: var(--accent-beige); }
    .goals-stat:nth-child(3) { --stat-color: #ff5c8a; }
    .goals-stat:nth-child(4) { --stat-color: var(--accent-sage); }
    .goals-stat-label { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #d6cbb3; margin-bottom: 12px; }
    .goals-stat-value { font-family: 'Geist Mono', monospace; font-size: 28px; color: #f5edda; line-height: 1; font-weight: 650; }
    .goals-stat-sub { margin-top: 7px; color: #b6ad98; font-size: 11px; line-height: 1.35; font-weight: 500; }
    .goals-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
    @media (min-width: 760px) { .goals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1120px) { .goals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .goal-card-v2 { position: relative; overflow: hidden; cursor: pointer; border: 1px solid rgba(255,255,255,0.08); border-top: 3px solid var(--goal-color, var(--accent-beige)); border-radius: 9px; padding: 13px; background: linear-gradient(145deg, color-mix(in srgb, var(--goal-color, var(--accent-beige)) 12%, transparent), rgba(23,23,23,0.88) 46%), var(--bg-secondary); transition: background 0.15s, border-color 0.15s, transform 0.15s; min-width: 0; }
    .goal-card-v2:hover { background: linear-gradient(145deg, color-mix(in srgb, var(--goal-color, var(--accent-beige)) 18%, transparent), rgba(255,255,255,0.045)), var(--bg-secondary); border-color: rgba(255,255,255,0.14); transform: translateY(-1px); }
    .goal-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
    .goal-card-title { font-size: 15px; font-weight: 650; color: var(--text-primary); line-height: 1.25; overflow-wrap: anywhere; }
    .goal-score-pill { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--text-primary); padding: 5px 7px; border-radius: 999px; background: color-mix(in srgb, var(--goal-color, var(--accent-beige)) 18%, transparent); border: 1px solid color-mix(in srgb, var(--goal-color, var(--accent-beige)) 34%, transparent); white-space: nowrap; }
    .goal-meta-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
    .goal-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 3px 7px; border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 9px; color: var(--text-secondary); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); text-transform: uppercase; }
    .goal-chip.warn { color: var(--accent-clay); background: rgba(196,168,130,0.12); border-color: rgba(196,168,130,0.24); text-transform: none; }
    .goal-chip.danger { color: var(--danger); background: rgba(196,112,101,0.11); border-color: rgba(196,112,101,0.25); text-transform: none; }
    .goal-progress { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; margin: 10px 0; border: 1px solid rgba(255,255,255,0.05); }
    .goal-progress-fill { height: 100%; border-radius: 999px; width: var(--progress, 0%); background: linear-gradient(90deg, var(--goal-color, var(--accent-beige)), #2dd4bf, #ff5c8a); transition: width 0.3s ease; }
    .goal-card-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 11px; color: var(--text-muted); }
    .goal-foot-label { font-family: 'Geist Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 2px; }
    .goal-foot-value { color: var(--text-secondary); overflow-wrap: anywhere; }
    .goal-section-card { border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)), rgba(23,23,23,0.86); padding: 14px; overflow: hidden; }
    .goal-section-card.goal-attention-card { border-color: rgba(255,92,138,0.20); background: linear-gradient(145deg, rgba(255,92,138,0.065), rgba(23,23,23,0.88) 46%), var(--bg-secondary); }
    .goal-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .goal-section-title { font-size: 14px; font-weight: 650; color: var(--text-primary); }
    .goal-detail-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    @media (min-width: 980px) { .goal-detail-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
    .goal-detail-main, .goal-detail-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
    .goal-form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    @media (min-width: 700px) { .goal-form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .goal-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .goal-form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .goal-auto-source-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .goal-auto-source { display: flex; align-items: flex-start; gap: 9px; flex: 1 1 240px; min-height: 58px; padding: 10px 11px; border-radius: 9px; background: var(--bg-tertiary); cursor: pointer; }
    .goal-auto-source:has(input:checked) { background: color-mix(in srgb, var(--accent-sage) 14%, var(--bg-tertiary)); outline: 1px solid color-mix(in srgb, var(--accent-sage) 42%, transparent); }
    .goal-auto-source input { margin-top: 3px; accent-color: var(--accent-sage); }
    .goal-auto-source span { display: flex; flex-direction: column; gap: 3px; }
    .goal-auto-source strong { color: var(--text-primary); font-size: 12px; font-weight: 550; }
    .goal-auto-source small { color: var(--text-secondary); font-size: 10px; line-height: 1.35; }
    .goal-chip.scheduled, .goal-score-pill.scheduled { color: var(--accent-clay); }
    .goal-chip.automatic { color: var(--accent-sage); text-transform: none; }
    .goal-scheduled-panel { background: color-mix(in srgb, var(--accent-clay) 7%, var(--bg-secondary)); }
    .goal-scheduled-date { margin-bottom: 8px; color: var(--text-primary); font-family: 'Geist Mono', monospace; font-size: 15px; }
    .goal-field-read { padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.06); color: var(--text-secondary); font-size: 12px; line-height: 1.5; min-height: 40px; overflow-wrap: anywhere; }
    .goal-inline-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .goal-inline-row:last-child { border-bottom: none; }
    .goal-check { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: transparent; background: transparent; }
    .goal-check.done { color: #111; background: var(--success); border-color: var(--success); }
    .goal-link-row, .goal-review-row { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .goal-link-row:last-child, .goal-review-row:last-child { border-bottom: none; }
    .goal-candidate-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; padding-right: 2px; }
    .goal-candidate { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; background: rgba(255,255,255,0.032); }
    .goal-warning-list { display: flex; flex-direction: column; gap: 7px; }
    .goal-warning { padding: 9px 10px; border-radius: 8px; background: rgba(196,168,130,0.09); border: 1px solid rgba(196,168,130,0.20); color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
    .goal-warning.danger { background: rgba(196,112,101,0.09); border-color: rgba(196,112,101,0.22); }
    .goal-score-breakdown { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .goal-score-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 10px; align-items: center; font-size: 12px; color: var(--text-secondary); }
    .goal-empty-line { color: var(--text-muted); font-size: 12px; line-height: 1.5; padding: 8px 0; }
    @media (min-width: 840px) {
      .goals-hero-row { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.72fr); align-items: center; }
      .goals-hero-actions { justify-content: flex-end; }
      .goals-title { font-size: 38px; }
    }
    @media (max-width: 760px) {
      .goals-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px) {
      .goals-hero { padding: 15px; }
      .goals-title { font-size: 25px; }
      .goals-actions, .goals-toolbar { width: 100%; }
      .goals-toolbar { grid-template-columns: 1fr; }
      .goals-toolbar .input, .goals-toolbar .select { width: 100%; }
      .goals-compass { grid-template-columns: 1fr; }
      .goals-radar { width: 108px; margin: 0 auto; }
      .goals-compass-list { grid-template-columns: 1fr; }
      .goal-card-foot { grid-template-columns: 1fr; }
      .goal-inline-row { grid-template-columns: 24px minmax(0, 1fr); }
      .goal-inline-row > div:last-child { grid-column: 1 / -1; }
    }