style.css

:root{
  --bg-1: linear-gradient(135deg,#0f172a 0%, #0b3b5a 60%);
  --card-bg: rgba(255,255,255,0.95);
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-2: #7c3aed;
  --glass: rgba(255,255,255,0.06);
  --radius: 12px;
  --shadow: 0 8px 30px rgba(2,6,23,0.5);
}

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial;
  background:var(--bg-1);
  color:#0b1220;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  color:white;
}
.logo{font-weight:700;font-size:18px}
.nav{display:flex;gap:16px}
.nav a{color:rgba(255,255,255,0.9);text-decoration:none;padding:8px;border-radius:8px;transition:background .18s}
.nav a:hover{background:rgba(255,255,255,0.06)}
.header-controls{display:flex;gap:8px}
.hamburger{display:none;background:transparent;border:none;color:white;font-size:20px}
#themeToggle{background:rgba(255,255,255,0.08);border:none;padding:8px;border-radius:8px;color:white;cursor:pointer}

.site-main{max-width:1100px;margin:28px auto;padding:0 18px}
.hero{background:linear-gradient(120deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));padding:36px;border-radius:16px;color:white;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
/* Design system variables as specified */
:root{
  --bg: #0a0d14;
  --surface: #111520;
  --surface-2: #181d2e;
  --border: rgba(255,255,255,0.07);
  --accent: #4f8cff;
  --accent-glow: rgba(79,140,255,0.18);
  --accent-2: #a78bfa;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --text: #e8ecf4;
  --text-muted: #6b7280;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --sidebar-width: 220px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'DM Sans',system-ui,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Layout */
.sidebar{
  width:var(--sidebar-width);
  position:fixed;left:0;top:0;bottom:0;padding:20px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,var(--surface),var(--surface-2));border-right:1px solid var(--border);
}
.sidebar-logo{font-family:'Fraunces',serif;font-weight:700;font-size:20px;color:var(--text);margin-bottom:6px}
.sidebar-logo .accent{color:var(--accent)}

.sidebar-nav{display:flex;flex-direction:column;gap:8px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:transparent;border:none;color:var(--text);cursor:pointer;text-align:left;transition:background .2s}
.nav-item span{font-weight:500}
.nav-item:hover{background:rgba(255,255,255,0.02)}
.nav-item.active{background:linear-gradient(90deg, rgba(79,140,255,0.06), transparent);box-shadow:0 0 0 3px var(--accent-glow) inset}
.nav-item.active::before{content:'';width:4px;height:36px;background:var(--accent);border-radius:4px;margin-right:8px}

.sidebar-footer{padding-top:12px}
.mini-stats{display:flex;gap:10px}
.mini-stats .stat{display:flex;flex-direction:column;align-items:flex-start}
.stat-val{font-weight:700}
.stat-label{font-size:12px;color:var(--text-muted)}

.main-content{margin-left:var(--sidebar-width);padding:20px;height:100vh;overflow:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.greeting .greet-text{font-family:'Fraunces',serif;font-weight:700;font-size:18px}
.greet-sub{color:var(--text-muted);font-size:13px}

.quick-add{display:flex;gap:8px;align-items:center}
.quick-add input{padding:8px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);min-width:220px}
.quick-add select{padding:8px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text)}
.quick-add button{padding:8px 12px;border-radius:10px;border:none;background:var(--accent);color:white;cursor:pointer}

.sections-container{display:block}
.app-section{opacity:0;transform:translateY(12px);transition:opacity .25s ease, transform .25s ease;padding-bottom:60px;pointer-events:none}
.app-section.active{opacity:1;transform:none;pointer-events:all}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;box-shadow:0 0 0 1px var(--border), 0 8px 40px rgba(0,0,0,0.4);transition:transform .2s ease, box-shadow .2s ease}
.section-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:16px}
.overview .welcome{display:flex;align-items:center;gap:12px}
.stats-row{display:flex;gap:12px;margin-top:12px}
.stat-card{flex:1;padding:12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);text-align:center}
.stat-card .num{font-weight:700;font-size:20px}
.mini-cards .mini-actions{display:flex;gap:8px}

