/* ================================================================
   OroDrive — LEAD PAGE styles (route: #/deal/:id).
   Loaded after crm.css. Only NEW classes live here; shared grammar
   (.dsec, .badge, .btn, .input, .modal/.dialog, .icon-btn, .copy-btn,
   .field, .toast) is reused from crm.css. The .dsec visual upgrade is
   SCOPED under .lead-grid so it can't affect the shared .dsec used by
   the Settings/Users views. No emoji — all glyphs are inline SVG.
   ================================================================ */

@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- header row ---- */
.lead-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.lead-head__back {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 10px;
  border: 1.5px solid var(--border-soft); border-radius: 10px; background: var(--surface);
  color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s var(--ease-spring);
  margin-top: 4px;
}
.lead-head__back .ico { width: 15px; height: 15px; }
.lead-head__back:hover { color: var(--blue); border-color: var(--blue-light); background: #fff; transform: translateX(-2px); }
.lead-head__id { min-width: 0; flex: 1; }
.lead-head__crumb { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 1px; }
.lead-head__title { font-size: 25px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; text-wrap: balance; }
.lead-badges { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.lead-badges .badge { font-size: 12px; padding: 4px 11px; }
.owner-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 4px;
  border: 1px solid var(--border-soft); border-radius: 99px; background: var(--surface);
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.owner-chip__avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--blue-light), var(--blue)); color: #fff;
  font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
.lead-value { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; background: rgba(39,62,212,.07); border: 1px solid rgba(39,62,212,.14); border-radius: 99px; padding: 4px 12px; }
.lead-value .ico { width: 13px; height: 13px; }
.lead-actions { display: flex; align-items: center; gap: 9px; position: relative; margin-top: 2px; }

/* ---- kebab menu ---- */
.menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 90;
  min-width: 224px; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; animation: menuIn .18s var(--ease-out);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }
.menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border: none; background: none; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; color: var(--ink); transition: background .13s ease, color .13s ease;
}
.menu__item .ico { width: 16px; height: 16px; color: var(--muted); }
.menu__item:hover { background: var(--tint); }
.menu__item:hover .ico { color: var(--blue); }
.menu__item--danger { color: var(--red); }
.menu__item--danger .ico { color: var(--red); }
.menu__item--danger:hover { background: var(--red-tint); }
.menu__chev { margin-left: auto; width: 14px !important; height: 14px !important; transition: transform .2s var(--ease-out); }
.menu__item.is-open .menu__chev { transform: rotate(180deg); }
.menu__sub { overflow: hidden; max-height: 0; transition: max-height .28s var(--ease-out); }
.menu__sub.is-open { max-height: 280px; overflow-y: auto; }
.menu__sub-inner { padding: 4px 4px 6px; display: flex; flex-direction: column; gap: 2px; }
.menu__member {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; border: none; background: none; border-radius: 8px; font-size: 13px; transition: background .13s ease;
}
.menu__member:hover { background: var(--tint); }
.menu__member .owner-chip__avatar { width: 26px; height: 26px; font-size: 11.5px; }
.menu__member small { color: var(--faint); font-size: 11px; margin-left: auto; }
.menu__member .ico { width: 15px; height: 15px; color: var(--green); margin-left: auto; }
.menu__rule { height: 1px; background: var(--tint-2); margin: 5px 6px; }

