/* ─── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;max-width:100vw;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ─── Design Tokens — "AURORA" theme ─────────────────────────────────────── */
/* Identity: deep-space surfaces + violet→cyan aurora gradient, glow accents  */
:root {
  /* ── Base (dark = default) ── */
  --bg-primary: #0A0C16;
  --bg-secondary: #10131F;
  --bg-tertiary: #161A2B;
  --bg-elevated: #1C2136;
  --bg-input: #131726;
  --bg-card: #11141F;
  --bg-card-hover: #171B2C;
  --bg-overlay: rgba(5, 6, 12, 0.66);
  --bg-glass: rgba(17, 20, 31, 0.72);

  /* ── Text ── */
  --text-primary: #EEF0FA;
  --text-secondary: #9AA1BC;
  --text-tertiary: #646B85;
  --text-inverse: #FFFFFF;

  /* ── Accent: Aurora violet + cyan ── */
  --accent: #7C5CFF;
  --accent-hover: #6B4BEF;
  --accent-2: #22D3EE;
  --accent-soft: rgba(124, 92, 255, 0.12);
  --accent-medium: rgba(124, 92, 255, 0.22);
  --accent-strong: rgba(124, 92, 255, 0.34);
  --accent-shadow: rgba(124, 92, 255, 0.40);
  --accent-shadow-strong: rgba(124, 92, 255, 0.55);
  --cyan-soft: rgba(34, 211, 238, 0.12);
  --gradient: linear-gradient(135deg, #7C5CFF 0%, #22D3EE 100%);
  --gradient-warm: linear-gradient(135deg, #FFB224 0%, #FF5C7A 100%);
  --glow-accent: 0 0 24px rgba(124, 92, 255, 0.35);
  --glow-cyan: 0 0 24px rgba(34, 211, 238, 0.30);
  --blob-a: rgba(124, 92, 255, 0.16);
  --blob-b: rgba(34, 211, 238, 0.12);

  /* ── Semantic ── */
  --color-success: #2DD4A0;
  --color-warning: #FFB224;
  --color-error: #FF5C7A;
  --color-info: #22D3EE;

  /* ── Priority ── */
  --priority-high: #FF5C7A;
  --priority-medium: #FFB224;
  --priority-low: #4DA3FF;
  --priority-none: #5E6378;

  /* Legacy aliases */
  --p-high: #FF5C7A;
  --p-med: #FFB224;
  --p-low: #4DA3FF;
  --p-none: #5E6378;

  /* ── Borders ── */
  --border: rgba(151, 161, 255, 0.09);
  --border-strong: rgba(151, 161, 255, 0.20);
  --border-accent: rgba(124, 92, 255, 0.42);

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 70px rgba(0, 0, 0, 0.65);

  /* ── Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* ── Motion tokens ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 130ms;
  --duration-normal: 220ms;
  --duration-slow: 380ms;

  /* ── Status (semantic) ── */
  --status-todo: #8E96AD;
  --status-todo-soft: rgba(142, 150, 173, 0.14);
  --status-progress: #22D3EE;
  --status-progress-soft: rgba(34, 211, 238, 0.13);
  --status-done: #2DD4A0;
  --status-done-soft: rgba(45, 212, 160, 0.13);

  /* ── Typography ── */
  --font-body: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Type scale (single source of truth) ── */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --leading-body: 1.6;
  --leading-snug: 1.4;
  --leading-tight: 1.15;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Spacing scale (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* ── Avatar (single source of truth — letter scales with diameter) ── */
  --avatar-size: 32px;
  --avatar-letter-ratio: 0.42;

  /* ── Focus ring ── */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  --nav-h: 58px;
  --max-w: 680px;
  --max-w-board: 1080px;
}

/* Dark mode = default, light theme override */
@media(prefers-color-scheme:light){:root{
  --bg-primary:#F3F4FB;--bg-secondary:#E9EBF6;--bg-tertiary:#DFE2F0;
  --bg-elevated:#FFFFFF;--bg-input:#EEF0F9;
  --bg-card:#FFFFFF;--bg-card-hover:#F6F7FE;
  --bg-glass:rgba(255,255,255,0.78);
  --text-primary:#15182B;--text-secondary:#4C5268;--text-tertiary:#9AA0B8;
  --border:rgba(48,54,96,0.09);--border-strong:rgba(48,54,96,0.18);
  --shadow-sm:0 1px 2px rgba(35,38,80,0.06);
  --shadow-md:0 6px 16px rgba(35,38,80,0.09);
  --shadow-lg:0 12px 36px rgba(35,38,80,0.12);
  --shadow-xl:0 24px 70px rgba(35,38,80,0.16);
  --accent-soft:rgba(124,92,255,0.10);--accent-medium:rgba(124,92,255,0.18);
  --glow-accent:0 0 24px rgba(124,92,255,0.22);
  --glow-cyan:0 0 24px rgba(34,211,238,0.18);
  --bg-overlay:rgba(28,30,52,0.42);
}}
[data-theme=dark],[data-theme=aurora]{
  --bg-primary:#0A0C16;--bg-secondary:#10131F;--bg-tertiary:#161A2B;
  --bg-elevated:#1C2136;--bg-input:#131726;
  --bg-card:#11141F;--bg-card-hover:#171B2C;
  --bg-glass:rgba(17,20,31,0.72);
  --text-primary:#EEF0FA;--text-secondary:#9AA1BC;--text-tertiary:#646B85;
  --accent:#7C5CFF;--accent-hover:#6B4BEF;--accent-2:#22D3EE;
  --gradient:linear-gradient(135deg,#7C5CFF 0%,#22D3EE 100%);
  --border:rgba(151,161,255,0.09);--border-strong:rgba(151,161,255,0.20);
  --border-accent:rgba(124,92,255,0.42);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:0 6px 16px rgba(0,0,0,0.45);
  --shadow-lg:0 12px 36px rgba(0,0,0,0.55);
  --shadow-xl:0 24px 70px rgba(0,0,0,0.65);
  --accent-soft:rgba(124,92,255,0.12);--accent-medium:rgba(124,92,255,0.22);
  --accent-shadow:rgba(124,92,255,0.40);--accent-shadow-strong:rgba(124,92,255,0.55);
  --glow-accent:0 0 24px var(--accent-shadow);
  --glow-cyan:0 0 24px rgba(34,211,238,0.30);
  --blob-a:rgba(124,92,255,0.16);--blob-b:rgba(34,211,238,0.12);
  --bg-overlay:rgba(5,6,12,0.66);
}
[data-theme=light],[data-theme=daylight]{
  --bg-primary:#F3F4FB;--bg-secondary:#E9EBF6;--bg-tertiary:#DFE2F0;
  --bg-elevated:#FFFFFF;--bg-input:#EEF0F9;
  --bg-card:#FFFFFF;--bg-card-hover:#F6F7FE;
  --bg-glass:rgba(255,255,255,0.78);
  --text-primary:#15182B;--text-secondary:#4C5268;--text-tertiary:#9AA0B8;
  --accent:#7C5CFF;--accent-hover:#6B4BEF;--accent-2:#22D3EE;
  --gradient:linear-gradient(135deg,#7C5CFF 0%,#22D3EE 100%);
  --border:rgba(48,54,96,0.09);--border-strong:rgba(48,54,96,0.18);
  --border-accent:rgba(124,92,255,0.42);
  --shadow-sm:0 1px 2px rgba(35,38,80,0.06);
  --shadow-md:0 6px 16px rgba(35,38,80,0.09);
  --shadow-lg:0 12px 36px rgba(35,38,80,0.12);
  --shadow-xl:0 24px 70px rgba(35,38,80,0.16);
  --accent-soft:rgba(124,92,255,0.10);--accent-medium:rgba(124,92,255,0.18);
  --accent-shadow:rgba(124,92,255,0.28);--accent-shadow-strong:rgba(124,92,255,0.40);
  --glow-accent:0 0 24px rgba(124,92,255,0.22);
  --glow-cyan:0 0 24px rgba(34,211,238,0.18);
  --blob-a:rgba(124,92,255,0.14);--blob-b:rgba(34,211,238,0.12);
  --bg-overlay:rgba(28,30,52,0.42);
}
/* Theme 3: SUNSET — warm dusk, orange→pink energy */
[data-theme=sunset]{
  --bg-primary:#150B12;--bg-secondary:#1D1019;--bg-tertiary:#261523;
  --bg-elevated:#2D1A28;--bg-input:#1A0E17;
  --bg-card:#190D15;--bg-card-hover:#231220;
  --bg-glass:rgba(27,14,22,0.74);
  --text-primary:#FBEFE9;--text-secondary:#C5A4AC;--text-tertiary:#83626F;
  --accent:#FF7849;--accent-hover:#F26536;--accent-2:#FF4D8D;
  --gradient:linear-gradient(135deg,#FF7849 0%,#FF4D8D 100%);
  --border:rgba(255,150,130,0.11);--border-strong:rgba(255,150,130,0.24);
  --border-accent:rgba(255,120,73,0.45);
  --shadow-sm:0 1px 2px rgba(10,2,8,0.4);
  --shadow-md:0 6px 16px rgba(10,2,8,0.5);
  --shadow-lg:0 12px 36px rgba(10,2,8,0.6);
  --shadow-xl:0 24px 70px rgba(10,2,8,0.7);
  --accent-soft:rgba(255,120,73,0.13);--accent-medium:rgba(255,120,73,0.24);
  --accent-shadow:rgba(255,120,73,0.40);--accent-shadow-strong:rgba(255,90,80,0.55);
  --glow-accent:0 0 24px rgba(255,120,73,0.35);
  --glow-cyan:0 0 24px rgba(255,77,141,0.30);
  --blob-a:rgba(255,120,73,0.15);--blob-b:rgba(255,77,141,0.12);
  --bg-overlay:rgba(12,3,9,0.68);
}
/* Theme 4: NOIR — high-contrast black + amber focus */
[data-theme=noir]{
  --bg-primary:#000000;--bg-secondary:#0C0C0E;--bg-tertiary:#141417;
  --bg-elevated:#1B1B20;--bg-input:#101013;
  --bg-card:#0A0A0C;--bg-card-hover:#151518;
  --bg-glass:rgba(10,10,12,0.80);
  --text-primary:#FFFFFF;--text-secondary:#B9B9C6;--text-tertiary:#80808E;
  --accent:#FFD60A;--accent-hover:#EFC400;--accent-2:#FF9F0A;
  --gradient:linear-gradient(135deg,#FFD60A 0%,#FF9F0A 100%);
  --border:rgba(255,255,255,0.16);--border-strong:rgba(255,255,255,0.32);
  --border-accent:rgba(255,214,10,0.55);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.6);
  --shadow-md:0 6px 16px rgba(0,0,0,0.7);
  --shadow-lg:0 12px 36px rgba(0,0,0,0.8);
  --shadow-xl:0 24px 70px rgba(0,0,0,0.9);
  --accent-soft:rgba(255,214,10,0.12);--accent-medium:rgba(255,214,10,0.22);
  --accent-shadow:rgba(255,214,10,0.35);--accent-shadow-strong:rgba(255,180,10,0.50);
  --glow-accent:0 0 24px rgba(255,214,10,0.30);
  --glow-cyan:0 0 24px rgba(255,159,10,0.28);
  --blob-a:rgba(255,214,10,0.07);--blob-b:rgba(255,159,10,0.06);
  --bg-overlay:rgba(0,0,0,0.78);
}
/* Gradient buttons need dark text on noir's bright amber */
[data-theme=noir] .add-btn,[data-theme=noir] .btn-save,[data-theme=noir] .auth-submit,
[data-theme=noir] .filter-btn.active,[data-theme=noir] .vt-btn.active,
[data-theme=noir] .bnav-btn.active,[data-theme=noir] .icon-btn.nav-active{color:#1A1200}

/* ─── Base ────────────────────────────────────────────────────────────────── */
html{height:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);
  background:var(--bg-primary);color:var(--text-primary);
  min-height:100dvh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  padding-block-end:calc(80px + env(safe-area-inset-bottom));
}
/* Hebrew / RTL — use Heebo which is designed for Hebrew+Latin */
:lang(he),[dir=rtl]{font-family:'Heebo','Plus Jakarta Sans',sans-serif}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full)}

/* ─── Shared ──────────────────────────────────────────────────────────────── */
.icon-btn{
  width:36px;height:36px;min-width:36px;border-radius:var(--radius-full);
  border:1px solid var(--border);background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-secondary);
  transition:background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast);
  font-family:inherit;
}
.icon-btn:hover{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-strong)}
.link-btn{
  border:none;background:none;font-family:inherit;font-size:13px;
  color:var(--text-tertiary);cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);
  transition:color var(--duration-fast),background var(--duration-fast);
}
.link-btn:hover{color:var(--priority-high);background:rgba(239,68,68,0.08)}

/* ─── DB warning banner ──────────────────────────────────────────────────── */
.db-banner{
  position:sticky;top:var(--nav-h);z-index:190;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#FEF3C7;color:#92400E;
  padding:10px 20px;font-size:13px;font-weight:500;
  border-block-end:1px solid #FDE68A;
}
[data-mode=dark] .db-banner{background:#451A03;color:#FCD34D;border-color:#78350F}
.db-banner-close{
  border:none;background:transparent;cursor:pointer;color:inherit;
  font-size:14px;padding:2px 4px;flex-shrink:0;opacity:0.7;
}
.db-banner-close:hover{opacity:1}

/* ─── Navbar ──────────────────────────────────────────────────────────────── */
.navbar{
  position:sticky;top:0;z-index:200;height:var(--nav-h);
  padding-inline:20px;display:flex;align-items:center;justify-content:space-between;
  background:var(--bg-secondary);
  border-block-end:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}

.nav-brand{display:flex;align-items:center;gap:8px}
.nav-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(79,143,247,0.4);
  animation:navPulse 2.8s var(--ease-out) infinite;
}
@keyframes navPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(79,143,247,0.4)}
  50%{box-shadow:0 0 0 5px rgba(79,143,247,0)}
}
.nav-title{font-size:15px;font-weight:600;letter-spacing:-0.2px;color:var(--text-primary)}
.nav-right{display:flex;align-items:center;gap:8px}

.theme-btn{border:none;background:transparent}
.theme-btn:hover{background:var(--bg-secondary)}

/* ─── Profile button + menu ──────────────────────────────────────────────── */
.profile-wrap{position:relative}

