/* ═══════════════════════════════════════════════════════
   波哥工作台 v5.0 · Pro Edition
   Design System (Featuring Phosphor Icons)
   ═══════════════════════════════════════════════════════ */

/* ─── Variables ─── */
:root {
  --bg-0: #f4f5f9;
  --bg-1: #ecedf2;
  --bg-2: #ffffff;
  --bg-3: #f8f9fc;
  --bg-4: #ffffff;
  --bg-hover: #f0f1f5;
  --bg-input: #eef0f4;

  --sidebar-bg: #ffffff;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;

  --border: rgba(0,0,0,0.06);
  --border-2: rgba(0,0,0,0.10);
  --border-3: rgba(0,0,0,0.15);

  --text-1: #1a1d2e;
  --text-2: #6b7090;
  --text-3: #9ca0b8;

  --accent-blue: #5b8def;
  --accent-blue-g: rgba(91,141,239,0.12);
  --accent-green: #34d399;
  --accent-green-g: rgba(52,211,153,0.12);
  --accent-amber: #fbbf24;
  --accent-amber-g: rgba(251,191,36,0.12);
  --accent-red: #f87171;
  --accent-red-g: rgba(248,113,113,0.12);
  --accent-purple: #a78bfa;
  --accent-purple-g: rgba(167,139,250,0.12);
  --accent-cyan: #22d3ee;

  /* Aliases used across the app */
  --accent: #5b8def;
  --accent-2: #34d399;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 20px;

  --shadow-s: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-m: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-l: 0 12px 48px rgba(0,0,0,0.1);

  --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono: 'JetBrains Mono','Fira Code',monospace;
  --ease: cubic-bezier(0.16,1,0.3,1);
}

/* Workspace Modes — cleaned up, no longer used */


/* ─── Reset ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{font-family:var(--font);background:var(--bg-0);color:var(--text-1);line-height:1.6;overflow-x:hidden;display:flex;min-height:100vh;}
input,select,textarea,button{font-family:var(--font);}
::selection{background:rgba(91,141,239,0.3);}

/* ─── Global Icon Styling (Phosphor) ─── */
i.ph, i.ph-fill {
  font-size: 1.1em;
  vertical-align: middle;
  line-height: 1;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--border-3);}

/* ═══════════════════════════
   SIDEBAR
   ═══════════════════════════ */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  z-index:200;
  transition:width 0.3s var(--ease),transform 0.3s var(--ease);
  overflow:hidden;
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed);}
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-group-label,
.sidebar.collapsed .sidebar-clock{opacity:0;width:0;overflow:hidden;white-space:nowrap;}

.sidebar-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 16px 10px;
  min-height:56px;
}
.sidebar-brand{display:flex;align-items:center;gap:10px;}
.brand-logo{
  font-size:22px !important;
  color: var(--accent-blue);
  filter:drop-shadow(0 0 6px rgba(91,141,239,0.4));
  flex-shrink:0;
}
.brand-text{
  font-size:15px;font-weight:700;
  white-space:nowrap;
  transition:opacity 0.2s,width 0.2s;
}
.sidebar-collapse-btn{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:6px;
  color:var(--text-3);cursor:pointer;
  transition:all 0.15s;flex-shrink:0;
}
.sidebar-collapse-btn:hover{background:var(--bg-hover);color:var(--text-1);}
.sidebar.collapsed .sidebar-collapse-btn i{transform:rotate(180deg);}

/* Navigation */
.sidebar-nav{flex:1;overflow-y:auto;padding:8px 0;scrollbar-width:none;}
.sidebar-nav::-webkit-scrollbar{display:none;}

.nav-group{padding:4px 10px; margin-bottom: 8px;}
.nav-group-label{
  font-size:10px;font-weight:600;color:var(--text-3);
  text-transform:uppercase;letter-spacing:1.2px;
  padding:8px 8px 4px;
  transition:opacity 0.2s,width 0.2s;
  white-space:nowrap;
}

.nav-item{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  border:none;border-radius:var(--radius-s);
  background:transparent;color:var(--text-2);
  font-size:13px;font-weight:500;
  cursor:pointer;
  transition:all 0.15s;
  position:relative;
  text-align:left;
}
.nav-item:hover{background:var(--bg-hover);color:var(--text-1);}
.nav-item.active{
  background:var(--accent-blue-g);
  color:var(--accent-blue);
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;
  background:var(--accent-blue);
}
.nav-icon{font-size:18px !important;width:20px;text-align:center;flex-shrink:0;}
.nav-text{transition:opacity 0.2s,width 0.2s;white-space:nowrap;}
.nav-badge{
  margin-left:auto;font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:10px;
  background:var(--bg-3);color:var(--text-3);
  transition:opacity 0.2s;
}
.nav-dot{
  margin-left:auto;width:7px;height:7px;border-radius:50%;
  background:var(--accent-red);flex-shrink:0;
}
.nav-dot.pulse{animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(248,113,113,0.4);}
  50%{opacity:.7;box-shadow:0 0 0 6px rgba(248,113,113,0);}
}

/* Sidebar Bottom */
.sidebar-bottom{
  padding:12px 16px;border-top:1px solid var(--border);
}
.sidebar-clock{
  font-family:var(--mono);font-size:12px;color:var(--text-3);
  text-align:center;transition:opacity 0.2s;
}

/* ═══════════════════════════
   MAIN CONTENT
   ═══════════════════════════ */
.main{
  flex:1;margin-left:var(--sidebar-w);
  min-height:100vh;
  transition:margin-left 0.3s var(--ease);
}
body.sidebar-collapsed .main{margin-left:var(--sidebar-w-collapsed);}

/* Top Bar */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:rgba(244,245,249,0.8);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}

.topbar-left{display:flex;align-items:center;gap:12px;}
.hamburger{
  display:none;width:36px;height:36px;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);border-radius:var(--radius-s);
  color:var(--text-2);cursor:pointer;
  font-size: 18px;
}
.page-title{font-size:16px;font-weight:600;}

