/* ============================================================
   Bluey Assistant
   Dark UI · Claude palette × Apple Calendar / Things 3 structure
   Sidebar on desktop, bottom tabs on mobile
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg:          #1a1917;
  --bg-2:        #211f1d;
  --surface:     #262422;
  --surface-2:   #302d2a;
  --surface-3:   #3a3733;
  --hairline:    #423e39;

  --text:        #f3efe9;
  --text-2:      #b4aaa0;
  --text-3:      #7d756c;

  --accent:      #e8795a;
  --accent-soft: #e8795a22;
  --accent-deep: #c85f43;
  --danger:      #e05c5c;
  --green:       #67b26f;

  --radius:      20px;
  --radius-sm:   13px;
  --shadow:      0 8px 30px -10px rgba(0,0,0,.55);
  --ease:        cubic-bezier(.32,.72,0,1);

  --sidebar-w:   232px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bot:    env(safe-area-inset-bottom, 0px);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; background:var(--bg); }

body {
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 85% -8%, #2c2825 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 40%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   SHELL
   ============================================================ */
.shell { display:flex; min-height:100vh; }

.sidebar {
  display:none;
  width:var(--sidebar-w); flex-shrink:0;
  position:sticky; top:0; height:100vh;
  padding:26px 16px;
  border-right:1px solid var(--hairline);
  background:rgba(33,31,29,.5);
  flex-direction:column; gap:8px;
}
.brand { display:flex; align-items:center; gap:11px; padding:6px 10px 22px; }
.brand-mark {
  width:34px; height:34px; border-radius:9px;
  background:var(--accent); color:var(--bg);
  font-family:'Fraunces',serif; font-weight:600; font-size:20px;
  display:flex; align-items:center; justify-content:center;
}
.brand-name { font-family:'Fraunces',serif; font-weight:500; font-size:21px; }

