/* =============================================
   RESET & CSS VARIABLES
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --pink:       #FF85A1;
  --pink-lt:    #FFAEC0;
  --purple:     #C44BC9;
  --purple-lt:  #DDA8FF;
  --purple-bg:  #F8F0FF;
  --bg:         #FDF4FF;
  --border:     #EDD5F7;
  --border-lt:  rgba(196, 75, 201, .12);
  --text:       #333;
  --muted:      #aaa;

  /* Gantt geometry (also referenced in main.js as JS constants) */
  --row-h:     44px;
  --bar-h:     26px;
  --hdr-top-h: 28px;
  --hdr-bot-h: 32px;
  --hdr-h:     60px; /* hdr-top-h + hdr-bot-h */
  --left-w:    240px;
}

/* =============================================
   BASE
   ============================================= */
body {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255, 133, 161, .08) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(196,  75, 201, .07) 0%, transparent 50%);
  min-height: 100vh;
  padding: 20px;
  color: var(--text);
}

/* Background decorations */
.deco {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: .055;
  font-size: 140px;
  user-select: none;
}
.deco-tl { top: -20px; left: -20px; }
.deco-br { bottom: -20px; right: -20px; font-size: 180px; }

.page-wrapper {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* =============================================
   HEADER
   ============================================= */
header {
  background: linear-gradient(135deg, #FF85A1 0%, #C44BC9 55%, #7B9FFF 100%);
  border-radius: 24px;
  padding: 26px 36px;
  margin-bottom: 16px;
  box-shadow: 0 8px 32px rgba(196, 75, 201, .3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
}

/* Decorative circles inside header */
header::before,
header::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
header::before { width: 250px; height: 250px; top: -100px; left: -60px; }
header::after  { width: 180px; height: 180px; bottom: -70px; right: -30px; background: rgba(255,255,255,.06); }

.hdr-title { position: relative; z-index: 1; }
.hdr-title h1 {
  color: #fff;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.hdr-title p {
  color: rgba(255, 255, 255, .88);
  font-size: .9rem;
  margin-top: 4px;
}

/* Countdown badge */
.countdown-card {
  background: rgba(255, 255, 255, .22);
  border: 2px solid rgba(255, 255, 255, .38);
  border-radius: 18px;
  padding: 12px 22px;
  text-align: center;
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 1;
}
.countdown-card .cd-label { color: rgba(255, 255, 255, .88); font-size: .75rem; font-weight: 700; }
.countdown-card .cd-days  { color: #fff; font-size: 2.4rem; font-weight: 900; line-height: 1.1; text-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.countdown-card .cd-unit  { color: rgba(255, 255, 255, .88); font-size: .75rem; font-weight: 700; }

/* =============================================
   TOOLBAR
   ============================================= */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.view-pills {
  display: flex;
  gap: 5px;
  background: #fff;
  padding: 5px;
  border-radius: 50px;
  box-shadow: 0 2px 14px rgba(196, 75, 201, .14);
}
.view-pills button {
  padding: 7px 18px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  transition: all .2s;
}
.view-pills button.active,
.view-pills button:hover {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  box-shadow: 0 2px 10px rgba(196, 75, 201, .35);
}

.btn-add-task {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  border: none;
  padding: 9px 22px;
  border-radius: 50px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(196, 75, 201, .38);
  transition: all .2s;
}
.btn-add-task:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(196, 75, 201, .5);
}

.toolbar-note { font-size: .76rem; color: #bbb; }

/* =============================================
   LEGEND
   ============================================= */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  background: #fff;
  padding: 12px 20px;
  border-radius: 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 14px rgba(196, 75, 201, .1);
}
.legend-item { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: #666; }
.legend-dot  { width: 14px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* =============================================
   GANTT CARD (outer wrapper)
   ============================================= */
.gantt-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(196, 75, 201, .12);
  margin-bottom: 14px;
}

/* Two-panel flex layout — fixed height with internal scroll */
.gantt-wrap {
  display: flex;
  align-items: flex-start;
  height: calc(100vh - 280px);
  min-height: 360px;
  overflow: hidden;
}

/* ── Left panel: sticky task-name list ──────── */
.gantt-left {
  width: var(--left-w);
  flex-shrink: 0;
  border-right: 2px solid var(--border);
  position: sticky;
  left: 0;
  z-index: 20;
  background: #fff;
  overflow-y: hidden;   /* JS-synced; sticky children still work */
  height: 100%;
}

.gl-header {
  height: var(--hdr-h);
  background: #FDF0FF;
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-weight: 900;
  font-size: .82rem;
  color: var(--purple);
  position: sticky;
  top: 0;
  z-index: 21;
}

.task-name-row {
  height: var(--row-h);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  border-bottom: 1px solid var(--border-lt);
  cursor: pointer;
  transition: background .12s;
}
.task-name-row:hover      { background: #FDF8FF; }
.task-name-row:last-child { border-bottom: none; }

.tnr-dot  { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.tnr-name {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Right panel: scrollable timeline (both axes) ── */
.gantt-right {
  flex: 1;
  min-width: 0;
  overflow: auto;   /* both axes — enables .tl-header sticky */
  height: 100%;
}
.gantt-right::-webkit-scrollbar        { height: 8px; }
.gantt-right::-webkit-scrollbar-track  { background: #f5eeff; }
.gantt-right::-webkit-scrollbar-thumb  { background: var(--purple-lt); border-radius: 4px; }

/* ── Timeline header (two rows) ─────────────── */
.tl-header {
  position: sticky;
  top: 0;
  z-index: 15;
}

.tl-hdr-top {
  display: flex;
  height: var(--hdr-top-h);
  background: #FDF0FF;
  border-bottom: 1px solid var(--border);
}

.tl-hdr-bot {
  display: flex;
  height: var(--hdr-bot-h);
  background: #F8F0FF;
  border-bottom: 2px solid var(--border);
}

/* Year / month grouping cells (top row) */
.hdr-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 900;
  color: var(--purple);
  border-right: 1px solid rgba(196, 75, 201, .25);
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
}

/* Individual column cells (bottom row) */
.hdr-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  color: #999;
  border-right: 1px solid var(--border-lt);
  white-space: nowrap;
}
.hdr-col.is-current { background: rgba(255, 232, 245, .7); color: var(--purple); font-weight: 900; }
.hdr-col.is-weekend { color: #FFB3C6; }

/* ── Timeline body ──────────────────────────── */
.tl-body { position: relative; }

/* Striped row backgrounds */
.grid-row {
  height: var(--row-h);
  border-bottom: 1px solid var(--border-lt);
}
.grid-row:nth-child(even) { background: #FFFAFF; }
.grid-row:nth-child(odd)  { background: #fff; }
.grid-row:last-child      { border-bottom: none; }

/* Vertical column separator lines */
.col-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--border-lt);
  pointer-events: none;
}

/* Day view: weekend column highlight (added via tl-body background) */
.day-col-weekend {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(255, 200, 220, .10);
  pointer-events: none;
  z-index: 0;
}

/* Day view: day boundary — dotted 1px */
.col-line-day {
  background: transparent;
  border-left: 1px dotted rgba(196, 75, 201, .25);
  width: 0;
}

/* Day view: week boundary (after Sunday) — solid 1px */
.col-line-week-boundary {
  background: transparent;
  border-left: 1px solid rgba(196, 75, 201, .45);
  width: 0;
}

/* Week view: week separator — dotted 1px */
.col-line-week {
  background: transparent;
  border-left: 1px dotted rgba(196, 75, 201, .22);
  width: 0;
}

/* Week view: month boundary — solid 1px */
.col-line-month-boundary {
  background: transparent;
  border-left: 1px solid rgba(196, 75, 201, .42);
  width: 0;
}

/* Today vertical line */
.today-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--pink), var(--purple));
  opacity: .65;
  z-index: 8;
  pointer-events: none;
}
.today-line::after {
  content: '今日';
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: .6rem;
  font-weight: 900;
  color: var(--purple);
  white-space: nowrap;
}

/* ── Task bars ──────────────────────────────── */
.task-bar {
  position: absolute;
  height: var(--bar-h);
  border-radius: 7px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  cursor: pointer;
  overflow: hidden;
  transition: filter .14s, box-shadow .14s;
  z-index: 4;
  min-width: 4px;
}
.task-bar:hover { filter: brightness(1.07); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }

/* Progress overlay (sits on top of bar background) */
.bar-progress-overlay {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 7px;
  opacity: .4;
  pointer-events: none;
}

.bar-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(0, 0, 0, .62);
  white-space: nowrap;
  position: relative;
  z-index: 1;
  pointer-events: none;
  /* clipping is handled by the parent .task-bar's overflow:hidden (wide bars)
     or allowed to spill when parent has overflow:visible (narrow bars) */
}

/* ── Milestone diamond markers ──────────────── */
.milestone-wrap {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  cursor: pointer;
}
.milestone-wrap:hover .ms-diamond {
  box-shadow: 0 3px 12px rgba(255, 165, 0, .55);
  transform: rotate(45deg) scale(1.1);
}

.ms-diamond {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #FFE566, #FFD700);
  border: 2.5px solid #FFA500;
  transform: rotate(45deg);
  border-radius: 2px;
  transition: box-shadow .14s, transform .14s;
  flex-shrink: 0;
}

/* Empty state */
.gantt-empty {
  padding: 56px;
  width: 100%;
  text-align: center;
  color: #ccc;
  font-size: .92rem;
}

/* =============================================
   TASK LIST SECTION
   ============================================= */
.task-list-section {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 28px rgba(196, 75, 201, .1);
  overflow: hidden;
}

.tls-header {
  padding: 15px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  border-bottom: 2px solid #FDF0FF;
  transition: background .15s;
}
.tls-header:hover    { background: #FDF8FF; }
.tls-header h3       { font-size: .95rem; font-weight: 900; color: var(--purple); }
.tls-count           { color: var(--muted); font-weight: 400; font-size: .82rem; margin-left: 6px; }
.tls-chevron         { color: #ccc; font-size: .75rem; transition: transform .3s; }
.tls-chevron.open    { transform: rotate(180deg); }

.tls-body { max-height: 360px; overflow-y: auto; transition: max-height .35s; }
.tls-body.collapsed  { max-height: 0; overflow: hidden; }
.tls-body::-webkit-scrollbar        { width: 6px; }
.tls-body::-webkit-scrollbar-track  { background: #fdf5ff; }
.tls-body::-webkit-scrollbar-thumb  { background: var(--purple-lt); border-radius: 3px; }

.task-card {
  display: flex;
  align-items: center;
  padding: 11px 22px;
  border-bottom: 1px solid var(--border-lt);
  gap: 12px;
  transition: background .12s;
}
.task-card:hover      { background: #FDFAFF; }
.task-card:last-child { border-bottom: none; }

.tc-badge     { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.tc-info      { flex: 1; min-width: 0; }
.tc-name      { font-weight: 700; font-size: .88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-dates     { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.tc-prog-wrap { width: 56px; flex-shrink: 0; }
.tc-prog-bar  { height: 5px; background: #f0e8ff; border-radius: 3px; overflow: hidden; }
.tc-prog-fill { height: 100%; background: linear-gradient(to right, var(--pink), var(--purple)); border-radius: 3px; }
.tc-prog-txt  { font-size: .65rem; color: var(--muted); text-align: right; margin-top: 2px; }
.tc-actions   { display: flex; gap: 5px; flex-shrink: 0; }

.btn-sm {
  padding: 4px 11px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  transition: all .14s;
}
.btn-sm-edit           { background: #f0e8ff; color: var(--purple); }
.btn-sm-edit:hover     { background: var(--purple-lt); color: #fff; }
.btn-sm-delete         { background: #fff0f0; color: #ff7070; }
.btn-sm-delete:hover   { background: #ff7070; color: #fff; }

.tls-empty { padding: 36px; text-align: center; color: #ccc; font-size: .88rem; }

/* =============================================
   MODAL (add / edit task)
   ============================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(80, 30, 100, .38);
  backdrop-filter: blur(7px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  transition: opacity .22s;
}
.modal-overlay.hidden { opacity: 0; pointer-events: none; }

.modal {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(196, 75, 201, .28);
  position: relative;
  transform: scale(1) translateY(0);
  transition: transform .22s;
}
.modal-overlay.hidden .modal { transform: scale(.97) translateY(-16px); }

.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: #f5f0ff;
  border: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .85rem;
  color: #999;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.modal-close:hover { background: #ffe0ec; color: #e055a0; }

.modal h2 { font-size: 1.15rem; font-weight: 900; color: var(--purple); margin-bottom: 22px; }

/* Form elements */
.form-group              { margin-bottom: 14px; }
.form-group label        { display: block; font-size: .78rem; font-weight: 700; color: #999; margin-bottom: 5px; }
.required                { color: var(--pink); }

.form-group input[type="text"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 9px 13px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: .88rem;
  color: var(--text);
  background: var(--purple-bg);
  outline: none;
  transition: border-color .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--purple); }
.form-group textarea       { resize: vertical; min-height: 70px; }

/* Category select with color preview */
.cat-select-wrap       { display: flex; align-items: center; gap: 10px; }
.cat-preview           { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; border: 2px solid rgba(0,0,0,.07); transition: background .15s; }
.cat-select-wrap select { flex: 1; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Progress slider */
.prog-header          { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.prog-header label    { margin-bottom: 0; }
.prog-val             { font-size: .82rem; font-weight: 900; color: var(--purple); }
input[type="range"]   { width: 100%; accent-color: var(--purple); cursor: pointer; }

.field-error  { font-size: .73rem; color: #ff6b6b; margin-top: 3px; min-height: 16px; }

/* Checkbox label (show-label toggle) */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  color: #888;
  user-select: none;
}
.checkbox-label input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--purple);
  cursor: pointer;
  flex-shrink: 0;
}

.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

.btn-cancel {
  padding: 9px 20px;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: #fff;
  color: #bbb;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.btn-cancel:hover { border-color: var(--purple-lt); color: var(--purple); }

.btn-save {
  padding: 9px 26px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(196, 75, 201, .38);
  transition: all .15s;
}
.btn-save:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(196, 75, 201, .5); }

/* =============================================
   CONFIRM DIALOG
   ============================================= */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(80, 30, 100, .45);
  backdrop-filter: blur(7px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s;
}
.confirm-overlay.hidden { opacity: 0; pointer-events: none; }

.confirm-card {
  background: #fff;
  border-radius: 22px;
  padding: 32px;
  max-width: 340px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(196, 75, 201, .28);
  text-align: center;
}
.conf-icon   { font-size: 2.4rem; margin-bottom: 10px; }
.conf-title  { font-size: 1.05rem; font-weight: 900; margin-bottom: 8px; }
.conf-msg    { font-size: .82rem; color: #999; margin-bottom: 22px; line-height: 1.7; }
.conf-target { color: var(--purple); font-weight: 700; }
.conf-actions { display: flex; gap: 10px; justify-content: center; }

.btn-conf-cancel {
  padding: 9px 20px;
  border: 2px solid #eee;
  border-radius: 50px;
  background: #fff;
  color: #bbb;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .14s;
}
.btn-conf-cancel:hover { border-color: #ccc; color: #888; }

.btn-conf-delete {
  padding: 9px 20px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #ff9090, #ff4444);
  color: #fff;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(255, 80, 80, .32);
  transition: all .14s;
}
.btn-conf-delete:hover { transform: translateY(-1px); }

/* =============================================
   GROUP HEADER ROW (left panel)
   ============================================= */
.gl-group-hdr {
  height: 36px; /* GRP_ROW_H — keep in sync with main.js */
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  transition: filter .12s;
}
.gl-group-hdr:hover { filter: brightness(.94); }

.gl-chevron {
  font-size: .65rem;
  flex-shrink: 0;
  width: 12px;
  text-align: center;
}

.gl-grp-name {
  font-size: .8rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Row name cell in left panel (indented, not clickable).
   Height is controlled exclusively by inline style from JS to stay
   in sync with the right panel's variable-height grid rows. */
.gl-row-name {
  display: flex;
  align-items: center;
  padding: 0 12px 0 28px;
  gap: 8px;
  border-bottom: 1px solid var(--border-lt);
  /* no height/min-height here — set via style="height:Xpx" by JS */
}
.gl-row-name:last-child { border-bottom: none; }
.gl-row-name .tnr-name  { font-size: .78rem; }

/* Group band in timeline body */
.grid-group-row { border-bottom: 1px solid rgba(0, 0, 0, .07); }

/* =============================================
   TASK LIST — GROUP / ROW HEADERS
   ============================================= */
.tls-group-hdr {
  padding: 7px 22px;
  font-size: .78rem;
  font-weight: 900;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  position: sticky;
  top: 0;
  z-index: 2;
}

.tls-row-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 22px 5px 34px;
  font-size: .74rem;
  font-weight: 700;
  color: #888;
  background: #FDFAFF;
  border-bottom: 1px solid var(--border-lt);
}

.tls-more {
  padding: 5px 22px 5px 46px;
  font-size: .71rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border-lt);
  font-style: italic;
}

/* =============================================
   TOAST NOTIFICATION
   ============================================= */
.toast {
  position: fixed;
  bottom: 26px; right: 26px;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  padding: 11px 22px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .86rem;
  box-shadow: 0 4px 20px rgba(196, 75, 201, .42);
  z-index: 9999;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s, transform .3s;
}
.toast.hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }

/* =============================================
   MOBILE  (≤ 768px)
   ============================================= */
@media (max-width: 768px) {

  body { padding: 10px; }

  /* ── Page header: compact ─────────────────── */
  header {
    padding: 10px 14px;
    border-radius: 14px;
    gap: 8px;
  }
  .hdr-title p { display: none; }   /* hide subtitle */
  .hdr-title h1 { font-size: clamp(.85rem, 3.8vw, 1.1rem); }
  header::before { width: 160px; height: 160px; }
  header::after  { display: none; }

  .countdown-card { padding: 6px 10px; border-radius: 12px; }
  .countdown-card .cd-label,
  .countdown-card .cd-unit { font-size: .58rem; }
  .countdown-card .cd-days  { font-size: 1.5rem; }

  /* ── Toolbar ──────────────────────────────── */
  .toolbar { gap: 7px; margin-bottom: 8px; }
  .toolbar-note { display: none; }
  .btn-add-task { font-size: .78rem; padding: 7px 14px; }
  .view-pills button { padding: 6px 12px; font-size: .76rem; }

  /* ── Legend: tighter ─────────────────────── */
  .legend { padding: 8px 12px; gap: 5px 10px; margin-bottom: 10px; }
  .legend-item { font-size: .7rem; }

  /* ── Gantt: tighter height on mobile ─────── */
  .gantt-wrap {
    height: calc(100vh - 210px);
    min-height: 220px;
  }

  /* ── Left panel: narrower label column ────── */
  :root { --left-w: 160px; }
  .gl-grp-name { font-size: .72rem; }
  .tnr-name    { font-size: .7rem; }

  /* ── Task list: tighter cards ─────────────── */
  .task-card { padding: 8px 12px; }
  .tls-header { padding: 11px 14px; }

  /* ── Modal: full-width ───────────────────── */
  .modal { padding: 20px 16px; border-radius: 16px; }
  .form-row { grid-template-columns: 1fr; }
}

/* =============================================
   LOGOUT BUTTON (toolbar)
   ============================================= */
.btn-logout {
  margin-left: auto;
  padding: 7px 16px;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: #fff;
  color: #aaa;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .14s;
}
.btn-logout:hover { border-color: var(--pink); color: var(--pink); }

/* =============================================
   LOGIN OVERLAY
   ============================================= */
.login-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #fff0f8 0%, #f0f0ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.login-overlay.hidden { display: none; }

.login-card {
  background: #fff;
  border-radius: 28px;
  padding: 44px 40px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(196, 75, 201, .18);
  text-align: center;
}

.login-icon  { font-size: 3rem; margin-bottom: 10px; }
.login-title { font-size: 1.2rem; font-weight: 900; color: var(--purple); margin-bottom: 6px; }
.login-sub   { font-size: .82rem; color: #bbb; margin-bottom: 28px; }

#login-form .form-group { text-align: left; }

.login-error {
  font-size: .78rem;
  color: #ff6b6b;
  min-height: 18px;
  margin-bottom: 10px;
  text-align: left;
}

.btn-login {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(196, 75, 201, .32);
  transition: all .15s;
}
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(196, 75, 201, .42); }