:root {
    /* ===== Token legacy (komponen lama) — kini ALIAS ke theme.css =====
       theme.css = SATU sumber kebenaran palet. Var di bawah hanya memetakan
       nama lama → token theme, jadi mengubah palet cukup di theme.css.
       Nilai identik dengan sebelumnya → tidak ada perubahan visual.
       --border, --danger, --brand-deep sengaja DIHAPUS dari sini karena
       theme.css sudah mendefinisikannya dgn nilai sama (hindari duplikasi). */
    --bg:       var(--bg-page);
    --surface:  var(--bg-surface);
    --surface2: var(--bg-hover);
    --border2:  rgba(40, 60, 100, 0.18);   /* legacy-only: tak ada padanan di theme */

    --accent:  var(--brand-blue);          /* primary brand blue */
    --accent2: var(--brand-teal);          /* teal */
    --accent3: var(--success);             /* emerald (success/done) */
    --warn:    var(--warning);

    --text:  var(--text-bright);
    --text2: var(--text-muted);
    --text3: var(--text-dim);

    /* Brand gradient kini BERSUMBER dari theme.css (versi 4-stop, berakhir navy).
       Override 3-stop legacy dihapus → tombol primer memakai gradasi theme. */
    --brand-gradient-soft: linear-gradient(135deg, rgba(13,148,136,0.10) 0%, rgba(20,184,166,0.08) 45%, rgba(46,93,224,0.10) 100%);

    --glow: rgba(46,93,224,0.12);          /* legacy-only */
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family: 'Sora', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }
  body::before {
    content:'';
    position:fixed;
    top:-220px; left:-220px;
    width:640px; height:640px;
    background: radial-gradient(circle, rgba(34,211,160,0.09) 0%, rgba(45,212,191,0.05) 35%, transparent 70%);
    pointer-events:none;
    z-index:0;
  }
  body::after {
    content:'';
    position:fixed;
    bottom:-260px; right:-220px;
    width:640px; height:640px;
    background: radial-gradient(circle, rgba(65,114,245,0.10) 0%, rgba(31,43,124,0.05) 40%, transparent 70%);
    pointer-events:none;
    z-index:0;
  }

  /* NAV (legacy — komponen lama; arsitektur baru pakai .topbar) */
  nav.nav-legacy {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
    border-bottom:1px solid var(--border);
    background: rgba(246,248,252,0.95);
    backdrop-filter:blur(12px);
    position:sticky; top:0; z-index:100;
  }
  .nav-brand { display:flex; align-items:center; gap:10px; }
  .nav-brand .vistant-mark {
    width:28px; height:28px; flex-shrink:0;
    filter: drop-shadow(0 0 8px rgba(45,212,191,0.35));
    animation: markFloat 4s ease-in-out infinite;
  }
  @keyframes markFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1px)} }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
  .nav-brand h1 {
    font-size:14px; font-weight:700; letter-spacing:0.08em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .nav-brand h1 .sub {
    color: var(--text2); font-weight:500; letter-spacing:0.05em;
    -webkit-text-fill-color: var(--text2);
  }
  .nav-tabs { display:flex; gap:4px; }
  .nav-tab {
    padding:7px 14px; border-radius:8px;
    border:none; cursor:pointer;
    font-family:'Sora',sans-serif; font-size:12px; font-weight:500;
    color:var(--text2); background:transparent;
    transition:all 0.2s;
  }
  .nav-tab:hover { color:var(--text); background:var(--surface2); }
  .nav-tab.active { color:var(--accent); background:rgba(65,114,245,0.1); }
  .nav-actions { display:flex; gap:8px; align-items:center; }
  .btn-sm {
    padding:7px 14px; border-radius:8px;
    border:1px solid var(--border2); cursor:pointer;
    font-family:'Sora',sans-serif; font-size:12px; font-weight:500;
    color:var(--text2); background:var(--surface);
    transition:all 0.2s;
  }
  .btn-sm:hover { color:var(--text); border-color:var(--accent); }
  /* Pakai gradasi brand (navy) — selaras theme.css, bukan biru solid lagi. */
  .btn-primary {
    background:var(--brand-gradient); color:#fff; border:none;
    box-shadow:0 1px 3px rgba(0,0,0,0.2);
  }
  .btn-primary:hover { filter:brightness(1.08); box-shadow:0 2px 6px rgba(0,0,0,0.25); }

  /* LAYOUT */
  .app { display:none; padding:24px; max-width:1200px; margin:0 auto; }
  .app.active { display:block; }

  /* CARDS */
  .card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    margin-bottom:16px;
  }
  .card-title {
    font-size:11px; font-weight:600; letter-spacing:0.1em;
    color:var(--text3); text-transform:uppercase;
    margin-bottom:16px;
  }

  /* TODAY PAGE */
  .today-header {
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:24px;
  }
  .today-date {
    font-family:'Crimson Pro',serif;
    font-size:42px; font-weight:300; line-height:1;
    color:var(--text);
  }
  .today-date span { color:var(--accent); }
  .today-sub { font-size:12px; color:var(--text3); margin-top:6px; }

  /* AI BRIEFING */
  .briefing-box {
    background: linear-gradient(135deg, rgba(65,114,245,0.08), rgba(45,212,191,0.05));
    border:1px solid rgba(65,114,245,0.2);
    border-radius:16px;
    padding:20px;
    margin-bottom:20px;
    position:relative;
    overflow:hidden;
  }
  .briefing-box::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(65,114,245,0.5), transparent);
  }
  .briefing-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .ai-avatar {
    width:32px; height:32px; border-radius:10px;
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    display:flex; align-items:center; justify-content:center;
    font-size:14px; flex-shrink:0;
  }
  .briefing-title { font-size:12px; font-weight:600; color:var(--accent); }
  .briefing-time { font-size:11px; color:var(--text3); }
  #briefing-text {
    font-family:'Crimson Pro',serif;
    font-size:17px; line-height:1.7;
    color:var(--text2);
    font-style:italic;
  }
  .briefing-loading { display:flex; align-items:center; gap:8px; color:var(--text3); font-size:13px; }
  .dot-flash { display:flex; gap:4px; }
  .dot-flash span {
    width:4px; height:4px; background:var(--accent); border-radius:50%;
    animation:flash 1.2s infinite;
  }
  .dot-flash span:nth-child(2){animation-delay:0.2s}
  .dot-flash span:nth-child(3){animation-delay:0.4s}
  @keyframes flash{0%,80%,100%{opacity:0.2}40%{opacity:1}}
  .btn-refresh {
    margin-top:14px; padding:8px 16px; border-radius:8px;
    border:1px solid rgba(65,114,245,0.3); background:transparent;
    color:var(--accent); font-family:'Sora',sans-serif; font-size:12px;
    cursor:pointer; transition:all 0.2s;
  }
  .btn-refresh:hover { background:rgba(65,114,245,0.1); }

  /* TASK LIST */
  .task-item {
    display:flex; align-items:flex-start; gap:12px;
    padding:12px 14px; border-radius:12px;
    border:1px solid var(--border);
    margin-bottom:8px;
    background:var(--surface2);
    transition:all 0.2s;
    cursor:pointer;
  }
  .task-item:hover { border-color:var(--border2); }
  .task-item.done { opacity:0.45; }
  .task-item.done .task-name { text-decoration:line-through; }
  .task-check {
    width:20px; height:20px; border-radius:6px;
    border:2px solid var(--border2);
    background:transparent; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; margin-top:1px;
    transition:all 0.2s;
  }
  .task-item.done .task-check { background:var(--accent3); border-color:var(--accent3); }
  .task-check svg { display:none; }
  .task-item.done .task-check svg { display:block; }
  .task-name { font-size:14px; font-weight:500; color:var(--text); }
  .task-meta { font-size:11px; color:var(--text3); margin-top:3px; }
  .task-badge {
    margin-left:auto; padding:3px 8px; border-radius:6px;
    font-size:10px; font-weight:600; letter-spacing:0.05em;
    white-space:nowrap; flex-shrink:0;
  }
  .badge-daily { background:rgba(34,211,160,0.12); color:var(--accent3); }
  .badge-weekly { background:rgba(65,114,245,0.12); color:var(--accent); }
  .badge-monthly { background:rgba(45,212,191,0.12); color:var(--accent2); }
  .badge-target { background:rgba(245,158,11,0.12); color:var(--warn); }
  .badge-skipped { background:rgba(248,113,113,0.12); color:var(--danger); }

  .task-actions { display:flex; gap:6px; margin-top:8px; }
  .task-action-btn {
    padding:4px 10px; border-radius:6px;
    border:1px solid var(--border2); background:transparent;
    color:var(--text3); font-family:'Sora',sans-serif; font-size:11px;
    cursor:pointer; transition:all 0.2s;
  }
  .task-action-btn:hover { color:var(--text); border-color:var(--text3); }
  .task-action-btn.skip { color:var(--danger); }
  .task-action-btn.skip:hover { border-color:var(--danger); background:rgba(248,113,113,0.08); }

  /* SECTION HEADERS */
  .section-label {
    display:flex; align-items:center; gap:8px;
    font-size:11px; font-weight:600; color:var(--text3);
    letter-spacing:0.08em; text-transform:uppercase;
    margin:20px 0 10px;
  }
  .section-label::after {
    content:''; flex:1; height:1px; background:var(--border);
  }

  /* PROGRESS */
  .progress-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .progress-label { font-size:13px; color:var(--text2); min-width:140px; }
  .progress-bar { flex:1; height:6px; background:var(--border2); border-radius:3px; overflow:hidden; }
  .progress-fill { height:100%; border-radius:3px; transition:width 0.6s ease; }
  .fill-green { background:var(--accent3); }
  .fill-blue { background:var(--accent); }
  .fill-purple { background:var(--accent2); }
  .progress-pct { font-size:12px; color:var(--text3); min-width:36px; text-align:right; }

  /* GRID */
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media(max-width:680px){ .grid-2{ grid-template-columns:1fr; } }

  /* TARGETS PAGE */
  /* RUTINITAS CARDS */
  .target-card {
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:14px;
    padding:0; margin-bottom:14px;
    overflow:hidden;
    transition: border-color 0.2s;
  }
  .target-card:hover { border-color: var(--border2); }
  .target-card-inner { display:flex; gap:0; }
  .target-color-bar { width:5px; flex-shrink:0; border-radius:0; }
  .target-body { flex:1; padding:16px; min-width:0; }
  .target-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
  .target-header-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .target-title { font-size:14px; font-weight:600; color:var(--text); }
  .target-period { font-size:10px; color:var(--text3); padding:2px 8px; border-radius:6px; background:var(--border); }
  .target-desc { font-size:12px; color:var(--text2); margin-bottom:10px; }
  /* Mini 30-day chain (GitHub contribution style) */
  .routine-chart { display:flex; gap:3px; margin:10px 0 8px; align-items:flex-end; flex-wrap:wrap; }
  .routine-dot {
    width:14px; height:14px; border-radius:3px;
    background:var(--surface2); flex-shrink:0;
    position:relative; cursor:pointer;
    transition: transform 0.15s, opacity 0.2s;
    border:1px solid var(--border);
  }
  .routine-dot:hover { transform:scale(1.4); z-index:5; }
  .routine-dot.done { opacity:1; border-color:transparent; }
  .routine-dot.today-dot {
    outline:2px solid #fff; outline-offset:1px;
    box-shadow: 0 0 8px rgba(255,255,255,0.3);
  }
  .routine-dot.future { opacity:0.15; cursor:default; }
  .routine-dot.future:hover { transform:none; }

  /* Heatmap modal (1 tahun) */
  .heatmap-grid {
    display:grid;
    grid-template-rows: repeat(7, 12px);
    grid-auto-flow: column;
    grid-auto-columns: 12px;
    gap:2px;
    overflow-x:auto;
    padding:8px 4px;
  }
  .heatmap-cell {
    width:12px; height:12px; border-radius:2px;
    background:var(--surface2); border:1px solid var(--border);
    cursor:default; transition:transform 0.1s;
  }
  .heatmap-cell:hover { transform:scale(1.5); z-index:5; }
  .heatmap-cell.today { outline:2px solid #fff; outline-offset:1px; }
  .heatmap-cell.future { opacity:0.1; }
  .heatmap-month-label { font-size:10px; color:var(--text3); margin-top:6px; }
  /* Stats row */
  .routine-stats { display:flex; gap:16px; margin-bottom:10px; flex-wrap:wrap; }
  .routine-stat { display:flex; flex-direction:column; gap:2px; }
  .routine-stat-val { font-size:15px; font-weight:700; color:var(--text); }
  .routine-stat-lbl { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:0.06em; }
  /* Check-in button */
  .checkin-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 14px; border-radius:8px; border:none; cursor:pointer;
    font-family:'Sora',sans-serif; font-size:12px; font-weight:600;
    transition: all 0.2s; white-space:nowrap;
  }
  .checkin-btn.pending { background:rgba(65,114,245,0.15); color:var(--accent); border:1px solid rgba(65,114,245,0.3); }
  .checkin-btn.pending:hover { background:rgba(65,114,245,0.25); }
  .checkin-btn.done-today { background:rgba(34,211,160,0.12); color:var(--accent3); border:1px solid rgba(34,211,160,0.25); }
  .checkin-btn.done-today:hover { background:rgba(34,211,160,0.2); }
  .checkin-btn.skipped-today { background:rgba(245,158,11,0.1); color:var(--warn); border:1px solid rgba(245,158,11,0.2); }
  /* Check-in toggle in modal */
  .checkin-toggle-row { display:flex; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
  .checkin-toggle-btn {
    flex:1; min-width:80px; padding:10px 8px; border-radius:10px; border:1px solid var(--border2);
    cursor:pointer; font-family:'Sora',sans-serif; font-size:12px; font-weight:500;
    color:var(--text2); background:var(--surface2); transition:all 0.2s; text-align:center;
  }
  .checkin-toggle-btn.selected-done  { background:rgba(34,211,160,0.15); color:var(--accent3); border-color:var(--accent3); }
  .checkin-toggle-btn.selected-sched { background:rgba(65,114,245,0.12); color:var(--accent); border-color:var(--accent); }
  .checkin-toggle-btn.selected-skip  { background:rgba(245,158,11,0.1); color:var(--warn); border-color:var(--warn); }
  /* Day-of-week picker buttons */
  .day-btn {
    padding:5px 9px; border-radius:7px; border:1px solid var(--border2);
    cursor:pointer; font-size:11px; font-weight:600;
    color:var(--text3); background:var(--surface2);
    font-family:'Sora',sans-serif; transition:all 0.15s;
  }
  .day-btn.active { background:rgba(65,114,245,0.15); color:var(--accent); border-color:var(--accent); }

  /* FORMS */
  .form-group { margin-bottom:14px; }
  label { display:block; font-size:12px; font-weight:500; color:var(--text2); margin-bottom:6px; }
  input:not([type=checkbox]):not([type=radio]), select, textarea {
    width:100%; padding:10px 12px;
    background:var(--surface2); border:1px solid var(--border2);
    border-radius:10px; color:var(--text);
    font-family:'Sora',sans-serif; font-size:13px;
    outline:none; transition:border 0.2s;
  }
  input:focus, select:focus, textarea:focus { border-color:var(--accent); }
  textarea { resize:vertical; min-height:80px; }
  select option { background:var(--surface2); }

  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  .modal-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.7); backdrop-filter:blur(4px);
    z-index:200; align-items:center; justify-content:center;
  }
  .modal-overlay.open { display:flex; }
  .modal {
    background:var(--surface);
    border:1px solid var(--border2);
    border-radius:20px;
    padding:24px;
    width:100%; max-width:480px;
    max-height:90vh; overflow-y:auto;
    margin:16px;
  }
  .modal-title { font-size:16px; font-weight:600; color:var(--text); margin-bottom:20px; }
  .modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }

  .btn { padding:9px 18px; border-radius:10px; border:none; cursor:pointer; font-family:'Sora',sans-serif; font-size:13px; font-weight:500; transition:all 0.2s; }
  .btn-ghost { background:transparent; color:var(--text2); border:1px solid var(--border2); }
  .btn-ghost:hover { color:var(--text); }
  .btn-accent { background:var(--accent); color:#fff; box-shadow:0 0 20px rgba(65,114,245,0.25); }
  .btn-accent:hover { background:#7a9bff; }
  .btn-danger { background:rgba(248,113,113,0.15); color:var(--danger); border:1px solid rgba(248,113,113,0.3); }
  .btn-danger:hover { background:rgba(248,113,113,0.25); }

  /* STATS ROW */
  .stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
  .stat-box {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:12px; padding:14px; text-align:center;
  }
  .stat-num { font-size:28px; font-weight:700; color:var(--text); line-height:1; }
  .stat-label { font-size:11px; color:var(--text3); margin-top:4px; }

  /* EMPTY STATE */
  .empty { text-align:center; padding:40px 20px; color:var(--text3); font-size:13px; }
  .empty .e-icon { font-size:32px; margin-bottom:12px; }

  /* HISTORY */
  .history-item {
    display:flex; gap:12px; padding:12px 0;
    border-bottom:1px solid var(--border);
  }
  .history-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
    margin-top:5px;
  }
  .history-dot.done { background:var(--accent3); }
  .history-dot.skip { background:var(--danger); }
  .history-dot.reschedule { background:var(--warn); }
  .history-content { flex:1; }
  .history-title { font-size:13px; color:var(--text); }
  .history-meta { font-size:11px; color:var(--text3); margin-top:3px; }

  /* STATUS BAR */
  .status-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 24px;
    border-top:1px solid var(--border);
    background:var(--surface);
    font-size:11px; color:var(--text3);
    position:fixed; bottom:0; left:0; right:0;
  }
  .status-live { display:flex; align-items:center; gap:6px; }
  .live-dot { width:6px; height:6px; background:var(--accent3); border-radius:50%; animation:pulse 2s infinite; }
  main { padding-bottom:50px; }

  /* FLOATING ADD */
  .fab {
    position:fixed; bottom:60px; right:24px;
    width:48px; height:48px; border-radius:14px;
    background:var(--accent); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 24px rgba(65,114,245,0.4);
    color:#fff; font-size:22px;
    transition:all 0.2s; z-index:50;
  }
  .fab:hover { transform:scale(1.08); box-shadow:0 6px 32px rgba(65,114,245,0.6); }

  /* MOOD CHECK */
  .mood-bar {
    display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;
  }
  .mood-btn {
    padding:8px 14px; border-radius:10px;
    border:1px solid var(--border2); background:var(--surface2);
    color:var(--text2); font-family:'Sora',sans-serif; font-size:12px;
    cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:6px;
  }
  .mood-btn:hover { border-color:var(--accent); }
  .mood-btn.active { border-color:var(--accent); background:rgba(65,114,245,0.12); color:var(--accent); }

  /* SKIP REASON */
  .skip-reasons { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
  .skip-reason-btn {
    padding:6px 12px; border-radius:8px;
    border:1px solid var(--border2); background:transparent;
    color:var(--text3); font-family:'Sora',sans-serif; font-size:12px; cursor:pointer;
  }
  .skip-reason-btn.active { border-color:var(--danger); color:var(--danger); background:rgba(248,113,113,0.08); }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width:4px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

  /* AI Breakdown Loading */
  .ai-loading-overlay {
    display:flex; align-items:center; gap:10px;
    padding:14px 16px; margin:8px 0;
    background:linear-gradient(135deg, rgba(65,114,245,0.08), rgba(45,212,191,0.05));
    border:1px solid rgba(65,114,245,0.2);
    border-radius:10px;
    font-size:12px; color:var(--accent);
    animation:aiPulse 2s infinite;
  }
  @keyframes aiPulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
  .ai-spinner {
    width:24px; height:24px; border:2px solid rgba(65,114,245,0.3);
    border-top-color:var(--accent); border-radius:50%;
    animation:spin 0.8s linear infinite; flex-shrink:0;
  }
  .ai-loading-overlay .ai-spinner { width:16px; height:16px; }
  @keyframes spin { to{transform:rotate(360deg)} }

  /* Finance */
  .fin-account-card { min-width:140px;flex:1;max-width:200px;padding:14px;border-radius:10px;border:1px solid var(--border);background:var(--card);position:relative;overflow:hidden; }
  .fin-account-card .fin-acct-bar { position:absolute;top:0;left:0;right:0;height:3px; }
  .fin-account-card .fin-acct-name { font-size:13px;font-weight:600;margin-bottom:2px; }
  .fin-account-card .fin-acct-type { font-size:10px;color:var(--text3); }
  .fin-account-card .fin-acct-bal { font-size:16px;font-weight:700;margin-top:8px; }
  .fin-account-card .fin-acct-actions { position:absolute;top:8px;right:8px;display:flex;gap:3px;opacity:0;transition:opacity 0.2s; }
  .fin-account-card:hover .fin-acct-actions { opacity:1; }
  .fin-txn-row { display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);transition:background 0.15s; }
  .fin-txn-row:hover { background:rgba(65,114,245,0.04); }
  .fin-txn-icon { width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0; }
  .fin-txn-amount { font-size:14px;font-weight:700;white-space:nowrap; }
  .fin-type-btn { border:1px solid var(--border);background:none;color:var(--text3);font-size:12px;padding:8px;border-radius:8px;cursor:pointer;transition:all 0.2s; }
  .fin-type-btn.active[id="fin-btn-expense"] { background:rgba(248,113,113,0.12);color:#f87171;border-color:rgba(248,113,113,0.3); }
  .fin-type-btn.active[id="fin-btn-income"] { background:rgba(34,211,160,0.12);color:#22D3A0;border-color:rgba(34,211,160,0.3); }
  .cat-chip { display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;font-size:11px;background:var(--card2);border:1px solid var(--border);color:var(--text2); }
  .cat-chip .cat-del { cursor:pointer;opacity:0.5;font-size:10px; }
  .cat-chip .cat-del:hover { opacity:1;color:var(--danger); }

  .chip {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 8px; border-radius:6px;
    font-size:10px; font-weight:600; letter-spacing:0.04em;
  }

  /* ===== GANTT / PROYEK ===== */
  .project-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:14px; margin-bottom:12px; overflow:hidden;
    transition:border-color 0.2s;
  }
  .project-card:hover { border-color:var(--border2); }
  .project-header {
    display:flex; align-items:center; gap:12px;
    padding:16px; cursor:pointer; user-select:none;
  }
  .project-color-bar { width:4px; border-radius:4px; align-self:stretch; flex-shrink:0; }
  .project-info { flex:1; min-width:0; }
  .project-name { font-weight:600; font-size:14px; }
  .project-meta { font-size:11px; color:var(--text3); margin-top:3px; }
  .project-progress-wrap { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .project-pct { font-size:12px; font-weight:600; color:var(--text2); min-width:36px; text-align:right; }
  .project-bar-bg { width:90px; height:6px; background:var(--border2); border-radius:3px; }
  .project-bar-fill { height:100%; border-radius:3px; transition:width 0.4s; }
  .project-actions { display:flex; gap:6px; flex-shrink:0; }
  .project-body { padding:0 16px 16px; }

  .phase-row {
    border:1px solid var(--border); border-radius:10px;
    margin-bottom:8px; overflow:hidden;
  }
  .phase-header {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; cursor:pointer; background:var(--surface2);
  }
  .phase-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .phase-name { flex:1; font-size:13px; font-weight:500; }
  .phase-dates { font-size:11px; color:var(--text3); }
  .phase-pct { font-size:11px; color:var(--text2); font-weight:600; margin-left:8px; }
  .phase-body { padding:10px 14px; }

  .task-row {
    display:flex; align-items:center; gap:10px;
    padding:9px 10px; border-radius:8px;
    margin-bottom:4px; background:var(--surface);
    border:1px solid transparent;
    transition:border-color 0.15s;
  }
  .task-row:hover { border-color:var(--border); }
  .task-status-btn { cursor:pointer; font-size:14px; flex-shrink:0; }

  /* Checkbox tugas proyek — tap target besar, terlihat jelas, animasi ringan. */
  .ptask-check {
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; flex-shrink:0;
    cursor:pointer; user-select:none;
    border-radius:8px;
    transition:background 0.15s;
  }
  .ptask-check:hover { background:var(--surface2); }
  .ptask-check input { position:absolute; opacity:0; pointer-events:none; }
  .ptask-check-box {
    display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:6px;
    border:2px solid var(--border2);
    background:var(--surface);
    transition:all 0.15s;
  }
  .ptask-check input:checked + .ptask-check-box {
    background:#22c55e; border-color:#22c55e;
  }
  .ptask-check input:checked + .ptask-check-box::after {
    content:'✓'; color:#fff; font-size:14px; font-weight:700; line-height:1;
  }
  .ptask-check:hover .ptask-check-box { border-color:var(--accent); }
  .ptask-check input:focus-visible + .ptask-check-box {
    outline:2px solid var(--accent); outline-offset:2px;
  }

  .task-name { flex:1; font-size:12px; }
  .task-name.done-text { text-decoration:line-through; color:var(--text3); }
  .task-assignee { font-size:10px; color:var(--text3); background:var(--surface2); padding:2px 7px; border-radius:10px; flex-shrink:0; }
  .task-deadline { font-size:10px; color:var(--text3); flex-shrink:0; }
  .task-actions { display:flex; gap:4px; flex-shrink:0; }

  .color-dot {
    width:20px; height:20px; border-radius:50%; cursor:pointer;
    border:2px solid transparent; transition:border-color 0.15s, transform 0.15s;
  }
  .color-dot:hover { transform:scale(1.15); }
  .color-dot.selected { border-color:white; transform:scale(1.1); }

  /* Status badge */
  .badge-active  { background:rgba(34,211,160,0.15); color:#22D3A0; }
  .badge-paused  { background:rgba(245,158,11,0.15); color:#f59e0b; }
  .badge-done    { background:rgba(148,163,184,0.1); color:#94a3b8; }
  .badge-pending { background:rgba(65,114,245,0.1); color:#4172F5; }

  /* Summary strip */
  .proj-summary-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:10px; padding:12px 16px; flex:1; min-width:120px;
  }
  .proj-summary-val { font-size:22px; font-weight:700; color:var(--accent); }
  .proj-summary-lbl { font-size:11px; color:var(--text3); margin-top:2px; }

  /* Gantt chart */
  .gantt-wrap { overflow-x:auto; border-radius:12px; border:1px solid var(--border); }
  .gantt-header { display:flex; border-bottom:1px solid var(--border); background:var(--surface2); }
  .gantt-label-col { width:220px; flex-shrink:0; padding:8px 12px; font-size:11px; font-weight:600; color:var(--text3); border-right:1px solid var(--border); }
  .gantt-month-header { display:flex; flex:1; }
  .gantt-month-cell { flex:1; text-align:center; padding:8px 4px; font-size:10px; font-weight:600; color:var(--text3); border-right:1px solid var(--border); min-width:60px; }
  .gantt-row { display:flex; border-bottom:1px solid var(--border); min-height:32px; align-items:center; }
  .gantt-row:last-child { border-bottom:none; }
  .gantt-row:hover { background:rgba(255,255,255,0.02); }
  .gantt-row-label { width:220px; flex-shrink:0; padding:6px 12px; font-size:12px; border-right:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px; }
  .gantt-row-label.phase { font-weight:600; font-size:11px; color:var(--text2); padding-left:20px; }
  .gantt-row-label.task  { font-size:11px; color:var(--text3); padding-left:36px; }
  .gantt-row-bars { flex:1; position:relative; padding:4px 0; }
  .gantt-bar { position:absolute; height:20px; border-radius:4px; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600; color:rgba(255,255,255,0.9); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 4px; min-width:4px; }
  .gantt-today-line { position:absolute; top:0; bottom:0; width:2px; background:rgba(248,113,113,0.6); z-index:2; }

  /* ===================== CALENDAR ===================== */
  .cal-wrap { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
  .cal-toolbar {
    display:flex; align-items:center; gap:10px; padding:6px 12px;
    border-bottom:1px solid var(--border); background:var(--surface2); flex-wrap:wrap;
  }
  .cal-tbtn {
    padding:6px 12px; border-radius:8px; border:1px solid var(--border2);
    background:transparent; color:var(--text2); cursor:pointer;
    font-family:'Sora',sans-serif; font-size:12px; font-weight:500; transition:all 0.15s;
  }
  .cal-tbtn:hover { background:var(--surface); color:var(--text); }
  .cal-tbtn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
  .cal-period-label { font-size:14px; font-weight:600; color:var(--text); flex:1; min-width:120px; }
  .cal-view-switcher { display:flex; gap:2px; background:var(--surface); border:1px solid var(--border2); border-radius:8px; padding:2px; }
  .cal-view-switcher .cal-tbtn { border:none; padding:5px 12px; }
  .cal-legend { display:flex; gap:10px; font-size:11px; color:var(--text3); flex-wrap:wrap; }
  .cal-legend-item { display:flex; align-items:center; gap:5px; }
  .cal-legend-dot { width:10px; height:10px; border-radius:3px; }

  /* Week view */
  .cal-week {
    display:grid;
    grid-template-columns: 56px repeat(7, 1fr);
    border-collapse:collapse;
    background:var(--surface);
  }
  .cal-week-header { display:contents; }
  .cal-day-head {
    text-align:center; padding:3px 4px 4px; border-bottom:1px solid var(--border); border-left:1px solid var(--border);
    font-size:10px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:0.05em;
  }
  .cal-day-head.is-today .cal-daynum {
    background:var(--accent); color:#fff;
    width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  }
  .cal-daynum { display:inline-block; font-size:13px; font-weight:600; color:var(--text); margin-top:1px; }
  .cal-corner { border-bottom:1px solid var(--border); }

  .cal-allday-row {
    grid-column: 1 / -1;
    display:grid;
    grid-template-columns: 56px repeat(7, 1fr);
    border-bottom:2px solid var(--border);
    background:var(--surface2);
    min-height:24px; position:relative;
  }
  .cal-allday-label {
    font-size:9px; color:var(--text3); padding:3px 6px; text-align:right; align-self:start;
    text-transform:uppercase; letter-spacing:0.05em;
  }
  .cal-allday-cell { border-left:1px solid var(--border); position:relative; min-height:24px; padding:1px 2px; }

  .cal-grid-body {
    grid-column: 1 / -1;
    display:grid;
    grid-template-columns: 56px repeat(7, 1fr);
    position:relative;
  }
  .cal-time-col { display:flex; flex-direction:column; }
  .cal-hour-row {
    height:40px; border-bottom:1px solid var(--border);
    font-size:10px; color:var(--text3); padding:2px 6px; text-align:right;
  }
  .cal-day-col {
    position:relative;
    border-left:1px solid var(--border);
    cursor:pointer;
  }
  .cal-day-col .cal-hour-bg {
    height:40px; border-bottom:1px solid var(--border);
  }
  /* Arahkan pointer ke sel jam → sorot biru (isyarat "klik = tambah acara di jam ini") */
  .cal-day-col .cal-hour-bg:hover {
    background:rgba(59,130,246,0.16);
    box-shadow:inset 0 0 0 1px rgba(59,130,246,0.35);
  }
  /* Penanda kolom HARI INI di tampilan Minggu/Hari */
  .cal-day-col[data-istoday="true"] {
    background:rgba(59,130,246,0.06);
  }
  .cal-now-line {
    position:absolute; left:0; right:0; height:2px;
    background:#f87171; z-index:5; box-shadow:0 0 6px rgba(248,113,113,0.6);
  }
  .cal-now-line::before {
    content:''; position:absolute; left:-5px; top:-4px;
    width:10px; height:10px; border-radius:50%; background:#f87171;
  }

  /* Event chip */
  .cal-event {
    position:absolute; left:2px; right:2px;
    border-radius:5px; padding:3px 5px; font-size:10px; font-weight:500;
    overflow:hidden; cursor:pointer;
    border-left:3px solid; line-height:1.25;
    box-shadow:0 1px 2px rgba(0,0,0,0.3);
    transition:transform 0.1s;
  }
  .cal-event:hover { transform:scale(1.02); z-index:10; }
  .cal-event-time { font-size:9px; opacity:0.85; font-weight:400; }
  .cal-event.is-allday { border-radius:4px; height:20px; padding:1px 6px; line-height:1.4; font-size:10px; }
  .cal-event.is-done { opacity:0.25; text-decoration:line-through; }

  /* Color system: type × priority */
  /* EVENT (Acara) — BIRU */
  .cal-c-event-high   { background:#1e40af; border-left-color:#172554; color:#fff; }
  .cal-c-event-medium { background:#3b82f6; border-left-color:#1e40af; color:#fff; }
  .cal-c-event-low    { background:#bfdbfe; border-left-color:#60a5fa; color:#1e3a8a; }
  /* PROJECT (Proyek) — HIJAU */
  .cal-c-project-high   { background:#15803d; border-left-color:#14532d; color:#fff; }
  .cal-c-project-medium { background:#22c55e; border-left-color:#15803d; color:#fff; }
  .cal-c-project-low    { background:#bbf7d0; border-left-color:#4ade80; color:#14532d; }
  /* REMINDER (Pengingat) — KUNING */
  .cal-c-reminder-high   { background:#a16207; border-left-color:#713f12; color:#fff; }
  .cal-c-reminder-medium { background:#eab308; border-left-color:#a16207; color:#1f2937; }
  .cal-c-reminder-low    { background:#fef9c3; border-left-color:#fde047; color:#713f12; }
  /* ROUTINE (Rutinitas) — UNGU */
  .cal-c-routine-high   { background:#6b21a8; border-left-color:#3b0764; color:#fff; }
  .cal-c-routine-medium { background:#a855f7; border-left-color:#7e22ce; color:#fff; }
  .cal-c-routine-low    { background:#e9d5ff; border-left-color:#c084fc; color:#3b0764; }
  /* TASK (Tugas Mandiri) — TEAL */
  .cal-c-task-high   { background:#0f766e; border-left-color:#134e4a; color:#fff; }
  .cal-c-task-medium { background:#14b8a6; border-left-color:#0f766e; color:#fff; }
  .cal-c-task-low    { background:#ccfbf1; border-left-color:#5eead4; color:#134e4a; }

  /* Month view */
  .cal-month {
    display:grid; grid-template-columns:repeat(7, 1fr);
    border-top:1px solid var(--border);
  }
  .cal-month-cell {
    min-height:90px; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:4px 5px; position:relative; cursor:pointer; transition:background 0.15s;
  }
  .cal-month-cell:hover { background:rgba(255,255,255,0.02); }
  .cal-month-cell.is-today .cal-month-num { background:var(--accent); color:#fff; }
  .cal-month-cell.is-other-month { opacity:0.4; }
  .cal-month-num { font-size:12px; font-weight:600; padding:2px 6px; border-radius:50%; display:inline-block; min-width:22px; text-align:center; color:var(--text); }
  .cal-month-events { margin-top:3px; display:flex; flex-direction:column; gap:2px; }
  .cal-month-event {
    font-size:9px; padding:1px 5px; border-radius:3px; border-left:2px solid;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .cal-month-more { font-size:9px; color:var(--text3); padding:1px 5px; }

  /* Day view */
  .cal-day {
    display:grid; grid-template-columns:56px 1fr;
    background:var(--surface);
  }
  .cal-day .cal-day-col { min-height:48px; }

  /* Done section collapse */
  .done-section-toggle {
    display:flex; align-items:center; gap:8px; cursor:pointer;
    font-size:13px; font-weight:600; color:var(--text2);
    padding:6px 0; user-select:none;
  }
  .done-section-toggle:hover { color:var(--text); }
  .done-section-toggle .arrow { transition:transform 0.2s; }
  .done-section-toggle.open .arrow { transform:rotate(90deg); }

  /* Priority badge in modals */
  .priority-row { display:flex; gap:6px; }
  .prio-btn {
    flex:1; padding:8px 4px; border-radius:8px; border:1px solid var(--border2);
    cursor:pointer; font-size:11px; font-weight:600;
    color:var(--text3); background:var(--surface2);
    font-family:'Sora',sans-serif; transition:all 0.15s;
  }
  .prio-btn.active.high   { background:rgba(248,113,113,0.15); color:var(--danger);  border-color:var(--danger); }
  .prio-btn.active.medium { background:rgba(65,114,245,0.15); color:var(--accent);  border-color:var(--accent); }
  .prio-btn.active.low    { background:rgba(148,163,184,0.1);  color:var(--text2);   border-color:var(--text3); }

  /* ===== CAL EVENT DETAIL POPUP ===== */
  #cal-detail-popup {
    position:fixed; z-index:9999; background:var(--surface);
    border:1px solid var(--border2); border-radius:12px;
    padding:12px 14px; max-width:240px; min-width:180px;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    font-size:12px; display:none;
  }
  #cal-detail-popup .cdp-title { font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px; }
  #cal-detail-popup .cdp-row { color:var(--text3);margin-bottom:3px; }
  #cal-detail-popup .cdp-close {
    position:absolute;top:8px;right:10px;cursor:pointer;
    color:var(--text3);font-size:16px;line-height:1;
  }

  /* ===== LIFE JOURNAL ===== */
  .lj-tabs { display:flex; gap:4px; margin-bottom:20px; flex-wrap:wrap; }
  .lj-tab {
    padding:8px 16px; border-radius:10px;
    border:1px solid var(--border2); cursor:pointer;
    font-family:'Sora',sans-serif; font-size:12px; font-weight:600;
    color:var(--text3); background:var(--surface2);
    transition:all 0.2s;
  }
  .lj-tab:hover { color:var(--text); border-color:var(--text3); }
  .lj-tab.active { color:var(--accent); border-color:var(--accent); background:rgba(65,114,245,0.1); }
  .lj-pane { display:none; }
  .lj-pane.active { display:block; }

  /* Pillar pills */
  .pillar-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
  .pillar-emosional { background:rgba(45,212,191,0.15); color:#2DD4BF; }
  .pillar-finansial  { background:rgba(34,211,160,0.15);  color:#22D3A0; }
  .pillar-hubungan   { background:rgba(251,146,60,0.15);  color:#fb923c; }
  .pillar-kesehatan  { background:rgba(248,113,113,0.15); color:#f87171; }
  .pillar-karier     { background:rgba(65,114,245,0.15); color:#4172F5; }

  /* Vision table */
  .vision-table { width:100%; border-collapse:collapse; }
  .vision-table th { font-size:11px; font-weight:600; color:var(--text3); letter-spacing:.06em; text-transform:uppercase; padding:8px 10px; text-align:left; border-bottom:1px solid var(--border); }
  .vision-table td { padding:6px 6px; vertical-align:top; }
  .vision-pillar-cell { font-size:12px; font-weight:600; padding:8px 10px; white-space:nowrap; }
  .vision-input {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:8px; color:var(--text);
    font-family:'Crimson Pro',serif; font-size:14px; line-height:1.5;
    padding:8px 10px; width:100%; resize:vertical; min-height:60px;
    transition:border-color 0.15s;
  }
  .vision-input:focus { outline:none; border-color:var(--accent); }

  /* Plan It */
  .plan-pillar-section { margin-bottom:24px; }
  .plan-pillar-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .annual-target-card {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:12px; padding:14px 16px; margin-bottom:8px;
    display:flex; align-items:center; gap:12px;
  }
  .annual-target-card .atc-icon { font-size:20px; flex-shrink:0; }
  .annual-target-card .atc-body { flex:1; min-width:0; }
  .annual-target-card .atc-title { font-size:14px; font-weight:600; color:var(--text); }
  .annual-target-card .atc-meta { font-size:11px; color:var(--text3); margin-top:2px; }
  .annual-target-card .atc-actions { display:flex; gap:6px; flex-shrink:0; }

  /* Daily log */
  .log-section { background:var(--surface2); border:1px solid var(--border); border-radius:16px; padding:18px; margin-bottom:16px; }
  .log-section-title { font-size:12px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; display:flex; align-items:center; gap:6px; }
  .log-priority-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .log-num { width:22px; height:22px; border-radius:7px; background:rgba(65,114,245,0.15); color:var(--accent); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .log-input { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:'Sora',sans-serif; font-size:13px; padding:8px 12px; transition:border-color 0.15s; }
  .log-input:focus { outline:none; border-color:var(--accent); }

  /* Habit checklist */
  .habit-check-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .habit-check-box { width:20px; height:20px; border-radius:6px; border:2px solid var(--border2); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s; }
  .habit-check-box.done { background:var(--accent3); border-color:var(--accent3); }
  .habit-check-name { font-size:13px; color:var(--text2); }
  .habit-check-name.done { text-decoration:line-through; color:var(--text3); }

  /* Review */
  .review-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
  .review-card-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
  .review-card-date { font-size:13px; font-weight:600; color:var(--text); }
  .review-section { margin-bottom:10px; }
  .review-label { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
  .review-content { font-size:13px; color:var(--text2); line-height:1.5; white-space:pre-wrap; }

  /* Toast notification */
  #lj-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--accent); color:#fff; padding:10px 20px; border-radius:20px; font-size:13px; font-weight:600; opacity:0; transition:all 0.3s; z-index:9999; pointer-events:none; white-space:nowrap; }
  #lj-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

  /* Diary mood badge (reused in review) */
  .diary-mood-badge { padding:2px 8px; border-radius:20px; font-size:11px; background:rgba(65,114,245,0.12); color:var(--accent); }

  /* ===== AFFIRMATION MANAGER (Dream It tab) ===== */
  .affirm-item {
    display:flex; align-items:flex-start; gap:10px;
    padding:10px 12px; border-radius:10px;
    background:var(--surface2); border:1px solid var(--border);
    margin-bottom:8px; transition:opacity 0.2s;
  }
  .affirm-item.inactive { opacity:0.4; }
  .affirm-toggle {
    width:20px; height:20px; border-radius:50%;
    border:2px solid var(--border2); cursor:pointer;
    flex-shrink:0; margin-top:2px; font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    background:transparent; color:transparent; transition:all 0.2s;
    font-family:'Sora',sans-serif;
  }
  .affirm-toggle.on { background:var(--accent3); border-color:var(--accent3); color:#fff; }
  .affirm-text-val { font-size:13px; color:var(--text); line-height:1.5; font-style:italic; }
  .affirm-text-wrap { flex:1; min-width:0; }

  /* ===== TODAY AFFIRMATION CARD (Hari Ini page) ===== */
  .affirm-today-card {
    background:linear-gradient(135deg,rgba(65,114,245,0.07),rgba(45,212,191,0.07));
    border:1px solid rgba(65,114,245,0.18);
    border-radius:16px; padding:18px 20px; margin-bottom:16px;
    position:relative; overflow:hidden;
  }
  .affirm-today-card::before {
    content:''; position:absolute; top:-30px; right:-30px;
    width:100px; height:100px;
    background:radial-gradient(circle, rgba(45,212,191,0.1), transparent 70%);
    pointer-events:none;
  }
  .affirm-today-text {
    font-family:'Crimson Pro', Georgia, serif;
    font-size:16px; line-height:1.6; color:var(--text);
    font-style:italic; margin:8px 0 10px;
  }
  .quote-today-text {
    font-size:12px; color:var(--text2); line-height:1.6; font-style:italic;
  }

  /* Notif chips (event modal) */
  .notif-chip {
    padding:5px 10px; border-radius:20px; border:1px solid var(--border2);
    cursor:pointer; font-size:11px; font-weight:600;
    color:var(--text3); background:var(--surface2);
    font-family:'Sora',sans-serif; transition:all 0.15s;
  }
  .notif-chip.active {
    background:rgba(65,114,245,0.18); color:var(--accent);
    border-color:var(--accent);
  }

  /* Tasks page filter buttons */
  .tasks-filter-btn { transition:all 0.15s; }
  .tasks-filter-btn.active { color:var(--accent); border-color:var(--accent); background:rgba(65,114,245,0.1); }

  /* Aktivitas sub-tabs */
  .aktivitas-subtab {
    padding:7px 16px; font-size:13px; font-weight:500; border-radius:8px; cursor:pointer;
    border:1px solid var(--border); background:transparent; color:var(--text2);
    transition:all 0.15s;
  }
  .aktivitas-subtab:hover { color:var(--text1); border-color:var(--text2); }
  .aktivitas-subtab.active { color:var(--accent); border-color:var(--accent); background:rgba(65,114,245,0.1); font-weight:600; }

  @media (max-width: 768px) {
    .cal-week { grid-template-columns: 38px repeat(7, 1fr); }
    .cal-allday-row, .cal-grid-body { grid-template-columns: 38px repeat(7, 1fr); }
    .cal-daynum { font-size:14px; }
    .cal-event { font-size:9px; padding:2px 3px; }
    .cal-event-time { display:none; }
  }

  /* Modal-box variant (used by finance/project modals) */
  .modal-box {
    background:var(--surface);
    border:1px solid var(--border2);
    border-radius:20px;
    padding:24px;
    width:100%; max-width:480px;
    max-height:90vh; overflow-y:auto;
    margin:16px;
  }
  .modal-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:16px;
    font-size:16px; font-weight:600; color:var(--text);
  }
  .modal-body { margin-bottom:16px; }
  .modal-close {
    width:28px; height:28px; border-radius:8px;
    border:1px solid var(--border2); background:transparent;
    color:var(--text2); cursor:pointer; font-size:16px;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s;
  }
  .modal-close:hover { color:var(--text); border-color:var(--text3); }

  /* ==================== MOBILE RESPONSIVE ==================== */

  /* Mobile bottom nav bar */
  .mobile-bottom-nav {
    display:none;
    position:fixed; bottom:0; left:0; right:0;
    background:rgba(246,248,252,0.97);
    backdrop-filter:blur(16px);
    border-top:1px solid var(--border);
    z-index:100;
    padding:0 0 env(safe-area-inset-bottom, 0);
  }
  .mobile-bottom-nav-inner {
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .mobile-bottom-nav-inner::-webkit-scrollbar { display:none; }
  .mob-tab {
    flex:0 0 auto;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px;
    padding:8px 14px;
    min-width:70px;
    border:none; background:transparent;
    color:var(--text3);
    font-family:'Sora',sans-serif; font-size:9px; font-weight:500;
    cursor:pointer; transition:color 0.2s;
    scroll-snap-align:center;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-tab .mob-icon { font-size:18px; line-height:1; }
  .mob-tab.active { color:var(--accent); }
  .mob-tab:active { transform:scale(0.92); }

  /* Hamburger menu button */
  .nav-hamburger {
    display:none;
    width:36px; height:36px;
    border:1px solid var(--border2); border-radius:8px;
    background:var(--surface); cursor:pointer;
    align-items:center; justify-content:center;
    color:var(--text2); font-size:18px;
    -webkit-tap-highlight-color:transparent;
  }

  /* Nav drawer for actions on mobile */
  .nav-drawer-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(4px);
    z-index:150;
  }
  .nav-drawer-overlay.open { display:block; }
  .nav-drawer {
    position:fixed; top:0; right:-280px; bottom:0;
    width:260px; background:var(--surface);
    border-left:1px solid var(--border);
    z-index:151; transition:right 0.3s ease;
    padding:20px;
    display:flex; flex-direction:column; gap:12px;
  }
  .nav-drawer-overlay.open .nav-drawer { right:0; }
  .nav-drawer-close {
    align-self:flex-end;
    width:32px; height:32px; border-radius:8px;
    border:1px solid var(--border2); background:transparent;
    color:var(--text2); cursor:pointer; font-size:16px;
    display:flex; align-items:center; justify-content:center;
  }
  .nav-drawer .drawer-item {
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; border-radius:10px;
    border:1px solid var(--border); background:var(--surface2);
    color:var(--text2); font-family:'Sora',sans-serif; font-size:13px;
    cursor:pointer; text-decoration:none; transition:all 0.2s;
  }
  .nav-drawer .drawer-item:hover { border-color:var(--accent); color:var(--text); }
  .nav-drawer .drawer-item.danger { color:var(--danger); border-color:rgba(248,113,113,0.3); }

  @media (max-width: 640px) {
    /* Show mobile nav */
    .mobile-bottom-nav { display:block; }
    .nav-hamburger { display:flex; }

    /* Hide desktop tabs and actions from top nav */
    nav .nav-tabs { display:none; }
    nav .nav-actions { display:none; }

    /* Slim down top nav */
    nav { padding:12px 16px; }
    .nav-brand h1 { font-size:13px; }

    /* Adjust main content padding for bottom nav */
    main { padding-bottom:70px; }
    .status-bar { display:none; }
    .fab { bottom:80px; right:16px; }

    /* App page padding */
    .app { padding:16px; }

    /* Today page */
    .today-header {
      flex-direction:column; gap:12px;
      align-items:flex-start;
    }
    .today-date { font-size:28px; }
    .today-header > div:last-child {
      flex-direction:column; align-items:flex-start; gap:6px;
    }

    /* Stats */
    .stats-row { grid-template-columns:repeat(3,1fr); gap:8px; }
    .stat-num { font-size:22px; }
    .stat-label { font-size:10px; }
    .stat-box { padding:10px 8px; }

    /* Briefing */
    .briefing-box { padding:14px; }
    #briefing-text { font-size:15px; line-height:1.6; }

    /* Cards */
    .card { padding:14px; border-radius:14px; }

    /* Section headers - stack on mobile */
    .section-header,
    [style*="display:flex"][style*="justify-content:space-between"] {
      gap:10px;
    }

    /* Calendar - use day view by default on mobile */
    .cal-toolbar { padding:10px 12px; gap:8px; }
    .cal-tbtn { padding:5px 10px; font-size:11px; }
    .cal-period-label { font-size:12px; min-width:0; }
    .cal-legend { font-size:10px; gap:6px; }
    .cal-legend-dot { width:8px; height:8px; }
    .cal-view-switcher .cal-tbtn { padding:4px 10px; font-size:11px; }

    /* Month cell compact */
    .cal-month-cell { min-height:60px; padding:3px 4px; }
    .cal-month-num { font-size:11px; min-width:18px; }
    .cal-month-event { font-size:8px; }
    .cal-day-head { padding:6px 2px; font-size:9px; }

    /* Week view on mobile */
    .cal-week { grid-template-columns: 32px repeat(7, 1fr); }
    .cal-allday-row, .cal-grid-body { grid-template-columns: 32px repeat(7, 1fr); }
    .cal-hour-row { font-size:9px; padding:2px 3px; }

    /* Gantt compact */
    .gantt-label-col { width:140px; padding:6px 8px; font-size:10px; }
    .gantt-row-label { width:140px; padding:4px 8px; font-size:10px; }
    .gantt-row-label.phase { padding-left:14px; }
    .gantt-row-label.task { padding-left:24px; }
    .gantt-month-cell { min-width:45px; font-size:9px; padding:6px 2px; }

    /* Tasks */
    .task-item { padding:10px 12px; gap:10px; }
    .task-name { font-size:13px; }
    .task-badge { font-size:9px; padding:2px 6px; }

    /* Task rows (projects) */
    .task-row { padding:6px 8px; gap:8px; }
    .task-assignee { display:none; }

    /* Target cards */
    .routine-chart { gap:2px; }
    .routine-dot { width:12px; height:12px; }
    .target-body { padding:12px; }
    .routine-stats { gap:12px; }

    /* Form adjustments */
    .form-row { grid-template-columns:1fr; gap:10px; }

    /* Modal - full width on mobile */
    .modal {
      max-width:100%; border-radius:16px 16px 0 0;
      margin:0; position:fixed;
      bottom:0; left:0; right:0;
      max-height:85vh;
      animation:slideUp 0.25s ease;
    }
    @keyframes slideUp {
      from { transform:translateY(100%); }
      to { transform:translateY(0); }
    }
    .modal-overlay.open {
      display:flex; align-items:flex-end;
    }
    .modal-title { font-size:15px; }

    /* Modal-box variant (finance/project) */
    .modal-box {
      max-width:100%; border-radius:16px 16px 0 0;
      margin:0; position:fixed;
      bottom:0; left:0; right:0;
      max-height:85vh;
      animation:slideUp 0.25s ease;
    }

    /* Finance */
    .fin-account-card { min-width:120px; max-width:none; flex:1 1 calc(50% - 6px); padding:12px; }
    .fin-account-card .fin-acct-bal { font-size:14px; }
    .fin-account-card .fin-acct-actions { opacity:1; }
    .fin-txn-row { padding:10px 12px; gap:8px; }
    .fin-txn-icon { width:32px; height:32px; font-size:14px; }
    .fin-txn-amount { font-size:13px; }

    /* Page headers */
    #page-events > div:first-child,
    #page-tasks > div:first-child,
    #page-targets > div:first-child,
    #page-reminders > div:first-child {
      flex-wrap:wrap;
    }
    #page-events h2,
    #page-tasks h2,
    #page-targets h2,
    #page-reminders h2 { font-size:18px; }

    /* Finance & project header */
    .section-header { flex-wrap:wrap; }
    .section-header > div:last-child { width:100%; }

    /* Project cards */
    .project-header { padding:12px; gap:8px; }
    .project-name { font-size:13px; }
    .project-bar-bg { width:60px; }
    .project-body { padding:0 12px 12px; }
    .project-actions .btn-sm { padding:5px 8px; font-size:10px; }

    /* Phase rows */
    .phase-header { padding:8px 10px; gap:8px; }
    .phase-name { font-size:12px; }
    .phase-dates { font-size:10px; }

    /* Progress bars */
    .progress-row { gap:8px; }
    .progress-label { min-width:100px; font-size:12px; }

    /* Project summary */
    .proj-summary-card { min-width:90px; padding:10px 12px; }
    .proj-summary-val { font-size:18px; }

    /* History */
    .history-item { gap:10px; padding:10px 0; }
    .history-title { font-size:12px; }

    /* Mood bar */
    .mood-btn { padding:6px 10px; font-size:11px; }

    /* Buttons */
    .btn { padding:10px 16px; font-size:12px; }
    .btn-sm { padding:6px 10px; font-size:11px; }
    .checkin-btn { padding:8px 12px; font-size:11px; }

    /* Grid 2 col */
    .grid-2 { grid-template-columns:1fr; gap:12px; }

    /* Priority row */
    .priority-row { gap:4px; }
    .prio-btn { padding:7px 4px; font-size:10px; }

    /* Day buttons */
    .day-btn { padding:4px 7px; font-size:10px; }

    /* Checkin toggle */
    .checkin-toggle-btn { min-width:0; padding:8px 6px; font-size:11px; }

    /* Receipt */
    #receipt-drop-zone { padding:16px; }

    /* Filter buttons wrap */
    .tasks-filter-btn { font-size:11px; }
  }

  /* Extra small phones (< 380px) */
  @media (max-width: 380px) {
    .today-date { font-size:24px; }
    .stat-num { font-size:18px; }
    .stats-row { gap:6px; }
    .mob-tab { min-width:60px; padding:8px 10px; font-size:8px; }
    .mob-tab .mob-icon { font-size:16px; }
    .modal { padding:18px; }
    .app { padding:12px; }
    .fin-account-card { flex:1 1 100%; }
    .routine-dot { width:10px; height:10px; }
  }

/* ============================================================
   KALENDER ACARA — tambahan/override (dimuat paling akhir → menang)
   Dipakai oleh tabs/events.js (view Bulan/Minggu/Hari).
   ============================================================ */

/* Bilah gradient kecil di kiri baris acara (list view) */
.ev-bar { width:6px; height:48px; background:var(--brand-gradient); border-radius:3px; flex-shrink:0; }

/* View switcher di page-actions */
.cal-view-switcher { flex-wrap:wrap; }

/* Legenda jadi tombol toggle (mirip "My calendars" Google Calendar) */
.cal-legend-item { cursor:pointer; padding:3px 8px; border-radius:var(--radius-full); user-select:none; transition:all var(--tr-fast); }
.cal-legend-item:hover { background:var(--bg-hover); }
.cal-legend-item.off { opacity:0.4; }
.cal-legend-item.off .cal-legend-dot { background:var(--text-dim) !important; }
.cal-legend-item.off::after { content:'×'; margin-left:4px; font-weight:700; }

/* Header hari pada Month view */
.cal-month-head {
  text-align:center; padding:8px 4px; font-size:11px; font-weight:600;
  color:var(--text-muted); background:var(--surface2);
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
}
.cal-month-head:first-child { border-left:1px solid var(--border); }

/* Hover sel bulan yang terlihat di tema terang (legacy pakai putih transparan) */
.cal-month-cell { border-left:1px solid var(--border); }
.cal-month-cell:hover { background:var(--bg-hover); }
.cal-month-num { cursor:pointer; }
.cal-month-num:hover { background:var(--brand-mint-soft); }
.cal-month-event { cursor:pointer; }

/* Toolbar: tombol navigasi & periode lebih jelas */
.cal-tbtn { font-family:inherit; }
.cal-period-label { white-space:nowrap; }

/* Garis "sekarang" */
.cal-now-line { background:var(--danger); box-shadow:0 0 6px rgba(220,38,38,0.5); }
.cal-now-line::before { background:var(--danger); }

/* Responsif: Minggu/Bulan butuh lebar minimum → scroll horizontal di layar kecil */
@media (max-width: 720px) {
  .cal-wrap { overflow-x:auto; }
  .cal-week { min-width:620px; }
  .cal-month { min-width:560px; }
  .cal-month-cell { min-height:72px; }
  .cal-legend { width:100%; }
}