.profile-btn{
  display:flex;align-items:center;gap:5px;
  height:36px;min-width:36px;border-radius:var(--radius-full);
  border:1.5px solid var(--border-strong);
  overflow:visible;cursor:pointer;background:var(--bg-secondary);
  padding:0 8px 0 2px;
  transition:border-color var(--duration-fast),box-shadow var(--duration-fast),background var(--duration-fast);
}
.profile-btn:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--accent-soft)}
.profile-btn img,.profile-btn .user-avatar{width:28px;height:28px;object-fit:cover;border-radius:50%;flex-shrink:0}
.profile-btn .user-avatar-fallback{--avatar-size:28px}
.profile-menu-indicator{
  color:var(--text-secondary);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:color var(--duration-fast);
}
.profile-btn:hover .profile-menu-indicator{color:var(--accent)}
/* ── Reusable avatar component ─────────────────────────────────────────────
   One source of truth for every initial-letter avatar in the app.
   Set --avatar-size on the element (or a parent); the letter, both
   dimensions and the circle all derive from it, so it is always centered
   (flex + line-height:1) and proportional (letter = 42% of diameter).      */
.avatar,.user-avatar{
  --avatar-size:32px;
  width:var(--avatar-size);height:var(--avatar-size);
  border-radius:50%;object-fit:cover;display:block;flex-shrink:0;
}
.avatar-fb,.user-avatar-fallback{
  --avatar-size:32px;
  width:var(--avatar-size);height:var(--avatar-size);
  border-radius:50%;flex-shrink:0;
  background:var(--gradient);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:var(--weight-bold);
  font-size:calc(var(--avatar-size) * var(--avatar-letter-ratio));
  line-height:1;text-transform:uppercase;letter-spacing:0;
  user-select:none;overflow:hidden;
}

.profile-menu{
  position:absolute;inset-block-start:calc(100% + 10px);inset-inline-end:0;
  width:280px;z-index:500;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);
  overflow:hidden;
  transform:scale(0.94) translateY(-8px);transform-origin:top right;
  opacity:0;pointer-events:none;
  transition:transform var(--duration-normal) var(--ease-out),opacity var(--duration-normal) var(--ease-out);
}
[dir=rtl] .profile-menu{transform-origin:top left}
.profile-menu.open{transform:none;opacity:1;pointer-events:all}

.menu-panel{display:none;padding:8px}
.menu-panel.active{display:block;animation:menuPanelIn var(--duration-normal) var(--ease-out)}
@keyframes menuPanelIn{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:none}
}
[dir=rtl] @keyframes menuPanelIn{
  from{opacity:0;transform:translateX(-16px)}
}

.menu-user{padding:12px 10px 10px}
.menu-user-name{font-size:14px;font-weight:600;color:var(--text-primary);margin-block-end:2px}
.menu-user-email{font-size:12px;color:var(--text-tertiary)}

.menu-divider{height:1px;background:var(--border);margin:4px 0}

.menu-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 10px;border-radius:var(--radius-sm);
  border:none;background:transparent;cursor:pointer;
  font-family:var(--font-body);font-size:14px;font-weight:500;
  color:var(--text-primary);text-align:start;
  transition:background var(--duration-fast);min-height:40px;
  -webkit-tap-highlight-color:transparent;
}
.menu-item:hover{background:var(--accent-soft)}
.menu-item-icon{font-size:15px;flex-shrink:0;width:20px;text-align:center}
.menu-chevron{margin-inline-start:auto;color:var(--text-tertiary);flex-shrink:0}
.menu-logout{color:var(--text-primary)}

.menu-subheader{
  display:flex;align-items:center;gap:10px;
  padding:8px 4px 10px;font-size:14px;font-weight:600;color:var(--text-primary);
  border-block-end:1px solid var(--border);margin-block-end:4px;
}
.menu-back{
  width:28px;height:28px;min-width:28px;border-radius:var(--radius-full);
  border:none;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);transition:background var(--duration-fast),color var(--duration-fast);
  flex-shrink:0;
}
.menu-back:hover{background:var(--bg-secondary);color:var(--text-primary)}

/* Language list */
.lang-list{display:flex;flex-direction:column;gap:2px;padding-block-end:4px;max-height:320px;overflow-y:auto}
.lang-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:var(--radius-sm);border:none;background:transparent;
  font-family:var(--font-body);font-size:14px;color:var(--text-primary);
  cursor:pointer;text-align:start;transition:background var(--duration-fast);
  min-height:40px;width:100%;-webkit-tap-highlight-color:transparent;
}
.lang-item:hover{background:var(--accent-soft)}
.lang-item.current{color:var(--accent);font-weight:600}
.lang-check{margin-inline-start:auto;color:var(--accent);font-size:14px}

/* Notification list */
.notif-list{display:flex;flex-direction:column;padding-block-end:4px;max-height:380px;overflow-y:auto}
.notif-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 10px;border-block-end:1px solid var(--border);
}
.notif-item:last-child{border-block-end:none}
.notif-text{flex:1;min-width:0}
.notif-name{font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.3}
.notif-desc{font-size:12px;color:var(--text-tertiary);margin-block-start:1px;line-height:1.3}

/* iOS toggle switch */
.toggle-switch{
  position:relative;width:51px;height:31px;min-width:51px;
  background:var(--border-strong);border-radius:var(--radius-full);
  cursor:pointer;transition:background var(--duration-normal) var(--ease-out);
  border:none;padding:0;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.toggle-switch.on{background:var(--accent)}
.toggle-switch::after{
  content:'';position:absolute;
  width:27px;height:27px;background:white;border-radius:50%;
  top:2px;inset-inline-start:2px;
  transition:transform var(--duration-normal) var(--ease-spring);
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.toggle-switch.on::after{transform:translateX(20px)}
[dir=rtl] .toggle-switch.on::after{transform:translateX(-20px)}

/* ─── Toast ───────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:24px;
  left:50%;transform:translateX(-50%) translateY(20px);
  z-index:9999;
  background:#1E293B;color:#FFFFFF;
  padding:12px 24px;border-radius:var(--radius-md);
  font-size:14px;font-weight:500;
  box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;
  min-width:200px;max-width:calc(100vw - 32px);
  text-align:center;white-space:nowrap;
  transition:opacity var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.toast-success{background:#166534;color:#FFFFFF;border:1px solid #22C55E}
.toast.toast-error{background:#991B1B;color:#FFFFFF;border:1px solid #EF4444}
.toast.toast-warning{background:#92400E;color:#FFFFFF;border:1px solid #F59E0B}
.toast.toast-info{background:#1E3A5F;color:#FFFFFF;border:1px solid #3B82F6}
@media(max-width:640px){
  .toast{
    bottom:16px;left:16px;right:16px;
    transform:translateY(20px);max-width:none;
    white-space:normal;
  }
  .toast.show{transform:translateY(0)}
}
[dir=rtl] .toast{left:50%;right:auto;transform:translateX(-50%) translateY(20px)}
[dir=rtl] .toast.show{transform:translateX(-50%) translateY(0)}
@media(max-width:640px){
  [dir=rtl] .toast{left:16px;right:16px;transform:translateY(20px)}
  [dir=rtl] .toast.show{transform:translateY(0)}
}

/* ─── Custom 24h time input ──────────────────────────────────────────────── */
.time-input-24h{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--bg-secondary);border-radius:var(--radius-sm);
  padding:3px 7px;border:1.5px solid var(--border-strong);
}
.time-input-24h input[type=number]{
  background:transparent;border:none;outline:none;
  color:var(--text-primary);font-size:15px;font-family:var(--font-body);
  width:30px;text-align:center;padding:0;
  -moz-appearance:textfield;
}
.time-input-24h input[type=number]::-webkit-outer-spin-button,
.time-input-24h input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.time-separator{color:var(--text-tertiary);font-size:16px;font-weight:700;line-height:1}

/* ─── Main layout ─────────────────────────────────────────────────────────── */
.main{max-width:var(--max-w);margin-inline:auto;padding-inline:20px}

/* ─── Page header (replaces hero) ────────────────────────────────────────── */
.hero{padding-block:24px 16px;}
.hero-title{
  font-family:var(--font-heading);
  font-size:24px;font-weight:700;letter-spacing:-0.3px;
  color:var(--text-primary);
  line-height:1.2;margin-block-end:4px;
}
.hero-date{font-size:13px;color:var(--text-tertiary)}

/* ─── Description with mic ───────────────────────────────────────────────── */
.drawer-desc-wrap{position:relative;display:flex;align-items:flex-start;gap:8px}
.drawer-desc-wrap .drawer-desc{flex:1}

/* ─── Progress card ───────────────────────────────────────────────────────── */
.progress-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:16px 18px;
  margin-block-end:16px;
  box-shadow:var(--shadow-sm);
}
.progress-row{display:flex;justify-content:space-between;align-items:center;margin-block-end:10px}
.progress-label{font-size:13px;color:var(--text-secondary)}
.progress-pct{font-size:13px;font-weight:700;color:var(--accent)}
.progress-track{height:6px;background:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden}
.progress-fill{
  height:100%;
  background:var(--accent);
  border-radius:var(--radius-full);transition:width 0.5s var(--ease-out);
}

/* ─── Add form ────────────────────────────────────────────────────────────── */
.add-wrap{margin-block-end:12px;position:relative}
.add-bar{
  display:flex;gap:8px;align-items:center;
  background:var(--bg-card);border:1.5px solid var(--border);
  border-radius:var(--radius-lg);padding:6px 6px 6px 10px;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--duration-normal),box-shadow var(--duration-normal);
}
.add-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.priority-trigger{
  width:32px;height:32px;min-width:32px;border-radius:var(--radius-sm);
  background:var(--bg-secondary);border:none;display:flex;
  align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--duration-fast);
}
.priority-trigger:hover{background:var(--border-strong)}
.p-indicator{width:10px;height:10px;border-radius:50%;background:var(--priority-none);transition:background var(--duration-normal)}
.add-input{
  flex:1;min-width:0;border:none;background:transparent;
  font-family:var(--font-body);font-size:15px;color:var(--text-primary);
  outline:none;padding-block:6px;
}
.add-input::placeholder{color:var(--text-tertiary)}
.add-btn{
  padding:8px 20px;border-radius:var(--radius-md);border:none;
  background:var(--accent);color:#fff;font-size:14px;font-weight:700;
  font-family:var(--font-body);cursor:pointer;white-space:nowrap;min-height:36px;
  transition:background var(--duration-fast),transform var(--duration-fast);
  -webkit-tap-highlight-color:transparent;
}
.add-btn:hover{background:var(--accent-hover)}
.add-btn:active{transform:scale(0.95)}

/* Mic button */
.mic-btn{
  width:36px;height:36px;min-width:36px;border-radius:var(--radius-full);
  border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-tertiary);flex-shrink:0;
  transition:color var(--duration-fast),background var(--duration-fast);
  -webkit-tap-highlight-color:transparent;
}
.mic-btn:hover{color:var(--accent);background:var(--accent-soft)}
.mic-btn.mic-active{color:#EF4444;animation:micPulse 1s ease-in-out infinite}
@keyframes micPulse{
  0%,100%{background:rgba(239,68,68,0.08)}
  50%{background:rgba(239,68,68,0.2)}
}

/* Mic button for detail/description */
.mic-button{
  background:transparent;border:1px solid var(--border-strong);
  color:var(--text-secondary);width:34px;height:34px;min-width:34px;
  border-radius:var(--radius-full);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--duration-normal) ease;flex-shrink:0;
}
.mic-button:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.mic-button.recording{
  background:var(--color-error);border-color:var(--color-error);color:white;
  animation:micPulse 1.5s infinite;
}

/* Add form dropdown (slides down on input focus) */
.add-dropdown{
  overflow:hidden;max-height:0;
  transition:max-height 0.3s var(--ease-out),opacity 0.25s var(--ease-out);
  opacity:0;
}
.add-dropdown.open{max-height:320px;opacity:1}
.add-p-row{display:flex;gap:6px;padding:10px 2px 8px;flex-wrap:wrap}
.add-p-btn{
  padding:6px 14px;border-radius:var(--radius-full);
  border:1.5px solid var(--border-strong);background:transparent;
  color:var(--text-secondary);font-size:13px;font-weight:600;
  font-family:var(--font-body);cursor:pointer;
  transition:all var(--duration-fast);min-height:32px;
  -webkit-tap-highlight-color:transparent;
}
/* Per-priority hover — each pill glows in its own color */
.add-p-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.add-p-btn[data-p=low]:hover,.add-p-btn[data-gbp=low]:hover,.add-p-btn[data-gtdp=low]:hover{background:rgba(96,165,250,0.12);color:var(--priority-low);border-color:var(--priority-low)}
.add-p-btn[data-p=medium]:hover,.add-p-btn[data-gbp=medium]:hover,.add-p-btn[data-gtdp=medium]:hover{background:rgba(251,191,36,0.12);color:var(--priority-medium);border-color:var(--priority-medium)}
.add-p-btn[data-p=high]:hover,.add-p-btn[data-gbp=high]:hover,.add-p-btn[data-gtdp=high]:hover{background:rgba(248,113,113,0.12);color:var(--priority-high);border-color:var(--priority-high)}
/* Active states — includes data-gtdp for group task detail */
.add-p-btn[data-p=low].active,.add-p-btn[data-gbp=low].active,.add-p-btn[data-gtdp=low].active{color:var(--priority-low);border-color:var(--priority-low);background:rgba(96,165,250,0.1)}
.add-p-btn[data-p=medium].active,.add-p-btn[data-gbp=medium].active,.add-p-btn[data-gtdp=medium].active{color:var(--priority-medium);border-color:var(--priority-medium);background:rgba(245,158,11,0.1)}
.add-p-btn[data-p=high].active,.add-p-btn[data-gbp=high].active,.add-p-btn[data-gtdp=high].active{color:var(--priority-high);border-color:var(--priority-high);background:rgba(239,68,68,0.1)}
/* Priority bounce animation on click */
@keyframes priorityBounce{0%{transform:scale(1)}40%{transform:scale(1.18)}70%{transform:scale(0.94)}100%{transform:scale(1)}}
.add-p-btn.picking{animation:priorityBounce 0.3s var(--ease-spring)}
.add-dropdown-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 2px 10px;gap:8px;
}
.add-more-options{padding:0 2px 4px;font-size:13px}
.add-more-options summary{cursor:pointer;color:var(--text-secondary);padding:4px 0;list-style:none;outline:none}
.add-more-options summary::-webkit-details-marker{display:none}
.add-more-options summary::before{content:'▸ ';font-size:11px}
.add-more-options[open] summary::before{content:'▾ '}
.add-more-body{display:flex;flex-direction:column;gap:6px;padding-block-start:6px}
.add-more-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--text-secondary)}

/* Legacy dropdown (kept for safety) */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Notify-when-done row */
.notify-done-row{
  display:flex;align-items:center;gap:7px;
  padding:6px 4px 2px;font-size:12px;color:var(--text-tertiary);
  cursor:pointer;user-select:none;width:fit-content;
  transition:color var(--duration-fast);
}
.notify-done-row:hover{color:var(--accent)}
.notify-done-cb{
  width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;
}

