/* ============================================================
   TASKFLOW v3 – style.css
   Full-stack Task Manager  ·  Dark + Light Mode  ·  Auth UI
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS – DARK MODE (default)
════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg-base:       #080612;
  --bg-surface:    rgba(255,255,255,0.03);
  --bg-card:       rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.07);
  --bg-input:      rgba(255,255,255,0.04);
  --bg-overlay:    rgba(6,4,15,0.88);

  /* Borders */
  --border:        rgba(255,255,255,0.09);
  --border-input:  rgba(150,100,255,0.45);
  --border-focus:  rgba(160,100,255,0.85);
  --border-glow:   rgba(155,93,229,0.5);

  /* Brand */
  --accent:        #9b5de5;
  --accent-light:  #c084fc;
  --accent-2:      #f472b6;
  --accent-grad:   linear-gradient(135deg, #9b5de5, #7c3aed);
  --accent-grad-h: linear-gradient(135deg, #a96ef8, #8b5cf6);

  /* Text */
  --text-primary:   #f0eeff;
  --text-secondary: #a993cc;
  --text-muted:     #5b4f80;
  --text-placeholder: rgba(160,130,210,0.4);

  /* Priority */
  --high:        #ef4444;  --high-bg:    rgba(239,68,68,0.15);   --high-border:   rgba(239,68,68,0.4);
  --medium:      #f59e0b;  --medium-bg:  rgba(245,158,11,0.13);  --medium-border: rgba(245,158,11,0.35);
  --low:         #10b981;  --low-bg:     rgba(16,185,129,0.13);  --low-border:    rgba(16,185,129,0.35);

  /* Status */
  --success:     #10b981;
  --danger:      #ef4444;
  --danger-soft: rgba(239,68,68,0.12);

  /* Radii + Transitions */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px;
  --ease: 0.25s cubic-bezier(0.4,0,0.2,1);

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-btn:  0 4px 20px rgba(120,60,220,0.5);
}

/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS – LIGHT MODE
════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg-base:       #f5f3ff;
  --bg-surface:    rgba(0,0,0,0.03);
  --bg-card:       #ffffff;
  --bg-card-hover: #f0ebff;
  --bg-input:      #ffffff;
  --bg-overlay:    rgba(240,237,255,0.92);

  --border:        rgba(150,100,220,0.18);
  --border-input:  rgba(130,80,200,0.4);
  --border-focus:  rgba(130,80,200,0.7);
  --border-glow:   rgba(130,80,200,0.35);

  --text-primary:   #1a1030;
  --text-secondary: #5e4b8a;
  --text-muted:     #a994cc;
  --text-placeholder: rgba(120,90,180,0.4);

  --bg-overlay:    rgba(245,243,255,0.6);
  --shadow-card:   0 2px 16px rgba(120,60,220,0.12);
  --shadow-btn:    0 4px 20px rgba(120,60,220,0.35);

  /* Keep accent same */
}

[data-theme="light"] .stars-layer,
[data-theme="light"] .nebula { opacity: 0; pointer-events: none; }

[data-theme="light"] body { background: var(--bg-base); }

/* ════════════════════════════════════════════════════════════
   BASE
════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--ease), color var(--ease);
}

/* ════════════════════════════════════════════════════════════
   STARFIELD (dark only)
════════════════════════════════════════════════════════════ */
.stars-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.stars-sm::before {
  content: ''; display: block; position: absolute; inset: 0;
  width: 2px; height: 2px; border-radius: 50%; background: transparent;
  box-shadow:
    120px 40px #fff, 250px 80px #fff, 400px 30px #fff, 550px 90px #fff,
    700px 50px #fff, 850px 10px #fff, 980px 70px #fff, 60px 150px #fff,
    200px 200px #fff, 380px 170px #fff, 520px 220px #fff, 670px 140px #fff,
    820px 190px #fff, 940px 160px #fff,1050px 40px #fff, 30px 280px #fff,
    170px 310px #fff, 330px 260px #fff, 480px 300px #fff, 610px 270px #fff,
    760px 320px #fff, 900px 280px #fff,1020px 340px #fff, 90px 420px #fff,
    240px 390px #fff, 390px 450px #fff, 530px 410px #fff, 680px 460px #fff,
    830px 430px #fff, 970px 470px #fff,1100px 400px #fff, 150px 540px #fff,
    300px 510px #fff, 450px 560px #fff, 590px 530px #fff, 740px 580px #fff,
    880px 550px #fff,1000px 600px #fff,  70px 660px #fff, 220px 630px #fff,
    370px 680px #fff, 510px 650px #fff, 660px 700px #fff, 800px 670px #fff,
    920px 720px #fff,1080px 640px #fff, 180px 780px #fff, 340px 750px #fff,
    490px 800px #fff, 630px 770px #fff, 780px 820px #fff, 910px 790px #fff;
  animation: twinkle 5s ease-in-out infinite alternate;
}

