:root{
  --rose-50:#fff3f7;
  --rose-100:#ffe0ea;
  --rose-200:#f7b7c8;
  --rose-500:#e36b93;
  --matcha-50:#f3faf6;
  --matcha-100:#dff4ea;
  --matcha-300:#7ed3b1;
  --matcha-500:#4ca886;
  --ink:#1c2430;
  --muted:#6b7280;
  --card:#ffffff;
  --glass:rgba(255,255,255,.75);
  --shadow:0 12px 30px rgba(17,24,39,.10);
  --radius:18px;
}

body{
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 15% 10%, var(--rose-100), transparent 55%),
    radial-gradient(900px 500px at 85% 5%, var(--matcha-100), transparent 55%),
    linear-gradient(180deg, #fff, #fbfbfe);
  min-height:100vh;
}

.bi{
  color: inherit;
}

i.bi{
  color: currentColor;
}

/* ===== TYPOGRAPHY ===== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}

h1, .h1{
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--rose-500), var(--rose-200));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

h2, .h2{
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

h3, .h3{
}

h4, .h4{
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}

h5, .h5{
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}

h6, .h6{
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.text-muted{
  color: var(--muted) !important;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.small{
  font-size: 0.875rem;
  line-height: 1.5;
}

.eyebrow{
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rose-500);
  margin-bottom: 0.625rem;
  display: block;
}

.lead{
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
  letter-spacing: -0.01em;
}

/* Page Header Sections */
.page-header{
  margin-bottom: 2rem;
}

.page-header h1, .page-header .h1, 
.page-header h2, .page-header .h2, 
.page-header h3, .page-header .h3{
  margin-bottom: 0.375rem;
  position: relative;
  display: inline-block;
}

.page-header h1::after, .page-header .h1::after,
.page-header h3::after, .page-header .h3::after{
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--rose-200), var(--matcha-500));
  border-radius: 2px;
  opacity: 0.6;
}

.page-header .text-muted{
  font-size: 0.9375rem;
  margin-top: 0.25rem;
}

/* Section Headers (for subsections within a page) */
.section-header{
  margin-bottom: 1rem;
}

.section-header h6, .section-header .h6{
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}

.section-header .text-muted{
  font-size: 0.875rem;
}

/* Modal Styling */
.modal-header{
  border-bottom: 1px solid rgba(0,0,0,.04);
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(227,107,147,.03), rgba(45,168,123,.02));
}

.modal-title{
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--rose-500), var(--matcha-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.modal-content{
  border: none;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

.modal-body{
  padding: 1.5rem;
}

.modal-footer{
  border-top: 1px solid rgba(0,0,0,.04);
  padding: 1rem 1.5rem;
  background: rgba(249,250,251,.5);
}

/* ===== NAVBAR DESIGN ===== */
.navbar{
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255,255,255,.92) !important;
  padding-top: .75rem;
  padding-bottom: .75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: sticky;
  top: 1rem;
  z-index: 1030;
  margin: 1rem 1rem 0 1rem;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 2px 8px rgba(227,107,147,.1);
}

.navbar-brand{
  display: flex;
  align-items: center;
  gap: .625rem;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: #1a1a1a !important;
  transition: all 0.25s ease;
}

.navbar-brand:hover{
  transform: translateY(-1px);
  opacity: .85;
}

.brand-mark{
  width: 48px;
  height: 48px;
  transition: all 0.3s ease;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(227,107,147,.35)) drop-shadow(0 2px 4px rgba(45,168,123,.25));
}

.navbar-brand:hover .brand-mark{
  filter: drop-shadow(0 6px 12px rgba(227,107,147,.45)) drop-shadow(0 3px 8px rgba(45,168,123,.35));
  transform: scale(1.05);
}

.navbar-nav{
  align-items: center;
  gap: .25rem;
}

