:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --text: #0A0A0A;
  --text-muted: #737373;
  --border: #E7E5E4;
  --accent-1: #6366F1;
  --accent-2: #8B5CF6;
  --urgent: #EF4444;
  --high: #F59E0B;
  --medium: #6366F1;
  --low: #94A3B8;
  --success: #10B981;
  
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
  
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

body.dark {
  --bg: #0A0A0A;
  --surface: #171717;
  --text: #FAFAF9;
  --text-muted: #A3A3A3;
  --border: #262626;
  --accent-1: #818CF8;
  --accent-2: #A78BFA;
}

/* Solarized Theme */
body.solarized {
  --bg: #002B36;
  --surface: #073642;
  --text: #839496;
  --text-muted: #586e75;
  --border: #073642;
  --accent-1: #268BD2;
  --accent-2: #2AA198;
  --urgent: #DC322F;
  --high: #CB4B16;
  --medium: #268BD2;
  --low: #839496;
  --success: #859900;
}

/* Nord Theme */
body.nord {
  --bg: #2E3440;
  --surface: #3B4252;
  --text: #ECEFF4;
  --text-muted: #D8DEE9;
  --border: #434C5E;
  --accent-1: #88C0D0;
  --accent-2: #81A1C1;
  --urgent: #BF616A;
  --high: #D08770;
  --medium: #88C0D0;
  --low: #4C566A;
  --success: #A3BE8C;
}

/* Dracula Theme */
body.dracula {
  --bg: #282A36;
  --surface: #44475A;
  --text: #F8F8F2;
  --text-muted: #6272A4;
  --border: #44475A;
  --accent-1: #BD93F9;
  --accent-2: #FF79C6;
  --urgent: #FF5555;
  --high: #FFB86C;
  --medium: #BD93F9;
  --low: #6272A4;
  --success: #50FA7B;
}

/* Tokyo Night Theme */
body.tokyo {
  --bg: #1A1B26;
  --surface: #24283B;
  --text: #C0CAF5;
  --text-muted: #565F89;
  --border: #292E42;
  --accent-1: #7AA2F7;
  --accent-2: #BB9AF7;
  --urgent: #F7768E;
  --high: #FF9E64;
  --medium: #7AA2F7;
  --low: #565F89;
  --success: #9ECE6A;
}

/* Forest Theme */
body.forest {
  --bg: #1B2B1B;
  --surface: #2D3F2D;
  --text: #D4E4D4;
  --text-muted: #8B9D8B;
  --border: #3A4F3A;
  --accent-1: #7CB342;
  --accent-2: #66BB6A;
  --urgent: #E57373;
  --high: #FFB74D;
  --medium: #7CB342;
  --low: #689F38;
  --success: #81C784;
}

/* Ocean Theme */
body.ocean {
  --bg: #0A1929;
  --surface: #132F4C;
  --text: #B2BAC2;
  --text-muted: #6B7A90;
  --border: #1E3A5F;
  --accent-1: #0EA5E9;
  --accent-2: #06B6D4;
  --urgent: #EF4444;
  --high: #F59E0B;
  --medium: #0EA5E9;
  --low: #475569;
  --success: #10B981;
}

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

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Background Effects */
.grain {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  animation: grain 8s steps(10) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  20% { transform: translate(-10%, 5%); }
  30% { transform: translate(5%, -10%); }
  40% { transform: translate(-5%, 15%); }
  50% { transform: translate(-10%, 5%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 10%); }
  80% { transform: translate(-15%, 0); }
  90% { transform: translate(10%, 5%); }
}

.gradient-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  animation: float 20s ease-in-out infinite;
}

.orb-1 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  top: -200px;
  right: -200px;
  animation-delay: 0s;
}

.orb-2 {
  width: 500px;
  height: 500px;
  background: linear-gradient(225deg, var(--accent-2), var(--accent-1));
  bottom: -150px;
  left: -150px;
  animation-delay: 7s;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(45deg, var(--accent-1), var(--success));
  top: 50%;
  left: 50%;
  animation-delay: 14s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -30px) scale(1.1); }
  66% { transform: translate(-30px, 30px) scale(0.9); }
}

.wrap {
  display: flex;
  height: 100vh;
  position: relative;
  z-index: 2;
}