.stars-md::before {
  content: ''; display: block; position: absolute; inset: 0;
  width: 3px; height: 3px; border-radius: 50%; background: transparent;
  box-shadow:
    80px 60px rgba(255,255,255,.85), 320px 110px rgba(255,255,255,.8),
    560px 55px rgba(255,255,255,.9), 790px 130px rgba(255,255,255,.75),
    1000px 80px rgba(255,255,255,.85), 140px 230px rgba(255,255,255,.8),
    440px 290px rgba(255,255,255,.9), 700px 250px rgba(255,255,255,.75),
    950px 310px rgba(255,255,255,.8), 200px 460px rgba(255,255,255,.85),
    500px 510px rgba(255,255,255,.9), 750px 480px rgba(255,255,255,.75),
    1050px 540px rgba(255,255,255,.8), 100px 640px rgba(255,255,255,.85),
    350px 690px rgba(255,255,255,.8), 600px 660px rgba(255,255,255,.9),
    850px 720px rgba(255,255,255,.75),1100px 680px rgba(255,255,255,.8),
    250px 840px rgba(255,255,255,.85), 550px 880px rgba(255,255,255,.9);
  animation: twinkle 7s ease-in-out infinite alternate-reverse;
}

.stars-lg::before {
  content: ''; display: block; position: absolute; inset: 0;
  width: 4px; height: 4px; border-radius: 50%; background: transparent;
  box-shadow:
    160px 100px rgba(255,255,255,.9), 480px 160px rgba(255,255,255,.8),
    760px 90px rgba(255,255,255,.9), 1080px 180px rgba(255,255,255,.85),
    280px 380px rgba(255,255,255,.8), 620px 420px rgba(255,255,255,.9),
    920px 360px rgba(255,255,255,.85), 50px 580px rgba(255,255,255,.8),
    390px 620px rgba(255,255,255,.9), 720px 590px rgba(255,255,255,.85);
  animation: twinkle 9s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0%   { opacity: .3; }
  50%  { opacity: 1; }
  100% { opacity: .5; }
}

/* Nebula */
.nebula { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.nebula-1 { width:900px; height:700px; background: radial-gradient(ellipse,rgba(120,50,200,.45),rgba(80,20,150,.2) 40%,transparent 70%); top:-200px; left:-200px; filter: blur(60px); animation: ndrift 15s ease-in-out infinite alternate; }
.nebula-2 { width:700px; height:800px; background: radial-gradient(ellipse,rgba(160,60,220,.5),rgba(130,30,180,.25) 35%,transparent 65%); top:100px; right:-150px; filter: blur(70px); animation: ndrift 12s ease-in-out infinite alternate-reverse; }
.nebula-3 { width:500px; height:500px; background: radial-gradient(ellipse,rgba(220,80,200,.3),rgba(180,40,160,.15) 45%,transparent 70%); bottom:0; right:100px; filter: blur(80px); animation: ndrift 18s ease-in-out infinite alternate; }
.nebula-4 { width:400px; height:300px; background: radial-gradient(ellipse,rgba(100,60,255,.25),transparent 70%); bottom:200px; left:50px; filter: blur(60px); animation: ndrift 20s ease-in-out infinite alternate-reverse; }
@keyframes ndrift { 0% { transform:translate(0,0) scale(1); } 100% { transform:translate(30px,20px) scale(1.07); } }


/* ════════════════════════════════════════════════════════════
   AUTH OVERLAY
════════════════════════════════════════════════════════════ */
.auth-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--bg-overlay);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.auth-overlay.hidden { display: none; }

