:root[data-theme="light"]{
  --bg:#f7f9fd;
  --card:#ffffff;
  --accent:#4a7dff;
  --text:#0b1424;
  --muted:#708099;
}
:root[data-theme="light"] body{background:var(--bg);color:var(--text);}
:root[data-theme="light"] .account-dropdown{background:#ffffff;border:1px solid rgba(11,20,36,0.08);box-shadow:0 16px 32px rgba(11,20,36,0.14);}
:root[data-theme="light"] .dropdown-item{color:var(--text);} 
:root[data-theme="light"] .dropdown-item:hover{background:rgba(74,125,255,0.18);} 
:root[data-theme="light"] .calendar-toggle{background:rgba(11,20,36,0.06);color:rgba(11,20,36,0.7);} 
:root[data-theme="light"] .calendar-toggle.active{color:#fff;} 
:root[data-theme="light"] .week-arrow,
:root[data-theme="light"] .month-arrow{background:#fff;color:var(--text);border-color:rgba(11,20,36,0.08);} 
:root[data-theme="light"] .month-grid{background:#fff;border-color:rgba(11,20,36,0.08);box-shadow:0 30px 55px rgba(11,20,36,0.12);} 
:root[data-theme="light"] .month-cell{background:rgba(242,244,249,0.95);border-color:rgba(11,20,36,0.06);} 
:root[data-theme="light"] .month-cell-number{color:var(--text);} 
:root[data-theme="light"] .month-task-list .day-task-item{color:var(--text);} 
:root[data-theme="light"] .month-task-empty{color:rgba(11,20,36,0.35);} 
:root[data-theme="light"] .week-range{color:var(--text);} 
:root[data-theme="light"] .day{background:var(--card);color:var(--text);} 
:root[data-theme="light"] .day:hover{background:rgba(74,125,255,0.18);} 
:root[data-theme="light"] .day-task-item{color:rgba(11,20,36,0.65);} 
:root[data-theme="light"] header{background:linear-gradient(180deg,rgba(255,255,255,0.96),rgba(255,255,255,0.72));box-shadow:0 18px 40px rgba(11,20,36,0.08);} 

.account-dropdown{
  position:absolute;
  top:calc(100% + 0.6rem);
  right:0;
  background:#141822;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  padding:0.45rem;
  min-width:240px;
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  z-index:60;
}
.account-dropdown.hidden{display:none;}
.dropdown-item{
  appearance:none;
  border:none;
  background:transparent;
  width:100%;
  padding:0.55rem 0.75rem;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0.75rem;
  font-size:0.95rem;
  color:#f1f4ff;
  transition:background 0.2s ease,color 0.2s ease;
  cursor:pointer;
}
.dropdown-item.has-control{
  justify-content:space-between;
}
.dropdown-item:hover:not(:disabled){
  background:rgba(74,163,255,0.12);
  color:var(--accent);
}
.dropdown-item:disabled{
  color:var(--muted);
  cursor:not-allowed;
}
.theme-toggle-label{
  font-weight:500;
  flex:1;
  text-align: left;
}
.theme-toggle-control{
  position:relative;
  width:46px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.2);
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 3px;
  transition:background 0.25s ease,border-color 0.25s ease;
}
.theme-toggle-thumb{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:50%;
  background:linear-gradient(135deg,#ffe27a,#ffbe3d);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  transition:transform 0.25s ease;
  left:3px;
}
.theme-toggle-control::before,
.theme-toggle-control::after{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.6);
  opacity:0;
  transition:opacity 0.25s ease;
}
.theme-toggle-control::before{margin-left:2px;margin-right:4px;}
.theme-toggle-control::after{margin-left:auto;margin-right:2px;background:rgba(255,255,255,0.25);}
body[data-theme="light"] .theme-toggle-thumb{
  background:linear-gradient(135deg,#6fa8ff,#4a6fff);
  transform:translateX(22px);
  box-shadow:0 4px 14px rgba(20,36,66,0.3);
}

#settingsModal{
  position:fixed;inset:0;background:rgba(12,15,22,0.85);
  display:none;align-items:center;justify-content:center;z-index:65;
}
#settingsModal.active{display:flex;}
:root[data-theme="light"] .settings-panel{background:#ffffff;border:1px solid rgba(11,20,36,0.08);box-shadow:0 28px 70px rgba(11,20,36,0.16);} 
:root[data-theme="light"] .settings-nav{background:#f0f3fb;border-right:1px solid rgba(11,20,36,0.08);} 
:root[data-theme="light"] .settings-nav-item{color:rgba(11,20,36,0.65);} 
:root[data-theme="light"] .settings-nav-item.active{background:linear-gradient(135deg,rgba(74,125,255,0.28),rgba(74,125,255,0.18));color:#0b1424;box-shadow:0 12px 26px rgba(74,125,255,0.25);} 
:root[data-theme="light"] .settings-content{background:transparent;} 
:root[data-theme="light"] .settings-section{background:#f7f9fd;border:1px solid rgba(11,20,36,0.08);min-height:0;} 
:root[data-theme="light"] .settings-section h3{color:var(--text);} 
:root[data-theme="light"] .settings-sublabel{color:rgba(11,20,36,0.55);} 
.settings-header{display:flex;justify-content:space-between;align-items:center;padding:1.75rem 2rem 1.25rem;gap:1rem;}
.settings-header h2{margin:0;color:#fff;font-size:1.6rem;}
.settings-close{background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer;padding:0.2rem;}
:root[data-theme="light"] .settings-layout{border-top:1px solid rgba(11,20,36,0.08);}
.settings-layout{display:grid;grid-template-columns:200px 1fr;gap:0;border-top:1px solid rgba(255,255,255,0.06);height:100%;min-height:0;flex:1;}
.settings-nav{background:#1b2231;border-right:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;gap:0.4rem;padding:1.5rem 1.25rem;overflow-y:auto;min-height:0;}
.settings-nav-item{background:none;border:none;color:rgba(255,255,255,0.75);text-align:left;padding:0.55rem 0.75rem;border-radius:10px;font-weight:500;cursor:pointer;transition:background 0.2s ease,color 0.2s ease;}
.settings-nav-item:hover{background:rgba(74,163,255,0.12);color:#fff;}
.settings-nav-item.active{background:linear-gradient(135deg,rgba(74,163,255,0.25),rgba(74,125,255,0.18));color:#fff;box-shadow:0 12px 28px rgba(74,163,255,0.2);}
.settings-content{padding:1.75rem 2rem;overflow-y:auto;display:flex;flex-direction:column;gap:2rem;min-height:0;height:100%;}
.settings-section{background:#1d2534;border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:1.75rem;display:flex;flex-direction:column;gap:1.2rem;flex:1;min-height:0;}
.settings-section.hidden{display:none;}
.settings-divider{width:100%;border:none;border-top:1px solid rgba(255,255,255,0.08);margin:0.5rem 0 1rem;}
.settings-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}
.settings-form-group{display:flex;flex-direction:column;gap:0.4rem;}
.settings-form-group label{font-size:0.85rem;color:rgba(255,255,255,0.7);}
.settings-form-group input{
  padding:0.55rem 0.65rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:#121722;
  color:#fff;
}
.settings-form-group select{
  padding:0.55rem 0.65rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:#121722;
  color:#fff;
  appearance:none;
}
.settings-form-group input[readonly]{background:#10141d;color:rgba(255,255,255,0.5);cursor:not-allowed;}
.settings-status{flex:1;color:var(--muted);font-size:0.85rem;align-self:center;text-align:left;}
.settings-status.error{color:#ff8484;}
.settings-section h3{
  margin:0;
  color:#fff;
  font-size:1.1rem;
}
.settings-sublabel{
  color:var(--muted);
  font-size:0.85rem;
}
.avatar-preview-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.avatar-canvas-container{
  position:relative;
  width:220px;
  height:220px;
}
.avatar-canvas{
  width:220px;
  height:220px;
  border-radius:50%;
  border:3px solid rgba(74,163,255,0.35);
  background:#111;
  box-shadow:0 16px 45px rgba(74,163,255,0.2);
}
.avatar-canvas-overlay{
  position:absolute;
  inset:0;
  cursor:grab;
}
.avatar-canvas-overlay:active{
  cursor:grabbing;
}
.avatar-placeholder{
  width:180px;
  height:180px;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  background:rgba(12,14,21,0.8);
  font-size:0.9rem;
}
.avatar-controls{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.avatar-slider{width:100%;}
.avatar-actions{
  display:flex;
  justify-content:space-between;
  gap:0.75rem;
  flex-wrap:wrap;
}
.settings-btn{
  padding:0.6rem 1rem;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:600;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.settings-btn.primary{
  background:linear-gradient(135deg,#4a7dff,#5b9bff);
  color:#fff;
  box-shadow:0 15px 35px rgba(74,163,255,0.3);
}
.settings-btn.primary:disabled{
  opacity:0.6;
  cursor:not-allowed;
  box-shadow:none;
}
.settings-btn.secondary{
  background:#232a38;
  color:#fff;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
}
.settings-btn.danger{
  background:#ffe8ec;
  color:#b6233b;
  border:1px solid rgba(182,35,59,0.25);
}
.settings-btn:hover:not(:disabled){
  transform:translateY(-2px);
}
.avatar-dropzone{
  border:2px dashed rgba(255,255,255,0.18);
  border-radius:12px;
  padding:1.75rem;
  text-align:center;
  color:var(--muted);
  background:rgba(18,21,30,0.85);
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  cursor:pointer;
  transition:border 0.2s ease, background 0.2s ease;
}
.avatar-dropzone strong{
  color:#fff;
  font-weight:600;
}
.avatar-dropzone.dragover{
  border-color:var(--accent);
  background:rgba(74,163,255,0.15);
  color:#fff;
}
.avatar-dropzone input{display:none;}
.settings-error{
  color:#ff8484;
  font-size:0.85rem;
}

 :root {
   --bg:#111;
   --card:#1e1e1e;
   --accent:#4aa3ff;
   --text:#eee;
   --muted:#888;
 }
 *{box-sizing:border-box;font-family:system-ui;}
 body{
   margin:0;background:var(--bg);color:var(--text);
   display:flex;flex-direction:column;height:100vh;
 }
.hidden{display:none !important;}
 header{
   padding:1rem;
   border-bottom:1px solid #222;
   display:flex;justify-content:space-between;align-items:center;
   flex-wrap:wrap;gap:0.5rem;
 }
 header h1{margin:0;font-size:1.2rem;color:var(--accent);}
 .header-title{display:flex;flex-direction:column;gap:0.2rem;min-width:200px;}
 .tagline{margin:0;font-size:0.9rem;color:var(--muted);}
 .header-controls{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;}
 #searchBox{
   padding:0.4rem 0.8rem;border-radius:5px;border:none;outline:none;
   background:#2b2b2b;color:var(--text);width:200px;
 }
 .btn-header{
   padding:0.65rem 1rem;
   border:none;
   border-radius:9px;
   background:#333;
   color:var(--text);
   cursor:pointer;
   font-size:0.9rem;
   line-height:1;
   display:flex;
   align-items:center;
   justify-content:center;
 }
 .btn-header.theme-toggle{
   width:2.25rem;
   height:2.25rem;
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:1.1rem;
   padding:0;
 }
 .btn-header:hover{background:#3a3a3a;}
 .btn-header.manage{background:var(--accent);color:#fff;}
 .btn-header.manage:hover{background:#3a9dff;}
 .btn-header.meeting-btn{
   background:linear-gradient(135deg,#4a7dff,#60a6ff);
   color:#fff;
   font-weight:600;
 }
 .btn-header.meeting-btn:hover{
   background:linear-gradient(135deg,#3d6eff,#4f96ff);
 }
 :root[data-theme="light"] .btn-header.meeting-btn{
   background:linear-gradient(135deg,#4a7dff,#60a6ff);
   color:#fff;
   border:none;
 }
 #week{display:grid;grid-template-columns:repeat(7,1fr);gap:0.5rem;padding:1rem 0;position:relative;}
#week.week-animate-forward{animation:weekSlideForward 220ms ease forwards;}
#week.week-animate-back{animation:weekSlideBack 220ms ease forwards;}
@keyframes weekSlideForward{from{transform:translateX(48px);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes weekSlideBack{from{transform:translateX(-48px);opacity:0;}to{transform:translateX(0);opacity:1;}}
 .day{
   background:var(--card);padding:0.5rem;border-radius:8px;
   text-align:center;cursor:pointer;transition:0.2s;
   display:flex;flex-direction:column;align-items:center;gap:0.3rem;
 }
.day.today:not(.active){
  box-shadow:0 0 0 2px rgba(74,163,255,0.2) inset;
}
 .day:hover{background:#252525;}
 .day.active{border:2px solid var(--accent);}
 .day.all-completed{
   background:#1a4d2e;
 }
 .day.all-completed:hover{
   background:#1f5a36;
 }
 .day-completed-text{
   font-size:0.75rem;color:#28a745;font-weight:500;
   margin-top:0.2rem;
 }
 .day-header{
   font-weight:500;white-space:pre-line;
 }
 .day-tasks{
   display:flex;flex-direction:column;gap:0.2rem;width:100%;
   font-size:0.7rem;margin-top:0.2rem;
 }
 .day-task-item{
   display:flex;align-items:center;gap:0.3rem;justify-content:flex-start;
   color:var(--muted);
 }
 .day-task-dot{
   width:6px;height:6px;border-radius:50%;flex-shrink:0;
 }
 .day-task-dot.todo{background:#dc3545;}
 .day-task-dot.progress{background:#ffc107;}
 .day-task-dot.done{background:#28a745;}
 .day-task-dot.meeting{background:#65c7ff;}
 .board-header{padding:1rem;color:var(--text);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;position:relative;}
.board-header .board-controls-left{display:flex;align-items:center;gap:0.6rem;}
.board-header .board-controls-center{display:flex;justify-content:center;align-items:center;}
.board-header .board-controls-right{display:flex;align-items:center;gap:0.6rem;justify-content:flex-end;}
.board-header input#searchBox{padding:0.55rem 0.8rem;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:rgba(18,24,34,0.9);color:var(--text);min-width:220px;}
.board-header input#searchBox:focus{outline:none;border-color:rgba(74,163,255,0.6);box-shadow:0 0 0 2px rgba(74,163,255,0.25);}
.board-header #filterBtn{padding:0.55rem 1rem;background:#2b2b2b;color:var(--text);border:none;border-radius:10px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:0.4rem;}
.board-header .btn-header.manage{display:flex;align-items:center;justify-content:center;padding:0.55rem 1rem;background:var(--accent);color:#fff;border-radius:10px;font-weight:600;}
.board-header #catchUpBtn{padding:0.55rem 1rem;background:var(--accent);color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:600;}
 #catchUpBtn:hover{
   background:#3a9dff;
 }
 #catchUpBtn.hidden{
   display:none;
 }
 #filterBtn{
   padding:0.5rem 1rem;background:#2b2b2b;color:var(--text);
   border:none;border-radius:5px;cursor:pointer;font-size:0.9rem;
   transition:0.2s;font-weight:500;display:flex;align-items:center;gap:0.5rem;
 }
 #filterBtn:hover{
   background:#333;
 }
 #filterBtn.active{
   background:var(--accent);color:#fff;
 }
 #projectFilterModal{
   position:fixed;top:60px;left:1rem;background:#1b1b1b;
   padding:1rem;border-radius:10px;min-width:250px;max-width:300px;
   box-shadow:0 4px 20px rgba(0,0,0,0.5);z-index:25;display:none;
   max-height:70vh;overflow-y:auto;
   scrollbar-width:thin;
   scrollbar-color:var(--muted) #1b1b1b;
 }
 #projectFilterModal::-webkit-scrollbar{
   width:6px;
 }
 #projectFilterModal::-webkit-scrollbar-track{
   background:#1b1b1b;border-radius:3px;
 }
 #projectFilterModal::-webkit-scrollbar-thumb{
   background:var(--muted);border-radius:3px;
 }
 #projectFilterModal::-webkit-scrollbar-thumb:hover{
   background:var(--accent);
 }
 #projectFilterModal.active{
   display:block;
 }
 .filter-header{
   display:flex;justify-content:space-between;align-items:center;
   margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:1px solid #333;
 }
 .filter-header h4{
   margin:0;font-size:0.9rem;color:var(--accent);
 }
 .filter-select-all{
   padding:0.4rem 0.8rem;background:var(--accent);color:#fff;
   border:none;border-radius:5px;cursor:pointer;font-size:0.85rem;
   margin-bottom:0.5rem;width:100%;
 }
 .filter-select-all:hover{
   background:#3a9dff;
 }
 .filter-project-item{
   display:flex;align-items:center;gap:0.5rem;padding:0.5rem;
   background:#222;border-radius:5px;margin-bottom:0.5rem;cursor:pointer;
   transition:0.2s;
 }
 .filter-project-item:hover{
   background:#2a2a2a;
 }
 .filter-project-item input[type="checkbox"]{
   width:18px;height:18px;cursor:pointer;flex-shrink:0;
   appearance:none;-webkit-appearance:none;
   background:#2b2b2b;border:2px solid var(--muted);
   border-radius:4px;position:relative;transition:all 0.2s;
 }
 .filter-project-item input[type="checkbox"]:hover{
   border-color:var(--accent);background:#333;
 }
 .filter-project-item input[type="checkbox"]:checked{
   background:var(--accent);border-color:var(--accent);
 }
 .filter-project-item input[type="checkbox"]:checked::after{
   content:'✓';position:absolute;top:50%;left:50%;
   transform:translate(-50%,-50%);color:#fff;font-size:12px;
   font-weight:bold;line-height:1;
 }
 .filter-project-color{
   width:12px;height:12px;border-radius:50%;flex-shrink:0;
 }
 .filter-project-name{
   flex:1;font-size:0.9rem;color:var(--text);
 }
 .filter-section{
   margin-bottom:1rem;
 }
 .filter-category-item{
   display:flex;align-items:center;gap:0.5rem;padding:0.5rem;
   background:#222;border-radius:5px;margin-bottom:0.5rem;cursor:pointer;
   transition:0.2s;
 }
 .filter-category-item:hover{
   background:#2a2a2a;
 }
 .filter-category-item input[type="checkbox"]{
   width:18px;height:18px;cursor:pointer;flex-shrink:0;
   appearance:none;-webkit-appearance:none;
   background:#2b2b2b;border:2px solid var(--muted);
   border-radius:4px;position:relative;transition:all 0.2s;
 }
 .filter-category-item input[type="checkbox"]:hover{
   border-color:var(--accent);background:#333;
 }
 .filter-category-item input[type="checkbox"]:checked{
   background:var(--accent);border-color:var(--accent);
 }
 .filter-category-item input[type="checkbox"]:checked::after{
   content:'✓';position:absolute;top:50%;left:50%;
   transform:translate(-50%,-50%);color:#fff;font-size:12px;
   font-weight:bold;line-height:1;
 }
 .filter-category-name{
   flex:1;font-size:0.9rem;color:var(--text);
 }
 #board{
   flex:1;display:flex;overflow-x:auto;gap:1rem;
   padding:1rem;align-items:flex-start;
 }
 #chartContainer{
   flex:0 0 400px;background:var(--card);padding:1.5rem;
   border-radius:10px;display:flex;flex-direction:column;
   min-height:300px;max-height:100%;overflow-y:auto;
   scrollbar-width:thin;
   scrollbar-color:var(--muted) var(--card);
 }
 #chartContainer::-webkit-scrollbar{
   width:8px;
 }
 #chartContainer::-webkit-scrollbar-track{
   background:var(--card);border-radius:4px;
 }
 #chartContainer::-webkit-scrollbar-thumb{
   background:var(--muted);border-radius:4px;
 }
 #chartContainer::-webkit-scrollbar-thumb:hover{
   background:var(--accent);
 }
 #chartContainer h3{
   margin:0 0 1rem;font-size:0.9rem;color:var(--accent);text-align:center;
 }
 #chart{
   display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:100%;
 }
 .project-chart{
   display:flex;flex-direction:column;align-items:center;
   padding:0.8rem;background:#222;border-radius:8px;
 }
 .project-chart-title{
   font-size:0.85rem;font-weight:500;margin-bottom:0.5rem;
   color:var(--text);display:flex;align-items:center;gap:0.5rem;
 }
 .project-chart-title-color{
   width:12px;height:12px;border-radius:50%;flex-shrink:0;
 }
 .project-chart-svg{
   width:120px;height:120px;position:relative;
 }
 .chart-legend{
   margin-top:0.8rem;display:flex;flex-direction:column;gap:0.4rem;width:100%;
 }
 .chart-legend-item{
   display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;
 }
 .chart-legend-color{
   width:10px;height:10px;border-radius:50%;flex-shrink:0;
 }
 @media (max-width:768px){
   #chartContainer{flex:0 0 240px;padding:1rem;}
   #chart{grid-template-columns:1fr;}
   .project-chart-svg{width:140px;height:140px;}
 }
 .column{
   background:var(--card);
   flex:0 0 300px;min-width:250px;padding:1rem;border-radius:10px;
  display:flex;flex-direction:column;max-height:100%;
  border:1px solid rgba(255,255,255,0.05);
  transition:border 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  position:relative;
 }

.column.drag-over{
  border-color:rgba(74,163,255,0.7);
  box-shadow:0 18px 40px rgba(74,163,255,0.18);
  transform:translateY(-4px);
}

.column.drag-over::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(74,163,255,0.12),rgba(74,163,255,0.02));
  pointer-events:none;
}
 @media (max-width:768px){
   .column{flex:0 0 280px;min-width:220px;}
   #searchBox{width:150px;}
   header{flex-direction:column;align-items:flex-start;}
   #modalContent, #taskEditorContent, #projectManagerContent{
     width:90vw;max-width:450px;
   }
 }

@media (max-width:640px){
  header{
    align-items:stretch;
    gap:1rem;
  }
  .header-controls{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    width:100%;
    gap:0.75rem;
  }
  #searchBox,
  #boardSelect,
  .btn-header,
  .account-button{
    width:100%;
  }
  .account-menu{
    width:100%;
  }
  .account-button{
    justify-content:space-between;
  }
  .account-dropdown{
    left:0;
    right:auto;
    width:100%;
  }
  #boardHeader{
    flex-direction:column;
    align-items:stretch;
    gap:0.75rem;
    padding-inline:1rem;
  }
  #boardHeader .date-text{
    order:-1;
    width:100%;
    text-align:left;
    font-size:1.05rem;
    padding:0.25rem 0;
  }
  #boardHeader button{
    width:100%;
  }
  #board{
    flex-direction:column;
    overflow-x:hidden;
    gap:1rem;
    padding-inline:1rem;
  }
  .column{
    flex:1;
    min-width:0;
    width:100%;
  }
  #chartContainer{
    flex:1;
    width:100%;
  }
  #week{
    grid-template-columns:repeat(2,1fr);
    padding-inline:1rem;
  }
}

@media (max-width:480px){
  #week{
    grid-template-columns:1fr;
  }
}
 .column h2{
   font-size:1rem;margin:0 0 .5rem;color:var(--accent);
 }
 .tasks{
   flex:1;overflow-y:auto;padding-right:.5rem;
   scrollbar-width:thin;
  scrollbar-color:var(--muted) var(--card);
  position:relative;
}