/* Sidebar */
.sidebar {
  width: 280px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  flex-shrink: 0;
  backdrop-filter: blur(20px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}

.logoMark {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.logoType {
  display: flex;
  flex-direction: column;
}

.logoTitle {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logoTagline {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: -2px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.navItem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  position: relative;
}

.navItem::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  border-radius: 0 2px 2px 0;
  transition: height 0.3s var(--ease);
}

.navItem:hover {
  color: var(--text);
  background: rgba(99, 102, 241, 0.05);
}

.navItem.active {
  color: var(--text);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
}

.navItem.active::before {
  height: 24px;
}

.navIcon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navLabel {
  flex: 1;
}

.badge {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  min-width: 22px;
  text-align: center;
}

.sidebarFooter {
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.authPanel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.accountBadge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.accountBadge:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.accountAvatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.accountAvatar.hasPhoto {
  background-size: cover;
  background-position: center;
  color: transparent;
}

.accountMeta {
  flex: 1;
  min-width: 0;
}

.accountName {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accountEmail {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accountChevron {
  color: var(--text-muted);
  font-size: 12px;
}

.authWhy {
  font-size: 12px;
  color: var(--text-muted);
}

.authButtons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.authButtons .btn {
  width: 100%;
  justify-content: center;
}

.accountMenu {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.accountMenu.show {
  display: flex;
}

.topRightHub {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.headerAccountBadge {
  padding: 10px 12px;
  min-width: 220px;
}

.headerAccountBadge .accountMeta {
  max-width: 140px;
}

.saveStatus {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.saveStatus.saving {
  color: var(--accent-1);
}

.saveStatus.saved {
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
}

.saveStatus.offline {
  color: var(--urgent);
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

.topRightHub .accountMenu {
  position: absolute;
  top: 54px;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  box-shadow: var(--shadow);
}

.streakWidget {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.1));
  border-radius: 12px;
}

.streakIcon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F59E0B;
}

.streakContent {
  flex: 1;
}

.streakValue {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.streakLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 600;
}

.xpCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.xpHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.xpTitle {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 700;
}

.xpLevel {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-1);
}

.xpBar {
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.xpFill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  transition: width 0.6s var(--ease);
}

.xpMeta {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

.xpCard.pulse .xpFill {
  animation: xpPulse 0.6s var(--ease);
}

@keyframes xpPulse {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}

.xpToast {
  position: fixed;
  right: 32px;
  bottom: 32px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--shadow);
  z-index: 1100;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s var(--ease);
}

.xpToast.show {
  opacity: 1;
  transform: translateY(0);
}

.footerButtons {
  display: flex;
  gap: 8px;
}

.iconBtn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
}

.iconBtn:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: var(--accent-1);
  color: var(--accent-1);
  transform: translateY(-2px);
}

/* Main Content */
.mainContent {
  flex: 1;
  overflow-y: auto;
  padding: 48px 64px;
  position: relative;
}

.bottomNav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  align-items: center;
  justify-content: space-around;
  padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px);
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 20;
}

.bottomNavItem {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 999px;
  min-height: 44px;
  cursor: pointer;
}

.bottomNavItem.active {
  background: rgba(99, 102, 241, 0.12);
  color: var(--text);
}

.fabAdd {
  position: fixed;
  right: 20px;
  bottom: calc(72px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 30px rgba(99, 102, 241, 0.35);
  cursor: pointer;
  z-index: 21;
}

.fabAdd:active {
  transform: scale(0.96);
}

.view {
  display: none;
  animation: viewEnter 0.5s var(--ease);
}

.view.active {
  display: block;
}

@keyframes viewEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* View Header */
.viewHeader {
  margin-bottom: 48px;
}

.headerTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

.headerRight {
  display: flex;
  align-items: center;
  gap: 16px;
}

.titleGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.viewTitle {
  font-family: 'Playfair Display', serif;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -2px;
  margin: 0;
  background: linear-gradient(135deg, var(--text), var(--text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.viewDate {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 500;
}

.viewSubtitle {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: 400;
}

.timeWidget {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.currentTime {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Daily Quote */
.quoteSection {
  margin-bottom: 48px;
}

.quoteCard {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.quoteCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}

.quoteIcon {
  color: var(--accent-1);
  opacity: 0.3;
  margin-bottom: 16px;
}

.quoteText {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  line-height: 1.6;
  font-weight: 500;
  font-style: italic;
  color: var(--text);
  margin-bottom: 16px;
}

.quoteAuthor {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Quick Stats */
.quickStats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.statCard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s var(--ease);
  box-shadow: var(--shadow-sm);
}

.statCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.statIcon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: 12px;
  color: var(--accent-1);
  font-weight: 800;
}

.statContent {
  flex: 1;
}

.statValue {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}

.statLabel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Add Task Section */
.addTaskSection {
  margin-bottom: 48px;
}

.addTaskCard {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow);
  transition: all 0.3s var(--ease);
}

.addTaskCard:focus-within {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), var(--shadow);
}

.taskInput {
  width: 100%;
  padding: 0;
  border: none;
  font-size: 20px;
  font-weight: 500;
  background: transparent;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 24px;
}

.taskInput::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.taskInput:focus {
  outline: none;
}

.addTaskControls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.prioritySelect,
.projectSelect {
  padding: 12px 16px;
  padding-right: 40px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(139, 92, 246, 0.03));
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  font-family: 'DM Sans', sans-serif;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  box-shadow: var(--shadow-sm);
}

.projectSelect {
  --priority-glow: rgba(99, 102, 241, 0.14);
}

.prioritySelect {
  --priority-color: var(--medium);
  --priority-glow: rgba(99, 102, 241, 0.22);
  --priority-glow: color-mix(in srgb, var(--priority-color) 30%, transparent);
  padding-left: 44px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  background-image:
    radial-gradient(circle at 18px center, var(--priority-color) 0 6px, transparent 7px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
    url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 12px 12px, 100% 100%, 12px 8px;
  background-position: 18px center, 0 0, right 12px center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 20px rgba(0, 0, 0, 0.18);
}

.prioritySelect[data-priority="urgent"] {
  --priority-color: var(--urgent);
  --priority-glow: rgba(239, 68, 68, 0.22);
}

.prioritySelect[data-priority="high"] {
  --priority-color: var(--high);
  --priority-glow: rgba(245, 158, 11, 0.22);
}

.prioritySelect[data-priority="medium"] {
  --priority-color: var(--medium);
}

.prioritySelect[data-priority="low"] {
  --priority-color: var(--low);
  --priority-glow: rgba(148, 163, 184, 0.22);
}

.prioritySelect:hover {
  border-color: var(--priority-color);
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px var(--priority-glow), 0 12px 24px rgba(0, 0, 0, 0.2);
}

.projectSelect:hover {
  border-color: var(--accent-1);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.prioritySelect:focus {
  outline: none;
  border-color: var(--priority-color);
  box-shadow: 0 0 0 4px var(--priority-glow), 0 14px 28px rgba(0, 0, 0, 0.22);
}

.projectSelect:focus {
  outline: none;
  border-color: var(--accent-1);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Priority select with color coding */
.prioritySelect option[value="urgent"] {
  color: var(--urgent);
  font-weight: 700;
}

.prioritySelect option[value="high"] {
  color: var(--high);
  font-weight: 600;
}

.prioritySelect option[value="medium"] {
  color: var(--medium);
  font-weight: 500;
}

.prioritySelect option[value="low"] {
  color: var(--low);
  font-weight: 400;
}

/* Buttons */
.btn {
  padding: 12px 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(0);
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  border: none;
  box-shadow: var(--shadow-sm);
}

.btn.primary:hover {
  box-shadow: var(--shadow);
}

.btn.danger {
  background: var(--urgent);
  color: white;
  border: none;
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
}

.btn.ghost:hover {
  background: rgba(99, 102, 241, 0.05);
  border-color: var(--border);
}

.btn.small {
  padding: 8px 16px;
  font-size: 13px;
}

.btn.large {
  padding: 16px 32px;
  font-size: 16px;
}

.btn.circular {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.full {
  width: 100%;
  justify-content: center;
}

/* Section */
.taskListSection {
  margin-bottom: 48px;
}

.sectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.sectionTitle {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
  margin: 0;
}

.sectionActions {
  display: flex;
  gap: 8px;
}

/* Filter Row */
.filterRow {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.filterChip {
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.filterChip:hover {
  background: rgba(99, 102, 241, 0.05);
  border-color: var(--accent-1);
  color: var(--accent-1);
}

.filterChip.active {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  border: none;
}

/* Task List */
.taskList {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.taskItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.taskItem::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--medium);
  transition: all 0.3s var(--ease);
}

.taskItem.priority-urgent::before { background: var(--urgent); }
.taskItem.priority-high::before { background: var(--high); }
.taskItem.priority-low::before { background: var(--low); }

.taskItem:hover {
  transform: translateX(8px);
  box-shadow: var(--shadow);
}

.taskItem.done {
  opacity: 0.5;
}

.taskItem.done .taskText {
  text-decoration: line-through;
}

.taskLeft {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.taskCheck {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
}

.taskCheck:hover {
  border-color: var(--accent-1);
  background: rgba(99, 102, 241, 0.05);
  transform: scale(1.1);
}

.taskCheck svg {
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  stroke: var(--accent-1);
}

.taskItem.done .taskCheck {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border-color: transparent;
}

.taskItem.done .taskCheck svg {
  opacity: 1;
  stroke: white;
}

.taskContent {
  flex: 1;
}

.taskText {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text);
}

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

.priorityBadge {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.priorityBadge.priority-urgent {
  background: rgba(239, 68, 68, 0.1);
  color: var(--urgent);
}

.priorityBadge.priority-high {
  background: rgba(245, 158, 11, 0.1);
  color: var(--high);
}

.priorityBadge.priority-medium {
  background: rgba(99, 102, 241, 0.1);
  color: var(--medium);
}

.priorityBadge.priority-low {
  background: rgba(148, 163, 184, 0.1);
  color: var(--low);
}

.projectBadge {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.taskActions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.taskItem:hover .taskActions {
  opacity: 1;
}

.taskBtn {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 8px;
  color: var(--accent-1);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.taskBtn:hover {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  transform: scale(1.1);
}

/* Calendar */
.calendarLayout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
}

.calendarMain {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow);
}

.calendarNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.calendarMonth {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  text-align: center;
}

.calendarGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}

.calendarDay {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  border: 2px solid transparent;
  gap: 6px;
  background: var(--bg);
  position: relative;
}

.calendarDay.dayName {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: default;
  aspect-ratio: auto;
  padding: 12px 0;
  background: transparent;
}

.calendarDay:not(.dayName):not(.empty):hover {
  background: rgba(99, 102, 241, 0.05);
  border-color: var(--accent-1);
  transform: scale(1.05);
}

.calendarDay.today {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
  color: var(--accent-1);
  font-weight: 700;
}

.calendarDay.selected {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow);
}

.calendarDay.empty {
  cursor: default;
  background: transparent;
}

.dayNumber {
  font-size: 16px;
  font-weight: 600;
}

.taskDot {
  font-size: 10px;
  background: var(--accent-1);
  color: white;
  border-radius: 10px;
  padding: 3px 8px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}

.calendarDay.selected .taskDot {
  background: rgba(255, 255, 255, 0.3);
}

.calendarSidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.selectedDateCard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.selectedDateCard h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.dateStats {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

.calendarAddTask {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.calendarAddTask .taskInput {
  font-size: 16px;
  margin-bottom: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.calendarTaskControls {
  display: flex;
  gap: 12px;
}

.calendarTaskItem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease);
}

.calendarTaskItem:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.calendarTaskItem.done {
  opacity: 0.6;
}

.calendarTaskItem.done .taskText {
  text-decoration: line-through;
}

.calendarTaskItem.done .taskCheck {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border-color: transparent;
}

.calendarTaskItem.done .taskCheck svg {
  opacity: 1;
  stroke: white;
}

.calendarTaskItem .taskContent {
  flex: 1;
}

.calendarTaskItem .taskText {
  font-size: 16px;
  margin-bottom: 6px;
}

.calendarTaskItem .taskMeta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.calendarTaskItem .taskBtn {
  width: 32px;
  height: 32px;
  font-size: 16px;
  background: rgba(239, 68, 68, 0.12);
  color: var(--urgent);
}

.calendarTaskItem .taskBtn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: var(--urgent);
}

.taskList.compact .taskItem {
  padding: 16px;
}

.taskList.compact .taskText {
  font-size: 15px;
}

/* Analytics */
.statsLayout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.statsCard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow);
  transition: all 0.3s var(--ease);
}

.statsCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.statsCard.large {
  grid-column: span 2;
}

.statsCardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.statsCardHeader h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.statsCardSubtitle {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.chartContainer {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.chartContainer canvas {
  max-width: 100%;
  max-height: 100%;
}

.chartTooltip {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}

.chartTooltip.show {
  opacity: 1;
  transform: translate(-50%, -14px);
}

.progressRing {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.progressSvg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progressBg {
  fill: none;
  stroke: var(--border);
  stroke-width: 12;
}

.progressBar {
  fill: none;
  stroke: url(#timerGradient);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease);
}

.progressText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progressValue {
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.progressLabel {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}

.heatmap {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 16px 0;
}

.heatmapWeek {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.heatmapDay {
  width: 18px;
  height: 18px;
  background: var(--border);
  border-radius: 4px;
  transition: all 0.3s var(--ease);
}

.heatmapDay.active {
  background: var(--accent-1);
}

.heatmapDay:hover {
  transform: scale(1.3);
  box-shadow: var(--shadow-sm);
}

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

.achievementItem {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--bg);
  border-radius: 12px;
  transition: all 0.3s var(--ease);
}

.achievementItem:hover {
  background: rgba(99, 102, 241, 0.05);
  transform: translateX(4px);
}

.achievementIcon {
  font-size: 32px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: 12px;
}

.achievementContent {
  flex: 1;
}

.achievementLabel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.achievementValue {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}

/* Habits */
.habitsLayout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.4fr);
  gap: 28px;
  align-items: start;
}

.habitsSection {
  position: relative;
  padding: 28px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.habitsSection::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.02));
  opacity: 0.8;
  pointer-events: none;
}

.habitsSection > * {
  position: relative;
  z-index: 1;
}

.todayHabitsList {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.habitCheckItem {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease);
}

.habitCheckItem:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.habitCheckItem.complete {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.02));
}

.habitCheckItem.just-completed {
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2), 0 12px 30px rgba(99, 102, 241, 0.2);
  animation: habitGlow 0.9s var(--ease);
}

.habitPulse {
  animation: habitPulse 0.9s var(--ease-spring);
}

.habitProgressBar {
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.habitProgressFill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  width: 0;
  transition: width 0.6s var(--ease);
}

.habitProgressText {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 6px;
}

.habitStreak.pulse {
  animation: streakPulse 1.8s var(--ease) infinite;
}

@keyframes habitGlow {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes habitPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes streakPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.habitCheckbox {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--accent-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.habitCheckbox svg {
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.3s var(--ease);
}

.habitCheckItem.complete .habitCheckbox {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
}

.habitCheckItem.complete .habitCheckbox svg {
  opacity: 1;
  transform: scale(1);
}

.habitCheckContent {
  flex: 1;
}

.habitCheckName {
  font-weight: 700;
  font-size: 16px;
}

.habitCheckMinimum {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.habitCheckStreak {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  color: var(--accent-1);
}

.habitFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  margin-bottom: 20px;
}

.filterBtn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.filterBtn:hover {
  color: var(--accent-1);
}

.filterBtn.active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.habitsList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.habitCard {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease);
}

.habitCard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.habitHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.habitInfo {
  flex: 1;
}

.habitName {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
}

.habitMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.habitFrequency,
.habitTime {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 700;
}

.habitDeleteBtn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.habitDeleteBtn:hover {
  color: var(--urgent);
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

.habitProgress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.habitStreak {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
}

.streakNumber {
  font-size: 22px;
  font-weight: 700;
}

.streakLabel {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.habitWeek {
  display: flex;
  gap: 8px;
}

.habitDay {
  width: 32px;
  padding: 6px 0 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  transition: all 0.3s var(--ease);
}

.habitDayLabel {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
}

.habitDayDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  margin: 6px auto 0;
}

.habitDay.complete {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.08);
}

.habitDay.complete .habitDayDot {
  background: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.habitMinimum {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: rgba(99, 102, 241, 0.05);
  font-size: 13px;
}

.minimumLabel {
  color: var(--text-muted);
  font-weight: 600;
}

.minimumValue {
  font-weight: 700;
}

.habitCheckBtn {
  margin-top: auto;
}

.habitModal {
  width: min(680px, 92vw);
}

.habitModal input[type="text"],
.habitModal select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 14px;
  transition: all 0.3s var(--ease);
}

.habitModal input[type="text"]:focus,
.habitModal select:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  background: var(--surface);
}

.categoryPicker,
.timeAnchorPicker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.categoryBtn,
.timeAnchorBtn {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.categoryBtn:hover,
.timeAnchorBtn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.categoryBtn.active,
.timeAnchorBtn.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.25);
}

.categoryIcon,
.timeIcon {
  font-size: 18px;
}

.checkboxLabel {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.checkboxLabel input {
  width: 18px;
  height: 18px;
}

.inputHint {
  font-size: 12px;
  color: var(--text-muted);
}

.closeBtn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.closeBtn:hover {
  color: var(--text);
  border-color: var(--accent-1);
}

/* Projects */
.projectsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.projectCard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease);
  cursor: pointer;
  border-left-width: 4px;
}

.projectCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.projectHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.projectName {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
}

.projectStats {
  display: flex;
  gap: 16px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

/* Overlays */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s var(--ease);
}

.overlay.show {
  display: flex;
}

.commandPalette {
  width: min(520px, 92vw);
  padding: 24px;
}

.commandHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.commandTitle {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
}

.commandHint {
  font-size: 12px;
  color: var(--text-muted);
}

.commandInput {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 14px;
  margin-bottom: 16px;
}

.commandInput:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  background: var(--surface);
}