/* Email sub-types in notification panel */
.email-subtypes{
  display:flex;flex-direction:column;gap:2px;
  padding:4px 10px 8px 32px;
  border-block-end:1px solid var(--border);
}
.email-subtypes.hidden{display:none}
.email-subtype-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;font-size:13px;color:var(--text-secondary);cursor:pointer;
}
.email-subtype-row input[type=checkbox]{
  width:15px;height:15px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;
}

/* ─── Filter + mini progress row ─────────────────────────────────────────── */
.filter-progress-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-block:0 16px;flex-wrap:wrap;
}
.filter-row{
  display:flex;gap:4px;
  background:var(--bg-secondary);border-radius:var(--radius-full);
  padding:3px;width:fit-content;
}
.progress-mini{display:flex;align-items:center;gap:8px;flex-shrink:0}
.progress-track-mini{width:80px;height:4px;background:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden;border:1px solid var(--border)}

/* ─── Filters ─────────────────────────────────────────────────────────────── */
.filter-btn{
  padding:7px 18px;border-radius:var(--radius-full);border:none;background:transparent;
  color:var(--text-secondary);font-size:13px;font-weight:600;font-family:var(--font-body);
  cursor:pointer;transition:all var(--duration-normal) var(--ease-out);
  min-height:34px;-webkit-tap-highlight-color:transparent;white-space:nowrap;
}
.filter-btn.active{
  background:var(--accent);color:#fff;
}
/* "Done" filter gets a green treatment so it's clearly distinct */
.filter-btn[data-filter=done].active{
  background:linear-gradient(135deg,#22C55E 0%,#16A34A 100%);
  color:#fff;
}
/* "Active" filter gets a warm amber treatment */
.filter-btn[data-filter=active].active{
  background:linear-gradient(135deg,#F59E0B 0%,#EF4444 100%);
  color:#fff;
}

/* ─── Task list ───────────────────────────────────────────────────────────── */
.task-list{display:flex;flex-direction:column;gap:10px}

/* ─── Task card ───────────────────────────────────────────────────────────── */
.task-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:16px 18px;
  cursor:pointer;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(16px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal);
}
.task-card.in{opacity:1;transform:none}
.task-card:hover{
  box-shadow:var(--shadow-md),0 0 0 1px var(--border-strong);
  transform:translateY(-2px);
  border-color:var(--border-strong);
}
.task-card[data-p=high]:hover{border-color:rgba(248,113,113,0.35);box-shadow:var(--shadow-md),0 0 16px rgba(248,113,113,0.08)}
.task-card[data-p=medium]:hover{border-color:rgba(251,191,36,0.35);box-shadow:var(--shadow-md),0 0 16px rgba(251,191,36,0.08)}
.task-card[data-p=low]:hover{border-color:rgba(96,165,250,0.35);box-shadow:var(--shadow-md),0 0 16px rgba(96,165,250,0.08)}
.task-card.done-card{opacity:0.5}
.task-card.done-card:hover{opacity:0.7;transform:none;box-shadow:var(--shadow-sm)}

/* Task remove animation */
@keyframes taskRemove{
  0%{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}
  100%{opacity:0;transform:scale(0.7) rotate(3deg);filter:blur(6px)}
}
.task-card.removing{animation:taskRemove 0.38s ease-in forwards;pointer-events:none}

/* New card bounce-in animation */
@keyframes cardNew{
  0%{opacity:0;transform:scale(0.85) translateY(-10px)}
  55%{opacity:1;transform:scale(1.03) translateY(2px)}
  75%{transform:scale(0.98)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
.card-new{animation:cardNew 0.45s var(--ease-spring) both!important;opacity:1!important;transform:none!important}

/* Priority left stripe + tinted background */
.task-card::before{
  content:'';position:absolute;inset-block:0;inset-inline-start:0;
  width:4px;background:transparent;
  transition:background var(--duration-normal);
  border-radius:0 2px 2px 0;
}
.task-card[data-p=high]::before{background:linear-gradient(180deg,#EF4444,#F97316)}
.task-card[data-p=medium]::before{background:linear-gradient(180deg,#F59E0B,#FBBF24)}
.task-card[data-p=low]::before{background:linear-gradient(180deg,#60A5FA,#93C5FD)}
.task-card[data-p=high]{background:var(--bg-card)}
.task-card[data-p=medium]{background:var(--bg-card)}
.task-card[data-p=low]{background:var(--bg-card)}

.task-inner{display:flex;align-items:flex-start;gap:14px}

/* Custom checkbox */
.task-cb{
  flex-shrink:0;width:22px;height:22px;min-width:22px;
  margin-block-start:2px;border-radius:50%;
  border:2px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:transparent;
  transition:all var(--duration-normal) var(--ease-spring);
  -webkit-tap-highlight-color:transparent;
}
.task-cb:hover{border-color:var(--accent);background:var(--accent-soft)}
.task-cb.ticked{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
  animation:cbPop var(--duration-normal) var(--ease-spring);
}
@keyframes cbPop{0%{transform:scale(0.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.task-cb svg{opacity:0;transform:scale(0.3) rotate(-10deg);transition:all var(--duration-normal) var(--ease-spring)}
.task-cb.ticked svg{opacity:1;transform:scale(1) rotate(0)}

/* Blocked checkbox — subtasks not yet complete */
.task-cb.blocked{opacity:0.3;cursor:not-allowed}
.task-cb.blocked:hover{border-color:var(--border-strong);background:transparent;box-shadow:none}

.task-body{flex:1;min-width:0}
.task-title{
  font-size:15px;font-weight:500;color:var(--text-primary);
  line-height:1.45;word-break:break-word;
  transition:color var(--duration-normal),text-decoration var(--duration-normal);
}
.task-card.done-card .task-title{
  text-decoration:line-through;
  text-decoration-color:var(--text-tertiary);
  color:var(--text-tertiary);
}
.task-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-block-start:4px}
.task-time{font-size:12px;color:var(--text-tertiary)}
.task-dur{
  font-size:12px;font-weight:600;color:var(--accent);
  padding:1px 7px;border-radius:var(--radius-full);
  outline:1px solid var(--border-accent);
}
.sub-bar{display:flex;align-items:center;gap:7px;margin-block-start:8px}
.sub-bar-track{flex:1;max-width:72px;height:3px;background:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden}
.sub-bar-fill{height:100%;background:var(--accent);border-radius:var(--radius-full);transition:width 0.35s}
.sub-bar-label{font-size:11px;color:var(--text-tertiary)}

/* ─── Skeleton ────────────────────────────────────────────────────────────── */
.skel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px}
.skel-line{height:11px;border-radius:6px;background:var(--bg-secondary);animation:shimmer 1.6s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:0.5}50%{opacity:1}}

/* ─── Empty state ─────────────────────────────────────────────────────────── */
.empty{text-align:center;padding-block:64px;display:flex;flex-direction:column;align-items:center;gap:12px}
.empty-icon{
  font-size:44px;
  animation:floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.empty-title{
  font-family:var(--font-heading);font-size:20px;font-weight:600;
  color:var(--text-primary);
}
.empty-sub{font-size:13px;color:var(--text-tertiary);max-width:240px;line-height:1.6}

/* ─── Stats row ───────────────────────────────────────────────────────────── */
.stats-row{
  display:flex;justify-content:space-between;align-items:center;
  padding-block:14px;font-size:13px;color:var(--text-tertiary);flex-wrap:wrap;gap:6px;
}

/* ─── Drawer ──────────────────────────────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;z-index:400;
  background:var(--bg-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity var(--duration-normal) var(--ease-out);
  display:flex;align-items:flex-end;justify-content:center;
}
.overlay.open{opacity:1;pointer-events:all}

.drawer{
  background:var(--bg-primary);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  width:100%;max-width:700px;max-height:92dvh;overflow-y:auto;
  padding:16px 22px 32px;box-shadow:0 -8px 40px rgba(0,0,0,0.12);
  transform:translateY(56px);
  transition:transform var(--duration-slow) var(--ease-spring);
}
.overlay.open .drawer{transform:none}

@media(min-width:640px){
  .overlay{align-items:center}
  .drawer{border-radius:var(--radius-xl);max-height:88dvh;padding:26px 32px 36px}
}

.drawer-handle{width:36px;height:4px;background:var(--border-strong);border-radius:var(--radius-full);margin-inline:auto;margin-block-end:20px}

.drawer-title-row{display:flex;align-items:flex-start;gap:12px;margin-block-end:22px}
.drawer-priority-bar{width:4px;min-height:44px;border-radius:var(--radius-full);background:transparent;flex-shrink:0;margin-block-start:4px;transition:background var(--duration-normal)}
.drawer-priority-bar[data-p=high]{background:var(--priority-high)}
.drawer-priority-bar[data-p=medium]{background:var(--priority-medium)}
.drawer-priority-bar[data-p=low]{background:var(--priority-low)}
.drawer-title{
  flex:1;font-family:var(--font-heading);font-size:1.25rem;font-weight:400;
  color:var(--text-primary);border:none;background:transparent;
  font-family:var(--font-body);outline:none;resize:none;line-height:1.4;width:100%;
  font-size:18px;font-weight:600;
}
.drawer-section{margin-block-end:24px}
.drawer-label{
  display:block;font-size:11px;font-weight:700;color:var(--text-tertiary);
  text-transform:uppercase;letter-spacing:0.08em;margin-block-end:8px;
}
.drawer-desc{
  width:100%;min-height:80px;font-family:var(--font-body);font-size:14px;
  color:var(--text-primary);background:var(--bg-secondary);
  border:1px solid var(--border);border-radius:var(--radius-md);
  padding:10px 12px;outline:none;resize:vertical;
  transition:border-color var(--duration-normal);line-height:1.6;
}
.drawer-desc:focus{border-color:var(--accent)}

/* Priority chips */
.priority-group{display:flex;gap:6px;flex-wrap:wrap}
.p-chip{
  padding:6px 14px;border-radius:var(--radius-full);border:1.5px solid var(--border-strong);
  background:transparent;color:var(--text-secondary);
  font-size:13px;font-weight:600;font-family:var(--font-body);
  cursor:pointer;transition:all var(--duration-fast);min-height:34px;
  -webkit-tap-highlight-color:transparent;
}
.p-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.p-chip.active-none{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-strong)}
.p-chip.cur[data-p=low]{background:var(--accent-soft);color:var(--accent);border-color:var(--priority-low)}
.p-chip.cur[data-p=medium]{background:rgba(245,158,11,0.1);color:#D97706;border-color:var(--priority-medium)}
.p-chip.cur[data-p=high]{background:rgba(239,68,68,0.1);color:var(--priority-high);border-color:var(--priority-high)}

/* Time info */
.time-info{display:flex;flex-direction:column;gap:6px}
.time-row{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text-secondary)}
.time-badge{font-size:11px;font-weight:600;color:var(--text-tertiary);background:var(--bg-secondary);padding:2px 8px;border-radius:var(--radius-full)}

/* Sub-tasks */
.subtask-header{display:flex;align-items:center;justify-content:space-between;margin-block-end:8px}
.subtask-count{font-size:12px;color:var(--text-tertiary);background:var(--bg-secondary);padding:2px 8px;border-radius:var(--radius-full)}
.sub-progress-wrap{display:flex;align-items:center;gap:8px;margin-block-end:10px}
.sub-progress-track{flex:1;height:4px;background:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden}
.sub-progress-fill{height:100%;background:var(--accent);border-radius:var(--radius-full);transition:width 0.4s var(--ease-out)}
.sub-progress-label{font-size:12px;color:var(--text-secondary);white-space:nowrap}
.subtask-list{display:flex;flex-direction:column;gap:5px;margin-block-end:10px}
.sub-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;background:var(--bg-secondary);border-radius:var(--radius-md);
  border:1px solid var(--border);transition:border-color var(--duration-fast);
}
.sub-item.done-sub{opacity:0.5}
.sub-cb{
  width:18px;height:18px;min-width:18px;border-radius:50%;
  border:1.5px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--duration-normal) var(--ease-spring);
  background:transparent;flex-shrink:0;-webkit-tap-highlight-color:transparent;
}
.sub-cb:hover{border-color:var(--accent)}
.sub-cb.ticked{background:var(--accent);border-color:var(--accent)}
.sub-cb svg{opacity:0;transform:scale(0.3);transition:all var(--duration-normal) var(--ease-spring)}
.sub-cb.ticked svg{opacity:1;transform:scale(1)}
.sub-body{flex:1;min-width:0}
.sub-text{font-size:14px;color:var(--text-primary);outline:none;cursor:text;word-break:break-word;display:block}
.done-sub .sub-text{text-decoration:line-through;color:var(--text-tertiary)}
.sub-meta{display:flex;align-items:center;gap:7px;margin-block-start:2px}
.sub-time{font-size:11px;color:var(--text-tertiary)}
.sub-dur{font-size:11px;font-weight:500;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:var(--radius-full)}
.sub-del{
  width:22px;height:22px;min-width:22px;border-radius:50%;border:none;
  background:transparent;cursor:pointer;color:var(--text-tertiary);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--duration-fast);flex-shrink:0;
}
.sub-del:hover{background:rgba(239,68,68,0.1);color:var(--priority-high)}

.subtask-add-row{display:flex;gap:8px;margin-block-end:0}
.subtask-add-input{
  flex:1;padding:9px 12px;border-radius:var(--radius-md);border:1px solid var(--border);
  background:var(--bg-secondary);font-family:var(--font-body);font-size:14px;
  color:var(--text-primary);outline:none;transition:border-color var(--duration-normal);
}
.subtask-add-input:focus{border-color:var(--accent)}
.subtask-add-btn{
  padding:9px 14px;border-radius:var(--radius-md);border:none;
  background:var(--accent-soft);color:var(--accent);font-size:16px;font-weight:700;
  font-family:var(--font-body);cursor:pointer;min-width:40px;min-height:40px;
  transition:all var(--duration-fast);
}
.subtask-add-btn:hover{background:var(--accent);color:#fff}

/* Drawer actions */
.drawer-actions{
  display:flex;justify-content:space-between;align-items:center;
  padding-block-start:20px;border-block-start:1px solid var(--border);
  margin-block-start:4px;
}
.btn-delete{
  padding:9px 16px;border-radius:var(--radius-md);border:none;
  background:rgba(239,68,68,0.08);color:var(--priority-high);
  font-size:14px;font-weight:600;font-family:var(--font-body);
  cursor:pointer;min-height:38px;transition:all var(--duration-fast);
}
.btn-delete:hover{background:var(--priority-high);color:#fff}
.btn-save{
  padding:9px 24px;border-radius:var(--radius-md);border:none;
  background:var(--accent);color:#fff;font-size:14px;font-weight:600;
  font-family:var(--font-body);cursor:pointer;min-height:38px;
  transition:background var(--duration-fast),transform var(--duration-fast);
}
.btn-save:hover{background:var(--accent-hover)}
.btn-save:active{transform:scale(0.96)}
.drawer-close{background:transparent;border:none}

/* ─── Confetti ────────────────────────────────────────────────────────────── */
.cp{position:fixed;pointer-events:none;z-index:9999;width:7px;height:7px;border-radius:2px}

/* ─── Animations ──────────────────────────────────────────────────────────── */
@keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:480px){
  .main{padding-inline:14px}
  .hero{padding-block:16px 12px}
  .hero-title{font-size:1.5rem}
  .navbar{padding-inline:16px}
  .drawer{padding:14px 16px 28px}
  .profile-menu{width:260px}
  .priority-group{gap:4px}
  .p-chip{padding:5px 10px;font-size:12px}
  .menu-item,.lang-item{min-height:44px}
  .add-bar{gap:6px}
  .add-input{font-size:16px}
  .filter-row{max-width:100%}
}

/* ─── Login page ──────────────────────────────────────────────────────────── */
.login-body{
  padding-block-end:0;
  min-height:100dvh;
  overflow:hidden;
}

.login-bg{
  position:fixed;inset:0;z-index:0;
  background:var(--bg-primary);
}
.login-bg::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(79,143,247,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 85% 80%, rgba(79,143,247,0.04) 0%, transparent 55%);
}

.login-wrap{
  position:relative;z-index:1;
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:24px;
  animation:fadeSlideUp var(--duration-slow) var(--ease-out) both;
}
@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

.login-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:52px 48px;
  max-width:400px;width:100%;
  box-shadow:var(--shadow-xl);
  text-align:center;
}
@media(max-width:480px){.login-card{padding:40px 28px}}

.login-logo-mark{
  font-size:2.6rem;display:block;margin-block-end:16px;
  filter:drop-shadow(0 2px 8px rgba(37,99,235,0.2));
}
.login-title{
  font-family:var(--font-heading);
  font-size:2.2rem;font-weight:700;letter-spacing:-0.5px;
  color:var(--text-primary);
  margin-block-end:8px;line-height:1;
}
.login-subtitle{
  font-size:15px;color:var(--text-secondary);
  margin-block-end:36px;line-height:1.5;
}
.google-btn{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:14px 20px;border-radius:var(--radius-md);
  border:1.5px solid var(--border-strong);background:var(--bg-card);
  font-size:15px;font-weight:600;font-family:var(--font-body);
  color:var(--text-primary);cursor:pointer;text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--duration-normal),box-shadow var(--duration-normal),transform var(--duration-normal);
}
.google-btn:hover{
  border-color:rgba(37,99,235,0.3);
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}
.google-btn:active{transform:none;box-shadow:var(--shadow-sm)}
.login-footer{margin-block-start:24px;font-size:12px;color:var(--text-tertiary)}

/* ─── Auth form (email/password) ─────────────────────────────────────────── */
.auth-divider{
  display:flex;align-items:center;gap:12px;
  margin:20px 0;color:var(--text-tertiary);font-size:13px;
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}
.auth-form{display:flex;flex-direction:column;gap:14px;text-align:start;}
.auth-field{display:flex;flex-direction:column;gap:6px;}
.auth-label{font-size:13px;font-weight:500;color:var(--text-primary);}
.auth-input{
  width:100%;padding:11px 14px;border-radius:var(--radius-md);
  border:1.5px solid var(--border);background:var(--bg-primary);
  color:var(--text-primary);font-size:15px;
  transition:border-color var(--duration-normal),box-shadow var(--duration-normal);
  box-sizing:border-box;
}
.auth-input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,0.12);
}
.auth-pw-wrap{position:relative;}
.auth-pw-wrap .auth-input{padding-inline-end:44px;}
.auth-eye{
  position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:4px;
  color:var(--text-tertiary);display:flex;align-items:center;
  transition:color var(--duration-fast);
}
.auth-eye:hover{color:var(--text-primary);}

/* Strength meter */
.auth-strength{display:flex;flex-direction:column;gap:6px;margin-top:-4px;}
.auth-strength-bar{height:4px;border-radius:99px;background:var(--border);overflow:hidden;}
.auth-strength-fill{
  height:100%;border-radius:99px;width:0;
  transition:width 0.3s ease,background 0.3s ease;
}
.auth-strength-fill.weak{background:#EF4444;}
.auth-strength-fill.medium{background:#F59E0B;}
.auth-strength-fill.strong{background:#22C55E;}
.auth-strength-label{font-size:12px;font-weight:500;color:var(--text-secondary);align-self:flex-end;margin-top:-4px;}
.auth-pw-reqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.auth-pw-reqs li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-tertiary);transition:color 0.2s;}
.auth-pw-reqs li.met{color:var(--text-primary);}
.req-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--border);background:transparent;
  transition:background 0.2s,border-color 0.2s;
}
.auth-pw-reqs li.met .req-dot{background:#22C55E;border-color:#22C55E;}

.auth-mismatch{margin:4px 0 0;font-size:12px;color:#EF4444;}

/* Submit button */
.auth-submit{
  width:100%;padding:13px 20px;border-radius:var(--radius-md);
  background:var(--accent);color:#fff;border:none;
  font-size:15px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity var(--duration-normal),transform var(--duration-fast);
  margin-top:2px;
}
.auth-submit:hover:not(:disabled){opacity:0.9;transform:translateY(-1px);}
.auth-submit:active:not(:disabled){transform:none;}
.auth-submit:disabled{opacity:0.45;cursor:not-allowed;transform:none;}
.auth-spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color:#fff;
  animation:spin 0.7s linear infinite;
}

/* Alert */
.auth-alert{
  border-radius:var(--radius-md);padding:12px 16px;font-size:14px;
  margin-bottom:8px;text-align:start;line-height:1.5;
}
.auth-alert-success{background:#DCFCE7;color:#166534;border:1px solid #BBF7D0;}
.auth-alert-error{background:#FEE2E2;color:#991B1B;border:1px solid #FECACA;}
.auth-alert-warning{background:#FEF3C7;color:#92400E;border:1px solid #FDE68A;}
.auth-alert-info{background:#DBEAFE;color:#1E3A5F;border:1px solid #BFDBFE;}
.auth-alert-link{
  background:none;border:none;padding:0;cursor:pointer;
  color:inherit;text-decoration:underline;font-size:inherit;font-weight:600;
}

/* Toggle row */
.auth-toggle-row{
  margin-top:20px;font-size:13px;color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
}
.auth-toggle-btn{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--accent);font-size:13px;font-weight:600;
  text-decoration:underline;text-underline-offset:2px;
}
.auth-toggle-btn:hover{opacity:0.8;}

/* Check-email view */
.auth-check-email{text-align:center;padding:8px 0 8px;}
.auth-check-title{font-size:15px;font-weight:600;color:var(--text-primary);margin:0 0 8px;}
.auth-check-addr{font-size:15px;color:var(--accent);font-weight:600;margin:0 0 20px;word-break:break-all;}
.auth-resend-btn{
  background:none;border:1.5px solid var(--border);border-radius:var(--radius-md);
  padding:10px 24px;font-size:14px;font-weight:500;cursor:pointer;
  color:var(--text-primary);transition:border-color var(--duration-normal),box-shadow var(--duration-normal);
}
.auth-resend-btn:hover:not(:disabled){border-color:var(--accent);box-shadow:var(--shadow-sm);}
.auth-resend-btn:disabled{opacity:0.5;cursor:not-allowed;}

/* ─── Site footer ─────────────────────────────────────────────────────────── */
.site-footer{
  text-align:center;padding:28px 20px calc(28px + env(safe-area-inset-bottom));
  font-size:12px;color:var(--text-tertiary);line-height:1.7;
  border-block-start:1px solid var(--border);
  margin-block-start:32px;
}
.site-footer a{
  color:var(--accent);text-decoration:none;font-weight:600;
  transition:color var(--duration-fast);
}
.site-footer a:hover{color:var(--accent-hover)}
.site-footer-dot{
  display:inline-block;width:3px;height:3px;border-radius:50%;
  background:var(--text-tertiary);vertical-align:middle;margin-inline:6px;opacity:0.6;
}

/* ─── Charts View ─────────────────────────────────────────────────────────── */
.charts-overlay{
  position:fixed;inset:0;z-index:350;
  background:var(--bg-primary);
  overflow-y:auto;
  animation:slideInFromRight var(--duration-slow) var(--ease-out);
}
@keyframes slideInFromRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

.charts-page{
  max-width:var(--max-w);margin-inline:auto;
  padding:20px 20px calc(40px + env(safe-area-inset-bottom));
}

.charts-header{
  display:flex;align-items:center;gap:12px;
  margin-block-end:24px;padding-block-start:8px;
}
.charts-title{
  font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--text-primary);
}
.charts-back-btn{border:none;background:transparent}

/* Stats grid */
.stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-block-end:20px;
}
@media(min-width:500px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px 16px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.stat-card::before{content:'';position:absolute;inset:0;opacity:0;pointer-events:none;}
.stat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-tertiary);margin-block-end:6px}
.stat-value{font-size:1.5rem;font-weight:700;line-height:1;color:var(--accent)}
.stat-sub{font-size:11px;color:var(--text-tertiary);margin-block-start:3px}

/* Chart tabs / Dashboard tabs / Analytics tabs — scrollable pill row */
.chart-tabs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-block-end:14px;padding-block-end:2px;scrollbar-width:none;-ms-overflow-style:none}
.chart-tabs-wrap::-webkit-scrollbar{display:none}
.chart-tabs,.dashboard-tabs,.analytics-tabs{
  display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;
  background:var(--bg-secondary);border-radius:var(--radius-full);
  padding:3px;padding-bottom:4px;
}
.chart-tabs::-webkit-scrollbar,.dashboard-tabs::-webkit-scrollbar,.analytics-tabs::-webkit-scrollbar{display:none}
.chart-tab,.dashboard-tabs button,.analytics-tabs button{
  flex-shrink:0;
  padding:7px 16px;border-radius:var(--radius-full);border:none;background:transparent;
  color:var(--text-secondary);font-size:13px;font-weight:600;font-family:var(--font-body);
  cursor:pointer;white-space:nowrap;min-height:34px;
  transition:all var(--duration-normal) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.chart-tab.active,.dashboard-tabs button.active,.analytics-tabs button.active{
  background:var(--accent);color:#fff;
}
@media(max-width:640px){
  .chart-tab,.dashboard-tabs button,.analytics-tabs button{padding:6px 12px;font-size:12px}
}

/* Line period row */
.line-period-row{
  display:flex;gap:8px;margin-block-end:14px;
}
.period-btn{
  padding:6px 14px;border-radius:var(--radius-full);border:1.5px solid var(--border-strong);
  background:transparent;color:var(--text-secondary);font-size:12px;font-weight:600;
  font-family:var(--font-body);cursor:pointer;
  transition:all var(--duration-fast);min-height:32px;
  -webkit-tap-highlight-color:transparent;
}
.period-btn.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

/* Chart container */
.chart-container{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--shadow-sm);
  position:relative;min-height:280px;
  display:flex;align-items:center;justify-content:center;
}
.chart-container canvas{max-width:100%!important}

.chart-nodata{
  text-align:center;padding:40px;color:var(--text-tertiary);font-size:14px;
}

/* chart-btn in navbar */
.chart-btn{border:none;background:transparent}
.chart-btn:hover{background:var(--bg-secondary)}
/* Active nav icon */
.icon-btn.nav-active{color:var(--accent);background:var(--accent-soft);border-color:transparent}

/* ─── Confirmation/Create modal ──────────────────────────────────────────── */
.confirm-overlay{
  position:fixed;inset:0;z-index:700;
  background:var(--bg-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity var(--duration-normal) var(--ease-out);
}
.confirm-overlay.open{opacity:1}
.confirm-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:32px 28px;
  max-width:360px;width:100%;box-shadow:var(--shadow-xl);
  transform:scale(0.94) translateY(8px);
  transition:transform var(--duration-normal) var(--ease-spring);
  text-align:center;
}
.confirm-overlay.open .confirm-card{transform:none}
.modal-wide{max-width:440px;text-align:start}
.confirm-icon{font-size:32px;margin-block-end:12px}
.confirm-title{font-size:17px;font-weight:700;color:var(--text-primary);margin-block-end:10px}
.confirm-msg{font-size:14px;color:var(--text-secondary);margin-block-end:24px;line-height:1.6}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end;margin-block-start:20px}
.confirm-cancel{
  padding:9px 18px;border-radius:var(--radius-md);border:1.5px solid var(--border-strong);
  background:transparent;color:var(--text-secondary);font-size:14px;font-weight:600;
  font-family:var(--font-body);cursor:pointer;min-height:38px;
  transition:all var(--duration-fast);
}
.confirm-cancel:hover{background:var(--bg-secondary);color:var(--text-primary)}
.confirm-ok{
  padding:9px 22px;border-radius:var(--radius-md);border:none;
  background:#EF4444;color:#fff;font-size:14px;font-weight:600;
  font-family:var(--font-body);cursor:pointer;min-height:38px;
  transition:opacity var(--duration-fast),transform var(--duration-fast);
}
.confirm-ok:hover{opacity:0.88}
.confirm-ok:active{transform:scale(0.96)}

