:root{
  --bg:#08101f;--bg2:#10203e;--panel:rgba(18,29,55,.96);--panel2:rgba(25,40,74,.99);
  --text:#eef3ff;--muted:#a8b8df;--line:rgba(255,255,255,.08);--primary:#59b7ff;--primary2:#8ad0ff;
  --success:#77e1bc;--warning:#ffd166;--danger:#ff6b81;--shadow:0 18px 50px rgba(0,0,0,.28)
}
body.theme-midnight{--bg:#080c16;--bg2:#151d31;--primary:#91a9ff;--primary2:#b7c7ff}
body.theme-mint{--bg:#081915;--bg2:#14322b;--primary:#71d7c1;--primary2:#b5f1e5}
body.theme-sunset{--bg:#1a1011;--bg2:#381b22;--primary:#ff9f7a;--primary2:#ffcab1}
body.theme-lavender{--bg:#110d22;--bg2:#2a2152;--primary:#b89cff;--primary2:#d8c9ff}
body.theme-forest{--bg:#08140f;--bg2:#183527;--primary:#79d39f;--primary2:#b7f0cb}
body.theme-rose{--bg:#1a0d16;--bg2:#3b1830;--primary:#ff8fbc;--primary2:#ffc5dc}
body.theme-ember{--bg:#1a1208;--bg2:#3f2914;--primary:#ffb15e;--primary2:#ffd3a3}
body.theme-ice{--bg:#0b1720;--bg2:#183447;--primary:#7fd7ff;--primary2:#c8f0ff}
*{box-sizing:border-box}
html{min-height:100%;background:linear-gradient(180deg,var(--bg),var(--bg2));overscroll-behavior-y:none}
body{margin:0;min-height:100vh;font-family:Inter,system-ui,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
select{background-color:#16284a !important;color:var(--text) !important}
select option{background:#16284a;color:#eef3ff}
.page{max-width:1480px;margin:0 auto;padding:18px 18px 28px;min-height:100vh}
.hero,.card,.modal-card,.site-footer{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}
.hero{padding:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.brand{display:flex;gap:16px;align-items:center}
.brand img{width:92px;height:92px;border-radius:24px;object-fit:cover;background:#59b7ff;padding:6px;box-shadow:var(--shadow)}
.hero h1{margin:0;font-size:2.45rem}
.row,.theme-row,.tabbar,.day-bar,.calendar-controls,.auth-mode-row,.mode-tabs,.duration-row,.week-stats-list{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.right-row{justify-content:flex-end}
.stack{display:flex;flex-direction:column;gap:10px}
.card{padding:18px}
.card h2{margin:0 0 12px;font-size:1.22rem}
.card h3{margin:0 0 8px;font-size:1rem}
.card-spaced{margin-top:8px}
.section-head{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.section-mini{margin-bottom:8px}
.grid2,.grid3,.stats-grid,.profile-grid,.detail-grid,.calendar-layout,.profile-layout,.layout{display:grid;gap:18px}
.layout{grid-template-columns:390px 1fr}
.calendar-layout,.profile-layout{grid-template-columns:1fr}
.grid2{grid-template-columns:1fr 1fr;gap:10px}
.grid3{grid-template-columns:repeat(3,1fr);gap:10px}
.stats-grid{grid-template-columns:repeat(4,1fr);gap:10px}
.profile-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.detail-grid{grid-template-columns:repeat(3,1fr);gap:10px}
input,select,textarea{width:100%;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.055);color:var(--text);outline:none}
textarea{min-height:120px;resize:vertical}
label{display:block;font-size:.86rem;color:var(--muted);margin-bottom:6px}
button{border:none;border-radius:16px;padding:12px 14px;min-height:46px;font-weight:800;background:var(--primary);color:#071120}
button.secondary,.auth-mode-btn,.mode-btn{background:rgba(255,255,255,.08);color:var(--text)}
.auth-mode-btn.active,.mode-btn.active,.theme-chip.active,.tab-btn.active,.day-chip.active{background:var(--primary);color:#061221}
button.danger{background:var(--danger);color:white}
.hidden{display:none !important}
.status{margin:0;font-weight:700}
.status.ok{color:var(--success)} .status.warn{color:var(--warning)} .status.muted{color:var(--muted)}
.theme-chip,.day-chip,.month-pill,.selector-card,.metric-card,.profile-item,.stat-box,.timeline-row,.list-card,.calendar-event,.insight,.week-stat{
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03)
}
.level-badge{font-weight:900;color:#071120;background:var(--primary);padding:8px 12px;border-radius:999px}
.tabbar{padding:12px 14px;margin-bottom:18px}
.tab-btn,.day-chip,.theme-chip{border:none;padding:12px 14px}
.timeline,.task-list,.insight-list,.calendar-day-detail{display:flex;flex-direction:column;gap:10px}
.timeline-row{display:grid;grid-template-columns:86px 1fr auto;gap:12px;align-items:start;padding:14px}
.time{color:#b7cdff;font-weight:800}
.small{font-size:.86rem;color:var(--muted)}
.small-stat{font-size:1.15rem !important}
.empty{color:var(--muted);padding:10px 0}
.stat-box,.profile-item,.metric-card,.selector-card{padding:14px}
.stat-label{display:block;color:var(--muted);font-size:.84rem;margin-bottom:6px}
.stat-value{font-size:1.55rem;font-weight:900}
.metric-value,.profile-value{font-size:1.15rem;font-weight:800}
.bar-row{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;margin-top:10px}
.bar-bg,.progress-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);overflow:hidden}
.bar-fill,.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2))}
.list-card{padding:14px;display:grid;grid-template-columns:1fr auto;gap:14px}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:.8rem}
.site-footer{margin:20px 0 8px;padding:18px 20px;color:var(--muted);text-align:center;font-weight:600}
.site-footer a{color:var(--primary2);text-decoration:none;font-weight:800}
.site-footer a:hover{text-decoration:underline}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.56);display:none;align-items:center;justify-content:center;padding:18px;z-index:30}
.modal.show{display:flex}
.modal-card{width:min(860px,100%);padding:22px;max-height:90vh;overflow:auto}
.calendar-shell{display:flex;flex-direction:column;gap:14px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.calendar-weekday{font-size:.82rem;color:var(--muted);text-align:center;padding-bottom:4px}
.calendar-cell{border:1px solid var(--line);border-radius:18px;min-height:126px;padding:10px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:left}
.calendar-cell.muted-cell{opacity:.42}
.calendar-cell.selected{outline:2px solid var(--primary)}
.calendar-date-row{display:flex;justify-content:space-between;align-items:center}
.calendar-date{font-weight:800}
.calendar-dot-wrap{display:flex;gap:5px;flex-wrap:wrap}
.calendar-dot{width:9px;height:9px;border-radius:50%;background:var(--primary)}
.calendar-summary{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.8rem}
.profile-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.profile-header img{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.06);padding:4px}
.week-stat{padding:14px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}
.toggle-wrap{display:flex;flex-direction:column;justify-content:flex-end}
.toggle-pill.off{background:rgba(255,255,255,.08);color:var(--text)}
.toggle-pill.on{background:var(--primary);color:#071120}
.time-card{border:1px solid var(--line);border-radius:20px;padding:12px;background:rgba(255,255,255,.06)}
.time-select-row{display:grid;grid-template-columns:1fr auto 1fr 1fr;gap:8px;align-items:center}
.time-select-row select{text-align:center;font-weight:800;font-size:1rem;min-height:52px;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.18)!important}
.time-sep{font-size:1.35rem;font-weight:900;color:var(--primary2);padding:0 2px}
.duration-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.toast{position:fixed;right:18px;bottom:18px;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);padding:12px 14px;border-radius:16px;box-shadow:var(--shadow);display:none;z-index:40}
.toast.show{display:block}
.check-row{display:flex;align-items:center;gap:8px;color:var(--muted)}
.check-row input{width:auto}
#profileUsername{color:var(--muted)}
@media (max-width:1100px){.layout,.calendar-layout,.profile-layout{grid-template-columns:1fr}}
@media (max-width:760px){
  .grid2,.grid3,.stats-grid,.profile-grid,.detail-grid,.calendar-grid{grid-template-columns:1fr}
  .timeline-row,.list-card,.bar-row,.week-stat{grid-template-columns:1fr}
  .brand{align-items:flex-start}
  .brand img{width:76px;height:76px}
}


/* V56: overlaps, timer, and date/window polish */
.layout{grid-template-columns:440px 1fr;align-items:start}
.left,.right{display:flex;flex-direction:column;gap:18px;min-width:0}
.day-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:12px;align-items:stretch}
.week-nav-row{justify-content:flex-end}
.warning-list{display:flex;flex-direction:column;gap:10px}
.warning-item{padding:14px;border:1px solid rgba(255,209,102,.22);border-radius:16px;background:rgba(255,209,102,.08)}
.warning-inline{color:var(--warning);font-weight:800;margin-top:6px}
.tag-warn{background:rgba(255,209,102,.14);border-color:rgba(255,209,102,.28);color:#ffe4a3}
.conflict-card,.conflict-row{box-shadow:inset 0 0 0 1px rgba(255,209,102,.18)}
.timer-card-shell .row{margin-top:10px}
.timer-task-name{font-size:1rem;font-weight:800;color:var(--text)}
.timer-value{font-size:2rem;font-weight:900;letter-spacing:.04em;margin:6px 0 4px}
.time-inline,.tracked-inline{display:block;margin-top:6px}
.task-action-row{justify-content:flex-end;align-items:flex-start}
#eventConflictPreview,#taskConflictPreview{margin-top:2px}
.time{min-width:92px;font-size:.95rem;line-height:1.2}
.theme-row{gap:10px}
.time-select-row select{color:#eef3ff;background:#24385f;border:1px solid rgba(255,255,255,.22);padding-right:36px}
.time-select-row{grid-template-columns:minmax(68px,1fr) auto minmax(78px,1fr) minmax(74px,1fr)}
@media (max-width:1200px){.layout{grid-template-columns:1fr}.week-nav-row{justify-content:flex-start}}
@media (max-width:760px){.week-nav-row,.task-action-row{justify-content:stretch}.task-action-row>button,.week-nav-row>button{width:100%}}


/* V60 task timer UX */
.timer-card-shell.hidden{display:none !important;}
.timer-task-name{font-size:1.05rem;font-weight:800;margin-bottom:6px;}
.timer-value{font-variant-numeric:tabular-nums;}


/* V62 broad polish / spacing pass */
.page{
  max-width: 1520px;
  padding: 22px 22px 30px;
}

.hero{
  padding: 24px;
  gap: 22px;
}

.hero-actions{
  gap: 12px;
}

.layout{
  grid-template-columns: minmax(420px, 470px) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.left,
.right{
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

#plannerTab .card,
#calendarTab .card,
#profileTab .card{
  padding: 20px;
}

.row,
.theme-row,
.tabbar,
.day-bar,
.calendar-controls,
.auth-mode-row,
.mode-tabs,
.duration-row,
.week-stats-list{
  gap: 12px;
}

button{
  min-height: 50px;
  padding: 13px 16px;
}

.tabbar{
  padding: 14px 16px;
  gap: 14px;
}

.tab-btn,
.theme-chip,
.day-chip,
.mode-btn,
.auth-mode-btn{
  min-width: 112px;
}

.section-head{
  gap: 14px;
  align-items: flex-start;
}

.section-head .row{
  gap: 12px;
}

.grid2,
.grid3,
.stats-grid,
.profile-grid,
.detail-grid{
  gap: 14px;
}

#eventPane,
#taskPane,
#editEventPane,
#editTaskPane{
  min-width: 0;
  gap: 14px;
}

#eventPane > .grid3,
#taskPane > .grid3,
#editEventPane > .grid3,
#editTaskPane > .grid3{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#eventPane > .grid3 > :last-child,
#taskPane > .grid3 > :last-child,
#editEventPane > .grid3 > :last-child,
#editTaskPane > .grid3 > :last-child{
  grid-column: 1 / -1;
}

#eventPane > .grid2,
#taskPane > .grid2,
#taskTimeframeFields,
#editEventPane > .grid2,
#editTaskPane > .grid2,
#editTaskTimeframeFields{
  grid-template-columns: 1fr !important;
  gap: 12px;
}

.time-card{
  min-width: 0;
  width: 100%;
  padding: 14px;
}

.time-select-row{
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(66px, 1fr) auto minmax(76px, 1fr) minmax(72px, 1fr) !important;
  gap: 8px;
}

.time-select-row select{
  min-width: 0;
  width: 100%;
  padding: 0 12px !important;
  font-size: 1rem !important;
  text-align: left !important;
}

#eventTitle,
#taskTitle,
#editEventTitle,
#editTaskTitle{
  min-height: 54px;
}

.week-nav-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  width: 100%;
}

.day-bar{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
  width: 100%;
}

.day-chip{
  width: 100%;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

.stats-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.list-card{
  gap: 16px;
  padding: 16px;
}

.list-card .row,
.task-action-row{
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.timeline-row,
.selector-card,
.metric-card,
.profile-item,
.stat-box,
.week-stat,
.calendar-event,
.insight{
  padding: 16px;
}

.profile-theme-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.profile-theme-row .theme-chip{
  width: 100%;
  min-width: 0;
}

#profileTab .row[style*="margin-top:14px"]{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.modal-card{
  width: min(920px, 100%);
}

.modal-card .row[style*="margin-top:16px"]{
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 1280px){
  .layout{
    grid-template-columns: minmax(380px, 430px) minmax(0, 1fr);
  }
}

@media (max-width: 1100px){
  .layout,
  .calendar-layout,
  .profile-layout{
    grid-template-columns: 1fr;
  }

  .week-nav-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .page{
    padding: 16px 16px 24px;
  }

  .grid2,
  .grid3,
  .stats-grid,
  .profile-grid,
  .detail-grid,
  .calendar-grid,
  #eventPane > .grid3,
  #taskPane > .grid3,
  #editEventPane > .grid3,
  #editTaskPane > .grid3{
    grid-template-columns: 1fr !important;
  }

  #eventPane > .grid3 > :last-child,
  #taskPane > .grid3 > :last-child,
  #editEventPane > .grid3 > :last-child,
  #editTaskPane > .grid3 > :last-child{
    grid-column: auto;
  }

  .tabbar,
  .mode-tabs,
  .auth-mode-row{
    flex-direction: column;
    align-items: stretch;
  }

  .tabbar > button,
  .mode-tabs > button,
  .auth-mode-row > button{
    width: 100%;
  }

  .week-nav-row,
  .day-bar,
  #profileTab .row[style*="margin-top:14px"]{
    grid-template-columns: 1fr;
  }

  .list-card{
    grid-template-columns: 1fr;
  }

  .list-card .row,
  .task-action-row,
  .modal-card .row[style*="margin-top:16px"]{
    justify-content: stretch;
  }

  .list-card .row > button,
  .task-action-row > button,
  .modal-card .row[style*="margin-top:16px"] > button{
    width: 100%;
  }
}