.topbar-right{display:flex;align-items:center;gap:10px;}

.search-trigger{
  display:flex;align-items:center;gap:8px;
  padding:7px 14px;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-s);
  color:var(--text-3);font-size:13px;
  cursor:pointer;transition:all 0.15s;
  min-width:200px;
}
.search-trigger:hover{border-color:var(--border-2);color:var(--text-2);}
.search-trigger kbd{
  margin-left:auto;font-family:var(--mono);font-size:10px;
  padding:2px 6px;background:var(--bg-3);border:1px solid var(--border);
  border-radius:4px;
}
.topbar-icon-btn{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-s);color:var(--text-2);cursor:pointer;
  transition:all 0.15s;font-size: 18px;
}
.topbar-icon-btn:hover{border-color:var(--border-2);color:var(--text-1);}

/* ═══════════════════════════
   COMMAND PALETTE
   ═══════════════════════════ */
.cmd-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:18vh;
  opacity:0;visibility:hidden;
  transition:all 0.2s;
}
.cmd-overlay.open{opacity:1;visibility:visible;}
.cmd-palette{
  width:100%;max-width:560px;
  background:var(--bg-2);border:1px solid var(--border-2);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-l);
  transform:scale(0.96) translateY(-10px);
  transition:transform 0.3s var(--ease);
}
.cmd-overlay.open .cmd-palette{transform:scale(1) translateY(0);}
.cmd-input-row{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--border);
}
.cmd-input-row i{color:var(--text-3);flex-shrink:0;font-size: 18px;}
.cmd-input-row input{
  flex:1;background:transparent;border:none;outline:none;
  font-size:15px;color:var(--text-1);
}
.cmd-input-row input::placeholder{color:var(--text-3);}
.cmd-results{max-height:320px;overflow-y:auto;padding:6px;}
.cmd-section-label{
  font-size:10px;font-weight:600;color:var(--text-3);
  text-transform:uppercase;letter-spacing:1px;
  padding:8px 12px 4px;
}
.cmd-item{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 12px;border:none;border-radius:var(--radius-s);
  background:transparent;color:var(--text-1);
  font-size:13px;cursor:pointer;text-align:left;
  transition:background 0.1s;
}
.cmd-item:hover{background:var(--accent-blue-g);}
.cmd-item-icon{font-size:18px !important;width:22px;text-align:center;}
.cmd-item-hint{margin-left:auto;font-size:11px;color:var(--text-3);}

/* ═══════════════════════════
   VIEWS
   ═══════════════════════════ */
.view{
  display:none;padding:24px 28px 60px;
  animation:viewIn 0.35s var(--ease);
}
.view.active{display:block;}
@keyframes viewIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

.view-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:24px;flex-wrap:wrap;gap:16px;
}
.view-header h1{font-size:24px;font-weight:800;letter-spacing:-0.3px;}
.view-sub{font-size:13px;color:var(--text-3);margin-top:4px;}

/* ─── CARD (base component) ─── */
.card{
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-l);padding:20px;
  margin-bottom:16px;
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.card-header h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px;}
.card-header h3 i{font-size: 18px;}
.card-header-sub{font-size:12px;color:var(--text-3);}
.card-info{border-color:rgba(91,141,239,0.2);background:rgba(91,141,239,0.03);}

.link-btn{
  background:transparent;border:none;
  color:var(--accent-blue);font-size:12px;font-weight:500;
  cursor:pointer;transition:opacity 0.15s;
}
.link-btn:hover{opacity:.7;}

.sub-mode-btn{
  background:transparent;border:none;
  padding:6px 14px;font-size:13px;font-weight:600;
  color:var(--text-2);cursor:pointer;transition:all 0.15s;
}
.sub-mode-btn:hover{background:var(--bg-2);}
.sub-mode-btn.active{
  background:var(--accent);color:#fff;
}

/* ─── BUTTONS ─── */
.primary-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;background:var(--accent-blue);color:#fff;
  border:none;border-radius:var(--radius-s);
  font-size:13px;font-weight:600;cursor:pointer;
  transition:all 0.15s;
}
.primary-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.primary-btn.full{width:100%;margin-top:8px;padding:12px;}

.outline-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 16px;border:1px solid var(--border-2);
  border-radius:var(--radius-s);background:transparent;
  color:var(--text-2);font-size:13px;font-weight:500;
  cursor:pointer;transition:all 0.15s;
}
.outline-btn:hover{border-color:var(--text-2);color:var(--text-1);}
.outline-btn.danger{border-color:rgba(248,113,113,0.3);color:var(--accent-red);}
.outline-btn.danger:hover{background:var(--accent-red-g);}

/* ═══════════════════════════
   DASHBOARD
   ═══════════════════════════ */

/* Stat cards (kept; used by dashboard mini-stats) */
.stat-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-l);
  transition:all 0.2s;
}
.stat-card:hover{transform:translateY(-2px);border-color:var(--border-2);}
.stat-card[data-accent="blue"]{border-left:3px solid var(--accent-blue);}
.stat-card[data-accent="green"]{border-left:3px solid var(--accent-green);}
.stat-card[data-accent="amber"]{border-left:3px solid var(--accent-amber);}
.stat-card[data-accent="red"]{border-left:3px solid var(--accent-red);}
.stat-number{font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1;}
.stat-card[data-accent="blue"] .stat-number{color:var(--accent-blue);}
.stat-card[data-accent="green"] .stat-number{color:var(--accent-green);}
.stat-card[data-accent="amber"] .stat-number{color:var(--accent-amber);}
.stat-card[data-accent="red"] .stat-number{color:var(--accent-red);}
.stat-desc{font-size:12px;color:var(--text-3);margin-top:4px;}
.stat-icon{font-size: 32px; opacity: 0.2; color:currentColor;}