.side-nav { display:flex; flex-direction:column; gap:3px; }
.nav-item {
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border:none; border-radius:11px;
  background:none; color:var(--text-2);
  font-family:inherit; font-size:14.5px; font-weight:600;
  cursor:pointer; transition:background .16s, color .16s;
}
.nav-item svg {
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.nav-item:hover { background:var(--surface); color:var(--text); }
.nav-item.active { background:var(--surface-2); color:var(--accent); }

.side-add {
  margin-top:auto;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:12px; border:none; border-radius:12px;
  background:var(--accent); color:var(--bg);
  font-family:inherit; font-size:14.5px; font-weight:700;
  cursor:pointer; transition:transform .12s;
}
.side-add:active { transform:scale(.97); }
.side-add .plus { font-size:18px; font-weight:400; }

.main { flex:1; min-width:0; max-width:880px; margin:0 auto; padding:0 20px; }

.panel { display:none; animation:fade .4s var(--ease); }
.panel.active { display:block; }
@keyframes fade { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
.pad { height:120px; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding:calc(var(--safe-top) + 34px) 4px 24px; }
.eyebrow {
  font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.hero-title {
  font-family:'Fraunces',serif; font-weight:500;
  font-size:34px; line-height:1.12; letter-spacing:-.01em;
}
.hero-title em { font-style:italic; color:var(--accent); }
.hero-sub { margin-top:12px; font-size:15px; color:var(--text-2); line-height:1.5; }

/* ============================================================
   CARDS / BLOCKS
   ============================================================ */
.card {
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.home-grid { display:flex; flex-direction:column; gap:26px; }
.home-side { display:flex; flex-direction:column; gap:20px; }
.cal-card { padding:18px 16px 14px; }
.block { margin-top:26px; }
.block-head {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:13px; padding:0 4px;
}
.block-head h2 { font-family:'Fraunces',serif; font-weight:500; font-size:21px; }
.block-note {
  font-size:13px; color:var(--text-3); line-height:1.5;
  margin:-6px 4px 13px;
}
.count { font-size:13px; font-weight:600; color:var(--text-3); }

/* ============================================================
   CALENDAR
   ============================================================ */
.cal-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; padding:0 4px;
}
.cal-month { font-family:'Fraunces',serif; font-weight:500; font-size:19px; }
.icon-btn {
  width:34px; height:34px; border:none; border-radius:50%;
  background:var(--surface-2); color:var(--text-2);
  font-size:19px; cursor:pointer;
  transition:background .16s, transform .12s;
}
.icon-btn:hover { background:var(--surface-3); color:var(--text); }
.icon-btn:active { transform:scale(.9); }

.weekdays { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; }
.weekdays span {
  text-align:center; padding:6px 0;
  font-size:11px; font-weight:700; color:var(--text-3);
}

.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cell {
  position:relative; aspect-ratio:1/1.05;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  border-radius:11px; cursor:pointer; transition:background .15s;
}
.cell.empty { cursor:default; }
.cell:not(.empty):hover { background:var(--surface-2); }
.cell-num {
  font-size:14.5px; font-weight:500; color:var(--text); line-height:1;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.cell.dim .cell-num { color:var(--text-3); }
.cell.today .cell-num {
  background:var(--accent); color:var(--bg); font-weight:700;
}
.cell.selected:not(.today) .cell-num {
  background:var(--accent-soft); color:var(--accent); font-weight:700;
}
/* a day carrying a tag or holiday */
.cell.has-tag .cell-num {
  box-shadow:inset 0 0 0 1.5px var(--surface-3);
}
.cell.today.has-tag .cell-num { box-shadow:none; }
/* unacknowledged auto-holiday */
.new-badge {
  position:absolute; top:3px; right:5px;
  font-size:9px; line-height:1; color:var(--accent);
}

.dots {
  position:absolute; bottom:5px;
  display:flex; gap:3px; height:5px; align-items:center;
}
.dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.dot-overflow {
  font-size:8px; font-weight:700; color:var(--text-3);
  line-height:1; margin-left:1px; flex-shrink:0;
}

/* ============================================================
   TAG STRIP
   ============================================================ */
.tag-strip {
  display:flex; flex-wrap:wrap; gap:7px;
  margin-bottom:12px;
}
.tag-strip:empty { display:none; }
.tag-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2);
  border:1px solid var(--hairline);
  border-radius:9px;
  padding:6px 11px;
  font-size:13px; font-weight:600;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.tag-chip:hover { background:var(--surface-3); }
.tag-chip .tc-emoji { font-size:13px; }
.tag-chip.holiday { cursor:default; color:var(--text-2); }
.tag-chip .tc-repeat { font-size:10px; color:var(--text-3); }

/* holiday keep/remove prompt */
.holiday-prompt { display:none; margin-bottom:14px; }
.holiday-prompt.show { display:block; animation:fade .3s var(--ease); }
.hp-card {
  background:var(--accent-soft);
  border:1px solid var(--accent);
  border-radius:var(--radius-sm);
  padding:14px 15px;
  margin-bottom:8px;
}
.hp-title { font-size:15px; font-weight:700; margin-bottom:3px; }
.hp-sub { font-size:13px; color:var(--text-2); margin-bottom:12px; }
.hp-actions { display:flex; gap:8px; }
.hp-btn {
  flex:1; border:none; border-radius:10px;
  padding:10px; font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; transition:transform .12s;
}
.hp-btn:active { transform:scale(.97); }
.hp-keep { background:var(--accent); color:var(--bg); }
.hp-remove {
  background:transparent; color:var(--text-2);
  border:1px solid var(--hairline);
}

/* ============================================================
   EVENTS
   ============================================================ */
.event-list { display:flex; flex-direction:column; gap:9px; }
.event-row {
  display:flex; align-items:center; gap:13px;
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius-sm); padding:13px 15px;
  cursor:pointer; animation:rowIn .4s var(--ease) both;
  transition:border-color .15s, transform .1s;
}
.event-row:hover { border-color:var(--surface-3); }
.event-row:active { transform:scale(.99); }
.event-bar { width:4px; align-self:stretch; border-radius:4px; flex-shrink:0; }
.event-info { flex:1; min-width:0; }
.event-name {
  font-size:15.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:5px;
}
.event-meta { font-size:13px; color:var(--text-2); margin-top:3px; }
.event-meta .loc { color:var(--text-3); font-style:italic; }
.event-meta .xday { color:var(--text-3); font-size:12px; }
.event-arrow { color:var(--text-3); font-size:18px; flex-shrink:0; }
.bell { font-size:11px; opacity:.75; }

@keyframes rowIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

.empty-state {
  text-align:center; padding:24px 16px;
  color:var(--text-3); font-size:14px;
  background:var(--surface); border:1px dashed var(--hairline);
  border-radius:var(--radius-sm);
}

.upcoming-countdown {
  font-size:12px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); padding:3px 9px; border-radius:8px;
  flex-shrink:0; white-space:nowrap;
}

/* ============================================================
   PAGE HEADS
   ============================================================ */
.page-head {
  padding:calc(var(--safe-top) + 34px) 4px 20px;
  display:flex; align-items:flex-end; justify-content:space-between;
}
.page-head h1 { font-family:'Fraunces',serif; font-weight:500; font-size:31px; }
.page-sub { margin-top:6px; font-size:14px; color:var(--text-2); }
.today-btn {
  border:1px solid var(--hairline); background:var(--surface);
  color:var(--text); font-family:inherit; font-size:13px; font-weight:600;
  padding:8px 16px; border-radius:10px; cursor:pointer;
  transition:background .15s;
}
.today-btn:hover { background:var(--surface-2); }

.cal-layout { display:flex; flex-direction:column; gap:20px; }
.timeline-card { padding:18px 16px; }
.timeline-label {
  font-family:'Fraunces',serif; font-weight:500; font-size:17px;
  margin-bottom:14px; padding-left:2px;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline-scroll {
  height:400px; overflow-y:auto; overflow-x:hidden;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
.timeline-scroll::-webkit-scrollbar { width:4px; }
.timeline-scroll::-webkit-scrollbar-track { background:transparent; }
.timeline-scroll::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:4px; }

.timeline { position:relative; padding-left:54px; padding-top:10px; }
.tl-hour { position:relative; height:54px; border-top:1px solid var(--hairline); }
.tl-hour::before {
  content:attr(data-label);
  position:absolute; left:-54px; top:-7px; width:46px;
  text-align:right; font-size:11px; font-weight:600; color:var(--text-3);
}
.tl-hour:last-child { border-bottom:1px solid var(--hairline); }
.tl-event {
  position:absolute; left:56px; right:6px;
  border-radius:9px; padding:7px 11px; overflow:hidden;
  cursor:pointer; z-index:2; transition:transform .1s;
}
.tl-event:active { transform:scale(.99); }
.tl-event .te-name {
  font-size:13.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tl-event .te-time { font-size:11.5px; color:var(--text-2); margin-top:1px; }
.tl-now {
  position:absolute; left:40px; right:6px;
  height:2px; background:var(--accent); z-index:5;
}
.tl-now::before {
  content:''; position:absolute; left:-5px; top:-3px;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
}
.tl-empty {
  position:absolute; top:40%; left:56px; right:6px;
  text-align:center; color:var(--text-3); font-size:14px;
}

/* ============================================================
   SETTINGS
   ============================================================ */
.set-card { padding:4px 16px; }
.set-row {
  display:flex; align-items:center; gap:14px;
  padding:15px 0; border-bottom:1px solid var(--hairline);
}
.set-row:last-child { border-bottom:none; }
.set-info { flex:1; min-width:0; }
.set-title { font-size:15px; font-weight:600; }
.set-sub { font-size:13px; color:var(--text-2); margin-top:2px; }
.btn-small {
  border:1px solid var(--hairline); border-radius:10px;
  background:var(--surface-2); color:var(--text);
  font-family:inherit; font-size:13.5px; font-weight:700;
  padding:9px 18px; cursor:pointer; flex-shrink:0;
  transition:background .15s, transform .12s;
}
.btn-small:hover { background:var(--surface-3); }
.btn-small:active { transform:scale(.96); }
.btn-small.on {
  background:var(--accent-soft); color:var(--accent);
  border-color:var(--accent);
}

/* queued notifications */
.queue-list { display:flex; flex-direction:column; gap:9px; }
.queue-row {
  display:flex; align-items:center; gap:13px;
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius-sm); padding:13px 15px;
}
.queue-info { flex:1; min-width:0; }
.queue-title { font-size:15px; font-weight:600; }
.queue-sub { font-size:12.5px; color:var(--text-2); margin-top:3px; }
.queue-badge {
  font-size:11px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); padding:3px 9px; border-radius:8px;
  flex-shrink:0; white-space:nowrap;
}

/* holiday manager */
.holiday-list { display:flex; flex-direction:column; }
.hol-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 6px; border-bottom:1px solid var(--hairline);
}
.hol-row:last-child { border-bottom:none; }
.hol-emoji { font-size:17px; width:24px; text-align:center; flex-shrink:0; }
.hol-info { flex:1; min-width:0; }
.hol-name { font-size:14.5px; font-weight:600; }
.hol-row.hidden-holiday .hol-name { color:var(--text-3); }
.hol-date { font-size:12px; color:var(--text-3); margin-top:2px; }
.hol-btn {
  width:32px; height:32px; flex-shrink:0;
  border:1px solid var(--hairline); border-radius:9px;
  background:var(--surface-2); color:var(--text-2);
  font-size:15px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, border-color .15s;
}
.hol-btn:hover { background:var(--surface-3); }
.hol-btn.active-keep {
  background:var(--accent-soft); color:var(--accent); border-color:var(--accent);
}
.hol-btn.active-hide {
  background:#3a1d1d; color:var(--danger); border-color:var(--danger);
}