.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 36px 32px;
  backdrop-filter: blur(32px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: cardIn .4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes cardIn {
  from { opacity:0; transform: translateY(28px) scale(0.96); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

.auth-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px; justify-content: center;
}

/* Auth Tabs */
.auth-tabs {
  display: flex; gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 4px;
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1; background: transparent; border: none;
  border-radius: calc(var(--r-lg) - 4px);
  padding: 9px;
  font-size: .88rem; font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: var(--text-muted); cursor: pointer;
  transition: var(--ease);
}
.auth-tab:hover { color: var(--text-secondary); }
.auth-tab.active {
  background: var(--accent-grad);
  color: #fff;
  box-shadow: 0 2px 12px rgba(155,93,229,.4);
}

.auth-panel { }
.auth-panel.hidden { display: none; }

.auth-title {
  font-size: 1.45rem; font-weight: 800;
  letter-spacing: -.5px; color: var(--text-primary);
  margin-bottom: 6px;
}
.auth-sub {
  font-size: .875rem; color: var(--text-secondary);
  margin-bottom: 24px;
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-size: .8rem; font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .3px;
}
.form-input {
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: .95rem; font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  outline: none;
  transition: var(--ease);
}
.form-input::placeholder { color: var(--text-placeholder); }
.form-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(150,100,255,0.12);
}

.auth-error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: .82rem; color: #fca5a5;
  animation: slideIn .25s ease;
}
.auth-success {
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: .82rem; color: #6ee7b7;
  animation: slideIn .25s ease;
}
.auth-error.hidden, .auth-success.hidden { display: none; }

.auth-submit-btn {
  position: relative;
  background: var(--accent-grad);
  color: #fff; border: none;
  border-radius: var(--r-md);
  padding: 13px;
  font-size: .95rem; font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer; transition: var(--ease);
  box-shadow: var(--shadow-btn);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-submit-btn:hover:not(:disabled) {
  background: var(--accent-grad-h);
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(140,80,240,.55);
}
.auth-submit-btn:active { transform: translateY(0); }
.auth-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Spinner */
.btn-spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  position: absolute;
}
.btn-spinner.hidden { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-switch {
  text-align: center; margin-top: 18px;
  font-size: .84rem; color: var(--text-secondary);
}
.auth-link {
  background: none; border: none;
  color: var(--accent-light); font-weight: 600;
  cursor: pointer; text-decoration: underline;
  font-family: 'Inter', sans-serif;
  font-size: .84rem;
}
.auth-link:hover { color: var(--accent); }


/* ════════════════════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════════════════════ */
.app-wrapper {
  position: relative; z-index: 1;
  max-width: 760px; margin: 0 auto;
  padding: 28px 24px 100px;
}
.app-wrapper.hidden { display: none; }


/* ════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════ */
.header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 0 32px;
  gap: 12px; flex-wrap: wrap;
}

.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 4px 24px rgba(168,85,247,.5);
  flex-shrink: 0;
}
.logo-text { font-size: 1.25rem; font-weight: 700; letter-spacing: -.3px; }

.header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.header-stats  { display: flex; gap: 8px; }

.stat-pill {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 6px 14px;
  font-size: .78rem; font-weight: 500; color: var(--text-secondary);
  backdrop-filter: blur(10px);
}
[data-theme="light"] .stat-pill { background: rgba(130,80,200,.07); border-color: rgba(130,80,200,.2); }
.stat-pill.done {
  background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.2);
  color: var(--success);
}

/* Icon button (theme toggle) */
.icon-btn {
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; transition: var(--ease);
}
[data-theme="light"] .icon-btn { background: rgba(130,80,200,.07); border-color: rgba(130,80,200,.2); }
.icon-btn:hover { background: rgba(255,255,255,.12); transform: scale(1.05); }

/* Focus button */
.focus-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(155,93,229,.12); border: 1px solid rgba(155,93,229,.3);
  border-radius: 999px; padding: 7px 14px;
  font-size: .8rem; font-weight: 600; font-family: 'Inter', sans-serif;
  color: var(--accent-light); cursor: pointer; transition: var(--ease);
}
.focus-btn:hover { background: rgba(155,93,229,.22); border-color: rgba(155,93,229,.5); }
.focus-btn.active {
  background: var(--accent-grad);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 16px rgba(155,93,229,.5);
}