/* Sprint Mini */
.sprint-mini-bar-wrap{
  height:8px;background:var(--bg-input);border-radius:10px;overflow:hidden;margin-bottom:8px;
}
.sprint-mini-bar{
  height:100%;border-radius:10px;
  background:linear-gradient(90deg,var(--accent-blue),var(--accent-purple));
  transition:width 1s var(--ease);
}
.sprint-mini-labels{
  display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);
  margin-bottom:14px;
}
.sprint-mini-labels strong{color:var(--text-1);}
.sprint-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.sp-phase{
  text-align:center;padding:8px 4px;
  border-radius:var(--radius-s);
  background:var(--bg-input);border:1px solid var(--border);
  font-size:11px;color:var(--text-3);
  transition:all 0.2s;
}
.sp-phase span{display:block;font-weight:700;font-size:10px;color:var(--text-2);margin-bottom:2px;}
.sp-phase.done{border-color:var(--accent-green);color:var(--accent-green);background:var(--accent-green-g);}
.sp-phase.active{border-color:var(--accent-blue);color:var(--accent-blue);background:var(--accent-blue-g);}

/* Mini Project List */
.mini-project-list{display:flex;flex-direction:column;gap:4px;}
.mini-proj{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:var(--radius-s);
  cursor:pointer;transition:background 0.1s;
}
.mini-proj:hover{background:var(--bg-hover);}
.mp-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.mp-icon[data-cat="business"]{background:var(--accent-amber-g); color: var(--accent-amber);}
.mp-icon[data-cat="career"]{background:var(--accent-red-g); color: var(--accent-red);}
.mp-icon[data-cat="dev"]{background:var(--accent-blue-g); color: var(--accent-blue);}
.mp-icon[data-cat="miniapp"]{background:var(--accent-green-g); color: var(--accent-green);}
.mp-icon[data-cat="knowledge"]{background:var(--accent-purple-g); color: var(--accent-purple);}
.mp-icon[data-cat="frozen"]{background:rgba(148,163,184,0.08); color: var(--text-3);}
.mp-info{flex:1;min-width:0;}
.mp-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mp-desc{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mp-status{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.mp-status[data-s="active"]{background:var(--accent-green);box-shadow:0 0 6px var(--accent-green);}
.mp-status[data-s="paused"]{background:var(--accent-amber);}
.mp-status[data-s="frozen"]{background:var(--text-3);}
.mp-status[data-s="done"]{background:var(--accent-blue);}

/* Quick Note */
.quick-note-box textarea{
  width:100%;padding:10px 12px;background:var(--bg-input);
  border:1px solid var(--border);border-radius:var(--radius-s);
  color:var(--text-1);font-size:13px;resize:none;outline:none;
  transition:border-color 0.15s;
}
.quick-note-box textarea:focus{border-color:var(--accent-blue);}
.quick-note-btn{
  margin-top:8px;width:100%;padding:8px;
  background:var(--accent-blue);color:#fff;border:none;
  border-radius:var(--radius-s);font-size:13px;font-weight:600;
  cursor:pointer;transition:all 0.15s;
}
.quick-note-btn:hover{filter:brightness(1.1);}

/* ═══════════════════════════
   PROJECTS PAGE
   ═══════════════════════════ */
.filter-bar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;gap:12px;flex-wrap:wrap;
}
.filter-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.filter-tab{
  display: inline-flex; align-items: center; gap: 4px;
  padding:6px 14px;border:1px solid var(--border);
  border-radius:100px;background:transparent;
  color:var(--text-3);font-size:12px;font-weight:500;
  cursor:pointer;transition:all 0.15s;white-space:nowrap;
}
.filter-tab:hover{border-color:var(--border-2);color:var(--text-2);}
.filter-tab.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff;}

.filter-right{display:flex;align-items:center;gap:8px;}
.filter-right select{
  padding:6px 10px;background:var(--bg-2);
  border:1px solid var(--border);border-radius:var(--radius-s);
  color:var(--text-2);font-size:12px;outline:none;cursor:pointer;
}
.view-mode-toggle{display:flex;border:1px solid var(--border);border-radius:var(--radius-s);overflow:hidden;}
.vm-btn{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text-3);cursor:pointer;
  transition:all 0.15s;
}
.vm-btn:first-child{border-right:1px solid var(--border);}
.vm-btn.active{background:var(--accent-blue-g);color:var(--accent-blue);}

/* Grid view */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.projects-grid.list-mode{grid-template-columns:1fr;}