/* ============================================================
   MOBILE TABS + FAB
   ============================================================ */
.tabbar {
  display:flex; position:fixed; bottom:0; left:0; right:0;
  height:calc(64px + var(--safe-bot)); padding-bottom:var(--safe-bot);
  background:rgba(26,25,23,.85);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-top:1px solid var(--hairline); z-index:35;
}
.tab-btn {
  flex:1; background:none; border:none;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  color:var(--text-3); cursor:pointer; transition:color .16s;
}
.tab-btn svg {
  width:23px; height:23px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.tab-btn span { font-size:10.5px; font-weight:600; }
.tab-btn.active { color:var(--accent); }

.fab {
  position:fixed; right:20px; bottom:calc(var(--safe-bot) + 82px);
  width:56px; height:56px; border:none; border-radius:50%;
  background:var(--accent); color:var(--bg);
  font-size:29px; font-weight:300; line-height:1; cursor:pointer;
  box-shadow:0 10px 26px -6px rgba(232,121,90,.55);
  z-index:34; transition:transform .15s var(--ease);
}
.fab:active { transform:scale(.88); }

/* ============================================================
   SHEETS
   ============================================================ */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:50;
  opacity:0; pointer-events:none; transition:opacity .28s var(--ease);
  display:flex; align-items:flex-end; justify-content:center;
}
.overlay.open { opacity:1; pointer-events:auto; }

