/* ─── RESET & BASE ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0f14;
  --bg2:#13161d;
  --bg3:#1a1e28;
  --surface:#1f2333;
  --surface2:#252a3a;
  --border:#2a3048;
  --border2:#353d58;
  --text:#e8eaf2;
  --text2:#8b93b0;
  --text3:#555e7a;
  --accent:#5b7fff;
  --accent2:#3d5be0;
  --green:#22c97a;
  --amber:#f5a623;
  --red:#ff5f6d;
  --purple:#a78bfa;
  --teal:#2dd4bf;
  --r:10px;
  --r2:16px;
}
/* ─── LIGHT MODE OVERRIDES ───────────────────────────── */
.light-mode{
  --bg:#f4f5f8;
  --bg2:#ffffff;
  --bg3:#e8eaf2;
  --surface:#ffffff;
  --surface2:#f4f5f8;
  --border:#d8dce8;
  --border2:#b0b8d1;
  --text:#1a1e28;
  --text2:#555e7a;
  --text3:#8b93b0;
  --accent:#3d5be0;
  --accent2:#5b7fff;
  --green:#18a05e;
  --amber:#d97706;
  --red:#e11d48;
  --purple:#7c3aed;
  --teal:#0f766e;
}

/* ─── THEME TOGGLE ───────────────────────────────────── */
.theme-toggle{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  width:32px;height:32px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all .15s;
  font-size:16px;
  margin-left:12px;
}
.theme-toggle:hover{
  background:var(--surface2);
  border-color:var(--border2);
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
}

/* ─── BACKGROUND TEXTURE ───────────────────────────────── */
body::before{
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(91,127,255,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(34,201,122,.05) 0%, transparent 60%);
  pointer-events:none;z-index:0;
}

/* ─── LAYOUT ───────────────────────────────────────────── */
.layout{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 24px 80px;}

/* ─── HEADER ───────────────────────────────────────────── */
header{
  padding:24px 0 0;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding-bottom:20px;margin-bottom:32px;
  gap:20px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.brand-icon img{
  width:100%;height:100%;object-fit:cover;
}
.brand-name{
  font-size:20px;font-weight:700;letter-spacing:-.5px;
  color:var(--text);
}
.brand-sub{font-size:12px;color:var(--text3);margin-top:1px;}

.last-sync{
  font-size:12px;color:var(--text3);
  display:flex;align-items:center;gap:6px;
}
.sync-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

/* ─── NAV TABS ─────────────────────────────────────────── */
.header-nav{
  display:flex;gap:4px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:5px;
  margin:0 auto;
}
.nav-btn{
  font-size:13px;font-weight:600;
  padding:8px 22px;border-radius:10px;
  border:none;background:none;
  color:var(--text2);cursor:pointer;
  transition:all .18s;
}
.nav-btn.active{
  background:var(--surface2);
  color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.nav-btn:not(.active):hover{color:var(--text);background:rgba(255,255,255,.04);}

@media(max-width:850px){
  header{ flex-direction:column; text-align:center; }
  .brand{ flex-direction:column; }
  .header-nav{ width:100%; overflow-x:auto; }
  .nav-btn{ white-space:nowrap; }
}

/* ─── SECTION HEADER ───────────────────────────────────── */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
}
.section-title{
  font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3);
}
.count-badge{
  font-size:12px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text2);
  padding:3px 10px;border-radius:99px;
}

/* ─── STATUS FILTERS ───────────────────────────────────── */
.filters{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap;}
.filter-btn{
  font-size:12px;font-weight:500;
  padding:5px 14px;border-radius:99px;
  border:1px solid var(--border);
  background:transparent;color:var(--text2);
  cursor:pointer;transition:all .15s;
}
.filter-btn:hover{border-color:var(--border2);color:var(--text);}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ─── PROJECT GRID ─────────────────────────────────────── */
.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
}

/* ─── PROJECT CARD ─────────────────────────────────────── */
.pcard{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:20px;
  cursor:pointer;
  transition:border-color .2s,transform .15s,box-shadow .2s;
  position:relative;overflow:hidden;
}
.pcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-line,rgba(91,127,255,.3)),transparent);
  opacity:0;transition:opacity .2s;
}
.pcard:hover::before{opacity:1;}
.pcard:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.3);}
.pcard.open{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}