.proj-card{
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-l);padding:20px;
  cursor:pointer;transition:all 0.2s;
  animation:fadeUp 0.3s var(--ease) both;
}
.proj-card:hover{transform:translateY(-2px);border-color:var(--border-2);box-shadow:var(--shadow-m);}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.proj-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;}
.proj-icon{
  width:40px;height:40px;border-radius:var(--radius-m);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.proj-icon[data-c="business"]{background:var(--accent-amber-g); color: var(--accent-amber);}
.proj-icon[data-c="career"]{background:var(--accent-red-g); color: var(--accent-red);}
.proj-icon[data-c="dev"]{background:var(--accent-blue-g); color: var(--accent-blue);}
.proj-icon[data-c="miniapp"]{background:var(--accent-green-g); color: var(--accent-green);}
.proj-icon[data-c="knowledge"]{background:var(--accent-purple-g); color: var(--accent-purple);}
.proj-icon[data-c="frozen"]{background:rgba(148,163,184,0.08); color: var(--text-3);}

.proj-status{
  padding:3px 10px;border-radius:100px;
  font-size:11px;font-weight:600;
}
.proj-status[data-s="active"]{background:var(--accent-green-g);color:var(--accent-green);}
.proj-status[data-s="paused"]{background:var(--accent-amber-g);color:var(--accent-amber);}
.proj-status[data-s="frozen"]{background:rgba(148,163,184,0.08);color:var(--text-3);}
.proj-status[data-s="done"]{background:var(--accent-blue-g);color:var(--accent-blue);}

.proj-name{font-size:15px;font-weight:700;margin-bottom:6px;}
.proj-desc{
  font-size:12px;color:var(--text-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:12px;
}
.proj-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;}
.tag{
  font-size:10px;font-weight:500;padding:3px 8px;
  border-radius:100px;background:var(--bg-3);
  color:var(--text-3);border:1px solid var(--border);
}
.proj-meta{
  display:flex;align-items:center;gap:14px;
  padding-top:12px;border-top:1px solid var(--border);
  font-size:11px;color:var(--text-3);font-family:var(--mono);
}

/* Archived projects collapsed section */
.archived-section{
  margin-top:8px;
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  overflow:hidden;
  background:var(--bg-2);
}
.archived-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;cursor:pointer;
  transition:background 0.15s;
  user-select:none;
}
.archived-header:hover{background:var(--bg-hover);}
.archived-title{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2);}
.archived-title i.ph-archive{font-size:18px;color:var(--text-3);}
.archived-count{
  background:var(--bg-3);color:var(--text-2);
  padding:2px 10px;border-radius:100px;font-size:12px;font-weight:600;
}
.archived-summary{font-size:12px;color:var(--text-3);}
.archived-caret{font-size:16px;color:var(--text-3);transition:transform 0.2s;}
.archived-list{display:none;}
.archived-list.expanded{
  display:flex;flex-direction:column;gap:2px;
  padding:4px 8px 8px;
  border-top:1px solid var(--border);
}
.archived-list.expanded .archived-caret{transform:rotate(180deg);}
.archived-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--radius-s);
  cursor:pointer;transition:background 0.1s;
}
.archived-item:hover{background:var(--bg-hover);}
.archived-item i[data-s="frozen"]{color:var(--text-3);font-size:16px;}
.archived-item i[data-s="done"]{color:var(--accent-blue);font-size:16px;}
.archived-name{font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap;}
.archived-tag{
  font-size:10px;padding:2px 8px;border-radius:100px;
  background:var(--bg-3);color:var(--text-3);flex-shrink:0;
}
.archived-desc{
  font-size:12px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-left:auto;max-width:300px;
}

/* List view */
.projects-grid.list-mode .proj-card{
  display:grid;grid-template-columns:40px 1fr auto;
  align-items:center;gap:16px;padding:14px 20px;
}
.projects-grid.list-mode .proj-top{display:contents;}
.projects-grid.list-mode .proj-desc,
.projects-grid.list-mode .proj-tags,
.projects-grid.list-mode .proj-meta{display:none;}
.projects-grid.list-mode .proj-name{margin-bottom:0;grid-column:span 1;}

/* ═══════════════════════════
   TODO PAGE
   ═══════════════════════════ */
.todo-list {
  display: flex; flex-direction: column; gap: 8px; max-width: 800px;
}
.td-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-s); transition: all 0.2s;
}
.td-item:hover { border-color: var(--border-2); }
.td-left { display: flex; align-items: center; gap: 12px; flex: 1; }
.td-chk {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border: 2px solid var(--text-3);
  border-radius: 6px; cursor: pointer; transition: all 0.15s; position: relative;
  flex-shrink: 0;
}
.td-chk:checked { background: var(--accent-blue); border-color: var(--accent-blue); }
.td-chk:checked::after {
  content: '✓'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); color: #fff; font-size: 12px; font-weight: 700;
}
.td-content { flex: 1; }
.td-title { font-size: 14px; font-weight: 500; color: var(--text-1); transition: color 0.2s; }
.td-item.done .td-title { color: var(--text-3); text-decoration: line-through; }
.td-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text-3); margin-top: 4px; }
.td-meta span { display: inline-flex; align-items: center; gap: 4px; }
.td-priority { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 100px; border: 1px solid var(--border); }
.td-priority[data-p="high"] { color: var(--accent-red); background: var(--accent-red-g); border-color: rgba(248,113,113,0.3); }
.td-priority[data-p="medium"] { color: var(--accent-amber); background: var(--accent-amber-g); border-color: rgba(251,191,36,0.3); }
.td-priority[data-p="low"] { color: var(--accent-green); background: var(--accent-green-g); border-color: rgba(52,211,153,0.3); }

.td-del {
  background: transparent; border: none; color: var(--text-3); cursor: pointer;
  padding: 8px; border-radius: 6px; transition: all 0.15s; font-size: 16px;
}
.td-del:hover { color: var(--accent-red); background: var(--accent-red-g); }

/* Project detail todo check (icon-based) */
.td-check {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--text-3);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; transition: all 0.15s; background: transparent;
}
.td-check i { font-size: 12px; color: transparent; transition: color 0.15s; }
.td-item.done .td-check { background: var(--accent-green); border-color: var(--accent-green); }
.td-item.done .td-check i { color: #fff; }
.td-check:hover { border-color: var(--accent-green); }
.td-check-placeholder { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.td-edit-btn {
  background: transparent; border: none; color: var(--text-3); cursor: pointer;
  padding: 6px; border-radius: 6px; transition: all 0.15s; font-size: 14px;
}
.td-edit-btn:hover { color: var(--accent-blue); background: var(--accent-blue-g); }
.td-quick-date {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; color: var(--text-2); background: var(--bg-input); cursor: pointer;
  flex-shrink: 0;
}

/* ═══════════════════════════
   CALENDAR PAGE
   ═══════════════════════════ */
.calendar-wrapper {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-l);
  overflow: hidden; max-width: 1000px;
}
.calendar-header {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: 12px; font-weight: 600; color: var(--text-3); background: var(--bg-3);
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); auto-rows: minmax(100px, auto);
}
.cal-day {
  min-height: 100px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 8px; position: relative; transition: background 0.2s;
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: var(--bg-hover); }
.cal-day.other-month { opacity: 0.3; }
.cal-day.today .cal-date { background: var(--accent-blue); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cal-date { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.cal-events { display: flex; flex-direction: column; gap: 4px; }
.cal-evt {
  font-size: 10px; padding: 3px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--bg-3); color: var(--text-1); border-left: 2px solid var(--accent-blue);
}
.cal-evt.todo { border-left-color: var(--accent-green); background: var(--accent-green-g); }
.cal-evt.proj { border-left-color: var(--accent-purple); background: var(--accent-purple-g); }


/* ═══════════════════════════
   NEWS FEED PAGE
   ═══════════════════════════ */
.news-feed{display:flex;flex-direction:column;gap:12px;}
.news-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-m);transition:all 0.2s;
  text-decoration:none;
}
.news-item:hover{border-color:var(--border-2);transform:translateY(-1px);}
.news-title{font-size:14px;font-weight:600;color:var(--text-1);margin-bottom:6px;line-height:1.4;}
.news-meta{font-size:11px;color:var(--text-3);display:flex;gap:12px;align-items:center;}
.news-meta i{font-size:13px;vertical-align:middle;margin-right:4px;}
.news-score{color:var(--accent-red);}