.modal-input{
  width:100%;padding:10px 14px;border-radius:var(--radius-md);
  border:1.5px solid var(--border-strong);background:var(--bg-secondary);
  font-family:var(--font-body);font-size:14px;color:var(--text-primary);
  outline:none;margin-block-end:12px;
  transition:border-color var(--duration-fast);
}
.modal-input:focus{border-color:var(--accent)}

/* Color picker */
.color-picker-row{display:flex;gap:8px;flex-wrap:wrap;margin-block-end:16px}
.color-dot{
  width:28px;height:28px;border-radius:50%;border:2.5px solid transparent;
  cursor:pointer;transition:transform var(--duration-fast),border-color var(--duration-fast);
  flex-shrink:0;
}
.color-dot:hover{transform:scale(1.15)}
.color-dot.active{border-color:var(--text-primary);transform:scale(1.2)}

/* ─── Groups List Page ────────────────────────────────────────────────────── */
.groups-page{padding-block-start:calc(var(--nav-h) + 20px)}
.groups-header{
  display:flex;align-items:center;gap:12px;margin-block-end:20px;
}
.groups-title{
  flex:1;font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--text-primary);
}

.group-card{
  display:flex;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);margin-block-end:10px;overflow:hidden;
  cursor:pointer;box-shadow:var(--shadow-sm);
  transition:box-shadow var(--duration-normal),transform var(--duration-normal);
}
.group-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.group-card-stripe{width:5px;background:var(--g-color,#4F8FF7);flex-shrink:0}
.group-card-body{flex:1;padding:14px 16px}
.group-card-top{display:flex;align-items:center;gap:10px;margin-block-end:4px}
.group-card-name{font-size:15px;font-weight:700;color:var(--text-primary)}
.group-card-desc{font-size:13px;color:var(--text-secondary);margin-block-end:8px}
.group-card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.group-card-stats{font-size:12px;color:var(--text-tertiary)}

/* Member avatars */
.gm-avatars{display:flex;flex-wrap:nowrap}
.gm-avatar{
  --avatar-size:26px;
  width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;object-fit:cover;
  border:2px solid var(--bg-card);margin-inline-end:-6px;flex-shrink:0;
}
.gm-avatar.sm{--avatar-size:20px}
.gm-avatar-fb{
  background:var(--gradient);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);
  font-size:calc(var(--avatar-size) * var(--avatar-letter-ratio));
  font-weight:700;color:#fff;line-height:1;text-transform:uppercase;
}
.gm-avatar-more{background:var(--bg-secondary);color:var(--text-secondary);font-size:9px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center}

/* Role badges */
.role-badge{
  padding:2px 9px;border-radius:var(--radius-full);font-size:11px;font-weight:700;
}
.role-admin{background:rgba(79,143,247,0.15);color:#4F8FF7}
.role-manager{background:rgba(59,130,246,0.15);color:#2563EB}
.role-member{background:var(--bg-secondary);color:var(--text-secondary)}
.pending-badge{
  padding:2px 8px;border-radius:var(--radius-full);font-size:11px;font-weight:600;
  background:rgba(245,158,11,0.15);color:#D97706;
}

/* ─── Group Board Page ────────────────────────────────────────────────────── */
.group-board-page{padding-block-start:calc(var(--nav-h) + 20px)}
.gb-header{
  display:flex;align-items:center;gap:10px;margin-block-end:20px;flex-wrap:wrap;
}
.gb-name{font-size:1.3rem;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-member-avatars{display:flex}

.gb-task-list{display:flex;flex-direction:column;gap:6px;margin-block-start:8px}
.group-task-row{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:10px 14px;
  transition:box-shadow var(--duration-fast),border-color var(--duration-fast);
}
.group-task-row:hover{box-shadow:var(--shadow-sm);border-color:var(--border-strong)}
.group-task-row.gt-done{opacity:0.5}
.group-task-row.gt-done .gt-title{text-decoration:line-through;color:var(--text-tertiary)}
.gt-title{flex:1;font-size:14px;font-weight:500;color:var(--text-primary);word-break:break-word}
.gt-assignee{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-secondary);white-space:nowrap;min-width:80px}
.gt-unassigned{color:var(--text-tertiary);font-style:italic}
.gt-priority{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.gt-del{
  width:24px;height:24px;border:none;background:transparent;cursor:pointer;
  color:var(--text-tertiary);font-size:13px;flex-shrink:0;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  transition:color var(--duration-fast),background var(--duration-fast);
}
.gt-del:hover{color:var(--priority-high);background:rgba(239,68,68,0.1)}
/* Sub-task count badge inside group task title */
.gt-sub-count{
  display:inline-flex;align-items:center;margin-inline-start:6px;
  font-size:11px;font-weight:500;color:var(--text-tertiary);
  background:var(--bg-secondary);padding:1px 6px;border-radius:var(--radius-full);
  border:1px solid var(--border);vertical-align:middle;
}
/* Subtask items inside group task detail modal */
.subtask-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;background:var(--bg-secondary);border-radius:var(--radius-md);
  border:1px solid var(--border);
}
.subtask-cb{
  width:18px;height:18px;min-width:18px;border-radius:50%;
  border:1.5px solid var(--border-strong);background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:all 0.18s;color:var(--text-secondary);
}
.subtask-cb.st-done{background:var(--accent);border-color:var(--accent);color:#fff}
.subtask-cb:hover{border-color:var(--accent)}
.subtask-text{flex:1;font-size:13px;color:var(--text-primary)}
.subtask-text.st-done-text{text-decoration:line-through;color:var(--text-tertiary)}
.subtask-del-btn{
  width:20px;height:20px;border:none;background:transparent;cursor:pointer;
  color:var(--text-tertiary);font-size:12px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.subtask-del-btn:hover{color:var(--priority-high);background:rgba(239,68,68,0.1)}

.gb-select{
  padding:6px 10px;border-radius:var(--radius-md);border:1.5px solid var(--border-strong);
  background:var(--bg-secondary);font-family:var(--font-body);font-size:13px;
  color:var(--text-primary);outline:none;cursor:pointer;max-width:140px;
  transition:border-color var(--duration-fast);
}
.gb-select:focus{border-color:var(--accent)}

/* ─── Members modal ───────────────────────────────────────────────────────── */
.members-modal{text-align:start}
.member-row{
  display:flex;align-items:center;gap:10px;padding:10px 0;
  border-block-end:1px solid var(--border);
}
.member-wrap:last-child>.member-row{border-block-end:none}

/* ─── Pending invite toggle ───────────────────────────────────────────────── */
.pending-toggle{
  cursor:pointer;display:inline-flex;align-items:center;gap:3px;
  transition:background var(--duration-fast);border-radius:var(--radius-full);
}
.pending-toggle:hover{background:rgba(245,158,11,0.3)}
.pending-chevron{flex-shrink:0;transition:transform 0.2s var(--ease-out)}
.pending-toggle-open .pending-chevron{transform:rotate(180deg)}
.pending-link-drop{
  display:none;padding:6px 0 10px 44px;
}
.pending-link-url{
  font-size:11px;color:var(--text-secondary);background:var(--bg-secondary);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:6px 10px;font-family:monospace;word-break:break-all;margin-block-end:6px;
}
.pending-copy-btn{
  font-size:12px;font-weight:600;font-family:var(--font-body);
  color:var(--accent);background:transparent;border:1px solid var(--accent);
  border-radius:var(--radius-sm);padding:3px 12px;cursor:pointer;
  transition:all var(--duration-fast);
}
.pending-copy-btn:hover{background:var(--accent);color:#fff}
.member-info{flex:1;min-width:0}
.member-name{font-size:13px;font-weight:600;color:var(--text-primary)}
.member-email{font-size:11px;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role-select{
  padding:4px 8px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  background:var(--bg-secondary);font-family:var(--font-body);font-size:12px;
  color:var(--text-primary);cursor:pointer;outline:none;
}
.leave-btn{
  padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  background:transparent;color:var(--text-secondary);font-size:12px;font-weight:600;
  font-family:var(--font-body);cursor:pointer;transition:all var(--duration-fast);white-space:nowrap;
}
.leave-btn:hover{background:rgba(239,68,68,0.1);color:var(--priority-high);border-color:var(--priority-high)}

/* ─── Invite link box & status ───────────────────────────────────────────── */
.invite-error-msg{
  font-size:13px;color:#EF4444;background:rgba(239,68,68,0.08);
  border:1px solid rgba(239,68,68,0.25);border-radius:var(--radius-md);
  padding:8px 12px;margin-block:8px 0;line-height:1.4;
}
.invite-link-box{
  background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:10px 14px;font-size:12px;color:var(--text-secondary);word-break:break-all;
  margin-block-end:12px;font-family:monospace;
}
.invite-status-ok{
  font-size:16px;font-weight:700;color:var(--text-primary);
  margin-block-end:6px;
}
.invite-status-sub{
  font-size:13px;color:var(--text-secondary);line-height:1.5;
  margin:0 0 16px 0;
}

/* ─── Notification bell badge ─────────────────────────────────────────────── */
.notif-badge{
  position:absolute;top:2px;inset-inline-end:2px;
  width:16px;height:16px;border-radius:50%;
  background:#EF4444;color:#fff;font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg-primary);
}

/* ─── Notification dropdown ───────────────────────────────────────────────── */
.notif-dropdown{
  position:absolute;inset-block-start:calc(100% + 10px);inset-inline-end:0;
  width:320px;z-index:500;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);
  overflow:hidden;animation:fadeUp var(--duration-normal) var(--ease-out);
}
.notif-dropdown-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 10px;border-block-end:1px solid var(--border);
  font-size:14px;font-weight:700;color:var(--text-primary);
}
.notif-dropdown-list{max-height:340px;overflow-y:auto}
.notif-drop-item{
  padding:11px 14px;border-block-end:1px solid var(--border);
  cursor:pointer;transition:background var(--duration-fast);
}
.notif-drop-item:last-child{border-block-end:none}
.notif-drop-item:hover{background:var(--accent-soft)}
.notif-drop-item.unread{background:rgba(79,143,247,0.05)}
.notif-drop-text{font-size:13px;color:var(--text-primary);line-height:1.4;margin-block-end:3px}
.notif-drop-time{font-size:11px;color:var(--text-tertiary)}
.notif-empty{padding:24px;text-align:center;font-size:13px;color:var(--text-tertiary)}
.link-btn{
  background:none;border:none;color:var(--accent);font-size:12px;font-weight:600;
  font-family:var(--font-body);cursor:pointer;padding:0;
}
.link-btn:hover{text-decoration:underline}

/* ─── Status indicators ───────────────────────────────────────────────────── */
.task-cb.in-progress{background:#3B82F6;border-color:#3B82F6;animation:pulseDot 1.5s infinite}
.task-card.in-progress-card{border-left:3px solid #3B82F6}
.group-task-row.in-progress-card{border-left:3px solid #3B82F6}
/* Group task assignee badge inside task-meta */
.task-assignee-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary)}
/* Inline delete button on group task card */
.task-card-del{
  width:24px;height:24px;border:none;background:transparent;cursor:pointer;flex-shrink:0;
  color:var(--text-tertiary);font-size:13px;border-radius:4px;align-self:flex-start;
  display:flex;align-items:center;justify-content:center;margin-block-start:2px;
  transition:color var(--duration-fast),background var(--duration-fast);
}
.task-card-del:hover{color:var(--priority-high);background:rgba(239,68,68,0.1)}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:0.6}}

/* ─── 3-segment progress bar ─────────────────────────────────────────────── */
.progress-fill-done{background:#22C55E}
.progress-fill-prog{background:#3B82F6}

/* ─── Time badges on cards ───────────────────────────────────────────────── */
.time-badge{font-size:11px;color:var(--text-tertiary)}
.due-badge{font-size:11px}
.due-badge.overdue{color:#EF4444;font-weight:600}
.due-badge.due-soon{color:#F59E0B}
.due-badge.due-ok{color:#22C55E}

/* ─── Inline analytics ───────────────────────────────────────────────────── */
.inline-analytics{margin:8px 0}
.analytics-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-size:14px;color:var(--text-secondary);padding:8px 0;width:100%;text-align:left;font-family:var(--font-body)}
.analytics-toggle:hover{color:var(--text-primary)}
.analytics-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-top:4px}
.chart-container-inline{position:relative;height:220px;margin:12px 0}
.analytics-stats-row{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;padding:8px 0}
.perf-table{display:flex;flex-direction:column;gap:8px;font-size:13px;margin-top:8px}
.perf-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.stats-grid-mini{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary);margin-top:8px}
.done-stat{color:#22C55E}
.prog-stat{color:#3B82F6}

/* ─── More options in add form ───────────────────────────────────────────── */
.more-options-toggle{font-size:12px;color:var(--text-tertiary);cursor:pointer;padding:4px 12px}
.more-options-toggle:hover{color:var(--accent)}
.more-options{padding:8px 12px;border-top:1px solid var(--border)}
.time-row{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13px}
.time-row label{color:var(--text-secondary);min-width:70px}
.time-row select,.time-row input{flex:1;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);font-family:var(--font-body);font-size:13px;color:var(--text-primary)}

/* ─── Status dropdown in detail ──────────────────────────────────────────── */
.status-select{padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);font-family:var(--font-body);font-size:14px;width:100%}

/* ─── Time detail grid in drawer ─────────────────────────────────────────── */
.time-detail-grid{display:flex;flex-direction:column;gap:10px}
.time-row-detail{display:flex;align-items:center;gap:10px}
.time-label{font-size:13px;color:var(--text-secondary);min-width:80px}
.time-row-detail select,.time-row-detail input{flex:1;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);font-family:var(--font-body);font-size:13px;color:var(--text-primary)}
.time-info-block{font-size:13px;color:var(--text-secondary);background:var(--bg-secondary);border-radius:var(--radius-md);padding:10px 12px;margin-top:8px}
.time-perf-green{color:#22C55E;font-weight:600}
.time-perf-yellow{color:#F59E0B;font-weight:600}
.time-perf-red{color:#EF4444;font-weight:600}

/* ─── Jira Dashboard ──────────────────────────────────────────── */
.gb-dashboard { padding: 0; }

.dash-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media(max-width:600px) { .dash-cards { grid-template-columns: repeat(2,1fr); } }

.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: center;
}
.dash-card-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.dash-card-label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.dash-card-pct {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}
.dash-card-done .dash-card-pct { color: #22C55E; }
.dash-card-prog .dash-card-pct { color: #3B82F6; }
.dash-card-over .dash-card-pct { color: #EF4444; }
.dash-card-done { border-top: 3px solid #22C55E; }
.dash-card-prog { border-top: 3px solid #3B82F6; }
.dash-card-over { border-top: 3px solid #EF4444; }

.dash-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
}
.dash-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* Member workload */
.dash-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.dash-member-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 110px;
}
.dash-member-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.dash-bar-wrap { flex: 1; }
.dash-bar-bg {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.dash-bar-done {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: #22C55E;
  border-radius: 4px;
  transition: width 0.3s;
}
.dash-bar-prog {
  position: absolute;
  top: 0;
  height: 100%;
  background: #3B82F6;
  border-radius: 4px;
  transition: width 0.3s;
}
.dash-member-frac { font-size: 12px; color: var(--text-tertiary); min-width: 60px; text-align: end; }
.dash-member-pct { font-size: 12px; font-weight: 600; color: var(--text-primary); min-width: 32px; text-align: end; }

/* Kanban */
.dash-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media(max-width:600px) { .dash-kanban { grid-template-columns: 1fr; } }

.dash-col {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dash-col-header {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-col-todo { background: rgba(107,114,128,0.15); color: var(--text-secondary); }
.dash-col-prog { background: rgba(59,130,246,0.15); color: #3B82F6; }
.dash-col-done { background: rgba(34,197,94,0.15); color: #22C55E; }
.dash-col-count {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
}
.dash-col-body {
  padding: 8px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-task-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.dash-task-card.dash-task-overdue {
  border-color: rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.04);
}
.dash-task-title {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dash-task-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dash-task-assignee {
  font-size: 11px;
  color: var(--text-tertiary);
  flex: 1;
}
.dash-priority-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Activity feed */
.dash-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.dash-activity-item:last-child { border-bottom: none; }
.dash-activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 5px;
  flex-shrink: 0;
}
.dash-activity-text {
  flex: 1;
  color: var(--text-secondary);
  line-height: 1.4;
}
.dash-activity-time {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
.dash-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 13px;
}
.dash-members { display: flex; flex-direction: column; }

/* ─── Drag and Drop (Kanban board) ─────────────────────────────────────────── */
.kanban-card {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging {
  cursor: grabbing;
  transform: rotate(2deg) scale(1.04);
  box-shadow: 0 14px 40px rgba(0,0,0,0.22);
  opacity: 0.88;
  z-index: 100;
}
.kanban-column.drag-over {
  background: var(--accent-soft);
  outline: 2px dashed var(--accent);
  border-radius: var(--radius-md);
  transition: background 0.15s ease, outline 0.15s ease;
}
.touch-drag-clone {
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  border-radius: var(--radius-md);
  pointer-events: none;
}

/* ─── Import row (group board) ───────────────────────────────────────────── */
.gb-import-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-block: 6px 4px;
}
.gb-import-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--duration-fast);
  -webkit-tap-highlight-color: transparent;
}
.gb-import-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* ─── Import / Export Help modals ───────────────────────────────────────── */
.import-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.import-modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%; max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.import-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 15px;
}
.import-modal-body { padding: 20px; flex: 1; }
.import-modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

/* Dropzone */
.import-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-fast);
  color: var(--text-secondary);
  font-size: 14px;
}
.import-dropzone:hover, .import-dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.import-dropzone-icon { font-size: 32px; margin-bottom: 8px; }
.import-dropzone-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.import-file-input { display: none; }

/* Platform selector */
.import-platform-btns {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.import-platform-btn {
  flex: 1; min-width: 80px;
  padding: 10px 12px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px; font-weight: 600; font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--duration-fast);
  text-align: center;
}
.import-platform-btn:hover,.import-platform-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Export help instructions */
.export-instructions { margin-top: 12px; }
.export-instructions ol { padding-left: 18px; }
.export-instructions li {
  font-size: 13px; color: var(--text-secondary);
  margin-bottom: 8px; line-height: 1.5;
}
.export-tip {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px; color: var(--text-secondary);
  margin-top: 12px; line-height: 1.5;
}
.export-csv-example {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11px; font-family: monospace;
  color: var(--text-primary);
  margin-top: 8px; white-space: pre; overflow-x: auto;
}

/* Column mapping preview */
.import-mapping-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.import-mapping-table td {
  padding: 5px 8px; font-size: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.import-mapping-table td:first-child { font-weight: 600; color: var(--text-primary); }
.import-mapping-check { color: #22C55E; }
.import-mapping-opt { color: var(--text-tertiary); }

.import-preview-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.import-preview-table th {
  text-align: left; padding: 4px 8px;
  background: var(--bg-secondary); font-weight: 600; font-size: 11px;
  color: var(--text-tertiary); text-transform: uppercase;
}
.import-preview-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }

/* Import results */
.import-result-summary { list-style: none; padding: 0; margin: 0; }
.import-result-summary li { padding: 4px 0; font-size: 13px; color: var(--text-secondary); }
.import-result-summary li::before { content: '• '; color: var(--accent); }

.import-unmatched-list { margin-top: 8px; }
.import-unmatched-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  font-size: 13px;
}
.import-quick-invite-btn {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--accent);
  background: transparent; color: var(--accent);
  font-size: 11px; font-weight: 600; font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.import-quick-invite-btn:hover { background: var(--accent); color: #fff; }
.import-success-icon { font-size: 24px; margin-bottom: 8px; }
.import-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin: 12px 0 4px; }
.import-source-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
.import-source-select { flex: 1; }


/* ─── Accessibility ──────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 8px; }

/* Visible focus rings for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Priority flash ─────────────────────────────────────────────────────── */
@keyframes priorityFlash {
  0%   { box-shadow: 0 0 0 3px rgba(79,143,247,0.5); }
  100% { box-shadow: var(--shadow-sm); }
}
.priority-updated { animation: priorityFlash 0.45s ease forwards; }

/* ─── Time Picker ────────────────────────────────────────────────────────── */
.time-picker-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.55);
  display:flex;align-items:center;justify-content:center;
  z-index:10000;animation:fadeIn 0.2s ease;
}
.time-picker{
  background:var(--bg-elevated,var(--bg-secondary));border-radius:var(--radius-xl,16px);
  padding:24px;width:280px;box-shadow:var(--shadow-xl,0 24px 64px rgba(0,0,0,0.5));
  animation:scaleIn 0.25s ease;
}
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.time-picker-title{
  text-align:center;font-size:16px;font-weight:600;
  color:var(--text-primary);margin-bottom:20px;
}
.time-picker-wheels{
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.time-picker-separator{
  font-size:28px;font-weight:700;color:var(--text-primary);padding-bottom:4px;
}
.time-wheel{width:80px;position:relative}
.time-wheel::before{
  content:'';position:absolute;top:50%;left:0;right:0;height:38px;
  transform:translateY(-50%);
  border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);
  pointer-events:none;z-index:1;
}
.time-wheel-list{
  height:180px;overflow-y:auto;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.time-wheel-list::-webkit-scrollbar{display:none}
.time-wheel-item{
  height:36px;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:500;color:var(--text-tertiary);
  cursor:pointer;scroll-snap-align:center;
  transition:all 0.15s ease;border-radius:var(--radius-sm,6px);
  user-select:none;
}
.time-wheel-item.time-wheel-pad{cursor:default}
.time-wheel-item:hover:not(.time-wheel-pad){color:var(--text-secondary)}
.time-wheel-item.selected{
  font-size:26px;font-weight:700;color:var(--accent);
  background:var(--accent-soft,rgba(79,143,247,0.12));
}
.time-picker-labels{
  display:flex;justify-content:center;gap:80px;margin-top:8px;
  font-size:11px;color:var(--text-tertiary);
  text-transform:uppercase;letter-spacing:1px;
}
.time-picker-buttons{display:flex;gap:8px;margin-top:20px}
.time-picker-buttons button{flex:1;padding:10px;font-size:14px}

/* Time picker trigger button */
.time-picker-trigger{
  background:var(--bg-input,var(--bg-secondary));border:1.5px solid var(--border-strong);
  border-radius:var(--radius-md,8px);padding:4px 10px;
  color:var(--text-tertiary);font-size:13px;font-family:var(--font-body);
  cursor:pointer;transition:all var(--duration-fast,150ms) ease;
  min-width:80px;text-align:center;white-space:nowrap;
}
.time-picker-trigger:hover{border-color:var(--accent);color:var(--text-secondary)}
.time-picker-trigger.has-value{
  color:var(--text-primary);font-weight:600;
  font-variant-numeric:tabular-nums;
}

@media(max-width:640px){
  .time-picker{width:calc(100vw - 48px);max-width:320px}
  .time-wheel-list{height:200px}
  .time-wheel-item{height:40px;font-size:22px}
  .time-wheel-item.selected{font-size:28px}
}

/* ─── Global micro-interactions ──────────────────────────────────────────── */

/* Subtle background warmth */
body {
  background: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(91,155,248,0.04) 0%, transparent 60%),
              var(--bg-primary);
}

/* Button press feel */
button:active:not(:disabled),
.icon-btn:active,
.add-btn:active,
.btn-primary:active,
.btn-secondary:active { transform: scale(0.95) !important; }

/* Icon button spring on hover */
.icon-btn:hover { transform: translateY(-1px); }

/* Navbar bottom glow line */
.navbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 40%, rgba(251,191,36,0.4) 60%, transparent 100%);
  opacity: 0.35;
}

/* Task checkbox springy pop */
@keyframes cbSpring {
  0%  { transform: scale(1); }
  35% { transform: scale(1.35) rotate(-8deg); }
  65% { transform: scale(0.88) rotate(3deg); }
  100%{ transform: scale(1) rotate(0); }
}
.task-checkbox.just-checked { animation: cbSpring 0.4s var(--ease-spring); }

/* Ripple effect on card click */
@keyframes rippleOut {
  0%   { transform: scale(0); opacity: 0.35; }
  100% { transform: scale(4); opacity: 0; }
}
.ripple {
  position: absolute; border-radius: 50%;
  width: 60px; height: 60px;
  background: rgba(255,255,255,0.15);
  pointer-events: none;
  transform: scale(0);
  animation: rippleOut 0.55s ease-out forwards;
}

/* Completed task sparkle */
@keyframes sparkle {
  0%   { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0) translateY(-20px); }
}
.sparkle-dot {
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  animation: sparkle 0.6s ease-out forwards;
}

/* Smooth glow ring on focused inputs */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-medium);
  border-color: var(--accent) !important;
  transition: box-shadow var(--duration-normal), border-color var(--duration-normal);
}

/* Navbar icon active pulse ring */
@keyframes navRing {
  0%   { box-shadow: 0 0 0 0 var(--accent-medium); }
  70%  { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.navbar-icon.active { animation: navRing 1.8s ease-out infinite; }

/* Group task card row hover lift */
.group-task-item:hover, .gtask-row:hover {
  background: var(--bg-card-hover) !important;
  transform: translateX(2px);
  transition: background var(--duration-fast), transform var(--duration-fast);
}

/* Colored accent on priority badge in task list */
.priority-badge[data-priority=high]  { background: rgba(248,113,113,0.15); color: var(--priority-high); }
.priority-badge[data-priority=medium]{ background: rgba(251,191,36,0.15);  color: var(--priority-medium); }
.priority-badge[data-priority=low]   { background: rgba(96,165,250,0.15);  color: var(--priority-low); }

/* Smooth modal open */
.confirm-overlay { animation: fadeIn 0.18s ease; }
.confirm-card    { animation: scaleIn 0.22s var(--ease-out); }

/* ─── View toggle (List ⇄ Board) ─────────────────────────────────────────── */
.view-toggle{
  display:flex;gap:2px;background:var(--bg-secondary);
  border:1px solid var(--border);border-radius:var(--radius-md);
  padding:3px;flex-shrink:0;
}
.vt-btn{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:calc(var(--radius-md) - 3px);border:none;
  background:transparent;color:var(--text-tertiary);
  font-size:12.5px;font-weight:600;font-family:var(--font-body);
  cursor:pointer;min-height:30px;white-space:nowrap;
  transition:background var(--duration-fast),color var(--duration-fast),box-shadow var(--duration-fast);
  -webkit-tap-highlight-color:transparent;
}
.vt-btn:hover{color:var(--text-primary)}
.vt-btn.active{
  background:var(--bg-elevated);color:var(--text-primary);
  box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--border);
}
.vt-btn svg{flex-shrink:0}
@media(max-width:480px){.vt-btn span{display:none}.vt-btn{padding:6px 10px}}

/* ─── Status pill (Monday-style) ─────────────────────────────────────────── */
.status-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:1px 9px;border-radius:var(--radius-full);
  font-size:11px;font-weight:600;letter-spacing:0.01em;
  white-space:nowrap;line-height:1.7;
}
.status-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.status-pill.st-todo{background:var(--status-todo-soft);color:var(--status-todo)}
.status-pill.st-prog{background:var(--status-progress-soft);color:var(--status-progress)}
.status-pill.st-done{background:var(--status-done-soft);color:var(--status-done)}

/* Priority chip on cards */
.prio-chip{
  display:inline-flex;align-items:center;
  padding:1px 8px;border-radius:var(--radius-full);
  font-size:11px;font-weight:600;line-height:1.7;white-space:nowrap;
}
.prio-chip.pr-high{background:rgba(248,113,113,0.13);color:var(--priority-high)}
.prio-chip.pr-medium{background:rgba(251,191,36,0.13);color:#D97706}
[data-mode=dark] .prio-chip.pr-medium{color:var(--priority-medium)}
.prio-chip.pr-low{background:rgba(96,165,250,0.13);color:var(--priority-low)}

/* ─── Board (Kanban) view ────────────────────────────────────────────────── */
.main.board-wide{max-width:var(--max-w-board)}
.board{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;align-items:start;padding-block-end:8px;
}
.board-col{
  background:var(--bg-secondary);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;min-width:0;
  transition:background var(--duration-fast),border-color var(--duration-fast),box-shadow var(--duration-fast);
}
.board-col.drag-over{
  background:var(--accent-soft);
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 0 24px var(--accent-soft);
}
.board-col-head{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px 9px;
  font-size:12px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  border-block-end:2px solid transparent;
}
.board-col[data-status=todo] .board-col-head{color:var(--status-todo);border-color:var(--status-todo)}
.board-col[data-status=in_progress] .board-col-head{color:var(--status-progress);border-color:var(--status-progress)}
.board-col[data-status=done] .board-col-head{color:var(--status-done);border-color:var(--status-done)}
.board-col-count{
  margin-inline-start:auto;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-full);padding:0 8px;
  font-size:11px;font-weight:700;line-height:1.7;color:var(--text-secondary);
}
.board-col-body{
  display:flex;flex-direction:column;gap:8px;
  padding:10px;min-height:60px;
  max-height:calc(100dvh - 320px);overflow-y:auto;
}
@media(max-width:768px){.board-col-body{max-height:none;overflow-y:visible}}
.board-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:11px 12px;
  cursor:pointer;position:relative;
  box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(10px);
  transition:opacity var(--duration-normal) var(--ease-out),
             transform var(--duration-normal) var(--ease-out),
             box-shadow var(--duration-fast),border-color var(--duration-fast);
  -webkit-tap-highlight-color:transparent;
}
.board-card.in{opacity:1;transform:none}
.board-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);transform:translateY(-1px)}
.board-card:active{cursor:grabbing}
.board-card.dragging{
  opacity:0.45;
  box-shadow:none;
}
.board-card[data-p=high]{border-inline-start:3px solid var(--priority-high)}
.board-card[data-p=medium]{border-inline-start:3px solid var(--priority-medium)}
.board-card[data-p=low]{border-inline-start:3px solid var(--priority-low)}
.board-card-title{
  font-size:13.5px;font-weight:500;color:var(--text-primary);
  line-height:1.45;word-break:break-word;margin-block-end:6px;
}
.board-col[data-status=done] .board-card-title{color:var(--text-tertiary);text-decoration:line-through;text-decoration-color:var(--text-tertiary)}
.board-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.board-card-meta .gm-avatar{margin-inline-end:0;border-width:1px}
.board-card-meta .due-badge,.board-card-meta .time-badge{font-size:10.5px}
.board-card .sub-bar{margin-block-start:6px}
.board-empty{
  border:1.5px dashed var(--border-strong);border-radius:var(--radius-md);
  padding:18px 10px;text-align:center;
  font-size:12px;color:var(--text-tertiary);
}
.touch-drag-ghost{
  position:fixed;z-index:10000;pointer-events:none;
  opacity:0.92;transform:rotate(2.5deg) scale(1.04);
  box-shadow:0 16px 44px rgba(0,0,0,0.35);
  border-radius:var(--radius-md);transition:none;
}

/* Quick add at column bottom */
.board-quick-add{padding:0 10px 10px}
.bqa-btn{
  display:flex;align-items:center;gap:7px;width:100%;
  padding:8px 10px;border-radius:var(--radius-md);border:none;
  background:transparent;color:var(--text-tertiary);
  font-size:13px;font-weight:600;font-family:var(--font-body);
  cursor:pointer;text-align:start;min-height:36px;
  transition:background var(--duration-fast),color var(--duration-fast);
  -webkit-tap-highlight-color:transparent;
}
.bqa-btn:hover{background:var(--bg-card);color:var(--text-primary)}
.bqa-input{
  width:100%;padding:9px 11px;border-radius:var(--radius-md);
  border:1.5px solid var(--accent);background:var(--bg-card);
  font-family:var(--font-body);font-size:13.5px;color:var(--text-primary);
  outline:none;box-shadow:0 0 0 3px var(--accent-soft);
}

/* Mobile: Trello-style horizontal snap columns */
@media(max-width:768px){
  .board{
    display:flex;overflow-x:auto;gap:10px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:-14px;padding-inline:14px;
    scrollbar-width:none;
  }
  .board::-webkit-scrollbar{display:none}
  .board-col{min-width:80vw;scroll-snap-align:center;flex-shrink:0}
}

/* Board card pop on drop */
@keyframes boardDropIn{
  0%{transform:scale(0.96)}
  55%{transform:scale(1.025)}
  100%{transform:scale(1)}
}
.board-card.dropped{animation:boardDropIn 0.3s var(--ease-spring)}

/* ─── Navbar brand mark ──────────────────────────────────────────────────── */
.nav-mark{
  width:24px;height:24px;border-radius:7px;flex-shrink:0;
  background:var(--gradient);
  display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 2px 8px var(--accent-medium);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AURORA LAYER — bold theme + motion everywhere
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ambient: drifting aurora blobs behind everything ── */
body{background:var(--bg-primary)}
body::before,body::after{
  content:'';position:fixed;z-index:-1;border-radius:50%;
  pointer-events:none;will-change:transform;
}
body::before{
  width:62vmax;height:62vmax;top:-28vmax;inset-inline-start:-18vmax;
  background:radial-gradient(circle at center, var(--blob-a) 0%, transparent 65%);
  animation:blobDriftA 26s ease-in-out infinite alternate;
}
body::after{
  width:54vmax;height:54vmax;bottom:-26vmax;inset-inline-end:-16vmax;
  background:radial-gradient(circle at center, var(--blob-b) 0%, transparent 65%);
  animation:blobDriftB 32s ease-in-out infinite alternate;
}
@keyframes blobDriftA{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(9vmax,7vmax) scale(1.12)}
}
@keyframes blobDriftB{
  0%{transform:translate(0,0) scale(1.06)}
  100%{transform:translate(-8vmax,-6vmax) scale(0.94)}
}

/* ── Navbar: glass + animated aurora hairline ── */
.navbar{
  background:var(--bg-glass);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-block-end:1px solid var(--border);
}
.navbar::after{
  background:linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent-2) 70%, transparent 100%);
  background-size:200% 100%;
  opacity:0.55;height:2px;
  animation:auroraSlide 7s linear infinite;
}
@keyframes auroraSlide{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.nav-mark{
  box-shadow:0 0 14px var(--accent-shadow-strong), 0 0 26px rgba(34,211,238,0.25);
  animation:markPulse 3.2s var(--ease-out) infinite;
}
@keyframes markPulse{
  0%,100%{box-shadow:0 0 10px var(--accent-shadow-strong), 0 0 20px rgba(34,211,238,0.18)}
  50%{box-shadow:0 0 18px var(--accent-shadow-strong), 0 0 34px rgba(34,211,238,0.35)}
}
.nav-title{font-family:var(--font-heading);font-size:16px;font-weight:700;letter-spacing:-0.2px}
.nav-dot{display:none}

/* ── Hero: gradient display title + stat chips ── */
.hero{padding-block:28px 18px;position:relative}
.hero-title{
  font-family:var(--font-heading);
  font-size:clamp(28px, 5vw, 38px);font-weight:700;letter-spacing:-1px;
  background:linear-gradient(110deg, var(--text-primary) 15%, var(--accent) 45%, var(--accent-2) 65%, var(--text-primary) 90%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:heroShimmer 8s ease-in-out infinite;
}
@keyframes heroShimmer{
  0%,100%{background-position:0% 0}
  50%{background-position:100% 0}
}
.hero-date{font-size:13.5px;color:var(--text-secondary);margin-block-start:2px}
.hero-stats{
  display:flex;gap:8px;flex-wrap:wrap;margin-block-start:14px;
}
.hstat{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:var(--radius-full);
  background:var(--bg-glass);border:1px solid var(--border);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:600;color:var(--text-secondary);
  animation:hstatIn 480ms var(--ease-spring) backwards;
  transition:border-color var(--duration-fast),box-shadow var(--duration-fast),transform var(--duration-fast);
}
.hstat:nth-child(2){animation-delay:70ms}
.hstat:nth-child(3){animation-delay:140ms}
.hstat:hover{border-color:var(--border-strong);transform:translateY(-1px)}
@keyframes hstatIn{from{opacity:0;transform:translateY(8px)}}
.hstat-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.hstat-num{font-family:var(--font-heading);font-weight:700;font-size:14px;color:var(--text-primary)}
.hstat.hs-prog .hstat-dot{background:var(--status-progress);box-shadow:0 0 8px var(--status-progress)}
.hstat.hs-done .hstat-dot{background:var(--status-done);box-shadow:0 0 8px var(--status-done)}
.hstat.hs-total .hstat-dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}

/* ── Add bar: glass capsule + gradient CTA with shine sweep ── */
.add-bar{
  background:var(--bg-glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:var(--radius-xl);padding:8px 8px 8px 16px;
  border:1.5px solid var(--border);
}
.add-bar:focus-within{
  border-color:var(--border-accent);
  box-shadow:0 0 0 4px var(--accent-soft), var(--glow-accent);
}
.add-input{font-size:15.5px}
.add-btn,.btn-save,.auth-submit,.confirm-ok:not(.confirm-danger){
  position:relative;overflow:hidden;
}
.add-btn,.btn-save{
  background:var(--gradient);
  box-shadow:0 4px 14px var(--accent-shadow);
  border-radius:var(--radius-md);
  transition:box-shadow var(--duration-normal),transform var(--duration-fast),filter var(--duration-normal);
}
.add-btn:hover,.btn-save:hover{
  background:var(--gradient);
  filter:brightness(1.12);
  box-shadow:0 6px 22px var(--accent-shadow-strong), var(--glow-cyan);
}
.add-btn::after,.btn-save::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%);
  background-size:250% 100%;background-position:200% 0;
  transition:background-position 600ms var(--ease-out);
  pointer-events:none;
}
.add-btn:hover::after,.btn-save:hover::after{background-position:-60% 0}