.nav-link{
  color: #6b7280 !important;
  font-weight: 500;
  font-size: .9375rem;
  padding: .5rem 1rem !important;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.nav-link:hover{
  color: var(--rose-500) !important;
  background: rgba(227,107,147,.08);
}

.nav-link.active{
  color: var(--rose-500) !important;
  background: linear-gradient(135deg, rgba(227,107,147,.12), rgba(45,168,123,.08));
  font-weight: 600;
}

.nav-link.active::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: linear-gradient(90deg, var(--rose-500), var(--matcha-500));
  border-radius: 2px;
}

/* Notification Badge */
.nav-link .badge{
  background: linear-gradient(135deg, var(--rose-500), #e94380);
  color: white;
  font-size: .6875rem;
  font-weight: 600;
  padding: .25rem .5rem;
  border-radius: 12px;
  margin-left: .375rem;
  box-shadow: 0 2px 8px rgba(227,107,147,.4);
  min-width: 20px;
  text-align: center;
}

/* Logout Button */
.nav-link.btn-logout{
  color: var(--rose-500) !important;
  background: rgba(227,107,147,.08);
  backdrop-filter: blur(10px);
  margin-left: .5rem;
  padding: .5rem !important;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: all 0.25s ease;
  font-size: 1.125rem;
}

.nav-link.btn-logout:hover{
  background: linear-gradient(135deg, rgba(227,107,147,.15), rgba(45,168,123,.08));
  box-shadow: 0 4px 12px rgba(227,107,147,.2);
  transform: translateY(-1px) scale(1.05);
}

/* Mobile Toggler */
.navbar-toggler{
  border: none;
  padding: .5rem;
  border-radius: 8px;
  background: rgba(227,107,147,.08);
  transition: all 0.2s ease;
}

.navbar-toggler:hover{
  background: rgba(227,107,147,.15);
}

.navbar-toggler:focus{
  box-shadow: 0 0 0 3px rgba(227,107,147,.2);
  outline: none;
}

.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e36b93' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 1.5rem;
  height: 1.5rem;
}

/* Mobile Menu */
@media (max-width: 991.98px) {
  .navbar{
    margin: .5rem .5rem 0 .5rem;
    top: .5rem;
    border-radius: 12px;
  }
  
  .navbar-collapse{
    margin-top: .75rem;
    padding: 1rem;
    background: rgba(255,255,255,.95);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    backdrop-filter: blur(10px);
  }
  
  .navbar-nav{
    gap: .5rem;
  }
  
  .nav-link{
    padding: .625rem .875rem !important;
  }
  
  .nav-link.btn-logout{
    margin-left: 0;
    margin-top: .5rem;
    width: auto;
  }
  
  .action-btn-group{
    flex-wrap: wrap;
  }
  
  .btn-action{
    width: 30px;
    height: 30px;
    font-size: 0.8125rem;
  }
  
  .btn-action-delete,
  .btn-action-pick{
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
  }
}

.card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-glass{
  background: var(--glass);
}

.btn-primary{
  --bs-btn-bg: var(--rose-500);
  --bs-btn-border-color: var(--rose-500);
  --bs-btn-hover-bg: #d85b86;
  --bs-btn-hover-border-color: #d85b86;
  --bs-btn-active-bg: #c94d76;
  --bs-btn-active-border-color: #c94d76;
}

.btn-soft{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.08);
  color: var(--ink);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  transition: all 0.2s;
  font-size: 0.875rem;
}

.btn-soft:hover{
  background: rgba(255,255,255,.95);
  border-color: var(--rose-500);
  color: var(--rose-500);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.btn-sm{
  padding: 0.35rem 0.8rem;
  font-size: 0.8125rem;
}

.btn-outline-success{
  --bs-btn-color: var(--matcha-500);
  --bs-btn-border-color: rgba(45,168,123,.45);
  --bs-btn-hover-bg: rgba(45,168,123,.10);
  --bs-btn-hover-border-color: rgba(45,168,123,.55);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background: rgba(227,107,147,.10);
  border: 1px solid rgba(227,107,147,.18);
  color:#9c3558;
  font-weight:600;
  font-size:.82rem;
}

.pill-matcha{
  background: rgba(45,168,123,.10);
  border: 1px solid rgba(45,168,123,.18);
  color:#1b6e52;
}

.section-title{
  letter-spacing:-.02em;
}

.hero{
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  left:0; top:0;
  position:absolute;
  inset:21px;
  background: radial-gradient(600px 220px at 20% 20%, rgba(227,107,147,.25), transparent 60%),
              radial-gradient(600px 220px at 80% 20%, rgba(45,168,123,.22), transparent 60%);
  filter: blur(8px);
  transform: translate3d(0,0,0);
}

.hero > *{ position:relative; }

.floaty{
  animation: floaty 5.5s ease-in-out infinite;
}

@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

.soft-divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.10), transparent);
}