.loader {
  border: 3px solid var(--border);
  border-top: 3px solid var(--accent-blue);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


/* ═══════════════════════════
   NOTES PAGE
   ═══════════════════════════ */
.notes-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;}
.note-card{
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-m);padding:18px;
  transition:all 0.2s;animation:fadeUp 0.3s var(--ease) both;
}
.note-card:hover{border-color:var(--border-2);}
.note-proj{font-size:11px;font-weight:600;color:var(--accent-blue);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.note-body{font-size:13px;color:var(--text-2);line-height:1.6;margin-bottom:10px;white-space:pre-wrap;}
.note-foot{display:flex;align-items:center;justify-content:space-between;}
.note-time{font-size:11px;color:var(--text-3);font-family:var(--mono);}
.note-del{
  background:none;border:none;font-size:12px;color:var(--text-3);
  cursor:pointer;padding:4px 8px;border-radius:4px;transition:all 0.1s;
}
.note-del:hover{color:var(--accent-red);background:var(--accent-red-g);}

/* ═══════════════════════════
   POMODORO
   ═══════════════════════════ */
.pomo-container{
  display:flex;flex-direction:column;align-items:center;
  padding:20px 0;
}
.pomo-ring-wrap{position:relative;width:260px;height:260px;margin-bottom:28px;}
.pomo-ring{width:100%;height:100%;}
.pomo-center{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.pomo-time{font-size:48px;font-weight:800;font-family:var(--mono);letter-spacing:-2px;}
.pomo-label{font-size:13px;color:var(--text-3);margin-top:4px;}

.pomo-controls{display:flex;gap:12px;margin-bottom:24px;}
.pomo-btn{
  padding:10px 28px;border-radius:var(--radius-s);
  font-size:14px;font-weight:600;cursor:pointer;
  border:none;transition:all 0.15s;
}
.pomo-btn.primary{background:var(--accent-blue);color:#fff;}
.pomo-btn.primary:hover{filter:brightness(1.1);}
.pomo-btn.secondary{background:var(--bg-3);color:var(--text-2);border:1px solid var(--border);}
.pomo-btn.secondary:hover{border-color:var(--border-2);color:var(--text-1);}

.pomo-presets{display:flex;gap:8px;margin-bottom:28px;}
.pomo-preset{
  padding:6px 16px;border:1px solid var(--border);
  border-radius:100px;background:transparent;
  color:var(--text-3);font-size:12px;font-weight:500;
  cursor:pointer;transition:all 0.15s;
}
.pomo-preset:hover{border-color:var(--border-2);color:var(--text-2);}
.pomo-preset.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff;}

.pomo-stats{display:flex;gap:40px;}
.pomo-stat{display:flex;flex-direction:column;align-items:center;gap:4px;}
.pomo-stat-num{font-size:24px;font-weight:800;color:var(--accent-blue);}
.pomo-stat span:last-child{font-size:12px;color:var(--text-3);}


/* ═══════════════════════════
   FINANCIAL RUNWAY
   ═══════════════════════════ */
.runway-dashboard{max-width:600px;}
.runway-big-number{
  text-align:center;padding:40px 20px;
  margin-bottom:16px;
}
.rbn-value{font-size:80px;font-weight:900;color:var(--accent-green);line-height:1;letter-spacing:-4px;}
.rbn-label{font-size:16px;color:var(--text-3);margin-top:8px;}

.runway-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.ri-item label{display:block;font-size:12px;color:var(--text-3);margin-bottom:4px;}
.ri-item input{
  width:100%;padding:8px 12px;background:var(--bg-input);
  border:1px solid var(--border);border-radius:var(--radius-s);
  color:var(--text-1);font-size:14px;outline:none;
  font-family:var(--mono);
}
.ri-item input:focus{border-color:var(--accent-blue);}

.runway-result{
  padding-top:16px;border-top:1px solid var(--border);
}
.rr-row{
  display:flex;justify-content:space-between;
  padding:8px 0;font-size:14px;
}
.rr-row span{color:var(--text-3);}
.rr-row strong{color:var(--text-1);}

/* ═══════════════════════════
   SETTINGS
   ═══════════════════════════ */
.settings-cards{max-width:600px;}
.setting-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--border);
  gap:16px;
}
.setting-row:last-child{border-bottom:none;}
.setting-label{font-size:14px;font-weight:600;}
.setting-desc{font-size:12px;color:var(--text-3);margin-top:2px;}
.danger-row .setting-label{color:var(--accent-red);}