/* ════════════════════════════════════════════════════════════
   USER MENU
════════════════════════════════════════════════════════════ */
.user-menu { position: relative; }

.user-avatar-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-grad);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(155,93,229,.5);
  transition: var(--ease);
}
.user-avatar-btn:hover { transform: scale(1.05); box-shadow: 0 4px 20px rgba(155,93,229,.7); }

.user-initials {
  font-size: .85rem; font-weight: 700; color: #fff;
  line-height: 1; font-family: 'Inter', sans-serif;
}

.user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  backdrop-filter: blur(32px);
  box-shadow: 0 12px 48px rgba(0,0,0,0.4);
  z-index: 50;
  animation: slideIn .2s ease;
  overflow: hidden;
}
.user-dropdown.hidden { display: none; }

.user-info {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.user-email-text {
  font-size: .82rem; font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
}
.user-since {
  font-size: .72rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px;
}

.dropdown-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 0;
}

.dropdown-item {
  width: 100%; background: none; border: none;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: .85rem; font-weight: 500;
  font-family: 'Inter', sans-serif;
  color: var(--text-secondary);
  cursor: pointer; transition: var(--ease);
  text-align: left;
}
.dropdown-item:hover { background: rgba(255,255,255,.05); }
.logout-item:hover { color: #f87171; background: rgba(239,68,68,.08); }


/* ════════════════════════════════════════════════════════════
   FOCUS BANNER
════════════════════════════════════════════════════════════ */
.focus-banner {
  display: flex; align-items: center; gap: 14px;
  background: rgba(155,93,229,.1); border: 1px solid rgba(155,93,229,.25);
  border-radius: var(--r-md); padding: 16px 20px;
  margin-bottom: 28px; backdrop-filter: blur(16px);
  animation: slideIn .3s ease;
}
.focus-banner.hidden { display: none; }
.focus-icon { font-size: 1.6rem; }
.focus-title { font-weight: 700; font-size: .95rem; color: var(--text-primary); }
.focus-sub   { font-size: .78rem; color: var(--text-secondary); margin-top: 2px; }
.exit-focus-btn {
  margin-left: auto;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm); padding: 7px 16px;
  font-size: .82rem; font-weight: 600; font-family: 'Inter', sans-serif;
  color: var(--text-primary); cursor: pointer; transition: var(--ease);
}
.exit-focus-btn:hover { background: rgba(255,255,255,.14); }


/* ════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */
.hero-title {
  font-size: clamp(2rem,5vw,3rem); font-weight: 800;
  line-height: 1.15; letter-spacing: -1.5px; margin-bottom: 12px;
  color: var(--text-primary);
}
.gradient-text {
  background: linear-gradient(90deg, #c084fc, #f472b6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub { color: var(--text-secondary); font-size: .95rem; margin-bottom: 26px; }


/* ════════════════════════════════════════════════════════════
   INPUT
════════════════════════════════════════════════════════════ */
.input-wrapper {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-input); border: 1.5px solid var(--border-input);
  border-radius: var(--r-lg); padding: 6px 6px 6px 18px;
  backdrop-filter: blur(16px);
  box-shadow: 0 0 30px rgba(120,60,220,.1), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.input-wrapper:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(150,100,255,.15), 0 0 50px rgba(140,60,240,.2);
}
.input-icon { color: rgba(180,140,255,.5); flex-shrink: 0; display: flex; }

.task-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 1rem; font-family: 'Inter', sans-serif;
  padding: 12px 0;
}
.task-input::placeholder { color: var(--text-placeholder); }