.sheet {
  width:100%; max-width:520px;
  background:var(--surface);
  border-radius:26px 26px 0 0; border-top:1px solid var(--hairline);
  padding:10px 22px calc(26px + var(--safe-bot));
  transform:translateY(100%); transition:transform .36s var(--ease);
  max-height:92vh; overflow-y:auto;
}
.overlay.open .sheet { transform:translateY(0); }

.grip {
  width:38px; height:5px; background:var(--surface-3);
  border-radius:3px; margin:4px auto 14px;
}
.sheet-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; padding-top:4px;
}
.sheet-title {
  font-family:'Fraunces',serif; font-weight:500; font-size:22px;
  margin-bottom:0; padding:0 2px;
}
.close-btn {
  width:32px; height:32px; border:none; border-radius:50%;
  background:var(--surface-2); color:var(--text-2);
  font-size:14px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.close-btn:hover { background:var(--surface-3); color:var(--text); }

/* picker */
.picker-grid { display:flex; flex-direction:column; gap:10px; padding-bottom:6px; }
.picker-opt {
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  border:1px solid var(--hairline); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text);
  padding:17px 18px; cursor:pointer; text-align:left;
  font-family:inherit;
  transition:background .15s, border-color .15s, transform .12s;
}
.picker-opt:hover { background:var(--surface-3); border-color:var(--surface-3); }
.picker-opt:active { transform:scale(.99); }
.picker-icon { font-size:22px; margin-bottom:4px; }
.picker-name { font-size:16px; font-weight:700; }
.picker-desc { font-size:13px; color:var(--text-2); }

/* form bits */
.lbl {
  font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3);
  margin:14px 2px 7px; display:block;
}
.opt { font-weight:500; text-transform:none; letter-spacing:0; opacity:.7; }

.inp {
  width:100%; background:var(--bg);
  border:1px solid var(--hairline); border-radius:12px;
  padding:13px 14px; font-family:inherit; font-size:16px;
  color:var(--text); color-scheme:dark;
  transition:border-color .16s;
}
.inp:focus { outline:none; border-color:var(--accent); }
.inp::placeholder { color:var(--text-3); }

.name-color-row { display:flex; gap:10px; align-items:center; }
.name-color-row .inp { flex:1; }
.color-swatch, .emoji-swatch {
  width:42px; height:42px; flex-shrink:0;
  border-radius:12px; border:2px solid var(--hairline);
  cursor:pointer; transition:transform .12s;
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
}
.color-swatch { background:var(--accent); }
.emoji-swatch { background:var(--surface-2); }
.color-swatch:active, .emoji-swatch:active { transform:scale(.9); }

