/* Bullet Journal – styles are scoped under #bullet-app-root so they never
   leak into (or get overridden by) the surrounding WordPress theme. */
#bullet-app-root{
  --surface: #fcfcfb;
  --page: #f9f9f7;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11,11,11,0.10);
  --success-text: #006300;

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-w: 240px;

  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 640px;
}
#bullet-app-root, #bullet-app-root *{ box-sizing:border-box; }
#bullet-app-root a{ color:inherit; text-decoration:none; }
#bullet-app-root button{ font-family:inherit; }
#bullet-app-root input, #bullet-app-root select, #bullet-app-root textarea{ font-family:inherit; font-size:14px; }

#bullet-app-root .bj-shell{ display:flex; min-height:640px; }

/* Sidebar */
#bullet-app-root .sidebar{
  width: var(--sidebar-w);
  flex-shrink:0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding: 20px 14px;
}
#bullet-app-root .brand{ display:flex; align-items:center; gap:10px; padding: 6px 10px 22px 10px; }
#bullet-app-root .brand-mark{
  width:30px; height:30px; border-radius:9px; background: var(--series-1);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px;
}
#bullet-app-root .brand-name{ font-weight:700; font-size:16px; letter-spacing:-0.01em; }
#bullet-app-root .brand-sub{ font-size:11px; color:var(--muted); margin-top:1px; }

#bullet-app-root nav.nav{ display:flex; flex-direction:column; gap:2px; }
#bullet-app-root .nav-link{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:var(--radius-sm);
  font-size:14px; color:var(--ink-2); font-weight:500;
  cursor:pointer; user-select:none;
}
#bullet-app-root .nav-link:hover{ background: var(--page); color:var(--ink); }
#bullet-app-root .nav-link.active{ background: var(--series-1); color:#fff; }
#bullet-app-root .nav-link .ic{ width:18px; text-align:center; font-size:15px; flex-shrink:0; }

#bullet-app-root .nav-spacer{ flex:1; }
#bullet-app-root .sidebar-footer{ padding-top:10px; border-top:1px solid var(--border); margin-top:10px; }

/* Main */
#bullet-app-root .main{ flex:1; min-width:0; display:flex; flex-direction:column; }
#bullet-app-root .topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 28px; border-bottom:1px solid var(--border);
  background: var(--surface);
}
#bullet-app-root .topbar h1{ font-size:19px; margin:0; font-weight:700; letter-spacing:-0.01em; }
#bullet-app-root .topbar .sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
#bullet-app-root .hamburger{ display:none; }

#bullet-app-root .view{ padding: 24px 28px 60px 28px; max-width:1080px; }

#bullet-app-root .card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 18px; }
#bullet-app-root .card + .card{ margin-top:14px; }
#bullet-app-root .card h2{ font-size:14.5px; margin:0 0 12px 0; font-weight:700; }
#bullet-app-root .card h2 .count{ color:var(--muted); font-weight:500; }

#bullet-app-root .row{ display:flex; align-items:center; gap:10px; }
#bullet-app-root .row.between{ justify-content:space-between; }
#bullet-app-root .wrap{ flex-wrap:wrap; }
#bullet-app-root .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#bullet-app-root .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width: 800px){ #bullet-app-root .grid-2, #bullet-app-root .grid-3{ grid-template-columns:1fr; } }

#bullet-app-root .btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius: 999px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
#bullet-app-root .btn:hover{ background: var(--page); }
#bullet-app-root .btn.primary{ background: var(--series-1); border-color:var(--series-1); color:#fff; }
#bullet-app-root .btn.primary:hover{ filter:brightness(1.06); }
#bullet-app-root .btn.ghost{ border-color:transparent; background:transparent; }
#bullet-app-root .btn.danger{ color: var(--critical); }
#bullet-app-root .btn.sm{ padding:5px 10px; font-size:12.5px; }
#bullet-app-root .btn:disabled{ opacity:.5; cursor:not-allowed; }
#bullet-app-root .btn.block{ width:100%; justify-content:center; }
#bullet-app-root .icon-btn{
  width:28px; height:28px; border-radius:8px; border:1px solid transparent;
  background:transparent; color:var(--muted); cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; font-size:13px;
}
#bullet-app-root .icon-btn:hover{ background:var(--page); color:var(--ink); }