/* ── Filter pills: gradient active states ── */
.filter-row{
  background:var(--bg-glass);border:1px solid var(--border);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.filter-btn.active{
  background:var(--gradient);
  box-shadow:0 2px 12px var(--accent-shadow);
}
.filter-btn[data-filter=done].active{
  background:linear-gradient(135deg,#2DD4A0 0%,#10B981 100%);
  box-shadow:0 2px 12px rgba(45,212,160,0.4);
}
.filter-btn[data-filter=active].active{
  background:linear-gradient(135deg,#FFB224 0%,#FF5C7A 100%);
  box-shadow:0 2px 12px rgba(255,178,36,0.4);
}

/* ── View toggle: gradient active + spring pop ── */
.view-toggle{
  background:var(--bg-glass);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.vt-btn.active{
  background:var(--gradient);color:#fff;
  box-shadow:0 2px 12px var(--accent-shadow-strong);
  animation:vtPop 320ms var(--ease-spring);
}
@keyframes vtPop{
  0%{transform:scale(0.92)}
  55%{transform:scale(1.06)}
  100%{transform:scale(1)}
}

/* ── Task cards: glass, glow lift, gradient stripe ── */
.task-card{
  background:var(--bg-glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--radius-lg);
}
.task-card:hover{
  box-shadow:var(--shadow-md), 0 0 0 1px var(--border-accent), 0 0 28px rgba(124,92,255,0.12);
  transform:translateY(-3px);
}
.task-card::before{width:4px}
.task-card[data-p=high]::before{background:linear-gradient(180deg,#FF5C7A,#FF8FA3);box-shadow:0 0 12px rgba(255,92,122,0.5)}
.task-card[data-p=medium]::before{background:linear-gradient(180deg,#FFB224,#FFD06B);box-shadow:0 0 12px rgba(255,178,36,0.5)}
.task-card[data-p=low]::before{background:linear-gradient(180deg,#4DA3FF,#7FC0FF);box-shadow:0 0 12px rgba(77,163,255,0.5)}
.task-cb.ticked{
  background:var(--gradient);border-color:transparent;
  box-shadow:0 0 0 4px var(--accent-soft), 0 0 14px var(--accent-shadow-strong);
}
.task-cb.in-progress{
  background:var(--status-progress);border-color:var(--status-progress);
  box-shadow:0 0 12px rgba(34,211,238,0.55);
}

/* ── Status pills: live pulse for in-progress ── */
.status-pill.st-prog::before{animation:pillPulse 1.6s ease-in-out infinite}
@keyframes pillPulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,211,238,0.5)}
  50%{opacity:0.65;box-shadow:0 0 0 4px rgba(34,211,238,0)}
}

/* ── Progress bars: gradient fill ── */
.progress-fill{background:var(--gradient)}
.progress-fill-done{background:linear-gradient(90deg,#2DD4A0,#10B981)}
.progress-fill-prog{background:linear-gradient(90deg,#22D3EE,#4DA3FF)}
.sub-bar-fill,.sub-progress-fill{background:var(--gradient)}

/* ── Board: glass columns with glowing status bars ── */
.board-col{
  background:var(--bg-glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  position:relative;overflow:hidden;
}
.board-col::before{
  content:'';position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  border-radius:3px 3px 0 0;
}
.board-col[data-status=todo]::before{background:linear-gradient(90deg,var(--status-todo),transparent)}
.board-col[data-status=in_progress]::before{background:linear-gradient(90deg,#22D3EE,#4DA3FF);box-shadow:0 0 12px rgba(34,211,238,0.6)}
.board-col[data-status=done]::before{background:linear-gradient(90deg,#2DD4A0,#10B981);box-shadow:0 0 12px rgba(45,212,160,0.6)}
.board-col-head{border-block-end:1px solid var(--border);font-family:var(--font-heading)}
.board-col.drag-over{
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 2px var(--accent), 0 0 32px rgba(124,92,255,0.25);
  transform:scale(1.012);
}
.board-card{background:var(--bg-card)}
.board-card:hover{
  box-shadow:var(--shadow-md), 0 0 18px rgba(124,92,255,0.12);
  transform:translateY(-2px) scale(1.01);
}
.board-card.dragging{
  opacity:0.92;
  transform:rotate(2.5deg) scale(1.05);
  box-shadow:0 18px 44px rgba(0,0,0,0.5), var(--glow-accent);
  border-color:var(--border-accent);
  z-index:50;
}
.touch-drag-ghost{box-shadow:0 18px 50px rgba(0,0,0,0.5), var(--glow-accent)}

/* ── Skeletons: real shimmer sweep ── */
.skel{background:var(--bg-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.skel-line{
  background:linear-gradient(100deg,
    var(--bg-secondary) 35%,
    var(--accent-soft) 50%,
    var(--bg-secondary) 65%);
  background-size:220% 100%;
  animation:skelSweep 1.3s ease-in-out infinite;
}
@keyframes skelSweep{
  0%{background-position:130% 0}
  100%{background-position:-130% 0}
}

/* ── Drawer: glass sheet, gradient handle, aurora hairline ── */
.drawer{
  background:var(--bg-primary);
  border:1px solid var(--border);border-block-end:none;
  position:relative;
}
.drawer::before{
  content:'';position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:var(--gradient);opacity:0.8;
  border-radius:2px;
}
.drawer-handle{background:var(--gradient);width:44px;height:5px;opacity:0.8}
.drawer-title{font-family:var(--font-heading);font-size:20px}
.drawer-label{color:var(--accent);opacity:0.85}
.status-select,.gb-select{
  border-radius:var(--radius-md);
  transition:border-color var(--duration-fast),box-shadow var(--duration-fast);
}

/* ── Modals: glass + spring scale-in ── */
.confirm-card,.import-modal{
  background:var(--bg-elevated);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-xl), 0 0 60px rgba(124,92,255,0.08);
}
.confirm-card{animation:modalSpring 360ms var(--ease-spring)}
@keyframes modalSpring{
  0%{opacity:0;transform:scale(0.88) translateY(22px)}
  100%{opacity:1;transform:none}
}
@media(max-width:640px){
  .confirm-overlay{align-items:flex-end;padding:0}
  .confirm-card{
    max-width:100%;width:100%;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    animation:sheetUp 380ms var(--ease-spring);
  }
  @keyframes sheetUp{
    0%{opacity:0.6;transform:translateY(60%)}
    100%{opacity:1;transform:none}
  }
}

/* ── Toasts: spring slide + glow ── */
.toast{
  background:var(--bg-elevated);color:var(--text-primary);
  border:1px solid var(--border-strong);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius-lg);
  transition:opacity var(--duration-normal) var(--ease-out),
             transform 420ms var(--ease-spring);
}
.toast.toast-success{background:rgba(45,212,160,0.14);color:#A7F3D0;border-color:rgba(45,212,160,0.45);box-shadow:0 8px 30px rgba(45,212,160,0.2)}
.toast.toast-error{background:rgba(255,92,122,0.14);color:#FECDD3;border-color:rgba(255,92,122,0.45);box-shadow:0 8px 30px rgba(255,92,122,0.2)}
.toast.toast-warning{background:rgba(255,178,36,0.14);color:#FDE68A;border-color:rgba(255,178,36,0.45);box-shadow:0 8px 30px rgba(255,178,36,0.2)}
.toast.toast-info{background:rgba(34,211,238,0.13);color:#A5F3FC;border-color:rgba(34,211,238,0.45);box-shadow:0 8px 30px rgba(34,211,238,0.2)}
[data-mode=light] .toast.toast-success{color:#067647}
[data-mode=light] .toast.toast-error{color:#B42342}
[data-mode=light] .toast.toast-warning{color:#92400E}
[data-mode=light] .toast.toast-info{color:#0E7490}

/* ── Profile menu + notif dropdown: glass ── */
.profile-menu,.notif-dropdown{
  background:var(--bg-glass);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--border-strong);
}

/* ── Group cards: aurora stripe + progress ── */
.group-card{
  background:var(--bg-glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--radius-lg);
}
.group-card{animation:groupIn 460ms var(--ease-out) backwards}
.group-card:nth-child(2){animation-delay:60ms}
.group-card:nth-child(3){animation-delay:120ms}
.group-card:nth-child(4){animation-delay:180ms}
.group-card:nth-child(5){animation-delay:240ms}
.group-card:nth-child(n+6){animation-delay:300ms}
@keyframes groupIn{from{opacity:0;transform:translateY(14px)}}
.group-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md), 0 0 24px rgba(124,92,255,0.12);
  border-color:var(--border-strong);
}
.group-card-stripe{
  width:5px;
  box-shadow:0 0 14px var(--g-color,#7C5CFF);
}
.group-card-name{font-family:var(--font-heading);font-size:16px}
.group-progress{
  height:5px;border-radius:var(--radius-full);
  background:var(--bg-secondary);overflow:hidden;
  margin-block-start:10px;
}
.group-progress-fill{
  height:100%;border-radius:var(--radius-full);
  background:var(--gradient);
  transition:width 700ms var(--ease-out);
  box-shadow:0 0 10px var(--accent-shadow-strong);
}
.groups-title,.gb-name,.charts-title{font-family:var(--font-heading)}

/* ── Dashboard cards: display numbers ── */
.dash-card-num{font-family:var(--font-heading)}
.dash-card{transition:transform var(--duration-fast),box-shadow var(--duration-fast)}
.dash-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ── Empty states: floating aurora orb ── */
.empty{position:relative}
.empty-icon{
  font-size:30px;width:84px;height:84px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--accent-shadow), rgba(34,211,238,0.18) 60%, transparent 75%);
  box-shadow:0 0 40px rgba(124,92,255,0.25), inset 0 0 24px rgba(34,211,238,0.18);
  animation:orbFloat 4.5s ease-in-out infinite;
}
@keyframes orbFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-9px) scale(1.04)}
}

/* ── Page transitions: views slide in ── */
.page-enter{animation:pageIn 360ms var(--ease-out)}
@keyframes pageIn{
  0%{opacity:0;transform:translateX(26px)}
  100%{opacity:1;transform:none}
}
[dir=rtl] .page-enter{animation-name:pageInRtl}
@keyframes pageInRtl{
  0%{opacity:0;transform:translateX(-26px)}
  100%{opacity:1;transform:none}
}

/* ── Mobile bottom nav: glass dock with animated active pill ── */
.bottom-nav{
  display:none;
  position:fixed;inset-inline:14px;bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:300;
  background:var(--bg-glass);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-full);
  padding:6px;gap:4px;
  box-shadow:var(--shadow-lg);
}
@media(max-width:768px){.bottom-nav{display:flex}}
.bnav-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 8px;border-radius:var(--radius-full);border:none;
  background:transparent;color:var(--text-tertiary);
  font-size:12.5px;font-weight:700;font-family:var(--font-body);
  cursor:pointer;min-height:42px;
  transition:background var(--duration-normal) var(--ease-out),color var(--duration-normal),box-shadow var(--duration-normal),transform var(--duration-fast);
  -webkit-tap-highlight-color:transparent;
}
.bnav-btn.active{
  background:var(--gradient);color:#fff;
  box-shadow:0 4px 16px var(--accent-shadow-strong);
  animation:vtPop 320ms var(--ease-spring);
}
.bnav-btn svg{flex-shrink:0}

/* ── Login: full aurora treatment ── */
.login-bg::before,.login-bg::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;will-change:transform;
}
.login-bg::before{
  width:70vmax;height:70vmax;top:-30vmax;left:-22vmax;
  background:radial-gradient(circle at center, rgba(124,92,255,0.22) 0%, rgba(124,92,255,0.07) 42%, transparent 68%);
  animation:blobDriftA 22s ease-in-out infinite alternate;
}
.login-bg::after{
  width:60vmax;height:60vmax;bottom:-28vmax;right:-20vmax;
  background:radial-gradient(circle at center, rgba(34,211,238,0.18) 0%, rgba(34,211,238,0.06) 42%, transparent 68%);
  animation:blobDriftB 28s ease-in-out infinite alternate;
}
.login-card{
  background:var(--bg-glass);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--border-strong);
  position:relative;overflow:hidden;
}
.login-card::before{
  content:'';position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:var(--gradient);
  background-size:200% 100%;
  animation:auroraSlide 5s linear infinite;
}
.login-logo-mark{
  width:58px;height:58px;border-radius:18px;
  background:var(--gradient);
  display:flex;align-items:center;justify-content:center;
  margin-inline:auto;margin-block-end:18px;
  font-size:26px;color:#fff;
  box-shadow:0 0 30px var(--accent-shadow-strong), 0 0 60px rgba(34,211,238,0.2);
  animation:orbFloat 4.5s ease-in-out infinite;
  filter:none;
}
.login-title{
  font-family:var(--font-heading);
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.google-btn{
  background:var(--bg-glass);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:var(--radius-lg);
}
.google-btn:hover{
  border-color:var(--border-accent);
  box-shadow:var(--shadow-md), 0 0 22px rgba(124,92,255,0.18);
  transform:translateY(-2px);
}
.auth-submit{
  background:var(--gradient);
  border-radius:var(--radius-lg);
  box-shadow:0 4px 16px var(--accent-shadow);
  transition:filter var(--duration-normal),box-shadow var(--duration-normal),transform var(--duration-fast),opacity var(--duration-normal);
}
.auth-submit:hover:not(:disabled){
  opacity:1;filter:brightness(1.12);
  box-shadow:0 6px 24px var(--accent-shadow-strong), var(--glow-cyan);
  transform:translateY(-1px);
}
.auth-input{
  background:var(--bg-input);
  border-radius:var(--radius-md);
}
.auth-input:focus{box-shadow:0 0 0 4px var(--accent-soft), var(--glow-accent)}

/* ── Charts / analytics: glass panels ── */
.analytics-panel,.chart-container,.stat-card,.dash-section{
  background:var(--bg-glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.stat-value{
  font-family:var(--font-heading);
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ── Icon buttons: glow ring on hover ── */
.icon-btn:hover{box-shadow:0 0 0 3px var(--accent-soft)}
.icon-btn.nav-active{
  color:#fff;background:var(--gradient);
  box-shadow:0 2px 12px var(--accent-shadow-strong);
}

/* ── Mobile: bottom nav clearance ── */
@media(max-width:768px){
  body{padding-block-end:calc(96px + env(safe-area-inset-bottom))}
  .site-footer{padding-block-end:calc(80px + env(safe-area-inset-bottom))}
}

/* ═══ SETTINGS HUB + THEMES + EXTRA EFFECTS ═══════════════════════════════ */

/* Theme crossfade — applied to <html> for ~600ms around a theme switch */
html.theme-fade,html.theme-fade body,
html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{
  transition:background-color 480ms ease, background 480ms ease, color 480ms ease,
             border-color 480ms ease, box-shadow 480ms ease, fill 480ms ease !important;
}

/* Settings page layout */
.settings-page{padding-block-start:calc(var(--nav-h) + 20px)}
.settings-head{display:flex;align-items:center;gap:12px;margin-block-end:22px}
.settings-title{
  font-family:var(--font-heading);font-size:clamp(24px,4.5vw,32px);font-weight:700;
  letter-spacing:-0.6px;color:var(--text-primary);
}
.set-section{
  background:var(--bg-glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-5);margin-block-end:var(--space-4);
  animation:setIn 460ms var(--ease-out) backwards;
}
.set-section:nth-child(2){animation-delay:70ms}
.set-section:nth-child(3){animation-delay:140ms}
.set-section:nth-child(4){animation-delay:210ms}
.set-section:nth-child(5){animation-delay:280ms}
@keyframes setIn{from{opacity:0;transform:translateY(16px)}}
.set-section-title{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-heading);font-size:14px;font-weight:700;
  letter-spacing:0.04em;text-transform:uppercase;
  color:var(--accent);margin-block-end:var(--space-4);
}
.set-section-title svg{flex-shrink:0}

/* Profile card */
.set-profile{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.set-avatar-wrap{position:relative;width:84px;height:84px;flex-shrink:0}
.set-avatar-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.set-avatar-ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.set-avatar-ring .ring-bg{stroke:var(--bg-secondary)}
.set-avatar-ring .ring-fill{
  stroke:url(#ringGrad);
  transition:stroke-dashoffset 1.1s var(--ease-out);
  filter:drop-shadow(0 0 6px var(--accent-shadow));
}
.set-avatar,.set-avatar-fb{
  position:absolute;inset:8px;width:auto;height:auto;border-radius:50%;
  object-fit:cover;
}
.set-avatar-fb{
  /* circle is the 84px wrap minus 8px inset on each side = 68px */
  --avatar-size:68px;
  background:var(--gradient);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:700;color:#fff;
  font-size:calc(var(--avatar-size) * var(--avatar-letter-ratio));
  line-height:1;text-transform:uppercase;letter-spacing:0;
}
.set-profile-info{flex:1;min-width:180px}
.set-profile-name{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-primary)}
.set-profile-email{font-size:var(--text-sm);color:var(--text-tertiary);margin-block-start:2px;word-break:break-all}
.set-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--space-3);margin-block-start:var(--space-4);width:100%;
}
.set-stat{
  display:flex;flex-direction:column;gap:var(--space-1);
  padding:var(--space-3) var(--space-4);
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.set-stat-num{
  font-family:var(--font-heading);font-size:var(--text-xl);font-weight:var(--weight-bold);line-height:1.1;
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.set-stat-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.05em}
@media(max-width:560px){.set-stats{grid-template-columns:repeat(2,1fr)}}

/* Theme picker cards */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3)}
.theme-card{
  border:2px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg-card);cursor:pointer;padding:0;overflow:hidden;
  font-family:var(--font-body);text-align:start;
  transition:transform var(--duration-normal) var(--ease-spring),
             border-color var(--duration-normal),box-shadow var(--duration-normal);
  -webkit-tap-highlight-color:transparent;
}
.theme-card:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-md)}
.theme-card.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft), var(--glow-accent);
  animation:themePulse 2.4s ease-in-out infinite;
}
@keyframes themePulse{
  0%,100%{box-shadow:0 0 0 4px var(--accent-soft), 0 0 18px var(--accent-shadow)}
  50%{box-shadow:0 0 0 4px var(--accent-soft), 0 0 30px var(--accent-shadow-strong)}
}
.theme-swatch{height:64px;position:relative;display:flex;align-items:flex-end;padding:8px}
.theme-swatch .sw-grad{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;
  width:26px;height:26px;border-radius:50%;
}
.theme-swatch .sw-bar{height:7px;border-radius:99px;width:70%}
.theme-card-label{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;font-size:13px;font-weight:700;color:var(--text-primary);
}
.theme-check{
  width:18px;height:18px;border-radius:50%;
  background:var(--gradient);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0.4);
  transition:opacity var(--duration-normal),transform var(--duration-normal) var(--ease-spring);
}
.theme-card.selected .theme-check{opacity:1;transform:scale(1)}

/* Settings rows (toggles, language) */
.set-row{
  display:flex;align-items:center;gap:var(--space-3);
  padding:11px 2px;border-block-end:1px solid var(--border);
}
.set-row:last-child{border-block-end:none}
.set-row-info{flex:1;min-width:0}
.set-row-title{font-size:14px;font-weight:600;color:var(--text-primary)}
.set-row-desc{font-size:12px;color:var(--text-tertiary);margin-block-start:1px}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--space-2)}
.lang-tile{
  display:flex;align-items:center;gap:8px;
  padding:10px 13px;border-radius:var(--radius-md);
  border:1.5px solid var(--border);background:var(--bg-card);
  font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--text-primary);
  cursor:pointer;min-height:42px;
  transition:all var(--duration-fast);
  -webkit-tap-highlight-color:transparent;
}
.lang-tile:hover{border-color:var(--border-accent);background:var(--accent-soft);transform:translateY(-1px)}
.lang-tile.current{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* Bottom nav: 3 tabs + sliding indicator pill */
.bnav-ind{
  position:absolute;inset-block:6px;inset-inline-start:6px;
  width:calc((100% - 12px) / 3);
  border-radius:var(--radius-full);
  background:var(--gradient);
  box-shadow:0 4px 16px var(--accent-shadow-strong);
  transition:transform 380ms var(--ease-spring);
  pointer-events:none;
}
.bottom-nav{position:fixed}
.bottom-nav .bnav-btn{position:relative;z-index:1;overflow:hidden;white-space:nowrap}
.bottom-nav .bnav-btn span{overflow:hidden;text-overflow:ellipsis}
@media(max-width:768px){#navSettingsBtn{display:none}}
.nav-title{white-space:nowrap}
.bottom-nav .bnav-btn.active{background:transparent;box-shadow:none;animation:none}
[data-theme=noir] .bottom-nav .bnav-btn.active{color:#1A1200}
.bnav-btn.active{color:#fff}

/* Tooltips: fade + scale (desktop) */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) scale(0.86);transform-origin:top center;
  background:var(--bg-elevated);color:var(--text-primary);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:4px 10px;font-size:11.5px;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:600;
  box-shadow:var(--shadow-md);
  transition:opacity var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-spring);
}
@media(hover:hover){
  [data-tip]:hover::after{opacity:1;transform:translateX(-50%) scale(1)}
}

/* Check-draw: checkmark strokes itself in on complete */
.task-cb.ticked svg path,.sub-cb.ticked svg path{
  stroke-dasharray:16;stroke-dashoffset:16;
  animation:checkDraw 360ms var(--ease-out) 60ms forwards;
}
@keyframes checkDraw{to{stroke-dashoffset:0}}

/* Toast progress bar */
.toast::after{
  content:'';position:absolute;inset-block-end:0;inset-inline-start:0;
  height:2.5px;width:100%;border-radius:99px;
  background:currentColor;opacity:0.45;
  transform-origin:left center;
}
[dir=rtl] .toast::after{transform-origin:right center}
.toast.show::after{animation:toastBar 2.8s linear forwards}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast{overflow:hidden}

/* Avatar stack fan-out on hover */
.gm-avatars .gm-avatar,.gb-member-avatars .gm-avatar{transition:margin var(--duration-normal) var(--ease-spring),transform var(--duration-normal) var(--ease-spring)}
@media(hover:hover){
  .gm-avatars:hover .gm-avatar,.gb-member-avatars:hover .gm-avatar{margin-inline-end:2px}
  .gm-avatars:hover .gm-avatar:hover,.gb-member-avatars:hover .gm-avatar:hover{transform:translateY(-3px) scale(1.18);z-index:2}
}

/* 3D hover tilt on group cards */
@media(hover:hover){
  .group-card:hover{transform:perspective(800px) rotateX(2deg) translateY(-3px)}
}

/* Select / dropdown spring on focus */
.gb-select:focus,.status-select:focus,select:focus{
  transform:scale(1.015);
  transition:transform var(--duration-normal) var(--ease-spring),border-color var(--duration-fast),box-shadow var(--duration-fast);
}

/* Hero stat number morph */
.hstat-num{transition:color var(--duration-normal)}

/* Settings save pulse on toggles */
.toggle-switch.on{box-shadow:0 0 14px var(--accent-shadow)}

/* ─── Respect reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}