.tasks.drag-over{
  padding-bottom:3rem;
}

.column.drag-over .tasks::after{
  content:"Drop here";
  position:absolute;
  left:50%;
  transform:translate(-50%,12px);
  bottom:0.5rem;
  border-radius:12px;
  background:rgba(74,163,255,0.12);
  color:var(--accent);
  text-align:center;
  font-size:0.75rem;
  padding:0.35rem 0.85rem;
  box-shadow:0 12px 28px rgba(74,163,255,0.18);
  opacity:0;
  transition:opacity 0.2s ease, transform 0.2s ease;
  pointer-events:none;
}

.column.drag-over .tasks::after{
  opacity:1;
  transform:translate(-50%,0);
 }
 .tasks::-webkit-scrollbar{
   width:6px;
 }
 .tasks::-webkit-scrollbar-track{
   background:var(--card);border-radius:3px;
 }
 .tasks::-webkit-scrollbar-thumb{
   background:var(--muted);border-radius:3px;
 }
 .tasks::-webkit-scrollbar-thumb:hover{
   background:var(--accent);
 }
 .task{
   position:relative;
   display:flex;
   flex-direction:column;
   background:#1f242f;
   border-radius:10px;
   padding:1.3rem 1rem 0.85rem;
   margin-bottom:0.6rem;
   box-shadow:0 10px 20px rgba(0,0,0,0.25);
   border:1px solid rgba(255,255,255,0.06);
   color:#fff;
   cursor:grab;
   transition:background 0.2s;
   overflow:hidden;
 }