.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.card-title{
  font-size:15px;font-weight:700;
  color:var(--text);line-height:1.3;
}
.status-pill{
  flex-shrink:0;font-size:11px;font-weight:500;
  padding:4px 10px;border-radius:99px;white-space:nowrap;
}
.s-done{background:rgba(34,201,122,.12);color:var(--green);border:1px solid rgba(34,201,122,.2);}
.s-wip {background:rgba(91,127,255,.12);color:var(--accent);border:1px solid rgba(91,127,255,.2);}
.s-plan{background:rgba(139,147,176,.1);color:var(--text2);border:1px solid var(--border);}

.card-tech{
  font-size:12px;color:var(--text3);
  margin-bottom:10px;
  display:flex;align-items:center;gap:5px;
}
.card-tech::before{content:'⌨';font-size:11px;}

.card-desc{font-size:13px;color:var(--text2);line-height:1.55;margin-bottom:14px;}

.progress-wrap{margin-bottom:12px;}
.progress-label{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--text3);margin-bottom:6px;
}
.progress-track{
  height:4px;background:var(--bg);border-radius:99px;overflow:hidden;
}
.progress-fill{
  height:100%;border-radius:99px;
  transition:width .6s cubic-bezier(.23,1,.32,1);
}
.pf-done{background:linear-gradient(90deg,var(--teal),var(--green));}
.pf-wip {background:linear-gradient(90deg,var(--accent2),var(--accent));}
.pf-plan{background:var(--border2);}

.card-footer{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--text3);
  padding-top:12px;border-top:1px solid var(--border);
}
.expand-hint{
  font-size:12px;color:var(--text3);
  display:flex;align-items:center;gap:4px;
  transition:color .15s;
}
.pcard:hover .expand-hint{color:var(--accent);}
.expand-arrow{transition:transform .2s;}
.pcard.open .expand-arrow{transform:rotate(180deg);}

/* ─── RIGHT SIDEBAR (PROJECT DETAILS) ──────────────────── */
.sidebar-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
  z-index:90;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.sidebar-overlay.open{
  opacity:1;pointer-events:auto;
}

.project-sidebar{
  position:fixed;top:0;right:0;bottom:0;
  width:100%;max-width:480px;
  background:var(--bg2);
  border-left:1px solid var(--border);
  box-shadow:-4px 0 24px rgba(0,0,0,.15);
  z-index:100;
  transform: translateX(100%);
  transition:transform .35s cubic-bezier(.23,1,.32,1);
  display:flex;flex-direction:column;
}
.project-sidebar.open{
  transform: translateX(0);
}

.close-sidebar{
  position:absolute;top:16px;right:20px;
  background:none;border:none;
  font-size:28px;color:var(--text3);
  cursor:pointer;line-height:1;
  transition:color .15s;
  z-index:2;
}
.close-sidebar:hover{color:var(--text);}

.sidebar-content{
  padding:40px 24px 24px;
  overflow-y:auto;
  flex:1;
}
@media(max-width:480px){
  .sidebar-content{padding:40px 16px 16px;}
}

.drawer-section-title{
  font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--text3);margin-bottom:14px;
  margin-top:24px;
}
.drawer-section-title:first-child{margin-top:0;}
.full-desc{font-size:14px;color:var(--text2);line-height:1.65;margin-bottom:16px;}

.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.tag{
  font-size:11px;padding:4px 10px;border-radius:6px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text2);
}

/* Updates list in sidebar */
.update-list{display:flex;flex-direction:column;gap:12px;}
.update-item{display:flex;gap:12px;align-items:flex-start;}
.update-timeline{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding-top:5px;
}
.u-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);flex-shrink:0;
}
.u-line{width:1px;flex:1;background:var(--border);min-height:16px;}
.u-text{font-size:13px;color:var(--text2);line-height:1.45;}
.u-date{font-size:11px;color:var(--text3);margin-top:4px;}