.toggle-btn{
  width:44px;height:24px;border-radius:12px;
  background:var(--bg-3);border:1px solid var(--border);
  cursor:pointer;position:relative;
  transition:all 0.2s;flex-shrink:0;
}
.toggle-btn.on{background:var(--accent-blue);border-color:var(--accent-blue);}
.toggle-knob{
  position:absolute;top:2px;left:2px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform 0.2s;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.toggle-btn.on .toggle-knob{transform:translateX(20px);}

.about-info{font-size:13px;color:var(--text-2);line-height:1.8;}
.about-info strong{color:var(--text-1);}

/* ═══════════════════════════
   MODALS
   ═══════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;visibility:hidden;transition:all 0.2s;
}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal{
  width:100%;max-width:480px;
  background:var(--bg-2);border:1px solid var(--border-2);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-l);
  transform:scale(0.95) translateY(8px);transition:transform 0.3s var(--ease);
  max-height:85vh;overflow-y:auto;
}
.modal-lg{max-width:600px;}
.modal-overlay.open .modal{transform:scale(1) translateY(0);}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--border);
}
.modal-header h3{font-size:17px;font-weight:700;}
.modal-x{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:6px;
  color:var(--text-3);font-size:20px;cursor:pointer;transition:all 0.15s;
}
.modal-x:hover{background:var(--accent-red-g);color:var(--accent-red);}
.modal-body{padding:22px;}
.fg{margin-bottom:14px;}
.fg label{display:block;font-size:12px;font-weight:600;color:var(--text-3);margin-bottom:5px;}
.fg input,.fg select,.fg textarea{
  width:100%;padding:9px 12px;background:var(--bg-input);
  border:1px solid var(--border);border-radius:var(--radius-s);
  color:var(--text-1);font-size:13px;outline:none;
  transition:border-color 0.15s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent-blue);}
.fg textarea{resize:vertical;min-height:70px;}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* Detail Modal */
.detail-grid{display:flex;flex-direction:column;gap:0;}
.detail-row{
  display:flex;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--border);
}
.detail-row:last-child{border-bottom:none;}
.detail-k{font-size:12px;color:var(--text-3);min-width:70px;font-weight:500;padding-top:1px;}
.detail-v{font-size:13px;color:var(--text-1);word-break:break-all;}
.detail-v code{font-family:var(--mono);font-size:12px;color:var(--accent-cyan);}
.detail-actions{display:flex;gap:8px;margin-top:16px;}
.detail-actions .outline-btn{flex:1;text-align:center;}

/* ─── Toast ─── */
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:600;display:flex;flex-direction:column;gap:8px;}
.toast{
  padding:11px 18px;background:var(--bg-3);border:1px solid var(--border-2);
  border-radius:var(--radius-m);font-size:13px;font-weight:500;
  box-shadow:var(--shadow-m);animation:toastIn 0.3s var(--ease);
}
.toast.success{border-left:3px solid var(--accent-green);}
.toast.error{border-left:3px solid var(--accent-red);}
.toast.info{border-left:3px solid var(--accent-blue);}
@keyframes toastIn{from{opacity:0;transform:translateY(8px) scale(.95);}to{opacity:1;transform:none;}}

/* ─── Sidebar Overlay (mobile) ─── */
.sidebar-overlay{
  position:fixed;inset:0;z-index:190;
  background:rgba(0,0,0,0.5);
  opacity:0;visibility:hidden;transition:all 0.3s;
}
.sidebar-overlay.show{opacity:1;visibility:visible;}

/* ─── Empty ─── */
.empty{
  text-align:center;padding:48px 20px;color:var(--text-3);
  grid-column:1/-1;
}
.empty-icon{font-size:40px;margin-bottom:8px;opacity:.5;}

/* ═══════════════════════════
   UX UPGRADES (v5.1)
   ═══════════════════════════ */

/* Schedule View */
.schedule-layout { display: flex; flex-direction: column; gap: 20px; }
.cal-day { position: relative; cursor: pointer; }
.cal-day .cal-add {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; opacity: 0; transition: opacity 0.15s;
  border: none; cursor: pointer; z-index: 2;
}
.cal-day:hover .cal-add { opacity: 1; }
.cal-day.selected { background: var(--accent-blue-g); border-color: rgba(91,141,239,0.3); }

.cal-evt { cursor: pointer; transition: all 0.15s; }
.cal-evt:hover { filter: brightness(1.2); transform: scale(1.02); }

.schedule-day-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.schedule-day-title { font-size: 16px; font-weight: 700; }
.schedule-day-title span { color: var(--accent-blue); }

/* Drag and Drop */
[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }
.dragging {
  opacity: 0.4;
  border: 2px dashed var(--accent-blue) !important;
  background: var(--accent-blue-g) !important;
}
.drag-over {
  border-top: 2px solid var(--accent-blue) !important;
}
.drag-handle {
  color: var(--text-3); font-size: 16px;
  cursor: grab; padding: 4px;
  opacity: 0; transition: opacity 0.15s;
}
.td-item:hover .drag-handle,
.proj-card:hover .drag-handle,
.dash-col-right .card:hover .drag-handle { opacity: 0.6; }
.drag-handle:hover { opacity: 1 !important; color: var(--text-2); }

/* Dictionary UI */
.dict-manager { margin-top: 16px; }
.dict-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dict-header h4 { font-size: 14px; font-weight: 600; color: var(--text-1); }
.dict-list { display: flex; flex-direction: column; gap: 8px; }
.dict-item { display: flex; align-items: center; justify-content: space-between; background: var(--bg-2); padding: 10px 16px; border-radius: var(--radius-s); font-size: 13px; }
.dict-item-info { display: flex; align-items: center; gap: 10px; color: var(--text-1); font-weight: 500; }
.dict-item-info i { font-size: 16px; color: var(--text-3); }
.dict-item-actions { display: flex; gap: 8px; }
.dict-item-actions button { background: none; border: none; color: var(--text-3); cursor: pointer; transition: color 0.2s; }
.dict-item-actions button:hover { color: var(--accent-red); }

.suggested-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tag-chip { background: var(--bg-3); border: 1px solid var(--border); padding: 4px 10px; border-radius: 12px; font-size: 12px; cursor: pointer; color: var(--text-2); transition: all 0.2s; }
.tag-chip:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: var(--accent-blue-g); }

/* Undo Toast */
.toast .undo-btn {
  background: none; border: none;
  color: var(--accent-blue); font-weight: 600;
  font-size: 12px; cursor: pointer;
  margin-left: 12px; text-decoration: underline;
}
.toast .undo-btn:hover { color: var(--accent-cyan); }