.add-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--accent-grad);
  color: #fff; border: none; border-radius: var(--r-md);
  padding: 12px 22px; font-size: .92rem; font-weight: 700;
  font-family: 'Inter', sans-serif; cursor: pointer; transition: var(--ease);
  white-space: nowrap; box-shadow: var(--shadow-btn), inset 0 1px 0 rgba(255,255,255,.15);
}
.add-btn:hover {
  background: var(--accent-grad-h);
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(140,80,240,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
.add-btn:active { transform: translateY(0); }


/* ── Task Meta ─────────────────────────────────────── */
.task-meta-row {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-top: 14px; padding: 14px 18px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); backdrop-filter: blur(12px);
}
.meta-group { display: flex; flex-direction: column; gap: 8px; }
.meta-label {
  font-size: .72rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .8px;
}
.optional { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Priority Pills */
.priority-pills { display: flex; gap: 6px; }
.priority-pill {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-sm); padding: 6px 14px;
  font-size: .8rem; font-weight: 500; font-family: 'Inter', sans-serif;
  color: var(--text-secondary); cursor: pointer; transition: var(--ease);
}
[data-theme="light"] .priority-pill { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
.priority-pill:hover { background: rgba(255,255,255,.09); color: var(--text-primary); }
.priority-pill.p-high.active   { background: var(--high-bg);   border-color: var(--high-border);   color: #fca5a5; }
.priority-pill.p-medium.active { background: var(--medium-bg); border-color: var(--medium-border); color: #fcd34d; }
.priority-pill.p-low.active    { background: var(--low-bg);    border-color: var(--low-border);    color: #6ee7b7; }

/* Due Date input */
.due-input {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 7px 12px;
  color: var(--text-primary); font-size: .85rem;
  font-family: 'Inter', sans-serif; outline: none; cursor: pointer;
  transition: var(--ease); color-scheme: dark;
}
[data-theme="light"] .due-input { color-scheme: light; }
.due-input:focus { border-color: rgba(155,93,229,.5); box-shadow: 0 0 0 2px rgba(155,93,229,.1); }


/* ════════════════════════════════════════════════════════════
   FILTER TABS + SEARCH ROW
════════════════════════════════════════════════════════════ */
.filter-search-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 20px; flex-wrap: wrap;
}

.filter-tabs { display: flex; gap: 6px; }
.tab {
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 20px;
  font-size: .85rem; font-weight: 500; font-family: 'Inter', sans-serif;
  color: var(--text-muted); cursor: pointer; transition: var(--ease);
}
.tab:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
.tab.active {
  background: var(--accent-grad);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 14px rgba(120,60,220,.4);
}

/* Search */
.search-wrapper {
  flex: 1; min-width: 150px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 16px;
  transition: var(--ease);
}
.search-wrapper:focus-within {
  border-color: rgba(155,93,229,.5);
  box-shadow: 0 0 0 2px rgba(155,93,229,.1);
}
.search-icon { color: var(--text-muted); flex-shrink: 0; display: flex; }
.search-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: .875rem; font-family: 'Inter', sans-serif;
}
.search-input::placeholder { color: var(--text-placeholder); }


/* ════════════════════════════════════════════════════════════
   LOADING STATE
════════════════════════════════════════════════════════════ */
.loading-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 60px 20px;
  color: var(--text-muted); font-size: .9rem;
}
.loading-state.hidden { display: none; }

.loader-ring {
  width: 40px; height: 40px;
  border: 3px solid rgba(155,93,229,.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}


/* ════════════════════════════════════════════════════════════
   TASKS SECTION + CARDS
════════════════════════════════════════════════════════════ */
.tasks-section { margin-top: 28px; }
.tasks-container { display: flex; flex-direction: column; gap: 10px; }
.tasks-container.hidden { display: none; }

/* Task Card */
.task-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--r-md); padding: 14px 16px;
  backdrop-filter: blur(18px); transition: var(--ease);
  animation: slideIn .3s ease; position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
}
@keyframes slideIn {
  from { opacity:0; transform: translateY(14px); }
  to   { opacity:1; transform: translateY(0); }
}

.task-card:hover {
  background: var(--bg-card-hover); transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.task-card.completed { opacity: .5; }

/* Priority borders */
.task-card[data-priority="high"]   { border-left-color: var(--high); }
.task-card[data-priority="medium"] { border-left-color: var(--medium); }
.task-card[data-priority="low"]    { border-left-color: var(--low); }

/* Overdue glow */
.task-card.overdue {
  box-shadow: 0 0 0 1px rgba(239,68,68,.25), 0 0 24px rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.35) !important;
}

/* Remove animation */
.task-card.removing { animation: slideOut .28s ease forwards; }
@keyframes slideOut {
  from { opacity:1; transform:translateY(0); max-height:120px; }
  to   { opacity:0; transform:translateY(-8px); max-height:0; padding:0; margin:0; overflow:hidden; }
}

/* Checkbox */
.checkbox-wrap {
  flex-shrink: 0; cursor: pointer; margin-top: 2px;
  user-select: none;
}
.checkbox {
  width: 21px; height: 21px; border-radius: 7px;
  border: 2px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  transition: var(--ease); background: transparent;
}
[data-theme="light"] .checkbox { border-color: rgba(0,0,0,.2); }
.checkbox-wrap:hover .checkbox { border-color: var(--accent); background: rgba(155,93,229,.1); }
.checkbox.checked {
  background: var(--accent-grad);
  border-color: transparent; box-shadow: 0 2px 12px rgba(155,93,229,.5);
}
.checkbox svg { opacity:0; transform:scale(.5); transition:var(--ease); color:#fff; }
.checkbox.checked svg { opacity:1; transform:scale(1); }

/* Task body */
.task-body { flex: 1; min-width: 0; }
.task-top-row  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-title    { font-size: .95rem; font-weight: 500; color: var(--text-primary); word-break: break-word; transition: var(--ease); flex: 1; }
.task-title.done { text-decoration: line-through; color: var(--text-muted); }

/* Edit input */
.edit-input {
  flex: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(155,93,229,.5);
  border-radius: 6px; padding: 4px 10px; color: var(--text-primary);
  font-size: .95rem; font-family: 'Inter', sans-serif; outline: none;
  transition: var(--ease); min-width: 0; width: 100%;
}
[data-theme="light"] .edit-input { background: rgba(0,0,0,.04); }
.edit-input:focus { border-color: rgba(155,93,229,.85); box-shadow: 0 0 0 2px rgba(155,93,229,.15); }

/* Priority badge */
.priority-badge {
  font-size: .67rem; font-weight: 700; border-radius: 999px;
  padding: 2px 9px; text-transform: uppercase; letter-spacing: .6px; flex-shrink: 0;
}
.priority-badge.p-high   { background: var(--high-bg);   color: #fca5a5; border: 1px solid var(--high-border); }
.priority-badge.p-medium { background: var(--medium-bg); color: #fcd34d; border: 1px solid var(--medium-border); }
.priority-badge.p-low    { background: var(--low-bg);    color: #6ee7b7; border: 1px solid var(--low-border); }

/* Bottom row */
.task-bottom-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.task-date { font-size: .72rem; color: var(--text-muted); }

/* Due date badge */
.due-badge {
  font-size: .72rem; font-weight: 600; border-radius: 999px;
  padding: 2px 9px; display: inline-flex; align-items: center; gap: 4px;
}
.due-badge.overdue   { background: var(--high-bg);   color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.due-badge.due-today { background: var(--medium-bg); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); animation: pulse-badge 2s ease-in-out infinite; }
.due-badge.due-soon  { background: rgba(251,191,36,.08); color: #fde68a; border: 1px solid rgba(251,191,36,.2); }
.due-badge.due-later { background: rgba(255,255,255,.05); color: var(--text-secondary); border: 1px solid var(--border); }

@keyframes pulse-badge {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.4); }
  50%      { box-shadow: 0 0 0 4px rgba(245,158,11,0); }
}

/* Task actions */
.task-actions {
  display: flex; gap: 4px; flex-shrink: 0;
  opacity: 0; transition: var(--ease);
}
.task-card:hover .task-actions { opacity: 1; }

.action-btn {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--ease); color: var(--text-muted);
}
.action-btn:hover  { background: rgba(255,255,255,.08); color: var(--text-primary); }
.edit-btn:hover    { background: rgba(155,93,229,.12); color: var(--accent-light); }
.save-btn          { color: var(--success); }
.save-btn:hover    { background: rgba(16,185,129,.15); }
.cancel-btn:hover  { background: rgba(255,255,255,.08); color: #f87171; }
.delete-btn:hover  { background: var(--danger-soft); color: #f87171; border-color: rgba(239,68,68,.25); }


/* ════════════════════════════════════════════════════════════
   EMPTY STATE
════════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center; padding: 50px 20px 30px;
  display: flex; flex-direction: column; align-items: center;
}
.empty-state.hidden { display: none; }
.rocket-wrap {
  position: relative; display: flex; align-items: center;
  justify-content: center; margin-bottom: 16px;
}
.rocket-glow {
  position: absolute; bottom: 2px; width: 70px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse,rgba(160,90,255,.55),transparent 70%);
  filter: blur(5px); animation: glow-p 3.5s ease-in-out infinite;
}
.rocket-emoji {
  font-size: 72px; line-height: 1;
  filter: drop-shadow(0 0 24px rgba(200,120,255,.7));
  animation: rocket-float 3.5s ease-in-out infinite;
}
@keyframes rocket-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes glow-p { 0%,100% { opacity:.6; transform:scaleX(1); } 50% { opacity:1; transform:scaleX(1.2); } }
.empty-title { font-size: 1rem; font-weight: 500; color: var(--text-secondary); }


/* ════════════════════════════════════════════════════════════
   PROGRESS SECTION
════════════════════════════════════════════════════════════ */
.progress-section {
  margin-top: 28px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 18px 20px; backdrop-filter: blur(16px);
}
.progress-section.hidden { display: none; }
.progress-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.progress-left   { display: flex; flex-direction: column; gap: 2px; }
.progress-label  { font-size: .78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; }
.progress-summary { font-size: .88rem; font-weight: 500; color: var(--text-secondary); }
.progress-pct    { font-size: 1.4rem; font-weight: 800; color: var(--accent-light); }

.progress-bar-bg { background: rgba(255,255,255,.05); border-radius: 999px; height: 6px; overflow: hidden; }
[data-theme="light"] .progress-bar-bg { background: rgba(0,0,0,.07); }
.progress-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #9b5de5, #f472b6);
  width: 0%; transition: width .55s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px rgba(155,93,229,.6);
}
.progress-message { margin-top: 10px; font-size: .88rem; font-weight: 500; color: var(--text-secondary); text-align: center; }


/* ════════════════════════════════════════════════════════════
   CONFIRM DIALOG
════════════════════════════════════════════════════════════ */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.confirm-overlay.hidden { display: none; }

.confirm-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 28px 24px;
  max-width: 360px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: cardIn .25s ease;
}
.confirm-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.confirm-body  { font-size: .875rem; color: var(--text-secondary); margin-bottom: 22px; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-cancel {
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 20px;
  font-size: .875rem; font-weight: 600; font-family: 'Inter', sans-serif;
  color: var(--text-secondary); cursor: pointer; transition: var(--ease);
}
.confirm-cancel:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
.confirm-delete {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: none; border-radius: var(--r-sm); padding: 9px 20px;
  font-size: .875rem; font-weight: 700; font-family: 'Inter', sans-serif;
  color: #fff; cursor: pointer; transition: var(--ease);
  box-shadow: 0 4px 16px rgba(239,68,68,.4);
}
.confirm-delete:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(239,68,68,.55); }


/* ════════════════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  border: 1px solid rgba(160,100,255,.2);
  border-radius: 999px; padding: 12px 26px;
  font-size: .88rem; font-weight: 500; color: var(--text-primary);
  backdrop-filter: blur(24px);
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  z-index: 1000; opacity: 0;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none; white-space: nowrap;
}
.toast.show   { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.hidden { display: none; }


/* ════════════════════════════════════════════════════════════
   FOCUS MODE
════════════════════════════════════════════════════════════ */
body.focus-mode #add-section .hero-title,
body.focus-mode #add-section .hero-sub,
body.focus-mode #filter-tabs,
body.focus-mode #header-stats { display: none; }
body.focus-mode #add-section { padding-bottom: 0; }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .add-btn span  { display: none; }
  .add-btn { padding: 12px 14px; }
  .hero-title { font-size: 1.85rem; }
  .task-meta-row { flex-direction: column; }
  .header-stats .stat-pill { font-size: .72rem; padding: 4px 12px; }
  .focus-btn span { display: none; }
  .filter-search-row { flex-direction: column; align-items: stretch; }
  .filter-tabs { overflow-x: auto; padding-bottom: 2px; }
  .auth-card { padding: 28px 24px 24px; }
}

@media (max-width: 440px) {
  .header-right { gap: 6px; }
  .stat-pill { display: none; }
}


/* ════════════════════════════════════════════════════════════
   SCROLLBAR
════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.15); }


/* ════════════════════════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════════════════════════ */
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%      { transform:translateX(-7px); }
  40%      { transform:translateX(7px); }
  60%      { transform:translateX(-4px); }
  80%      { transform:translateX(4px); }
}