/* ---- closed banner (won / lost) ---- */
.closed-banner { display: flex; align-items: center; gap: 13px; padding: 13px 17px; margin-bottom: 14px; border-radius: var(--radius); animation: riseIn .35s var(--ease-out); }
.closed-banner--won { background: var(--green-tint); border: 1px solid rgba(14,124,79,.22); }
.closed-banner--lost { background: var(--red-tint); border: 1px solid rgba(192,49,61,.2); }
.closed-banner__ico { width: 38px; height: 38px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: var(--shadow-sm); }
.closed-banner--won .closed-banner__ico { color: var(--green); }
.closed-banner--lost .closed-banner__ico { color: var(--red); }
.closed-banner__ico .ico { width: 19px; height: 19px; }
.closed-banner__text { flex: 1; min-width: 0; }
.closed-banner__title { font-size: 14px; font-weight: 700; }
.closed-banner--won .closed-banner__title { color: var(--green); }
.closed-banner--lost .closed-banner__title { color: var(--red); }
.closed-banner__sub { font-size: 12.5px; color: var(--muted); }
.closed-banner .btn { flex: none; background: #fff; }

/* ---- stage chevron bar ---- */
.stage-bar-wrap { margin-bottom: 18px; }
.stage-bar { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 2px; margin: -2px; }
.stage-bar::-webkit-scrollbar { display: none; }
.stage-bar.is-locked { opacity: .55; pointer-events: none; }
.stage-seg {
  flex: 1 1 0; min-width: 128px; border: none; text-align: left;
  padding: 8px 12px 8px 24px; scroll-snap-align: start;
  background: var(--surface); color: var(--muted);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%);
  filter: drop-shadow(0 1px 2px rgba(11,11,14,.08));
  transition: background .18s ease, color .18s ease, filter .18s ease;
  display: flex; flex-direction: column; gap: 1px; line-height: 1.3; position: relative;
}
.stage-seg:first-child { clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); border-radius: 10px 0 0 10px; padding-left: 15px; }
.stage-seg:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 13px 50%); border-radius: 0 10px 10px 0; }
.stage-seg:only-child { clip-path: none; border-radius: 10px; }
.stage-seg__name { font-size: 12.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-seg__days { font-size: 11px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.stage-seg:hover { background: var(--tint); color: var(--blue); filter: drop-shadow(0 2px 5px rgba(39,62,212,.18)); }
.stage-seg:hover .stage-seg__days { color: var(--blue); }
.stage-seg:focus-visible { outline: none; }
.stage-seg:focus-visible .stage-seg__name { text-decoration: underline; text-underline-offset: 2px; }
.stage-seg.is-done { background: rgba(39,62,212,.1); color: var(--blue); }
.stage-seg.is-done .stage-seg__days { color: rgba(39,62,212,.75); }
.stage-seg.is-done:hover { background: rgba(39,62,212,.16); }
.stage-seg.is-current { background: linear-gradient(135deg, #3149E2, var(--blue) 70%); color: #fff; filter: drop-shadow(0 4px 10px rgba(39,62,212,.4)); }
.stage-seg.is-current .stage-seg__days { color: rgba(255,255,255,.85); }
.stage-seg.is-current:hover { background: linear-gradient(135deg, #3D55EA, var(--blue-hover) 70%); color: #fff; }
/* future/unreached stages: give them clear definition (owner: "too white") */
.stage-seg.is-future { background: var(--tint); color: var(--faint); border: 1px solid var(--border); box-shadow: inset 0 0 0 1px var(--border-soft); }
.stage-seg.is-future .stage-seg__name { color: var(--muted); }
.stage-seg.is-future:hover { background: #fff; color: var(--blue); border-color: var(--blue-light); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: livePulse 2.2s ease-in-out infinite; }
  @keyframes livePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); } 50% { box-shadow: 0 0 0 4px rgba(255,255,255,0); } }
}

/* ---- page grid ---- */
.lead-grid {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(300px, 348px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "rail actions" "rail timeline";
}
.lead-rail { grid-area: rail; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.quickbar { grid-area: actions; }
.timeline-card { grid-area: timeline; }
@media (max-width: 1024px) {
  .lead-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "actions" "rail" "timeline"; }
}

/* ---- lead-page detail cards: upgrade .dsec ONLY inside .lead-grid ---- */
.lead-grid .dsec { animation: riseIn .4s var(--ease-out) backwards; }
.lead-rail .dsec:nth-child(2) { animation-delay: .06s; }
.lead-grid .dsec__head { background: linear-gradient(180deg, var(--tint), rgba(247,247,249,.4)); }

/* ---- detail rows ---- */
.drow { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--tint); align-items: flex-start; font-size: 13.5px; }
.drow:last-child { border-bottom: none; }
.drow > .ico { width: 16px; height: 16px; color: var(--blue); margin-top: 2px; flex: none; }
.drow__label { color: var(--faint); font-size: 12px; width: 82px; flex: none; padding-top: 1px; }
.drow__value { font-weight: 500; min-width: 0; overflow-wrap: anywhere; flex: 1; }
.drow__value--mono { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace; font-size: 12.5px; letter-spacing: .01em; }
.drow--edit .drow__value { cursor: pointer; border-radius: 7px; padding: 1px 6px; margin: -1px -6px; transition: background .15s ease, box-shadow .15s ease; }
.drow--edit:not(.is-editing) .drow__value:hover { background: rgba(39,62,212,.06); box-shadow: inset 0 0 0 1px rgba(39,62,212,.14); }
.drow__pencil { width: 26px; height: 26px; border-radius: 8px; margin: -4px 0; flex: none; opacity: .5; }
.drow__pencil .ico { width: 13px; height: 13px; margin: 0; }
.drow--edit:hover .drow__pencil, .drow--edit:focus-within .drow__pencil { opacity: 1; }
.drow.is-editing .drow__pencil { opacity: 0; pointer-events: none; }
.drow .copy-btn { width: 26px; height: 26px; border-radius: 8px; color: var(--faint); margin: -4px 0 -4px auto; flex: none; }
.drow .copy-btn .ico { width: 14px; height: 14px; }
.drow .copy-btn:hover { background: rgba(39,62,212,.08); color: var(--blue); }
.drow__empty { color: var(--faint); font-weight: 400; }
.flag { width: 20px; height: 14px; border-radius: 3px; flex: none; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(11,11,14,.08); margin-right: 6px; }

/* ---- phone rows ---- */
.phone-subhead { display: flex; align-items: center; gap: 7px; padding: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); border-top: 1px solid var(--tint); margin-top: 4px; }
.phone-subhead .ico { width: 13px; height: 13px; color: var(--faint); }
.phone-subhead .icon-btn { margin-left: auto; width: 26px; height: 26px; opacity: .6; }
.phone-subhead .icon-btn .ico { width: 13px; height: 13px; }
.phone-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--tint); }
.phone-row:last-child { border-bottom: none; }
.phone-row__main { flex: 1; min-width: 0; }
.phone-row__num { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 7px; padding: 1px 6px; margin: -1px -6px; display: inline-block; transition: background .15s ease, box-shadow .15s ease; }
.phone-row:not(.is-editing) .phone-row__num:hover { background: rgba(39,62,212,.06); box-shadow: inset 0 0 0 1px rgba(39,62,212,.14); }
.phone-row__tag { display: block; font-size: 11px; color: var(--faint); margin-top: 0; }
.pa-btn { width: 32px; height: 32px; flex: none; border: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; transition: background .16s ease, color .16s ease, transform .16s var(--ease-spring), box-shadow .2s ease; }
.pa-btn .ico { width: 16px; height: 16px; }
.pa-btn:active { transform: scale(.88); }
.pa-btn--wa { background: #E7F6EC; color: #128C4B; }
.pa-btn--wa:hover { background: #16A354; color: #fff; box-shadow: 0 4px 10px rgba(18,140,75,.35); }
.pa-btn--save { background: var(--tint); color: var(--muted); }
.pa-btn--save:hover { background: var(--blue); color: #fff; box-shadow: 0 4px 10px rgba(39,62,212,.32); }
button:disabled.pa-btn, .pa-btn[disabled] { background: var(--tint); color: #C4C4CB; box-shadow: none; pointer-events: none; }

/* disabled-state tooltip: JS sets data-tip on the wrapper only while gated */
.tipwrap { position: relative; display: inline-flex; }
.tipwrap[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); right: -6px; z-index: 60;
  background: var(--black); color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.4;
  padding: 6px 10px; border-radius: 8px; width: max-content; max-width: 220px; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity .16s ease, transform .16s var(--ease-out);
}
.tipwrap[data-tip]::before { content: ''; position: absolute; bottom: calc(100% + 3px); right: 8px; z-index: 60; border: 5px solid transparent; border-top-color: var(--black); border-bottom: none; opacity: 0; transition: opacity .16s ease; pointer-events: none; }
.tipwrap[data-tip]:hover::after, .tipwrap[data-tip]:focus-within::after { opacity: 1; transform: none; }
.tipwrap[data-tip]:hover::before, .tipwrap[data-tip]:focus-within::before { opacity: 1; }

/* ---- quick-action bar ---- */
.quickbar { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 10px; animation: riseIn .4s var(--ease-out) backwards; animation-delay: .04s; }
.quickbar .tipwrap { flex: 1; min-width: 0; }
.qa-btn { flex: 1; min-width: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 8px; border: 1.5px solid transparent; border-radius: 11px; background: var(--tint); color: var(--ink); font-size: 13px; font-weight: 600; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s var(--ease-spring), box-shadow .2s ease; }
.qa-btn__ico { width: 28px; height: 28px; flex: none; border-radius: 9px; background: #fff; color: var(--blue); border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s var(--ease-spring); }
.qa-btn__ico .ico { width: 15px; height: 15px; }
.qa-btn:hover { background: #fff; border-color: var(--blue-light); color: var(--blue); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(39,62,212,.14); }
.qa-btn:hover .qa-btn__ico { background: var(--blue); color: #fff; border-color: var(--blue); transform: scale(1.06); }
.qa-btn:active { transform: scale(.97); }
.qa-btn[disabled] { pointer-events: none; color: var(--faint); background: var(--tint); }
.qa-btn[disabled] .qa-btn__ico { color: #C4C4CB; }
.qa-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- timeline ---- */
.timeline-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); animation: riseIn .4s var(--ease-out) backwards; animation-delay: .08s; min-width: 0; }
.timeline-card__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--tint-2); }
.timeline-card__head h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.timeline-card__head .ico { color: var(--blue); }
.timeline-card__count { margin-left: auto; font-size: 12px; color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.timeline-card__body { padding: 6px 18px 16px; }
.tl-label { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 14px 0 6px; }
.tl-label .ico { width: 13px; height: 13px; }
.tl-label--alert { color: var(--red); }
.tl-label--pinned { color: var(--amber); }
.tl-label__line { flex: 1; height: 1px; background: var(--tint-2); }
.tl-item { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; margin-bottom: 6px; border: 1px solid var(--border-soft); background: #fff; position: relative; transition: box-shadow .18s ease, border-color .18s ease, opacity .25s ease, transform .25s var(--ease-out); animation: riseIn .3s var(--ease-out) backwards; }
.tl-item:hover { box-shadow: var(--shadow-sm); }
.tl-item::before { content: ''; position: absolute; left: -1px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.tl-item--overdue { background: #FDEAEA; border-color: #F1ABAB; }
.tl-item--overdue::before { background: #D6494F; }
.tl-item--note { background: #FFFBEA; border-color: #EDDD96; }
.tl-item--note::before { background: #D9A800; }
.tl-item--history { border-color: transparent; background: transparent; padding: 5px 12px; margin-bottom: 0; }
.tl-item--history:hover { box-shadow: none; background: var(--tint); }
.tl-item.is-done { opacity: .55; }
.tl-item.is-done .tl-item__text { text-decoration: line-through; color: var(--faint); }
.tl-item.is-leaving { opacity: 0; transform: translateX(14px); }
.tl-item__ico { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--tint); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.tl-item__ico .ico { width: 15px; height: 15px; }
.tl-item--overdue .tl-item__ico { background: #fff; color: var(--red); }
.tl-item--note .tl-item__ico { background: #fff; color: var(--amber); }
.tl-item--history .tl-item__ico { width: 24px; height: 24px; background: var(--tint-2); color: var(--faint); border-radius: 7px; }
.tl-item--history .tl-item__ico .ico { width: 12.5px; height: 12.5px; }
.tl-item__body { flex: 1; min-width: 0; }
.tl-item__text { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.tl-item--history .tl-item__text { font-size: 12.5px; color: var(--muted); }
.tl-item__meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.tl-item__meta time, .tl-item__meta small { font-size: 11px; color: var(--faint); font-weight: 500; }
.due-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 1.5px 9px; border-radius: 99px; background: var(--tint-2); color: var(--muted); font-variant-numeric: tabular-nums; }
.due-chip .ico { width: 11px; height: 11px; }
.due-chip--overdue { background: var(--red); color: #fff; }
.due-chip--today { background: var(--green-tint); color: var(--green); }
.due-chip--soon { background: rgba(39,62,212,.09); color: var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  .due-chip--overdue { animation: overduePulse 2.4s ease-in-out infinite; }
  @keyframes overduePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(214,73,79,.3); } 50% { box-shadow: 0 0 0 5px rgba(214,73,79,0); } }
}
.pin-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.pin-chip .ico { width: 11px; height: 11px; }
.tl-check { width: 22px; height: 22px; flex: none; margin-top: 3px; border: 2px solid var(--border); border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--ease-spring); padding: 0; }
.tl-check .ico { width: 13px; height: 13px; }
.tl-check:hover { border-color: var(--green); color: rgba(14,124,79,.4); transform: scale(1.08); }
.tl-check[aria-checked="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.tl-item--overdue .tl-check { border-color: #E99898; }
.tl-item--overdue .tl-check:hover, .tl-check[aria-checked="true"] { border-color: var(--green); }
.tl-item .icon-btn { width: 28px; height: 28px; flex: none; opacity: .45; }
.tl-item .icon-btn .ico { width: 15px; height: 15px; }
.tl-item:hover .icon-btn, .tl-item:focus-within .icon-btn { opacity: 1; }
.composer { display: flex; gap: 8px; margin: 8px 0 10px; animation: riseIn .25s var(--ease-out); flex-wrap: wrap; }
.composer .input { flex: 1 1 180px; }
.composer input[type="date"].input { flex: 0 1 158px; }
.composer .btn { flex: none; }

/* ---- deleted empty state ---- */
.deleted-state { text-align: center; padding: 70px 24px; animation: riseIn .35s var(--ease-out); }
.deleted-state__ico { display: inline-flex; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(160deg, var(--tint), var(--tint-2)); color: var(--red); align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--shadow-sm); }
.deleted-state__ico .ico { width: 26px; height: 26px; }
.deleted-state h3 { font-size: 18px; margin-bottom: 6px; }
.deleted-state p { font-size: 13.5px; color: var(--faint); margin-bottom: 18px; }
.deleted-state .btn + .btn { margin-left: 8px; }

/* ================= WON CELEBRATION ================= */
.celebrate { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.celebrate__backdrop { position: absolute; inset: 0; background: rgba(11,11,14,.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: cbFade .3s ease both; }
@keyframes cbFade { from { opacity: 0; } to { opacity: 1; } }
.celebrate__card { position: relative; width: min(480px, 94vw); background: radial-gradient(130% 150% at 50% -10%, #222A4E, #0B0B0E 72%); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; box-shadow: var(--shadow-lg), 0 0 80px rgba(39,62,212,.35); padding: 26px 24px 24px; text-align: center; overflow: hidden; animation: cbPop .5s var(--ease-spring) both; }
@keyframes cbPop { from { opacity: 0; transform: translateY(22px) scale(.92); } to { opacity: 1; transform: none; } }
.celebrate__scene { width: 100%; height: auto; display: block; }
.celebrate__label { font-family: 'Lora', Georgia, serif; font-size: 31px; font-weight: 700; color: #fff; letter-spacing: -.01em; margin-top: 6px; animation: cbLabel .55s var(--ease-spring) .75s both; }
.celebrate__sub { font-size: 13.5px; color: #9AAAE0; font-weight: 600; margin-top: 3px; animation: cbLabel .55s var(--ease-spring) .9s both; }
.celebrate__hint { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 15px; animation: cbLabel .5s ease 1.3s both; }
@keyframes cbLabel { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
.celebrate__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.celebrate__confetti i { position: absolute; left: 50%; top: 46%; display: block; animation: cfBurst var(--dur) cubic-bezier(.15,.6,.35,1) var(--delay) both; }
@keyframes cfBurst { 0% { transform: translate(-50%,-50%) rotate(0); opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)); opacity: 0; } }
.sc-line { stroke: rgba(255,255,255,.28); }
.sc-kickleg { transform-box: fill-box; transform-origin: 0 0; animation: kickLeg .55s var(--ease-spring) .15s both; }
@keyframes kickLeg { 0% { transform: rotate(-42deg); } 55% { transform: rotate(38deg); } 100% { transform: rotate(26deg); } }
.sc-ball1 { animation: ballShot 1s cubic-bezier(.2,.7,.3,1) .34s both; }
@keyframes ballShot { 0% { transform: translate(0,0) rotate(0); } 55% { transform: translate(112px,-96px) rotate(340deg); } 100% { transform: translate(178px,-62px) rotate(600deg); } }
.sc-net1 { animation: netHit 1.9s ease-out both; transform-box: fill-box; transform-origin: 0% 50%; }
@keyframes netHit { 0%,68% { transform: none; } 76% { transform: translateX(6px) skewX(-5deg); } 88% { transform: translateX(2px) skewX(-1.5deg); } 100% { transform: none; } }
.sc-ball2 { animation: hoopShot 1.15s cubic-bezier(.3,.5,.4,1) .25s both; }
@keyframes hoopShot { 0% { transform: translate(0,0) rotate(0); } 52% { transform: translate(172px,-118px) rotate(260deg); } 76% { transform: translate(240px,-64px) rotate(400deg); } 100% { transform: translate(246px,4px) rotate(480deg); } }
.sc-net2 { transform-box: fill-box; transform-origin: 50% 0; animation: netSwish 1.9s ease-out both; }
@keyframes netSwish { 0%,60% { transform: none; } 70% { transform: scaleY(1.28) scaleX(.94); } 84% { transform: scaleY(1.08); } 100% { transform: none; } }
.sc-swish { opacity: 0; animation: swishPop 1.9s ease-out both; }
@keyframes swishPop { 0%,62% { opacity: 0; transform: scale(.7); } 72% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.2); } }
.sc-trophy { transform-box: fill-box; transform-origin: 50% 90%; animation: trophyPop .7s var(--ease-spring) .15s both; }
@keyframes trophyPop { 0% { opacity: 0; transform: scale(.5) translateY(16px); } 60% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
.sc-rays { transform-box: fill-box; transform-origin: 50% 50%; animation: raysOut .9s var(--ease-out) .5s both; }
@keyframes raysOut { 0% { opacity: 0; transform: scale(.55); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.28); } }

/* ================= Responsive (lead-page classes) ================= */
@media (max-width: 860px) {
  .lead-head { gap: 10px; }
  .lead-head__back span { display: none; }
  .lead-head__back { padding: 8px 9px; }
  .lead-head__title { font-size: 21px; }
  .lead-actions { width: 100%; order: 3; }
  .lead-actions .btn { flex: 1; justify-content: center; }
  .lead-actions .icon-btn { flex: none; border: 1.5px solid var(--border-soft); border-radius: 11px; width: 42px; height: 42px; }
  .stage-seg { min-width: 118px; }
  .quickbar { padding: 8px; gap: 8px; }
  .qa-btn { flex-direction: column; gap: 6px; padding: 10px 4px; font-size: 12px; }
  .timeline-card__body { padding: 4px 12px 14px; }
  .drow__label { width: 76px; }
  .closed-banner { flex-wrap: wrap; }
}
@media (pointer: coarse) {
  .pa-btn { width: 38px; height: 38px; }
  .tl-check { width: 25px; height: 25px; }
  .tl-item .icon-btn { width: 36px; height: 36px; opacity: .55; }
  .drow__pencil { opacity: .65; }
}