.table td, .table th{ vertical-align: middle; }

.badge-priority-low{ background: rgba(45,168,123,.10); color:#1b6e52; border:1px solid rgba(45,168,123,.20); }
.badge-priority-medium{ background: rgba(107,114,128,.10); color:#374151; border:1px solid rgba(107,114,128,.20); }
.badge-priority-high{ background: rgba(227,107,147,.12); color:#9c3558; border:1px solid rgba(227,107,147,.20); }
.badge-priority-urgent{ background: rgba(239,68,68,.12); color:#991b1b; border:1px solid rgba(239,68,68,.20); }

.status-chip{
  padding:.25rem .55rem;
  border-radius:999px;
  font-weight:700;
  font-size:.78rem;
  border:1px solid rgba(0,0,0,.08);
}
.status-pending{ background: rgba(245,158,11,.12); color:#92400e; }
.status-done{ background: rgba(16,185,129,.12); color:#065f46; }
.status-on_hold{ background: rgba(107,114,128,.12); color:#374151; }

.icon-bubble{
  width:40px; height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(227,107,147,.14), rgba(45,168,123,.12));
  border:1px solid rgba(0,0,0,.06);
  color: var(--ink);
  font-size: 1.5rem;
}

.icon-bubble .bi{
  background: linear-gradient(135deg, var(--rose-500), var(--matcha-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2rem;
}

.card-soft{
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

.card-soft .card-body{
  padding: 1.25rem;
}

.card-soft.h-100{
  height: 100% !important;
}

/* Modern Tabs */
.modern-tabs{
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.35rem;
  background: rgba(255,255,255,.5);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
}

.modern-tabs .tab-link{
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.modern-tabs .tab-link:hover{
  color: var(--ink);
  background: rgba(227,107,147,.08);
}

.modern-tabs .tab-link.active{
  background: linear-gradient(135deg, var(--matcha-100),var(--matcha-300),var(--matcha-300), var(--matcha-100));
  background: linear-gradient(135deg, var(--rose-100), var(--matcha-100));
  color: rgb(73, 73, 73);
  box-shadow: 0 2px 8px rgba(227,107,147,.25);
}

/* Modern Filters */
.filter-compact{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.filter-compact .form-select,
.filter-compact .form-control{
  font-size: 0.875rem;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.8);
  max-width: 160px;
}

.filter-compact .form-select:focus,
.filter-compact .form-control:focus{
  border-color: var(--rose-500);
  box-shadow: 0 0 0 3px rgba(227,107,147,.1);
  outline: none;
}

.btn-icon{
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.875rem;
}

.btn-gradient{
  background: linear-gradient(135deg, var(--rose-100),var(--rose-200),var(--rose-500), var(--rose-100));
  color: white;
  border: none;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: 10px;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(227,107,147,.2);
  font-size: 0.875rem;
}

.btn-gradient:hover{
  background: linear-gradient(135deg, var(--matcha-100),var(--matcha-300),var(--matcha-500), var(--matcha-100));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(227,107,147,.3);
  color: white;
}

.btn-love{
  background: transparent;
  transform: translateY(0px);
  box-shadow: 0 4px 12px rgba(45,168,123,.0);
  color: unset;
}

.btn-love:hover{
  background: var(--rose-500);
  box-shadow: 0 14px 12px -5px rgba(0,0,0,.2);
  color: white;
}

.filter-bar{
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 1rem;
  border: 1px solid rgba(0,0,0,.05);
}

/* Item Action Buttons */
.btn-action{
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.875rem;
  border: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.btn-action-edit{
  background: rgba(107,114,128,.08);
  color: var(--muted);
}

.btn-action-edit:hover{
  background: rgba(107,114,128,.15);
  color: var(--ink);
  transform: translateY(-1px);
}

.btn-action-complete{
  background: rgba(45,168,123,.12);
  color: var(--matcha-500);
}

.btn-action-complete:hover:not(:disabled){
  background: rgba(45,168,123,.2);
  color: var(--matcha-500);
  transform: translateY(-1px);
}

.btn-action-complete:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-action-pending{
  background: rgba(251,191,36,.12);
  color: #d97706;
  border: 1px solid rgba(251,191,36,.2);
}

.btn-action-pending:hover:not(:disabled){
  background: rgba(251,191,36,.2);
  color: #d97706;
  transform: translateY(-1px);
}

.btn-action-pending:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-action-hold{
  background: rgba(227,107,147,.12);
  color: var(--rose-500);
}

.btn-action-hold:hover:not(:disabled){
  background: rgba(227,107,147,.2);
  color: var(--rose-500);
  transform: translateY(-1px);
}

.btn-action-hold:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-action-delete{
  background: rgba(239,68,68,.08);
  color: #dc2626;
  font-size: 0.8125rem;
  width: auto;
  padding: 0.375rem 0.75rem;
  gap: 0.25rem;
  font-weight: 500;
}

.btn-action-delete:hover{
  background: rgba(239,68,68,.15);
  color: #dc2626;
  transform: translateY(-1px);
}

.btn-action-delete i{
  font-size: 0.8125rem;
}

.btn-action-pick{
  background: rgba(45,168,123,.12);
  color: var(--matcha-500);
  font-size: 0.8125rem;
  width: auto;
  padding: 0.375rem 0.875rem;
  gap: 0.375rem;
  font-weight: 500;
  border: 1px solid rgba(45,168,123,.2);
}

.btn-action-pick:hover{
  background: rgba(45,168,123,.2);
  color: var(--matcha-500);
  transform: translateY(-1px);
}

.btn-action-pick.picked{
  background: linear-gradient(135deg, rgba(45,168,123,.2), rgba(45,168,123,.15));
  border: 1px solid rgba(45,168,123,.3);
}

.btn-action-pick i{
  font-size: 0.9375rem;
}

/* Action Button Group */
.action-btn-group{
  display: inline-flex;
  gap: 0.25rem;
  border-radius: 8px;
  padding: 2px;
  background: rgba(249,250,251,.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.04);
}

/* Type Card Icons */
.type-card i.bi{
  background: linear-gradient(135deg, var(--rose-500), var(--matcha-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.75rem;
}

.type-card .badge{
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(227,107,147,.12), rgba(45,168,123,.10));
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 12px;
}

/* Avatar Styling */
.avatar{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,.15);
  position: relative;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 4px 12px rgba(0,0,0,.12), 0 0 0 4px rgba(227,107,147,.1);
  transition: all 0.3s;
}

.avatar::before{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--rose-500), var(--matcha-500));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
}

.avatar:hover{
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,.15), 0 0 0 4px rgba(227,107,147,.2);
}

.card-love{
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transition: all 0.3s;
}

.card-love:hover{
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.chip{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.chip-matcha{
  background: linear-gradient(135deg, rgba(45,168,123,.12), rgba(45,168,123,.08));
  color: var(--matcha-500);
  border: 1px solid rgba(45,168,123,.25);
}

.shadow-soft{
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

@media (max-width: 768px){
  .modern-tabs{
    width: 100%;
  }
  .filter-compact{
    width: 100%;
  }
  .filter-compact .form-select,
  .filter-compact .form-control{
    flex: 1;
    min-width: 120px;
  }
}

@media (max-width: 576px){
  .card{ box-shadow: 0 10px 24px rgba(17,24,39,.09); }
}

/* Notification Cards */
.notification-card {
  display: flex;
  align-items: start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.notification-read {
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}

.notification-unread {
  background: linear-gradient(135deg, rgba(45,168,123,.06) 0%, rgba(227,107,147,.08) 100%);
  backdrop-filter: blur(12px);
  border-image: linear-gradient(135deg, rgba(227,107,147,.35), rgba(45,168,123,.25)) 1;
  box-shadow: 
    0 4px 16px rgba(227,107,147,.12),
    0 2px 8px rgba(45,168,123,.08);
}

.notification-unread::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #e36b93, #2da87b);
}

.notification-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 1.25rem;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.notification-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.1;
  filter: blur(8px);
}

.notification-icon i {
  position: relative;
  z-index: 1;
}

.notification-icon-danger {
  background: linear-gradient(135deg, rgba(220,38,38,.15), rgba(239,68,68,.1));
  color: #dc2626;
  border: 1px solid rgba(220,38,38,.25);
}

.notification-icon-warning {
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(251,191,36,.1));
  color: #d97706;
  border: 1px solid rgba(245,158,11,.25);
}

.notification-icon-info {
  background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(96,165,250,.1));
  color: #2563eb;
  border: 1px solid rgba(59,130,246,.25);
}

.pill-unread {
  background: linear-gradient(135deg, rgba(227,107,147,.15), rgba(45,168,123,.1));
  border: 1px solid rgba(227,107,147,.3);
  color: #9c3558;
  font-weight: 700;
  animation: pulse-gentle 2s ease-in-out infinite;
}

@keyframes pulse-gentle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.notification-mark-read {
  flex-shrink: 0;
}

.btn-mark-read {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(45,168,123,.2);
  color: #2da87b;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-mark-read:hover {
  background: rgba(45,168,123,.15);
  border-color: rgba(45,168,123,.4);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(45,168,123,.2);
}

.btn-mark-read:active {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  .notification-card {
    padding: 1rem;
    gap: 0.75rem;
  }
  
  .notification-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  
  .btn-mark-read {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }
}

/* =====================================================
   LIFE GOALS
   ===================================================== */

/* Stat cards */
.goal-stat-card {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.goal-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.goal-stat-icon { font-size: 1.5rem; margin-bottom: .3rem; }
.goal-stat-num  { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.goal-stat-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .2rem; }

/* Progress bar track */
.goal-progress-track {
  display: flex;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
}
.goal-progress-achieved   { background: #2da87b; }
.goal-progress-inprogress { background: #f59e0b; }
.goal-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }

/* Category / filter pills */
.pill-active   { background: linear-gradient(135deg, var(--rose-500), var(--matcha-500)); color: #fff; border-color: transparent !important; }
.pill-dream    { background: rgba(227,107,147,.12); color: #e36b93; border-color: rgba(227,107,147,.25) !important; }
.pill-progress { background: rgba(245,158,11,.12); color: #d97706; border-color: rgba(245,158,11,.25) !important; }
.pill-done     { background: rgba(45,168,123,.12); color: #2da87b; border-color: rgba(45,168,123,.25) !important; }

/* Goal cards */
.goal-card {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;
  padding: 1.25rem;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.goal-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.09); }
.goal-card-achieved { border-left: 4px solid #2da87b; }
.goal-card-achieved::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(45,168,123,.04) 0%, transparent 60%);
  pointer-events: none;
}

/* Goal card internals */
.goal-card-cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .35rem; }
.goal-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; padding: .2rem .55rem; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.goal-badge-dream    { background: rgba(227,107,147,.12); color: #e36b93; }
.goal-badge-progress { background: rgba(245,158,11,.12); color: #d97706; }
.goal-badge-achieved { background: rgba(45,168,123,.12); color: #2da87b; }
.goal-title { font-size: 1rem; font-weight: 600; margin: .4rem 0 .3rem; color: inherit; }
.goal-desc  { font-size: .85rem; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.goal-meta  { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .75rem; color: var(--muted); margin-top: .6rem; }
.goal-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #e36b93, #2da87b); color: #fff; font-size: .65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* Goal action buttons */
.goal-actions { display: flex; gap: .4rem; align-items: center; }
.goal-action-btn {
  width: 32px; height: 32px; border-radius: 50%; border: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem; cursor: pointer; transition: all .2s; background: rgba(0,0,0,.05); color: inherit;
}
.goal-action-btn:hover { transform: scale(1.1); }
.goal-action-achieve { background: rgba(45,168,123,.12); color: #2da87b; }
.goal-action-achieve:hover { background: rgba(45,168,123,.2); }
.goal-action-delete { background: rgba(220,38,38,.08); color: #dc2626; }
.goal-action-delete:hover { background: rgba(220,38,38,.15); }


/* =====================================================
   OUR COMPASS
   ===================================================== */

/* Harmony zone */
.compass-harmony-section {
  background: linear-gradient(135deg, rgba(45,168,123,.08) 0%, rgba(227,107,147,.08) 100%);
  border: 1px solid rgba(45,168,123,.2);
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.compass-harmony-header { font-size: .85rem; font-weight: 600; color: #2da87b; margin-bottom: .75rem; }
.compass-harmony-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.7); border: 1px solid rgba(45,168,123,.25);
  border-radius: 99px; padding: .25rem .7rem; font-size: .78rem; color: #2da87b; font-weight: 500;
}

/* Compass two-column layout */
.compass-column {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 18px;
  padding: 1.25rem;
  height: 100%;
}
.compass-column-header { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.compass-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #e36b93, #2da87b); color: #fff; font-size: .9rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.compass-section-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1rem 0 .4rem; font-weight: 600; }
.compass-appreciate-label { color: #2da87b; }
.compass-avoid-label      { color: #e36b93; }
.compass-empty { font-size: .85rem; color: var(--muted); text-align: center; padding: 1rem; }

/* Trait cards */
.compass-trait-card {
  display: flex; align-items: flex-start; gap: .6rem;
  background: rgba(255,255,255,.5); border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px; padding: .6rem .8rem; margin-bottom: .45rem;
  transition: transform .15s;
}
.compass-trait-card:hover { transform: translateX(2px); }
.compass-trait-appreciate { border-left: 3px solid #2da87b; }
.compass-trait-avoid      { border-left: 3px solid #e36b93; }
.compass-readonly { opacity: .85; cursor: default; }
.compass-readonly:hover { transform: none; }
.compass-trait-cat  { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .15rem; }
.compass-trait-text { font-size: .88rem; font-weight: 500; }
.compass-trait-desc { font-size: .78rem; color: var(--muted); margin-top: .2rem; line-height: 1.4; }
.compass-trait-delete { margin-left: auto; flex-shrink: 0; }
.compass-delete-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(220,38,38,.08); color: #dc2626; font-size: .8rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .2s;
}
.compass-delete-btn:hover { background: rgba(220,38,38,.18); transform: scale(1.1); }

/* Kind toggle (modal) — see bottom of file for full definition */


/* =====================================================
   HOME PAGE MINI STATS (Goals + Compass overview)
   ===================================================== */
.home-mini-stat {
  flex: 1; text-align: center;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px; padding: .6rem .5rem;
  border-top: 3px solid var(--ms-color, #e36b93);
}
.home-mini-num { font-size: 1.45rem; font-weight: 700; color: var(--ms-color, #e36b93); line-height: 1; }
.home-mini-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: .2rem; }

.compass-home-bar {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: linear-gradient(to right, rgba(227,107,147,.2), rgba(45,168,123,.2));
}
.compass-home-bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(to right, #e36b93, #2da87b);
  transition: width .5s ease;
}
.compass-harmony-mini {
  background: rgba(45,168,123,.08); border: 1px solid rgba(45,168,123,.2);
  border-radius: 10px; padding: .5rem .75rem; font-size: .82rem; color: #2da87b; font-weight: 500;
}


/* =====================================================
   SITE FOOTER
   ===================================================== */
.site-footer {
  margin-top: 4rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(227,107,147,.18);
  border-radius: 15px;
  padding: 2.75rem 1.5rem 0 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 2px 8px rgba(45,168,123,.08);
}
.site-footer::before {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,107,147,.12) 0%, transparent 70%);
  pointer-events: none;
}
.site-footer::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,168,123,.1) 0%, transparent 70%);
  pointer-events: none;
}

.site-footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: start;
  padding-bottom: 2rem;
}

/* Brand side */
.footer-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
  color: inherit;
  margin-bottom: .65rem;
}
.footer-logo img { height: 32px; width: auto; }
.footer-logo span {
  background: linear-gradient(135deg, var(--rose-500), var(--matcha-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer-tagline {
  font-size: .83rem;
  color: var(--muted);
  max-width: 260px;
  line-height: 1.55;
  margin-bottom: .5rem;
}
.footer-hearts { font-size: 1.3rem; letter-spacing: .15em; opacity: .7; }

/* Nav columns */
.footer-nav-group {
  display: flex;
  gap: 3rem;
}
.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 130px;
}
.footer-nav-heading {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--rose-500);
  margin-bottom: .3rem;
}
.footer-nav-col a {
  font-size: .83rem;
  color: var(--muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s, transform .2s;
  width: fit-content;
}
.footer-nav-col a:hover {
  color: var(--rose-500);
  transform: translateX(3px);
}
.footer-nav-col a i { font-size: .8rem; }

/* Bottom bar */
.footer-bar { position: relative; padding-bottom: 1.25rem; margin-bottom: 1rem; }
.footer-gradient-line {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(227,107,147,.35), rgba(45,168,123,.35), transparent);
  margin-bottom: 0;
}
.footer-copy { font-size: .75rem; color: var(--muted); }
.footer-made { font-size: .78rem; color: var(--muted); }
.footer-heart-beat {
  color: #e36b93;
  display: inline-block;
  animation: heartbeat 1.4s ease-in-out infinite;
}
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  14%      { transform: scale(1.3); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.2); }
  56%      { transform: scale(1); }
}

/* Responsive */
@media (max-width: 768px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .footer-nav-group { gap: 2rem; }
  .site-footer {  border-radius: 12px; }
}

/* =====================================================
   MODAL — glass-morphism override
   ===================================================== */
.modal-content {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(227,107,147,.18) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.6) inset !important;
}
.modal-header .btn-close { opacity: .5; }
.modal-header .btn-close:hover { opacity: 1; }

/* Kind toggle */
.compass-kind-toggle {
  display: flex;
  gap: .5rem;
  width: 100%;
}
.compass-kind-btn {
  flex: 1;
  padding: .6rem .5rem;
  border: 2px solid rgba(0,0,0,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.5);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  color: var(--muted);
  user-select: none;
}
.compass-kind-btn:hover {
  background: rgba(255,255,255,.8);
  border-color: rgba(0,0,0,.18);
  color: inherit;
}
.compass-kind-btn.active.compass-kind-appreciate {
  border-color: #2da87b;
  background: linear-gradient(135deg, rgba(45,168,123,.15), rgba(45,168,123,.05));
  color: #2da87b;
  box-shadow: 0 0 0 3px rgba(45,168,123,.15);
}
.compass-kind-btn.active.compass-kind-avoid {
  border-color: #e36b93;
  background: linear-gradient(135deg, rgba(227,107,147,.15), rgba(227,107,147,.05));
  color: #e36b93;
  box-shadow: 0 0 0 3px rgba(227,107,147,.15);
}

/* =====================================================
   COMPASS HISTORY
   ===================================================== */

/* Section wrapper */
.compass-history-section {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(99,102,241,.15);
  border-radius: 20px;
  overflow: hidden;
}
.compass-history-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(135deg, rgba(99,102,241,.06) 0%, rgba(139,92,246,.04) 100%);
  border-bottom: 1px solid rgba(99,102,241,.1);
  font-size: .9rem;
}
.compass-history-header > i {
  font-size: 1.4rem;
  color: #6366f1;
  flex-shrink: 0;
}

/* Timeline */
.compass-history-timeline {
  padding: 0 1.4rem 1.4rem;
}
.compass-history-month {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--muted);
  margin: 1.1rem 0 .6rem 2rem;
}

/* Individual history item */
.compass-history-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem .9rem;
  border-radius: 14px;
  margin-bottom: .5rem;
  border: 1px solid rgba(0,0,0,.05);
  background: rgba(255,255,255,.5);
  transition: background .2s;
}
.compass-history-item:hover { background: rgba(255,255,255,.75); }

/* Left dot icon */
.compass-history-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex-shrink: 0; margin-top: .1rem;
}
.ch-better .compass-history-dot { background: rgba(45,168,123,.12); color: #2da87b; }
.ch-worse  .compass-history-dot { background: rgba(239,68,68,.1);   color: #ef4444; }
.ch-removed .compass-history-dot { background: rgba(100,116,139,.1); color: #64748b; }

/* Content */
.compass-history-content { flex: 1; min-width: 0; }
.compass-history-top {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem; margin-bottom: .35rem;
}
.compass-history-trait { font-size: .9rem; font-weight: 600; }
.compass-history-kind {
  font-size: .68rem; padding: .15rem .45rem;
  border-radius: 99px; font-weight: 600; white-space: nowrap;
}
.ch-kind-app  { background: rgba(45,168,123,.1); color: #2da87b; }
.ch-kind-avoid { background: rgba(227,107,147,.1); color: #e36b93; }

/* Reason tag */
.compass-history-reason {
  font-size: .68rem; padding: .15rem .5rem; border-radius: 99px; font-weight: 600; white-space: nowrap;
}
.ch-better  .compass-history-reason,
.compass-history-reason.ch-better  { background: rgba(45,168,123,.12); color: #2da87b; }
.ch-worse   .compass-history-reason,
.compass-history-reason.ch-worse   { background: rgba(239,68,68,.1);  color: #ef4444; }
.ch-removed .compass-history-reason,
.compass-history-reason.ch-removed { background: rgba(100,116,139,.1); color: #64748b; }

/* Meta row */
.compass-history-meta {
  display: flex; align-items: center; gap: .5rem;
  font-size: .74rem; color: var(--muted); flex-wrap: wrap;
}
.compass-history-who {
  width: 20px; height: 20px; border-radius: 50%;
  color: #fff; font-size: .6rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.compass-history-cat { display: flex; align-items: center; gap: .25rem; }
.compass-history-note {
  font-size: .78rem; color: var(--muted); font-style: italic;
  margin-top: .3rem; padding: .3rem .5rem;
  background: rgba(0,0,0,.03); border-radius: 6px;
  border-left: 2px solid rgba(99,102,241,.3);
}

/* Archive reason modal buttons */
.compass-archive-reason-btn {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem 1rem; border-radius: 14px; border: 2px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.5); cursor: pointer; text-align: left;
  transition: all .2s; width: 100%;
}
.compass-archive-reason-btn > i { font-size: 1.3rem; flex-shrink: 0; }
.compass-archive-reason-btn:hover { background: rgba(255,255,255,.85); }
.compass-archive-reason-btn.ch-better  > i { color: #2da87b; }
.compass-archive-reason-btn.ch-worse   > i { color: #ef4444; }
.compass-archive-reason-btn.ch-removed > i { color: #64748b; }
.compass-archive-reason-btn.ch-better.selected  { border-color: #2da87b; background: rgba(45,168,123,.08);  box-shadow: 0 0 0 3px rgba(45,168,123,.15); }
.compass-archive-reason-btn.ch-worse.selected   { border-color: #ef4444; background: rgba(239,68,68,.06);   box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.compass-archive-reason-btn.ch-removed.selected { border-color: #94a3b8; background: rgba(100,116,139,.06); box-shadow: 0 0 0 3px rgba(100,116,139,.12); }

/* Archived trait items use archive icon, not X */
.compass-delete-btn { transition: all .2s; }
.compass-archive-btn { background: rgba(99,102,241,.08) !important; color: #6366f1 !important; }
.compass-archive-btn:hover { background: rgba(99,102,241,.18) !important; transform: scale(1.1); }