#bullet-app-root label{ font-size:12.5px; color:var(--ink-2); font-weight:600; display:block; margin-bottom:5px; }
#bullet-app-root input[type=text], #bullet-app-root input[type=date], #bullet-app-root input[type=time],
#bullet-app-root input[type=number], #bullet-app-root input[type=password], #bullet-app-root input[type=email],
#bullet-app-root select, #bullet-app-root textarea{
  width:100%; padding:9px 11px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--ink);
}
#bullet-app-root textarea{ resize:vertical; min-height:64px; }
#bullet-app-root input:focus, #bullet-app-root select:focus, #bullet-app-root textarea:focus{ outline:2px solid var(--series-1); outline-offset:0; }
#bullet-app-root .field{ margin-bottom:12px; }
#bullet-app-root .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#bullet-app-root .field-hint{ font-size:11.5px; color:var(--muted); margin-top:4px; }
#bullet-app-root .field-error{ font-size:12.5px; color:var(--critical); margin-top:6px; }

#bullet-app-root .badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; color:var(--ink-2);
  padding:3px 8px; border-radius:999px; background:var(--page);
}
#bullet-app-root .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
#bullet-app-root .empty{ color:var(--muted); font-size:13px; padding: 10px 2px; }

/* Todo list */
#bullet-app-root .item-row{ display:flex; align-items:flex-start; gap:10px; padding:10px 4px; border-bottom:1px solid var(--grid); }
#bullet-app-root .item-row:last-child{ border-bottom:none; }
#bullet-app-root .item-row.done .item-title{ color:var(--muted); text-decoration:line-through; }
#bullet-app-root .check{
  width:19px; height:19px; border-radius:6px; border:1.6px solid var(--baseline);
  flex-shrink:0; margin-top:2px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:#fff; font-size:12px;
}
#bullet-app-root .check.checked{ background:var(--good); border-color:var(--good); }
#bullet-app-root .item-body{ flex:1; min-width:0; }
#bullet-app-root .item-title{ font-size:14px; font-weight:600; }
#bullet-app-root .item-meta{ font-size:12px; color:var(--muted); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#bullet-app-root .item-desc{ font-size:12.5px; color:var(--ink-2); margin-top:4px; white-space:pre-wrap; }
#bullet-app-root .item-actions{ display:flex; gap:2px; opacity:0; }
#bullet-app-root .item-row:hover .item-actions{ opacity:1; }
#bullet-app-root .subtasks{ margin-left:29px; margin-top:4px; }
#bullet-app-root .type-pill{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; padding:2px 6px; border-radius:5px; }
#bullet-app-root .type-task{ background:#eaf1fb; color:var(--series-1); }
#bullet-app-root .type-appointment{ background:#fdeee6; color:var(--series-2); }
#bullet-app-root .type-note{ background:#eafaf3; color:var(--series-3); }

#bullet-app-root .tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; flex-wrap:wrap; }
#bullet-app-root .tab{ padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
#bullet-app-root .tab.active{ color:var(--series-1); border-color:var(--series-1); }

/* Modal */
#bullet-app-root .modal-overlay{
  position:fixed; inset:0; background:rgba(11,11,11,0.35);
  display:flex; align-items:flex-start; justify-content:center;
  padding: 6vh 16px; overflow-y:auto; z-index:100000;
}
#bullet-app-root .modal-panel{
  background:var(--surface); border-radius:var(--radius); width:100%; max-width:480px;
  padding:22px; border:1px solid var(--border);
}
#bullet-app-root .modal-panel h3{ margin:0 0 16px 0; font-size:16px; }
#bullet-app-root .modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* Calendar */
#bullet-app-root .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
#bullet-app-root .cal-dow{ font-size:11px; font-weight:700; color:var(--muted); text-align:center; padding-bottom:4px; text-transform:uppercase; letter-spacing:.03em; }
#bullet-app-root .cal-cell{
  min-height:92px; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:6px; background:var(--surface); cursor:pointer; display:flex; flex-direction:column; gap:3px;
}
#bullet-app-root .cal-cell:hover{ border-color: var(--series-1); }
#bullet-app-root .cal-cell.other-month{ opacity:.4; }
#bullet-app-root .cal-cell.today{ background:#eaf1fb; }
#bullet-app-root .cal-daynum{ font-size:12px; font-weight:700; }
#bullet-app-root .cal-chip{ font-size:10px; padding:1px 5px; border-radius:5px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#bullet-app-root .cal-more{ font-size:10px; color:var(--muted); }

#bullet-app-root .week-cols{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; align-items:start; }
#bullet-app-root .week-col-head{ font-size:12px; font-weight:700; text-align:center; padding:6px 0; border-bottom:2px solid var(--border); margin-bottom:6px; }
#bullet-app-root .week-col-head.today{ color:var(--series-1); border-color:var(--series-1); }
#bullet-app-root .week-item{ font-size:11px; padding:4px 6px; border-radius:6px; margin-bottom:4px; color:#fff; }