:root[data-theme="light"] .task{
  background:#f5f7ff;
  border:1px solid rgba(11,20,36,0.08);
  color:var(--text);
  box-shadow:0 14px 26px rgba(11,20,36,0.08);
  padding:1.3rem 1rem 0.85rem;
}
.task.dragging{
  opacity:0.35;
}
.task.placeholder{
  border:1px dashed rgba(74,163,255,0.5);
  background:rgba(74,163,255,0.08);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.85rem;
  font-style:italic;
  min-height:48px;
  margin-bottom:.5rem;
  pointer-events:none;
}
.task.placeholder span{opacity:0.75;}
 .task:hover{background:#2b2b2b;}
 .task-header{display:flex;align-items:center;margin-bottom:0.25rem;}
 .color-bar{
   width:6px;height:100%;border-radius:3px;margin-right:.6rem;flex-shrink:0;
 }
 .task-title{font-weight:500;color:var(--text);}
 .task-date{
   font-size:0.8rem;color:rgba(11,20,36,0.55);margin-left:1.6rem;margin-top:-0.1rem;
 }
 .task-notes{
   font-size:0.85rem;color:rgba(11,20,36,0.65);margin-left:1.6rem;margin-top:0.3rem;
   max-height:3em;overflow:hidden;text-overflow:ellipsis;line-height:1.3;
 }
 .task.hidden{display:none;}
 .add-task{
   background:none;border:1px dashed var(--muted);
   color:var(--muted);padding:.4rem;border-radius:8px;
   cursor:pointer;margin-top:.5rem;
 }
 .add-task:hover{border-color:var(--accent);color:var(--accent);}
 #projectModal, #taskEditor, #projectManager{
   position:fixed;inset:0;background:rgba(0,0,0,.7);
   display:none;align-items:center;justify-content:center;z-index:20;
 }
 #modalContent, #taskEditorContent, #projectManagerContent{
   background:#1b1b1b;padding:1.5rem;border-radius:10px;width:450px;max-height:80vh;overflow-y:auto;position:relative;
   scrollbar-width:thin;
   scrollbar-color:var(--muted) #222;
 }
 #modalContent::-webkit-scrollbar, #taskEditorContent::-webkit-scrollbar, #projectManagerContent::-webkit-scrollbar{
   width:8px;
 }
 #modalContent::-webkit-scrollbar-track, #taskEditorContent::-webkit-scrollbar-track, #projectManagerContent::-webkit-scrollbar-track{
   background:#222;border-radius:4px;
 }
 #modalContent::-webkit-scrollbar-thumb, #taskEditorContent::-webkit-scrollbar-thumb, #projectManagerContent::-webkit-scrollbar-thumb{
   background:var(--muted);border-radius:4px;
 }
 #modalContent::-webkit-scrollbar-thumb:hover, #taskEditorContent::-webkit-scrollbar-thumb:hover, #projectManagerContent::-webkit-scrollbar-thumb:hover{
   background:var(--accent);
 }
 .modal-close{
   position:absolute;top:0.75rem;right:0.75rem;
   background:none;border:none;color:var(--muted);
   font-size:1.5rem;cursor:pointer;padding:0;width:30px;height:30px;
   display:flex;align-items:center;justify-content:center;
   border-radius:4px;transition:0.2s;
 }
 .modal-close:hover{
   background:#333;color:var(--text);
 }
 #taskEditorContent h3{
   margin-top:0.5rem;
 }
 .editor-toolbar{
   display:flex;gap:0.5rem;margin-bottom:1rem;padding-bottom:0.75rem;
   border-bottom:1px solid #333;
 }
 .toolbar-btn{
   padding:0.4rem 0.8rem;border:none;border-radius:5px;
   background:#2b2b2b;color:var(--text);cursor:pointer;
   font-size:0.85rem;transition:0.2s;
 }
 .toolbar-btn:hover{background:#333;}
 .toolbar-btn.active{background:var(--accent);color:#fff;}
 .checklist-section{
   margin-top:1rem;display:none;
   max-height:300px;overflow-y:auto;
   scrollbar-width:thin;
   scrollbar-color:var(--muted) #1b1b1b;
 }
 .checklist-section.active{display:block;}
 .checklist-section::-webkit-scrollbar{
   width:6px;
 }
 .checklist-section::-webkit-scrollbar-track{
   background:#1b1b1b;border-radius:3px;
 }
 .checklist-section::-webkit-scrollbar-thumb{
   background:var(--muted);border-radius:3px;
 }
 .checklist-section::-webkit-scrollbar-thumb:hover{
   background:var(--accent);
 }
 .due-date-section{
   margin-top:1rem;display:none;
 }
 .due-date-section.active{display:block;}
 .image-section{
   margin-top:1rem;display:none;
 }
 .image-section.active{display:block;}
 .image-dropzone{
   border:2px dashed rgba(74,125,255,0.3);
   background:#eef3ff;
   color:var(--text);
   padding:2rem;
   text-align:center;
   cursor:pointer;
   transition:all 0.3s;
   position:relative;
 }
 .image-dropzone:hover{
   border-color:rgba(74,125,255,0.5);
   background:#e1e9ff;
   color:var(--text);
 }
 .image-dropzone.dragover{
   border-color:rgba(74,125,255,0.5);
   background:#e1e9ff;
   color:var(--text);
   transform:scale(1.02);
 }
 .image-dropzone-content{
   pointer-events:none;
 }
 .image-dropzone-icon{
   font-size:2.5rem;
   margin-bottom:0.5rem;
   opacity:0.7;
 }
 .image-dropzone-text{
   color:var(--text);
   font-size:0.9rem;
   margin-bottom:0.3rem;
 }
 .image-dropzone-hint{
   color:rgba(11,20,36,0.55);
   font-size:0.8rem;
 }
 .image-dropzone input[type="file"]{
   position:absolute;
   inset:0;
   width:100%;
   height:100%;
   opacity:0;
   cursor:pointer;
 }
 .image-preview-container{
   margin-top:0.5rem;
 }
 .image-preview{
   max-width:100%;
   border-radius:8px;
   max-height:200px;
   object-fit:contain;
   display:block;
   margin:0 auto;
 }
 .image-remove{
   background:#d9534f;
   color:#fff;
   border:none;
   padding:0.4rem 0.8rem;
   border-radius:5px;
   cursor:pointer;
   font-size:0.85rem;
   margin-top:0.5rem;
   width:100%;
   transition:0.2s;
 }
 .image-remove:hover{
   background:#c9302c;
 }
 .task-image{
   width:calc(100% - 1.6rem);
   border-radius:8px;
   margin-top:0.5rem;
   margin-left:1.6rem;
   margin-right:0;
   max-height:150px;
   object-fit:contain;
   cursor:pointer;
   display:block;
 }
 .task-image:hover{
   opacity:0.9;
 }
 .checklist-header{
   display:flex;
   align-items:center;
   justify-content:space-between;
   margin-bottom:0.75rem;
 }
 .checklist-item{
   display:flex;
   align-items:center;
   gap:0.5rem;
   padding:0.5rem;
   background:#222;
   border-radius:5px;
   margin-bottom:0.5rem;
 }
 .checklist-item input[type="checkbox"]{
   width:20px;
   height:20px;
   cursor:pointer;
   flex-shrink:0;
   appearance:none;
   -webkit-appearance:none;
   background:#2b2b2b;
   border:2px solid rgba(11,20,36,0.18);
   border-radius:4px;
   position:relative;
   transition:all 0.2s;
 }
 .checklist-item input[type="checkbox"]:hover{
   border-color:var(--accent);
   background:#333;
 }
 .checklist-item input[type="checkbox"]:checked{
   background:var(--accent);
   border-color:var(--accent);
 }
 .checklist-item input[type="checkbox"]:checked::after{
   content:'✓';
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
   color:#fff;
   font-size:14px;
   font-weight:bold;
   line-height:1;
 }
 .checklist-item input[type="text"]{
   flex:1;
   margin:0;
   padding:0.3rem 0.5rem;
   font-size:0.9rem;
 }
 .checklist-item.completed input[type="text"]{
   text-decoration:line-through;
   color:var(--muted);
 }
 .checklist-delete{
   background:#fbd8dc;
   color:#b6233b;
   border:1px solid rgba(182,35,59,0.25);
   padding:0.2rem 0.5rem;
   border-radius:4px;
   cursor:pointer;
   font-size:0.8rem;
 }
 .checklist-delete:hover{
   background:#c9302c;
 }
 .add-checklist-item{
   background:#2a2d33;
   color:#d9deea;
   border:1px solid rgba(255,255,255,0.08);
 }
 .add-checklist-item:hover{
   background:#32353d;
 }
 :root[data-theme="light"] .add-checklist-item{
   background:#eef2fb;
   color:var(--text);
   border:1px solid rgba(11,20,36,0.12);
 }
 :root[data-theme="light"] .add-checklist-item:hover{
   background:#e0e6f7;
 }
 .task-checklist{
   font-size:0.8rem;
   color:rgba(11,20,36,0.6);
   margin-left:1.6rem;
   margin-top:0.3rem;
   display:flex;
   align-items:center;
   gap:0.3rem;
 }
 .task-checklist.complete{
   color:#28a745;
 }
 .task-checklist-icon{
   margin-right:0.2rem;
 }
 .project-item{
   display:flex;
   align-items:center;
   justify-content:space-between;
   padding:0.8rem;
   background:#222;
   border-radius:8px;
   margin-bottom:0.5rem;
 }
 .project-item-info{
   display:flex;
   align-items:center;
   gap:0.5rem;
   flex:1;
   flex-direction:column;
   align-items:flex-start;
 }
 .project-item-name{
   display:flex;
   align-items:center;
   gap:0.5rem;
   width:100%;
 }
 .project-item-category{
   font-size:0.75rem;
   color:var(--muted);
   margin-left:1.6rem;
 }
 .project-item-color{
   width:20px;
   height:20px;
   border-radius:4px;
   flex-shrink:0;
 }
 .project-item-actions{
   display:flex;
   gap:0.3rem;
 }
 .btn-small{
   padding:0.2rem 0.5rem;
   font-size:0.8rem;
 }
 #editProjectModal{
   position:fixed;
   inset:0;
   background:rgba(0,0,0,.7);
   display:none;
   align-items:center;
   justify-content:center;
   z-index:25;
 }
 #editProjectModal.active{
   display:flex;
 }
 #editProjectContent{
   background:#1b1b1b;
   padding:1.5rem;
   border-radius:10px;
   width:350px;
   position:relative;
   color:#fff;
 }
 label{
   display:block;
   margin-top:.5rem;
   font-size:.9rem;
   color:var(--muted);
 }
 input[type="text"], input[type="color"], input[type="date"], select, textarea{
   width:100%;
   margin-top:.25rem;
   padding:.4rem;
   border-radius:5px;
   border:none;
   outline:none;
   background:#2b2b2b;
   color:var(--text);
 }
 textarea{
   resize:vertical;
   min-height:60px;
 }
 .modal-actions{
   display:flex;
   justify-content:flex-end;
   margin-top:1rem;
   gap:.5rem;
 }
 button{
   cursor:pointer;
 }
 .btn{
   padding:0.6rem 1.1rem;
   border:none;
   border-radius:12px;
   background:linear-gradient(135deg,#4a7dff,#6f8bff);
   color:#fff;
   font-weight:600;
   cursor:pointer;
   transition:transform 0.18s ease, box-shadow 0.18s ease;
 }
 .btn.cancel{
   background:#333;
   color:#bbb;
 }
 .btn.add{
   background:var(--accent);
   color:#fff;
 }
 .btn.danger{
   background:linear-gradient(135deg,#ff5d7a,#ff3d52);
 }
 .btn.danger:hover{
   box-shadow:0 12px 28px rgba(255,93,122,0.35);
 }
 .btn.danger:focus-visible{
   outline:2px solid rgba(255,93,122,0.65);
   outline-offset:3px;
 }

.board-select{
  background:#2b2b2b;
  border:none;
  color:var(--text);
  padding:0.4rem 0.6rem;
  border-radius:5px;
 }

.auth-modal{
  position:fixed;
  inset:0;
  background:rgba(10,12,16,0.78);
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:40;
  padding:1.5rem;
 }

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

.auth-modal-content{
  position:relative;
  background:linear-gradient(160deg,rgba(35,39,52,0.95),rgba(20,21,29,0.95));
  border:1px solid rgba(255,255,255,0.08);
  width:min(420px,100%);
  padding:2.5rem 2.75rem 2.25rem;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  box-shadow:0 35px 80px rgba(0,0,0,0.45);
  overflow:hidden;
 }

.auth-modal-content::after{
  content:"";
  position:absolute;
  inset:-40% -60% auto;
  height:220px;
  background:radial-gradient(circle at top,rgba(74,163,255,0.35),transparent 60%);
  pointer-events:none;
  z-index:0;
 }

.auth-modal-content>*{position:relative;z-index:1;}

.modal-close{
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:1.2rem;
  width:2rem;
  height:2rem;
  border-radius:999px;
  align-self:flex-end;
  cursor:pointer;
  transition:background 0.2s ease,color 0.2s ease;
 }

.modal-close:hover{
  background:rgba(255,255,255,0.06);
  color:#fff;
 }

.auth-hero{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
 }

.auth-pill{
  align-self:flex-start;
  padding:0.3rem 0.85rem;
  border-radius:999px;
  font-size:0.7rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  background:rgba(74,163,255,0.17);
 }

.auth-modal-content h3{
  margin:0;
  font-size:1.9rem;
  color:#fff;
 }

.auth-subtitle{
  margin:0;
  color:rgba(255,255,255,0.7);
  font-size:0.95rem;
  line-height:1.5;
 }

.auth-form label{
  margin-top:0.75rem;
  font-weight:500;
  color:#c6c9d4;
 }

.auth-form input{
  width:100%;
  margin-top:0.35rem;
  padding:0.65rem 0.75rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(17,20,27,0.75);
  color:var(--text);
  transition:border 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;
 }

.auth-form input::placeholder{
  color:rgba(255,255,255,0.45);
 }

.auth-form input:focus{
  outline:none;
  border-color:rgba(74,163,255,0.6);
  box-shadow:0 0 0 3px rgba(74,163,255,0.18);
  background:rgba(24,28,38,0.9);
 }

.auth-signup-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0.9rem;
  margin-top:0.25rem;
 }

.auth-signup-fields[hidden]{
  display:none;
 }

.auth-field-group{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
 }

.field-hint{
  margin:0;
  font-size:0.75rem;
  color:rgba(255,255,255,0.45);
 }

.auth-confirm{
  display:flex;
  flex-direction:column;
  margin-top:0.9rem;
 }

.auth-confirm[hidden]{
  display:none;
 }

.auth-actions{
  display:flex;
  margin-top:1.75rem;
 }

.auth-actions .btn{
  flex:1;
 }

.auth-submit{
  background:linear-gradient(135deg,#4aa3ff,#4a7dff);
  border:none;
  font-weight:600;
  letter-spacing:0.02em;
  box-shadow:0 15px 30px rgba(74,163,255,0.25);
 }

.auth-submit:hover{
  background:linear-gradient(135deg,#3a9dff,#3a67ff);
 }

.link-button{
  background:transparent;
  border:none;
  color:var(--accent);
  font-weight:600;
  cursor:pointer;
  padding:0;
 }

.link-button:hover{
  text-decoration:underline;
 }

.auth-switch{
  display:flex;
  align-items:center;
  gap:0.5rem;
  justify-content:center;
  font-size:0.9rem;
  color:rgba(255,255,255,0.65);
 }

.auth-footnote{
  font-size:0.75rem;
  color:rgba(255,255,255,0.45);
  text-align:center;
 }

.auth-error{
  margin-top:0.75rem;
  color:#ff7b7b;
  font-size:0.9rem;
  text-align:center;
 }

@media (max-width:520px){
  .auth-modal{
    padding:1rem;
  }
  .auth-modal-content{
    padding:2rem 1.75rem;
  }
  .auth-signup-fields{
    grid-template-columns:1fr;
  }
 }

.account-menu{
  position:relative;
  display:flex;
  align-items:center;
 }
 .account-menu.hidden{
  display:none;
 }

.account-button{
  display:flex;
  align-items:center;
  gap:0.5rem;
  background:#181d26;
  color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:0.4rem 0.65rem 0.4rem 0.5rem;
  cursor:pointer;
  transition:background 0.2s ease, box-shadow 0.2s ease;
  min-width:0;
 }
 :root[data-theme="light"] .account-button{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.08);
  box-shadow:0 12px 28px rgba(11,20,36,0.08);
 }
 .account-name{
  font-size:0.9rem;
  color:#fff;
  font-weight:500;
 }
 :root[data-theme="light"] .account-name{
  color:var(--text);
 } 
 .account-caret{
  font-size:0.75rem;
  color:#fff;
  transition:transform 0.2s ease,color 0.2s ease;
  margin-left:auto;
 }
 :root[data-theme="light"] .account-caret{
  color:var(--text);
 } 
 .account-menu.open .account-button{
  background:rgba(74,163,255,0.15);
  box-shadow:0 12px 26px rgba(74,163,255,0.25);
 }
 .user-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.15);
  object-fit:cover;
  box-shadow:0 6px 16px rgba(0,0,0,0.25);
 }
 .user-avatar.hidden{
  display:none;
 }
 .account-name{
  font-size:0.9rem;
  color:#f5f5f5;
  font-weight:500;
 }
 .account-caret{
  font-size:0.75rem;
  color:var(--text);
  transition:transform 0.2s ease,color 0.2s ease;
  margin-left:auto;
 }
 .account-menu.open .account-caret{
  transform:rotate(180deg);
  color:var(--accent);
 }
 .account-dropdown{
  position:absolute;
  top:calc(100% + 0.6rem);
  right:0;
  background:#141822;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  padding:0.45rem;
  min-width:240px;
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  z-index:60;
 }
 .account-dropdown.hidden{
  display:none;
 }
 .dropdown-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  font-size:0.95rem;
 }
 .dropdown-item:hover:not(:disabled){
  background:rgba(74,163,255,0.15);
  color:var(--accent);
 }
 .dropdown-item:disabled{
  color:var(--muted);
  cursor:not-allowed;
 }

.landing{
  padding:4rem 1.5rem 3rem;
  max-width:960px;
  width:100%;
  margin:0 auto;
  text-align:center;
 }

.landing.hidden{
  display:none!important;
 }

.landing-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  margin-bottom:3rem;
 }

.landing-badge{
  display:inline-block;
  padding:0.25rem 0.75rem;
  border-radius:999px;
  background:rgba(74,163,255,0.15);
  color:var(--accent);
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
 }

.landing h2{
  font-size:2.4rem;
  margin:0;
 }

.landing p{
  margin:0;
  color:var(--muted);
  max-width:620px;
 }

.landing-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:1.5rem;
 }

.landing-btn{
  padding:0.75rem 1.75rem;
  border-radius:8px;
  border:1px solid transparent;
  font-size:1rem;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.2s ease;
 }

.landing-btn.primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
 }

.landing-btn.primary:hover{
  background:#3a9dff;
 }

.landing-btn.secondary{
  background:transparent;
  color:var(--text);
  border-color:#333;
 }

.landing-btn.secondary:hover{
  background:#1b1b1b;
 }

.landing-title{
  font-size:3rem;
  margin:0;
  color:#fff;
 }

.landing-showcase{
  margin:4rem auto;
  display:grid;
  gap:2.5rem;
  grid-template-columns:minmax(0,1fr);
 }

.showcase-board{
  background:linear-gradient(135deg,rgba(35,39,52,0.9),rgba(20,22,30,0.95));
  border-radius:20px;
  padding:2rem;
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:0 30px 60px rgba(0,0,0,0.35);
 }

.showcase-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.5rem;
 }

.showcase-chip{
  padding:0.35rem 0.9rem;
  border-radius:999px;
  background:rgba(74,163,255,0.18);
  color:var(--accent);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
 }

.showcase-columns{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 }

.showcase-column{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
 }

.showcase-column h4{
  margin:0;
  color:rgba(255,255,255,0.85);
  font-weight:600;
 }

.showcase-card{
  display:flex;
  gap:0.75rem;
  align-items:flex-start;
  background:rgba(13,16,23,0.9);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:14px;
  padding:0.9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
 }

.showcase-card p{
  margin:0;
  color:rgba(255,255,255,0.55);
  font-size:0.85rem;
 }

.showcase-card strong{
  font-size:0.95rem;
  color:#fff;
 }

.showcase-card.active{
  border-color:rgba(255,193,7,0.5);
 }

.showcase-card.complete{
  opacity:0.85;
  background:rgba(20,27,24,0.9);
 }

