:root {
  --bg: #faf8f5; --ink: #1d1a16; --muted: #8a8378; --accent: #b3552e;
  --card: #ffffff; --line: #e7e1d8;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
h1, h2 { font-weight: 600; letter-spacing: -0.01em; }
a { color: var(--accent); text-decoration: none; }
code { background: var(--line); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
.muted { color: var(--muted); }
.error { color: #b3552e; font-size: 0.9em; }
.center { text-align: center; }

.center-card {
  max-width: 420px; margin: 14vh auto; padding: 2.2rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  text-align: center;
}
.pin-form input {
  width: 100%; padding: 0.7rem 1rem; margin: 0.8rem 0 0.4rem;
  font-size: 1.15rem; text-align: center; letter-spacing: 0.3em;
  border: 1px solid var(--line); border-radius: 8px;
}
.pin-form input[type=email], .pin-form input[type=password] { letter-spacing: normal; }
button, .btn {
  display: inline-block; padding: 0.55rem 1.4rem; margin-top: 0.6rem;
  background: var(--ink); color: #fff; border: 0; border-radius: 8px;
  font-size: 0.95rem; cursor: pointer;
}
button.link { background: none; color: var(--accent); padding: 0; margin: 0; }
button.danger, .danger { color: #a33; }

.gallery-header {
  min-height: 38vh; display: flex; align-items: flex-end;
  background: var(--ink) center/cover no-repeat; color: #fff;
}
.gallery-header-inner {
  width: 100%; padding: 3rem 5vw 2rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
}
.gallery-header h1 { margin: 0 0 0.2rem; font-size: 2rem; }
.gallery-header .btn { background: rgba(255,255,255,0.92); color: var(--ink); }

.gallery-main { padding: 1.5rem 5vw 4rem; }
.section-name { margin: 2.2rem 0 0.8rem; font-size: 1.15rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.12em; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.tile { position: relative; margin: 0; overflow: hidden; border-radius: 6px; }
.tile img { width: 100%; height: 100%; min-height: 160px; object-fit: cover;
  display: block; cursor: pointer; }
.tile .play-badge {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 2.4rem; text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  pointer-events: none;
}
.tile-actions {
  position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px;
  opacity: 0; transition: opacity 0.15s;
}
.tile:hover .tile-actions, .tile:focus-within .tile-actions { opacity: 1; }
@media (hover: none) { .tile-actions { opacity: 1; } }
.icon-btn {
  background: rgba(0,0,0,0.55); color: #fff; border: 0; border-radius: 6px;
  padding: 0.3rem 0.55rem; margin: 0; font-size: 1rem; cursor: pointer;
  display: inline-block;
}
.fav-btn.faved { color: #ff5d73; }

.lightbox {
  position: fixed; inset: 0; background: rgba(10,8,6,0.96); z-index: 50;
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lb-stage { max-width: 92vw; max-height: 92vh; touch-action: manipulation; }
.lb-stage img, .lb-stage video { max-width: 92vw; max-height: 92vh; display: block; }
.lb-close, .lb-prev, .lb-next {
  position: fixed; background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 2.4rem; padding: 1rem; margin: 0; z-index: 51;
}
.lb-close { top: 0; right: 0; }
.lb-prev { left: 0; top: 50%; transform: translateY(-50%); }
.lb-next { right: 0; top: 50%; transform: translateY(-50%); }
.lb-actions {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2rem; z-index: 51;
}
.lb-actions button, .lb-actions a {
  background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 1.6rem; padding: 0.4rem 0.8rem; text-decoration: none; opacity: 0.9;
}
.lb-fav.faved { color: #ff5d73; }

/* Timecoded review comments (video lightbox) */
.lb-comments {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 52;
  width: min(340px, 86vw); padding: 3rem 1rem 1rem;
  background: rgba(20,16,13,0.94); color: #f3eee8;
  display: flex; flex-direction: column; overflow: hidden;
}
.lb-comments[hidden] { display: none; }
.lb-comments h3 { margin: 0; font-size: 1rem; }
.vc-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.vc-count { font-size: 0.72rem; opacity: 0.7; }
.vc-count.ok { color: #7fd6a3; opacity: 1; }
.vc-filter-lbl { font-size: 0.72rem; opacity: 0.8; margin-left: auto; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
.vc-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.vc { font-size: 0.85rem; line-height: 1.4; padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.vc-resolved { opacity: 0.5; }
.vc-resolved .vc-text { text-decoration: line-through; }
.avc-resolved { opacity: 0.55; }
.avc-resolved .avc-text { text-decoration: line-through; }
button.link.ok { color: #2e8b57; }
.vc-tc { background: rgba(255,255,255,0.12); border: 0; color: #ffd9a0; cursor: pointer;
  font-size: 0.75rem; border-radius: 4px; padding: 0.1rem 0.35rem; }
.vc-tc:hover { background: rgba(255,255,255,0.22); }
.vc-role { font-weight: 600; font-size: 0.72rem; opacity: 0.7; }
.vc-role.studio { color: #9fd0ff; }
.vc-text { display: inline; }
.vc-reply { background: none; border: 0; color: #9fd0ff; cursor: pointer; font-size: 0.72rem; }
.vc-form { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.6rem; }
.vc-controls { display: flex; gap: 0.5rem; align-items: center; }
.vc-at, .vc-cancel-reply { background: rgba(255,255,255,0.12); border: 0; color: #f3eee8;
  cursor: pointer; font-size: 0.75rem; border-radius: 4px; padding: 0.2rem 0.5rem; }
.vc-body { width: 100%; resize: vertical; min-height: 2.4rem; font: inherit;
  border-radius: 6px; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.3); color: #fff; padding: 0.4rem; }
.sec-dl { font-size: 0.85em; color: var(--muted); text-decoration: none; margin-left: 0.4rem; }
.sec-dl:hover { color: var(--ink); }

/* Case studies (Work) */
.work-list { list-style: none; padding: 0; margin: 1.5rem 0;
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.work-card { background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; }
.work-card-img { display: block; background: var(--line);
  aspect-ratio: 4/3; overflow: hidden; }
.work-card-img img { width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform 0.3s; }
.work-card-img:hover img { transform: scale(1.03); }
.work-card-img .placeholder { display: grid; place-items: center;
  width: 100%; height: 100%; color: var(--muted); font-size: 0.85rem; }
.work-card-body { padding: 0.9rem 1.1rem 1.1rem; }
.work-card-body h2, .work-card-body h3 { font-size: 1.15rem; margin: 0 0 0.2rem; }
.work-card-body h2 a, .work-card-body h3 a { color: var(--ink); text-decoration: none; }
.work-card-body h2 a:hover, .work-card-body h3 a:hover { color: var(--accent); }

/* Featured Clients band (case studies surfaced on /portfolio) */
.featured-clients { margin-top: clamp(56px, 9vw, 104px);
  padding-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
.featured-clients h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0 0 0.3rem; }
.featured-clients > p { margin: 0 0 1.6rem; max-width: 40em; }

/* /reels — vertical short-form video showcase */
.reel-sec { padding: clamp(40px, 6vw, 70px) clamp(20px, 6vw, 88px); }
.reel-grid { display: grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: clamp(28px, 5vw, 56px) 0; }
.reel { margin: 0; }
.reel-vid { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  background: var(--espresso); border: 1px solid var(--line); border-radius: 14px; }
.reel-empty { margin: clamp(44px, 8vw, 96px) 0; font-size: 1.05rem; max-width: 36em; }

/* ---- wow hover: lift + glow on showcase tiles ---- */
.portfolio-grid .tile { transition: transform 0.4s cubic-bezier(.2,.7,.2,1),
  box-shadow 0.4s ease; }
.portfolio-grid .tile img { transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.portfolio-grid .tile:hover { transform: translateY(-5px);
  box-shadow: 0 26px 48px -28px rgba(59,26,35,0.5),
              0 0 40px -12px rgba(224,164,59,0.45); }
.portfolio-grid .tile:hover img { transform: scale(1.06); }

.reel { transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
.reel-vid { transition: box-shadow 0.4s ease, border-color 0.4s ease,
  transform 0.4s cubic-bezier(.2,.7,.2,1); }
.reel:hover { transform: translateY(-5px); }
.reel:hover .reel-vid { border-color: rgba(224,164,59,0.6);
  box-shadow: 0 26px 50px -26px rgba(59,26,35,0.55),
              0 0 44px -10px rgba(224,164,59,0.5); }

.work-card { transition: transform 0.4s cubic-bezier(.2,.7,.2,1),
  box-shadow 0.4s ease, border-color 0.4s ease; }
.work-card:hover { transform: translateY(-5px);
  border-color: rgba(224,164,59,0.55);
  box-shadow: 0 26px 50px -28px rgba(59,26,35,0.5),
              0 0 40px -12px rgba(224,164,59,0.4); }
.work-card:hover .work-card-img img { transform: scale(1.06); }

.work-detail { max-width: 960px; margin: 0 auto; }
.work-head { margin: 1.5rem 0 2rem; max-width: 720px; }
.work-eyebrow { font-size: 0.85rem; letter-spacing: 0.08em;
  text-transform: uppercase; margin: 0 0 0.4rem; }
.work-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 1rem; }
.work-brief { white-space: pre-wrap; line-height: 1.7; color: var(--ink);
  font-size: 1.05rem; }
.work-grid { margin: 1rem 0 2.5rem; }
.work-credits { background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 1.2rem 1.4rem; margin: 1.5rem 0; }
.work-credits h2 { font-size: 1rem; margin: 0 0 0.6rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.work-credits ul { margin: 0; padding-left: 1.1rem; line-height: 1.7; }
.work-cta { text-align: center; margin: 2.5rem 0 1rem;
  padding: 1.8rem 1rem; border-top: 1px solid var(--line); }
.work-cta p { margin: 0 0 0.6rem; color: var(--muted); }
/* Empty portfolio / reels / work states */
.empty-state { max-width: 36em; margin: 2rem auto 3rem; text-align: center; }
.empty-state-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem;
  justify-content: center; align-items: center; margin-top: 1.25rem; }
.empty-pin { font-size: 0.9rem; }
.delivery-demo-link { margin-top: 1rem; display: flex; flex-wrap: wrap;
  gap: 0.5rem 1rem; align-items: center; }
.about-steps { margin: 1rem 0 1.5rem; padding-left: 1.2rem; line-height: 1.7; }
.about-steps li { margin-bottom: 0.5rem; }

.work-cta .btn.link { background: none; color: var(--accent);
  margin-left: 0.6rem; padding: 0.55rem 0.4rem; }
.cs-fieldset { border: 1px solid var(--line); border-radius: 8px;
  padding: 0.8rem 1rem; margin-top: 0.6rem; }
.cs-fieldset legend { color: var(--muted); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 0 0.4rem; }

/* Public form — checkbox (multi-select) field */
.check-field { border: 1px solid var(--line); border-radius: 8px;
  padding: 0.7rem 1rem 0.85rem; margin: 0.2rem 0; }
.check-field legend { color: var(--muted); font-size: 0.9rem; padding: 0 0.3rem; }
.check-field .check-opt { display: flex; justify-content: flex-start;
  align-items: center; gap: 9px; padding: 0.18rem 0; cursor: pointer; }
.check-field .check-opt input { width: auto; padding: 0; }

/* Studio booking playbook (internal reference) */
.playbook { max-width: 820px; }
.playbook .pb-note { background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 1rem 1.2rem; margin: 1rem 0; }
.playbook .pb-stages { list-style: none; padding: 0; margin: 1.4rem 0; }
.playbook .pb-stage { border-left: 2px solid var(--line); padding: 0.2rem 0 1rem 1.1rem;
  margin: 0 0 0.6rem; }
.playbook .pb-stage h2 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.playbook .pb-voice { font-style: italic; color: var(--accent); margin: 0.3rem 0; }
.playbook .pb-fill { background: var(--card); border: 1px dashed var(--line);
  border-radius: 6px; padding: 0.5rem 0.7rem; color: var(--muted); }
.playbook .pb-map { color: var(--muted); font-size: 0.92rem; }
.playbook .pb-list { margin: 0.4rem 0; padding-left: 1.2rem; }
.playbook .pb-invoice { width: 100%; max-width: 460px; border-collapse: collapse; margin: 0.5rem 0; }
.playbook .pb-invoice th, .playbook .pb-invoice td { text-align: left; padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.playbook .pb-invoice td:last-child, .playbook .pb-invoice th:last-child { text-align: right; }
.playbook .pb-sub, .playbook .pb-tot { font-weight: 600; }

/* Portfolio tag filter (/portfolio) */
.portfolio-filter { display: flex; flex-wrap: wrap; gap: 6px;
  margin: 1rem 0 1.4rem; }
.pf-chip { background: var(--card); border: 1px solid var(--line);
  color: var(--ink); border-radius: 999px; padding: 0.35rem 0.9rem;
  font-size: 0.85rem; cursor: pointer; margin: 0; }
.pf-chip:hover { border-color: var(--accent); color: var(--accent); }
.pf-chip-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pf-chip-active .muted { color: rgba(255,255,255,0.6); }
.pf-chip .muted { margin-left: 0.3rem; font-size: 0.8em; }
.pf-hidden { display: none !important; }

/* Share-card debugger (/admin/share) */
.share-row { display: flex; gap: 18px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.2rem; margin: 0.8rem 0; align-items: flex-start; }
.share-thumb { flex: 0 0 200px; aspect-ratio: 1.91/1; overflow: hidden;
  border-radius: 8px; background: var(--line); display: block; }
.share-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-thumb .placeholder { display: grid; place-items: center;
  width: 100%; height: 100%; color: var(--muted); font-size: 0.85rem; }
.share-meta { flex: 1; min-width: 0; }
.share-path { margin: 0; font-size: 0.82rem; word-break: break-all; }
.share-path a { color: var(--muted); }
.share-path a:hover { color: var(--accent); }
.share-title { margin: 0.3rem 0; font-size: 1.1rem; }
.share-desc { margin: 0.2rem 0 0.6rem; color: var(--ink); line-height: 1.45; }
.share-debuggers { font-size: 0.85rem; }
.share-debuggers a { margin-left: 0.6rem; }

/* Sent-emails kind badges (/admin/sent) */
.kind-badge { display: inline-block; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.06em; padding: 1px 7px; border-radius: 999px;
  text-transform: uppercase; }
.kind-proposal { background: #ffe9d5; color: #a45200; }
.kind-contract { background: #d9eafd; color: #1f56a0; }
.kind-invoice  { background: #d6f5dd; color: #1f7d2f; }
.kind-other    { background: var(--line); color: var(--muted); }
.sent-kinds { margin: 0.3rem 0 1.2rem; }
.sent-kinds .kind-badge { margin-right: 0.2rem; }

/* Portal "what's new" header strip */
.portal-changelog { margin: 0.6rem 0 1.6rem; padding: 0.7rem 1rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; }
.portal-changelog p { margin: 0; font-size: 0.95rem; }
.changelog-new { display: inline-block; background: var(--accent); color: #fff;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em;
  padding: 1px 7px; border-radius: 999px; margin-right: 0.4rem;
  vertical-align: middle; }

/* Portal "NEW since last visit" pill */
.new-pill { display: inline-block; margin-left: 0.4rem;
  font-size: 0.62em; font-weight: 600; letter-spacing: 0.06em;
  background: var(--accent); color: #fff; padding: 1px 7px;
  border-radius: 999px; vertical-align: middle; }

/* Converted inquiry rows fade out so the inquiries table keeps reading as
   "what still needs action" rather than "everything that ever came in" */
tr.inquiry-converted td { color: var(--muted); }
tr.inquiry-converted td:nth-child(2) { text-decoration: line-through; }
.inquiry-undo { font-size: 0.78rem; margin-left: 0.3rem;
  color: var(--muted); }
.inquiry-undo:hover { color: var(--accent); }

/* /admin/today quiet-day empty state */
.today-quiet { text-align: center; padding: 3rem 1.5rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; margin: 1rem 0; }
.today-quiet p { margin: 0.4rem 0; font-size: 1.05rem; }
.today-quiet strong { color: var(--ink); }

/* /admin/today summary line */
.today-summary { margin: 0.4rem 0 1.4rem; font-size: 0.95rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.6rem 0.9rem; }
.today-summary strong { color: var(--accent); }

/* Sparkline window picker (7d / 30d / 90d toggle) */
.spark-window-picker { display: inline-flex; gap: 0; margin: 0.8rem 0 0.3rem;
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
  background: var(--card); font-size: 0.85rem; }
.spark-window-btn { padding: 0.3rem 0.9rem; color: var(--ink);
  text-decoration: none; }
.spark-window-btn:hover { background: var(--line); color: var(--accent); }
.spark-window-active { background: var(--ink); color: #fff; }
.spark-window-active:hover { background: var(--ink); color: #fff; }

/* Studio dashboard "last 7 days" sparklines */
.sparklines { display: flex; gap: 14px; flex-wrap: wrap;
  margin: 0.8rem 0 1.2rem; }
.spark-card { flex: 1 1 200px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 0.7rem 0.9rem; }
.spark-head { margin: 0 0 0.4rem; font-size: 0.95rem; }
.spark-head strong { font-size: 1.4rem; color: var(--accent); }
.spark-svg { width: 100%; height: 36px; display: block; }

/* Unlinked-gallery warning strip on /admin */
.unlinked-warn { background: var(--card); border: 1px solid #f5c06a;
  border-radius: 8px; padding: 0.6rem 0.9rem; margin: 0.6rem 0;
  font-size: 0.92rem; }
.unlinked-warn summary { cursor: pointer; }
.unlinked-warn table { margin: 0.6rem 0 0; }

/* Pipeline-stage overdue chip */
.pipeline-overdue { font-size: 0.78em; margin-left: 0.2rem; }

/* Gallery admin "Copy link + PIN" button */
.copy-link { font-size: 0.82rem; margin-left: 0.4rem; }
.copy-feedback { margin-left: 0.4rem; font-size: 0.85rem; }

/* Client-page portal audit line (admin) */
.portal-audit { margin: 0.3rem 0 0.8rem; font-size: 0.9rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.6rem 0.9rem; }
.portal-audit strong { color: var(--ink); }

/* Email-gate "have a question?" help link */
.gate-help { margin-top: 1rem; font-size: 0.88rem; }

/* Portal "share this portal" mailto link */
.portal-share { color: var(--accent); text-decoration: none;
  margin-left: 0.2rem; font-weight: 500; }
.portal-share:hover { text-decoration: underline; }

/* Portal "request other formats" CTA */
.portal-cta { display: inline-block; margin-left: 0.4rem;
  color: var(--accent); text-decoration: none; font-weight: 500; }
.portal-cta:hover { text-decoration: underline; }

/* Portal section count pills */
.section-count { display: inline-block; margin-left: 0.4rem;
  font-size: 0.62em; color: var(--muted); font-weight: 400;
  text-transform: none; letter-spacing: 0; }
.portal-meta { margin-top: -0.4rem; font-size: 0.88rem; }

/* Per-section editorial caption on client galleries */
.section-caption { margin: -0.4rem 0 1rem; color: var(--muted);
  font-size: 0.95rem; line-height: 1.55; max-width: 720px; }

/* Proofing progress badge + toast (gallery client view) */
.proof-progress { display: inline-block; margin-left: 0.4rem;
  font-size: 0.62em; text-transform: none; letter-spacing: 0.04em; }
.proof-progress.ok { color: #4a8d2f; font-weight: 600; }
.lb-proof { color: rgba(255,255,255,0.85); font-size: 0.95rem;
  align-self: center; padding: 0 0.6rem; }
.lb-proof.ok { color: #b6e89b; font-weight: 600; }
.lb-proof[hidden] { display: none; }
.proof-toast { position: fixed; left: 50%; bottom: 1.5rem;
  transform: translateX(-50%); background: var(--ink); color: #fff;
  padding: 0.7rem 1.2rem; border-radius: 8px; z-index: 60;
  font-size: 0.9rem; max-width: 92vw; text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.proof-toast[hidden] { display: none; }

/* Needs-attention: collapsible alert strip (studio dashboard) */
.needs-attention { margin: 0.8rem 0 1.4rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); }
.needs-attention[open] { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.needs-attention-sum { list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem;
  font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.needs-attention-sum::-webkit-details-marker { display: none; }
.needs-attention-sum::before { content: "\25B8"; color: var(--muted);
  font-size: 0.75rem; transition: transform 0.15s ease; }
.needs-attention[open] .needs-attention-sum::before { transform: rotate(90deg); }
.needs-attention-sum .na-ico { color: var(--accent); }
.needs-attention-sum.warn .na-ico { color: var(--clay); }
.na-count { display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; padding: 0 0.4rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700; }
.needs-attention-sum.warn .na-count { background: var(--clay); }
.na-flag { color: var(--clay); font-weight: 600; }
.needs-attention-body { padding: 0 0.9rem 0.5rem; }
.needs-attention-body .upcoming { margin: 0.6rem 0 0.8rem; }

/* Upcoming-shoots strip (studio dashboard) */
.upcoming { margin: 1rem 0 1.4rem; }
.upcoming h2 { font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin: 0 0 0.6rem; }
.upcoming-strip { list-style: none; padding: 0; margin: 0;
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.upcoming-chip { flex: 0 0 240px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 0.7rem 0.9rem; }
.upcoming-chip a { color: var(--ink); text-decoration: none; display: block; }
.upcoming-chip a:hover { color: var(--accent); }
.upcoming-chip strong { display: block; margin: 0.2rem 0; font-size: 0.95rem; }
.upcoming-when { display: inline-block; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.upcoming-date { display: inline-block; font-size: 0.78rem;
  color: var(--muted); margin-left: 0.4rem; }
.upcoming-today { border-color: var(--accent); }
.upcoming-today .upcoming-when { color: var(--accent); font-weight: 600; }
.upcoming-overdue { border-color: var(--clay); }
.upcoming-overdue .upcoming-when { color: var(--clay); font-weight: 600; }

/* Testimonials (shared partial — home, services, work-detail) */
.testimonials { margin: 3rem 0 2rem; }
.testimonials h2 { font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin: 0 0 1.2rem; }
.testimonial-list { display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.testimonial { background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.4rem 1.6rem 1.2rem; margin: 0; }
.testimonial blockquote { margin: 0 0 0.8rem; font-style: italic;
  line-height: 1.6; font-size: 1.05rem; quotes: "\201C" "\201D"; }
.testimonial blockquote::before { content: open-quote;
  color: var(--accent); font-size: 1.6rem; line-height: 0; margin-right: 0.1rem; }
.testimonial blockquote::after { content: close-quote;
  color: var(--accent); font-size: 1.6rem; line-height: 0; margin-left: 0.1rem; }
.testimonial figcaption { font-size: 0.9rem; }

/* Admin testimonials list */
.testimonial-row { border-bottom: 1px solid var(--line);
  padding: 0.9rem 0; }
.testimonial-row summary { cursor: pointer; }
.testimonial-row .ok { color: #4a8d2f; }

/* Services page (/services) */
/* ---- shared page header (non-home marketing pages) ---- */
.page-hero { padding: clamp(120px, 16vh, 175px) clamp(20px, 6vw, 88px) 0; }
.page-hero-inner { max-width: 1320px; margin: 0 auto; }
.page-hero h1 { margin: 0; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 0.98;
  letter-spacing: -0.022em; max-width: 13em; }
.page-hero .lede { margin: 26px 0 0; max-width: 36em; font-size: 1.08rem;
  line-height: 1.62; color: var(--ink-soft); }

/* ---- /services — editorial category + tier cards ---- */
.svc-cats { padding: clamp(40px, 6vw, 70px) clamp(20px, 6vw, 88px) clamp(40px, 6vw, 80px); }
.svc-cats .sec-inner { display: flex; flex-direction: column;
  gap: clamp(56px, 8vw, 96px); }
.svc-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 6px; }
.svc-head h2 { margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.04;
  letter-spacing: -0.02em; }
.svc-tag { font: 600 0.62rem/1 var(--sans); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 999px; }
.svc-tagline { margin: 0 0 28px; max-width: 40em; color: var(--muted);
  line-height: 1.6; font-size: 1.02rem; }
.svc-tier-grid { display: grid; gap: 18px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
.svc-tier { position: relative; display: flex; flex-direction: column; background: var(--card);
  border: 1px solid #e3dacb; border-radius: 16px; padding: 26px 24px 24px;
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1),
              box-shadow 0.45s ease, border-color 0.45s ease; }
.svc-tier-mid { border-color: var(--accent);
  box-shadow: 0 30px 56px -38px rgba(207,69,44,0.42); }
.svc-tier:hover { transform: translateY(-6px); border-color: rgba(224,164,59,0.6);
  box-shadow: 0 32px 60px -30px rgba(59,26,35,0.5),
              0 0 50px -10px rgba(224,164,59,0.5); }
.svc-tier-mid:hover { border-color: var(--accent); }
.svc-tier header { display: flex; justify-content: space-between;
  align-items: baseline; gap: 10px; margin: 0; }
.svc-tier h3 { margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: 1.4rem; color: var(--ink); }
.svc-pick { font: 600 0.62rem/1 var(--sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.svc-price { font-family: var(--serif); font-size: 1.9rem; color: var(--ink);
  line-height: 1; margin: 16px 0 18px; }
.svc-price .per { font: 500 0.8rem/1 var(--sans); color: var(--muted);
  margin-left: 4px; }
.svc-price .svc-from { font: 500 0.78rem/1 var(--sans); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-right: 5px;
  vertical-align: 0.35em; }
.svc-tier ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1;
  display: flex; flex-direction: column; gap: 11px; }
.svc-tier li { position: relative; padding-left: 22px; font-size: 0.93rem;
  line-height: 1.5; color: var(--ink-soft); }
.svc-tier li::before { content: "·"; position: absolute; left: 0; top: 1px;
  color: var(--accent); font-weight: 700; }
.svc-cta { text-decoration: none; text-align: center; padding: 0.85em 1.4em;
  border-radius: 999px; font: 600 0.86rem/1 var(--sans); margin-top: auto;
  background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.svc-cta:hover { background: var(--ink); color: #f7f3ed; }
.svc-tier-mid .svc-cta { background: var(--ink); color: #f7f3ed; }
.svc-tier-mid .svc-cta:hover { background: var(--accent); border-color: var(--accent); }

/* ---- shared bordeaux foot card (services + reels) ---- */
.svc-foot-sec { padding: clamp(56px, 8vw, 100px) clamp(20px, 6vw, 88px); }
.svc-foot-card { max-width: 1320px; margin: 0 auto; background: var(--espresso);
  color: #f2e9dc; border-radius: 18px; padding: clamp(36px, 6vw, 64px);
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: center; }
.svc-foot-card h2 { margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--cream); }
.svc-foot-card p { margin: 18px 0 0; color: #c7bba9; line-height: 1.65;
  font-size: 1.04rem; max-width: 34em; }
.svc-foot-actions { display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start; }
.btn-saffron { text-decoration: none; display: inline-flex; align-items: center;
  gap: 0.6em; padding: 1.05em 2em; background: var(--accent-lt); color: var(--espresso);
  border-radius: 999px; font: 600 0.94rem/1 var(--sans); white-space: nowrap; }
.btn-saffron:hover { background: #f2e9dc; }
.btn-ghost-dark { text-decoration: none; display: inline-flex; align-items: center;
  gap: 0.5em; padding: 0.6em 0; font: 600 0.92rem/1 var(--sans); color: #c7bba9;
  border-bottom: 1px solid #6e4250; }
.btn-ghost-dark:hover { color: var(--cream); }
@media (max-width: 760px) {
  .svc-foot-card { grid-template-columns: 1fr; }
}

/* FAQ accordion (shared by /book and /contact) */
.faq { margin: 3rem 0 1rem; }
.faq h2 { font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin: 0 0 0.8rem; }
.faq-item { border-bottom: 1px solid var(--line); padding: 0.9rem 0; }
.faq-item summary { cursor: pointer; font-weight: 600; list-style: none;
  position: relative; padding-right: 1.6rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0;
  top: 0; color: var(--muted); font-weight: 400; transition: transform 0.15s; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0.6rem 0 0; line-height: 1.65; color: var(--ink); }
.faq-foot { margin: 1.2rem 0 0; font-size: 0.9rem; }

.admin-main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 4vw 4rem; }
.admin-bar { display: flex; justify-content: space-between; align-items: baseline; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 1rem 0; }
.inline-form input, .stack-form input, .stack-form select {
  padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 6px;
}
.inline-form button, .stack-form button { margin-top: 0; }
.stack-form { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin: 0.8rem 0; }
.stack-form label { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.stack-form label.row { justify-content: flex-start; }
form.inline { display: inline; }
table.list { width: 100%; border-collapse: collapse; margin: 0.6rem 0 1.6rem; }
table.list th, table.list td { text-align: left; padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line); font-size: 0.92rem; }
code.slug { user-select: all; }
.sections { padding-left: 1.2rem; }
.admin-grid .tile img { min-height: 120px; cursor: default; }
.admin-grid figcaption { font-size: 0.78rem; padding: 0.3rem 0.1rem; }
.placeholder { display: grid; place-items: center; min-height: 120px;
  background: var(--line); color: var(--muted); font-size: 0.85rem; }
progress { width: 100%; }

.spinner {
  width: 36px; height: 36px; margin: 1.4rem auto 0; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Studio client-facing documents */
.doc-page { max-width: 720px; margin: 0 auto; padding: 2.5rem 4vw 4rem; }
.doc-head { margin-bottom: 1.6rem; }
.doc-head h1 { margin: 0.2rem 0; }
.doc-intro { background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 1rem 1.2rem; white-space: pre-wrap; }
.doc-items td:nth-child(n+2), .doc-items th:nth-child(n+2) { text-align: right; }
.doc-accepted { background: var(--card); border: 1px solid var(--accent);
  border-radius: 10px; padding: 1rem 1.2rem; color: var(--accent); }
.doc-actions { display: flex; gap: 14px; align-items: center; margin-top: 1.6rem; }
.stack-form textarea { padding: 0.45rem 0.7rem; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; }
.doc-body { white-space: pre-wrap; font: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem 1.6rem;
  line-height: 1.55; }
.doc-sign { max-width: 480px; }
@media print {
  .no-print, nav { display: none !important; }
  body { background: #fff; }
  .doc-body, .doc-accepted { border: none; padding: 0; }
}
.pipeline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.7rem 1rem; margin: 1rem 0 0.4rem; font-size: 0.9rem; }
.pipeline-step { color: var(--muted); }
.pipeline-step.active { color: var(--ink); }
.pipeline-money { margin-left: auto; color: var(--accent); }

/* Client portal (Phase 2) */
.portal-main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 4vw 4rem; }
.portal-header { margin-bottom: 1.4rem; }
.portal-header h1 { margin: 0.2rem 0; }
.portal-galleries, .portal-files { padding-left: 1.2rem; line-height: 1.8; }
.captions { margin: 0.3rem 0 0.6rem; }
.captions pre { white-space: pre-wrap; font: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.8rem 1rem;
  font-size: 0.92rem; }
.crop-links { display: inline-flex; gap: 8px; margin-left: 6px; }
.crop-links a { font-size: 0.82rem; }
.usage-rights { background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 1rem 1.2rem; white-space: pre-wrap; }

/* ============================================================
   Marketing site — editorial F&B design system (Claude Design)
   Scoped under .site-body so the admin UI keeps the default theme.
   Palette + fonts are overridden as CSS variables here, so existing
   .site-* primitives re-tint automatically. Fonts: Newsreader + Archivo.
   ============================================================ */
.site-body {
  --bg: #F7F1E5; --ink: #1C1814; --muted: #5B554C; --accent: #CF452C;
  --card: #FFFDFA; --line: #DDD4C6;
  --paper2: #EFE6D2; --espresso: #3B1A23; --espresso2: #4A2530;
  --cream: #F7F0E4; --accent-lt: #E0A43B; --ink-soft: #2A241D;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Back-end (admin) + client money-docs reuse the candlelit palette ONLY —
   no flex/font/component rules — so the admin & doc layouts are untouched
   and just re-tint to match the marketing front-end. */
.cream-theme {
  --bg: #F7F1E5; --ink: #1C1814; --muted: #5B554C; --accent: #CF452C;
  --card: #FFFDFA; --line: #DDD4C6;
  --paper2: #EFE6D2; --espresso: #3B1A23; --espresso2: #4A2530;
  --cream: #F7F0E4; --accent-lt: #E0A43B; --ink-soft: #2A241D;
}
.cream-theme ::selection { background: var(--accent); color: var(--cream); }

.site-body ::selection { background: var(--accent); color: var(--cream); }
.site-body h1, .site-body h2, .site-body h3 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
.it-accent { font-style: italic; color: var(--accent); }
.eyebrow { margin: 0 0 16px; font: 600 0.72rem/1 var(--sans);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); }

/* shared CTA buttons */
.btn-pill { display: inline-flex; align-items: center; gap: 0.55em;
  padding: 1em 1.9em; background: var(--ink); color: var(--cream);
  border-radius: 999px; font: 600 0.9rem/1 var(--sans); letter-spacing: 0.02em;
  text-decoration: none; transition: background 0.3s ease; }
.btn-pill:hover { background: var(--accent); }
.btn-ghost { display: inline-flex; align-items: center; gap: 0.5em;
  font: 600 0.9rem/1 var(--sans); color: var(--ink); text-decoration: none;
  border-bottom: 1px solid #c8bfb1; padding-bottom: 4px;
  transition: color 0.3s ease, border-color 0.3s ease; }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }

/* ---- fixed nav ---- */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  max-width: none; margin: 0; padding: 22px clamp(20px, 6vw, 88px);
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease; }
.site-nav.scrolled { background: rgba(244,239,231,0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line); padding-top: 14px; padding-bottom: 14px; }
.site-brand { display: flex; flex-direction: column; line-height: 1;
  text-decoration: none; }
.site-brand b { font-family: var(--serif); font-weight: 500; font-size: 1.5rem;
  letter-spacing: -0.01em; color: var(--ink); }
.site-brand small { font: 600 0.58rem/1 var(--sans); letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--accent); margin-top: 4px; }
.site-nav nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.site-nav nav a { font: 500 0.84rem/1 var(--sans); letter-spacing: 0.02em;
  color: #4a443c; text-decoration: none; transition: color 0.25s ease; }
.site-nav nav a:hover { color: var(--accent); }
.site-nav nav a.nav-cta { padding: 0.72em 1.35em; background: var(--ink);
  color: var(--cream); border-radius: 999px; font-weight: 600;
  white-space: nowrap; }
.site-nav nav a.nav-cta:hover { background: var(--accent); color: var(--cream); }
.nav-menu-btn { display: none; flex-direction: column; gap: 5px; padding: 6px;
  background: none; border: 0; cursor: pointer; }
.nav-menu-btn span { display: block; width: 24px; height: 2px; background: var(--ink); }
.nav-mobile { position: fixed; inset: 0; z-index: 45; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: rgba(18,14,10,0.97); animation: klee-fade 0.3s ease; }
.nav-mobile.open { display: flex; }
.nav-mobile a { font-family: var(--serif); font-size: 2rem; color: #f2e9dc;
  text-decoration: none; }
.nav-mobile a.nav-cta { margin-top: 10px; padding: 0.7em 1.7em;
  background: var(--accent); border-radius: 999px; font: 600 1rem var(--sans); }

/* ---- generic page wrapper (non-home marketing pages) ---- */
.site-main { max-width: 1100px; width: 100%; margin: 0 auto;
  padding: 140px 4vw 4rem; flex: 1; }
.site-narrow { max-width: 680px; }
.site-narrow p { line-height: 1.7; color: var(--ink-soft); }
/* body content that follows a .page-hero header (hero already clears the nav) */
.page-body { max-width: 680px; width: 100%; margin: 0 auto;
  padding: clamp(34px, 5vw, 60px) clamp(20px, 6vw, 88px) clamp(48px, 7vw, 90px); }
.page-body p { line-height: 1.7; color: var(--ink-soft); }
.flush-top { padding-top: clamp(34px, 5vw, 60px); }

/* ---- hero ---- */
.hero { position: relative; max-width: none;
  padding: clamp(120px, 17vh, 200px) clamp(20px, 6vw, 88px) clamp(40px, 7vw, 90px); }
.hero-inner { max-width: 1320px; margin: 0 auto; display: grid;
  grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 5vw, 72px); align-items: end; }
.hero h1 { margin: 0; font-size: clamp(2.7rem, 6.6vw, 5.7rem); line-height: 0.98;
  letter-spacing: -0.022em; }
.hero .lede { margin: 30px 0 0; max-width: 30em; font-size: 1.12rem;
  line-height: 1.62; color: var(--ink-soft); }
.hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 16px 26px; }
.hero-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 4px;
  overflow: hidden; background: #e6ddd0;
  box-shadow: 0 40px 80px -40px rgba(40,24,14,0.5); }
.hero-photo img { position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; will-change: transform; }
.hero-photo figcaption { position: absolute; left: 16px; bottom: 16px;
  padding: 7px 13px; background: rgba(20,14,9,0.62); backdrop-filter: blur(6px);
  border-radius: 999px; font: 500 0.72rem/1 var(--sans); letter-spacing: 0.04em;
  color: #f2e9dc; }
.hero-meta { max-width: 1320px; margin: clamp(40px, 6vw, 76px) auto 0;
  padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 18px 56px; }
.hero-meta div { display: flex; flex-direction: column; gap: 5px; }
.hero-meta b { font-family: var(--serif); font-weight: 400; font-size: 1.55rem;
  color: var(--ink); }
.hero-meta span { font: 500 0.74rem/1 var(--sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); }

/* ---- press marquee ---- */
.marquee { padding: 30px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); overflow: hidden; }
.marquee-track { display: flex; width: max-content; align-items: center;
  gap: clamp(36px, 6vw, 80px); white-space: nowrap;
  animation: klee-marquee 32s linear infinite; }
.marquee-track span { font-family: var(--serif); color: var(--muted);
  font-size: clamp(1.1rem, 2vw, 1.7rem); }

/* ---- section scaffolding ---- */
.sec { padding: clamp(72px, 10vw, 140px) clamp(20px, 6vw, 88px); }
.sec-inner { max-width: 1320px; margin: 0 auto; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px; margin-bottom: clamp(34px, 5vw, 60px); }
.sec-head h2 { margin: 0; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04;
  max-width: 14em; }

/* ---- selected work asymmetric grid ---- */
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
  align-items: start; }
.work-grid + .work-grid { margin-top: 16px; }
.work-grid .tile { margin: 0; aspect-ratio: 4/5; border-radius: 4px;
  background: #e6ddd0; cursor: pointer; }
.work-grid .tile img { width: 100%; height: 100%; min-height: 0; object-fit: cover;
  cursor: pointer; transition: transform 0.85s cubic-bezier(.2,.7,.2,1); }
.work-grid .tile:hover img { transform: scale(1.06); }
.work-grid .tile:nth-child(3n+1) { grid-column: span 4; aspect-ratio: 4/5; }
.work-grid .tile:nth-child(3n+2) { grid-column: span 5; aspect-ratio: 16/11;
  margin-top: 56px; }
.work-grid .tile:nth-child(3n+3) { grid-column: span 3; aspect-ratio: 3/4; }
/* row 2 alternates the rhythm to match the editorial design */
.work-grid .tile:nth-child(4) { grid-column: span 5; aspect-ratio: 16/11; margin-top: 0; }
.work-grid .tile:nth-child(5) { grid-column: span 4; aspect-ratio: 4/5; margin-top: 58px; }
.work-grid .tile:nth-child(6) { grid-column: span 3; aspect-ratio: 3/4; margin-top: 18px; }
.work-cap { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(18,12,8,0.72));
  color: #f4efe7; font: 500 0.8rem/1.3 var(--sans); }
.work-cap small { display: block; color: #d8cdbd; font-size: 0.74rem; margin-top: 2px; }

/* ---- services preview ---- */
.services { padding: clamp(60px, 8vw, 110px) clamp(20px, 6vw, 88px);
  background: var(--paper2); border-top: 1px solid var(--line); }
.svc-cards { display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.svc-card { position: relative; display: flex; flex-direction: column; min-height: 280px;
  padding: 28px 26px 24px; border-radius: 16px; text-decoration: none;
  background: var(--card);
  border: 1px solid #e3dacb;
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1),
              box-shadow 0.45s ease, border-color 0.45s ease; }
.svc-card:hover { transform: translateY(-6px); border-color: rgba(224,164,59,0.6);
  box-shadow: 0 32px 60px -30px rgba(59,26,35,0.5),
              0 0 50px -10px rgba(224,164,59,0.5); }
.svc-card .svc-cta { transition: color 0.3s ease, transform 0.3s ease; }
.svc-card:hover .svc-cta { color: var(--accent); }
.svc-card h3 { margin: 16px 0 0; font-size: 1.7rem; color: var(--ink); }
.svc-card p { margin: 12px 0 22px; flex: 1; color: var(--ink-soft);
  line-height: 1.56; font-size: 0.96rem; }
.svc-tiers { font: 500 0.78rem/1 var(--sans); letter-spacing: 0.04em; color: var(--muted); }
.svc-cta { margin-top: 14px; font: 600 0.85rem/1 var(--sans); color: var(--ink); }

/* ---- delivery (dark, interactive) ---- */
.delivery { padding: clamp(72px, 10vw, 140px) clamp(20px, 6vw, 88px);
  background: var(--espresso); color: var(--cream); }
.delivery .eyebrow { color: var(--accent-lt); }
.delivery-intro { max-width: 34em; margin-bottom: clamp(40px, 6vw, 70px); }
.delivery-intro h2 { margin: 0; font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.04; color: #f7f0e4; }
.delivery-intro p { margin: 22px 0 0; color: #c7bba9; line-height: 1.62; font-size: 1.05rem; }
.delivery-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center; }
.proof-panel { background: var(--espresso2); border: 1px solid #5c3340;
  border-radius: 16px; padding: 24px; }
.proof-head { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px; }
.proof-head b { font: 600 0.78rem/1 var(--sans); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent-lt); }
.proof-head span { font: 500 0.84rem/1 var(--sans); color: #c7bba9; }
.proof-bar { height: 4px; border-radius: 999px; background: #5c3340;
  overflow: hidden; margin-bottom: 18px; }
.proof-fill { height: 100%; border-radius: 999px; background: var(--accent-lt);
  width: 0; transition: width 0.4s cubic-bezier(.2,.7,.2,1); }
.proof-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.proof-thumb { position: relative; aspect-ratio: 1; border-radius: 8px;
  overflow: hidden; background: #45222d; cursor: pointer; border: 0; padding: 0; }
.proof-thumb img { width: 100%; height: 100%; object-fit: cover; }
.proof-ph, .crop-ph { display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, #5c2d39 0%, #45222d 55%, #3a1d27 100%); }
.proof-thumb:nth-child(3n+2) .proof-ph {
  background: linear-gradient(135deg, #6a3340 0%, #4d2530 55%, #3a1d27 100%); }
.proof-thumb:nth-child(3n) .proof-ph {
  background: linear-gradient(135deg, #4f2832 0%, #3f2029 55%, #341a23 100%); }
.proof-heart { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(18,12,8,0.5); font-size: 0.95rem; line-height: 1; color: #fff; }
.proof-thumb.picked .proof-heart { color: var(--accent-lt); }
.crop-demo .eyebrow { color: var(--accent-lt); }
.crop-demo h3 { margin: 12px 0 22px; font-size: 1.7rem; color: #f7f0e4; }
.crop-btns { display: flex; gap: 8px; margin-bottom: 20px; }
.crop-btn { padding: 0.55em 1.1em; border-radius: 999px; cursor: pointer;
  font: 600 0.8rem/1 var(--sans); letter-spacing: 0.02em; border: 1px solid #5c3340;
  background: transparent; color: #c7bba9; transition: all 0.25s ease; }
.crop-btn.on { border-color: var(--accent-lt); background: var(--accent-lt);
  color: var(--espresso); }
.crop-stage { display: flex; align-items: flex-start; gap: 18px; }
.crop-preview { width: clamp(160px, 22vw, 230px); aspect-ratio: 4 / 5;
  border-radius: 10px; overflow: hidden; background: #45222d;
  transition: aspect-ratio 0.4s ease; box-shadow: 0 30px 50px -30px rgba(0,0,0,0.7); }
.crop-preview img { width: 100%; height: 100%; object-fit: cover; }
.crop-meta { padding-top: 6px; }
.crop-meta b { font: 600 1.1rem/1 var(--sans); color: #f7f0e4; }
.crop-meta p { margin: 8px 0 0; color: #c7bba9; font-size: 0.88rem; line-height: 1.5; }

/* ---- testimonials (editorial restyle of shared partial) ---- */
.site-body .testimonials { padding: clamp(72px, 10vw, 130px) clamp(20px, 6vw, 88px);
  margin: 0; max-width: none; }
.site-body .testimonials h2 { font-family: var(--sans); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 clamp(30px, 5vw, 54px); }
.site-body .testimonial-list { max-width: 1320px; margin: clamp(30px,5vw,54px) auto 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.site-body .testimonial { padding: 30px 28px 24px; border-radius: 14px;
  border: 1px solid #e3dacb; }
.site-body .testimonial blockquote { font-family: var(--serif); font-style: normal;
  font-size: 1.28rem; line-height: 1.5; color: #2a241d; }

/* ---- about strip ---- */
.about { padding: clamp(60px, 8vw, 110px) clamp(20px, 6vw, 88px);
  background: var(--paper2); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.about-grid { max-width: 1320px; margin: 0 auto; display: grid;
  grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.about-photo { aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; background: #e0d6c8; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about h2 { margin: 0; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; }
.about p { margin: 22px 0 0; color: var(--ink-soft); line-height: 1.66;
  font-size: 1.05rem; max-width: 34em; }

/* ---- closing CTA ---- */
.cta { padding: clamp(90px, 13vw, 180px) clamp(20px, 6vw, 88px); text-align: center; }
.cta-inner { max-width: 880px; margin: 0 auto; }
.cta h2 { margin: 0; font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: 1.04;
  letter-spacing: -0.022em; }
.cta p { margin: 26px auto 0; max-width: 30em; color: var(--ink-soft);
  font-size: 1.1rem; line-height: 1.6; }
.cta-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center; }

/* ---- legacy press list (used on /press and /work) ---- */
.press-list { list-style: none; padding: 0; margin: 1.4rem 0; }
.press-item { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 0.9rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.press-outlet { font-weight: 700; }
.press-title { color: var(--accent); text-decoration: none; }
.press-title:hover { text-decoration: underline; }
.press-date { margin-left: auto; font-size: 0.9rem; }

/* ---- forms (contact / book) ---- */
.contact-form { max-width: 100%; }
.contact-form label { flex-direction: column; align-items: stretch; }
.hp-field { position: absolute; left: -9999px; height: 0; width: 0; border: 0; padding: 0; }
.sent-note { background: var(--card); border: 1px solid var(--accent);
  border-radius: 10px; padding: 1rem 1.2rem; }
.center { text-align: center; }

/* ---- /about — editorial intro, process, stats band ---- */
.ab-intro { padding: clamp(120px, 16vh, 175px) clamp(20px, 6vw, 88px) 0; }
.ab-intro-grid { max-width: 1320px; margin: 0 auto; display: grid;
  grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 70px); align-items: end; }
.ab-intro h1 { margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.0; letter-spacing: -0.022em; }
.ab-photo { aspect-ratio: 4/5; }
.ab-body { max-width: 720px; margin: 0 auto; padding: clamp(48px, 7vw, 90px) clamp(20px, 6vw, 88px) 0;
  display: flex; flex-direction: column; gap: 22px; }
.ab-body p { margin: 0; font-size: 1.08rem; line-height: 1.72; color: var(--ink-soft); }
.ab-body .ab-lead { font-size: 1.18rem; line-height: 1.7; color: var(--ink); }
.ab-proc { padding: clamp(64px, 9vw, 120px) clamp(20px, 6vw, 88px); max-width: 1320px;
  margin: 0 auto; }
.ab-proc .eyebrow { margin: 0 0 clamp(28px, 4vw, 48px); }
.proc-grid { display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.proc-card { background: var(--card); border: 1px solid #e3dacb; border-radius: 14px;
  padding: 30px 26px; }
.proc-num { font-family: var(--serif); font-size: 2.4rem; color: var(--accent-lt); }
.proc-card h3 { margin: 14px 0 10px; font-family: var(--serif); font-weight: 500;
  font-size: 1.4rem; color: var(--ink); }
.proc-card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 0.97rem; }
.ab-stats { padding: clamp(56px, 8vw, 100px) clamp(20px, 6vw, 88px);
  background: var(--espresso); color: #f2e9dc; }
.ab-stats-grid { max-width: 1320px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.ab-stats-lead { grid-column: 1 / -1; max-width: 30em; }
.ab-stats-lead h2 { margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.1; color: var(--cream); }
.ab-stats-lead p { margin: 16px 0 8px; color: #c7bba9; line-height: 1.6; }
.ab-stat b { display: block; font-family: var(--serif); font-weight: 400;
  font-size: 2.4rem; color: var(--accent-lt); }
.ab-stat span { font: 500 0.78rem/1 var(--sans); letter-spacing: 0.06em;
  text-transform: uppercase; color: #c7bba9; }

/* ---- /contact — 2-column editorial (sticky aside + form card) ---- */
.contact-wrap { max-width: 1320px; margin: 0 auto;
  padding: clamp(120px, 16vh, 175px) clamp(20px, 6vw, 88px) 0;
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-aside { position: sticky; top: 96px; align-self: start; }
.contact-aside h1 { margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.0; letter-spacing: -0.022em; }
.contact-aside .lede { margin: 22px 0 0; max-width: 32em; font-size: 1.05rem;
  line-height: 1.62; color: var(--ink-soft); }
.contact-details { margin: 30px 0 0; display: flex; flex-direction: column; gap: 18px; }
.contact-detail { display: flex; flex-direction: column; gap: 3px; }
.cd-label { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); }
.contact-detail a { color: var(--accent); text-decoration: none; }
.contact-detail a:hover { text-decoration: underline; }
.contact-photo { margin-top: 32px; aspect-ratio: 16/10; border-radius: 8px;
  overflow: hidden; background: #e0d6c8; }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-card { background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 30px 60px -42px rgba(59,26,35,0.4); }
.contact-faq { max-width: 1320px; margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 6vw, 88px) 0; }

/* ---- footer (dark, 4-column) ---- */
.site-footer { background: var(--espresso); color: #c7bba9; margin-top: 0;
  padding: clamp(56px, 7vw, 90px) clamp(20px, 6vw, 88px) 36px; text-align: left;
  font-size: 0.9rem; }
.footer-grid { max-width: 1320px; margin: 0 auto; display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand b { font-family: var(--serif); font-size: 1.7rem; color: #f7f0e4; }
.footer-brand p { margin: 14px 0 0; max-width: 22em; line-height: 1.6;
  font-size: 0.92rem; color: #c7bba9; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col b { margin-bottom: 4px; font: 600 0.72rem/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase; color: #a3756f; }
.footer-col a { color: #c7bba9; font-size: 0.92rem; text-decoration: none;
  transition: color 0.2s ease; }
.footer-col a:hover { color: #f7f0e4; }
.footer-base { max-width: 1320px; margin: clamp(40px, 6vw, 70px) auto 0;
  padding-top: 24px; border-top: 1px solid #542c39; display: flex;
  justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 0.82rem; color: #a3756f; }
.site-footer p { margin: 0; }

/* ---- scroll reveal (JS adds initial hidden state, then reveals) ---- */
.reveal-hidden { opacity: 0; transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1); }

/* ---- keyframes ---- */
@keyframes klee-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes klee-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .site-nav nav { display: none; }
  .nav-menu-btn { display: flex; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-photo { order: -1; }
  .delivery-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .ab-intro-grid { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  .contact-aside { position: static; top: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .work-grid .tile:nth-child(3n+1),
  .work-grid .tile:nth-child(3n+2),
  .work-grid .tile:nth-child(3n+3) {
    grid-column: span 6; margin-top: 0; aspect-ratio: 4/5; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .work-grid .tile { grid-column: span 12 !important; }
}

/* inquiries (admin studio) */
.warn { color: var(--clay); margin-left: 0.3rem; }
.inquiry-msg { white-space: pre-wrap; font-size: 0.85rem; max-width: 40rem;
  background: #f6f4f0; padding: 0.6rem; border-radius: 4px; }
.expiring { color: #b9770e; margin-left: 0.3rem; }
.fav { color: #ff5d73; margin-left: 0.3rem; }
.section-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 1.2rem;
  overflow-x: auto; white-space: nowrap; padding: 0.7rem 5vw;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.section-nav a { color: var(--muted); text-decoration: none; font-size: 0.9rem;
  letter-spacing: 0.04em; text-transform: uppercase; }
.section-nav a:hover { color: var(--ink); }
.section-name { scroll-margin-top: 3.2rem; }

/* crop presets admin */
.preset-row { background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.8rem 1rem; margin: 0.6rem 0; }
.preset-row.row-muted { opacity: 0.6; }
.preset-head { display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.5rem; }
.preset-slug { font-size: 1rem; font-weight: 600; }
.preset-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.preset-edit label { display: flex; flex-direction: column; font-size: 0.75rem;
  color: var(--muted); gap: 0.15rem; }
.preset-edit input { font-size: 0.9rem; }
.chip { background: var(--line); color: var(--ink); border: 0;
  border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.8rem; cursor: pointer; }
.chip.on { background: var(--accent); color: #fff; }
.diff-chip { display: inline-block; background: var(--line); color: var(--ink);
  border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.78rem;
  margin: 0 0.15rem 0.15rem 0; }
.diff-arrow { color: var(--muted); margin: 0 0.2rem; }
.admin-add { margin: 1.2rem 0; }
.admin-add summary { cursor: pointer; color: var(--accent); }

/* ── Studio board — strict 1:1 of the Admin Studio prototype ──────────────
   Board-only screen: horizontal-scroll rail of #EFEADF columns with 9px dot
   headers; clean cards (company + value / project / honest step-pill + age).
   Drag-to-move + click-to-open are the only working bits; the Board/List pill
   lives in the topbar. */
.admin-shell .stu-viewpill { display: inline-flex; background: #F1ECE0;
  border-radius: 999px; padding: 3px; }
.admin-shell .stu-viewpill button { border: 0; cursor: pointer; padding: 7px 15px;
  border-radius: 999px; font: 600 0.78rem/1 var(--font-ui); background: transparent;
  color: var(--ink-soft); }
.admin-shell .stu-viewpill button.is-active { background: var(--terra-deep); color: #F3F0E2; }

.admin-shell .stu-board { overflow-x: auto; overflow-y: hidden; padding: 0.2rem 0 0.6rem; }
.admin-shell .stu-board-rail { display: flex; gap: 16px; align-items: stretch; width: max-content; }
.admin-shell .stu-col { width: 286px; flex: none; display: flex; flex-direction: column;
  background: #EFEADF; border: 1px solid #E4DDCD; border-radius: 14px; padding: 12px; }
.admin-shell .stu-col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; }
.admin-shell .stu-col-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.admin-shell .stu-col-name { font: 700 0.8rem/1 var(--font-ui); color: var(--ink); }
.admin-shell .stu-col-count { font: 600 0.74rem/1 var(--font-ui); color: #8A9183; }
.admin-shell .stu-col-sum { margin-left: auto; font: 600 0.76rem/1 var(--font-ui); color: var(--ink-soft); }
.admin-shell .stu-col-body { display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.admin-shell .stu-card { background: #FFFEF8; border: 1px solid #E6DFCF; border-radius: 11px;
  padding: 13px 14px; cursor: pointer; box-shadow: 0 1px 2px rgba(40,30,12,0.04); }
.admin-shell .stu-card[draggable="true"] { cursor: grab; }
.admin-shell .stu-card-dragging { opacity: 0.5; cursor: grabbing; }
.admin-shell .stu-col-over { outline: 2px dashed #cdc3ae; outline-offset: -4px; }
.admin-shell .stu-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.admin-shell .stu-card-co { flex: 1; min-width: 0; font: 700 0.88rem/1.2 var(--font-ui);
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-shell .stu-card-val { font: 700 0.84rem/1 var(--font-ui); color: #9a7a2c; white-space: nowrap; }
.admin-shell .stu-card-val.is-won { color: #2f7d57; }
.admin-shell .stu-card-val.is-none { color: #8A9183; }
.admin-shell .stu-card-proj { font: 500 0.8rem/1.3 var(--font-ui); color: var(--ink-soft); margin-top: 4px; }
.admin-shell .stu-card-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 12px; }
.admin-shell .stu-step { font: 600 0.7rem/1 var(--font-ui); padding: 5px 9px; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-shell .stu-step.tone-urgent { color: #7C2F38; background: #f3e3e5; }
.admin-shell .stu-step.tone-warn { color: #9a7a2c; background: #f7ecd2; }
.admin-shell .stu-step.tone-ready { color: #2f7d57; background: #e1f2e9; }
.admin-shell .stu-step.tone-calm { color: var(--ink-soft); background: #ecefe6; }
.admin-shell .stu-card-age { font: 500 0.72rem/1 var(--font-ui); color: #8A9183; white-space: nowrap; }
.admin-shell .stu-add { display: block; text-align: center; text-decoration: none;
  background: transparent; border: 1px dashed #cdc3ae; border-radius: 10px; padding: 9px;
  color: #8A9183; font: 600 0.78rem/1 var(--font-ui); }
.admin-shell .stu-add:hover { border-color: #b8ac92; color: var(--ink-soft); }
/* Portal-engagement chip on the Clients list — tone keyed to the handler hint. */
.admin-shell .stu-portal { display: inline-flex; align-items: center;
  font: 600 0.74rem/1 var(--font-ui); padding: .32em .7em; border-radius: 999px;
  border: 1px solid var(--line); white-space: nowrap; }
.admin-shell .stu-portal-ok { color: #2f7d57; background: #eef6f0; border-color: #cfe6d8; }
.admin-shell .stu-portal-muted { color: #8A9183; background: #FBFAF4; }
/* "+ New project" popover — a create-client form hanging off the topbar pill. */
.admin-shell .stu-newproj { position: relative; }
.admin-shell .stu-newproj > summary { list-style: none; cursor: pointer; }
.admin-shell .stu-newproj > summary::-webkit-details-marker { display: none; }
.admin-shell .stu-newproj[open] > summary.pgtop-new { background: var(--terra-deep); }
.admin-shell .stu-newproj-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  display: flex; flex-direction: column; gap: 8px; width: 260px; margin: 0;
  background: #FFFEF8; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; box-shadow: 0 14px 34px rgba(40, 30, 12, 0.14);
}
.admin-shell .stu-newproj-pop input {
  width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--line);
  border-radius: 9px; font: 500 0.85rem/1.2 var(--font-ui); background: #fff; color: var(--ink);
}
.admin-shell .stu-newproj-pop button {
  margin-top: 2px; padding: 0.55rem 1.1rem; border: 0; border-radius: 999px;
  background: var(--terra); color: #F3F0E2; font: 600 0.84rem/1 var(--font-ui); cursor: pointer;
}
.admin-shell .stu-newproj-pop button:hover { background: var(--terra-deep); }
.admin-shell .stu-newproj-hint { margin: 0 0 2px; font: 500 0.74rem/1.35 var(--font-ui); color: var(--ink-soft); }

/* Projects kanban (studio pipeline board) */
.kanban { display: flex; gap: 16px; overflow-x: auto; padding: 0.4rem 0 1rem;
  align-items: flex-start; }
.kanban-col { flex: 0 0 286px; background: var(--surface-sunk);
  border: 1px solid var(--line-strong); border-radius: 14px; padding: 0.75rem; }
.kanban-col-head { display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.375rem 0.75rem; margin-bottom: 0; }
.kanban-col-head::before { content: ""; width: 9px; height: 9px; flex: none;
  border-radius: 999px; background: var(--stage-dot, var(--muted)); }
.kanban-col-name { font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.kanban-col-count { font-size: 0.74rem; color: var(--muted); }
.kanban-col-sum { margin-left: auto; font-size: 0.76rem; font-weight: 600;
  color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.kanban-col-head .pipeline-overdue { color: var(--clay); margin-left: auto; }
.kanban-col-head .pipeline-overdue ~ .kanban-col-sum { margin-left: 0.5rem; }
/* per-stage accent dot on the column header */
.status-col-inquiry_received { --stage-dot: #5C6A5E; }
.status-col-consultation_call { --stage-dot: #2a5db0; }
.status-col-proposal_sent { --stage-dot: #9a7a2c; }
.status-col-contract_signed { --stage-dot: #7C2F38; }
.status-col-retainer_paid { --stage-dot: #2f7d57; }
.status-col-session_planning { --stage-dot: #1f6f6b; }
.status-col-project_closed { --stage-dot: #143C2F; }
.kanban-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 0.8rem 0.875rem; margin-bottom: 0.625rem;
  box-shadow: var(--shadow-sm); }
.kanban-card:last-child { margin-bottom: 0; }
.kanban-card-overdue { border-color: var(--clay); }
.kanban-card-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.5rem; }
.kanban-card-title { display: block; font-weight: 700; font-size: 0.88rem;
  line-height: 1.2; color: var(--ink); flex: 1; min-width: 0; }
.kanban-card-title:hover { color: var(--accent); }
.kanban-card-val { flex: none; font-weight: 700; font-size: 0.84rem;
  color: #9a7a2c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kanban-card-val-won { color: #2f7d57; }
.kanban-card-client { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--ink); }
.kanban-card-meta { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--muted); }
.kanban-card-meta.warn { color: var(--clay); }
.kanban-move { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.35rem; }
.kanban-move-label { font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); }
.kanban-move select { font-size: 0.78rem; padding: 0.2rem 0.3rem; flex: 1;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card);
  color: var(--ink); }

/* Home dashboard (admin landing) */
.home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
  margin: 1rem 0 1.2rem; }
.home-tile { display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.1rem; color: var(--ink); text-decoration: none; }
.home-tile:hover { border-color: var(--accent); }
.home-tile-n { font-size: 1.7rem; font-weight: 600; line-height: 1; }
.home-tile-label { font-size: 0.78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; }
.home-tile-money .home-tile-n, .home-tile-money:hover { color: var(--accent); }
.home-tile-warn { border-color: var(--clay); }
.home-tile-warn .home-tile-n { color: var(--clay); }
.home-tile-trend { margin-top: 0.15rem; font-size: 0.72rem; font-weight: 600;
  display: inline-flex; align-items: baseline; gap: 0.3rem; color: var(--muted); }
.home-tile-trend.up { color: #2e7d32; }
.home-tile-trend.down { color: var(--clay); }
.home-tile-trend.flat { font-weight: 500; color: var(--muted); }
.home-tile-trend-cap { font-weight: 400; color: var(--muted); }
@container admin (max-width: 360px) { .home-tiles { grid-template-columns: 1fr; } }

.home-create { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0 0 1.4rem; }
.home-create-label { font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin-right: 0.2rem; }
.home-create a { background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.85rem;
  color: var(--ink); }
.home-create a:hover { border-color: var(--accent); color: var(--accent); }

/* Unified home dashboard: one card system, one responsive grid */
.home-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@container admin (max-width: 640px) { .home-grid { grid-template-columns: 1fr; } }
.home-card { background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 0.9rem 1.1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.home-card--wide { grid-column: 1 / -1; }
.home-panel-head { display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 0.5rem; }
.home-panel-head h2 { font-size: 0.9rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink); margin: 0; }
.home-panel-head a { font-size: 0.78rem; }
.home-list { list-style: none; padding: 0; margin: 0; }
.home-list li { padding: 0.4rem 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem;
  font-size: 0.88rem; }
.home-list li:first-child { border-top: 0; }
.home-list strong { font-weight: 600; }
.home-when { margin-left: auto; font-size: 0.78rem; color: var(--muted);
  white-space: nowrap; }
.home-overdue .home-when { color: var(--clay); }
.home-money-headline { font-size: 1.25rem; font-weight: 600; margin: 0 0 0.5rem;
  color: var(--accent); }
.home-money-headline .muted { font-size: 0.85rem; font-weight: 400; }
.home-subhead { font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; margin: 0.8rem 0 0.3rem; }
.home-task-check { display: inline; margin: 0; }
.home-task-check button { background: none; border: 0; cursor: pointer;
  font-size: 1rem; line-height: 1; color: var(--muted); padding: 0; }
.home-task-check button:hover { color: var(--accent); }

/* ---- Home: revenue snapshot + monthly goal bar (chrome from .home-card) ---- */
.home-revenue-figs { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: baseline; }
.home-revenue-figs > div { display: flex; flex-direction: column; gap: 0.1rem; }
.home-revenue-n { font-size: 1.45rem; font-weight: 600; line-height: 1; color: var(--accent); }
.home-revenue-n.muted { color: var(--muted); }
.home-revenue-label { font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); }
.home-goalbar { height: 8px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; margin: 0.7rem 0 0.35rem; }
.home-goalbar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.home-goalbar-cap { font-size: 0.76rem; margin: 0; }

/* ---- Home: pipeline board strip (chrome from .home-card) ---- */
.home-stages { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.home-stage { background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.5rem 0.5rem 0.6rem; display: flex;
  flex-direction: column; gap: 0.3rem; min-width: 0; }
.home-stage-head { display: flex; align-items: baseline;
  justify-content: space-between; gap: 0.3rem; }
.home-stage-label { font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); }
.home-stage-n { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.home-chip { display: block; font-size: 0.74rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 6px; padding: 0.18rem 0.4rem;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-chip:hover { border-color: var(--accent); color: var(--accent); }
.home-chip-more { font-size: 0.7rem; color: var(--muted); padding: 0 0.1rem; }
@container admin (max-width: 900px) { .home-stages { grid-template-columns: repeat(4, 1fr); } }
@container admin (max-width: 560px) { .home-stages { grid-template-columns: repeat(2, 1fr); } }

/* ---- Home: next-steps smart list (chrome from .home-card) ---- */
.home-steplist { list-style: none; padding: 0; margin: 0; }
.home-step { padding: 0.4rem 0; border-top: 1px solid var(--line);
  font-size: 0.9rem; border-left: 3px solid transparent; padding-left: 0.6rem; }
.home-step:first-child { border-top: 0; }
.home-step a { color: var(--ink); }
.home-step a:hover { color: var(--accent); }
.home-step-warn { border-left-color: var(--clay); }
.home-step-info { border-left-color: var(--accent); }

/* ---- Home: schedule horizon toggle ---- */
.home-horizon { display: inline-flex; align-self: center; gap: 0.15rem; }
.home-horizon button { background: transparent; border: 0; border-radius: 8px;
  padding: 0.32rem 0.72rem; font: inherit; font-size: 0.76rem;
  font-weight: 500; line-height: 1; color: var(--muted); cursor: pointer;
  white-space: nowrap; transition: background .15s ease, color .15s ease; }
.home-horizon button:hover { background: var(--paper2); }
.home-horizon button.is-active,
.home-horizon button.is-active:hover { background: var(--accent); color: #fff; }

/* ---- Home: document status pills ---- */
.home-pill { margin-left: auto; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 0.1rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.home-pill-viewed { background: var(--accent); color: #fff; border-color: var(--accent); }
.home-pill-deposit_paid { background: #4a7c59; color: #fff; border-color: #4a7c59; }

/* ---- Home: mini month calendar ---- */
.home-minical { width: 100%; border-collapse: collapse; table-layout: fixed; }
.home-minical th { font-size: 0.64rem; text-transform: uppercase; color: var(--muted);
  font-weight: 600; padding: 0.2rem 0; text-align: center; }
.home-minical td { text-align: center; font-size: 0.8rem; color: var(--ink);
  padding: 0.3rem 0; position: relative; }
.home-minical-empty { color: transparent; }
.home-minical-today { font-weight: 700; color: var(--accent); }
.home-minical-dot { display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin: 1px auto 0; }
.home-empty { padding: 0.4rem 0; }

/* ---- Tasks (strict 1:1 — 3-column board) ---- */
.tk-add-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 16px; }
.tk-add-form input[type=text] { flex: 1 1 240px; }
.tk-add-form input, .tk-add-form select { border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 0.5rem 0.65rem; font: inherit; background: #fff;
  color: var(--ink); }
.tk-add-form button { background: var(--clay); color: #F3F0E2; border: 0;
  border-radius: 999px; padding: 0.55rem 1.2rem; cursor: pointer;
  font: 600 0.82rem/1 var(--font-ui); }
.tk-add-form button:hover { background: #6a2830; }
.tk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  align-items: start; }
.tk-col { background: #EFEADF; border: 1px solid #E4DDCD; border-radius: 14px;
  padding: 14px; }
.tk-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 12px; }
.tk-col-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.tk-col-label { font: 700 0.8rem/1 var(--font-ui); color: var(--ink); }
.tk-col-n { font: 600 0.74rem/1 var(--font-ui); color: var(--muted); }
.tk-col-cards { display: flex; flex-direction: column; gap: 9px; }
.tk-col-empty { font-size: 0.82rem; margin: 0.2rem 0 0; padding: 0 4px; }
.tk-card { display: flex; gap: 11px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 11px; padding: 13px;
  width: 100%; text-align: left; }
.tk-card.is-done { opacity: 0.55; }
.tk-check { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
  border: 1.5px solid #cdd4c4; background: transparent; color: #fff; cursor: pointer;
  display: grid; place-items: center; font-size: 0.7rem; padding: 0; line-height: 1; }
.tk-card.is-done .tk-check { background: #2f7d57; border-color: #2f7d57; }
.tk-card-body { flex: 1; min-width: 0; }
.tk-card-title { font: 600 0.88rem/1.3 var(--font-ui); color: var(--ink); }
.tk-card.is-done .tk-card-title { text-decoration: line-through; }
.tk-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px;
  flex-wrap: wrap; }
.tk-chip { font: 600 0.68rem/1 var(--font-ui); color: var(--ink-soft);
  background: #F1ECE0; padding: 4px 7px; border-radius: 6px; }
a.tk-chip:hover { color: var(--ink); background: #e7e0d0; }
.tk-due { font: 600 0.72rem/1 var(--font-ui); color: var(--muted); }
.tk-due.is-urgent { color: var(--clay); }
@media (max-width: 980px) { .tk-grid { grid-template-columns: 1fr; } }

/* ---- Calendar (strict 1:1 — month grid, 3-bucket legend) ---- */
.cal-top { gap: 16px; flex-wrap: wrap; }
.cal-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cal-leg { display: inline-flex; align-items: center; gap: 6px;
  font: 600 0.74rem/1 var(--font-ui); color: var(--ink-soft); }
.cal-leg-dot { width: 9px; height: 9px; border-radius: 999px; }
.cal-add { margin-left: 4px; }
.cal-main { display: flex; flex-direction: column; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  margin-bottom: 8px; }
.cal-dow span { font: 700 0.66rem/1 var(--font-ui); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); padding: 4px 8px; }
.cal-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr; gap: 8px; min-height: 540px; }
.cal-cell { border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px;
  background: var(--surface); display: flex; flex-direction: column; }
.cal-cell.is-empty { background: transparent; border-color: transparent; }
.cal-cell.is-today { border-color: var(--terra); }
.cal-cell-num { display: flex; justify-content: flex-end; }
.cal-cell-num span { font: 600 0.8rem/1 var(--font-ui); color: var(--ink-soft);
  padding: 3px; }
.cal-cell.is-today .cal-cell-num span { background: var(--terra); color: #F3F0E2;
  padding: 0; width: 22px; height: 22px; border-radius: 999px; display: grid;
  place-items: center; }
.cal-cell-events { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.cal-event { font: 600 0.68rem/1.2 var(--font-ui); border-radius: 6px; padding: 4px 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .cal-grid { gap: 4px; min-height: 0; }
  .cal-cell { padding: 5px; }
  .cal-event { font-size: 0.6rem; }
}

/* ---- Forms builder (Phase 4) ---- */
.form-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.form-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  padding: 0.55rem 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.form-row:first-child { border-top: 0; }
.form-row-title { font-weight: 600; }
.form-row-subs { font-size: 0.82rem; }
.form-when { margin-left: auto; font-size: 0.78rem; color: var(--muted); }
.form-link { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.6rem 0.9rem; margin-bottom: 1.2rem; }
.form-link-label { font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); }
.form-link code { background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.2rem 0.5rem; font-size: 0.85rem; }
.form-settings { margin-bottom: 1.5rem; }
.field-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.field-row { border: 1px solid var(--line); border-radius: 10px;
  padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; background: var(--card);
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 0.3rem 0.6rem; }
.field-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.field-label { font-weight: 500; }
.field-actions { display: flex; gap: 0.3rem; }
.field-actions .inline-form { margin: 0; }
.field-actions button { background: none; border: 1px solid var(--line);
  border-radius: 6px; cursor: pointer; color: var(--muted); padding: 0.1rem 0.45rem;
  font-size: 0.9rem; line-height: 1.2; }
.field-actions button:hover { border-color: var(--accent); color: var(--accent); }
.field-edit, .field-add { grid-column: 1 / -1; }
.field-edit summary, .field-add summary { cursor: pointer; font-size: 0.82rem;
  color: var(--accent); }
.field-add { border: 1px dashed var(--line); border-radius: 10px;
  padding: 0.6rem 0.8rem; margin-top: 0.5rem; }
.field-form { max-width: 460px; }
.chip-req { background: #f3e0d8; color: var(--accent); }
.sub-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@container admin (max-width: 600px) { .sub-cards { grid-template-columns: 1fr; } }
.sub-card { background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 0.8rem 1rem; }
.sub-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  margin-bottom: 0.5rem; }
.sub-when { margin-left: auto; font-size: 0.76rem; color: var(--muted); }
.sub-answers { margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: 0.25rem 0.8rem; font-size: 0.88rem; }
.sub-answers dt { color: var(--muted); }
.sub-answers dd { margin: 0; }
.sub-foot { margin: 0.6rem 0 0; font-size: 0.78rem; }
.danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.req { color: var(--accent); }

/* ── Reports (Phase 5) ─────────────────────────────────────────── */
.report-range { margin: 0 0 1.2rem; }
.report-block { margin: 1.6rem 0; }
.report-block h2 { margin-bottom: 0.6rem; }
.report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@container admin (max-width: 640px) { .report-cols { grid-template-columns: 1fr; } }

.report-table { width: 100%; border-collapse: collapse; }
.report-table th, .report-table td {
  padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); text-align: left; }
.report-table th { font-size: 0.78rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; }
.report-table td.num, .report-table th.num { text-align: right;
  font-variant-numeric: tabular-nums; }
.report-big { font-size: 1.8rem; font-weight: 600; margin: 0 0 0.8rem; }
.report-big .muted { font-size: 0.9rem; font-weight: 400; }

.rev-chart { display: flex; align-items: flex-end; gap: 0.4rem;
  height: 200px; padding-top: 1rem; }
.rev-bar-wrap { flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; }
.rev-val { font-size: 0.68rem; color: var(--muted); margin-bottom: 0.2rem;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.rev-bar { width: 100%; max-width: 36px; background: var(--accent);
  border-radius: 3px 3px 0 0; min-height: 2px; }
.rev-label { font-size: 0.68rem; color: var(--muted); margin-top: 0.3rem;
  white-space: nowrap; }

.stage-tag { display: inline-block; font-size: 0.74rem; font-weight: 600;
  padding: 0.1rem 0.5rem; border-radius: 999px; text-transform: capitalize;
  border-left: 3px solid var(--muted); background: var(--bg); }
.stage-inquiry_received  { border-left-color: #5C6A5E; }
.stage-consultation_call { border-left-color: #2a5db0; }
.stage-proposal_sent     { border-left-color: #9a7a2c; }
.stage-contract_signed   { border-left-color: #7C2F38; }
.stage-retainer_paid     { border-left-color: #2f7d57; }
.stage-session_planning  { border-left-color: #1f6f6b; }
.stage-project_closed    { border-left-color: #143C2F; }
.stage-archived          { border-left-color: #b0a99e; }

.inquiry-dismiss { color: var(--muted); }
.inquiry-dismiss:hover { color: var(--accent); }
tr.inquiry-dismissed td { color: var(--muted); }
tr.inquiry-dismissed td:nth-child(2) { text-decoration: line-through; }

/* sales funnel — reports */
.funnel { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
.funnel-row { display: grid; grid-template-columns: 12.5rem 1fr 11rem;
  align-items: center; gap: 0.8rem; }
.funnel-meta { display: flex; align-items: center; gap: 0.5rem; }
.funnel-conv { font-size: 0.72rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.funnel-bar-track { background: var(--line); border-radius: 6px; min-height: 1.6rem; }
.funnel-bar { display: flex; align-items: center; min-width: fit-content;
  height: 1.6rem; border-radius: 6px; padding: 0 0.55rem; box-sizing: border-box; }
.funnel-n { font-size: 0.74rem; font-weight: 600; color: #fff;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.funnel-side { display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.25; }
.funnel-val { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.84rem; }
.funnel-age { font-size: 0.7rem; }
.funnel-archived { margin: 0.9rem 0 0; font-size: 0.82rem; }
.funnel-note { margin: 0.6rem 0 0; font-size: 0.72rem; line-height: 1.4; }
.funnel-inquiry_received  { background: #5C6A5E; }
.funnel-consultation_call { background: #2a5db0; }
.funnel-proposal_sent     { background: #9a7a2c; }
.funnel-contract_signed   { background: #7C2F38; }
.funnel-retainer_paid     { background: #2f7d57; }
.funnel-session_planning  { background: #1f6f6b; }
.funnel-project_closed    { background: #143C2F; }
@media (max-width: 720px) {
  .funnel-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .funnel-side { align-items: flex-start; }
}

/* reports — strict 1:1 (KPI strip + 2-col grid + dark-green Top clients) */
.admin-shell .rep-top-actions { display: inline-flex; align-items: center; gap: 0.8rem; }
.admin-shell .rep-seg { flex-wrap: nowrap; background: #F1ECE0; border-radius: 999px; padding: 3px; }
.admin-shell .rep-seg .fin-range-pill { border: 0; }

.admin-shell .kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 1.6rem; }
.admin-shell .kpi-card { background: #FFFEF8; border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; }
.admin-shell .kpi-label { font: 600 0.7rem/1 var(--font-ui); letter-spacing: 0.04em;
  text-transform: uppercase; color: #8A9183; }
.admin-shell .kpi-val { font-family: var(--font-display); font-weight: 500;
  font-size: 2rem; line-height: 1; color: var(--ink); margin: 9px 0 7px; }
.admin-shell .kpi-trend { font: 600 0.74rem/1 var(--font-ui); }
.admin-shell .kpi-trend-up { color: #2f7d57; }
.admin-shell .kpi-trend-down { color: var(--clay); }
.admin-shell .kpi-trend-flat { color: #8A9183; }
.admin-shell .kpi-trend-cap { color: #8A9183; font-weight: 500; }

.admin-shell .rep-grid { display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 1.6rem; align-items: start; }
.admin-shell .rep-col { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.admin-shell .rep-card { background: #FFFEF8; border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 22px; }
.admin-shell .rep-card-head { display: flex; align-items: baseline;
  justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }
.admin-shell .rep-card-head h2 { margin: 0; }
.admin-shell .rep-card-meta { font: 600 0.78rem/1 var(--font-ui); }
.admin-shell .rep-card-meta.clay { color: var(--clay); }
.admin-shell .rep-card .report-big { margin-top: 0; }
.admin-shell .rev-bar-now { background: var(--clay); }

.admin-shell .tc-card { background: #143C2F; color: #e6efe7;
  border-radius: 16px; padding: 20px 22px; }
.admin-shell .tc-card h2 { margin: 0 0 0.4rem; color: #F3F0E2; }
.admin-shell .tc-sub { font-family: var(--font-ui); font-size: 0.8rem;
  font-weight: 500; color: #8fb09f; }
.admin-shell .tc-row { display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-top: 1px solid #1C4A3A; text-decoration: none; }
.admin-shell .tc-row:hover .tc-name { text-decoration: underline; }
.admin-shell .tc-rank { font-family: var(--font-display); font-size: 1rem;
  color: #8fb09f; width: 18px; flex: none; }
.admin-shell .tc-name { flex: 1; min-width: 0; font: 600 0.88rem/1.2 var(--font-ui);
  color: #e6efe7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-shell .tc-repeat { font-size: 0.66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; color: #143C2F; background: #8fb09f; border-radius: 999px;
  padding: 0.05rem 0.4rem; }
.admin-shell .tc-amt { font: 700 0.86rem/1 var(--font-ui); color: var(--gold); flex: none; }
.admin-shell .tc-empty { color: #b9cdc0; font-size: 0.85rem; line-height: 1.5; margin: 0.4rem 0 0; }

@media (max-width: 1120px) {
  .admin-shell .rep-grid { grid-template-columns: 1fr; }
  .admin-shell .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .admin-shell .kpi-strip { grid-template-columns: 1fr; }
  .admin-shell .rep-top-actions { flex-wrap: wrap; }
}

/* reference — strict 1:1 (playbook timeline + pricing card + shoot-day kit) */
.admin-shell .rf-grid { display: grid; grid-template-columns: 1fr 320px;
  gap: 1.6rem; align-items: start; }
.admin-shell .rf-side { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.admin-shell .rf-card { background: #FFFEF8; border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 24px; }
.admin-shell .rf-card > h2 { margin: 0 0 1.1rem; }

.admin-shell .rf-stage { border-left: 2px solid #E6DFCF; padding: 2px 0 18px 18px;
  position: relative; }
.admin-shell .rf-stage:last-child { padding-bottom: 0; }
.admin-shell .rf-dot { position: absolute; left: -7px; top: 3px; width: 12px;
  height: 12px; border-radius: 999px; border: 2px solid #FFFEF8; }
.admin-shell .rf-stage-name { font: 700 0.92rem/1.2 var(--font-ui); color: var(--ink); }
.admin-shell .rf-stage-note { margin: 7px 0 0; font: 500 0.85rem/1.55 var(--font-ui);
  color: var(--ink-soft); }
.admin-shell .rf-voice { margin: 9px 0 0; font-family: var(--font-display);
  font-style: italic; font-size: 1rem; color: var(--clay); }

.admin-shell .rf-pricing { background: #143C2F; color: #e6efe7;
  border-radius: 16px; padding: 20px 22px; }
.admin-shell .rf-pricing h2 { margin: 0 0 0.9rem; color: #F3F0E2; }
.admin-shell .rf-price-row { display: flex; justify-content: space-between;
  gap: 0.8rem; padding: 9px 0; border-top: 1px solid #1C4A3A; }
.admin-shell .rf-price-item { font: 600 0.84rem/1.2 var(--font-ui); color: #cfe0d4; }
.admin-shell .rf-price-amt { font: 700 0.84rem/1.2 var(--font-ui); color: var(--gold);
  white-space: nowrap; }
.admin-shell .rf-price-empty { color: #b9cdc0; font-size: 0.85rem; margin: 0.6rem 0 0; }
.admin-shell .rf-price-note { margin: 0.9rem 0 0; font-size: 0.72rem; line-height: 1.45;
  color: #8fb09f; }

.admin-shell .rf-kit-list { display: flex; flex-direction: column; gap: 9px; }
.admin-shell .rf-kit-row { display: flex; gap: 10px; align-items: center;
  font: 500 0.85rem/1.3 var(--font-ui); color: var(--ink); }
.admin-shell .rf-check { color: #2f7d57; font-weight: 700; }

@media (max-width: 1000px) {
  .admin-shell .rf-grid { grid-template-columns: 1fr; }
}

/* pipeline aging — kanban stalled-deal cue (stage_changed_at, migration 032) */
.kanban-card-stale { border-color: #c79a3e; box-shadow: inset 3px 0 0 #c79a3e; }
.kanban-card-age { font-variant-numeric: tabular-nums; }

/* ── Studio: pipeline value summary ──────────────────────────────────── */
.pipeline-step-val { display: inline-block; margin-left: 0.3rem;
  font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--accent); }
.pipeline-value { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem; margin: -0.4rem 0 1rem; font-size: 0.86rem; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.pipeline-value strong { font-size: 1.02rem; }
.pipeline-value-booked { color: #4a7c59; }
.pipeline-value-note { flex-basis: 100%; font-size: 0.74rem; }

/* ── Studio: sessions toolbar (search / filter / sort / view) ────────── */
.studio-toolbar { display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem; margin: 0.2rem 0 0.9rem; }
.studio-search { flex: 1 1 220px; min-width: 160px; padding: 0.4rem 0.6rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--ink); font-size: 0.86rem; }
.studio-filter { padding: 0.4rem 0.5rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink);
  font-size: 0.82rem; }
.studio-view-toggle { display: inline-flex; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; }
.studio-view-toggle button { background: var(--card); color: var(--muted);
  border: 0; padding: 0.4rem 0.7rem; font-size: 0.82rem; cursor: pointer; }
.studio-view-toggle button + button { border-left: 1px solid var(--line); }
.studio-view-toggle button.is-active { background: var(--accent); color: #fff; }
.studio-match { font-size: 0.8rem; margin-left: auto; }

/* Saved-view chips — quick filters layered over search + stage. */
.studio-views { display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: -0.4rem 0 0.9rem; }
.studio-chip { background: var(--card); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; line-height: 1.2; }
.studio-chip:hover { border-color: var(--accent); color: var(--accent); }
.studio-chip.is-active { background: var(--accent); color: #fff;
  border-color: var(--accent); }

/* Scheduling / Bookings / Calendar shared sub-tab strip */
.sched-tabs { display: inline-flex; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; }
.sched-tabs .sched-tab { padding: 0.4rem 0.9rem; font-size: 0.85rem;
  font-weight: 500; color: var(--ink-soft); background: var(--card);
  white-space: nowrap; }
.sched-tabs .sched-tab + .sched-tab { border-left: 1px solid var(--line); }
.sched-tabs .sched-tab:hover { background: var(--paper2); text-decoration: none; }
.sched-tabs .sched-tab.is-active,
.sched-tabs .sched-tab.is-active:hover { background: var(--accent); color: #fff; }

.studio-hidden { display: none !important; }
.kanban-col-body { min-height: 12px; }
.kanban-col-dim { opacity: 0.4; }
.kanban-col-empty .kanban-col-body::after { content: "—"; display: block;
  color: var(--muted); font-size: 0.8rem; padding: 0.2rem 0.3rem; }

/* drag-and-drop */
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card-dragging { opacity: 0.5; cursor: grabbing; }
.kanban-col-over { outline: 2px dashed var(--accent); outline-offset: -2px;
  background: var(--card); }
.kanban-card-saveerr { border-color: var(--clay); }

/* list view */
.studio-list .studio-list-stage { font-size: 0.8rem; color: var(--muted); }
.studio-list tr.studio-row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--clay); }
.studio-empty { padding: 0.6rem 0.2rem; }

/* ── Galleries dashboard: summary + cover grid ───────────────────────── */
.gal-compose { display: none; margin: 0 0 1.2rem; }
.gal-compose:target,
.gal-compose.is-open { display: block; }
.gal-compose-cancel { align-self: center; color: var(--ink-soft); font: 500 0.82rem/1 var(--font-ui); }

.gal-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 0.2rem 0 1.1rem; }
.gal-pill { border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); cursor: pointer; padding: 7px 15px; border-radius: 999px;
  font: 600 0.78rem/1 var(--font-ui); display: inline-flex; align-items: center; gap: 6px; }
.gal-pill span { opacity: 0.55; font-variant-numeric: tabular-nums; }
.gal-pill:hover { border-color: var(--line-strong); }
.gal-pill.is-active { background: var(--terra-deep); color: #F3F0E2; border-color: var(--terra-deep); }
.gal-pill.is-active span { opacity: 0.7; }

.gal-grid { display: grid; gap: 18px; margin: 0.2rem 0 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.gal-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: 15px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.gal-card:hover { transform: translateY(-5px); border-color: rgba(224,164,59,.6);
  box-shadow: 0 26px 48px -28px rgba(40,30,12,.4); }
.gal-card-cover { position: relative; display: block; aspect-ratio: 4 / 3;
  background: var(--surface-sunk); overflow: hidden; }
.gal-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.gal-card:hover .gal-card-cover img { transform: scale(1.05); }
.gal-card-nocover { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: var(--muted);
  font-size: 0.8rem; }
.gal-card-badge { position: absolute; top: 10px; left: 10px; font-size: 0.62rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.3rem 0.55rem; border-radius: 999px; }
.gal-status-published { color: #2f7d57; background: #e1f2e9; }
.gal-status-draft { color: #5C6A5E; background: #ecefe6; }
.gal-badge-expired { left: auto; right: 10px; color: #7C2F38; background: #f3e3e5; }
.gal-card-body { padding: 0.85rem 1rem 1rem; display: flex;
  flex-direction: column; gap: 0.25rem; }
.gal-card-title { font-family: var(--font-display); font-weight: 500;
  font-size: 1.1rem; line-height: 1.2; color: var(--ink); }
.gal-card-title:hover { color: var(--terra); }
.gal-card-client { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }
.gal-card-stats { margin: 0.25rem 0 0; display: flex; flex-wrap: wrap;
  gap: 0.6rem; font-size: 0.8rem; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.gal-card-exp { margin: 0.1rem 0 0; font-size: 0.78rem; }
.gal-card-foot { margin: 0.45rem 0 0; padding-top: 0.55rem;
  border-top: 1px solid var(--line-faint); font-size: 0.78rem; color: var(--muted); }
.gal-list th:nth-child(4), .gal-list th:nth-child(5),
.gal-list td:nth-child(4), .gal-list td:nth-child(5) {
  text-align: right; font-variant-numeric: tabular-nums; }

/* ── Galleries grid — strict 1:1 with the Admin Galleries prototype ───── */
.admin-shell .gx-filters { display: flex; gap: 7px; margin: 0.2rem 0 20px; flex-wrap: wrap; }
.admin-shell .gx-pill { border: 0; cursor: pointer; padding: 7px 15px; border-radius: 999px;
  font: 600 0.78rem/1 var(--font-ui); background: #FFFEF8; color: #5C6A5E;
  box-shadow: inset 0 0 0 1px #E1DDCE; }
.admin-shell .gx-pill span { opacity: 0.55; font-variant-numeric: tabular-nums; }
.admin-shell .gx-pill.is-active { background: #143C2F; color: #F3F0E2; box-shadow: none; }
.admin-shell .gx-pill.is-active span { opacity: 0.7; }

.admin-shell .gx-grid { display: grid; gap: 18px; margin: 0.2rem 0 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.admin-shell .gx-card { text-decoration: none; background: #FFFEF8; border: 1px solid #E1DDCE;
  border-radius: 15px; overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease, border-color 0.35s ease; }
.admin-shell .gx-card:hover { transform: translateY(-5px); border-color: rgba(237,178,60,.6);
  box-shadow: 0 26px 48px -28px rgba(40,30,12,0.4); }
.admin-shell .gx-card-cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e6ddd0; }
.admin-shell .gx-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.admin-shell .gx-card:hover .gx-card-cover img { transform: scale(1.05); }
.admin-shell .gx-card-nocover { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: var(--muted);
  font: 500 0.78rem/1 var(--font-ui); }
.admin-shell .gx-badge { position: absolute; top: 10px; left: 10px;
  font: 700 0.62rem/1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; }
.admin-shell .gx-favs { position: absolute; top: 10px; right: 10px;
  font: 600 0.68rem/1 var(--font-ui); color: #F3F0E2; background: rgba(20,14,9,0.5);
  backdrop-filter: blur(4px); padding: 5px 9px; border-radius: 999px; }
.admin-shell .gx-card-body { padding: 14px 16px 16px; }
.admin-shell .gx-card-title { font-family: var(--font-display); font-weight: 500;
  font-size: 1.12rem; color: #18241E; line-height: 1.2; }
.admin-shell .gx-card-client { font: 500 0.8rem/1.3 var(--font-ui); color: #5C6A5E; margin-top: 4px; }
.admin-shell .gx-card-foot { display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #EFEAE0; }
.admin-shell .gx-card-photos { font: 600 0.76rem/1 var(--font-ui); color: #8A9183; }
.admin-shell .gx-card-date { font: 600 0.76rem/1 var(--font-ui); }

/* ── Gallery detail — strict 1:1 with the Admin Gallery prototype ──────── */
.admin-shell .gd-topbar .pgtop-lead { display: flex; align-items: center; gap: 13px; min-width: 0; }
.admin-shell .gd-back { text-decoration: none; width: 34px; height: 34px; flex: none;
  border: 1px solid #E1DDCE; border-radius: 9px; display: grid; place-items: center;
  color: #5C6A5E; background: #FFFEF8; }
.admin-shell .gd-lead-text { min-width: 0; }
.admin-shell .gd-eyebrow { margin: 0 0 2px; font: 600 0.68rem/1 var(--font-ui);
  letter-spacing: 0.06em; text-transform: uppercase; color: #8A9183; }
.admin-shell .gd-status { font: 700 0.64rem/1 var(--font-ui); letter-spacing: 0.04em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px; flex: none; }
.admin-shell .gd-status.is-live { color: #2f7d57; background: #e1f2e9; }
.admin-shell .gd-status.is-draft { color: #8A9183; background: #EFEAE0; }
.admin-shell .gd-actions { display: flex; align-items: center; gap: 10px; }

.admin-shell .gd-cover { position: relative; height: 200px;
  margin: clamp(18px, 2.4vw, 26px) 0 0; border-radius: 16px; overflow: hidden; background: #143C2F; }
.admin-shell .gd-cover img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.92; }
.admin-shell .gd-cover-shade { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,26,19,0.78) 0%, rgba(12,26,19,0.25) 60%, transparent 100%); }
.admin-shell .gd-cover-text { position: absolute; left: 0; bottom: 0; padding: clamp(20px, 3vw, 30px); }
.admin-shell .gd-cover-text h2 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.3rem); color: #F3F0E2; }
.admin-shell .gd-cover-text p { margin: 8px 0 0; font: 500 0.86rem/1 var(--font-ui); color: #cfe0d4; }

.admin-shell .gd-grid { display: grid; grid-template-columns: 1fr 300px;
  gap: clamp(18px, 2.4vw, 28px); padding: clamp(18px, 2.4vw, 26px) 0 0; align-items: start; }
.admin-shell .gd-left { min-width: 0; }
@media (max-width: 1240px) {
  .admin-shell .gd-grid { grid-template-columns: 1fr; }
  .admin-shell .gd-rail { display: none; }
}

.admin-shell .gd-stats { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 20px; }
.admin-shell .gd-stat { background: #FFFEF8; border: 1px solid #E1DDCE; border-radius: 12px;
  padding: 14px 16px; }
.admin-shell .gd-stat-n { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.admin-shell .gd-stat-l { display: block; font: 600 0.7rem/1 var(--font-ui); letter-spacing: 0.03em;
  text-transform: uppercase; color: #8A9183; margin-top: 7px; }
@media (max-width: 640px) { .admin-shell .gd-stats { grid-template-columns: repeat(2, 1fr); } }

.admin-shell .gd-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-shell .gd-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-shell .gd-pill { border: 1px solid #E1DDCE; cursor: pointer; padding: 7px 14px;
  border-radius: 999px; font: 600 0.78rem/1 var(--font-ui); background: #FFFEF8; color: #5C6A5E; }
.admin-shell .gd-pill span { opacity: 0.6; }
.admin-shell .gd-pill.is-active { background: #143C2F; color: #F3F0E2; border-color: #143C2F; }
.admin-shell .gd-favtoggle { display: inline-flex; align-items: center; gap: 7px; background: #FFFEF8;
  border: 1px solid #E1DDCE; border-radius: 999px; padding: 7px 14px; font: 600 0.78rem/1 var(--font-ui);
  color: #18241E; cursor: pointer; }
.admin-shell .gd-favtoggle .gd-heart { color: #EDB23C; }
.admin-shell .gd-favtoggle.is-active { background: #f7ecd2; border-color: #EDB23C; }

.admin-shell .gd-bulk { display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font: 500 0.8rem/1 var(--font-ui); }
.admin-shell .gd-btn-sm { padding: 6px 12px; border-radius: 8px; border: 1px solid #E1DDCE;
  background: #FFFEF8; font: 600 0.78rem/1 var(--font-ui); cursor: pointer; }

.admin-shell .gd-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; align-items: start; }
@media (max-width: 900px) { .admin-shell .gd-masonry { grid-template-columns: repeat(2, 1fr); } }
.admin-shell .gd-tile { position: relative; border-radius: 11px; overflow: visible; margin: 0;
  aspect-ratio: 4 / 5; }
.admin-shell .gd-tile.gd-hidden { display: none; }
.admin-shell .gd-tile > img,
.admin-shell .gd-tile-ph { width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 11px; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.admin-shell .gd-tile-ph { display: grid; place-items: center; background: #e6ddd0; color: #8A9183;
  font: 600 0.74rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.04em; }
.admin-shell .gd-tile:hover > img { transform: scale(1.04); }
.admin-shell .gd-tile-fav { position: absolute; top: 9px; right: 9px; min-width: 28px; height: 28px;
  padding: 0 8px; border-radius: 999px; background: rgba(20,14,9,0.5); backdrop-filter: blur(4px);
  display: grid; place-items: center; color: #EDB23C; font: 600 0.82rem/28px var(--font-ui); }
.admin-shell .gd-tile-vid { position: absolute; top: 9px; left: 9px; width: 26px; height: 26px;
  border-radius: 999px; background: rgba(20,14,9,0.5); display: grid; place-items: center;
  color: #F3F0E2; font-size: 0.7rem; }
.admin-shell .gd-ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 11px;
  border-radius: 0 0 11px 11px; opacity: 0; transition: opacity 0.25s ease;
  background: linear-gradient(transparent, rgba(12,20,14,0.72)); pointer-events: none; }
.admin-shell .gd-tile:hover .gd-ov { opacity: 1; }
.admin-shell .gd-ov-name { font: 600 0.74rem/1.2 var(--font-ui); color: #F3F0E2;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-shell .gd-manage { position: absolute; top: 9px; left: 9px; z-index: 5; }
.admin-shell .gd-tile-vid + .gd-ov + .gd-manage,
.admin-shell .gd-manage { top: 9px; }
.admin-shell .gd-gear { list-style: none; width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,0.92); color: #18241E; display: grid; place-items: center;
  font-size: 0.85rem; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; }
.admin-shell .gd-gear::-webkit-details-marker { display: none; }
.admin-shell .gd-tile:hover .gd-gear,
.admin-shell .gd-manage[open] .gd-gear { opacity: 1; }
.admin-shell .gd-manage[open] { z-index: 20; }
.admin-shell .gd-manage-body { position: absolute; top: 34px; left: 0; width: 230px;
  background: #FFFEF8; border: 1px solid #E1DDCE; border-radius: 12px; padding: 12px;
  box-shadow: 0 14px 34px rgba(20,36,30,0.18); }
.admin-shell .gd-manage-head { margin: 0 0 8px; font: 600 0.72rem/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: 0.04em; color: #8A9183; }
.admin-shell .gd-mrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px; font: 500 0.78rem/1 var(--font-ui); }
.admin-shell .gd-mrow select { max-width: 100%; }

.admin-shell .gd-empty { margin: 1rem 0; }

/* Right delivery rail */
.admin-shell .gd-rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.admin-shell .gd-live { background: #143C2F; color: #e6efe7; border-radius: 16px; padding: 22px; }
.admin-shell .gd-live-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.admin-shell .gd-live-dot { width: 8px; height: 8px; border-radius: 999px; background: #5fd29a;
  box-shadow: 0 0 8px #5fd29a; }
.admin-shell .gd-live h3 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 1.2rem; color: #F3F0E2; }
.admin-shell .gd-live-label { font: 600 0.64rem/1 var(--font-ui); letter-spacing: 0.08em;
  text-transform: uppercase; color: #8fb09f; }
.admin-shell .gd-live-link { display: flex; align-items: center; gap: 8px; margin: 8px 0 16px;
  background: #0f2f25; border: 1px solid #295142; border-radius: 9px; padding: 9px 12px; }
.admin-shell .gd-live-url { flex: 1; min-width: 0; font: 500 0.78rem/1 var(--font-ui); color: #cfe0d4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-shell .gd-copy { flex: none; background: var(--gold); color: #143C2F; border: 0; border-radius: 7px;
  padding: 5px 10px; font: 700 0.7rem/1 var(--font-ui); cursor: pointer; }
.admin-shell .gd-live-tiles { display: flex; gap: 10px; }
.admin-shell .gd-live-tile { flex: 1; background: #0f2f25; border: 1px solid #295142;
  border-radius: 9px; padding: 10px 12px; }
.admin-shell .gd-live-k { font: 600 0.62rem/1 var(--font-ui); letter-spacing: 0.06em;
  text-transform: uppercase; color: #8fb09f; }
.admin-shell .gd-live-v { font-family: var(--font-display); font-size: 1.3rem; color: #F3F0E2; margin-top: 4px; }
.admin-shell .gd-live-v.gd-pin { letter-spacing: 0.14em; }

.admin-shell .gd-deliver, .admin-shell .gd-proof { background: #FFFEF8; border: 1px solid #E1DDCE;
  border-radius: 16px; padding: 20px 22px; }
.admin-shell .gd-deliver h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 500;
  font-size: 1.2rem; color: #18241E; }
.admin-shell .gd-deliver-row { width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border: 0; border-top: 1px solid #EFEAE0; background: transparent; cursor: pointer;
  text-align: left; text-decoration: none; }
.admin-shell .gd-deliver-ic { width: 32px; height: 32px; flex: none; border-radius: 8px;
  display: grid; place-items: center; font-size: 0.9rem; }
.admin-shell .gd-deliver-txt { flex: 1; min-width: 0; }
.admin-shell .gd-deliver-l { display: block; font: 600 0.84rem/1.2 var(--font-ui); color: #18241E; }
.admin-shell .gd-deliver-m { display: block; font: 500 0.74rem/1.2 var(--font-ui); color: #8A9183; margin-top: 2px; }
.admin-shell .gd-deliver-arr { color: #c3bba8; }

.admin-shell .gd-proof-head { display: flex; align-items: baseline; justify-content: space-between; }
.admin-shell .gd-proof-head h3 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 1.2rem; color: #18241E; }
.admin-shell .gd-proof-n { font: 600 0.76rem/1 var(--font-ui); color: #2f7d57; }
.admin-shell .gd-proof-bar { height: 7px; border-radius: 999px; background: #EFEAE0; overflow: hidden;
  margin: 14px 0 10px; }
.admin-shell .gd-proof-fill { height: 100%; background: #EDB23C; border-radius: 999px; }
.admin-shell .gd-proof-note { margin: 0; font: 500 0.8rem/1.5 var(--font-ui); color: #5C6A5E; }

/* Management panels below the grid */
.admin-shell .gd-panels { margin-top: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 12px; }
.admin-shell .gd-panel { background: #FFFEF8; border: 1px solid #E1DDCE; border-radius: 14px;
  padding: 4px 20px; }
.admin-shell .gd-panel > summary { cursor: pointer; padding: 14px 0; font: 600 0.92rem/1 var(--font-ui);
  color: #18241E; list-style: none; }
.admin-shell .gd-panel > summary::-webkit-details-marker { display: none; }
.admin-shell .gd-panel > summary::before { content: "+ "; color: #8A9183; }
.admin-shell .gd-panel[open] > summary::before { content: "– "; }
.admin-shell .gd-panel[open] { padding-bottom: 18px; }
.admin-shell .gd-delete { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .admin-shell .gd-tile > img { transition: none; }
}

/* ── Scheduling home — strict 1:1 with the Admin Scheduling prototype ──── */
.admin-shell .sch-compose { display: none; margin: 0 0 1.2rem; }
.admin-shell .sch-compose:target,
.admin-shell .sch-compose.is-open { display: block; }
.admin-shell .sch-compose-cancel { align-self: center; color: var(--ink-soft);
  font: 500 0.82rem/1 var(--font-ui); }

.admin-shell .sch-grid { display: grid; grid-template-columns: 1fr 320px;
  gap: clamp(18px, 2.4vw, 28px); align-items: start; }
.admin-shell .sch-col { display: flex; flex-direction: column;
  gap: clamp(18px, 2.2vw, 24px); min-width: 0; }
@media (max-width: 1120px) { .admin-shell .sch-grid { grid-template-columns: 1fr; } }

.admin-shell .sch-h2 { font-family: var(--font-display); font-weight: 500;
  font-size: 1.3rem; color: #18241E; margin: 0 0 14px; }
.admin-shell .sch-sub { font: 500 0.8rem/1 var(--font-ui); color: #8A9183; margin: -10px 0 14px; }
.admin-shell .sch-card { background: #FFFEF8; border: 1px solid #E1DDCE;
  border-radius: 16px; padding: 20px 24px; }

.admin-shell .sch-hero { background: #143C2F; color: #e6efe7; border-radius: 16px;
  padding: 22px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.admin-shell .sch-hero-ico { width: 46px; height: 46px; flex: none; border-radius: 12px;
  background: #1C4A3A; color: var(--gold); display: grid; place-items: center; font-size: 1.3rem; }
.admin-shell .sch-hero-body { flex: 1; min-width: 180px; }
.admin-shell .sch-hero-body h2 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 1.25rem; color: #F3F0E2; }
.admin-shell .sch-hero-body p { margin: 5px 0 0; font: 500 0.82rem/1 var(--font-ui); color: #8fb09f; }
.admin-shell .sch-hero-body code { background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 5px; }
.admin-shell .sch-hero-copy { flex: none; padding: 0.7em 1.3em; background: var(--gold);
  color: #143C2F; border: 0; border-radius: 999px; font: 700 0.82rem/1 var(--font-ui); cursor: pointer; }

.admin-shell .sch-types { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .admin-shell .sch-types { grid-template-columns: 1fr; } }
.admin-shell .sch-type { background: #FFFEF8; border: 1px solid #E1DDCE; border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.admin-shell .sch-type.is-off { opacity: 0.55; }
.admin-shell .sch-type-top { display: flex; align-items: flex-start; gap: 11px; }
.admin-shell .sch-type-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; margin-top: 5px; }
.admin-shell .sch-type-name { flex: 1; min-width: 0; text-decoration: none; display: block; }
.admin-shell .sch-type-name > span:first-child { display: block; font: 700 0.96rem/1.2 var(--font-ui); color: #18241E; }
.admin-shell .sch-type-meta { display: block; font: 500 0.8rem/1.3 var(--font-ui); color: #5C6A5E; margin-top: 3px; }
.admin-shell .sch-type-foot { display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid #EFEAE0; padding-top: 12px; }
.admin-shell .sch-type-up { font: 600 0.82rem/1 var(--font-ui); color: #8A9183; }
.admin-shell .sch-type-copy { background: none; border: 0; cursor: pointer;
  font: 600 0.78rem/1 var(--font-ui); color: #7C2F38; }
.admin-shell .sch-type-off { font: 600 0.78rem/1 var(--font-ui); color: #a99f90; }

.admin-shell .sch-switch { flex: none; width: 38px; height: 22px; border-radius: 999px;
  background: #d8d0bf; border: 0; padding: 0; position: relative; cursor: pointer; }
.admin-shell .sch-switch.is-on { background: #2f7d57; }
.admin-shell .sch-switch.sch-switch-green.is-on { background: #143C2F; }
.admin-shell .sch-switch span { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 999px; background: #fff; transition: left 0.2s ease; }
.admin-shell .sch-switch.is-on span { left: 18px; }

.admin-shell .sch-week { display: flex; flex-direction: column; }
.admin-shell .sch-day { display: flex; align-items: center; gap: 14px; padding: 11px 0;
  border-top: 1px solid #EFEAE0; }
.admin-shell .sch-day-label { font: 600 0.86rem/1 var(--font-ui); color: #18241E; width: 42px; flex: none; }
.admin-shell .sch-day-hours { font: 500 0.84rem/1 var(--font-ui); color: #18241E; }
.admin-shell .sch-day.is-off .sch-day-hours { color: #a99f90; }

.admin-shell .sch-rail .sch-card { padding: 20px; }
.admin-shell .sch-cal-title { font-size: 1.2rem; }
.admin-shell .sch-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.admin-shell .sch-dow { font: 700 0.64rem/1 var(--font-ui); color: #8A9183; padding: 4px 0; }
.admin-shell .sch-cell { font: 600 0.78rem/1 var(--font-ui); color: #5C6A5E;
  padding: 7px 0 5px; border-radius: 8px; }
.admin-shell .sch-cell.is-empty { color: transparent; }
.admin-shell .sch-cell.is-today { background: #7C2F38; color: #F3F0E2; }
.admin-shell .sch-cell-dot { display: block; width: 5px; height: 5px; border-radius: 999px;
  background: var(--gold); margin: 1px auto 0; }

.admin-shell .sch-up { display: flex; gap: 13px; padding: 12px 0; border-top: 1px solid #EFEAE0; }
.admin-shell .sch-up:first-of-type { border-top: 0; padding-top: 0; }
.admin-shell .sch-up-chip { flex: none; width: 46px; text-align: center; background: #E7ECDD;
  border-radius: 9px; padding: 6px 0; }
.admin-shell .sch-up-chip.is-soon { background: #f3e3e5; }
.admin-shell .sch-up-day { font-family: var(--font-display); font-size: 1.15rem; color: #2f7d57; line-height: 1; }
.admin-shell .sch-up-chip.is-soon .sch-up-day { color: #7C2F38; }
.admin-shell .sch-up-mon { font: 600 0.58rem/1 var(--font-ui); letter-spacing: 0.06em;
  text-transform: uppercase; color: #2f7d57; margin-top: 3px; }
.admin-shell .sch-up-chip.is-soon .sch-up-mon { color: #7C2F38; }
.admin-shell .sch-up-body { flex: 1; min-width: 0; }
.admin-shell .sch-up-client { font: 600 0.88rem/1.2 var(--font-ui); color: #18241E; }
.admin-shell .sch-up-type { font: 500 0.79rem/1.3 var(--font-ui); color: #5C6A5E; margin-top: 3px; }
.admin-shell .sch-up-time { font: 600 0.74rem/1 var(--font-ui); color: #5C6A5E; margin-top: 5px; }
.admin-shell .sch-up-time.is-soon { color: #7C2F38; }
.admin-shell .sch-up-all { display: inline-block; margin-top: 14px; font: 600 0.78rem/1 var(--font-ui);
  color: #7C2F38; text-decoration: none; }

/* ── Scheduler: admin console ─────────────────────────────────────────── */
.linkbtn {
  background: none; color: var(--accent); border: 0; padding: 0; margin: 0;
  font-size: 0.9rem; cursor: pointer;
}
.linkbtn.danger { color: #a33; }
.sched-block { margin: 2rem 0; }
.sched-block h2 { font-size: 1.1rem; margin: 0 0 0.8rem; }
.sched-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.sched-table th, .sched-table td {
  text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.sched-table th { color: var(--muted); font-weight: 500; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; }
.sched-past td { color: var(--muted); }
.sched-off td { color: var(--muted); text-decoration: line-through; }
.sched-note td { padding-top: 0; color: var(--muted); font-size: 0.85rem; }
.sched-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 0.4rem; vertical-align: middle; }

.sched-newevent, .sched-override-add { display: flex; flex-wrap: wrap; gap: 0.6rem;
  align-items: end; margin-top: 0.8rem; }
.sched-newevent label, .sched-override-add label, .sched-day label {
  display: flex; flex-direction: column; font-size: 0.8rem; color: var(--muted);
  gap: 0.25rem; }
.sched-newevent input, .sched-override-add input, .sched-override-add select,
.sched-day input {
  padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--ink); font-size: 0.92rem;
}

.sched-week { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.8rem 0; }
.sched-day { display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0;
  border-bottom: 1px solid var(--line); }
.sched-dayname { width: 3rem; font-weight: 500; }
.sched-day input[type=time] { width: auto; }
.sched-blocked { color: #a33; font-size: 0.85rem; }
.sched-overrides { list-style: none; padding: 0; margin: 0.6rem 0; }
.sched-overrides li { display: flex; align-items: center; gap: 0.8rem;
  padding: 0.35rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.sched-actions { display: flex; gap: 1rem; align-items: center; }

.sched-eventform { margin: 1.2rem 0; }
.sched-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem; }
.sched-grid label, .sched-desc { display: flex; flex-direction: column;
  font-size: 0.82rem; color: var(--muted); gap: 0.3rem; }
.sched-grid input, .sched-desc textarea {
  padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--ink); font-size: 0.95rem; }
.sched-desc { margin: 1rem 0; }
.sched-eventfoot { display: flex; gap: 1.4rem; align-items: center;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ── Scheduler: public booking funnel ─────────────────────────────────── */
.book-events { list-style: none; padding: 0; margin: 1.5rem 0; display: grid;
  gap: 0.8rem; }
.book-event-card a { display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.3rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; color: var(--ink); transition: border-color 0.15s; }
.book-event-card a:hover { border-color: var(--accent); }
.book-event-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); }
.book-event-body { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.book-event-meta { color: var(--muted); font-size: 0.88rem; }
.book-event-desc { color: var(--muted); font-size: 0.88rem; margin-top: 0.2rem; }
.book-event-go { color: var(--accent); font-size: 1.3rem; }

/* Calendly-style booking funnel: host rail + two-step picker, on-brand skin */
.book-page { padding-bottom: 4rem; }
.book-card { display: grid; grid-template-columns: minmax(0, 290px) 1fr;
  align-items: stretch; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; margin: 1.4rem 0;
  box-shadow: 0 1px 3px rgba(28,24,20,0.05); }

.book-rail { padding: 1.6rem 1.5rem; border-right: 1px solid var(--line);
  background: var(--paper2, var(--bg)); }
.book-rail-nav { margin-bottom: 0.6rem; }
.book-rail-nav a { font-size: 0.85rem; color: var(--muted); }
.book-rail-nav a:hover { color: var(--accent); }
.book-rail-host { color: var(--muted); font-size: 0.82rem; margin: 0.4rem 0 0.15rem;
  text-transform: uppercase; letter-spacing: 0.06em; }
.book-rail-title { font-family: var(--serif, serif); font-size: 1.4rem;
  line-height: 1.2; margin: 0 0 1.1rem; color: var(--ink); }
.book-meta { list-style: none; padding: 0; margin: 0; display: flex;
  flex-direction: column; gap: 0.55rem; }
.book-meta li { display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.92rem; color: var(--ink); }
.book-meta-ic { flex: 0 0 1.1rem; color: var(--accent); text-align: center;
  line-height: 1.4; }
.book-meta-when { font-weight: 600; }
.book-tzform { display: flex; gap: 0.4rem; align-items: center; flex: 1; min-width: 0; }
.book-tzform select { flex: 1; min-width: 0; padding: 0.3rem 0.4rem;
  border: 1px solid var(--line); border-radius: 7px; background: var(--card);
  color: var(--ink); font: inherit; font-size: 0.85rem; }
.book-tzgo { padding: 0.3rem 0.6rem; }
.book-rail-desc { color: var(--muted); font-size: 0.9rem; margin: 1.1rem 0 0;
  line-height: 1.5; }
.book-resked { color: var(--accent); font-size: 0.88rem; margin: 1rem 0 0; }

.book-main { padding: 1.6rem 1.7rem; min-width: 0; }
.book-step-h { font-family: var(--serif, serif); font-size: 1.2rem;
  margin: 0 0 1.1rem; color: var(--ink); }
.book-pick { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 1.8rem;
  align-items: start; }

.book-cal-nav { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.7rem; }
.book-cal-nav a { font-size: 1.15rem; padding: 0 0.5rem; color: var(--ink); }
.book-cal-nav a:hover { color: var(--accent); }
.book-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.book-grid th { color: var(--muted); font-weight: 500; font-size: 0.7rem;
  padding: 0.3rem 0; text-transform: uppercase; letter-spacing: 0.04em; }
.book-cell { text-align: center; padding: 3px; height: 2.7rem; }
.book-empty { background: none; }
.book-open a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  margin: 0 auto; border-radius: 50%; background: var(--card);
  border: 1px solid var(--line); color: var(--accent); font-weight: 600;
  transition: background 0.12s, border-color 0.12s, color 0.12s; }
.book-open a:hover { border-color: var(--accent); background: var(--cream, var(--bg)); }
.book-closed { color: color-mix(in srgb, var(--muted) 45%, transparent); }
.book-sel a { background: var(--accent); color: #fff; border-color: var(--accent); }
.book-today a { box-shadow: 0 0 0 2px var(--accent); }
.book-today.book-closed { color: var(--accent); font-weight: 600; }

.book-slots { min-width: 0; }
.book-slots-h { font-size: 0.95rem; margin: 0 0 0.8rem; color: var(--ink); }
.book-slots-hint { font-size: 0.9rem; }
.book-slot-list { display: flex; flex-direction: column; gap: 0.5rem;
  max-height: 22rem; overflow-y: auto; padding-right: 2px; }
.book-slot { display: block; text-align: center; padding: 0.7rem 0.4rem;
  background: var(--card); border: 1px solid var(--accent); border-radius: 8px;
  color: var(--accent); font-size: 0.92rem; font-weight: 600;
  transition: background 0.12s, color 0.12s; }
.book-slot:hover { background: var(--cream, var(--bg)); }
.book-slot-sel { background: var(--accent); color: #fff; border-color: var(--accent); }

.book-confirm { max-width: 30rem; }
.book-confirm label { display: flex; flex-direction: column; gap: 0.3rem;
  margin-bottom: 0.7rem; font-size: 0.9rem; align-items: stretch; }
.book-confirm input, .book-confirm textarea {
  padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit; }

@media (max-width: 760px) {
  .book-card { grid-template-columns: 1fr; }
  .book-rail { border-right: none; border-bottom: 1px solid var(--line); }
  .book-pick { grid-template-columns: 1fr; }
  .book-slot-list { max-height: none; }
}

/* ── Scheduler: confirmation / manage page ────────────────────────────── */
.book-manage { padding-bottom: 4rem; }
.book-manage-badge { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.book-manage-badge.book-ok { background: #e7f0e4; color: #2e6b2e; }
.book-manage-badge.book-off { background: #f0e4e4; color: #a33; }
.book-manage-detail { display: grid; grid-template-columns: 5rem 1fr; gap: 0.5rem 1rem;
  margin: 1.4rem 0; }
.book-manage-detail dt { color: var(--muted); font-size: 0.85rem; }
.book-manage-detail dd { margin: 0; }
.book-manage-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.4rem 0; }
.book-manage-change { margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.9rem;
  align-items: flex-start; }
.book-manage-change input { padding: 0.45rem 0.6rem; border: 1px solid var(--line);
  border-radius: 7px; min-width: 16rem; }

@media (max-width: 640px) {
  .book-cols { grid-template-columns: 1fr; }
}

/* ── Scheduler: Google Calendar connection (Phase B) ──────────────────── */
.sched-flash { padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.9rem;
  margin: 1rem 0; }
.sched-flash-err { background: #f0e4e4; color: #a33; }
.sched-gcal-on { display: flex; align-items: center; font-weight: 500; margin: 0 0 0.4rem; }
.sched-btn { display: inline-block; padding: 0.55rem 1.1rem; background: var(--ink);
  color: #fff; border-radius: 8px; font-size: 0.92rem; }
.sched-btn:hover { background: var(--accent); }
.sched-check { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1rem 0;
  font-size: 0.9rem; color: var(--ink); }
.sched-check input { margin-top: 0.2rem; flex: 0 0 auto; }
.sched-check .muted { color: var(--muted); font-size: 0.82rem; }

/* Calendly-style admin availability console: section cards + event/day rows */
.sched-card { background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.3rem 1.4rem; margin: 1.2rem 0; }
.sched-card-head { display: flex; align-items: baseline; gap: 0.8rem;
  flex-wrap: wrap; margin-bottom: 0.9rem; }
.sched-card-head h2 { font-size: 1.1rem; margin: 0; }
.sched-card-head .muted { font-size: 0.88rem; }
.sched-pill { font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--paper2, var(--bg)); color: var(--muted); }
.sched-pill-on { background: #e7f0e4; color: #2e6b2e; }
.sched-pill-off { background: #f0e9dd; color: #9a7b33; }

.sched-events { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 14px; }
.sched-event { display: grid; grid-template-columns: auto 1fr;
  grid-template-areas: "dot body" "foot foot"; align-items: start; gap: 0.35rem 0.7rem;
  padding: 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-sm); }
.sched-event.sched-off { opacity: 0.55; }
.sched-event .sched-dot { grid-area: dot; margin-top: 5px; }
.sched-event-body { grid-area: body; min-width: 0; display: flex; flex-direction: column;
  gap: 0.15rem; }
.sched-event-body strong { font-size: 0.96rem; }
.sched-event-meta { color: var(--muted); font-size: 0.8rem; }
.sched-event-link { font-size: 0.8rem; }
.sched-event-actions { grid-area: foot; display: flex; gap: 0.9rem; align-items: center;
  justify-content: space-between; border-top: 1px solid var(--line-faint);
  padding-top: 12px; margin-top: 0.35rem; }
@media (max-width: 640px) { .sched-events { grid-template-columns: 1fr; } }

/* booking-page hero — forest banner over the real public /book page */
.sched-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--terra-deep); color: #e6efe7; border-radius: 16px;
  padding: 22px 24px; margin: 1.2rem 0; }
.sched-hero-ico { width: 46px; height: 46px; flex: none; border-radius: 12px;
  background: var(--terra); color: var(--gold); display: grid; place-items: center;
  font-size: 1.3rem; }
.sched-hero-body { flex: 1; min-width: 180px; }
.sched-hero-body h2 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 1.25rem; color: #F3F0E2; }
.sched-hero-body p { margin: 5px 0 0; font-size: 0.82rem; font-weight: 500; color: #8fb09f; }
.sched-hero-body code { color: #c7dccd; }
.sched-hero-copy { flex: none; padding: 0.7em 1.3em; background: var(--gold);
  color: var(--terra-deep); border: 0; border-radius: 999px; font-weight: 700;
  font-size: 0.82rem; cursor: pointer; }
.sched-hero-copy:hover { filter: brightness(1.05); }

.sched-day-range { display: flex; align-items: center; gap: 0.5rem; }
.sched-day-off { opacity: 0.55; }
.sched-dayname { display: flex; align-items: center; gap: 0.5rem; width: 4.5rem; }
.sched-dash { color: var(--muted); }
.sched-hint { font-size: 0.82rem; margin: 0.6rem 0 0; }

.book-intake { border: 1px solid var(--line); border-radius: 8px; padding: 0.8rem 1rem;
  margin: 0.4rem 0 0.2rem; display: flex; flex-direction: column; gap: 0.7rem; }
.book-intake legend { font-size: 0.9rem; padding: 0 0.4rem; color: var(--ink); }

/* Per-project activity timeline (read-only narration of doc state) */
.kind-payment { background: #d6f5dd; color: #15662a; }
.kind-email   { background: #ece3f7; color: #6a3fa0; }
.timeline { list-style: none; padding: 0; margin: 0 0 1.6rem;
  border-left: 2px solid var(--line); }
.timeline-item { position: relative; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem; padding: 0.35rem 0 0.35rem 1rem; font-size: 0.9rem; }
.timeline-dot { position: absolute; left: -7px; top: 0.6rem; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg, #fff); }
.timeline-when { font-size: 0.8rem; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.timeline-text { color: var(--ink); }

/* Admin mobile pass — wrap the bar, scroll wide tables, stack form labels */
@media (max-width: 640px) {
  .admin-main { padding: 1.1rem 5vw 3rem; }
  .admin-bar { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .admin-bar nav { line-height: 1.9; }
  table.list { display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch; }
  .stack-form { max-width: 100%; }
  .stack-form label:not(.row) { flex-direction: column; align-items: stretch; gap: 3px; }
  .inline-form { flex-wrap: wrap; }
}

/* Client project workspace (#1) — placeholder styling; Claude Design refines */
.ws-section { margin: 1.4rem 0; }
.ws-section h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin: 0 0 0.5rem; }
.ws-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: 0.5rem; text-decoration: none; color: var(--ink);
  transition: border-color 0.15s; }
.ws-card:hover { border-color: var(--accent); }
.ws-card-title { font-weight: 600; }
.ws-card-meta { color: var(--muted); font-size: 0.9rem; margin-left: auto; }
.ws-card .kind-badge { margin-left: 0.4rem; }
/* admin: workspace publish controls on the project page */
.ws-admin { border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 1rem;
  margin: 0.6rem 0 1.4rem; font-size: 0.9rem; }
.ws-admin code { background: #f6f4f0; padding: 1px 6px; border-radius: 4px; }


/* ============================================================
   ADMIN REDESIGN (Claude Design handoff, 2026-06-16)
   Scoped under .admin-shell so it only affects opted-in admin
   pages (project.html first) and never the shared cream money docs.
   ============================================================ */
.admin-shell {
  --bg:            #faf8f5;   
  --bg-glow:       #fdfbf7;
  --surface:       #fffdfa;   
  --surface-sunk:  #f4efe7;   
  --surface-rail:  #f7f3ec;   

  
  --ink:           #1d1a16;   
  --ink-soft:      #5f574c;
  --ink-faint:     #968a7a;
  --ink-ghost:     #b6ab9b;

  
  --terra:         #b3552e;
  --terra-deep:    #8f3f1f;
  --terra-tint:    #f6ece4;
  --terra-tint-2:  #efdccd;

  
  --ok:      #566b3f;  --ok-bg:  #e9edda;  --ok-line:  #cdd6b4;  
  --honey:   #976416;  --honey-bg:#f7ead0; --honey-line:#e9d2a0;  
  --neutral: #756857;  --neutral-bg:#efe9df;--neutral-line:#e1d8c8;
  --clay:    #9c3a26;  --clay-bg:#f5e0d8;  --clay-line:#e6c1b3;   

  
  --line:        #e9e2d7;
  --line-strong: #ddd3c4;
  --line-faint:  #f0ebe2;

  
  --r-sm: 7px;
  --r:    11px;
  --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(60,44,28,.05);
  --shadow:    0 1px 2px rgba(60,44,28,.05), 0 10px 26px -14px rgba(74,52,30,.18);
  --shadow-lg: 0 2px 4px rgba(60,44,28,.06), 0 22px 48px -20px rgba(74,52,30,.26);

  
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Archivo", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nav-w: 244px;
  --content-max: 1180px;
}
.admin-shell *, .admin-shell *::before, .admin-shell *::after {
  box-sizing: border-box;
}
.admin-shell {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 78% -8%, var(--bg-glow) 0%, rgba(253,251,247,0) 70%),
    radial-gradient(900px 480px at -6% 4%, #fcf6ee 0%, rgba(252,246,238,0) 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.admin-shell a {
  color: var(--terra); text-decoration: none;
}
.admin-shell a:hover {
  color: var(--terra-deep); text-decoration: underline; text-underline-offset: 2px;
}
.admin-shell h1, .admin-shell h2, .admin-shell h3 {
  font-family: var(--font-display); font-weight: 500; color: var(--ink); letter-spacing: .002em;
}
.admin-shell p {
  margin: 0 0 .75rem;
}
.admin-shell code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  font-size: .86em;
}
.admin-shell .muted {
  color: var(--ink-faint);
}
.admin-shell hr {
  border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0;
}
.admin-shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}
.admin-shell .admin-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Global sticky top bar + quick-create menu */
.admin-shell .admin-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 248, 245, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.admin-shell .admin-topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.55rem 4vw;
}
.admin-shell .qc { position: relative; }
.admin-shell .qc-btn {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--terra);
  color: #fff;
  border-radius: 8px;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.admin-shell .qc-btn::-webkit-details-marker { display: none; }
.admin-shell .qc-btn:hover { background: var(--terra-deep); }
.admin-shell .qc-plus { font-size: 1.05rem; line-height: 1; }
.admin-shell .qc-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 180px;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.admin-shell .qc-menu a {
  padding: 0.45rem 0.6rem;
  border-radius: 7px;
  color: var(--ink);
  font-size: 0.88rem;
}
.admin-shell .qc-menu a:hover {
  background: var(--terra-tint);
  color: var(--terra-deep);
  text-decoration: none;
}
@media print { .admin-shell .admin-topbar { display: none; } }
.admin-shell .admin-nav {
  position: sticky;
  top: 0;
  flex: 0 0 var(--nav-w);
  width: var(--nav-w);
  height: 100vh;
  padding: 1.4rem 1rem 1.2rem;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #fbf7f0 0%, #f7f1e8 100%);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.admin-shell .admin-brand {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .1rem .5rem .9rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.admin-shell .admin-brand .mark {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.admin-shell .admin-brand .mark b {
  color: var(--terra); font-weight: 600;
}
.admin-shell .admin-nav-search { padding: .6rem .15rem .3rem; }
.admin-shell .admin-nav-search input {
  width: 100%; box-sizing: border-box; padding: .4rem .6rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit; font-size: .85rem;
}
.admin-shell .search-page-form { display: flex; gap: .5rem; margin-bottom: 1.4rem; }
.admin-shell .search-page-form input {
  flex: 1; padding: .55rem .8rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink); font: inherit;
}
.admin-shell .search-group { margin-bottom: 1.6rem; }
.admin-shell .search-group h2 { font-size: 1rem; margin: 0 0 .5rem; }
.admin-shell .search-hits {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.admin-shell .search-hits a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; color: inherit; background: var(--card);
}
.admin-shell .search-hits a:hover { border-color: var(--terra); }
.admin-shell .search-hit-meta { font-size: .82rem; text-align: right; flex-shrink: 0; }
.admin-shell .admin-nav-group {
  display: flex; flex-direction: column; gap: 1px;
}
.admin-shell .admin-nav-label {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--ink-ghost);
  padding: .3rem .6rem .35rem;
}
.admin-shell .admin-nav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .65rem;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-weight: 500;
  font-size: .92rem;
  line-height: 1.2;
}
.admin-shell .admin-nav a:hover {
  background: rgba(179,85,46,.07); color: var(--ink); text-decoration: none;
}
.admin-shell .admin-nav a.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}
.admin-shell .admin-nav a .ico {
  display: none; /* shown only in the icon-rail band (861–1280px) */
  width: 18px; height: 18px; flex: 0 0 18px;
  align-items: center; justify-content: center;
  color: var(--ink-faint);
}
.admin-shell .admin-nav a .ico svg { width: 18px; height: 18px; display: block; }
.admin-shell .admin-nav a.is-active .ico {
  color: var(--terra);
}
.admin-shell .admin-nav-foot {
  margin-top: auto;
  padding: .65rem;
  font-size: .76rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.admin-shell .admin-nav-foot .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg);
}
.admin-shell .admin-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  padding: 1.7rem clamp(1.1rem, 3vw, 2.6rem) 4rem;
  container: admin / inline-size;
}
.admin-shell .admin-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.admin-shell .admin-bar h1 {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -.01em;
}
.admin-shell .admin-bar h1 a {
  color: var(--ink-faint); font-weight: 500;
}
.admin-shell .admin-bar h1 a:hover {
  color: var(--terra); text-decoration: none;
}
.admin-shell .admin-bar nav {
  font-size: .88rem;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.admin-shell .admin-bar nav a {
  color: var(--ink-soft); font-weight: 500;
}
.admin-shell .eyebrow {
  display: inline-block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--terra);
  font-weight: 600;
  margin-bottom: .4rem;
}
.admin-shell .admin-main h2 {
  font-size: 1.18rem;
  margin: 0 0 .85rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.admin-shell .admin-main h2 .muted {
  font-family: var(--font-ui); font-size: .8rem; font-weight: 400;
}
.admin-shell .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.3rem 1.35rem;
  margin-bottom: 1.15rem;
}
.admin-shell .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.admin-shell .panel-head h2 {
  margin: 0;
}
.admin-shell .project-head {
  background: linear-gradient(170deg, #fffdf9 0%, #faf4ea 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem 1.5rem;
  margin-bottom: 1.3rem;
  position: relative;
  overflow: hidden;
}
.admin-shell .project-head::after {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 240px; height: 240px;
  background: radial-gradient(circle at 80% 0%, rgba(179,85,46,.10), transparent 62%);
  pointer-events: none;
}
.admin-shell .project-head .ph-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
}
.admin-shell .project-head h1 {
  margin: .1rem 0 .35rem; font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.15rem); line-height: 1.1; letter-spacing: -.012em;
}
.admin-shell .project-head .ph-client {
  font-size: .96rem; color: var(--ink-soft); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.admin-shell .project-head .ph-client a {
  font-weight: 600;
}
.admin-shell .project-head .ph-meta {
  display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.15rem;
}
.admin-shell .ph-fact {
  display: flex; flex-direction: column; gap: .1rem;
}
.admin-shell .ph-fact .k {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-faint);
}
.admin-shell .ph-fact .v {
  font-size: .98rem; font-weight: 600; color: var(--ink);
}
.admin-shell .project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 332px;
  gap: 1.3rem;
  align-items: start;
}
.admin-shell .project-main {
  min-width: 0;
}
.admin-shell .project-rail {
  position: sticky; top: 1.2rem; display: flex; flex-direction: column; gap: 1.15rem;
}
.admin-shell .pipeline {
  display: flex; gap: .35rem; margin-top: 1.2rem; flex-wrap: wrap;
}
.admin-shell .pipeline .step {
  flex: 1 1 0;
  min-width: 62px;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.admin-shell .pipeline .bar {
  height: 5px; border-radius: 3px; background: var(--line-strong);
}
.admin-shell .pipeline .lbl {
  font-size: .68rem; color: var(--ink-faint); letter-spacing: .01em; text-transform: capitalize; white-space: nowrap;
}
.admin-shell .pipeline .step.done .bar {
  background: var(--terra-tint-2);
}
.admin-shell .pipeline .step.current .bar {
  background: var(--terra); box-shadow: 0 0 0 3px var(--terra-tint);
}
.admin-shell .pipeline .step.current .lbl {
  color: var(--terra-deep); font-weight: 700;
}
.admin-shell .pipeline .step.done .lbl {
  color: var(--ink-soft);
}
.admin-shell .stack-form {
  display: flex; flex-direction: column; gap: .9rem;
}
.admin-shell .stack-form > label {
  display: flex;
  flex-direction: column;
  gap: .32rem;
  font-size: .73rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.admin-shell input[type="text"], .admin-shell input[type="number"], .admin-shell input[type="date"], .admin-shell input[type="email"], .admin-shell input[type="search"], .admin-shell textarea, .admin-shell select {
  font-family: var(--font-ui);
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: .52rem .6rem;
  width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.admin-shell .stack-form > label input, .admin-shell .stack-form > label textarea, .admin-shell .stack-form > label select {
  margin-top: 0;
}
.admin-shell textarea {
  resize: vertical; line-height: 1.5; min-height: 3.2em;
}
.admin-shell select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23968a7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .65rem center;
  padding-right: 1.9rem;
  cursor: pointer;
}
.admin-shell input:focus, .admin-shell textarea:focus, .admin-shell select:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px var(--terra-tint);
  background: #fff;
}
.admin-shell input::placeholder, .admin-shell textarea::placeholder {
  color: var(--ink-ghost);
}
.admin-shell input[type="date"] {
  color: var(--ink);
}
.admin-shell label {
  color: var(--ink-soft);
}
.admin-shell .inline-form {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.admin-shell .inline-form input, .admin-shell .inline-form select {
  width: auto;
}
.admin-shell .inline-form input[type="text"] {
  min-width: 12rem; flex: 1 1 12rem;
}
.admin-shell .inline-form .muted {
  font-size: .82rem; flex-basis: 100%;
}
@media (min-width: 720px) {
.admin-shell .inline-form .muted {
  flex-basis: auto;
}
}

.admin-shell button, .admin-shell .btn {
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: .56rem .9rem;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .04s ease;
  white-space: nowrap;
}
.admin-shell button:hover {
  background: #fff; border-color: var(--ink-ghost); box-shadow: var(--shadow-sm);
}
.admin-shell button:active {
  transform: translateY(1px);
}
.admin-shell button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--terra-tint);
}
.admin-shell button.primary, .admin-shell button[type="submit"].primary {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff8f3;
  box-shadow: 0 1px 2px rgba(143,63,31,.25);
}
.admin-shell button.primary:hover {
  background: var(--terra-deep); border-color: var(--terra-deep); color: #fff;
}
.admin-shell button.ghost {
  background: transparent; border-color: var(--line-strong); color: var(--ink-soft);
}
.admin-shell button.ghost:hover {
  background: var(--terra-tint); border-color: var(--terra-tint-2); color: var(--terra-deep);
}
.admin-shell button.link, .admin-shell .copy-link {
  background: none;
  border: none;
  padding: .15rem .25rem;
  color: var(--terra);
  font-weight: 600;
  box-shadow: none;
}
.admin-shell button.link:hover, .admin-shell .copy-link:hover {
  background: none; color: var(--terra-deep); text-decoration: underline; text-underline-offset: 2px; box-shadow: none;
}
.admin-shell button.danger {
  color: var(--clay); border-color: transparent; background: none;
}
.admin-shell button.danger:hover {
  background: var(--clay-bg); border-color: var(--clay-line); color: var(--clay); box-shadow: none;
}
.admin-shell button.tiny, .admin-shell .btn.tiny {
  padding: .38rem .6rem; font-size: .8rem;
}
.admin-shell table.list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .92rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  /* No overflow:hidden — it would turn the table into a scroll container and
     defeat viewport-sticky <th>. Corners are rounded per-cell below instead. */
}
.admin-shell table.list th {
  text-align: left;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--surface-sunk);
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
/* Sticky header: pin the first/header row just below the global topbar (~47px).
   Browsers wrap bare <tr> rows in an implicit <tbody>, so the first-row selector
   covers both explicit-<thead> tables and the bare-row majority. The th carries
   an opaque background, so scrolled rows don't bleed through. On mobile the table
   becomes its own overflow-x scroller, which harmlessly disables the pin. */
.admin-shell table.list thead th,
.admin-shell table.list tr:first-child th {
  position: sticky;
  top: 47px;
  z-index: 3;
}
/* Restore rounded outer corners now that overflow:hidden is gone. */
.admin-shell table.list tr:first-child th:first-child { border-top-left-radius: var(--r); }
.admin-shell table.list tr:first-child th:last-child { border-top-right-radius: var(--r); }
.admin-shell table.list tr:last-child td:first-child { border-bottom-left-radius: var(--r); }
.admin-shell table.list tr:last-child td:last-child { border-bottom-right-radius: var(--r); }
.admin-shell table.list td {
  padding: .68rem .8rem;
  border-bottom: 1px solid var(--line-faint);
  vertical-align: middle;
  color: var(--ink);
}
.admin-shell table.list tr:last-child td {
  border-bottom: none;
}
/* Zebra striping. Browsers wrap bare <tr> rows in an implicit <tbody>, so this
   one rule covers both explicit-thead tables and the bare-row majority; the
   header row carries <th> (not <td>) so it is never striped. Kept ABOVE the
   hover rule on purpose — equal specificity, so hover must win on source order. */
.admin-shell table.list tbody tr:nth-child(even) td {
  background: rgba(29,26,22,.022);
}
.admin-shell table.list tbody tr:hover td, .admin-shell table.list tr:hover td {
  background: rgba(179,85,46,.035);
}
.admin-shell table.list td a {
  font-weight: 600;
}
.admin-shell table.list td.muted {
  color: var(--ink-faint);
}
.admin-shell table.list td.num, .admin-shell table.list th.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.admin-shell table.list td input[type="text"], .admin-shell table.list td input[type="number"], .admin-shell table.list td select {
  padding: .4rem .5rem; font-size: .9rem;
}
.admin-shell table.list td input[type="number"] {
  text-align: right;
}
.admin-shell .row-actions {
  display: flex; gap: .35rem; justify-content: flex-end;
}
.admin-shell .slug {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .12rem .4rem;
  color: var(--ink-soft);
  font-size: .82em;
  word-break: break-all;
}
.admin-shell .badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: capitalize;
  padding: .22rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--neutral-line);
  background: var(--neutral-bg);
  color: var(--neutral);
  line-height: 1.3;
  white-space: nowrap;
}
.admin-shell .badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85;
}
.admin-shell .badge.is-draft {
  background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-line);
}
.admin-shell .badge.is-sent, .admin-shell .badge.is-viewed {
  background: var(--honey-bg); color: var(--honey); border-color: var(--honey-line);
}
.admin-shell .badge.is-accepted, .admin-shell .badge.is-signed, .admin-shell .badge.is-paid, .admin-shell .badge.is-deposit_paid, .admin-shell .badge.is-active {
  background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line);
}
.admin-shell .badge.is-declined {
  background: var(--clay-bg); color: var(--clay); border-color: var(--clay-line);
}
.admin-shell .status-active {
  color: var(--ok); font-weight: 700;
}
.admin-shell .kind-badge {
  display: inline-flex;
  align-items: center;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .18rem .45rem;
  border-radius: 5px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.admin-shell .kind-proposal {
  background: var(--terra-tint); color: var(--terra-deep); border-color: var(--terra-tint-2);
}
.admin-shell .kind-contract {
  background: #ece7df; color: #4b4338; border-color: #ddd4c6;
}
.admin-shell .kind-invoice {
  background: var(--honey-bg); color: var(--honey); border-color: var(--honey-line);
}
.admin-shell .kind-payment {
  background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line);
}
.admin-shell .kind-email {
  background: #e6ebec; color: #4d5d60; border-color: #d2dadb;
}
.admin-shell .kind-other {
  background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-line);
}
.admin-shell .timeline {
  list-style: none; margin: 0; padding: 0; position: relative;
}
.admin-shell .timeline::before {
  content: "";
  position: absolute;
  left: 6px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--line-strong), var(--line) 70%, transparent);
}
.admin-shell .timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .7rem;
  row-gap: .15rem;
  padding: .1rem 0 1.05rem 1.75rem;
  align-items: start;
}
.admin-shell .timeline-item:last-child {
  padding-bottom: 0;
}
.admin-shell .timeline-dot {
  position: absolute;
  left: 0; top: .28rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ink-ghost);
  box-shadow: 0 0 0 3px var(--surface-rail);
  grid-column: 1;
}
.admin-shell .timeline-proposal .timeline-dot {
  border-color: var(--terra);
}
.admin-shell .timeline-contract .timeline-dot {
  border-color: #6b6051;
}
.admin-shell .timeline-invoice  .timeline-dot {
  border-color: var(--honey);
}
.admin-shell .timeline-payment  .timeline-dot {
  background: var(--ok); border-color: var(--ok);
}
.admin-shell .timeline-email    .timeline-dot {
  border-color: #6d7d80;
}
.admin-shell .timeline-when {
  grid-column: 2; font-size: .72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.admin-shell .timeline-kind {
  grid-column: 2; justify-self: start; margin: .15rem 0;
}
.admin-shell .timeline-text {
  grid-column: 2; font-size: .9rem; color: var(--ink); line-height: 1.4;
}
.admin-shell .ws-admin {
  background: linear-gradient(165deg, #fbf3ea, #f6ebde);
  border: 1px solid var(--terra-tint-2);
  border-radius: var(--r-lg);
  padding: 1.05rem 1.15rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.admin-shell .ws-admin strong {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.admin-shell .ws-admin strong::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-bg);
  flex: 0 0 8px;
}
.admin-shell .ws-admin a {
  font-weight: 600; word-break: break-all;
}
.admin-shell .ws-admin .ws-pin {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .55rem; font-size: .85rem; color: var(--ink-soft);
}
.admin-shell .ws-admin code {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: .15rem .5rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink);
}
.admin-shell .press-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: .7rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.admin-shell .press-row > summary {
  list-style: none;
  cursor: pointer;
  padding: .85rem 1.05rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  user-select: none;
  transition: background .12s ease;
}
.admin-shell .press-row > summary:hover {
  background: var(--surface-sunk);
}
.admin-shell .press-row > summary::-webkit-details-marker {
  display: none;
}
.admin-shell .press-row > summary::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(-45deg);
  transition: transform .15s ease;
  flex: 0 0 auto;
  margin-right: .1rem;
}
.admin-shell .press-row[open] > summary::before {
  transform: rotate(45deg);
}
.admin-shell .press-row > summary strong {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
}
.admin-shell .press-row > form {
  padding: 0 1.05rem 1.1rem; border-top: 1px solid var(--line-faint); margin-top: 0; padding-top: 1rem;
}
.admin-shell .copy-feedback {
  font-size: .8rem; color: var(--ok); font-weight: 600;
}
.admin-shell .lead-stack {
  display: flex; flex-direction: column; gap: 1.15rem;
}
@media (max-width: 1040px) {
.admin-shell .project-grid {
  grid-template-columns: 1fr;
}
.admin-shell .project-rail {
  position: static; flex-direction: column;
}
.admin-shell .project-rail .panel--timeline {
  order: 2;
}
}

@media (max-width: 860px) {
.admin-shell {
  flex-direction: column;
}
/* Shell keeps align-items:flex-start, so in column mode the content wrapper
   would shrink to its min-content width — pin it full-width to fill the row. */
.admin-shell .admin-col {
  width: 100%;
}
.admin-shell .admin-nav {
  position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: .9rem;
    padding: .6rem .9rem;
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-shell .admin-brand {
  border-bottom: none; padding: 0 .4rem 0 0; border-right: 1px solid var(--line); flex: 0 0 auto;
}
.admin-shell .admin-brand .mark {
  font-size: 1.3rem;
}
.admin-shell .admin-nav-label, .admin-shell .admin-nav-foot {
  display: none;
}
.admin-shell .admin-nav-group {
  flex-direction: row; gap: .2rem;
}
.admin-shell .admin-nav a {
  white-space: nowrap; padding: .45rem .6rem; font-size: .86rem;
}
.admin-shell .admin-nav a .ico {
  display: none;
}
.admin-shell .admin-main {
  padding: 1.2rem 1.05rem 3rem;
}
}

@media (max-width: 600px) {
.admin-shell {
  font-size: 14.5px;
}
.admin-shell .admin-bar {
  align-items: flex-start;
}
.admin-shell .project-head {
  padding: 1.1rem 1.1rem 1.2rem;
}
.admin-shell .project-head .ph-meta {
  gap: 1.1rem;
}
.admin-shell .pipeline .step {
  min-width: 48px;
}
.admin-shell .pipeline .lbl {
  font-size: .6rem;
}
.admin-shell table.list {
  font-size: .86rem;
}
.admin-shell table.list th, .admin-shell table.list td {
  padding: .55rem .6rem;
}
.admin-shell .inline-form input[type="text"] {
  min-width: 0; flex-basis: 100%;
}
.admin-shell .panel {
  padding: 1rem 1rem 1.1rem;
}
}

/* ── Half-screen / snapped-window band ───────────────────────────────────
   Collapse the sidebar to an icon rail and reflow the content column for the
   common snapped widths (1080p half = 960px, 1440p half = 1280px). The full
   labelled sidebar returns above 1280px; the mobile top-bar takes over at
   860px and below — both untouched. Card/KPI grids reflow on their own via
   the @container queries above (they key off the content column, not the
   viewport), so this band only needs to handle the chrome + wide tables. */
@media (min-width: 861px) and (max-width: 1280px) {
  .admin-shell .admin-nav {
    flex: 0 0 64px;
    width: 64px;
    padding: 1.1rem .5rem 1rem;
    gap: 1rem;
  }
  .admin-shell .admin-brand {
    justify-content: center;
    padding: .1rem 0 .8rem;
  }
  .admin-shell .admin-brand .mark { font-size: 0; line-height: 0; }
  .admin-shell .admin-brand .mark::before {
    content: "KL";
    font-family: var(--font-display);
    font-size: 1.2rem; font-weight: 600; line-height: 1;
    color: var(--ink);
  }
  .admin-shell .admin-nav-label { display: none; }
  .admin-shell .admin-nav-group { gap: .15rem; }
  .admin-shell .admin-nav a {
    justify-content: center;
    gap: 0;
    padding: .55rem 0;
  }
  .admin-shell .admin-nav a .ico { display: inline-flex; }
  .admin-shell .admin-nav a .lbl {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .admin-shell .admin-nav-foot { justify-content: center; padding: .65rem 0; }
  .admin-shell .admin-nav-foot .lbl { display: none; }
  /* Keep wide data tables inside the column — scroll instead of blowing out. */
  .admin-shell .sched-table,
  .admin-shell table.list {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

.admin-shell .table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r);
}
.admin-shell .table-scroll table.list {
  border-radius: 0; border-left: none; border-right: none;
}

/* Honor the OS "reduce motion" setting: collapse transitions/animations to
   near-instant, drop smooth scrolling, and make reveal-on-scroll content show
   immediately (never held at opacity:0). The one JS-driven auto-motion — the
   scroll-coupled hero parallax — is gated against the same query in site.js,
   since an inline-style transform can't be reached from CSS. (The lightbox
   slideshow is user-toggled, not auto-play, so it's left alone; its crossfade
   is a CSS transition the rule above already neutralizes.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-hidden { opacity: 1 !important; transform: none !important; }
}

/* ── Shared list summary strip (tasks, forms) ────────────────────────── */
.stat-strip { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.4rem 1rem; margin: 0 0 0.7rem; font-size: 0.86rem;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.stat strong { font-size: 1.0rem; color: var(--ink); }
.stat-warn strong { color: var(--clay); }

/* Transfers (WeTransfer-style drops) — admin list */
.summary-strip { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1rem 0;
  padding: 0.7rem 1rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; font-size: 0.9rem; color: var(--muted); }
.summary-strip b { color: var(--ink); }
.pill { display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.02em; padding: 1px 8px; border-radius: 999px;
  background: var(--line); color: var(--muted); vertical-align: middle; }
.pill.danger { background: var(--accent); color: #fff; }
.pill.muted { background: transparent; border: 1px solid var(--line); }
.transfer-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.transfer-row { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.transfer-row:last-child { border-bottom: 1px solid var(--line); }
.transfer-main { min-width: 0; }
.transfer-main b { font-size: 1.02rem; }
.transfer-meta { font-size: 0.83rem; margin-top: 0.25rem; }
.transfer-act { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }

/* Transfers — prototype 2-col compose + sent-cards (over real drop galleries) */
.tr-grid { display: grid; grid-template-columns: 400px 1fr; gap: 28px;
  align-items: start; margin-top: 0.6rem; }
.tr-compose { background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px; box-shadow: var(--shadow-sm); }
.tr-compose h2 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 500;
  font-size: 1.3rem; color: var(--ink); }
.tr-compose .stack-form { margin: 0; max-width: none; }
.tr-compose-note { font-size: 0.8rem; line-height: 1.45; margin: 14px 0 0;
  border-top: 1px solid var(--line-faint); padding-top: 14px; }
.tr-sent { min-width: 0; }
.tr-sent-head { display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px; }
.tr-sent-head h2 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 1.3rem; color: var(--ink); }
.tr-cards { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 12px; }
.tr-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; display: flex; align-items: center;
  gap: 16px; box-shadow: var(--shadow-sm); }
.tr-card-ico { width: 44px; height: 44px; flex: none; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.1rem; }
.tr-ico-active { background: #e1f2e9; color: #2f7d57; }
.tr-ico-expired { background: #ecefe6; color: #8A9183; }
.tr-card-body { flex: 1; min-width: 0; }
.tr-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tr-card-top a { font-weight: 700; font-size: 0.92rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-card-top a:hover { color: var(--terra); }
.tr-badge { flex: none; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 999px; }
.tr-badge-active { color: #2f7d57; background: #e1f2e9; }
.tr-badge-expired { color: #8A9183; background: #ecefe6; }
.tr-card-meta { font-size: 0.8rem; margin-top: 4px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tr-card-size { flex: none; text-align: right; }
.tr-card-bytes { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.tr-card-size .muted { font-size: 0.74rem; margin-top: 4px; }
.tr-card-act { flex: none; display: flex; align-items: center; gap: 0.8rem; }
.tr-card-act .copy-link { padding: 0.55em 1em; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 600 0.76rem/1 var(--font-ui); }
.tr-card-act .copy-link:hover { background: var(--terra-deep); color: #F3F0E2; border-color: var(--terra-deep); }
.tr-empty { padding: 1.5rem 0; }

/* compose — strict 1:1 with the Admin Transfers prototype */
.tr-form { display: flex; flex-direction: column; gap: 16px; }
.tr-drop { border: 2px dashed #d3c9b3; border-radius: 14px; padding: 26px 16px;
  text-align: center; background: #FAF6EC; }
.tr-drop-ico { width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 999px;
  background: var(--terra-deep); color: var(--gold); display: grid; place-items: center; font-size: 1.3rem; }
.tr-drop-lead { font: 600 0.92rem/1.3 var(--font-ui); color: var(--ink); }
.tr-drop-sub { font: 500 0.8rem/1.3 var(--font-ui); color: #8A9183; margin-top: 3px; }
.tr-field { display: flex; flex-direction: column; gap: 6px; }
.tr-field-lbl { font: 600 0.78rem/1 var(--font-ui); color: var(--ink-soft); }
.tr-field input { border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px;
  font: 500 0.84rem var(--font-ui); color: var(--ink); background: #FAF6EC; }
.tr-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line-faint); padding-top: 16px; }
.tr-opt-lbl { font: 600 0.82rem/1 var(--font-ui); color: var(--ink); }
.tr-seg { display: inline-flex; background: #F1ECE0; border-radius: 999px; padding: 3px; }
.tr-seg label { cursor: pointer; }
.tr-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tr-seg span { display: block; padding: 6px 12px; border-radius: 999px;
  font: 600 0.74rem/1 var(--font-ui); color: var(--ink-soft); }
.tr-seg input:checked + span { background: var(--terra-deep); color: #F3F0E2; }
.tr-opt-row { cursor: pointer; }
.tr-toggle { appearance: none; -webkit-appearance: none; width: 40px; height: 23px; flex: none;
  border-radius: 999px; background: #d8d0bf; position: relative; cursor: pointer; border: 0; }
.tr-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px;
  border-radius: 999px; background: #fff; transition: left 0.2s ease; }
.tr-toggle:checked { background: var(--clay); }
.tr-toggle:checked::after { left: 18px; }
.tr-send { margin-top: 2px; width: 100%; padding: 0.95em; background: var(--clay); color: #F3F0E2;
  border: 0; border-radius: 999px; font: 600 0.9rem/1 var(--font-ui); cursor: pointer; }
.tr-send:hover { background: #6a2830; }
@media (max-width: 1080px) { .tr-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .tr-card { flex-wrap: wrap; }
  .tr-card-size { text-align: left; }
  .tr-card-act { flex-wrap: wrap; }
}

/* Phone pass for the cream gallery / drop pages */
@media (max-width: 560px) {
  .gallery-header { min-height: 30vh; }
  .gallery-header-inner { padding: 2rem 6vw 1.4rem; }
  .gallery-header h1 { font-size: 1.5rem; }
  .gallery-header .btn { display: block; width: 100%; text-align: center;
    padding: 0.7rem 1rem; }
  /* keep transfer rows readable when the action cluster wraps under the title */
  .transfer-row { flex-direction: column; gap: 0.5rem; }
  .transfer-act { flex-wrap: wrap; }
}

/* ── Templates gallery ──────────────────────────────────────────── */
.admin-shell .tpl-section { margin: 28px 0; }
.admin-shell .tpl-grouplabel { margin: 18px 0 8px; font-size: 0.95rem;
  letter-spacing: 0.02em; opacity: 0.7; }
.admin-shell .tpl-grid { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.admin-shell .tpl-card { border: 1px solid var(--line, #e7e0d4);
  border-radius: 10px; padding: 16px 18px;
  background: var(--card-bg, rgba(255, 255, 255, 0.5));
  display: flex; flex-direction: column; }
.admin-shell .tpl-card h4 { margin: 0 0 8px; font-size: 1rem; }
.admin-shell .tpl-inside { margin: 0 0 10px; padding-left: 18px;
  font-size: 0.84rem; line-height: 1.45; }
.admin-shell .tpl-inside li { margin: 2px 0; }
.admin-shell .tpl-price { font-weight: 600; margin: 0 0 12px; }
.admin-shell .tpl-use { margin-top: auto; }
.admin-shell .tpl-use summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; }
.admin-shell .tpl-use-form { margin-top: 10px; display: flex;
  flex-direction: column; gap: 8px; }
.admin-shell .tpl-use-form select { width: 100%; }
.admin-shell .tpl-card-blank { background: transparent; border-style: dashed; }
.admin-shell .tpl-ref { margin-top: 36px; padding-top: 24px;
  border-top: 1px dashed var(--line, #e7e0d4); }
.admin-shell .tpl-internal { font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle;
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(140, 110, 60, 0.12); color: var(--muted, #8a7a5c); }
.admin-shell .tpl-fill { font-style: italic; white-space: nowrap;
  padding: 0 4px; border-radius: 4px; background: rgba(140, 110, 60, 0.1);
  color: var(--muted, #8a7a5c); }
.admin-shell .tpl-guide { margin: 10px 0; border: 1px solid var(--line, #e7e0d4);
  border-radius: 10px; background: var(--card-bg, rgba(255, 255, 255, 0.5)); }
.admin-shell .tpl-guide > summary { cursor: pointer; padding: 12px 16px;
  font-weight: 600; font-size: 0.92rem; }
.admin-shell .tpl-guide-body { padding: 4px 16px 16px; }
.admin-shell .tpl-guide-body .list { width: 100%; margin: 8px 0 4px; }
.admin-shell .tpl-guide-body .list th { text-align: left; }
.admin-shell .tpl-foot { margin-top: 28px; padding-top: 16px;
  border-top: 1px dashed var(--line, #e7e0d4); font-size: 0.86rem; }
.admin-shell .ref-head { display: flex; flex-wrap: wrap; gap: 16px 32px;
  align-items: baseline; justify-content: space-between;
  margin: 8px 0 4px; padding: 16px 18px; border-radius: 10px;
  background: var(--card-bg, rgba(255, 255, 255, 0.5));
  border: 1px solid var(--line, #e7e0d4); }
.admin-shell .ref-brand p { margin: 4px 0 0; font-size: 0.84rem; }
.admin-shell .ref-mark { font-size: 1.2rem; letter-spacing: 0.04em; }
.admin-shell .ref-mark b { font-weight: 700; }
.admin-shell .ref-contact { list-style: none; margin: 0; padding: 0;
  text-align: right; font-size: 0.84rem; line-height: 1.5; }

/* ============================================================================
   Home dashboard — redesign layer
   Paste this block into static/mise.css (anywhere after the .admin-shell token
   block near line ~1776). Everything is scoped under .admin-shell and uses the
   existing design tokens, so it inherits the candlelit-editorial palette, the
   self-hosted Newsreader / Hanken Grotesk faces, radii and shadows already
   defined there. New class prefix `dash-` so it never collides with the legacy
   `home-` rules — swap templates/admin/home.html to the redesign and these win.
   ========================================================================== */

/* Stage accent palette — kept inside Mise's warm editorial family so the
   pipeline reads as one system, not a rainbow. */
.admin-shell .dash {
  --dash-inquiry:   #8a7d6a;  /* neutral    */
  --dash-consult:   #6f8a76;  /* sage       */
  --dash-proposal:  #b88a3e;  /* honey/gold */
  --dash-contract:  #b3552e;  /* terra      */
  --dash-retainer:  #566b3f;  /* ok green   */
  --dash-planning:  #4f7a72;  /* teal-sage  */
  --dash-closed:    #3b2a1e;  /* espresso   */
  --dash-archived:  #b6ab9b;  /* ghost      */
  --dash-gold:      #E0A43B;  /* live gold accent on dark money panel (matches public --accent-lt) */
}

/* Lift the content cap a touch — the dashboard wants two real columns. */
.admin-shell .admin-main.dash { max-width: 1240px; }

/* ── Dashboard top bar — prototype strict-1:1 sticky chrome ──────────────── */
/* greeting+date (left) · inline search (center) · Sign out + oxblood +New     */
.admin-shell .dash-top {
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2rem);
  background: rgba(245, 243, 235, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 18px clamp(20px, 3vw, 40px);
}
.admin-shell .dash-top-lead h1 { margin: 0; font-size: 1.6rem; line-height: 1.1; }
.admin-shell .dash-top-lead p {
  margin: .2rem 0 0; font-size: .82rem; font-weight: 500; color: var(--ink-faint); white-space: nowrap;
}
.admin-shell .dash-search { position: relative; flex: 1; max-width: 440px; }
.admin-shell .dash-search-ic {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  font-size: 1rem; color: var(--ink-faint); pointer-events: none;
}
.admin-shell .dash-search input {
  width: 100%; box-sizing: border-box;
  padding: .6rem 1rem .6rem 2.3rem;
  background: #FFFEF8; border: 1px solid #E1DDCE; border-radius: 999px;
  font: inherit; font-size: .88rem; color: var(--ink);
}
.admin-shell .dash-search input::placeholder { color: var(--ink-faint); }
.admin-shell .dash-search input:focus {
  outline: none; border-color: #143C2F; box-shadow: 0 0 0 3px rgba(20, 60, 47, .08);
}
.admin-shell .dash-top-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.admin-shell .dash-qc { position: relative; }
.admin-shell .dash-signout {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap;
}
.admin-shell .dash-signout:hover { color: var(--terra); text-decoration: underline; text-underline-offset: 2px; }
.admin-shell .dash-new {
  list-style: none; display: inline-flex; align-items: center; gap: .4rem;
  background: var(--terra); color: #F3F0E2; border: 0; border-radius: 999px;
  padding: .55rem 1.1rem; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.admin-shell .dash-new::-webkit-details-marker { display: none; }
.admin-shell .dash-new:hover { background: var(--terra-deep); text-decoration: none; color: #F3F0E2; }
.admin-shell .qc-plus { font-size: 1.05rem; line-height: 1; }

/* ── Inner-page top bar — prototype strict-1:1 (heading · stats · actions) ── */
/* Reusable across P2 pages: left lead (h1 + live subtitle), right action pills. */
.admin-shell .pgtop {
  display: flex; align-items: center; gap: 20px;
  background: rgba(245, 243, 235, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 18px clamp(20px, 3vw, 34px);
}
.admin-shell .pgtop-lead h1 {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 1.6rem; line-height: 1.1; letter-spacing: -.01em; color: var(--ink);
}
.admin-shell .pgtop-sub {
  margin: .25rem 0 0; font-size: .82rem; font-weight: 500; color: var(--ink-soft);
}
.admin-shell .pgtop-sub b { color: var(--ink); font-weight: 700; }
.admin-shell .pgtop-sub .pos { color: var(--ok); }
.admin-shell .pgtop-sub .neg { color: var(--clay); font-weight: 700; text-decoration: none; }
.admin-shell .pgtop-sub a.neg:hover { text-decoration: underline; text-underline-offset: 2px; }
.admin-shell .pgtop-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.admin-shell .pgtop-link {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .62em 1.15em; border: 1px solid var(--line); border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--ink); background: #FFFEF8; white-space: nowrap;
}
.admin-shell .pgtop-link:hover { border-color: var(--line-strong); text-decoration: none; }
.admin-shell .pgtop-link span { color: var(--clay); }
.admin-shell .pgtop-new {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--terra); color: #F3F0E2; border-radius: 999px;
  padding: .55rem 1.1rem; font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.admin-shell .pgtop-new:hover { background: var(--terra-deep); color: #F3F0E2; text-decoration: none; }
/* Calendar lead: month title sits inline with a compact ‹ Today › month nav. */
.admin-shell .cal-lead { display: flex; align-items: baseline; gap: 14px; }
.admin-shell .cal-monthnav { display: inline-flex; align-items: center; gap: 4px; }
.admin-shell .cal-monthnav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 .6rem;
  border: 1px solid var(--line); border-radius: 8px; background: #FFFEF8;
  font-size: .85rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
}
.admin-shell .cal-monthnav a:hover { border-color: var(--line-strong); color: var(--ink); }

/* ── KPI strip ──────────────────────────────────────────────────────────── */
.admin-shell .dash-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem;
}
.admin-shell .dash-kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: inherit;
}
.admin-shell a.dash-kpi:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.admin-shell .dash-kpi-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.admin-shell .dash-kpi-n {
  font-family: var(--font-display); font-weight: 500; font-size: 2.1rem; line-height: 1; color: var(--ink);
}
.admin-shell .dash-kpi-trend { font-size: .76rem; font-weight: 600; color: var(--ink-faint); }
.admin-shell .dash-kpi-trend .cap { color: var(--ink-faint); font-weight: 500; }
.admin-shell .dash-kpi-trend.up   { color: var(--ok); }
.admin-shell .dash-kpi-trend.warn { color: var(--clay); }
.admin-shell .dash-kpi-trend.hold { color: var(--honey); }

/* ── Two-column grid ────────────────────────────────────────────────────── */
.admin-shell .dash-grid {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.3rem; align-items: start;
}
.admin-shell .dash-col { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }

/* Panel — reuses the .panel look but tightened for the dashboard. */
.admin-shell .dash-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 1.25rem 1.35rem 1.35rem;
}
.admin-shell .dash-panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .35rem;
}
.admin-shell .dash-panel-head h2 { margin: 0; font-size: 1.22rem; }
.admin-shell .dash-panel-head .link { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.admin-shell .dash-panel-head .count { font-size: .8rem; font-weight: 600; color: var(--terra); }

/* ── Needs-you-today list ───────────────────────────────────────────────── */
.admin-shell .dash-todo { list-style: none; margin: .25rem 0 0; padding: 0; }
.admin-shell .dash-todo li {
  display: flex; align-items: center; gap: .9rem; padding: .85rem 0;
  border-top: 1px solid var(--line-faint);
}
.admin-shell .dash-todo li:first-child { border-top: 0; }
.admin-shell .dash-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.admin-shell .dash-todo-body { flex: 1; min-width: 0; }
.admin-shell .dash-todo-title { font-size: .94rem; font-weight: 600; color: var(--ink); }
.admin-shell .dash-todo-title a { color: var(--ink); }
.admin-shell .dash-todo-title a:hover { color: var(--terra); }
.admin-shell .dash-todo-sub { font-size: .81rem; font-weight: 500; color: var(--ink-soft); margin-top: .1rem; }
.admin-shell .dash-todo-meta { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.admin-shell .dash-todo-meta.warn { color: var(--clay); }
.admin-shell .dash-todo-meta.hold { color: var(--honey); }
.admin-shell .dash-todo-meta.go   { color: var(--ok); }
.admin-shell .dash-todo-meta.mute { color: var(--ink-soft); }
.admin-shell .dash-check {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: none; color: transparent; cursor: pointer; flex: none;
  display: grid; place-items: center; font-size: .7rem; padding: 0;
}
.admin-shell .dash-check:hover { border-color: var(--ok); color: var(--ok); }
.admin-shell .dash-todo-check { display: contents; margin: 0; }

/* ── Schedule ───────────────────────────────────────────────────────────── */
.admin-shell .dash-horizon {
  display: inline-flex; background: var(--surface-sunk); border-radius: 999px; padding: 3px;
}
.admin-shell .dash-horizon button {
  border: 0; cursor: pointer; background: none; color: var(--ink-soft);
  padding: .35rem .8rem; border-radius: 999px; font: inherit; font-size: .76rem; font-weight: 600;
}
.admin-shell .dash-horizon button.is-active { background: var(--terra); color: #fff; }
.admin-shell .dash-sched { list-style: none; margin: .4rem 0 0; padding: 0; }
.admin-shell .dash-sched li {
  display: flex; align-items: center; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line-faint);
}
.admin-shell .dash-sched li:first-child { border-top: 0; }
.admin-shell .dash-date { flex: none; width: 50px; text-align: center; }
.admin-shell .dash-date .d { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; color: var(--terra-deep); }
.admin-shell .dash-date .m {
  font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: .2rem;
}
.admin-shell .dash-sched-body { flex: 1; min-width: 0; border-left: 2px solid var(--line-strong); padding-left: .9rem; }
.admin-shell .dash-sched-body.is-today { border-left-color: var(--terra); }
.admin-shell .dash-sched-title { font-size: .94rem; font-weight: 600; color: var(--ink); }
.admin-shell .dash-sched-title a { color: var(--ink); }
.admin-shell .dash-sched-title a:hover { color: var(--terra); }
.admin-shell .dash-sched-client { font-size: .81rem; font-weight: 500; color: var(--ink-soft); }
.admin-shell .dash-sched-time { font-size: .8rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.admin-shell .dash-sched-when { font-size: .72rem; font-weight: 600; color: var(--ink-faint); white-space: nowrap; }
.admin-shell .dash-sched-when.is-today { color: var(--terra); }
.admin-shell .dash-empty { margin: 1rem 0 .2rem; font-size: .85rem; font-weight: 500; color: var(--ink-faint); text-align: center; }

/* ── Pipeline ───────────────────────────────────────────────────────────── */
.admin-shell .dash-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; margin-top: .6rem; }
.admin-shell .dash-stage {
  background: var(--surface-sunk); border: 1px solid var(--line); border-left: 3px solid var(--neutral);
  border-radius: var(--r-sm); padding: .7rem .75rem; display: flex; flex-direction: column; gap: .5rem;
  text-decoration: none; color: inherit;
}
.admin-shell a.dash-stage:hover { border-color: var(--line-strong); }
.admin-shell .dash-stage-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  min-height: 1.5em; line-height: 1.25;
}
.admin-shell .dash-stage-row { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.admin-shell .dash-stage-n { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--terra-deep); }
.admin-shell .dash-stage-val { font-size: .7rem; font-weight: 600; color: var(--ink-faint); }

/* ── Revenue (dark money panel) ─────────────────────────────────────────── */
.admin-shell .dash-money {
  background: linear-gradient(165deg, #2c2118 0%, #221a13 100%);
  border: 1px solid #2c2118; border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 1.4rem 1.45rem; color: #f3ead9;
}
.admin-shell .dash-money h2 { color: #f7efe1; }
.admin-shell .dash-money .pct { font-size: .76rem; font-weight: 600; color: var(--dash-gold); }
.admin-shell .dash-money-body { display: flex; align-items: center; gap: 1.4rem; margin-top: 1rem; }
.admin-shell .dash-ring { position: relative; flex: none; width: 116px; height: 116px; }
.admin-shell .dash-ring svg { width: 116px; height: 116px; transform: rotate(-90deg); }
.admin-shell .dash-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.admin-shell .dash-ring-n { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: #f7efe1; }
.admin-shell .dash-ring-cap { font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #b09a7f; margin-top: .25rem; }
.admin-shell .dash-money-figs { flex: 1; display: flex; flex-direction: column; gap: .9rem; }
.admin-shell .dash-fig-n { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: #f7efe1; }
.admin-shell .dash-fig-cap { font-size: .72rem; font-weight: 600; color: #b09a7f; margin-top: .25rem; }
.admin-shell .dash-money-paid { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid rgba(243,234,217,.12); }
.admin-shell .dash-money-paid .lead {
  font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #b09a7f;
}
.admin-shell .dash-paid-row { display: flex; align-items: center; justify-content: space-between; padding-top: .55rem; }
.admin-shell .dash-paid-row a { color: #f3ead9; font-weight: 600; font-size: .85rem; }
.admin-shell .dash-paid-row a:hover { color: #fff; }
.admin-shell .dash-paid-amt { font-size: .85rem; font-weight: 600; color: var(--dash-gold); }

/* ── Leads ──────────────────────────────────────────────────────────────── */
.admin-shell .dash-leads { list-style: none; margin: .3rem 0 0; padding: 0; }
.admin-shell .dash-leads li { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--line-faint); }
.admin-shell .dash-leads li:first-child { border-top: 0; }
.admin-shell .dash-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--terra-tint); color: var(--terra-deep);
  display: grid; place-items: center; font-size: .8rem; font-weight: 600;
}
.admin-shell .dash-lead-body { flex: 1; min-width: 0; }
.admin-shell .dash-lead-name { font-size: .9rem; font-weight: 600; color: var(--ink); }
.admin-shell .dash-lead-biz { font-size: .78rem; font-weight: 500; color: var(--ink-soft); }
.admin-shell .dash-pill {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--terra-deep); background: var(--terra-tint); padding: .2rem .5rem; border-radius: 999px; white-space: nowrap;
}
.admin-shell .dash-ago { font-size: .74rem; font-weight: 500; color: var(--ink-faint); white-space: nowrap; }

/* ── Activity ───────────────────────────────────────────────────────────── */
.admin-shell .dash-activity { list-style: none; margin: .3rem 0 0; padding: 0; }
.admin-shell .dash-activity li { display: flex; align-items: flex-start; gap: .75rem; padding: .65rem 0; border-top: 1px solid var(--line-faint); }
.admin-shell .dash-activity li:first-child { border-top: 0; }
.admin-shell .dash-activity .dash-dot { margin-top: .4rem; }
.admin-shell .dash-act-text { flex: 1; min-width: 0; font-size: .84rem; font-weight: 500; line-height: 1.45; color: var(--ink-soft); }
.admin-shell .dash-act-text b { color: var(--ink); font-weight: 600; }
.admin-shell .dash-act-time { font-size: .74rem; font-weight: 500; color: var(--ink-faint); white-space: nowrap; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@container admin (max-width: 920px) {
  .admin-shell .dash-grid { grid-template-columns: 1fr; }
  .admin-shell .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .admin-shell .dash-stages { grid-template-columns: repeat(2, 1fr); }
  /* desktop-only prototype bar → wrap on Mise's narrow bands: lead+actions on
     row 1, the search drops to a full-width row 2 (no overflow). */
  .admin-shell .dash-top { flex-wrap: wrap; row-gap: .85rem; }
  .admin-shell .dash-search { order: 3; flex-basis: 100%; max-width: none; }
  /* inner-page bar wraps the same way: lead on row 1, actions drop below */
  .admin-shell .pgtop { flex-wrap: wrap; row-gap: .85rem; }
  .admin-shell .pgtop-actions { margin-left: 0; flex-basis: 100%; }
}
@container admin (max-width: 560px) {
  .admin-shell .dash-kpis { grid-template-columns: 1fr 1fr; }
  .admin-shell .dash-top-lead h1 { font-size: 1.35rem; }
  .admin-shell .dash-top-lead p { white-space: normal; }
  .admin-shell .pgtop-lead h1 { font-size: 1.35rem; }
}

/* ===== FOREST + GOLD THEME — ADMIN ONLY (marketing section 1 intentionally held; public brand is locked candlelit-terracotta) ===== */
/* ── 2. Admin shell tokens ──────────────────────────────────────────────── */
.admin-shell {
  --terra:        #1C4A3A;   /* forest accent — links, focus rings (matches public --accent) */
  --terra-deep:   #143C2F;   /* hover / pressed                              */
  --terra-tint:   #e7efe9;   /* tinted fills (avatars, chips, menu hover)    */
  --terra-tint-2: #cfe0d4;   /* deeper tint                                  */
  --gold:         #E0A43B;   /* gold — matches public --accent-lt            */
  --clay:         #7C2F38;   /* alerts / danger / overdue → oxblood          */
  --clay-bg:      #f3e3e5;
  --clay-line:    #e2c2c7;
  /* --ok (olive) and --honey (amber) kept: they stay distinct from forest   */
}

/* primary button stays forest; nudge the quick-create + dashboard buttons    */
.admin-shell .qc-btn,
.admin-shell .dash-new { background: var(--terra-deep); }
.admin-shell .qc-btn:hover,
.admin-shell .dash-new:hover { background: #0f2e23; }

/* hardcoded terracotta rgba → forest rgba */
.admin-shell .admin-nav a:hover { background: rgba(20, 60, 47, .07); }
.admin-shell table.list tbody tr:hover td,
.admin-shell table.list tr:hover td { background: rgba(20, 60, 47, .035); }
.admin-shell .project-head { background: linear-gradient(170deg, #fffdf9 0%, #f1f6f2 100%); }
.admin-shell .project-head::after {
  background: radial-gradient(circle at 80% 0%, rgba(20, 60, 47, .10), transparent 62%);
}

/* errors → oxblood (was terracotta) */
.error { color: #7C2F38; }

/* ── 3. Admin sidebar → forest green (the signature surface) ────────────── */
.admin-shell .admin-nav {
  background: linear-gradient(180deg, #163d2f 0%, #112f25 100%);
  border-right-color: #0d2820;
}
.admin-shell .admin-brand { border-bottom-color: rgba(243, 240, 226, .14); }
.admin-shell .admin-brand .mark { color: #f3f0e2; }
.admin-shell .admin-brand .mark b { color: #E0A43B; }   /* gold */
.admin-shell .admin-nav-search input {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(243, 240, 226, .16);
  color: #eef3ee;
}
.admin-shell .admin-nav-search input::placeholder { color: #8aa595; }
.admin-shell .admin-nav-label { color: #7f9a88; }
.admin-shell .admin-nav a { color: #b9cdbf; }
.admin-shell .admin-nav a:hover { background: rgba(243, 240, 226, .07); color: #f3f0e2; }
.admin-shell .admin-nav a.is-active {
  background: #1C4A3A;
  color: #f3f0e2;
  border-color: rgba(243, 240, 226, .14);
  box-shadow: none;
}
.admin-shell .admin-nav a .ico { color: #8aa595; }
.admin-shell .admin-nav a.is-active .ico { color: #E0A43B; }   /* gold */
.admin-shell .admin-nav-foot {
  color: #8aa595;
  border-top-color: rgba(243, 240, 226, .12);
}
.admin-shell .admin-nav-foot .dot { background: #6fae8a; box-shadow: 0 0 0 3px rgba(111, 174, 138, .18); }

/* sidebar links shouldn't pick up the global forest link color */
.admin-shell .admin-nav a:hover { text-decoration: none; }

/* ── 4. Dashboard pipeline + money panel ────────────────────────────────── */
/* the one terracotta stage color → oxblood, so the pipeline drops the old hue */
.admin-shell .dash { --dash-contract: #7C2F38; --dash-gold: #E0A43B; }
.admin-shell .dash-money {
  background: linear-gradient(165deg, #1c4a3a 0%, #143c2f 100%);
  border-color: #143c2f;
}
.admin-shell .dash-money .pct,
.admin-shell .dash-paid-amt { color: #E0A43B; }
.admin-shell .dash-ring-cap,
.admin-shell .dash-fig-cap,
.admin-shell .dash-money-paid .lead,
.admin-shell .dash-paid-row a { color: #a9c8b5; }
.admin-shell .dash-money-paid { border-top-color: rgba(243, 234, 217, .14); }

/* ===== FOREST + GOLD THEME — MARKETING SECTION 1 (public site → forest/gold; supersedes locked terracotta per Kevin 2026-06-18) ===== */
/* ── 1. Base + marketing-site tokens ────────────────────────────────────── */
:root { --accent: #1C4A3A; }

.site-body, .cream-theme {
  --accent:     #1C4A3A;   /* forest — links, ::selection, hero accents      */
  --espresso:   #143C2F;   /* dark sections (delivery, footer, foot card)    */
  --espresso2:  #1C4A3A;   /* nested dark panels                             */
  --accent-lt:  #E0A43B;   /* gold — unchanged, now the sole bright accent   */
  /* --cream / --bg / --line / --paper2 kept: warm paper still reads under green */
}

/* Marketing dark-section neutrals were bordeaux-tinted — re-tint to sage so
   text on the new forest panels stays in-key. */
.site-body .svc-foot-card p,
.site-body .delivery-intro p,
.site-body .proof-head span,
.site-body .crop-btn,
.site-body .crop-meta p,
.site-body .site-footer,
.site-body .footer-brand p,
.site-body .footer-col a,
.site-body .btn-ghost-dark { color: #a9c0b0; }
.site-body .footer-col b { color: #84a08f; }
.site-body .proof-panel,
.site-body .crop-btn { border-color: #2c5142; }
.site-body .proof-bar { background: #2c5142; }
.site-body .btn-ghost-dark { border-bottom-color: #2f5a47; }

/* ============================================================================
   NS-* SHELL  —  1:1 recreation of the Claude Design "Admin Sidebar" prototype
   ----------------------------------------------------------------------------
   Honey-badger crest, gold "CRM" lockup, ⌘K command palette, animated active
   indicator and a live status pulse. Layered on the existing forest .admin-nav
   (forest_gold_theme §3) and the Mise responsive bands — desktop matches the
   prototype 1:1; tablet/mobile keep their icon-rail / bar behaviour.
   ========================================================================== */
@keyframes miseBadgePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(95,210,154,0); } 50% { box-shadow: 0 0 0 4px rgba(95,210,154,.22); } }
@keyframes misePalIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes miseOverlayIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Brand: crest + Kevin Lee + CRM badge ───────────────────────────────── */
.admin-shell .ns-brand { display: flex; align-items: center; gap: 10px; }
.admin-shell .ns-crest {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(150deg, #2a1d10 0%, #140d06 100%);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px rgba(224,164,59,.4);
  transition: transform .3s cubic-bezier(.22,1.4,.4,1);
}
.admin-shell .ns-brand:hover .ns-crest { transform: rotate(-6deg) scale(1.06); }
.admin-shell .ns-brandtext { display: flex; align-items: center; gap: 7px; min-width: 0; }
.admin-shell .ns-brand .mark { font-size: 1.3rem; border-bottom: 0; }
.admin-shell .ns-crm {
  font: 700 .55rem/1 var(--font-ui); letter-spacing: .14em; color: #E0A43B;
  border: 1px solid rgba(237,178,60,.45); border-radius: 5px; padding: 3px 5px; flex: none;
}

/* ── ⌘K search button (replaces the old inline search field) ────────────── */
.admin-shell .ns-cmd {
  display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
  height: 40px; padding: 0 10px; cursor: pointer;
  background: #0f2f25; border: 1px solid #295142; border-radius: 10px;
  color: #8fb09f; font: 600 .82rem/1 var(--font-ui);
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.admin-shell .ns-cmd:hover { background: #123a2d; border-color: #38624f; box-shadow: 0 0 0 3px rgba(237,178,60,.08); }
.admin-shell .ns-cmd-ic { flex: none; display: grid; place-items: center; }
.admin-shell .ns-cmd-txt { flex: 1; text-align: left; white-space: nowrap; }
.admin-shell .ns-kbd {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  font: 700 .62rem/1 var(--font-ui); color: #6f9080;
  background: #0b241b; border: 1px solid #295142; border-radius: 5px; padding: 4px 6px;
}

/* ── Animated active-indicator + item layering ──────────────────────────── */
.admin-shell .ns-list { position: relative; }
.admin-shell .ns-ind {
  position: absolute; left: 0; right: 0; top: 0; height: 0; opacity: 0; z-index: 0;
  border-radius: var(--r-sm); background: #1C4A3A; pointer-events: none;
  transition: transform .32s cubic-bezier(.22,1,.36,1), height .32s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.admin-shell .ns-list a { position: relative; z-index: 1; }
/* Active item: indicator provides the fill — drop the standalone box, keep a
   gold left-bar + light text (matches the prototype, robust if JS is off). */
.admin-shell .ns-list a.is-active { background: transparent; border: 0; box-shadow: none; color: #F3F0E2; }
.admin-shell .ns-list a.is-active::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 20px; border-radius: 0 4px 4px 0; background: #E0A43B;
}
.admin-shell .ns-list a:hover { background: transparent; }

/* ── Foot pulse (replaces the static dot) ───────────────────────────────── */
.admin-shell .ns-pulse {
  width: 8px; height: 8px; border-radius: 999px; flex: none;
  background: #5fd29a; box-shadow: 0 0 8px #5fd29a;
  animation: miseBadgePulse 3s ease-in-out infinite;
}

/* ── Command palette (⌘K overlay) ───────────────────────────────────────── */
.ns-pal {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: flex-start; justify-content: center; padding-top: 14vh;
  background: rgba(11,28,21,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ns-pal.open { display: flex; animation: miseOverlayIn .18s ease; }
.ns-pal-box {
  width: min(560px, 92vw); background: #F7F5EC; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(20,60,47,.1); box-shadow: 0 30px 80px -20px rgba(11,28,21,.6);
  font-family: var(--font-ui); animation: misePalIn .22s cubic-bezier(.22,1,.36,1);
}
.ns-pal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #E6E2D2; }
.ns-pal-input { flex: 1; border: 0; background: transparent; outline: none; font: 500 1rem var(--font-ui); color: #18241E; }
.ns-pal-input::placeholder { color: #9aa39a; }
.ns-pal-esc { font: 700 .6rem/1 var(--font-ui); color: #8A9183; background: #ECE8D8; border-radius: 5px; padding: 5px 7px; }
.ns-pal-list { max-height: 46vh; overflow-y: auto; padding: 8px; }
.ns-pal-group { font: 700 .6rem/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #A0A893; padding: 12px 12px 6px; }
.ns-pal-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: #283A30; cursor: pointer; }
.ns-pal-row:hover { text-decoration: none; }
.ns-pal-row.sel { background: #143C2F; color: #F7F5EC; }
.ns-pal-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: #ECE8D8; color: #3B5A48; font: 700 .8rem var(--font-display); }
.ns-pal-row.sel .ns-pal-ic { background: #E0A43B; color: #143C2F; }
.ns-pal-lab { flex: 1; font: 600 .9rem/1.2 var(--font-ui); }
.ns-pal-sub { font: 600 .66rem/1 var(--font-ui); color: #9aa39a; text-transform: uppercase; letter-spacing: .08em; }
.ns-pal-row.sel .ns-pal-sub { color: #cfe0d4; }
.ns-pal-go { opacity: 0; font-size: .9rem; }
.ns-pal-row.sel .ns-pal-go { opacity: 1; }
.ns-pal-empty { padding: 28px 16px; text-align: center; color: #9aa39a; font: 500 .9rem var(--font-ui); }
.ns-pal-foot { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid #E6E2D2; font: 600 .68rem/1 var(--font-ui); color: #8A9183; }

/* ── Item count badges (Inbox/Studio etc. — wired as those pages ship) ──── */
.admin-shell .ns-badge { flex: none; font: 700 .62rem/1 var(--font-ui); padding: 3px 7px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .admin-shell .ns-ind, .admin-shell .ns-crest, .ns-pal-box { transition: none !important; animation: none !important; }
  .admin-shell .ns-pulse { animation: none !important; }
}

/* ── NS-* responsive reconciliation with the existing collapse bands ─────── */
/* Mobile bar (<=860px): nav is a horizontal scroller — collapse the ⌘K field
   to an icon, drop the vertical indicator (it only makes sense in a column). */
@media (max-width: 860px) {
  .admin-shell .ns-cmd {
    width: auto; flex: 0 0 auto; height: auto; padding: .4rem .55rem; gap: 0;
  }
  .admin-shell .ns-cmd-txt, .admin-shell .ns-kbd { display: none; }
  .admin-shell .ns-ind { display: none; }
  .admin-shell .ns-crm { display: none; }
}
/* Icon rail (861–1280px): 64px column — crest only, ⌘K as a centred icon. */
@media (min-width: 861px) and (max-width: 1280px) {
  .admin-shell .ns-brandtext { display: none; }
  .admin-shell .ns-brand { justify-content: center; }
  .admin-shell .ns-cmd {
    width: auto; justify-content: center; padding: .5rem 0; gap: 0;
  }
  .admin-shell .ns-cmd-txt, .admin-shell .ns-kbd { display: none; }
}

/* ── Audit log — category chips + append-only event feed (prototype 1:1) ──── */
.admin-shell .audit-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-shell .audit-chip {
  display: inline-flex; align-items: center; gap: .45em;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: var(--ink-soft); background: #FFFEF8;
  white-space: nowrap; text-decoration: none;
}
.admin-shell .audit-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.admin-shell .audit-chip.is-active { background: var(--terra-deep); color: #F3F0E2; border-color: var(--terra-deep); }
.admin-shell .audit-chip-n { opacity: .55; font-variant-numeric: tabular-nums; }
.admin-shell .audit-chip.is-active .audit-chip-n { opacity: .75; }

.admin-shell .audit-feed {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 8px 24px 12px; max-width: 920px;
}
.admin-shell .audit-row { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid #EFEAE0; }
.admin-shell .audit-row:first-child { border-top: 0; }
.admin-shell .audit-ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; font-size: .9rem; font-weight: 700;
}
.admin-shell .audit-body { flex: 1; min-width: 0; }
.admin-shell .audit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.admin-shell .audit-title { font-size: .92rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.admin-shell .audit-time { flex: none; font-size: .74rem; font-weight: 500; color: var(--ink-faint); white-space: nowrap; }
.admin-shell .audit-detail { margin-top: 3px; font-size: .82rem; font-weight: 500; line-height: 1.4; color: var(--ink-soft); }
.admin-shell .audit-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.admin-shell .audit-amount { font-size: .8rem; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.admin-shell .audit-actor { font-size: .7rem; font-weight: 500; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.admin-shell .audit-note { margin: 20px 0 0; max-width: 60em; font-size: .78rem; line-height: 1.5; }

/* ── Inbox (3-pane: threads · inbound message · context/convert) ── */
.admin-shell .ib {
  display: grid;
  grid-template-columns: 330px minmax(360px, 1fr) 300px;
  height: 100vh;
  min-width: 0;
}
.admin-shell .ib .ib-av {
  width: 40px; height: 40px; flex: none; border-radius: 999px;
  display: grid; place-items: center;
  font-size: .84rem; font-weight: 600; line-height: 1;
}
.admin-shell .ib .ib-av-lg { width: 60px; height: 60px; font-size: 1.1rem; }

/* Pane 1 — threads */
.admin-shell .ib-threads {
  border-right: 1px solid var(--line); background: #FBF8F0;
  display: flex; flex-direction: column; min-width: 0;
}
.admin-shell .ib-threads-head { padding: 18px 18px 12px; }
.admin-shell .ib-threads-title { display: flex; align-items: center; justify-content: space-between; }
.admin-shell .ib-threads-title h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; color: var(--ink); }
.admin-shell .ib-tabs { display: flex; gap: 6px; margin-top: 14px; }
.admin-shell .ib-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; color: var(--ink-soft);
  background: #F1ECE0;
}
.admin-shell .ib-tab:hover { text-decoration: none; color: var(--ink); }
.admin-shell .ib-tab.is-active { background: var(--terra-deep); color: #F3F0E2; }
.admin-shell .ib-tab-n { font-size: .68rem; font-weight: 700; opacity: .85; font-variant-numeric: tabular-nums; }
.admin-shell .ib-thread-list { flex: 1; overflow-y: auto; padding: 0 10px 14px; }
.admin-shell .ib-row {
  display: flex; gap: 11px; align-items: center;
  padding: 11px 12px; border-radius: 12px; margin-bottom: 2px;
  border: 1px solid transparent; color: inherit;
}
.admin-shell .ib-row:hover { text-decoration: none; background: rgba(40,30,12,0.035); }
.admin-shell .ib-row.is-active { background: var(--surface); box-shadow: 0 1px 3px rgba(40,30,12,0.07); border: 1px solid #E6DFCF; }
.admin-shell .ib-av-wrap { position: relative; flex: none; }
.admin-shell .ib-dot { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 999px; background: var(--clay); border: 2px solid #FBF8F0; }
.admin-shell .ib-row-body { flex: 1; min-width: 0; }
.admin-shell .ib-row-top { display: flex; align-items: center; gap: 6px; }
.admin-shell .ib-row-name { font-size: .88rem; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-shell .ib-row-time { font-size: .7rem; font-weight: 500; color: var(--ink-faint); flex: none; }
.admin-shell .ib-row-bot { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.admin-shell .ib-chan { font-size: .6rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 6px; border-radius: 5px; flex: none; }
.admin-shell .ib-preview { font-size: .79rem; font-weight: 500; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.admin-shell .ib-preview.is-unread { color: var(--ink-soft); }
.admin-shell .ib-empty-list { padding: 24px 14px; font-size: .82rem; color: var(--ink-faint); }

/* Pane 2 — inbound message */
.admin-shell .ib-convo { display: flex; flex-direction: column; min-width: 0; background: #F5F3EB; }
.admin-shell .ib-convo-head { padding: 16px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.admin-shell .ib-convo-id { flex: 1; min-width: 0; }
.admin-shell .ib-convo-name { display: flex; align-items: center; gap: 8px; }
.admin-shell .ib-convo-name h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--ink); }
.admin-shell .ib-convo-sub { margin: 3px 0 0; font-size: .78rem; font-weight: 500; color: var(--ink-faint); }
.admin-shell .ib-convo-when { font-size: .74rem; font-weight: 500; color: var(--ink-faint); text-align: right; flex: none; line-height: 1.3; }
.admin-shell .ib-convo-when b { color: var(--ink-soft); }
.admin-shell .ib-convo-body { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.admin-shell .ib-msg { display: flex; flex-direction: column; align-items: flex-start; }
.admin-shell .ib-bubble {
  max-width: 74%; padding: 12px 16px; border-radius: 15px; border-bottom-left-radius: 4px;
  background: var(--surface); border: 1px solid #ece5d6; color: #2a342c;
  font-size: .9rem; font-weight: 500; line-height: 1.5; white-space: pre-wrap;
}
.admin-shell .ib-bubble-empty { color: var(--ink-faint); font-style: italic; }
.admin-shell .ib-bubble-meta { margin-top: 6px; font-size: .68rem; font-weight: 500; color: var(--ink-faint); }
/* outbound (Kevin's) bubbles align right in the forest tint */
.admin-shell .ib-msg-out { align-items: flex-end; }
.admin-shell .ib-bubble-out {
  background: var(--forest, #143C2F); border-color: var(--forest, #143C2F); color: #F3F0E2;
  border-radius: 15px; border-bottom-right-radius: 4px; border-bottom-left-radius: 15px;
}
.admin-shell .ib-msg-out .ib-bubble-meta { text-align: right; }
/* quick-reply snippet chips — click to fill the composer */
.admin-shell .ib-snippets { display: flex; gap: 7px; flex-wrap: wrap; }
.admin-shell .ib-snippet {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font: inherit; font-size: .76rem; font-weight: 500;
  color: var(--ink-soft); cursor: pointer;
}
.admin-shell .ib-snippet:hover { border-color: var(--line-strong); color: var(--ink); }
/* channel toggle (email / text) */
.admin-shell .ib-reply-chans { display: flex; gap: 16px; flex-wrap: wrap; }
.admin-shell .ib-reply-chan { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--ink-faint); cursor: pointer; }
.admin-shell .ib-reply-chan b { color: var(--ink); font-weight: 600; }
.admin-shell .ib-reply { padding: 14px 18px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-shell .ib-reply-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .65em 1.3em; background: var(--terra-deep); color: #F3F0E2;
  border-radius: 999px; font-size: .84rem; font-weight: 600;
}
.admin-shell .ib-reply-btn:hover { text-decoration: none; background: var(--terra); }
.admin-shell .ib-reply-note { font-size: .74rem; color: var(--ink-faint); }
/* in-Mise reply composer (Gmail SMTP send) */
.admin-shell .ib-reply-form { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.admin-shell .ib-reply-sent {
  margin: 0 0 2px; font-size: .76rem; font-weight: 600; color: #2f7d57;
}
.admin-shell .ib-reply-to { font-size: .74rem; color: var(--ink-faint); }
.admin-shell .ib-reply-to b { color: var(--ink); font-weight: 600; }
.admin-shell .ib-reply-subj,
.admin-shell .ib-reply-msg {
  width: 100%; padding: .6em .75em; border: 1px solid var(--line);
  border-radius: 9px; background: var(--card); color: var(--ink);
  font: inherit; font-size: .86rem; resize: vertical;
}
.admin-shell .ib-reply-subj:focus,
.admin-shell .ib-reply-msg:focus { outline: none; border-color: var(--terra-deep); }
.admin-shell .ib-reply-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-shell .ib-reply-send {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .6em 1.25em; background: var(--terra-deep); color: #F3F0E2;
  border: 0; border-radius: 999px; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.admin-shell .ib-reply-send:hover { background: var(--terra); }
.admin-shell .ib-blank { flex: 1; display: grid; place-items: center; color: var(--ink-faint); }

/* Pane 3 — context + convert */
.admin-shell .ib-context {
  border-left: 1px solid var(--line); background: #FBF8F0; overflow-y: auto;
  padding: 22px 20px; display: flex; flex-direction: column; gap: 20px;
}
.admin-shell .ib-ctx-id { text-align: center; }
.admin-shell .ib-ctx-id .ib-av { margin: 0 auto; }
.admin-shell .ib-ctx-id h3 { margin: 12px 0 2px; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--ink); }
.admin-shell .ib-ctx-contact { margin: 0; font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
.admin-shell .ib-ctx-stage { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; }
.admin-shell .ib-ctx-k { font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.admin-shell .ib-stage { font-size: .72rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.admin-shell .ib-ctx-actions { display: flex; flex-direction: column; gap: 9px; }
.admin-shell .ib-ctx-actions form { margin: 0; }
.admin-shell .ib-ctx-label { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.admin-shell .ib-act {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 11px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  font-size: .86rem; font-weight: 600; text-align: left;
}
.admin-shell .ib-act:hover { text-decoration: none; border-color: var(--line-strong); }
.admin-shell .ib-act .ib-act-t { flex: 1; }
.admin-shell .ib-act-primary { background: var(--terra); color: #F3F0E2; border-color: var(--terra); }
.admin-shell .ib-act-primary:hover { background: var(--terra-deep); border-color: var(--terra-deep); }
.admin-shell .ib-ctx-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.admin-shell .ib-ctx-row { display: flex; justify-content: space-between; gap: 12px; }
.admin-shell .ib-ctx-rk { font-size: .76rem; font-weight: 600; color: var(--ink-faint); }
.admin-shell .ib-ctx-rv { font-size: .8rem; font-weight: 600; color: var(--ink); text-align: right; }

@media (max-width: 1180px) {
  .admin-shell .ib { grid-template-columns: 310px minmax(0, 1fr); }
  .admin-shell .ib-context { display: none; }
}
@media (max-width: 820px) {
  .admin-shell .ib { grid-template-columns: 1fr; }
  .admin-shell .ib-convo { display: none; }
}

/* ── Settings (read-only status over real .env config) ── */
.admin-shell .set-wrap {
  padding: clamp(20px, 3vw, 30px);
  display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 28px);
  max-width: 1000px;
}
.admin-shell .set-h2 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; color: var(--ink); }
.admin-shell .set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-shell .set-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; display: flex; align-items: flex-start; gap: 14px;
}
.admin-shell .set-mark {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  display: grid; place-items: center; font-size: .9rem; font-weight: 700; line-height: 1;
}
.admin-shell .set-card-body { flex: 1; min-width: 0; }
.admin-shell .set-card-name { font-size: .94rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.admin-shell .set-card-desc { margin-top: 3px; font-size: .8rem; font-weight: 500; line-height: 1.4; color: var(--ink-soft); }
.admin-shell .set-badge {
  flex: none; padding: .5em .95em; border-radius: 999px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.admin-shell .set-badge-connected { background: #e1f2e9; color: #2f7d57; border: 1px solid #b6e3c8; }
.admin-shell .set-badge-ready { background: var(--terra); color: #F3F0E2; border: 1px solid var(--terra); }
.admin-shell a.set-badge-ready:hover { background: var(--terra-deep); border-color: var(--terra-deep); text-decoration: none; }
.admin-shell .set-badge-off { background: #f1ece0; color: var(--ink-faint); border: 1px solid var(--line); }
.admin-shell .set-badge-edge { background: #f7ecd2; color: #9a7a2c; border: 1px solid #ecd9ad; }

.admin-shell .set-ops {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 6px 24px 14px;
}
.admin-shell .set-ops .set-h2 { margin: 18px 0 4px; }
.admin-shell .set-op-row {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 0; border-top: 1px solid #EFEAE0;
}
.admin-shell .set-op-body { flex: 1; min-width: 0; }
.admin-shell .set-op-label { font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.admin-shell .set-op-desc { margin-top: 3px; font-size: .8rem; font-weight: 500; line-height: 1.4; color: var(--ink-faint); }
.admin-shell .set-op-value {
  flex: none; font-size: .82rem; font-weight: 700; color: var(--ink);
  background: #f1ece0; border-radius: 8px; padding: 5px 11px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.admin-shell .set-note { margin: 0; max-width: 60em; font-size: .78rem; font-weight: 500; line-height: 1.55; color: var(--ink-faint); }

@media (max-width: 900px) {
  .admin-shell .set-grid { grid-template-columns: 1fr; }
}

/* ── Financials (real income + client P&L; honest empty scaffolds) ── */
.admin-shell .fin-wrap {
  padding: clamp(20px, 3vw, 30px);
  display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 26px);
}
.admin-shell .money-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-shell .money-pill {
  padding: 7px 13px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; line-height: 1;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line); white-space: nowrap;
}
.admin-shell a.money-pill:hover { border-color: var(--line-strong); text-decoration: none; }
.admin-shell .money-pill-on,
.admin-shell a.money-pill-on:hover {
  background: var(--terra-deep); color: #F3F0E2; border-color: var(--terra-deep);
}

.admin-shell .fin-summary {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.admin-shell .fin-summary-4 { grid-template-columns: repeat(4, 1fr); }
.admin-shell .fin-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px;
}
.admin-shell .fin-card-label {
  font-size: .66rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint);
}
.admin-shell .fin-card-val {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.65rem; line-height: 1.05; color: var(--ink); margin: 9px 0 5px;
  font-variant-numeric: tabular-nums;
}
.admin-shell .fin-card-sub { font-size: .74rem; font-weight: 500; color: var(--ink-faint); }
.admin-shell .fin-card-dark { background: var(--terra-deep); border-color: var(--terra-deep); }
.admin-shell .fin-card-dark .fin-card-label,
.admin-shell .fin-card-dark .fin-card-sub { color: #8fb09f; }
.admin-shell .fin-card-dark .fin-card-val { color: #F3F0E2; }
.admin-shell .fin-card-warn .fin-card-val { color: #9a7a2c; }
.admin-shell .fin-card-danger .fin-card-val { color: var(--clay); }
.admin-shell .fin-card-ok .fin-card-val { color: #2f7d57; }
.admin-shell .fin-card-muted .fin-card-val { color: var(--ink); }

.admin-shell .fin-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 8px 8px; min-width: 0;
}
.admin-shell .fin-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 0 16px 14px;
}
.admin-shell .fin-h2 {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 1.3rem; color: var(--ink);
}
.admin-shell .fin-range { display: inline-flex; flex-wrap: wrap; gap: 4px;
  background: #f1ece0; border-radius: 999px; padding: 3px; }
.admin-shell .fin-range-pill {
  padding: 6px 12px; border-radius: 999px; font-size: .76rem; font-weight: 600;
  line-height: 1; color: var(--ink-soft); white-space: nowrap;
}
.admin-shell a.fin-range-pill:hover { text-decoration: none; color: var(--ink); }
.admin-shell .fin-range-on,
.admin-shell a.fin-range-on:hover { background: var(--terra-deep); color: #F3F0E2; }

.admin-shell .fin-export-btn { background: var(--clay); border-color: var(--clay); color: #F3F0E2; }
.admin-shell .fin-grid {
  display: grid; grid-template-columns: 320px 1fr;
  gap: clamp(18px, 2vw, 26px); align-items: start;
}
.admin-shell .fin-export {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.admin-shell .fin-export-lead {
  margin: 6px 0 0; font-size: .82rem; font-weight: 500;
  line-height: 1.5; color: var(--ink-soft);
}
.admin-shell .fin-export-form { display: flex; flex-direction: column; gap: 18px; }
.admin-shell .fin-field { display: flex; flex-direction: column; gap: 9px; }
.admin-shell .fin-field-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.admin-shell .fin-check {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  font-size: .86rem; font-weight: 600; color: var(--ink);
}
.admin-shell .fin-check input { width: 18px; height: 18px; accent-color: var(--terra-deep); }
.admin-shell .fin-seg {
  display: inline-flex; align-self: flex-start;
  background: #f1ece0; border-radius: 999px; padding: 3px;
}
.admin-shell .fin-seg label { cursor: pointer; }
.admin-shell .fin-seg input { position: absolute; opacity: 0; pointer-events: none; }
.admin-shell .fin-seg span {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: var(--ink-soft); line-height: 1;
}
.admin-shell .fin-seg input:checked + span { background: var(--terra-deep); color: #F3F0E2; }
.admin-shell .fin-dl {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: .95em; background: var(--terra-deep); color: #F3F0E2;
  border: 0; border-radius: 12px; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.admin-shell .fin-dl-n { opacity: .7; }
.admin-shell .fin-dl-note {
  margin: -6px 0 0; font-size: .74rem; font-weight: 500;
  color: var(--ink-faint); text-align: center;
}
.admin-shell .fin-panel-n { font-size: .78rem; font-weight: 600; color: var(--ink-faint); }
.admin-shell .rc-filter { align-self: flex-start; }
.admin-shell .rc-filter-n { opacity: .55; }
@media (max-width: 1080px) {
  .admin-shell .fin-grid { grid-template-columns: 1fr; }
}

.admin-shell .fin-tbl-scroll { overflow-x: auto; }
.admin-shell .fin-tbl { width: 100%; border-collapse: collapse; }
.admin-shell .fin-tbl th {
  text-align: left; font-size: .66rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 0 14px 12px; white-space: nowrap;
}
.admin-shell .fin-tbl td {
  padding: 13px 14px; border-top: 1px solid #EFEAE0;
  font-size: .84rem; font-weight: 500; line-height: 1.3; color: #2a342c;
  white-space: nowrap;
}
.admin-shell .fin-tbl tbody tr:hover { background: #FAF6EC; }
.admin-shell .fin-num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-shell .fin-muted { color: var(--ink-faint); }
.admin-shell .fin-soft { color: var(--ink-soft); }
.admin-shell .fin-strong { font-weight: 600; color: var(--ink); }
.admin-shell .fin-net { font-weight: 600; color: #2f7d57; }
.admin-shell .fin-empty-row {
  text-align: center; color: var(--ink-faint); font-style: italic; padding: 28px 14px;
}
.admin-shell .fin-pill {
  font-size: .62rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 999px;
}
.admin-shell .fin-pill-paid { color: #2f7d57; background: #e1f2e9; }
.admin-shell .fin-pill-out { color: #9a7a2c; background: #f7ecd2; }
.admin-shell .fin-note {
  margin: 0; max-width: 64em; font-size: .78rem; font-weight: 500;
  line-height: 1.55; color: var(--ink-faint);
}

/* Client P&L table */
.admin-shell .pnl-client { display: flex; align-items: center; gap: 11px; }
.admin-shell .pnl-av {
  width: 34px; height: 34px; flex: none; border-radius: 9px; color: #fff;
  display: grid; place-items: center; font-size: .78rem; font-weight: 600; line-height: 1;
}
.admin-shell .pnl-name { font-size: .9rem; font-weight: 700; color: var(--ink); }
.admin-shell .pnl-share-h { text-align: left; width: 220px; }
.admin-shell .pnl-share { display: flex; align-items: center; gap: 10px; }
.admin-shell .pnl-bar {
  flex: 1; height: 8px; border-radius: 999px; background: #f1ece0; overflow: hidden;
}
.admin-shell .pnl-bar-fill { height: 100%; background: var(--terra); border-radius: 999px; }
.admin-shell .pnl-share-pct {
  font-size: .82rem; font-weight: 700; color: var(--ink-soft);
  width: 38px; text-align: right; font-variant-numeric: tabular-nums;
}

/* ── Bookkeeping: expenses / mileage / receipts (real CRUD) ── */
.admin-shell .fin-summary-3 { grid-template-columns: repeat(3, 1fr); }
.admin-shell .fin-cols {
  display: grid; grid-template-columns: 1fr 320px;
  gap: clamp(18px, 2vw, 26px); align-items: start;
}
.admin-shell .fin-rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.admin-shell .fin-form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 22px;
}
.admin-shell .fin-form-card .fin-h2 { margin: 0 0 14px; font-size: 1.2rem; }
.admin-shell .fin-form { display: flex; flex-direction: column; gap: 11px; }
.admin-shell .fin-form label,
.admin-shell .fin-upload-form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-faint);
}
.admin-shell .fin-form input,
.admin-shell .fin-form select,
.admin-shell .fin-upload-form input,
.admin-shell .fin-upload-form select {
  font: 500 .86rem/1.2 var(--font-ui); color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px;
}
.admin-shell .fin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.admin-shell .fin-form button,
.admin-shell .fin-upload-form button {
  margin-top: 4px; align-self: flex-start; cursor: pointer;
  padding: .7em 1.25em; border: 0; border-radius: 999px;
  background: var(--terra-deep); color: #F3F0E2;
  font: 600 .82rem/1 var(--font-ui);
}
.admin-shell .fin-cat { display: inline-flex; align-items: center; gap: 6px; }
.admin-shell .fin-cat-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.admin-shell .fin-del {
  cursor: pointer; border: 0; background: none; color: var(--ink-faint);
  font-size: 1.1rem; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.admin-shell .fin-del:hover { background: #f3e3e5; color: var(--clay); }

.admin-shell .fin-bycat { margin-bottom: 13px; }
.admin-shell .fin-bycat:last-child { margin-bottom: 0; }
.admin-shell .fin-bycat-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
.admin-shell .fin-bycat-label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.admin-shell .fin-bycat-amt { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.admin-shell .fin-bycat-bar {
  height: 7px; border-radius: 999px; background: #f1ece0; overflow: hidden;
}
.admin-shell .fin-bycat-fill { height: 100%; border-radius: 999px; }

.admin-shell .fin-upload-form {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
}
.admin-shell .fin-upload-form .fin-file { flex: 1 1 240px; }

/* Receipt grid (real uploaded scans) */
.admin-shell .rc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 16px;
}
.admin-shell .rc-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.admin-shell .rc-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(40,30,12,.4); }
.admin-shell .rc-thumb {
  position: relative; display: flex; flex-direction: column;
  justify-content: center; align-items: center; height: 150px;
  background: linear-gradient(160deg, #f3eee2, #e7dfcd);
  border-bottom: 1px solid var(--line);
}
.admin-shell .rc-paper {
  width: 76px; height: 96px; background: #fffdf8; border-radius: 4px;
  box-shadow: 0 6px 16px -8px rgba(40,30,12,.4);
  display: flex; flex-direction: column; gap: 5px; padding: 11px 9px;
}
.admin-shell .rc-line { height: 4px; background: #e6ddca; border-radius: 2px; }
.admin-shell .rc-line-bar { margin-top: auto; height: 8px; width: 50%; background: var(--terra-deep); }
.admin-shell .rc-badge {
  position: absolute; top: 9px; right: 9px;
  font-size: .6rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
}
.admin-shell .rc-badge-on { color: #2f7d57; background: #e1f2e9; }
.admin-shell .rc-badge-off { color: #9a7a2c; background: #f7ecd2; }
.admin-shell .rc-pdf {
  position: absolute; bottom: 9px; left: 9px;
  font-size: .58rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: rgba(20,60,47,.85); padding: 3px 7px; border-radius: 5px;
}
.admin-shell .rc-foot { padding: 12px 14px 13px; }
.admin-shell .rc-name {
  display: block; font-size: .86rem; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-shell .rc-meta { margin-top: 3px; font-size: .74rem; font-weight: 500; color: var(--ink-faint); }
.admin-shell .rc-del {
  margin-top: 9px; cursor: pointer; border: 1px solid var(--line);
  background: #fff; color: var(--ink-soft);
  font: 600 .72rem/1 var(--font-ui); padding: 6px 11px; border-radius: 999px;
}
.admin-shell .rc-del:hover { border-color: var(--clay); color: var(--clay); }

@media (max-width: 1080px) {
  .admin-shell .fin-summary,
  .admin-shell .fin-summary-4 { grid-template-columns: repeat(2, 1fr); }
  .admin-shell .fin-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .admin-shell .fin-summary,
  .admin-shell .fin-summary-3,
  .admin-shell .fin-summary-4 { grid-template-columns: 1fr; }
}

/* ── Content portal (real brand kits + assets + presets + caption packs) ── */
.admin-shell .pgtop-eyebrow {
  margin: 0 0 .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.admin-shell .ct-switch { flex-wrap: wrap; }
.admin-shell .ct-block { margin-top: 1.6rem; }
.admin-shell .ct-block-head {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin-bottom: .8rem;
}
.admin-shell .ct-h2 {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 1.18rem; color: var(--ink);
}
.admin-shell .ct-block-note { font-size: .82rem; color: var(--ink-soft); }
.admin-shell .ct-block-note a { color: var(--terra-deep); font-weight: 600; }
.admin-shell .ct-empty {
  padding: 1.1rem 1.2rem; border: 1px dashed var(--line-strong); border-radius: 12px;
  background: var(--surface); color: var(--ink-soft); font-size: .88rem;
}

.admin-shell .ct-kit-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.admin-shell .ct-kit {
  display: flex; gap: .9rem; padding: .9rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
}
.admin-shell .ct-kit-off { opacity: .62; }
.admin-shell .ct-kit-logo {
  flex: 0 0 84px; width: 84px; height: 84px; display: flex; align-items: center;
  justify-content: center; border-radius: 10px; overflow: hidden;
  background: repeating-conic-gradient(#eee 0% 25%, #f7f7f2 0% 50%) 50% / 16px 16px;
  border: 1px solid var(--line);
}
.admin-shell .ct-kit-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.admin-shell .ct-kit-meta { flex: 1; min-width: 0; }
.admin-shell .ct-kit-top {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.admin-shell .ct-kit-client {
  font-weight: 700; font-size: .92rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-shell .ct-kit-label { font-size: .8rem; color: var(--ink-soft); margin: .1rem 0 .55rem; }
.admin-shell .ct-spec {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .8rem; margin: 0 0 .5rem;
}
.admin-shell .ct-spec div { display: flex; justify-content: space-between; gap: .4rem; }
.admin-shell .ct-spec dt { font-size: .76rem; color: var(--ink-faint); }
.admin-shell .ct-spec dd { margin: 0; font-size: .76rem; font-weight: 600; color: var(--ink); }
.admin-shell .ct-kit-link { font-size: .8rem; font-weight: 600; color: var(--terra-deep); }

.admin-shell .ct-pill {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.admin-shell .ct-pill-on { background: #e1f2e9; color: #2f7d57; }
.admin-shell .ct-pill-off { background: #efece0; color: var(--ink-soft); }
.admin-shell .ct-pill-draft { background: #f7ecd2; color: #9a7a2c; }
.admin-shell .ct-pill-ai { background: #ece4f5; color: #6a4aa0; }

.admin-shell .ct-preset-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.admin-shell .ct-preset {
  display: flex; flex-direction: column; gap: .12rem; padding: .65rem .85rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  min-width: 150px;
}
.admin-shell .ct-preset-ratio {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--terra-deep);
}
.admin-shell .ct-preset-name { font-size: .84rem; font-weight: 600; color: var(--ink); }
.admin-shell .ct-preset-dims { font-size: .74rem; color: var(--ink-faint); }
.admin-shell .ct-preset-ovl {
  margin-top: .25rem; align-self: flex-start; padding: .1rem .45rem; border-radius: 999px;
  background: #ece4f5; color: #6a4aa0; font-size: .66rem; font-weight: 700;
}

.admin-shell .ct-cap-list { display: grid; gap: .8rem; }
.admin-shell .ct-cap {
  padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px;
}
.admin-shell .ct-cap-head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem;
}
.admin-shell .ct-cap-client { font-weight: 700; font-size: .9rem; color: var(--ink); }
.admin-shell .ct-cap-period { font-size: .78rem; color: var(--ink-faint); }
.admin-shell .ct-cap-body {
  margin: 0 0 .5rem; font-size: .88rem; line-height: 1.5; color: var(--ink-soft);
  white-space: pre-wrap;
}
.admin-shell .ct-cap-link { font-size: .8rem; font-weight: 600; color: var(--terra-deep); }
.admin-shell .ct-ai-on { color: #2f7d57; font-weight: 700; }
.admin-shell .ct-ai-off { color: var(--ink-faint); font-weight: 600; }

@media (max-width: 560px) {
  .admin-shell .ct-kit-grid { grid-template-columns: 1fr; }
}

/* ── Portals overview (real client hubs + engagement) ── */
.admin-shell .pt-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1rem;
}
.admin-shell .pt-card {
  display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.admin-shell .pt-card-draft { opacity: .72; }
.admin-shell .pt-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.admin-shell .pt-biz {
  font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-shell .pt-link {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: .5rem .6rem; background: #f7f4ea; border: 1px solid var(--line);
  border-radius: 10px;
}
.admin-shell .pt-url {
  flex: 1; min-width: 0; font-size: .76rem; color: var(--terra-deep); font-weight: 600;
  word-break: break-all;
}
.admin-shell .pt-pin {
  flex: none; font-family: ui-monospace, Menlo, monospace; font-size: .72rem;
  font-weight: 700; letter-spacing: .04em; color: var(--ink-soft);
  background: #efece0; padding: .12rem .45rem; border-radius: 6px;
}
.admin-shell .pt-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem;
  padding: .6rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.admin-shell .pt-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.admin-shell .pt-stat-n {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--ink);
}
.admin-shell .pt-stat-l {
  font-size: .64rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-faint);
  text-align: center;
}
.admin-shell .pt-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  flex-wrap: wrap;
}
.admin-shell .pt-meta { font-size: .76rem; color: var(--ink-soft); }
.admin-shell .pt-rights { color: #2f7d57; font-weight: 600; }
.admin-shell .pt-norights { color: var(--ink-faint); }
.admin-shell .pt-actions { display: flex; gap: .8rem; }
.admin-shell .pt-actions a {
  font-size: .8rem; font-weight: 600; color: var(--terra-deep);
}
.admin-shell .pt-none { display: flex; flex-wrap: wrap; gap: .5rem; }
.admin-shell .pt-none-chip {
  padding: .4rem .7rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink-soft);
}
.admin-shell .pt-none-chip:hover { border-color: var(--line-strong); color: var(--ink); }

@media (max-width: 560px) {
  .admin-shell .pt-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   ADMIN LOGIN  —  1:1 of the "Admin Login" prototype, forest/gold live palette
   ========================================================================== */
.cream-theme .login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(120% 90% at 50% 0%, #1c4a3a 0%, #143C2F 55%, #0f2f25 100%);
  font-family: 'Archivo', system-ui, sans-serif;
}
.login-stack { width: 100%; max-width: 380px; text-align: center; }
.login-brand {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 12px; margin-bottom: 26px;
}
.login-crest {
  width: 52px; height: 52px; border-radius: 14px; background: #E0A43B; color: #143C2F;
  display: grid; place-items: center;
  font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 1.7rem;
}
.login-word { line-height: 1.1; }
.login-name { font-family: 'Newsreader', Georgia, serif; font-size: 1.5rem; color: #F3F0E2; }
.login-name span { color: #E0A43B; }
.login-eyebrow {
  font: 600 0.58rem/1 'Archivo', sans-serif; letter-spacing: 0.3em;
  text-transform: uppercase; color: #6f9080; margin-top: 6px;
}
.login-card {
  background: #FFFEF8; border-radius: 16px; padding: 28px 26px;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6); text-align: left;
}
.login-card label {
  display: block; font: 600 0.74rem/1 'Archivo', sans-serif; color: #5C6A5E;
}
.login-card input[type=password] {
  width: 100%; margin: 9px 0 16px; padding: 12px 14px;
  border: 1px solid #E1DDCE; border-radius: 10px; background: #FAF6EC;
  font: 500 1rem 'Archivo', sans-serif; color: #18241E; outline: none;
  letter-spacing: 0.04em;
}
.login-card input[type=password]:focus { border-color: #143C2F; }
.login-card button {
  width: 100%; padding: 0.95em; margin: 0; background: #143C2F; color: #F3F0E2;
  border: 0; border-radius: 11px; font: 600 0.9rem/1 'Archivo', sans-serif; cursor: pointer;
}
.login-card .error { margin: 0 0 12px; }
.login-note {
  margin: 16px 0 0; font: 500 0.74rem/1.5 'Archivo', sans-serif;
  color: #8A9183; text-align: center;
}
.login-foot {
  margin: 20px 0 0; font: 500 0.74rem/1 'Archivo', sans-serif; color: #6f9080;
}

/* Home — orphan-gallery warning strip (published galleries with no studio
   client; re-homed from the galleries dashboard in the strict-1:1 rebuild). */
.admin-shell .unlinked-warn {
  margin: 0 0 18px; padding: 14px 16px;
  background: #f7ecd2; border: 1px solid #e6d3a3; border-left: 3px solid #9a7a2c;
  border-radius: 10px;
}
.admin-shell .unlinked-warn-head {
  margin: 0 0 10px; font: 500 0.9rem/1.45 var(--font-ui); color: #6b541d;
}
.admin-shell .unlinked-warn-head strong { font-weight: 800; color: #7C2F38; }
.admin-shell .unlinked-warn-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.admin-shell .unlinked-warn-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fffdf8; border: 1px solid #ecdcb6; border-radius: 8px;
  padding: 8px 12px; flex-wrap: wrap;
}
.admin-shell .unlinked-warn-title { font: 600 0.86rem/1.2 var(--font-ui); color: var(--ink); }
.admin-shell .unlinked-warn-pick { display: flex; gap: 8px; }
.admin-shell .unlinked-warn-pick select {
  font: 500 0.82rem var(--font-ui); padding: 5px 8px;
  border: 1px solid #d9cba6; border-radius: 6px; background: #fff; color: var(--ink);
}
.admin-shell .unlinked-warn-pick button {
  font: 600 0.8rem var(--font-ui); padding: 5px 14px; cursor: pointer;
  background: #7C2F38; color: #fff; border: 0; border-radius: 6px;
}
.admin-shell .unlinked-warn-pick button:hover { background: #66242c; }

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN DARK MODE  — additive & scoped. Every rule above is the locked light
   design; nothing there is touched. The ☾/☀ button in the top bar sets
   data-theme="dark" on <html> (persisted to localStorage, applied pre-paint by
   the inline script in base_admin.html). Only the .admin-shell surface reacts —
   client-facing money docs never wear this shell, so they stay cream.
   This is the "solid pass": the variable block flips the chrome, plus explicit
   overrides for the hardcoded high-visibility components (cards, KPIs, badges,
   board, status pills). Rare long-tail components are fixed as spotted.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The toggle button — lives in the sidebar footer, which is forest-green in
   BOTH modes, so it's styled light-on-green regardless of theme (new component,
   not a light-rule edit). margin-left:auto pushes it to the footer's right. */
.admin-shell .theme-toggle {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  margin-left: auto; padding: 0; cursor: pointer; flex: none;
  background: rgba(255, 255, 255, .05); color: #b9cdbf;
  border: 1px solid rgba(243, 240, 226, .16); border-radius: 8px;
  font-size: .95rem; line-height: 1;
}
.admin-shell .theme-toggle:hover { color: #f3f0e2; border-color: rgba(243, 240, 226, .32); }
.admin-shell .theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 1280px) and (min-width: 861px) {
  .admin-shell .theme-toggle { margin-left: 0; }
}

/* ── 1. Palette flip — overrides both .admin-shell var blocks via higher
       specificity. Warm near-black surfaces, light warm ink, brighter forest
       accent so links/focus stay legible on dark. ───────────────────────── */
html[data-theme="dark"] .admin-shell {
  color-scheme: dark;

  --bg:            #131313;
  --bg-glow:       #1a1a1a;
  --surface:       #1c1c1c;
  --surface-sunk:  #161616;
  --surface-rail:  #181818;
  --card-bg:       #1c1c1c;

  --ink:           #e8e6e2;
  --ink-soft:      #bdbab4;
  --ink-faint:     #8c8a85;
  --ink-ghost:     #66645f;

  --terra:         #23b487;
  --terra-deep:    #0c7c58;
  --terra-tint:    #14271f;
  --terra-tint-2:  #1c3a2d;
  --gold:          #E0A43B;

  --ok:      #9cc178;  --ok-bg:  #20271a;  --ok-line:  #354028;
  --honey:   #d8a857;  --honey-bg:#2b2413; --honey-line:#473a1f;
  --neutral: #aba9a3;  --neutral-bg:#242424;--neutral-line:#353535;
  --clay:    #d98a78;  --clay-bg:#2e1a18;  --clay-line:#4a2c28;

  --line:        #2c2c2c;
  --line-strong: #3a3a3a;
  --line-faint:  #1e1e1e;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.45), 0 22px 48px -20px rgba(0,0,0,.7);
}

/* page background — the light rule paints warm-cream radial glows; repaint dark */
html[data-theme="dark"] .admin-shell {
  background:
    radial-gradient(1100px 520px at 78% -8%, #1c1c1c 0%, rgba(0,0,0,0) 70%),
    radial-gradient(900px 480px at -6% 4%, #181818 0%, rgba(0,0,0,0) 60%),
    var(--bg);
}

/* sticky top bar — light rule uses a translucent cream; go translucent dark */
html[data-theme="dark"] .admin-shell .admin-topbar {
  background: rgba(19, 19, 19, 0.9);
}

/* ── 2. Hardcoded card surfaces (#FFFEF8 / near-white) → var(--surface).
       These classes set their own bg in light mode, so the var flip alone
       leaves them glaring white — override explicitly. ──────────────────── */
html[data-theme="dark"] .admin-shell .kpi-card,
html[data-theme="dark"] .admin-shell .stu-card,
html[data-theme="dark"] .admin-shell .rep-card,
html[data-theme="dark"] .admin-shell .rf-card,
html[data-theme="dark"] .admin-shell .gx-card,
html[data-theme="dark"] .admin-shell .gd-stat,
html[data-theme="dark"] .admin-shell .gd-favtoggle,
html[data-theme="dark"] .admin-shell .gd-deliver,
html[data-theme="dark"] .admin-shell .gd-proof,
html[data-theme="dark"] .admin-shell .gd-panel,
html[data-theme="dark"] .admin-shell .sch-card,
html[data-theme="dark"] .admin-shell .sch-type {
  background: var(--surface); border-color: var(--line);
}
html[data-theme="dark"] .admin-shell .stu-portal-muted { background: var(--surface-sunk); }

/* ── 2b. Long-tail #FFFEF8 panels/pills/controls the var-flip can't reach
        (they hardcode the near-white in their own light rule). Map bg→surface,
        light borders→--line, and the muted forest text #5C6A5E→--ink-soft so it
        stays legible on dark. ─────────────────────────────────────────────── */
html[data-theme="dark"] .admin-shell .stu-newproj-pop,
html[data-theme="dark"] .admin-shell .gd-manage-body,
html[data-theme="dark"] .admin-shell .gd-btn-sm,
html[data-theme="dark"] .admin-shell .dash-search input,
html[data-theme="dark"] .admin-shell .cal-monthnav a,
html[data-theme="dark"] .admin-shell .pgtop-link,
html[data-theme="dark"] .admin-shell .audit-chip {
  background: var(--surface); border-color: var(--line);
}
html[data-theme="dark"] .admin-shell .gx-pill,
html[data-theme="dark"] .admin-shell .gd-pill,
html[data-theme="dark"] .admin-shell .gd-back {
  background: var(--surface); border-color: var(--line); color: var(--ink-soft);
}

/* ── 2c. Gallery card + detail text hardcodes near-black forest ink (#18241E)
        and muted greens (#5C6A5E / #8A9183) that read dark-on-dark here. The
        card surfaces already flip dark, so lift the text: titles → --ink,
        meta/notes → softer ink, and map the cream foot border + draft pill. ── */
html[data-theme="dark"] .admin-shell .gx-card-title,
html[data-theme="dark"] .admin-shell .gd-deliver-l { color: var(--ink); }
html[data-theme="dark"] .admin-shell .gx-card-client,
html[data-theme="dark"] .admin-shell .gx-card-photos,
html[data-theme="dark"] .admin-shell .gd-deliver-m,
html[data-theme="dark"] .admin-shell .gd-proof-note { color: var(--ink-soft); }
html[data-theme="dark"] .admin-shell .gd-deliver-arr,
html[data-theme="dark"] .admin-shell .gd-panel > summary::before { color: var(--ink-faint); }
html[data-theme="dark"] .admin-shell .gx-card-foot { border-color: var(--line); }
html[data-theme="dark"] .admin-shell .gd-status.is-draft {
  background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-line);
}

/* ── 2d. Same dark-on-dark fix for the remaining gallery-detail headings, the
        whole Scheduling page (sch-*), and the global quick-create palette
        (ns-pal-*) — all hardcode near-black ink (#18241E/#283A30/#3B5A48) on
        surfaces that flip dark. Headings/values → --ink, meta → --ink-soft,
        faint labels → --ink-faint, cream dividers → --line. ─────────────────── */
html[data-theme="dark"] .admin-shell .gd-deliver h3,
html[data-theme="dark"] .admin-shell .gd-proof-head h3,
html[data-theme="dark"] .admin-shell .gd-panel > summary,
html[data-theme="dark"] .admin-shell .gd-favtoggle,
html[data-theme="dark"] .admin-shell .sch-h2,
html[data-theme="dark"] .admin-shell .sch-type-name > span:first-child,
html[data-theme="dark"] .admin-shell .sch-day-label,
html[data-theme="dark"] .admin-shell .sch-day-hours,
html[data-theme="dark"] .admin-shell .sch-up-client,
html[data-theme="dark"] .admin-shell .ns-pal-input,
html[data-theme="dark"] .admin-shell .ns-pal-row,
html[data-theme="dark"] .admin-shell .ns-pal-ic { color: var(--ink); }
html[data-theme="dark"] .admin-shell .sch-type-meta,
html[data-theme="dark"] .admin-shell .sch-cell:not(.is-today):not(.is-empty),
html[data-theme="dark"] .admin-shell .sch-up-type,
html[data-theme="dark"] .admin-shell .sch-up-time { color: var(--ink-soft); }
html[data-theme="dark"] .admin-shell .sch-type-up,
html[data-theme="dark"] .admin-shell .sch-dow { color: var(--ink-faint); }
html[data-theme="dark"] .admin-shell .sch-type-foot,
html[data-theme="dark"] .admin-shell .sch-day,
html[data-theme="dark"] .admin-shell .sch-up { border-color: var(--line); }

/* ── 3. Studio board details with hardcoded greys/golds ─────────────────── */
html[data-theme="dark"] .admin-shell .stu-col-count,
html[data-theme="dark"] .admin-shell .kpi-trend-flat,
html[data-theme="dark"] .admin-shell .kpi-trend-cap { color: var(--ink-faint); }
html[data-theme="dark"] .admin-shell .kpi-trend-up,
html[data-theme="dark"] .admin-shell .stu-card-val.is-won { color: #5fbf93; }
html[data-theme="dark"] .admin-shell .stu-viewpill { background: var(--surface-sunk); }
html[data-theme="dark"] .admin-shell .stu-viewpill button.is-active {
  background: var(--terra-deep); color: #F3F0E2;
}
html[data-theme="dark"] .admin-shell .stu-step.tone-warn { background: var(--honey-bg); }

/* ── 4. Semantic status pills/badges — the light tints (#e1f2e9 green,
       #f7ecd2 amber, #f1ece0/#efece0 grey) repeat across many pages, so one
       mapping covers a lot of the long tail. ─────────────────────────────── */
html[data-theme="dark"] .admin-shell .set-badge-connected,
html[data-theme="dark"] .admin-shell .fin-pill-paid,
html[data-theme="dark"] .admin-shell .rc-badge-on,
html[data-theme="dark"] .admin-shell .ct-pill-on {
  background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line);
}
html[data-theme="dark"] .admin-shell .set-badge-edge,
html[data-theme="dark"] .admin-shell .fin-pill-out,
html[data-theme="dark"] .admin-shell .rc-badge-off,
html[data-theme="dark"] .admin-shell .ct-pill-draft,
html[data-theme="dark"] .admin-shell .gd-favtoggle.is-active {
  background: var(--honey-bg); color: var(--honey); border-color: var(--honey-line);
}
html[data-theme="dark"] .admin-shell .set-badge-off,
html[data-theme="dark"] .admin-shell .ct-pill-off {
  background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-line);
}

/* ── 5. Misc hardcoded light panels ─────────────────────────────────────── */
html[data-theme="dark"] .admin-shell .ib-convo { background: var(--surface-sunk); }
/* inbound bubble hardcodes dark forest ink (#2a342c) on var(--surface) — dark
   on dark in dark mode. Lift the text to light ink and remap the cream border. */
html[data-theme="dark"] .admin-shell .ib-bubble { color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .admin-shell .fin-tbl tbody tr:hover { background: var(--surface-sunk); }
html[data-theme="dark"] .admin-shell .project-head {
  background: linear-gradient(170deg, #1f2822 0%, #19211c 100%);
}
html[data-theme="dark"] .admin-shell .unlinked-warn-pick select {
  background: var(--surface); color: var(--ink); border-color: var(--line-strong);
}

/* ── 6. Neutral raised surfaces (pale-cream panels → raised surface) ─────── */
html[data-theme="dark"] .admin-shell .rc-paper,
html[data-theme="dark"] .admin-shell .unlinked-warn-row {
  background: var(--surface); border-color: var(--line);
}

/* ── 7. Neutral recessed surfaces (tracks, columns, panes, key chips) ───── */
html[data-theme="dark"] .admin-shell .inquiry-msg,
html[data-theme="dark"] .admin-shell .stu-col,
html[data-theme="dark"] .admin-shell .stu-portal-ok,
html[data-theme="dark"] .admin-shell .tk-col,
html[data-theme="dark"] .admin-shell .tk-chip,
html[data-theme="dark"] .admin-shell .rep-seg,
html[data-theme="dark"] .admin-shell .ws-admin code,
html[data-theme="dark"] .admin-shell .tr-drop,
html[data-theme="dark"] .admin-shell .tr-seg,
html[data-theme="dark"] .admin-shell .ns-pal-box,
html[data-theme="dark"] .admin-shell .ns-pal-esc,
html[data-theme="dark"] .admin-shell .ns-pal-ic,
html[data-theme="dark"] .admin-shell .ib-threads,
html[data-theme="dark"] .admin-shell .ib-tab,
html[data-theme="dark"] .admin-shell .ib-context,
html[data-theme="dark"] .admin-shell .set-op-value,
html[data-theme="dark"] .admin-shell .fin-range,
html[data-theme="dark"] .admin-shell .fin-seg,
html[data-theme="dark"] .admin-shell .pnl-bar,
html[data-theme="dark"] .admin-shell .fin-bycat-bar,
html[data-theme="dark"] .admin-shell .pt-link,
html[data-theme="dark"] .admin-shell .gd-proof-bar {
  background: var(--surface-sunk); border-color: var(--line);
}

/* ── 8. Generic form controls (any hardcoded white input → dark) ────────── */
html[data-theme="dark"] .admin-shell input,
html[data-theme="dark"] .admin-shell textarea,
html[data-theme="dark"] .admin-shell select,
html[data-theme="dark"] .admin-shell .stu-newproj-pop input,
html[data-theme="dark"] .admin-shell .tk-add-form input,
html[data-theme="dark"] .admin-shell .tk-add-form select,
html[data-theme="dark"] .admin-shell .sch-switch span,
html[data-theme="dark"] .admin-shell .tr-field input,
html[data-theme="dark"] .admin-shell .fin-upload-form select,
html[data-theme="dark"] .admin-shell .rc-del {
  background: var(--surface-sunk); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] .admin-shell input:focus,
html[data-theme="dark"] .admin-shell textarea:focus,
html[data-theme="dark"] .admin-shell select:focus {
  background: var(--surface); border-color: var(--line-strong);
}
html[data-theme="dark"] .admin-shell input::placeholder,
html[data-theme="dark"] .admin-shell textarea::placeholder {
  color: var(--ink-ghost);
}

/* ── 9. Semantic status tints (keep meaning, map to dark status bg) ─────── */
html[data-theme="dark"] .admin-shell .stu-step.tone-urgent,
html[data-theme="dark"] .admin-shell .gal-badge-expired,
html[data-theme="dark"] .admin-shell .sch-up-chip.is-soon,
html[data-theme="dark"] .admin-shell .book-off,
html[data-theme="dark"] .admin-shell .sched-flash-err {
  background: var(--clay-bg); color: var(--clay); border-color: var(--clay-line);
}
html[data-theme="dark"] .admin-shell .fin-del:hover {
  background: var(--clay-bg); color: var(--clay);
}
html[data-theme="dark"] .admin-shell .stu-step.tone-ready,
html[data-theme="dark"] .admin-shell .gal-status-published,
html[data-theme="dark"] .admin-shell .gd-status.is-live,
html[data-theme="dark"] .admin-shell .tr-ico-active,
html[data-theme="dark"] .admin-shell .tr-badge-active,
html[data-theme="dark"] .admin-shell .book-manage-badge.book-ok,
html[data-theme="dark"] .admin-shell .sched-pill-on {
  background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line);
}
html[data-theme="dark"] .admin-shell .stu-step.tone-calm,
html[data-theme="dark"] .admin-shell .gal-status-draft,
html[data-theme="dark"] .admin-shell .gd-status.is-draft,
html[data-theme="dark"] .admin-shell .tr-ico-expired,
html[data-theme="dark"] .admin-shell .tr-badge-expired,
html[data-theme="dark"] .admin-shell .sched-pill-off,
html[data-theme="dark"] .admin-shell .kind-email,
html[data-theme="dark"] .admin-shell .kind-contract,
html[data-theme="dark"] .admin-shell .ct-pill-ai,
html[data-theme="dark"] .admin-shell .ct-preset-ovl,
html[data-theme="dark"] .admin-shell .pt-pin,
html[data-theme="dark"] .admin-shell .sch-up-chip {
  background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-line);
}

/* ── 10. Receipts faux-paper thumb (cream gradient → dark recessed) ─────── */
html[data-theme="dark"] .admin-shell .rc-thumb {
  background: linear-gradient(160deg, #1a1a1a, #141414);
}
html[data-theme="dark"] .admin-shell .rc-line { background: var(--line-strong); }

/* ── 11. Filled buttons: --terra is the BRIGHT text accent and washes out as
   a fill under light text; redirect every solid green button to the deep jade
   --terra-deep so the label keeps contrast (fixes inbox + header CTAs). ───── */
html[data-theme="dark"] .admin-shell .stu-newproj-pop button,
html[data-theme="dark"] .admin-shell .qc-btn,
html[data-theme="dark"] .admin-shell button.primary,
html[data-theme="dark"] .admin-shell button[type="submit"].primary,
html[data-theme="dark"] .admin-shell .dash-new,
html[data-theme="dark"] .admin-shell .dash-horizon button.is-active,
html[data-theme="dark"] .admin-shell .set-badge-ready,
html[data-theme="dark"] .admin-shell .cal-cell.is-today .cal-cell-num span {
  background: var(--terra-deep); border-color: var(--terra-deep);
}

/* Solid clay buttons wash the same way (--clay is a light danger accent in
   dark); give them a saturated terracotta fill so light labels read. */
html[data-theme="dark"] .admin-shell .fin-export-btn,
html[data-theme="dark"] .admin-shell .tk-add-form button,
html[data-theme="dark"] .admin-shell .tr-send {
  background: #a8472f; border-color: #a8472f; color: #F3F0E2;
}

/* ── 12. Page-top header bar: its translucent cream wash (rgba(245,243,235))
   has no dark mapping, so it reads as a faded-white strip over the charcoal
   shell on Financials/Expenses/etc. Match it to the dark bg. ─────────────── */
html[data-theme="dark"] .admin-shell .pgtop {
  background: rgba(19, 19, 19, .82);
}

/* ── 13. Inbox email buttons (Reply / Send via Gmail SMTP / primary action):
   the deep --terra-deep fill reads muddy-green here. Use the bright jade with
   dark ink so the email CTAs clearly read as jade green and stay legible. ── */
html[data-theme="dark"] .admin-shell .ib-reply-btn,
html[data-theme="dark"] .admin-shell .ib-reply-send,
html[data-theme="dark"] .admin-shell .ib-act {
  background: var(--terra); border-color: var(--terra); color: #06231a;
}
html[data-theme="dark"] .admin-shell .ib-reply-btn:hover,
html[data-theme="dark"] .admin-shell .ib-reply-send:hover,
html[data-theme="dark"] .admin-shell .ib-act:hover {
  background: #2ec698; border-color: #2ec698; color: #06231a;
}

/* quick-reply snippet chips: the var-flipped card/ink reads as a faded near-white
   ghost here. Fill with deep jade + white text so they're clearly tappable. */
html[data-theme="dark"] .admin-shell .ib-snippet {
  background: var(--terra-deep); border-color: var(--terra-deep); color: #F3F0E2;
}
html[data-theme="dark"] .admin-shell .ib-snippet:hover {
  background: var(--terra); border-color: var(--terra); color: #F3F0E2;
}

/* ── 14. Gallery header CTA ("Send to client"): the coral --terra fill (terracotta
   in light) maps to muddy --terra-deep here. Match the inbox CTAs — bright jade
   fill, dark ink — so it reads as vibrant jade green. ───────────────────────── */
html[data-theme="dark"] .admin-shell .pgtop-new {
  background: var(--terra); border-color: var(--terra); color: #06231a;
}
html[data-theme="dark"] .admin-shell .pgtop-new:hover {
  background: #2ec698; border-color: #2ec698; color: #06231a;
}

/* ── 15. Brand lockup in dark mode: the gold "Lee" wordmark + "CRM" badge go
   silver (the metallic the dark shell wears). Light mode keeps the locked
   honey-badger gold. ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .admin-shell .admin-brand .mark b { color: #c8ced3; }
html[data-theme="dark"] .admin-shell .ns-crm {
  color: #c8ced3; border-color: rgba(200, 206, 211, .42);
}

/* ── 16. Slytherin insignia (dark mode only): the crest square becomes an
   emerald→black field with a silver serpent. The light honey-badger crest is
   the locked identity, so this swap is additive and dark-scoped. The template
   ships both SVGs; CSS picks one per theme. ─────────────────────────────────── */
.admin-shell .ns-crest-sly { display: none; }
html[data-theme="dark"] .admin-shell .ns-crest {
  background: linear-gradient(150deg, #14181a 0%, #05090a 100%);
  box-shadow: inset 0 0 0 1.5px rgba(200, 206, 211, .35);
}
html[data-theme="dark"] .admin-shell .ns-crest-badger { display: none; }
html[data-theme="dark"] .admin-shell .ns-crest-sly { display: block; }

/* ── 17. Home orphan-gallery warning ("…has no client linked"): its cream
   #f7ecd2 strip has no dark mapping and reads as an off-white blob. Make it a
   silver-grey surface with a silver left rule; lift the head text off the dark. */
html[data-theme="dark"] .admin-shell .unlinked-warn {
  background: linear-gradient(150deg, #34373a 0%, #25272a 100%);
  border-color: rgba(200, 206, 211, .26);
  border-left-color: #aab0b6;
}
html[data-theme="dark"] .admin-shell .unlinked-warn-head { color: var(--ink-soft); }
html[data-theme="dark"] .admin-shell .unlinked-warn-head strong { color: var(--ink); }

/* ============================================================================
   PUBLIC SITE — DARK MODE  (additive, scoped to .site-body under
   html[data-theme="dark"]). Same charcoal / jade / silver scheme as the admin
   shell. The locked candlelit-editorial LIGHT design is byte-untouched — this
   layer only adds higher-specificity dark overrides. The toggle + no-flash
   pre-paint script live in templates/site/base_site.html and share the admin
   localStorage key ("mise-theme") so the preference is one across the property.
   ========================================================================== */
html[data-theme="dark"] .site-body {
  --bg: #131313;          /* page charcoal                                    */
  --ink: #e8e6e2;         /* primary text → light                             */
  --ink-soft: #c7c3bb;    /* secondary text                                   */
  --muted: #9a958c;       /* tertiary / labels                                */
  --card: #1c1c1c;        /* card surface                                     */
  --line: #2c2c2c;        /* hairlines                                        */
  --paper2: #1a1a1a;      /* light-panel sections (services/about) → dark     */
  --accent: #23b487;      /* forest green → bright jade (links, eyebrows)     */
  --accent-lt: #c8ced3;   /* gold → silver — the dark-mode metallic           */
  --espresso: #0f1714;    /* dark sections (footer/delivery/stats) jade-black */
  --espresso2: #16211c;   /* nested dark panels (proof-panel)                 */
  background: #131313;
}

/* Buttons that use --ink as a FILL go light-on-light under the var-flip → give
   them a bright-jade fill with DARK ink (the accessible jade-button pattern,
   same as the admin inbox/gallery CTAs). */
html[data-theme="dark"] .site-body .btn-pill,
html[data-theme="dark"] .site-body .site-nav nav a.nav-cta {
  background: var(--accent); color: #06231a;
}
html[data-theme="dark"] .site-body .btn-pill:hover,
html[data-theme="dark"] .site-body .site-nav nav a.nav-cta:hover {
  background: #2ec698; color: #06231a;
}
html[data-theme="dark"] .site-body .nav-mobile a.nav-cta { color: #06231a; }

/* Translucent-cream scrolled nav backdrop → translucent charcoal. */
html[data-theme="dark"] .site-body .site-nav.scrolled {
  background: rgba(19, 19, 19, .86); border-bottom-color: var(--line);
}
/* Nav links are a hardcoded warm-dark on cream → lift to light. */
html[data-theme="dark"] .site-body .site-nav nav a { color: #c7c3bb; }
html[data-theme="dark"] .site-body .site-nav nav a:hover { color: var(--accent); }

/* Light hairline borders the var-flip can't reach (hardcoded #e3dacb / #c8bfb1). */
html[data-theme="dark"] .site-body .btn-ghost { border-bottom-color: rgba(200, 206, 211, .3); }
html[data-theme="dark"] .site-body .svc-card,
html[data-theme="dark"] .site-body .proc-card,
html[data-theme="dark"] .site-body .testimonial { border-color: #2c2c2c; }

/* Near-black testimonial quote (#2a241d) would vanish on the dark card. */
html[data-theme="dark"] .site-body .testimonial blockquote { color: var(--ink); }

/* Light image-placeholder backgrounds → dark, so an unloaded/missing image
   never flashes a pale block on the charcoal page. */
html[data-theme="dark"] .site-body .hero-photo,
html[data-theme="dark"] .site-body .work-grid .tile,
html[data-theme="dark"] .site-body .about-photo,
html[data-theme="dark"] .site-body .ab-photo,
html[data-theme="dark"] .site-body .contact-photo { background: #222; }

/* Footer base rule was a bordeaux hairline. */
html[data-theme="dark"] .site-body .footer-base { border-top-color: rgba(200, 206, 211, .14); }

/* Footer theme toggle — a NEW element, styled for BOTH themes (it always sits
   in the dark footer). Ghost pill that reads on the espresso footer. */
.site-body .site-theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(200, 206, 211, .28);
  color: inherit; font: 600 .68rem/1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; transition: border-color .2s ease, color .2s ease;
}
.site-body .site-theme-toggle:hover { border-color: var(--accent-lt); color: var(--cream); }
.site-body .site-theme-toggle-icon { font-size: .9rem; line-height: 1; }

/* Form fields have no explicit background → default white box on the charcoal
   page. Give the site's contact/lead forms a dark surface. */
html[data-theme="dark"] .site-body .stack-form input,
html[data-theme="dark"] .site-body .stack-form select,
html[data-theme="dark"] .site-body .stack-form textarea {
  background: #1c1c1c; color: var(--ink); border-color: #2c2c2c;
}
html[data-theme="dark"] .site-body .stack-form input::placeholder,
html[data-theme="dark"] .site-body .stack-form textarea::placeholder { color: var(--muted); }
/* The form submit uses the global `button` rule (--ink fill + #fff) → washed in
   dark; give it the bright-jade + dark-ink treatment. */
html[data-theme="dark"] .site-body .stack-form button[type=submit],
html[data-theme="dark"] .site-body .stack-form button:not(.site-theme-toggle) {
  background: var(--accent); color: #06231a;
}