.color-picker, .emoji-picker {
  display:none; gap:8px;
  margin-top:10px; padding:12px;
  background:var(--bg); border:1px solid var(--hairline);
  border-radius:13px; animation:fade .22s var(--ease);
}
.color-picker { grid-template-columns:repeat(8,1fr); }
.emoji-picker { grid-template-columns:repeat(8,1fr); }
.color-picker.open, .emoji-picker.open { display:grid; }
.color-dot {
  aspect-ratio:1; border-radius:50%; cursor:pointer;
  border:2px solid transparent;
  transition:transform .12s, border-color .12s;
}
.color-dot:active { transform:scale(.85); }
.color-dot.selected { border-color:#fff; transform:scale(1.1); }
.emoji-opt {
  aspect-ratio:1; border-radius:9px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; background:transparent;
  border:1px solid transparent;
  transition:background .12s, border-color .12s;
}
.emoji-opt:hover { background:var(--surface-2); }
.emoji-opt.selected { border-color:var(--accent); background:var(--accent-soft); }

.time-row {
  display:flex; flex-direction:column; gap:0;
  margin-top:14px;
}
.time-row .col { min-width:0; }
.time-row .col .lbl { margin-top:0; margin-bottom:7px; }
.time-row .col + .col .lbl { margin-top:14px; }
@media (min-width:500px) {
  .time-row { flex-direction:row; gap:11px; }
  .time-row .col { flex:1; }
  .time-row .col + .col .lbl { margin-top:0; }
}

.event-preview {
  display:none; margin-top:10px; padding:11px 14px;
  background:var(--bg); border:1px solid var(--hairline);
  border-radius:11px; font-size:13.5px; color:var(--text-2);
  animation:fade .22s var(--ease);
}
.event-preview.show { display:block; }
.event-preview.error { border-color:var(--accent-deep); color:var(--accent); }
.event-preview b { color:var(--text); font-weight:600; }

/* toggle switch */
.toggle-row {
  display:flex; align-items:center; gap:14px;
  margin-top:20px; padding:14px 0 0;
  border-top:1px solid var(--hairline);
}
.toggle-info { flex:1; min-width:0; }
.toggle-title { font-size:15px; font-weight:600; }
.toggle-sub { font-size:12.5px; color:var(--text-2); margin-top:2px; }
.switch {
  width:50px; height:30px; flex-shrink:0;
  border:none; border-radius:15px;
  background:var(--surface-3); cursor:pointer;
  position:relative; padding:0;
  transition:background .22s var(--ease);
}
.switch .knob {
  position:absolute; top:3px; left:3px;
  width:24px; height:24px; border-radius:50%;
  background:var(--text-2);
  transition:transform .22s var(--ease), background .22s;
}
.switch[aria-checked="true"] { background:var(--accent); }
.switch[aria-checked="true"] .knob {
  transform:translateX(20px); background:var(--bg);
}

.lead-grid {
  display:none; grid-template-columns:repeat(5,1fr); gap:8px;
  margin-top:14px; animation:fade .22s var(--ease);
}
.lead-grid.open { display:grid; }
.lead-opt {
  border:1px solid var(--hairline); border-radius:11px;
  background:var(--surface-2); color:var(--text-2);
  font-family:inherit; font-size:13px; font-weight:700;
  padding:11px 4px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.lead-opt:hover { background:var(--surface-3); }
.lead-opt.selected {
  background:var(--accent-soft); color:var(--accent); border-color:var(--accent);
}

.sheet-actions { display:flex; gap:10px; margin-top:22px; }
.btn-primary {
  flex:1; background:var(--accent); color:var(--bg);
  border:none; border-radius:13px; padding:15px;
  font-family:inherit; font-size:16px; font-weight:700; cursor:pointer;
  transition:transform .12s, opacity .16s;
}
.btn-primary:active { transform:scale(.98); }
.btn-primary:disabled { opacity:.35; cursor:not-allowed; }
.btn-ghost {
  background:none; border:1px solid var(--accent-deep); color:var(--accent);
  border-radius:13px; padding:15px 22px;
  font-family:inherit; font-size:15px; font-weight:600; cursor:pointer;
  transition:background .15s;
}
.btn-ghost:hover { background:var(--accent-soft); }

/* ============================================================
   EVENT DETAILS
   ============================================================ */
.detail-sheet { max-height:80vh; overflow-y:auto; }
.detail-rows { display:flex; flex-direction:column; }
.detail-row {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 2px; border-bottom:1px solid var(--hairline);
}
.detail-row:last-child { border-bottom:none; }
.detail-icon {
  width:34px; height:34px; border-radius:9px;
  background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.detail-content { flex:1; min-width:0; }
.detail-label {
  font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:3px;
}
.detail-value { font-size:15.5px; font-weight:500; color:var(--text); }
.detail-value.muted { color:var(--text-3); font-size:14px; }
.detail-value.accent { color:var(--accent); font-weight:600; font-size:14.5px; }

/* ============================================================
   NOTIFICATION CONFIRM
   ============================================================ */
.confirmnote-sheet { text-align:center; padding-bottom:30px; }
.confirmnote-icon {
  width:62px; height:62px; margin:6px auto 16px;
  border-radius:50%; background:var(--accent);
  color:var(--bg); font-size:31px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  animation:pop .4s var(--ease);
}
@keyframes pop { from{transform:scale(.5);opacity:0;} to{transform:scale(1);opacity:1;} }
.confirmnote-title {
  font-family:'Fraunces',serif; font-weight:500; font-size:24px;
  margin-bottom:8px;
}
.confirmnote-sub {
  font-size:14.5px; color:var(--text-2); line-height:1.55;
  margin-bottom:24px; padding:0 10px;
}

/* ============================================================
   CONFIRM DIALOG
   ============================================================ */
.confirm-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:70;
  opacity:0; pointer-events:none; transition:opacity .24s var(--ease);
  display:flex; align-items:flex-end; justify-content:center;
}
.confirm-overlay.open { opacity:1; pointer-events:auto; }
.confirm-box {
  width:100%; max-width:520px; background:var(--surface);
  border-radius:26px 26px 0 0; border-top:1px solid var(--hairline);
  padding:22px 22px calc(32px + var(--safe-bot));
  transform:translateY(100%); transition:transform .32s var(--ease);
}
.confirm-overlay.open .confirm-box { transform:translateY(0); }
.confirm-title {
  font-family:'Fraunces',serif; font-weight:500; font-size:20px; margin-bottom:6px;
}
.confirm-sub { font-size:14px; color:var(--text-2); margin-bottom:22px; line-height:1.5; }
.confirm-actions { display:flex; flex-direction:column; gap:10px; }
.btn-danger {
  width:100%; border:none; border-radius:13px;
  background:#c0392b; color:#fff;
  font-family:inherit; font-size:16px; font-weight:700;
  padding:15px; cursor:pointer; transition:transform .12s;
}
.btn-danger:active { transform:scale(.98); }
.confirm-cancel {
  width:100%; border:none; border-radius:13px;
  background:var(--surface-2); color:var(--text);
  font-family:inherit; font-size:16px; font-weight:600;
  padding:15px; cursor:pointer; transition:background .15s;
}
.confirm-cancel:hover { background:var(--surface-3); }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position:fixed; bottom:calc(var(--safe-bot) + 84px); left:50%;
  transform:translate(-50%,24px);
  background:var(--surface-3); color:var(--text);
  font-size:14px; font-weight:600; padding:12px 20px;
  border-radius:12px; border:1px solid var(--hairline);
  box-shadow:var(--shadow); z-index:80;
  opacity:0; pointer-events:none;
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.toast.show { opacity:1; transform:translate(-50%,0); }

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width:860px) {
  .sidebar { display:flex; }
  .tabbar, .fab { display:none; }
  .main { padding:0 40px; max-width:920px; }
  .pad { height:60px; }
  .hero, .page-head { padding-top:46px; }

  .home-grid {
    display:grid; grid-template-columns:1.1fr .9fr;
    gap:22px; align-items:start;
  }
  .home-grid .block { margin-top:0; }

  .cal-layout {
    display:grid; grid-template-columns:340px 1fr;
    gap:24px; align-items:start;
  }

  .overlay { align-items:center; }
  .sheet {
    border-radius:22px; max-width:460px;
    transform:scale(.94); border:1px solid var(--hairline);
  }
  .overlay.open .sheet { transform:scale(1); }
  .grip { display:none; }

  .confirm-overlay { align-items:center; }
  .confirm-box {
    border-radius:22px; max-width:400px;
    transform:scale(.94); border:1px solid var(--hairline);
  }
  .confirm-overlay.open .confirm-box { transform:scale(1); }

  .toast { bottom:32px; }
}

@media (min-width:1200px) { .main { max-width:1040px; } }