.card-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  margin-top:0.35rem;
  flex-shrink:0;
 }

.showcase-side{
  display:grid;
  gap:1rem;
 }

.side-card{
  background:rgba(18,20,28,0.9);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:16px;
  padding:1.5rem;
  box-shadow:0 18px 40px rgba(0,0,0,0.25);
  display:flex;
  flex-direction:column;
  gap:0.65rem;
 }

.side-card h3{
  margin:0;
  color:#fff;
 }

.side-card p{
  margin:0;
  color:rgba(255,255,255,0.6);
 }

.side-icon{
  font-size:1.5rem;
 }

.landing-features{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin:4rem auto 3rem;
 }

.feature-card{
  background:var(--card);
  border-radius:12px;
  padding:1.6rem;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  box-shadow:0 18px 30px rgba(0,0,0,0.25);
 }

.landing-testimonials{
  display:grid;
  gap:1.5rem;
  margin:4rem auto;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 }

.testimonial{
  background:rgba(18,20,28,0.9);
  border-radius:14px;
  padding:1.75rem;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
 }

.testimonial p{
  margin:0 0 0.75rem;
  font-size:1rem;
  color:#e5e5e5;
  line-height:1.6;
 }

.testimonial span{
  color:rgba(255,255,255,0.55);
  font-size:0.9rem;
 }

.landing-cta{
  margin:4rem auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(135deg,rgba(74,163,255,0.2),rgba(74,125,255,0.15));
  padding:2.5rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  box-shadow:0 28px 60px rgba(74,163,255,0.18);
 }

.landing-cta h2{
  margin:0;
  font-size:2rem;
  color:#fff;
 }

.landing-cta p{
  margin:0;
  color:rgba(255,255,255,0.7);
  max-width:420px;
 }

.cta-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
 }

.landing-footer{
  margin-top:3rem;
  color:var(--muted);
  font-size:0.95rem;
 }

@media (min-width:960px){
  .landing-showcase{
    grid-template-columns:2fr 1fr;
    align-items:start;
  }
 }

#appShell{
  flex:1;
  display:flex;
  flex-direction:column;
 }

[data-animate]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.65s ease, transform 0.65s ease;
 }

[data-animate].is-visible{
  opacity:1;
  transform:translateY(0);
 }

[data-animate][data-delay]{
  transition-delay:calc(var(--animate-delay,0ms));
 }

.site-footer{
  margin-top:4rem;
  background:#0c0f16;
  border-top:1px solid rgba(255,255,255,0.05);
  padding:3rem 1.5rem 2rem;
 }

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
 }

.footer-brand h3{
  margin:0;
  color:#fff;
  font-size:1.2rem;
 }

.footer-brand p{
  margin:0.75rem 0 0;
  color:rgba(255,255,255,0.6);
 } 

.footer-links{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
 }

.footer-links h4{
  margin:0 0 0.6rem;
  color:#fff;
  font-size:1rem;
 }

.footer-link{
  color:rgba(255,255,255,0.6);
  text-decoration:none;
  font-size:0.95rem;
 }

.footer-link:hover{
  color:#fff;
 }

.footer-bottom{
  max-width:1100px;
  margin:2.5rem auto 0;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:space-between;
  color:rgba(255,255,255,0.45);
  font-size:0.9rem;
 }

.footer-legal{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
 }

@media (prefers-reduced-motion: reduce){
  [data-animate]{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
 }

.password-field{
  position:relative;
  display:flex;
  align-items:center;
 }

.password-field input{
  width:100%;
  padding-right:2.5rem;
 }

.password-toggle{
  position:absolute;
  right:0.6rem;
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.55);
  font-size:1rem;
  cursor:pointer;
  transition:color 0.2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
 }

.password-toggle:hover{
  color:#fff;
 }

.avatar-editor{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding:1.25rem;
  border-radius:14px;
  background:rgba(15,19,28,0.75);
  border:1px solid rgba(255,255,255,0.05);
 }
 #avatarEditToggle{
  align-self:flex-start;
 }

.settings-form-group .settings-sublabel{
  margin:0;
  color:rgba(255,255,255,0.45);
  font-size:0.8rem;
 }
 .avatar-preview-inline{
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.1);
  object-fit:cover;
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
  margin-left:0.75rem;
 }

.profile-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  flex-wrap:wrap;
 }
 .profile-header-text h3{
  margin:0;
  color:#fff;
  font-size:1.1rem;
 }
 .profile-header-actions{
  display:flex;
  align-items:center;
  gap:0.75rem;
 }

.settings-nav::-webkit-scrollbar,.settings-content::-webkit-scrollbar{
  width:6px;
 }
 .settings-nav::-webkit-scrollbar-track,.settings-content::-webkit-scrollbar-track{
  background:rgba(10,14,22,0.6);
  border-radius:3px;
 }
 .settings-nav::-webkit-scrollbar-thumb,.settings-content::-webkit-scrollbar-thumb{
  background:rgba(74,163,255,0.3);
  border-radius:3px;
 }
 .settings-nav::-webkit-scrollbar-thumb:hover,.settings-content::-webkit-scrollbar-thumb:hover{
  background:rgba(74,163,255,0.5);
 }
 .settings-nav{
  scrollbar-width:thin;
  scrollbar-color:rgba(74,163,255,0.3) rgba(10,14,22,0.6);
 }
 .settings-content{
  scrollbar-width:thin;
  scrollbar-color:rgba(74,163,255,0.3) rgba(10,14,22,0.6);
 }

@media (max-width:768px){
  .settings-layout{
    grid-template-columns:1fr;
  }
  .settings-nav{
    flex-direction:row;
    padding:1rem;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.06);
    overflow-x:auto;
  }
  .settings-nav-item{
    flex:1;
    text-align:center;
  }
 }

.week-nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:stretch;
  gap:0.5rem;
  padding:0 1rem 1rem;
 }
 .week-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  font-size:1.4rem;
  font-weight:600;
  cursor:pointer;
  transition:background 0.2s ease,transform 0.2s ease;
  min-width:48px;
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
 }
 .week-arrow:hover{
  background:rgba(74,163,255,0.16);
  color:#fff;
  transform:translateY(-2px);
 }
 .week-arrow:active{
  transform:scale(0.97);
 }
 .week-arrow:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(74,163,255,0.5);
 }
 .week-arrow svg{
  width:18px;
  height:18px;
 }
 .week-range{
  font-size:1.3rem;
  font-weight:600;
  color:var(--text);
  letter-spacing:0.01em;
 }
 .week-range span{
  color:var(--accent);
 }

.week-header{
  padding:1.5rem 1rem 0.5rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.75rem;
 }
 .week-reset{
  padding:0.45rem 1.2rem;
  border-radius:999px;
  border:none;
  background:rgba(74,163,255,0.18);
  color:#fff;
  font-weight:600;
  font-size:0.9rem;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(74,163,255,0.25);
  transition:transform 0.18s ease,box-shadow 0.18s ease;
 }
 .week-reset:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(74,163,255,0.3);
 }
 .week-reset:active{
  transform:scale(0.97);
 }
 .week-reset.hidden{
  display:none;
 }

@media (max-width:768px){
  .week-nav{
    padding:0 0.5rem 0.75rem;
    gap:0.4rem;
  }
  .week-arrow{
    min-width:40px;
    font-size:1.2rem;
  }
 }
 .week-reset{
  align-self:center;
 }

.chat-widget{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:70;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.9rem;
  pointer-events:none;
 }
 .chat-widget.hidden{
  display:none;
 }
 .chat-widget>*{
  pointer-events:auto;
 }
 .chat-toggle{
  width:56px;
  height:56px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,#4aa3ff,#6d60ff);
  color:#fff;
  font-size:1.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 18px 35px rgba(74,163,255,0.35);
  transition:transform 0.2s ease,box-shadow 0.2s ease;
  position:relative;
 }
 .chat-toggle:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 45px rgba(74,163,255,0.45);
 }
 .chat-toggle:active{
  transform:scale(0.95);
 }
 .chat-toggle.active{
  box-shadow:0 8px 25px rgba(74,163,255,0.5);
 }
 .chat-toggle-icon{
  pointer-events:none;
 }
 .chat-panel{
  position:fixed;
  bottom:96px;
  right:24px;
  width:min(460px,calc(100vw - 2rem));
  max-height:min(640px,calc(100vh - 140px));
  background:var(--card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,0.45);
  padding:1.4rem;
  opacity:0;
  transform:translateY(18px) scale(0.96);
  transition:opacity 0.22s ease,transform 0.22s ease;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:1rem;
 }
 .chat-panel.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
 }
 .chat-panel.hidden{
  display:none;
 }
 .chat-panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.75rem;
 }
 .chat-panel-title h3{
  margin:0;
  font-size:1.1rem;
  color:#fff;
 }
 .chat-panel-subtitle{
  margin:0.2rem 0 0;
  font-size:0.8rem;
  color:rgba(255,255,255,0.65);
 }
 .chat-close{
  background:none;
  border:none;
  color:var(--muted);
  font-size:1.6rem;
  cursor:pointer;
  line-height:1;
  transition:color 0.2s ease;
 }
 .chat-close:hover{
  color:#fff;
 }
 .chat-panel-body{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  min-height:0;
  flex:1;
 }
 .chat-search-label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
 }
 .chat-search{
  position:relative;
  display:flex;
  align-items:center;
 }
 .chat-search input{
  width:100%;
  padding:0.55rem 0.9rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(22,28,38,0.9);
  color:var(--text);
  font-size:0.95rem;
  transition:border 0.2s ease,box-shadow 0.2s ease;
 }
 .chat-search input:focus{
  outline:none;
  border-color:rgba(74,163,255,0.6);
  box-shadow:0 0 0 2px rgba(74,163,255,0.25);
 }
 .chat-search.loading input{
  padding-right:2.5rem;
 }
 .chat-search-loader{
  position:absolute;
  right:0.85rem;
  width:1.2rem;
  height:1.2rem;
  border-radius:50%;
  border:2px solid rgba(74,163,255,0.6);
  border-top-color:transparent;
  opacity:0;
  transform:scale(0.8);
  transition:opacity 0.2s ease,transform 0.2s ease;
 }
 .chat-search.loading .chat-search-loader{
  opacity:1;
  transform:scale(1);
  animation:chatSpin 0.8s linear infinite;
 }
 .chat-hint{
  margin:0;
  font-size:0.85rem;
  color:var(--muted);
 }
 .chat-hint[data-variant="error"]{
  color:#ff7373;
 }
 .chat-body{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  flex:1;
  min-height:0;
  overflow:hidden;
 }
 .chat-results{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  max-height:180px;
  overflow-y:auto;
  padding-right:0.2rem;
  flex:0 0 auto;
  background:#1f242f;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  padding:0.8rem;
 }
 .chat-result-item{
  display:flex;
  align-items:center;
  gap:0.75rem;
  border:none;
  background:rgba(255,255,255,0.02);
  padding:0.65rem 0.8rem;
  border-radius:14px;
  text-align:left;
  transition:background 0.2s ease,transform 0.2s ease;
  color:#fff;
 }
 .chat-search input{
  background:#222a35;
  color:#fff;
  border:1px solid rgba(255,255,255,0.12);
 } 
 .chat-result-item:hover{
  background:rgba(74,125,255,0.22);
  transform:translateX(-2px);
 }
 .chat-result-item.active{
  background:rgba(74,125,255,0.18);
 }
 .chat-result-item.unread{
  background:rgba(74,125,255,0.12);
  border-left:3px solid var(--accent);
 }
 .chat-result-row{
  display:flex;
  align-items:center;
  gap:0.4rem;
 }
 .chat-result-time{
  margin-left:auto;
  color:rgba(255,255,255,0.45);
  font-size:0.72rem;
 }
 .chat-result-unread{
  margin-left:0.4rem;
  background:var(--accent);
  color:#0b121d;
  font-size:0.7rem;
  font-weight:700;
  padding:0.1rem 0.45rem;
  border-radius:999px;
  min-width:1.5rem;
  text-align:center;
 }
 .chat-result-preview{
  color:var(--muted);
  font-size:0.78rem;
  line-height:1.3;
  display:block;
 }
 .chat-panel.conversation-active .chat-search,
 .chat-panel.conversation-active .chat-hint,
 .chat-panel.conversation-active .chat-results{
  display:none;
 }
 .chat-panel.conversation-active .chat-body{
  gap:0.75rem;
 }
 .chat-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#ff5b5b;
  color:#fff;
  font-size:0.75rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 12px rgba(0,0,0,0.4);
 }
 .chat-badge.hidden{
  display:none;
 }
 .chat-result-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 8px 18px rgba(0,0,0,0.35);
 }
 .chat-result-meta{
  display:flex;
  flex-direction:column;
  gap:0.1rem;
  font-size:0.9rem;
 }
 .chat-result-name{
  color:var(--text);
  font-weight:600;
 }
 .chat-result-email{
  color:rgba(11,20,36,0.55);
  font-size:0.8rem;
 }
 .chat-empty{
  padding:1rem 0;
  color:var(--muted);
  text-align:center;
  font-size:0.85rem;
 }
 .chat-conversation{
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  background:rgba(13,18,28,0.9);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:1rem;
  flex:1;
  min-height:0;
  overflow:hidden;
 }
 .chat-conversation.hidden{
  display:none;
 }
 .chat-conversation-header{
  display:flex;
  align-items:center;
  gap:0.75rem;
 }
 .chat-back{
  background:none;
  border:none;
  color:var(--muted);
  font-size:1.2rem;
  cursor:pointer;
  line-height:1;
  border-radius:50%;
  padding:0.2rem 0.4rem;
  transition:color 0.2s ease,background 0.2s ease;
 }
 .chat-back:hover{
  color:#fff;
  background:rgba(255,255,255,0.08);
 }
 .chat-active-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 6px 12px rgba(0,0,0,0.35);
 }
 .chat-active-meta{
  display:flex;
  flex-direction:column;
  gap:0.1rem;
 }
 .chat-active-name{
  color:#fff;
  font-weight:600;
  font-size:0.95rem;
 }
 .chat-active-email{
  color:var(--muted);
  font-size:0.78rem;
 }
 .chat-messages{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  padding-right:0.2rem;
 }
 .chat-messages::-webkit-scrollbar{
  width:6px;
 }
 .chat-messages::-webkit-scrollbar-thumb{
  background:rgba(74,163,255,0.3);
  border-radius:3px;
 }
 .chat-message{
  max-width:80%;
  padding:0.55rem 0.75rem;
  border-radius:12px;
  line-height:1.35;
  font-size:0.9rem;
  position:relative;
  white-space:pre-wrap;
  word-break:break-word;
 }
 .chat-message.mine{
  margin-left:auto;
  background:linear-gradient(135deg,#4aa3ff,#5b9bff);
  color:#fff;
  border-bottom-right-radius:4px;
 }
 .chat-message.theirs{
  margin-right:auto;
  background:rgba(255,255,255,0.08);
  color:#fff;
  border-bottom-left-radius:4px;
 }
 .chat-message-time{
  display:block;
  font-size:0.72rem;
  color:rgba(255,255,255,0.55);
  margin-top:0.25rem;
 }
 .chat-message-form{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  background:rgba(12,18,28,0.92);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:0.75rem 0.8rem;
  margin-top:0.6rem;
 }
 .chat-attach-btn{
  border:none;
  background:rgba(74,163,255,0.25);
  color:#fff;
  font-size:1rem;
  font-weight:600;
  height:42px;
  border-radius:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.4rem;
  transition:background 0.2s ease,transform 0.2s ease;
  flex:1;
 }
 .chat-attach-btn:hover{
  background:rgba(74,163,255,0.35);
 }
 .chat-attach-btn:active{
  transform:scale(0.96);
 }
 .chat-send-btn{
  border:none;
  border-radius:12px;
  padding:0.65rem 1.35rem;
  background:linear-gradient(135deg,#4aa3ff,#5b9bff);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:transform 0.2s ease,box-shadow 0.2s ease;
  flex:1;
 }
 .chat-controls{
  display:flex;
  gap:0.6rem;
 }
 .chat-composer{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
 }
 .chat-send-btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
 }
 .chat-send-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(74,163,255,0.35);
 }
 .chat-conversation-empty{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:0.85rem;
  text-align:center;
  padding:1rem;
 }