/* Animations */
.stat-number { transition: all 0.3s var(--ease); }

/* Empty CTA */
.empty .empty-cta {
  margin-top: 12px; display: inline-flex;
  align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius-s);
  background: var(--accent-blue-g); border: 1px solid rgba(91,141,239,0.2);
  color: var(--accent-blue); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.empty .empty-cta:hover { background: rgba(91,141,239,0.2); transform: translateY(-1px); }

/* Todo Edit */
.td-item .td-edit {
  background: transparent; border: none; color: var(--text-3); cursor: pointer;
  padding: 8px; border-radius: 6px; transition: all 0.15s; font-size: 16px;
}
.td-item .td-edit:hover { color: var(--accent-blue); background: var(--accent-blue-g); }
.td-actions { display: flex; gap: 4px; align-items: center; }

/* ═══════════════════════════
   RESPONSIVE
   ═══════════════════════════ */
@media(max-width:1024px){
  /* Bento Grid Responsive <= 1024px */
  .bento-stats { grid-column: span 6; }
  .bento-pulse { grid-column: span 6; }
  .bento-focus { grid-column: span 12; }
  .bento-note { grid-column: span 12; grid-row: auto; }
  .bento-sprint { grid-column: span 12; }
}

@media(max-width:768px){
  .sidebar{
    transform:translateX(-100%);
    width:280px;
    z-index:210;
  }
  .sidebar.mobile-open{transform:translateX(0);}
  .main{margin-left:0 !important;}
  .hamburger{display:flex;}
  .search-trigger span{display:none;}
  .search-trigger{min-width:auto;}
  .view{padding:20px 16px 40px;}
  .fg-row{grid-template-columns:1fr;}
  .runway-inputs{grid-template-columns:1fr;}

  /* Bento Grid Responsive <= 768px */
  .bento-grid {
    display: flex;
    flex-direction: column;
  }
  .bento-card {
    grid-column: span 12 !important;
    grid-row: auto !important;
  }
  /* SaaS 订阅页面响应式 */
  #subAnalytics{grid-template-columns:1fr 1fr !important;}
}

@media(max-width:480px){
  .stat-card{padding:14px;flex-direction:column;align-items:flex-start;gap:8px;}
  .stat-icon{display:none;}
  .sprint-phases{grid-template-columns:repeat(2,1fr);}
  .pomo-ring-wrap{width:220px;height:220px;}
  .pomo-time{font-size:40px;}
  .projects-grid{grid-template-columns:1fr;}
  #subAnalytics{grid-template-columns:1fr !important;}
}

/* ═══════════════════════════
   ZEN MODE
   ═══════════════════════════ */
body.zen-mode .sidebar {
  display: none !important;
}
body.zen-mode .topbar {
  display: none !important;
}
body.zen-mode .main {
  margin-left: 0 !important;
}
body.zen-mode .bento-stats,
body.zen-mode .bento-focus,
body.zen-mode .bento-sprint {
  opacity: 0.3;
  transition: opacity 0.3s;
}
body.zen-mode .bento-stats:hover,
body.zen-mode .bento-focus:hover,
body.zen-mode .bento-sprint:hover {
  opacity: 1;
}
body.zen-mode .bento-pulse,
body.zen-mode .bento-note {
  transform: scale(1.02);
  z-index: 10;
}
body.zen-mode .dash-hero {
  padding: 20px 30px;
}
.zen-exit-btn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 14px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: var(--shadow-l);
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}
body.zen-mode .zen-exit-btn {
  display: flex;
}
.zen-exit-btn:hover {
  background: var(--bg-2);
  transform: translateY(-2px);
}

/* ═══════════════════════════
   PREMIUM GLASSMORPHISM BENTO DASHBOARD
   ═══════════════════════════ */

/* 1. Dashboard Hero */
.dash-hero {
  position: relative; 
  overflow: hidden; 
  border-radius: 24px; 
  padding: 24px 28px; 
  margin-bottom: 20px;
}
.mesh-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(45deg, #e0f2fe, #ede9fe, #dbeafe);
  background-size: 400% 400%;
  animation: meshFlow 15s ease infinite;
}
@keyframes meshFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero-content {
  position: relative; 
  z-index: 1;
}
.hero-content h1 {
  font-size: 28px; 
  font-weight: 700;
  color: #1e293b;
}
.hero-sub {
  font-size: 14px; 
  color: #475569;
  margin-top: 8px;
}
.hero-clock {
  font-size: 32px;
  font-weight: 800;
  color: #1e293b;
  margin-top: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
}
.hero-date {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}