/* ─── UPCOMING EVENTS (CALENDAR/AGENDA VIEW) ───────────── */
.gcal-list{
  display:flex;flex-direction:column;gap:32px;
  margin-top:24px;
}
.gcal-month-group{
  display:flex;flex-direction:column;gap:12px;
}
.gcal-month-header{
  font-size:18px;font-weight:700;
  color:var(--text);
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
  margin-bottom:8px;
}
.gcal-item{
  display:flex;gap:16px;
  padding:12px;border-radius:var(--r);
  transition:background .15s;
}
.gcal-item:hover{
  background:rgba(255,255,255,.03);
}
.light-mode .gcal-item:hover{
  background:rgba(0,0,0,.03);
}
.gcal-date-col{
  flex-shrink:0;width:40px;text-align:center;
}
.gcal-day{
  font-size:20px;font-weight:700;color:var(--text);line-height:1.2;
}
.gcal-day-name{
  font-size:11px;color:var(--text3);font-weight:500;
}
.gcal-time{
  font-size:12px;font-weight:600;color:var(--accent);
  margin-top:8px;
}
.gcal-event-body{
  flex:1;
  background:var(--surface);
  border:1px solid var(--border);
  border-left-width:4px;
  border-radius:8px;
  padding:14px;
  transition:border-color .15s,box-shadow .15s;
}
.gcal-item:hover .gcal-event-body{
  border-color:var(--border2);
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.gcal-event-title{
  font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;
  display:flex;align-items:center;gap:6px;
}
.gcal-event-note{
  font-size:13px;color:var(--text2);line-height:1.45;
}
.gcal-event-meta{
  display:flex;align-items:center;gap:16px;
  margin-top:8px;padding-top:8px;
  border-top:1px dashed var(--border);
  font-size:12px;color:var(--text3);
}
.gcal-meta-item{
  display:flex;align-items:center;gap:4px;
}

@media(max-width:600px){
  .gcal-item{ gap:12px; padding:8px 4px; }
  .gcal-date-col{ width:36px; }
  .gcal-day{ font-size:18px; }
  .gcal-event-meta{ flex-wrap:wrap; gap:8px 16px; }
}

/* ─── NOTIFICATIONS TAB ──────────────────────────────────── */
.noti-list{
  display:flex;flex-direction:column;gap:16px;
}
.noti-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:var(--r);
  padding:16px 20px;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.noti-card:hover{
  border-color:var(--border2);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transform:translateY(-2px);
}
.noti-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:6px;
}
.noti-title{
  font-size:15px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.noti-title::before{content:'🔔';font-size:14px;}
.noti-time{
  font-size:12px;color:var(--text3);white-space:nowrap;
  margin-top:2px;
}
.noti-desc{
  font-size:14px;color:var(--text2);line-height:1.55;
}
@media(max-width:600px){
  .noti-card{ padding:14px 16px; }
}

/* ─── STATS ROW ────────────────────────────────────────── */
.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-bottom:36px;
}
@media(max-width:600px){.stats-row{grid-template-columns:repeat(2,1fr);}}
.stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:16px;
}
.stat-label{font-size:12px;color:var(--text3);margin-bottom:6px;}
.stat-value{
  font-size:26px;font-weight:800;color:var(--text);
}
.stat-sub{font-size:11px;color:var(--text3);margin-top:2px;}

/* ─── LEGEND ───────────────────────────────────────────── */
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:var(--text2);}
.legend-item{display:flex;align-items:center;gap:7px;}
.leg-dot{width:10px;height:10px;border-radius:3px;}

/* ─── FOOTER ───────────────────────────────────────────── */
footer{
  margin-top:60px;padding-top:24px;
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--text3);
}
.gs-badge{
  font-size:11px;
  background:rgba(34,201,122,.08);border:1px solid rgba(34,201,122,.2);
  color:var(--green);padding:4px 10px;border-radius:99px;
}

/* ─── ANIMATION ────────────────────────────────────────── */
.fade-in{animation:fadeUp .35s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ─── CONFIG HINT ──────────────────────────────────────── */
.config-bar{
  background:rgba(91,127,255,.08);
  border:1px solid rgba(91,127,255,.2);
  border-radius:var(--r);padding:12px 16px;
  font-size:13px;color:var(--text2);
  margin-bottom:28px;
  display:flex;align-items:center;gap:10px;
}
.config-bar code{
  background:var(--surface2);padding:2px 7px;border-radius:4px;
  font-size:12px;color:var(--accent);
  font-family:monospace;
}