.commandList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.commandItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.commandItem:hover,
.commandItem.active {
  border-color: var(--accent-1);
  background: rgba(99, 102, 241, 0.08);
}

.commandLabel {
  font-weight: 600;
}

.commandMeta {
  font-size: 12px;
  color: var(--text-muted);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Focus Modal */
.focusModal {
  background: var(--surface);
  border-radius: 24px;
  padding: 48px;
  width: min(700px, 90vw);
  box-shadow: var(--shadow-lg);
  animation: modalEnter 0.5s var(--ease-spring);
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.focusHeader {
  margin-bottom: 40px;
}

.focusTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.focusLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
}

.focusTask {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.focusBody {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.timerSection {
  display: flex;
  justify-content: center;
}

.timerDisplay {
  position: relative;
  width: 300px;
  height: 300px;
}

.timerSvg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timerBg {
  fill: none;
  stroke: var(--border);
  stroke-width: 10;
}

.timerProgress {
  fill: none;
  stroke: url(#timerGradient);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s linear;
}

.timerText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 64px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.timerControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.timerPresets {
  display: flex;
  gap: 12px;
}

.presetBtn {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.presetBtn:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: var(--accent-1);
  color: var(--accent-1);
  transform: translateY(-2px);
}

.focusActions {
  display: flex;
  gap: 16px;
}

.focusActions .btn {
  flex: 1;
}

.focusStats {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px;
  background: var(--bg);
  border-radius: 16px;
}

.focusStatItem {
  flex: 1;
  text-align: center;
}

.focusStatLabel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.focusStatValue {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.focusStatDivider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* Modal */
.modal {
  background: var(--surface);
  border-radius: 24px;
  padding: 32px;
  width: min(500px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalEnter 0.5s var(--ease-spring);
}

.modal.small {
  width: min(400px, 90vw);
}

.modalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.modalHeader h2 {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

.modalBody {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

.settingGroupTitle {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}

.settingItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg);
  border-radius: 12px;
}

.settingItem label {
  font-weight: 500;
}

.settingItem input[type="number"],
.settingItem select {
  width: 150px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}

.settingItem input[type="checkbox"] {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.formGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.formGroup label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 700;
}

.formGroup input[type="color"] {
  width: 100%;
  height: 60px;
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}

/* Empty State */
.emptyState {
  padding: 80px 32px;
  text-align: center;
}

.emptyGraphic {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--text-muted);
  opacity: 0.3;
}

.emptyTitle {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
}

.emptyText {
  color: var(--text-muted);
  font-size: 16px;
  max-width: 400px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 1200px) {
  .calendarLayout {
    grid-template-columns: 1fr;
  }
  
  .statsLayout {
    grid-template-columns: 1fr;
  }
  
  .statsCard.large {
    grid-column: span 1;
  }

  .habitsLayout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .wrap {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    padding: 16px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  
  .nav {
    flex-direction: row;
    overflow-x: auto;
  }
  
  .mainContent {
    padding: 24px 16px;
  }
  
  .viewTitle {
    font-size: 48px;
  }
  
  .quickStats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .focusModal {
    padding: 32px 24px;
  }
  
  .timerDisplay {
    width: 240px;
    height: 240px;
  }
  
  .timerText {
    font-size: 48px;
  }

  .habitProgress {
    flex-direction: column;
    align-items: flex-start;
  }

  .habitWeek {
    flex-wrap: wrap;
  }

  .categoryPicker,
  .timeAnchorPicker {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  .sidebar {
    display: none;
  }

  .mainContent {
    padding: 20px 16px 120px;
  }

  .bottomNav,
  .fabAdd {
    display: flex;
  }

  button {
    min-height: 44px;
  }

  .quickStats {
    display: none;
  }

  .headerTop {
    flex-direction: column;
    align-items: flex-start;
  }

  .headerRight {
    width: 100%;
    justify-content: space-between;
  }

  .statsLayout {
    display: none;
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ============================================
   ELEGANT PROJECT DETAIL VIEW
   ============================================ */

.projectDetail {
  max-width: 1200px;
  margin: 0 auto;
  animation: viewEnter 0.6s var(--ease);
}

.projectDetailHeader {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
}

.projectDetailTitle {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.projectColorDot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 20px currentColor;
  flex-shrink: 0;
}

.projectDetailName {
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -1px;
  margin: 0;
  background: linear-gradient(135deg, var(--text), var(--text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.projectDetailStats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.statCard.highlight {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
  border: 2px solid var(--accent-1);
}

.statCard .statIcon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: 14px;
  color: var(--accent-1);
  margin-bottom: 12px;
}

.projectDetailSection {
  margin-bottom: 48px;
}

.sectionHeaderWithIcon {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.sectionIcon {
  font-size: 32px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: 14px;
}

.sectionTitle {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  flex: 1;
}

.taskCount {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  min-width: 40px;
  text-align: center;
}

/* Elegant Input Styles */
.taskInputWrapper {
  position: relative;
  flex: 1;
}

.inputIcon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.taskInput.elegant {
  font-size: 18px;
  padding: 20px 20px 20px 56px;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  width: 100%;
  transition: all 0.3s var(--ease);
}

.taskInput.elegant:focus {
  border-color: var(--accent-1);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.02), rgba(139, 92, 246, 0.02));
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), var(--shadow);
}

.taskInput.elegant::placeholder {
  color: var(--text-muted);
  font-style: normal;
}

.addTaskCard.elegant {
  padding: 32px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  transition: all 0.3s var(--ease);
}

.addTaskCard.elegant:focus-within {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), var(--shadow-lg);
  transform: translateY(-2px);
}

.addTaskControls.elegant {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 20px;
}

.prioritySelect.elegant {
  padding: 14px 20px;
  padding-right: 48px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  font-family: 'DM Sans', sans-serif;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  box-shadow: var(--shadow-sm);
  min-width: 180px;
}

.prioritySelect.elegant:hover {
  border-color: var(--accent-1);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.prioritySelect.elegant:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Elegant Task List */
.taskList.elegant {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.taskItem.elegant {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.taskItem.elegant::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--medium);
  transition: all 0.3s var(--ease);
}

.taskItem.elegant.priority-urgent::before { background: var(--urgent); }
.taskItem.elegant.priority-high::before { background: var(--high); }
.taskItem.elegant.priority-low::before { background: var(--low); }

.taskItem.elegant:hover {
  transform: translateX(8px);
  box-shadow: var(--shadow);
  border-color: var(--accent-1);
}

.taskItem.elegant.done {
  opacity: 0.6;
  background: var(--bg);
}

.taskItem.elegant.done .taskText {
  text-decoration: line-through;
}

.taskCheck.elegant {
  width: 32px;
  height: 32px;
  border: 2.5px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
  background: var(--surface);
}

.taskCheck.elegant:hover {
  border-color: var(--accent-1);
  background: rgba(99, 102, 241, 0.08);
  transform: scale(1.1) rotate(5deg);
}

.taskCheck.elegant svg {
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  stroke: var(--accent-1);
}

.taskItem.elegant.done .taskCheck.elegant {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border-color: transparent;
  transform: rotate(360deg);
}

.taskItem.elegant.done .taskCheck.elegant svg {
  opacity: 1;
  stroke: white;
}

.taskBtn.elegant {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.taskBtn.elegant:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-color: var(--accent-1);
  color: var(--accent-1);
  transform: scale(1.1) rotate(5deg);
}

.taskBtn.elegant.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--urgent);
  color: var(--urgent);
}

.taskDate {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  padding: 4px 10px;
  background: var(--bg);
  border-radius: 6px;
}

.taskDate.overdue {
  background: rgba(239, 68, 68, 0.1);
  color: var(--urgent);
  font-weight: 600;
}

/* Elegant Empty State */
.emptyState.elegant {
  padding: 80px 40px;
  text-align: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(139, 92, 246, 0.03));
  border: 2px dashed var(--border);
  border-radius: 20px;
}

.emptyState.elegant .emptyGraphic {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--text-muted);
  opacity: 0.4;
}

.emptyState.elegant .emptyTitle {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.emptyState.elegant .emptyText {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 400px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 1024px) {
  .projectDetailStats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .projectDetailName {
    font-size: 42px;
  }
}

@media (max-width: 768px) {
  .projectDetailStats {
    grid-template-columns: 1fr;
  }
  
  .projectDetailName {
    font-size: 36px;
  }
  
  .addTaskControls.elegant {
    flex-direction: column;
  }
  
  .prioritySelect.elegant {
    width: 100%;
  }
}

/* Smooth checkbox animation */
.taskCheck.elegant {
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.taskCheck {
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.taskItem.elegant.done .taskCheck.elegant {
  animation: checkboxPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.taskItem.done .taskCheck {
  animation: checkboxPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes checkboxPop {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.3) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

.taskItem.done {
  transition: all 0.4s ease;
}

.taskItem.elegant.done {
  transition: all 0.4s ease;
}

/* Smooth text strikethrough */
.taskItem.done .taskText {
  position: relative;
  transition: color 0.4s ease;
  display: inline-block;
}

.taskItem.done .taskText::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: var(--text-muted);
  transform: scaleX(0);
  transform-origin: left;
  animation: strikethrough 0.4s ease forwards;
}

@keyframes strikethrough {
  to {
    transform: scaleX(1);
  }
}

/* Remove old animation that causes glitch */
.taskItem.elegant.done {
  animation: none;
}

@keyframes taskFadeOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0.6;
    transform: translateX(0);
  }
}

/* ============================================
   NEW FEATURES STYLING
   ============================================ */

/* Toast Notifications */
.toast {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  padding: 20px 32px;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  font-weight: 600;
  font-size: 16px;
  z-index: 10001;
  transition: all 0.5s var(--ease-spring);
}

.toast.show {
  bottom: 32px;
}

/* Task Notes */
.taskItem.expanded {
  flex-direction: column;
  align-items: stretch;
}

.taskNotes {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  animation: notesExpand 0.3s var(--ease);
}

@keyframes notesExpand {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 300px;
  }
}

.notesInput {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  resize: vertical;
  transition: all 0.3s var(--ease);
}

.notesInput:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.notesHint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.hasNotes {
  font-size: 14px;
  opacity: 0.7;
}

.taskText {
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.taskText:hover {
  color: var(--accent-1);
}

/* Drag Handle */
.dragHandle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 18px;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  flex-shrink: 0;
  margin-right: 8px;
  letter-spacing: -2px;
}

.taskItem:hover .dragHandle {
  opacity: 1;
}

.dragHandle:active {
  cursor: grabbing;
}

/* Dragging States */
.taskItem.dragging {
  opacity: 0.5;
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
}

.taskItem.drag-over {
  border-top: 3px solid var(--accent-1);
}

/* Keyboard Selection */
.taskItem.keyboard-selected {
  outline: 3px solid var(--accent-1);
  outline-offset: -3px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  transform: translateX(8px) scale(1.02);
  box-shadow: var(--shadow);
}

/* Keyboard Shortcuts Helper */
.keyboard-shortcuts-hint {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  max-width: 300px;
}

.shortcuts-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.shortcut-item:last-child {
  border-bottom: none;
}

.shortcut-key {
  background: var(--bg);
  padding: 4px 12px;
  border-radius: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-1);
  border: 1px solid var(--border);
}

.shortcut-desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================================
   ANIMATED TRANSITIONS
   ============================================ */

/* Page/View Transitions */
.view {
  animation: fadeSlideIn 0.6s var(--ease);
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal Entrances */
.overlay {
  animation: overlayFadeIn 0.4s var(--ease);
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(20px);
  }
}

.focusModal, .modal {
  animation: modalBounceIn 0.6s var(--ease-spring);
}

@keyframes modalBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(50px);
  }
  50% {
    transform: scale(1.05) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Sidebar/Nav Transitions */
.navItem {
  transition: all 0.4s var(--ease-spring);
}

.sidebar {
  animation: slideInLeft 0.5s var(--ease);
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Card Stagger Animation */
.statCard {
  animation: cardPopIn 0.5s var(--ease-spring);
  animation-fill-mode: both;
}

.statCard:nth-child(1) { animation-delay: 0.1s; }
.statCard:nth-child(2) { animation-delay: 0.2s; }
.statCard:nth-child(3) { animation-delay: 0.3s; }
.statCard:nth-child(4) { animation-delay: 0.4s; }

@keyframes cardPopIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Project Card Animations */
.projectCard {
  animation: cardSlideUp 0.5s var(--ease);
  animation-fill-mode: both;
}

.projectCard:nth-child(1) { animation-delay: 0.05s; }
.projectCard:nth-child(2) { animation-delay: 0.1s; }
.projectCard:nth-child(3) { animation-delay: 0.15s; }
.projectCard:nth-child(4) { animation-delay: 0.2s; }
.projectCard:nth-child(5) { animation-delay: 0.25s; }
.projectCard:nth-child(6) { animation-delay: 0.3s; }

@keyframes cardSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button Hover Animations */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

/* Quote Card Animation */
.quoteCard {
  animation: quoteSlideIn 0.8s var(--ease);
}

@keyframes quoteSlideIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Calendar Grid Animation */
.calendarDay {
  animation: calendarDayPop 0.3s var(--ease-spring);
  animation-fill-mode: both;
}

.calendarDay:nth-child(n+1):nth-child(-n+7) { animation-delay: 0s; }
.calendarDay:nth-child(n+8):nth-child(-n+14) { animation-delay: 0.05s; }
.calendarDay:nth-child(n+15):nth-child(-n+21) { animation-delay: 0.1s; }
.calendarDay:nth-child(n+22):nth-child(-n+28) { animation-delay: 0.15s; }
.calendarDay:nth-child(n+29):nth-child(-n+35) { animation-delay: 0.2s; }
.calendarDay:nth-child(n+36) { animation-delay: 0.25s; }

@keyframes calendarDayPop {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Theme Transition */
body {
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

* {
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Filter Row Slide */
.filterRow {
  animation: slideDown 0.3s var(--ease);
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 100px;
    transform: translateY(0);
  }
}

/* Settings Group Stagger */
.settingGroup {
  animation: fadeIn 0.4s var(--ease);
  animation-fill-mode: both;
}

.settingGroup:nth-child(1) { animation-delay: 0.1s; }
.settingGroup:nth-child(2) { animation-delay: 0.2s; }
.settingGroup:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Streak Widget Pulse */
.streakWidget {
  animation: subtlePulse 2s ease-in-out infinite;
}

@keyframes subtlePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* Header Animation */
.viewHeader {
  animation: headerSlideDown 0.6s var(--ease);
}

@keyframes headerSlideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   ENHANCED ANALYTICS STYLING
   ============================================ */

/* Hero Productivity Score */
.statsCard.hero {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  padding: 48px;
}

.productivityScoreCard {
  text-align: center;
}

.scoreNumber {
  font-size: 96px;
  font-weight: 900;
  font-family: 'Playfair Display', serif;
  line-height: 1;
  text-shadow: 0 4px 20px rgba(0,0,0,0.2);
  display: inline-block;
}

.scoreOutOf {
  font-size: 36px;
  opacity: 0.8;
  display: inline-block;
  margin-left: 8px;
}

.scoreLabel {
  font-size: 20px;
  font-weight: 600;
  margin-top: 16px;
  opacity: 0.9;
}

.scoreInsight {
  font-size: 18px;
  margin-top: 24px;
  opacity: 0.95;
  font-style: italic;
}

.scoreBreakdown {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.breakdownItem {
  text-align: left;
}

.breakdownLabel {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
  font-weight: 600;
}

.breakdownBar {
  height: 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.breakdownFill {
  height: 100%;
  background: white;
  border-radius: 4px;
  transition: width 0.6s var(--ease);
}

.breakdownValue {
  font-size: 20px;
  font-weight: 700;
}

/* Streak Quality */
.streakQuality {
  text-align: center;
  padding: 24px;
}

.streakFlame {
  font-size: 72px;
  margin-bottom: 16px;
  animation: flameFlicker 2s ease-in-out infinite;
}

@keyframes flameFlicker {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.streakNumber {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 8px;
}

.streakStatus {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-1);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.streakInsight {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Weekly Trends */
.trendsList {
  padding: 24px;
}

.trendItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.trendItem:last-of-type {
  border-bottom: none;
}

.trendLabel {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.trendValue {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 700;
}

.trendDelta {
  font-size: 16px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
}

.trendDelta.positive {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.trendDelta.negative {
  background: rgba(239, 68, 68, 0.1);
  color: var(--urgent);
}

.trendInsight {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
}

/* Focus Efficiency */
.efficiencyMetrics {
  padding: 24px;
}

.metricRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.metricLabel {
  font-size: 14px;
  color: var(--text-muted);
}

.metricValue {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-1);
}

.metricValue.warning {
  color: var(--urgent);
}

.efficiencyInsight {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Best & Worst Times */
.timeAnalysis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 24px;
}

.timeBlock {
  text-align: center;
  padding: 24px;
  border-radius: 16px;
  background: var(--bg);
  border: 2px solid var(--border);
}

.timeBlock.best {
  border-color: var(--success);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0.1));
}

.timeBlock.worst {
  border-color: var(--text-muted);
  background: var(--bg);
}

.timeIcon {
  font-size: 48px;
  margin-bottom: 16px;
}

.timeLabel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.timeValue {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 8px;
}

.timeRate {
  font-size: 14px;
  color: var(--text-muted);
}

.timeInsight {
  padding: 24px;
  padding-top: 0;
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

/* Procrastination Stats */
.procrastinationStats {
  text-align: center;
  padding: 32px 24px;
}

.procrastNumber {
  font-size: 64px;
  font-weight: 900;
  color: var(--urgent);
  line-height: 1;
  margin-bottom: 8px;
}

.procrastLabel {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.procrastDetail {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.procrastInsight {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Badges */
.badgesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.badgeCard {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  gap: 12px;
  align-items: center;
  transition: all 0.3s var(--ease);
}

.badgeCard.locked {
  opacity: 0.5;
  filter: grayscale(1);
}

.badgeCard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.badgeIcon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.12);
  font-size: 20px;
}

.badgeMeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.badgeTitle {
  font-weight: 700;
}

.badgeDesc {
  font-size: 12px;
  color: var(--text-muted);
}

/* Project Health */
.projectHealthList {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.projectHealthCard {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s var(--ease);
}

.projectHealthCard.healthy {
  border-color: var(--success);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.03), rgba(16, 185, 129, 0.06));
}

.projectHealthCard.slow {
  border-color: var(--high);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.03), rgba(245, 158, 11, 0.06));
}

.projectHealthCard.stale,
.projectHealthCard.overloaded,
.projectHealthCard.dragging {
  border-color: var(--urgent);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.03), rgba(239, 68, 68, 0.06));
}

.projectHealthHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.projectHealthName {
  font-size: 18px;
  font-weight: 700;
}

.projectHealthBadge {
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.projectHealthBadge.healthy {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.projectHealthBadge.slow {
  background: rgba(245, 158, 11, 0.2);
  color: var(--high);
}

.projectHealthBadge.stale,
.projectHealthBadge.overloaded,
.projectHealthBadge.dragging {
  background: rgba(239, 68, 68, 0.2);
  color: var(--urgent);
}

.projectHealthStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.projectHealthStat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.projectHealthStat .label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.projectHealthStat .value {
  font-size: 20px;
  font-weight: 700;
}

.projectHealthInsight {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.6;
}

/* Full Width Cards */
.statsCard.full-width {
  grid-column: span 2;
}

/* Responsive */
@media (max-width: 1200px) {
  .statsCard.hero,
  .statsCard.full-width {
    grid-column: span 1;
  }
  
  .scoreBreakdown {
    grid-template-columns: 1fr;
  }
  
  .timeAnalysis {
    grid-template-columns: 1fr;
  }
}