@keyframes chatSpin{
  to{
    transform:rotate(360deg);
  }
 }

@media (max-width:768px){
  .chat-panel{
    bottom:88px;
    right:16px;
    width:calc(100vw - 2rem);
    max-height:calc(100vh - 120px);
  }
  .chat-toggle{
    width:52px;
    height:52px;
    font-size:1.4rem;
  }
  .chat-widget{
    bottom:16px;
    right:16px;
  }
 }

.chat-panel.conversation-active .chat-panel-subtitle{
  display:none;
 }
 .chat-panel.conversation-active .chat-panel-body{
  gap:0.6rem;
 }

.chat-attach-btn{
  border:none;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:1.1rem;
  width:38px;
  height:38px;
  border-radius:10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s ease,transform 0.2s ease;
 }
 .chat-attach-btn:hover{
  background:rgba(74,163,255,0.25);
 }
 .chat-attach-btn:active{
  transform:scale(0.96);
 }
 .chat-composer{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  min-width:0;
 }
 .chat-attachment-preview{
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem;
  max-height:88px;
  overflow-y:auto;
  padding-right:0.2rem;
  margin-bottom:0.3rem;
 }
 .chat-attachment-chip{
  display:flex;
  align-items:center;
  gap:0.4rem;
  background:rgba(74,163,255,0.12);
  border:1px solid rgba(74,163,255,0.25);
  border-radius:999px;
  padding:0.25rem 0.55rem;
  color:#fff;
  font-size:0.78rem;
 }
 .chat-attachment-chip .name{
  max-width:160px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
 }
 .chat-attachment-chip .size{
  color:rgba(255,255,255,0.6);
  font-size:0.7rem;
 }
 .chat-attachment-remove{
  background:none;
  border:none;
  color:rgba(255,255,255,0.8);
  cursor:pointer;
  font-size:0.85rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 0.2rem;
 }
 .chat-attachment-remove:hover{
  color:#ff8686;
 }
 .chat-conversation.drop-active{
  border:1px dashed rgba(74,163,255,0.6);
  background:rgba(74,163,255,0.08);
 }
 .chat-attachments{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  margin-top:0.45rem;
 }
 .chat-attachment{
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.55rem 0.65rem;
  border-radius:12px;
  background:rgba(41,54,73,0.85);
  border:1px solid rgba(74,163,255,0.15);
 }
 .chat-message.mine .chat-attachment{
  background:rgba(21,36,56,0.9);
  border:1px solid rgba(171,205,255,0.35);
 }
 .chat-attachment-icon{
  font-size:1rem;
 }
 .chat-attachment-name{
  flex:1;
  color:#fff;
  font-weight:600;
  word-break:break-word;
 }
 .chat-attachment-meta{
  color:rgba(255,255,255,0.6);
  font-size:0.75rem;
 }
 .chat-attachment-link{
  color:var(--accent);
  font-size:0.78rem;
  text-decoration:none;
 }
 .chat-attachment-link:hover{
  text-decoration:underline;
 }
 .chat-message-text{
  white-space:pre-wrap;
  word-break:break-word;
 }
 .chat-message-text + .chat-attachments{
  margin-top:0.45rem;
 }
 .chat-attachment-preview::-webkit-scrollbar{
  width:6px;
 }
 .chat-attachment-preview::-webkit-scrollbar-thumb{
  background:rgba(74,163,255,0.35);
  border-radius:3px;
 }
 .chat-attachment-preview::-webkit-scrollbar-track{
  background:rgba(10,14,22,0.4);
 }
 .chat-attachment-preview{
  scrollbar-width:thin;
  scrollbar-color:rgba(74,163,255,0.35) rgba(10,14,22,0.4);
 }

.chat-panel.conversation-active .chat-panel-header{
  display:none;
 }

.visibility-group{
  gap:0.6rem;
 }
 .visibility-options{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
 }
 .visibility-option{
  display:flex;
  align-items:flex-start;
  gap:0.75rem;
  padding:0.75rem 0.9rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:#161d2b;
  cursor:pointer;
  position:relative;
  transition:background 0.2s ease,border-color 0.2s ease,transform 0.15s ease;
 }
 .visibility-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
 }
 .visibility-option:hover{
  background:#1c2433;
  border-color:rgba(74,163,255,0.45);
 }
 .visibility-option:focus-within{
  outline:2px solid rgba(74,163,255,0.65);
  outline-offset:3px;
 }
 .visibility-option input:checked ~ .visibility-copy .visibility-title{
  color:var(--text);
 }
 .visibility-option input:checked ~ .visibility-copy .visibility-description{
  color:rgba(255,255,255,0.75);
 }
 .visibility-option input:checked + .visibility-dot{
  box-shadow:0 0 0 4px rgba(74,163,255,0.25);
 }
 .visibility-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  margin-top:0.2rem;
  flex-shrink:0;
  box-shadow:0 0 0 0 rgba(74,163,255,0);
  transition:box-shadow 0.2s ease;
 }
 .visibility-dot-public{
  background:#2ecc71;
 }
 .visibility-dot-limited{
  background:#95a5a6;
 }
 .visibility-dot-private{
  background:#e74c3c;
 }
 .visibility-copy{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
 }
 .visibility-title{
  font-weight:600;
  color:rgba(255,255,255,0.85);
 }
 .visibility-description{
  font-size:0.8rem;
  color:rgba(255,255,255,0.6);
  line-height:1.4;
 }

.visibility-option.active{
  background:linear-gradient(135deg,rgba(74,125,255,0.28),rgba(74,125,255,0.18));
  border-color:rgba(74,163,255,0.6);
  box-shadow:0 12px 26px rgba(74,125,255,0.25);
 }

.visibility-summary{
  margin:0;
  padding:0.35rem 0 0.75rem;
  color:rgba(255,255,255,0.75);
  font-size:0.9rem;
  font-weight:500;
 }
 .visibility-summary span{
  color:#fff;
  font-weight:600;
 }

.visibility-note{
  font-size:0.75rem;
  color:rgba(255,255,255,0.5);
  line-height:1.4;
 }

.calendar-view-toggle{
  display:flex;
  align-items:center;
  gap:0.6rem;
  justify-content:flex-start;
 }
 .calendar-toggle{
  padding:0.45rem 1.2rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.75);
  font-weight:600;
  font-size:0.9rem;
  cursor:pointer;
  transition:background 0.2s ease,box-shadow 0.2s ease,color 0.2s ease,transform 0.2s ease;
 }
 .calendar-toggle.active{
  background:linear-gradient(135deg,#4aa3ff,#6d60ff);
  color:#fff;
  border-color:transparent;
  box-shadow:0 12px 28px rgba(74,163,255,0.35);
 }
 :root[data-theme="light"] .calendar-toggle{
  background:rgba(11,20,36,0.06);
  color:rgba(11,20,36,0.6);
  border:1px solid rgba(11,20,36,0.1);
 } 
 :root[data-theme="light"] .calendar-toggle.active{
  color:#fff;
  background:linear-gradient(135deg,#4a86ff,#6d9dff);
 } 
 :root[data-theme="light"] .calendar-toggle.muted{
  color:rgba(11,20,36,0.4);
 } 

#appShell.month-view #boardHeader,
#appShell.month-view #board,
#appShell.month-view #projectFilterModal,
#appShell.month-view #catchUpBtn{
  display:none !important;
 }
 #appShell.month-view .week-reset{
  display:none !important;
 }

.month-nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:stretch;
  gap:0.5rem;
  padding:0 1rem 1.5rem;
 }
 .month-nav.hidden{
  display:none;
 }
 .month-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  font-size:1.4rem;
  font-weight:600;
  cursor:pointer;
  transition:background 0.2s ease,transform 0.2s ease;
  min-width:48px;
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
 }
 .month-arrow:hover{
  background:rgba(74,163,255,0.16);
  color:#fff;
  transform:translateY(-2px);
 } 
 .month-arrow:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(74,163,255,0.5);
 } 

.month-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:0.6rem;
  padding:0 0.2rem;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.25s ease,transform 0.25s ease;
 }
 .month-grid.ready{
  opacity:1;
  transform:translateY(0);
 }
 .month-day-name{
  font-size:0.75rem;
  font-weight:600;
  color:rgba(255,255,255,0.55);
  text-transform:uppercase;
  letter-spacing:0.08em;
  text-align:center;
  padding:0.2rem 0;
 }
 .month-cell{
  background:var(--card);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:0.65rem;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  min-height:118px;
  transition:border 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease;
  position:relative;
  cursor:pointer;
 }
 .month-cell:hover{
  border-color:rgba(74,163,255,0.45);
  box-shadow:0 12px 28px rgba(0,0,0,0.25);
  transform:translateY(-2px);
 }
 .month-cell.today:not(.active){
  box-shadow:0 0 0 2px rgba(74,163,255,0.35);
 }
 .month-cell.active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(74,163,255,0.45);
 }
 .month-cell.outside{
  opacity:0.35;
 }
 .month-cell-number{
  font-size:0.9rem;
  font-weight:600;
  color:#fff;
 }
 .month-cell-content{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  flex:1;
  justify-content:flex-start;
 }
 .month-task-list{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  font-size:0.72rem;
  color:var(--muted);
 }
 .month-task-list .day-task-item{
  justify-content:flex-start;
  font-size:0.72rem;
 }
 .month-task-empty{
  margin-top:auto;
  font-size:0.72rem;
  color:rgba(255,255,255,0.35);
 }

@media (max-width:768px){
  .calendar-view-toggle{
    align-self:stretch;
    justify-content:center;
  }
  .month-nav{
    padding:0 0.5rem 1rem;
    gap:0.35rem;
  }
  .month-arrow{
    min-width:40px;
    font-size:1.2rem;
  }
  .month-cell{
    min-height:96px;
    padding:0.55rem;
  }
 }

.week-header-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:0.75rem;
  position:relative;
  justify-content:flex-start;
 }
 .week-range{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  width:fit-content;
 }
 @media (max-width:768px){
  .week-header-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.6rem;
    position:static;
  }
  .week-range{
    position:static;
    transform:none;
    width:100%;
  }
  .calendar-view-toggle{
    justify-content:center;
    width:100%;
  }
 }

.month-container{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1rem;
  align-items:center;
  padding:0 1.5rem 1.75rem;
  max-width:1200px;
  margin:0 auto;
 }
 .month-container.hidden{
  display:none;
 }
 .month-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(22,28,38,0.92),rgba(15,19,28,0.92));
  color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  font-size:1.6rem;
  font-weight:600;
  cursor:pointer;
  transition:background 0.25s ease,transform 0.25s ease,box-shadow 0.25s ease;
  min-width:52px;
  min-height:120px;
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
 }
 .month-arrow:hover{
  background:rgba(74,163,255,0.2);
  transform:translateY(-3px);
  box-shadow:0 22px 48px rgba(74,163,255,0.28);
 } 
 .month-arrow:active{
  transform:scale(0.97);
 } 
 .month-arrow:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(74,163,255,0.45);
 } 

.month-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1rem;
  background:rgba(15,19,28,0.88);
  border-radius:24px;
  padding:1.75rem;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 35px 60px rgba(0,0,0,0.45);
  min-height:0;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.28s ease,transform 0.28s ease;
 }
 .month-grid.ready{
  opacity:1;
  transform:translateY(0);
 }
 .month-day-name{
  font-size:0.78rem;
  font-weight:600;
  color:rgba(255,255,255,0.55);
  text-transform:uppercase;
  letter-spacing:0.08em;
  text-align:center;
  padding:0.2rem 0;
 }
 .month-cell{
  background:rgba(18,23,34,0.95);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:16px;
  padding:0.8rem 0.7rem;
  display:flex;
  flex-direction:column;
  gap:0.45rem;
  min-height:140px;
  min-width:130px;
  transition:border 0.25s ease,transform 0.25s ease,box-shadow 0.25s ease;
  position:relative;
  cursor:pointer;
  overflow:hidden;
  justify-content:flex-start;
 }
 .month-cell::after{
  content:'';
  flex:1 1 auto;
 }
 .month-cell-content{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  flex:0 0 auto;
 }
 .month-task-empty{
  flex:0 0 auto;
  margin-top:auto;
  font-size:0.78rem;
  color:rgba(255,255,255,0.3);
  text-align:left;
 }
 .month-cell:hover{
  border-color:rgba(74,163,255,0.4);
  box-shadow:0 16px 32px rgba(74,163,255,0.18);
  transform:translateY(-3px);
 } 
 .month-cell.today:not(.active){
  box-shadow:0 0 0 2px rgba(74,163,255,0.35);
 } 
 .month-cell.active{
  border-color:rgba(74,163,255,0.9);
  box-shadow:0 0 0 2px rgba(74,163,255,0.55);
 } 
 .month-cell.outside{
  opacity:0.25;
 }
 .month-cell-number{
  font-size:1rem;
  font-weight:600;
  color:#fff;
  letter-spacing:0.02em;
 }
 .month-cell-content{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  flex:1;
  justify-content:flex-start;
  min-height:0;
 }
 .month-task-list{
  display:flex;
  flex-direction:column;
  gap:0.28rem;
  font-size:0.78rem;
  color:rgba(255,255,255,0.7);
 }
 .month-task-list .day-task-item{
  gap:0.4rem;
  font-size:0.78rem;
 }
 .month-task-empty{
  display:none;
 }

@media (max-width:1024px){
  .month-container{
    padding:0 1rem 1.25rem;
    gap:0.75rem;
  }
  .month-grid{
    gap:0.75rem;
    padding:1.25rem;
  }
  .month-cell{
    min-height:120px;
  }
  .month-arrow{
    min-height:100px;
  }
 }
 @media (max-width:768px){
  .month-container{
    grid-template-columns:1fr;
    justify-items:center;
  }
  .month-arrow{
    min-width:48px;
    width:100%;
    max-width:360px;
    min-height:56px;
    border-radius:12px;
    font-size:1.3rem;
  }
  .month-grid{
    grid-template-columns:repeat(7,minmax(0,1fr));
    overflow:hidden;
    gap:0.5rem;
    padding:1rem;
  }
 }