/* Goals */
#bullet-app-root .goal-row{ display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--grid); }
#bullet-app-root .goal-row:last-child{ border-bottom:none; }
#bullet-app-root .goal-text{ flex:1; font-size:14px; }
#bullet-app-root .goal-row.done .goal-text{ color:var(--muted); text-decoration:line-through; }

/* Habits */
#bullet-app-root .habit-card{ margin-bottom:14px; }
#bullet-app-root .habit-grid{ display:grid; grid-template-columns:repeat(7,32px); gap:5px; margin-top:10px; }
#bullet-app-root .habit-day{
  width:32px; height:32px; border-radius:6px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--muted); cursor:pointer;
}
#bullet-app-root .habit-day.filled{ color:#fff; border-color:transparent; }
#bullet-app-root .habit-day.future{ opacity:.35; cursor:default; }
#bullet-app-root .streak{ font-size:12px; color:var(--muted); }

/* Mood sliders */
#bullet-app-root .slider-field{ margin-bottom:16px; }
#bullet-app-root .slider-field .row.between{ margin-bottom:4px; }
#bullet-app-root input[type=range]{ width:100%; accent-color: var(--series-1); }

#bullet-app-root .chart-wrap{ height:260px; margin-top:10px; }

#bullet-app-root .journal-nav{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
#bullet-app-root .journal-date{ font-weight:700; font-size:15px; flex:1; }

#bullet-app-root .toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px;
  font-size:13px; z-index:100001; opacity:0; pointer-events:none; transition:opacity .2s;
  max-width: 90vw; text-align:center;
}
#bullet-app-root .toast.show{ opacity:1; }

/* Auth screens (login / 2FA / setup) */
#bullet-app-root .auth-wrap{
  min-height:640px; display:flex; align-items:center; justify-content:center; padding:40px 20px;
}
#bullet-app-root .auth-box{ width:100%; max-width:360px; }
#bullet-app-root .auth-logo{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:26px; text-align:center; }
#bullet-app-root .auth-tagline{ font-size:13px; color:var(--muted); }
#bullet-app-root .auth-box h2{ font-size:18px; margin:0 0 4px 0; text-align:center; }
#bullet-app-root .auth-box .sub{ font-size:13px; color:var(--muted); text-align:center; margin-bottom:20px; }
#bullet-app-root .auth-footer{ text-align:center; margin-top:16px; font-size:12.5px; color:var(--muted); }
#bullet-app-root .otp-input{
  width:100%; text-align:center; letter-spacing:.5em; font-size:22px; font-weight:700;
  padding:12px 11px 12px 16px; border-radius:var(--radius-sm); border:1px solid var(--border);
}
#bullet-app-root .secret-box{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:15px; letter-spacing:.05em;
  background:var(--page); border:1px dashed var(--baseline); border-radius:var(--radius-sm);
  padding:12px; word-break:break-all; text-align:center; margin:10px 0;
}
#bullet-app-root .backup-codes{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background:var(--page); border-radius:var(--radius-sm); padding:14px; margin:12px 0; font-size:14px;
}
#bullet-app-root .status-line{ display:flex; align-items:center; gap:8px; font-size:13.5px; }
#bullet-app-root .status-dot{ width:9px; height:9px; border-radius:50%; }
#bullet-app-root .status-dot.on{ background:var(--good); }
#bullet-app-root .status-dot.off{ background:var(--muted); }
#bullet-app-root .sync-indicator{ font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:5px; }
#bullet-app-root .sync-indicator .dot{ background: var(--good); }
#bullet-app-root .sync-indicator.saving .dot{ background: var(--warning); }
#bullet-app-root .sync-indicator.error .dot{ background: var(--critical); }
#bullet-app-root .loading-screen{ min-height:640px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13.5px; }

@media (max-width: 900px){
  #bullet-app-root .sidebar{ position:fixed; left:-260px; top:0; bottom:0; z-index:99998; transition:left .2s; overflow-y:auto; }
  #bullet-app-root .sidebar.open{ left:0; box-shadow:0 0 40px rgba(0,0,0,.2); }
  #bullet-app-root .hamburger{ display:inline-flex; }
  #bullet-app-root .view{ padding:18px 16px 60px 16px; }
  #bullet-app-root .topbar{ padding:14px 16px; }
  #bullet-app-root .field-row{ grid-template-columns:1fr; }
  #bullet-app-root .cal-cell{ min-height:64px; }
  #bullet-app-root .backup-codes{ grid-template-columns:1fr; }
}