.hero-actions {
  position: absolute; 
  top: 32px; 
  right: 32px; 
  display: flex; 
  gap: 16px;
  z-index: 2;
}
.zen-btn {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 14px;
  border-radius: 50px;
  padding: 8px 16px;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.3s ease;
}
.zen-btn:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.8);
}
.status-badge {
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: #1e293b;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* 2. Bento Grid */
.bento-grid {
  display: grid; 
  grid-template-columns: repeat(12, 1fr); 
  gap: 16px;
}
.bento-card {
  background: var(--bg-2); 
  border: 1px solid var(--border); 
  border-radius: 20px; 
  padding: 20px; 
  display: flex; 
  flex-direction: column; 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glass-card {
  background: rgba(255, 255, 255, 0.4); 
  backdrop-filter: blur(20px); 
  -webkit-backdrop-filter: blur(20px); 
  border: 1px solid rgba(0, 0, 0, 0.05); 
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.bento-card:hover {
  transform: translateY(-4px); 
  box-shadow: 0 12px 40px rgba(0,0,0, 0.1);
}
.bento-stats { grid-column: span 4; }
.bento-pulse { grid-column: span 8; }
.bento-focus { grid-column: span 8; }
.bento-note { grid-column: span 4; }
.bento-sprint { grid-column: span 8; }

/* Stats Mini Grid */
.stats-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: center;
  height: 100%;
}
.sm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.sm-item i {
  font-size: 20px;
  padding: 8px;
  border-radius: 10px;
}
.sm-item[data-accent="blue"] i { color: var(--accent-blue); background: var(--accent-blue-g); }
.sm-item[data-accent="green"] i { color: var(--accent-green); background: var(--accent-green-g); }
.sm-item[data-accent="amber"] i { color: var(--accent-amber); background: var(--accent-amber-g); }
.sm-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.sm-label {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.2;
  white-space: nowrap;
}

/* 3. Pulse Tracker */
.quote-display {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: 8px 0;
}
.quote-text-large {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--text-1);
  margin-bottom: 12px;
}
.quote-attr {
  font-size: 14px;
  color: var(--text-2);
  font-weight: 500;
}
.quote-src {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 400;
  margin-left: 4px;
}

/* Streak Badge */
.streak-badge {
  border-radius: 50px;
  display: flex; 
  gap: 4px; 
  align-items: center;
  color: var(--accent-amber);
  background: var(--accent-amber-g);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}


/* ═══════════════════════════
   QUICK ADD & HEALTH DASHBOARD (v5.2)
   ═══════════════════════════ */

/* Todo Quick Add */
.td-quick-add{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg-2);border:1px dashed var(--border-2);border-radius:var(--radius-s);transition:border-color 0.2s var(--ease);}
.td-quick-add:focus-within{border-style:solid;border-color:var(--accent-blue);}
.td-quick-input{flex:1;background:transparent;border:none;outline:none;color:var(--text-1);font-size:13px;}
.td-quick-input::placeholder{color:var(--text-3);}
.td-quick-priority{padding:3px 8px;background:var(--bg-3);border:1px solid var(--border);border-radius:100px;color:var(--text-2);font-size:11px;font-weight:600;cursor:pointer;outline:none;transition:all 0.15s;}
.td-quick-priority:hover{border-color:var(--border-2);color:var(--text-1);}

/* Note Quick Add */
.note-quick-add{margin-top:8px;}
.note-quick-trigger{padding:10px 14px;border:1px dashed var(--border-2);border-radius:var(--radius-s);color:var(--text-3);font-size:13px;cursor:pointer;transition:all 0.2s var(--ease);text-align:center;}
.note-quick-trigger:hover{border-color:var(--accent-blue);color:var(--accent-blue);background:var(--accent-blue-g);}
.note-quick-editor{margin-top:8px;}
.note-quick-editor textarea{width:100%;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-s);color:var(--text-1);font-size:13px;resize:vertical;min-height:70px;outline:none;transition:border-color 0.15s;}
.note-quick-editor textarea:focus{border-color:var(--accent-blue);}
.note-quick-actions{display:flex;gap:8px;margin-top:8px;justify-content:flex-end;}

/* Ring Progress */
.ring-progress-wrap{position:relative;width:120px;height:120px;flex-shrink:0;}
.ring-progress{width:100%;height:100%;}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-num{font-size:24px;font-weight:800;color:var(--text-1);line-height:1;}
.ring-label{font-size:11px;color:var(--text-3);margin-top:2px;}

/* Health Badge */
.health-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px;font-size:11px;font-weight:600;background:var(--bg-3);border:1px solid var(--border);}
.health-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.health-badge[data-state="healthy"]{color:var(--accent-green);background:var(--accent-green-g);border-color:rgba(52,211,153,0.3);}
.health-badge[data-state="healthy"] .health-dot{background:var(--accent-green);}
.health-badge[data-state="risk"]{color:var(--accent-red);background:var(--accent-red-g);border-color:rgba(248,113,113,0.3);}
.health-badge[data-state="risk"] .health-dot{background:var(--accent-red);animation:pulse 2s ease-in-out infinite;}
.health-badge[data-state="stale"]{color:var(--accent-amber);background:var(--accent-amber-g);border-color:rgba(251,191,36,0.3);}
.health-badge[data-state="stale"] .health-dot{background:var(--accent-amber);}
.health-badge[data-state="normal"]{color:var(--accent-blue);background:var(--accent-blue-g);border-color:rgba(91,141,239,0.3);}
.health-badge[data-state="normal"] .health-dot{background:var(--accent-blue);}

/* Health Dashboard */
.health-dashboard{display:flex;align-items:center;gap:24px;padding:20px;}
.health-metrics{flex:1;display:flex;flex-direction:column;gap:12px;}
.hm-row{display:flex;align-items:center;gap:12px;}
.hm-label{width:80px;font-size:12px;color:var(--text-3);flex-shrink:0;}
.hm-bar-wrap{flex:1;height:6px;background:var(--bg-input);border-radius:6px;overflow:hidden;}
.hm-bar{height:100%;background:var(--accent-green);border-radius:6px;transition:width 0.6s var(--ease);}
.hm-value{font-size:13px;font-weight:700;color:var(--text-1);min-width:40px;text-align:right;}
.hm-risk[data-risk="high"]{color:var(--accent-red);}

/* Editable Hint */
.editable-hint{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-3);opacity:0;transition:opacity 0.15s;}
*:hover > .editable-hint{opacity:0.7;}
.editable-hint i{font-size:13px;}

/* Status Quick Toggle */
.status-quick-toggle{display:inline-flex;gap:4px;padding:4px;background:var(--bg-3);border:1px solid var(--border);border-radius:100px;}
.status-quick-toggle button{padding:4px 12px;border:none;background:transparent;border-radius:100px;color:var(--text-3);font-size:11px;font-weight:600;cursor:pointer;transition:all 0.15s;}
.status-quick-toggle button:hover{color:var(--text-1);}
.status-quick-toggle button.active{background:var(--accent-blue);color:#fff;}

/* Contenteditable */
[contenteditable]:focus{outline:none;background:var(--accent-blue-g);border-radius:var(--radius-s);box-shadow:0 0 0 2px rgba(91,141,239,0.2);}