:root[data-theme="light"] #projectModal,
:root[data-theme="light"] #taskEditor{
  background:rgba(247,249,253,0.92);
 } 
 :root[data-theme="light"] #modalContent,
 :root[data-theme="light"] #taskEditorContent,
 :root[data-theme="light"] #projectManagerContent{
  background:#ffffff;
  color:var(--text);
 } 
 :root[data-theme="light"] #taskEditor input,
 :root[data-theme="light"] #taskEditor textarea,
 :root[data-theme="light"] #taskEditor select{
  background:#f0f3fb;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] #taskEditor .btn.cancel{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] #taskEditor .btn.add{
  background:linear-gradient(135deg,#4a7dff,#5b9bff);
  color:#fff;
 } 

:root[data-theme="light"] #projectFilterModal{
  background:#ffffff;
  border:1px solid rgba(11,20,36,0.08);
  box-shadow:0 18px 40px rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] #projectFilterModal h4{
  color:var(--text);
 } 

:root[data-theme="light"] #searchBox{
  background:#eef2fb;
  border:1px solid rgba(11,20,36,0.12);
  color:var(--text);
 } 
 :root[data-theme="light"] #searchBox::placeholder{
  color:rgba(11,20,36,0.45);
 } 
 :root[data-theme="light"] #filterBtn{
  background:rgba(74,125,255,0.16);
  color:var(--text);
  border:1px solid rgba(74,125,255,0.28);
  box-shadow:0 10px 20px rgba(74,125,255,0.16);
 } 
 :root[data-theme="light"] #manageProjects{
  background:rgba(74,125,255,0.16);
  color:var(--text);
  border:1px solid rgba(74,125,255,0.28);
 } 
 :root[data-theme="light"] .add-task{
  background:linear-gradient(135deg,#4a7dff,#5b9bff);
  color:#fff;
  box-shadow:0 12px 24px rgba(74,125,255,0.24);
 } 
 :root[data-theme="light"] #taskEditor{
  background:rgba(11,20,36,0.15);
 } 
 :root[data-theme="light"] #taskEditorContent{
  background:#ffffff;
  color:var(--text);
  box-shadow:0 24px 60px rgba(11,20,36,0.14);
  border:1px solid rgba(11,20,36,0.08);
 } 
 :root[data-theme="light"] #taskEditorContent label{
  color:var(--text);
 } 
 :root[data-theme="light"] #taskEditorContent input,
 :root[data-theme="light"] #taskEditorContent textarea,
 :root[data-theme="light"] #taskEditorContent select{
  background:#eef2fb;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] #taskEditorContent .modal-actions .btn{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] #taskEditorContent .modal-actions .btn.add,#taskEditorContent .modal-actions #saveTask{
  background:linear-gradient(135deg,#4a7dff,#5b9bff);
  color:#fff;
  border:none;
 } 
 :root[data-theme="light"] #taskEditorContent .modal-actions #duplicateTask{
  background:#56b8eb;
  color:#0b1424;
 } 
 :root[data-theme="light"] #taskEditorContent .modal-actions #deleteTask{
  background:#f66a63;
  color:#fff;
 } 
 :root[data-theme="light"] #editProjectSelect,
 :root[data-theme="light"] #projectSelect{
  background:#eef2fb;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 }

:root[data-theme="light"] #projectFilterModal .filter-category-item,
:root[data-theme="light"] #projectFilterModal .filter-project-item{
  background:#f5f7ff;
  border:1px solid rgba(11,20,36,0.08);
  color:var(--text);
 } 

.task .task-title{
  font-weight:600;
 }
 .task .task-notes,.task .task-date,.task .task-checklist{
  color:rgba(255,255,255,0.72);
 }
 :root[data-theme="light"] .task .task-title{
  color:var(--text);
 } 
 :root[data-theme="light"] .task .task-notes,
 :root[data-theme="light"] .task .task-date,
 :root[data-theme="light"] .task .task-checklist{
  color:rgba(11,20,36,0.65);
 } 

:root[data-theme="light"] #projectManager{
  background:rgba(11,20,36,0.15);
 } 
 :root[data-theme="light"] #projectManagerContent{
  background:#ffffff;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.08);
  box-shadow:0 28px 60px rgba(11,20,36,0.14);
 } 
 :root[data-theme="light"] #projectManagerContent .project-item{
  background:#f7f9fd;
  border:1px solid rgba(11,20,36,0.08);
  color:var(--text);
 } 
 :root[data-theme="light"] #projectManagerContent .project-item-name span{
  color:var(--text);
 } 
 :root[data-theme="light"] #projectManagerContent .project-item-category{
  color:rgba(11,20,36,0.55);
 } 
 :root[data-theme="light"] #projectManagerContent .project-item-actions .btn{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] #projectManagerContent .project-item-actions .btn:hover{
  background:rgba(74,125,255,0.18);
 }
 :root[data-theme="light"] #projectManagerContent .modal-actions .btn{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 } 

:root[data-theme="light"] #editProjectModal{
  background:rgba(11,20,36,0.15);
 } 
 :root[data-theme="light"] #editProjectContent{
  background:#ffffff;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.08);
  box-shadow:0 28px 60px rgba(11,20,36,0.14);
 } 
 :root[data-theme="light"] #editProjectContent label{
  color:var(--text);
 } 
 :root[data-theme="light"] #editProjectContent input,
 :root[data-theme="light"] #editProjectContent select{
  background:#f0f4fb;
  border:1px solid rgba(11,20,36,0.12);
  color:var(--text);
 } 
 :root[data-theme="light"] #editProjectContent button{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] #editProjectContent button:hover{
  background:rgba(74,125,255,0.16);
 } 

.chart-card{
  background:#1f242f;
  border-radius:16px;
  padding:1.5rem;
  box-shadow:0 16px 30px rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.06);
  color:#fff;
 }
 #chartContainer{
  background:#1f242f;
  border-radius:16px;
  padding:1.5rem;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 18px 36px rgba(0,0,0,0.25);
  color:#fff;
 }
 :root[data-theme="light"] #chartContainer{
  background:#ffffff;
  border:1px solid rgba(11,20,36,0.08);
  box-shadow:0 16px 34px rgba(11,20,36,0.1);
  color:var(--text);
 } 
 :root[data-theme="light"] #chartContainer h3{
  color:var(--text);
 } 
 :root[data-theme="light"] .chart-legend-item span{
  color:var(--text);
 } 

.project-chart{
  background:#181d26;
  border-radius:16px;
  padding:1.2rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 16px 32px rgba(0,0,0,0.25);
 }
 :root[data-theme="light"] .project-chart{
  background:#f5f7ff;
  border:1px solid rgba(11,20,36,0.08);
  box-shadow:0 16px 32px rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] .project-chart-title span{
  color:var(--text);
 } 
 :root[data-theme="light"] .project-chart-title-color{
  box-shadow:0 4px 10px rgba(74,125,255,0.2);
 } 
 :root[data-theme="light"] .project-chart-svg{
  background:#ffffff;
  border-radius:16px;
 } 

:root[data-theme="light"] .calendar-toggle.muted{
  color:rgba(11,20,36,0.45);
 } 

.account-button:hover{
  background:#232a38;
  box-shadow:0 10px 22px rgba(0,0,0,0.25);
 }
 :root[data-theme="light"] .account-button:hover{
  background:rgba(74,125,255,0.12);
  box-shadow:0 12px 26px rgba(74,125,255,0.2);
 }

:root[data-theme="light"] #modalContent input,
:root[data-theme="light"] #modalContent textarea,
:root[data-theme="light"] #modalContent select{
  background:#f0f3fb;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 }
 :root[data-theme="light"] #modalContent label{
  color:var(--text);
 } 
 :root[data-theme="light"] #modalContent .btn.cancel{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] #modalContent .btn.add{
  background:linear-gradient(135deg,#4a7dff,#5b9bff);
  color:#fff;
  border:none;
 } 
 :root[data-theme="light"] #modalContent .toolbar-btn{
  background:#e6ecfb;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] #modalContent .toolbar-btn.active{
  background:linear-gradient(135deg,#4a7dff,#5b9bff);
  color:#fff;
  border:none;
 } 

#modalContent .toolbar-btn{
  padding:0.4rem 0.8rem;
  border:none;
  border-radius:5px;
  background:#2b2b2b;
  color:#fff;
  cursor:pointer;
  font-size:0.85rem;
  transition:0.2s;
 }
 #taskEditorContent .toolbar-btn{
  padding:0.4rem 0.8rem;
  border:none;
  border-radius:5px;
  background:#2b2b2b;
  color:#fff;
  cursor:pointer;
  font-size:0.85rem;
  transition:0.2s;
 }

:root[data-theme="light"] #modalContent .toolbar-btn,
:root[data-theme="light"] #taskEditorContent .toolbar-btn{
  background:#e6ecfb;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] #modalContent .toolbar-btn.active,
 :root[data-theme="light"] #taskEditorContent .toolbar-btn.active{
  background:linear-gradient(135deg,#4a7dff,#5b9bff);
  color:#fff;
  border:none;
 } 

:root[data-theme="light"] .settings-form-group label{
  color:var(--text);
 } 
 :root[data-theme="light"] .settings-form-group input{
  background:#eef2fb;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] .settings-form-group input[readonly]{
  background:#e5e9f4;
  color:rgba(11,20,36,0.5);
 } 
 :root[data-theme="light"] .settings-status{
  color:rgba(11,20,36,0.55);
 } 
 :root[data-theme="light"] .settings-btn.secondary{
  background:#232a38;
  color:#fff;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
 } 

.settings-panel-frame{
  width:min(760px,96vw);
  height:760px;
  display:flex;
  background:rgba(12,18,28,0.92);
  border-radius:18px;
  box-shadow:0 28px 70px rgba(0,0,0,0.45);
 }
 :root[data-theme="light"] .settings-panel-frame{
  width:min(760px,96vw);
  height:760px;
  background:rgba(247,249,253,0.95);
  box-shadow:0 28px 70px rgba(11,20,36,0.18);
 }
 .settings-panel{
  flex:1;
  display:flex;
  flex-direction:column;
 }

:root[data-theme="light"] .visibility-option{
  background:#eef2fb;
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] .visibility-option:hover{
  background:#dde6fb;
  border-color:rgba(74,125,255,0.35);
 } 
 :root[data-theme="light"] .visibility-option input:checked ~ .visibility-copy .visibility-title{
  color:var(--text);
 } 
 :root[data-theme="light"] .visibility-option input:checked ~ .visibility-copy .visibility-description{
  color:rgba(11,20,36,0.65);
 } 
 :root[data-theme="light"] .visibility-option input:checked + .visibility-dot{
  box-shadow:0 0 0 4px rgba(74,125,255,0.25);
 } 
 :root[data-theme="light"] .visibility-option .visibility-title{
  color:var(--text);
 } 
 :root[data-theme="light"] .visibility-option .visibility-description{
  color:rgba(11,20,36,0.6);
 } 
 :root[data-theme="light"] .visibility-summary{
  color:rgba(11,20,36,0.55);
 } 
 :root[data-theme="light"] .visibility-summary span{
  color:var(--text);
 } 
 :root[data-theme="light"] .profile-header-actions .settings-btn.secondary{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.12);
  box-shadow:0 12px 24px rgba(11,20,36,0.12);
 }

:root[data-theme="light"] .chat-panel{
  background:#ffffff;
  border:1px solid rgba(11,20,36,0.12);
  box-shadow:0 28px 70px rgba(11,20,36,0.18);
 } 
 :root[data-theme="light"] .chat-panel-title h3{
  color:var(--text);
 } 
 :root[data-theme="light"] .chat-panel-subtitle{
  color:rgba(11,20,36,0.55);
 } 
 :root[data-theme="light"] .chat-search input{
  background:#eef2fb;
  border:1px solid rgba(11,20,36,0.12);
  color:var(--text);
 } 
 :root[data-theme="light"] .chat-results{
  background:#f5f7ff;
  border:1px solid rgba(11,20,36,0.08);
 } 
 :root[data-theme="light"] .chat-result-item{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.08);
 } 
 :root[data-theme="light"] .chat-result-item .chat-result-email{
  color:rgba(11,20,36,0.6);
 } 
 :root[data-theme="light"] .chat-result-item:hover{
  background:rgba(74,125,255,0.18);
 } 
 :root[data-theme="light"] .chat-result-name{
  color:var(--text);
 } 
 :root[data-theme="light"] .chat-result-time{
  color:rgba(11,20,36,0.5);
 } 