/* Quote card flip */
.quote-card .quote{min-height:80px;display:flex;flex-direction:column;justify-content:center}
.flip{transition:transform .6s;transform-style:preserve-3d}
.quote-controls{display:flex;gap:8px;margin-top:10px}

/* Tasks */
.tasks-card .task-controls{display:flex;gap:8px;align-items:center}
.tasks-card input,.tasks-card select{padding:8px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text)}
.tasks-card .task-filters{display:flex;gap:8px;margin-top:12px}
.tasks-card .filter{padding:6px 8px;border-radius:8px;border:none;background:transparent;color:var(--text-muted);cursor:pointer}
.tasks-card .filter.active{background:linear-gradient(90deg, rgba(79,140,255,0.06), transparent);color:var(--text)}
.task-list{list-style:none;padding:0;margin:12px 0}
.task-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);animation:taskIn .35s ease forwards}
.task-meta{display:flex;gap:8px;align-items:center}
.task-priority.high{color:var(--danger)}
.task-priority.medium{color:var(--warning)}
.task-priority.low{color:var(--success)}
.task-item.completed{opacity:0.8;text-decoration:line-through;color:rgba(200,200,200,0.6);transform:scale(.99)}
.empty-state{color:var(--text-muted);padding:18px;text-align:center}

/* Timer ring */
.timer-wrap{display:flex;gap:20px;align-items:center}
.ring{width:180px;height:180px;position:relative}
.ring svg{width:100%;height:100%}
.ring .ring-bg{fill:none;stroke:rgba(255,255,255,0.04);stroke-width:10}
.ring .ring-progress{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;transform-origin:60px 60px;transition:stroke-dashoffset 0.3s linear}
.timer-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.timer-center #timerDisplay{font-family:'Fraunces',serif;font-weight:700;font-size:20px}
.session-dots{margin-top:6px;display:flex;gap:6px}
.session-dots .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.08)}
.session-dots .dot.active{background:var(--accent)}
.ring.running{animation:ringPulse 1.8s infinite}

/* Planner */
.planner-controls{display:flex;gap:8px}
.plan-steps{margin-top:12px}
.plan-step{display:flex;align-items:center;gap:8px;padding:10px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);margin-bottom:8px}

/* Achievements */
.xp-wrap{display:flex;flex-direction:column;gap:8px}
.xp-bar{background:rgba(255,255,255,0.03);height:12px;border-radius:8px}
.xp-progress{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:8px;transition:width .4s}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.badge{width:100px;height:100px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);display:flex;align-items:center;justify-content:center;flex-direction:column;filter:none;transition:transform .25s}
.badge.locked{filter:grayscale(1) blur(0.6px);opacity:.6}

/* Analytics */
.weekly-chart{display:flex;gap:8px;align-items:end;height:80px;margin-top:12px}
.weekly-chart .bar{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:6px;opacity:.9}
.streak-heatmap{display:flex;gap:6px;margin-top:10px}
.heat-day{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,0.03)}

/* Settings */
.settings-row{margin-bottom:10px}
.settings-row input,.settings-row select{padding:8px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text)}
.settings-row.danger button{background:var(--danger);color:white;border:none;padding:8px;border-radius:8px}

/* Toasts */
#toastContainer{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:1200}
.toast{background:linear-gradient(180deg,rgba(0,0,0,0.6),rgba(0,0,0,0.5));padding:12px;border-radius:10px;color:var(--text);animation:toastSlide .35s ease}

/* Scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.06));border-radius:10px;border:2px solid transparent;background-clip:padding-box}

/* Animations from spec */
@keyframes taskIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes badgePop{0%{transform:scale(0.7);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes toastSlide{from{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes ringPulse{0%,100%{filter:drop-shadow(0 0 6px var(--accent))}50%{filter:drop-shadow(0 0 18px var(--accent))}}

/* Responsive: collapse sidebar to bottom tabs on small screens */
@media(max-width:768px){
  .sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:64px;width:100%;display:flex;flex-direction:row;align-items:center;padding:8px;justify-content:space-around}
  .main-content{margin-left:0;margin-bottom:64px}
  .section-grid{grid-template-columns:1fr}
}