:root[data-theme="light"] .chat-conversation{
  background:#f7f9fd;
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] .chat-conversation-header span{
  color:var(--text);
 } 
 :root[data-theme="light"] .chat-conversation-header .chat-active-email{
  color:rgba(11,20,36,0.55);
 } 
 :root[data-theme="light"] .chat-messages{
  background:transparent;
 } 
 :root[data-theme="light"] .chat-message.mine{
  background:linear-gradient(135deg,#4a8bff,#5ba4ff);
  color:#fff;
 } 
 :root[data-theme="light"] .chat-message.theirs{
  background:#ffffff;
  color:var(--text);
  border:1px solid rgba(11,20,36,0.08);
 } 
 :root[data-theme="light"] .chat-message-time{
  color:rgba(11,20,36,0.5);
 } 
 :root[data-theme="light"] .chat-message-form{
  background:#ffffff;
  border:1px solid rgba(11,20,36,0.12);
 } 
 :root[data-theme="light"] .chat-message-form textarea{
  background:#f0f3fb;
  border:1px solid rgba(11,20,36,0.12);
  color:var(--text);
 } 
 :root[data-theme="light"] .chat-attach-btn{
  background:#eef2fb;
  border:1px solid rgba(11,20,36,0.12);
  color:var(--text);
 } 
 :root[data-theme="light"] .chat-send-btn{
  background:linear-gradient(135deg,#4a7dff,#5ba4ff);
  color:#fff;
  border:none;
 } 
 :root[data-theme="light"] .chat-message .chat-attachments .chat-attachment{
  background:#f5f7ff;
  border:1px solid rgba(11,20,36,0.12);
  color:var(--text);
 } 
 :root[data-theme="light"] .chat-message .chat-attachments .chat-attachment a{
  color:#4a7dff;
 } 

:root[data-theme="light"] .chat-attachment-name{
  color:var(--text);
 } 
 :root[data-theme="light"] .chat-attachment-meta{
  color:rgba(11,20,36,0.55);
 } 

:root[data-theme="light"] .week-reset{
  background:linear-gradient(135deg,#4a7dff,#6db1ff);
  color:#fff;
  box-shadow:0 12px 28px rgba(74,125,255,0.25);
 } 

:root[data-theme="light"] .checklist-item{background:#f2f4fb;border:1px solid rgba(11,20,36,0.12);}
:root[data-theme="light"] .checklist-item input[type="checkbox"]{background:#fff;border:2px solid rgba(11,20,36,0.18);} 
:root[data-theme="light"] .checklist-item input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent);} 
:root[data-theme="light"] .checklist-item input[type="text"]{background:#eef2fb;color:var(--text);border:1px solid rgba(11,20,36,0.12);} 
:root[data-theme="light"] .checklist-delete{background:#fbd8dc;color:#b6233b;border:1px solid rgba(182,35,59,0.25);} 

:root[data-theme="light"] .landing h2{color:#101b2d;}
:root[data-theme="light"] .landing p{color:rgba(16,27,45,0.7);}
:root[data-theme="light"] .landing-badge{background:rgba(74,125,255,0.12);color:#2a51a3;}
:root[data-theme="light"] .landing-btn.secondary{background:#f5f7ff;border-color:rgba(16,27,45,0.12);color:#102038;}
:root[data-theme="light"] .landing-btn.secondary:hover{background:#e6ecfb;}
:root[data-theme="light"] .landing-title{color:#102038;}
:root[data-theme="light"] .showcase-board{background:linear-gradient(135deg,rgba(245,248,255,0.92),rgba(226,232,250,0.95));border:1px solid rgba(16,27,45,0.08);box-shadow:0 18px 40px rgba(16,27,45,0.12);}
:root[data-theme="light"] .showcase-column h4{color:#102038;}
:root[data-theme="light"] .showcase-card{background:#f6f8ff;border:1px solid rgba(16,27,45,0.08);box-shadow:0 16px 32px rgba(16,27,45,0.12);}
:root[data-theme="light"] .showcase-card p{color:rgba(16,27,45,0.6);}
:root[data-theme="light"] .showcase-card strong{color:#102038;}
:root[data-theme="light"] .showcase-card.complete{background:#f1f8f4;}
:root[data-theme="light"] .side-card{background:#f7f9ff;border:1px solid rgba(16,27,45,0.1);box-shadow:0 18px 36px rgba(16,27,45,0.12);}
:root[data-theme="light"] .side-card h3{color:#102038;}
:root[data-theme="light"] .side-card p{color:rgba(16,27,45,0.65);}
:root[data-theme="light"] .testimonial{background:#f7f9ff;border:1px solid rgba(16,27,45,0.1);box-shadow:0 22px 44px rgba(16,27,45,0.12);}
:root[data-theme="light"] .testimonial p{color:#102038;}
:root[data-theme="light"] .testimonial span{color:rgba(16,27,45,0.55);}
:root[data-theme="light"] .landing-cta{background:linear-gradient(135deg,rgba(74,125,255,0.18),rgba(74,163,255,0.15));border:1px solid rgba(16,27,45,0.12);box-shadow:0 24px 52px rgba(74,125,255,0.18);}
:root[data-theme="light"] .landing-cta h2{color:#102038;}
:root[data-theme="light"] .landing-cta p{color:rgba(16,27,45,0.65);}
:root[data-theme="light"] .landing-footer{color:rgba(16,27,45,0.55);}

:root[data-theme="light"] .btn-header{
  background:#e5ebfb;
  color:#102038;
  border:1px solid rgba(16,27,45,0.12);
}
:root[data-theme="light"] .btn-header:hover{
  background:#d6def7;
}
:root[data-theme="light"] .btn-header.manage{
  color:#fff;
  border-color:var(--accent);
}

.btn-header.theme-toggle{
  width:2.25rem;
  height:2.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  padding:0;
}
.btn-header.theme-toggle.toggling{
  animation:themeToggleSpin 0.6s ease;
}

@keyframes themeToggleSpin{
  0%{transform:scale(1) rotate(0deg);}
  35%{transform:scale(1.15) rotate(160deg);}
  60%{transform:scale(0.95) rotate(280deg);}
  100%{transform:scale(1) rotate(360deg);}
}

:root[data-theme="light"] .auth-modal{
  background:rgba(232,235,245,0.82);
}
:root[data-theme="light"] .auth-modal-content{
  background:linear-gradient(160deg,rgba(255,255,255,0.96),rgba(238,243,255,0.96));
  border:1px solid rgba(16,27,45,0.12);
  box-shadow:0 40px 80px rgba(16,27,45,0.18);
}
:root[data-theme="light"] .auth-modal-content::after{
  background:radial-gradient(circle at top,rgba(74,125,255,0.22),transparent 60%);
}
:root[data-theme="light"] .modal-close{
  color:rgba(16,27,45,0.45);
}
:root[data-theme="light"] .modal-close:hover{
  background:rgba(16,27,45,0.08);
  color:#102038;
}
:root[data-theme="light"] .auth-pill{
  background:rgba(74,125,255,0.14);
  color:#2a51a3;
}
:root[data-theme="light"] .auth-modal-content h3{
  color:#101b2d;
}
:root[data-theme="light"] .auth-subtitle{
  color:rgba(16,27,45,0.72);
}
:root[data-theme="light"] .auth-form label{
  color:#2f3b59;
}
:root[data-theme="light"] .auth-form input{
  background:#f3f6ff;
  border:1px solid rgba(16,27,45,0.12);
  color:#101b2d;
}
:root[data-theme="light"] .auth-form input::placeholder{
  color:rgba(16,27,45,0.4);
}
:root[data-theme="light"] .auth-form input:focus{
  border-color:rgba(74,125,255,0.55);
  box-shadow:0 0 0 3px rgba(74,125,255,0.16);
  background:#eaf0ff;
}
:root[data-theme="light"] .field-hint{
  color:rgba(16,27,45,0.5);
}
:root[data-theme="light"] .auth-switch{
  color:rgba(16,27,45,0.65);
}
:root[data-theme="light"] .link-button{
  color:#2a51a3;
}

.task-project-badge{
  position:absolute;
  top:0.6rem;
  left:0.6rem;
  padding:0.2rem 0.55rem 0.25rem;
  border-radius:6px;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.01em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
  transition:transform 0.2s ease;
  z-index:1;
}
.task-project-badge.fg-dark{color:#101820;}
.task-project-badge.fg-light{color:#ffffff;}
.task:hover .task-project-badge{transform:translateY(-1px);}
.task{
  position:relative;
}

.task.has-project-badge{
  padding-top:2.25rem;
}
:root[data-theme="light"] .task.has-project-badge{
  padding-top:1.85rem;
}

.theme-toggle-label{
  font-weight:500;
}
.theme-toggle-control{
  position:relative;
  width:44px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.2);
  display:inline-flex;
  align-items:center;
  padding:0 3px;
  transition:background 0.25s ease,border-color 0.25s ease;
}
.theme-toggle-thumb{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:50%;
  background:linear-gradient(135deg,#ffe27a,#ffbe3d);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  transition:transform 0.25s ease;
  left:3px;
}
.theme-toggle-control::before,
.theme-toggle-control::after{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.6);
  opacity:0;
  transition:opacity 0.25s ease;
}
.theme-toggle-control::before{margin-right:4px;}
.theme-toggle-control::after{margin-left:4px;background:rgba(255,255,255,0.25);}
:root[data-theme="light"] .theme-toggle-control{
  background:rgba(16,27,45,0.12);
  border:1px solid rgba(16,27,45,0.18);
}
:root[data-theme="light"] .theme-toggle-control::before{
  opacity:1;
  background:#ffe27a;
}
:root[data-theme="light"] .theme-toggle-control::after{
  opacity:0.75;
  background:rgba(16,27,45,0.25);
}
:root[data-theme="light"] .theme-toggle-label{
  color:#102038;
}
body[data-theme="light"] .theme-toggle-thumb{
  background:linear-gradient(135deg,#6fa8ff,#4a6fff);
  transform:translateX(20px);
  box-shadow:0 4px 14px rgba(20,36,66,0.3);
}
:root[data-theme="light"] .theme-toggle-control::before{
  opacity:1;
  background:#ffe27a;
}
:root[data-theme="light"] .theme-toggle-control::after{
  opacity:0.8;
  background:rgba(16,27,45,0.25);
}
:root[data-theme="light"] .dropdown-item{
  color:#102038;
}
:root[data-theme="light"] .theme-toggle-label{
  color:#102038;
}
.dropdown-item:focus-visible{
  outline:2px solid var(--accent);
}

.month-context{
  position:fixed;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  min-width:200px;
  padding:0.85rem 1rem;
  background:#141822;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  box-shadow:0 20px 45px rgba(0,0,0,0.4);
  z-index:70;
  pointer-events:auto;
}
.month-context.hidden{
  display:none;
}
.month-context-date{
  font-size:0.95rem;
  font-weight:600;
  color:#f3f7ff;
}
.month-context-actions{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.month-context-action{
  align-self:flex-start;
  padding:0.5rem 1rem;
  border-radius:8px;
  border:none;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.month-context-action.secondary{
  background:rgba(90,108,255,0.18);
  color:#cdd6ff;
}
.month-context-action.secondary:hover{
  background:rgba(90,108,255,0.3);
  box-shadow:0 12px 24px rgba(90,108,255,0.22);
}
.month-context-action:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(74,163,255,0.35);
}
:root[data-theme="light"] .month-context{
  background:#ffffff;
  border:1px solid rgba(16,27,45,0.12);
  box-shadow:0 24px 55px rgba(16,27,45,0.14);
}
:root[data-theme="light"] .month-context-date{
  color:#102038;
}
:root[data-theme="light"] .month-context-action{
  background:#4a7dff;
}
:root[data-theme="light"] .month-context-action.secondary{
  background:rgba(74,125,255,0.16);
  color:#17438f;
}
.month-context-action.disabled,
.month-context-action:disabled{
  opacity:0.5;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

#meetingModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
}
#meetingModalContent{
  width:90vw;
  max-width:450px;
  max-height:80vh;
  overflow-y:auto;
  background:#1b1b1b;
  border-radius:12px;
  padding:1.75rem;
  box-shadow:0 28px 65px rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative;
}
#meetingModalContent h3{
  margin:0;
  color:var(--text);
  font-size:1.45rem;
}
#meetingModalContent label{
  font-weight:500;
  color:var(--text);
}
#meetingModalContent input,
#meetingModalContent select,
#meetingModalContent textarea{
  padding:0.6rem 0.75rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:#1f1f1f;
  color:#f5f7ff;
  box-shadow:inset 0 1px 4px rgba(0,0,0,0.3);
}
#meetingModalContent textarea{
  min-height:110px;
  resize:vertical;
}
#meetingModalContent select,
#meetingModalContent textarea {
  width:100%;
}
.meeting-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.meeting-field{
  flex:1;
  min-width:140px;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}
:root[data-theme="light"] #meetingModalContent{
  background:#ffffff;
  border:1px solid rgba(16,27,45,0.12);
  box-shadow:0 32px 70px rgba(16,27,45,0.16);
}
:root[data-theme="light"] #meetingModalContent h3{
  color:#102038;
}
:root[data-theme="light"] #meetingModalContent label{
  color:#203050;
}
:root[data-theme="light"] #meetingModalContent input,
:root[data-theme="light"] #meetingModalContent select,
:root[data-theme="light"] #meetingModalContent textarea{
  background:#f0f3fb;
  border:1px solid rgba(16,27,45,0.12);
  color:#102038;
  box-shadow:inset 0 1px 6px rgba(16,27,45,0.08);
}
@media(max-width:520px){
  #meetingModalContent{
    width:90vw;
    padding:1.6rem;
  }
  .meeting-row{
    flex-direction:column;
  }
}

.task-meeting-icon{
  position:absolute;
  top:0.55rem;
  left:0.6rem;
  font-size:0.9rem;
  pointer-events:none;
  z-index:2;
}
.task.has-project-badge .task-project-badge{
  margin-left:1.4rem;
}

#meetingModalContent input[type="date"]::-webkit-calendar-picker-indicator,
#meetingModalContent input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
}
:root[data-theme="light"] #meetingModalContent input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] #meetingModalContent input[type="time"]::-webkit-calendar-picker-indicator{
  filter:none;
}

#taskMoveOverlay{
  position:fixed;
  inset:0;
  background:rgba(8,11,18,0.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:80;
}
#taskMoveOverlay.active{
  display:flex;
}
.move-calendar{
  background:#161d2b;
  border-radius:16px;
  padding:1.5rem;
  width:min(420px,90vw);
  box-shadow:0 32px 70px rgba(0,0,0,0.45);
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.move-calendar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#f5f7ff;
  font-weight:600;
  font-size:1.1rem;
}
.move-calendar-header button{
  background:rgba(255,255,255,0.12);
  border:none;
  color:#f5f7ff;
  width:2.25rem;
  height:2.25rem;
  border-radius:8px;
  cursor:pointer;
  transition:background 0.2s ease;
}
.move-calendar-header button:hover{
  background:rgba(255,255,255,0.22);
}
.move-calendar-weekdays,
.move-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:0.35rem;
}
.move-calendar-weekdays span{
  text-align:center;
  font-size:0.8rem;
  color:rgba(255,255,255,0.65);
  padding:0.25rem 0;
}
.move-calendar-grid button{
  background:#1f2535;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  color:#f5f7ff;
  font-size:0.95rem;
  padding:0.65rem 0;
  cursor:pointer;
  transition:background 0.2s ease,border-color 0.2s ease,transform 0.2s ease;
}
.move-calendar-grid button:hover{
  background:rgba(74,125,255,0.2);
  border-color:rgba(74,125,255,0.65);
}
.move-calendar-grid button.selected{
  background:linear-gradient(135deg,#4a7dff,#639dff);
  border-color:transparent;
}
.move-calendar-grid button.outside{
  opacity:0.4;
}
.move-calendar-actions{
  display:flex;
  justify-content:flex-end;
}
:root[data-theme="light"] #taskMoveOverlay{
  background:rgba(14,22,32,0.4);
}
:root[data-theme="light"] .move-calendar{
  background:#ffffff;
  box-shadow:0 36px 80px rgba(16,27,45,0.18);
}
:root[data-theme="light"] .move-calendar-header{
  color:#102038;
}
:root[data-theme="light"] .move-calendar-header button{
  background:rgba(16,27,45,0.08);
  color:#102038;
}
:root[data-theme="light"] .move-calendar-header button:hover{
  background:rgba(16,27,45,0.18);
}
:root[data-theme="light"] .move-calendar-weekdays span{
  color:rgba(16,27,45,0.55);
}
:root[data-theme="light"] .move-calendar-grid button{
  background:#f4f6ff;
  color:#102038;
  border:1px solid rgba(16,27,45,0.12);
}
:root[data-theme="light"] .move-calendar-grid button.outside{
  opacity:0.5;
}
:root[data-theme="light"] .move-calendar-grid button.selected{
  background:linear-gradient(135deg,#4a7dff,#639dff);
  color:#fff;
}
.move-calendar-grid button.today{
  border:2px solid #4a7dff;
}
:root[data-theme="light"] .move-calendar-grid button.today{
  border:2px solid rgba(74,125,255,0.75);
}

:root[data-theme="light"] .settings-form-group select{
  background:#f3f6ff;
  border:1px solid rgba(16,27,45,0.1);
  color:#102038;
}

.btn-header.share-btn{
  background:linear-gradient(135deg,#4a7dff,#6f8bff);
  color:#fff;
  font-weight:600;
  min-width:5.5rem;
}
.btn-header.share-btn.disabled{
  opacity:0.55;
  cursor:default;
  pointer-events:none;
  filter:saturate(0.75);
}
:root[data-theme="light"] .btn-header.share-btn{
  background:linear-gradient(135deg,#4a7dff,#7fb0ff);
  color:#f8f9ff;
}

.share-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.75rem 1rem;
  border-radius:14px;
  background:rgba(74,125,255,0.18);
  color:#e4ecff;
  font-weight:500;
  margin-bottom:1rem;
  gap:0.5rem;
}
.share-banner.hidden{display:none;}
:root[data-theme="light"] .share-banner{
  background:rgba(74,125,255,0.12);
  color:#0b1424;
  border:1px solid rgba(74,125,255,0.18);
}

.share-modal{
  position:fixed;
  inset:0;
  background:rgba(8,12,20,0.72);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:60;
  padding:1.5rem;
}
.share-modal.hidden{display:none;}
.share-modal-content{
  position:relative;
  background:#0f1524;
  color:#fff;
  width:min(520px,100%);
  border-radius:18px;
  padding:2rem 2.25rem;
  box-shadow:0 32px 90px rgba(10,16,32,0.45);
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.share-link-group{
  display:flex;
  gap:0.75rem;
  align-items:center;
}
.share-link-group input{
  flex:1;
  padding:0.7rem 0.85rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:#151f33;
  color:#fff;
  font-size:0.95rem;
}
.share-link-group input:disabled{
  opacity:0.6;
}
.btn.share-copy{
  background:linear-gradient(135deg,#4a7dff,#6f8bff);
  color:#fff;
  font-weight:600;
  border:none;
  border-radius:12px;
  padding:0.65rem 1.25rem;
  cursor:pointer;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.btn.share-copy:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(74,125,255,0.35);
}
.btn.share-copy:focus-visible{
  outline:2px solid rgba(101,190,255,0.65);
  outline-offset:3px;
}
.btn.share-copy:disabled{
  opacity:0.5;
  cursor:default;
  box-shadow:none;
}
.share-actions{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
}
.share-status{
  margin:0;
  font-size:0.9rem;
  color:var(--muted);
}
.share-status[data-variant="success"]{color:#6fd5a1;}
.share-status[data-variant="error"]{color:#ff8c8c;}
.share-hint{
  margin:0;
  font-size:0.85rem;
  color:var(--muted);
}
:root[data-theme="light"] .share-modal-content{
  background:#f5f7ff;
  color:#102038;
  box-shadow:0 30px 80px rgba(15,30,55,0.2);
}
:root[data-theme="light"] .share-link-group input{
  background:#ecf1ff;
  border:1px solid rgba(16,32,56,0.15);
  color:#102038;
}
:root[data-theme="light"] .btn.share-copy{
  background:linear-gradient(135deg,#4a7dff,#7fb0ff);
  color:#fefeff;
}
:root[data-theme="light"] .share-status{color:rgba(16,32,56,0.65);}
:root[data-theme="light"] .share-status[data-variant="error"]{color:#d95050;}
:root[data-theme="light"] .share-status[data-variant="success"]{color:#1f8d58;}

body.share-mode{
  background:var(--bg);
}
body.share-mode .landing,
body.share-mode footer{display:none!important;}
body.share-mode header .btn-header.theme-toggle,
body.share-mode header #authButton,
body.share-mode header #accountMenu,
body.share-mode header #shareButton{
  display:none!important;
}
body.share-mode #boardSelect{
  display:none!important;
}
body.share-mode #chatWidget{display:none!important;}
body.share-mode #createMeetingBtn,
body.share-mode #manageProjects,
body.share-mode #catchUpBtn{
  display:none!important;
}
body.share-mode .add-task{display:none!important;}
body.share-mode .task{cursor:default;}
body.share-mode .task:hover{transform:none;}
body.share-mode .task:active{transform:none;}
body.share-mode .tasks{pointer-events:initial;}

.modal-open{overflow:hidden;}

.share-board-title{display:none;}
body.share-mode .board-header .board-controls-center{
  flex-direction:column;
  gap:0.25rem;
}
body.share-mode .share-board-title{
  display:block;
  font-weight:600;
  color:var(--text);
  font-size:1rem;
}

body.share-mode #monthContextMenu{display:none!important;}

.share-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin:2rem 0 1rem;
  font-size:0.85rem;
  color:var(--muted);
  flex-wrap:wrap;
  text-align:center;
}
.share-footer.hidden{display:none;}
.share-footer-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.5rem 1rem;
  border-radius:999px;
  font-size:0.9rem;
  font-weight:600;
  background:linear-gradient(135deg,#4a7dff,#6f8bff);
  color:#fff;
  text-decoration:none;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.share-footer-link:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(74,125,255,0.3);
}
.share-footer-link:focus-visible{
  outline:2px solid rgba(74,125,255,0.6);
  outline-offset:3px;
}
:root[data-theme="light"] .share-footer{color:rgba(11,20,36,0.6);}
:root[data-theme="light"] .share-footer-link{
  background:linear-gradient(135deg,#4a7dff,#7fb0ff);
  color:#f8faff;
}

.btn-header.share-cta{
  background:linear-gradient(135deg,#4a7dff,#6f8bff);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  padding:0.55rem 1.1rem;
}
.btn-header.share-cta.hidden{display:none!important;}
.btn-header.share-cta:hover{background:linear-gradient(135deg,#4a7dff,#82b6ff);}
:root[data-theme="light"] .btn-header.share-cta{
  background:linear-gradient(135deg,#4a7dff,#82b6ff);
  color:#f7faff;
}

.notifications-container{
  position:relative;
}
.notifications-container.hidden{display:none!important;}
.notification-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,#4a7dff,#6f8bff);
  color:#fff;
  font-size:1.2rem;
  cursor:pointer;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.notification-btn.has-unread::after{
  content:'';
  position:absolute;
  top:6px;
  right:6px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff5871;
  box-shadow:0 0 0 2px rgba(15,20,35,0.9);
}
.notification-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(74,125,255,0.25);
}
.notification-btn:focus-visible{
  outline:2px solid rgba(74,125,255,0.65);
  outline-offset:3px;
}
:root[data-theme="light"] .notification-btn{
  background:linear-gradient(135deg,#4a7dff,#82b6ff);
  color:#f7faff;
}
:root[data-theme="light"] .notification-btn.has-unread::after{
  box-shadow:0 0 0 2px rgba(245,248,255,0.9);
}
.notifications-dropdown{
  position:absolute;
  top:calc(100% + 0.5rem);
  right:0;
  min-width:260px;
  padding:0.75rem;
  background:var(--card);
  border-radius:14px;
  box-shadow:0 22px 70px rgba(15,20,35,0.32);
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  z-index:80;
}
.notifications-dropdown.hidden{display:none;}
.notifications-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  max-height:260px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(74,125,255,0.6) rgba(20,24,38,0.35);
}
.notifications-list::-webkit-scrollbar{
  width:8px;
}
.notifications-list::-webkit-scrollbar-track{
  background:rgba(20,24,38,0.35);
  border-radius:12px;
}
.notifications-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(74,125,255,0.85),rgba(103,150,255,0.9));
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
}
.notifications-list::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(74,125,255,1),rgba(114,162,255,1));
}

.notification-item{
  display:flex;
  flex-direction:column;
  gap:0.2rem;
  background:rgba(74,125,255,0.12);
  border-radius:12px;
  padding:0.65rem 0.75rem;
  color:var(--text);
  font-size:0.85rem;
}
.notification-item.notification-unread{
  background:rgba(74,125,255,0.25);
  border:1px solid rgba(74,125,255,0.45);
}
.notification-item strong{
  font-size:0.9rem;
}
.notification-time{
  font-size:0.75rem;
  color:var(--muted);
}
.notification-actions{
  display:flex;
  gap:0.5rem;
  margin-top:0.6rem;
  padding-top:0.6rem;
  border-top:1px solid rgba(255,255,255,0.08);
}
.notification-action{
  flex:1;
  border:none;
  border-radius:999px;
  padding:0.45rem 0.65rem;
  font-size:0.78rem;
  font-weight:600;
  cursor:pointer;
  transition:transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.notification-action:disabled{
  opacity:0.6;
  cursor:default;
}
.notification-action--accept{
  background:linear-gradient(135deg,#49c27d,#5edb91);
  color:#082f1f;
}
.notification-action--accept:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(80,205,136,0.28);
}
.notification-action--decline{
  background:rgba(255,255,255,0.08);
  color:#f9c5cf;
  border:1px solid rgba(255,255,255,0.18);
}
.notification-action--decline:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(255,94,122,0.25);
}
.notifications-empty{
  margin:0;
  color:var(--muted);
  font-size:0.85rem;
  text-align:center;
}
:root[data-theme="light"] .notifications-dropdown{
  background:#ffffff;
  border:1px solid rgba(11,20,36,0.08);
  box-shadow:0 24px 70px rgba(12,24,46,0.18);
}
:root[data-theme="light"] .notification-actions{
  border-top:1px solid rgba(15,24,40,0.08);
}
:root[data-theme="light"] .notifications-list{
  scrollbar-color:rgba(74,125,255,0.55) rgba(232,237,250,0.65);
}
:root[data-theme="light"] .notifications-list::-webkit-scrollbar-track{
  background:rgba(232,237,250,0.65);
}
:root[data-theme="light"] .notifications-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#4a7dff,#82b6ff);
  box-shadow:0 2px 6px rgba(74,125,255,0.35);
}
:root[data-theme="light"] .notifications-list::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#5685ff,#8fc0ff);
}
:root[data-theme="light"] .notification-item{
  background:rgba(74,125,255,0.12);
  color:#0b1424;
}
:root[data-theme="light"] .notification-item.notification-unread{
  background:rgba(74,125,255,0.2);
  border:1px solid rgba(74,125,255,0.35);
}
:root[data-theme="light"] .notification-action--accept{
  background:linear-gradient(135deg,#4a7dff,#82b6ff);
  color:#f7faff;
}
:root[data-theme="light"] .notification-action--decline{
  background:rgba(13,26,45,0.08);
  color:#0b1424;
  border:1px solid rgba(13,26,45,0.15);
}
:root[data-theme="light"] .notification-time{color:rgba(11,20,36,0.55);}
:root[data-theme="light"] .notifications-empty{color:rgba(11,20,36,0.55);}

:root[data-theme="light"] .btn.share-cta{
  background:linear-gradient(135deg,#4a7dff,#82b6ff);
  color:#f7faff;
}
:root[data-theme="light"] .btn.danger{
  background:linear-gradient(135deg,#ff5d7a,#ff6f86);
  color:#fff;
}

.privacy-setting{
  margin-top:1rem;
  width:100%;
}

.privacy-control{
  display:flex;
  align-items:flex-start;
  gap:0.75rem;
  padding:0.75rem 1rem;
  border-radius:0.75rem;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  cursor:pointer;
  user-select:none;
  width:100%;
}

.privacy-control input[type='checkbox']{
  width:1rem;
  height:1rem;
  margin-top:0.15rem;
  accent-color:var(--accent);
  flex-shrink:0;
  display:inline-block;
}

.privacy-copy{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  min-width:0;
}

.btn-link{
  background:none;
  border:none;
  color:var(--accent);
  font-weight:600;
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
}
.btn-link:hover{
  text-decoration:underline;
}
:root[data-theme="light"] .btn-link{
  color:#1f4ed8;
}

.meeting-attendees{
  margin-top:1rem;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
:root[data-theme="light"] .meeting-attendees{
  background:rgba(74,125,255,0.08);
  border:1px solid rgba(74,125,255,0.18);
}
.meeting-attendees-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.meeting-attendees-header h4{
  margin:0;
  font-size:1rem;
  color:var(--text);
}
.meeting-attendees-list{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  min-height:1.5rem;
}
.meeting-attendees-empty{
  font-size:0.82rem;
  color:var(--muted);
}
.meeting-attendee-chip{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.35rem 0.6rem;
  border-radius:999px;
  background:rgba(74,125,255,0.18);
  border:1px solid rgba(74,125,255,0.35);
  color:#dbe6ff;
  font-size:0.85rem;
}
:root[data-theme="light"] .meeting-attendee-chip{
  background:rgba(74,125,255,0.15);
  border:1px solid rgba(74,125,255,0.3);
  color:#17438f;
}
.meeting-attendee-chip img{
  width:24px;
  height:24px;
  border-radius:50%;
  object-fit:cover;
}
.meeting-attendee-remove{
  background:none;
  border:none;
  color:inherit;
  cursor:pointer;
  padding:0;
  font-size:0.85rem;
}
.meeting-attendee-remove:hover{
  text-decoration:underline;
}

.meeting-people-search{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.meeting-people-search.hidden{
  display:none;
}
.meeting-people-search input{
  width:100%;
  padding:0.55rem 0.7rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.15);
  background:#151923;
  color:#f5f7ff;
}
:root[data-theme="light"] .meeting-people-search input{
  background:#ffffff;
  border:1px solid rgba(16,27,45,0.12);
  color:#102038;
}
.meeting-people-hint{
  margin:0;
  font-size:0.8rem;
  color:var(--muted);
}
.meeting-people-hint[data-variant="error"]{
  color:#ff6f86;
}
:root[data-theme="light"] .meeting-people-hint[data-variant="error"]{
  color:#d11b3d;
}
.meeting-people-results{
  max-height:220px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:0.4rem;
}
.meeting-people-result{
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.5rem 0.6rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(27,31,41,0.85);
  cursor:pointer;
  transition:background 0.15s ease, border 0.15s ease;
}
.meeting-people-result:hover{
  background:rgba(74,125,255,0.25);
  border-color:rgba(74,125,255,0.45);
}
.meeting-people-result img{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
}
.meeting-people-meta{
  display:flex;
  flex-direction:column;
  gap:0.15rem;
}
.meeting-people-name{
  font-weight:600;
  font-size:0.95rem;
  color:#f5f7ff;
}
.meeting-attendee-status{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  padding:0.15rem 0.55rem;
  border-radius:999px;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  background:rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.82);
}
.meeting-attendee-status--invited{
  background:rgba(123,146,255,0.25);
  color:#dbe6ff;
}
.meeting-attendee-status--accepted{
  background:rgba(72,193,140,0.25);
  color:#bff5d9;
}
.meeting-attendee-status--declined{
  background:rgba(255,94,122,0.25);
  color:#ffc1ce;
}
:root[data-theme="light"] .meeting-attendee-status{
  background:rgba(17,28,48,0.08);
  color:#0f1c30;
}
:root[data-theme="light"] .meeting-attendee-status--invited{
  background:rgba(74,125,255,0.18);
  color:#203d8f;
}
:root[data-theme="light"] .meeting-attendee-status--accepted{
  background:rgba(72,193,140,0.18);
  color:#136c3f;
}
:root[data-theme="light"] .meeting-attendee-status--declined{
  background:rgba(255,94,122,0.18);
  color:#9e1e36;
}
.meeting-people-email{
  font-size:0.8rem;
  color:rgba(255,255,255,0.65);
}
:root[data-theme="light"] .meeting-people-result{
  background:#f8faff;
  border:1px solid rgba(74,125,255,0.25);
}
:root[data-theme="light"] .meeting-people-result:hover{
  background:rgba(74,125,255,0.18);
}
:root[data-theme="light"] .meeting-people-name{
  color:#102038;
}
:root[data-theme="light"] .meeting-people-email{
  color:rgba(16,27,45,0.56);
}

.meeting-attendees-empty{
  font-size:0.82rem;
  color:var(--muted);
}