/* Restaurant brand: tomato red, midnight blue, and cool white. */
:root {
  --ink: #152238;
  --muted: #526078;
  --line: #d9e2ef;
  --paper: #edf2fa;
  --night: #111c30;
  --night-border: #2b3c58;
  --tomato: #c51c3a;
  --tomato-dark: #a1142d;
  --red-wash: #ffedf0;
  --blue-wash: #e7efff;
  --blue-ink: #28477c;
  --gold: #b15514;
}

body, .main { background: var(--paper); color: var(--ink); }
h1, h2, h3 { color: var(--ink); }
a, .eyebrow, .card-head a, .command-panel-title a, .command-empty a { color: var(--tomato-dark); }
.subtitle, footer, .tool-card p { color: var(--muted); }

aside {
  background: linear-gradient(165deg, #1d2d48 0%, var(--night) 58%);
  color: #f0f5ff;
  border-color: var(--night-border);
  box-shadow: 3px 0 18px #111c301c;
  scrollbar-color: #516582 transparent;
}
.restaurant-logo { border-color: #ff7183; box-shadow: 0 0 0 5px #ff71832b; }
.brand-name { color: #fff !important; }
.brand-name small { color: #ff9ba8 !important; }
.workspace { background: #223550; border-color: #354d6d; }
.workspace small, .nav-label { color: #b1c0d8; }
.avatar { background: #f8c05c; color: #2e1b09; }
nav a { color: #d2ddf0; }
nav a:hover { background: #2c4160; color: #fff; }
nav a.active, nav a.active:hover {
  background: var(--tomato);
  border-color: #f65b72;
  color: #fff;
}
nav .nav-count { background: #364f72; color: #fff; }
nav a.active .nav-count { background: #83182b; }
.aside-bottom, .aside-bottom a, .aside-bottom small, .signout { color: #d2ddf0; }
.aside-bottom { border-color: #344967; }

header { background: var(--night); border-color: var(--night-border); color: #fff; }
.profile-medallion { background: #ffd079; color: #301e10 !important; }
.demo-banner, .live-status { background: var(--blue-wash); color: var(--blue-ink); border-color: #c4d5f1; }
.demo-banner span { background: #28477c; color: #fff; }

.command-hero {
  background-color: #501329;
  background-image: linear-gradient(90deg, #3a1028 0%, #52132bf5 34%, #6a193ed6 52%, #371b4166 74%, #181e342e 100%), url('/pizza-command-hero.png');
  border-color: #70354f;
  box-shadow: 0 12px 26px #47172d27;
}
.command-hero h1, .command-eyebrow, .hero-capabilities span { color: #fff; }
.command-hero h1 { text-shadow: 0 2px 15px #280a22a6; }
.script-title { color: #ffc36f; }
.hero-capabilities svg { color: #ffbdc8; }

.card, .stat, .command-panel, .command-stat {
  border-color: var(--line);
  box-shadow: 0 4px 18px #18345f0c;
}
.command-stat { border-color: var(--line) !important; }
.command-stat-icon, .command-stat.red .command-stat-icon,
.command-panel-title svg, .command-actions svg, .assistant-action svg { color: var(--tomato); }
.command-actions button:hover, .assistant-action:hover, .command-campaign-row:hover {
  background: var(--red-wash);
  border-color: #f3b9c3;
  color: var(--tomato-dark);
}
.primary, button.primary, .button.primary, .command-actions button.red-action {
  background: var(--tomato);
  border-color: var(--tomato);
  color: #fff;
}
.primary:hover, button.primary:hover, .button.primary:hover, .command-actions button.red-action:hover {
  background: var(--tomato-dark);
  border-color: var(--tomato-dark);
  color: #fff;
}
.primary svg, .command-actions .red-action svg { color: #fff; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #426ad9;
  outline-offset: 3px;
}
input:focus, select:focus, textarea:focus { border-color: #426ad9; outline-color: #426ad9; }

.campaign-overview, .campaign-tabs, .note, .command-tip,
.gr-setup-copy, .gr-existing-reply, .invite-link {
  background: var(--blue-wash);
  border-color: #c5d6f4;
  color: var(--blue-ink);
}
.campaign-overview p, .campaign-overview-counts span, .command-tip p, .command-tip h2,
.gr-setup-copy p, .gr-existing-reply strong, .form-message { color: var(--blue-ink); }
.campaign-overview-icon, .library-icon, .campaign-thumb, .stat-icon, .step-icon, .robot-orb, .gr-avatar {
  background: var(--red-wash);
  border-color: #f2c2cc;
  color: var(--tomato-dark);
}
.campaign-tabs button, .campaign-tabs button span { color: var(--blue-ink); }
.campaign-tabs button span { background: #d7e5ff; }
.campaign-tabs button.selected { background: #fff; color: var(--tomato-dark); border-bottom-color: var(--tomato); }
.campaign-tabs button.selected span, .plan-item input:checked + .plan-check {
  background: var(--tomato); border-color: var(--tomato); color: #fff;
}
.titan-heading h2 { color: var(--ink); }
.ai-disclosure, .local-checklist-label, .auth-links button { color: var(--muted); }
.sample-label, .badge.gold { background: var(--blue-wash); border-color: #c5d6f4; color: var(--blue-ink); }
th { background: #f0f5ff; color: var(--blue-ink); }
.chat .bubble, .bubble { background: #edf2f9; color: var(--ink); border-color: var(--line); }
.chat .outbound, .bubble.outbound { background: var(--blue-wash); color: #213d6c; border-color: #c9d8f5; }
.chat small, .conversation small { color: var(--muted); }
.conversation.selected, .conversation:hover { background: var(--red-wash); color: var(--tomato-dark); }
.market-strip, #toast { background: var(--night); }
.market-strip a, .auth-brand .eyebrow { color: #ffc36f; }
.auth-brand { background: radial-gradient(ellipse at 100% 100%, #681f3d, var(--night) 72%); }

@media (max-width: 650px) {
  .command-hero {
    background-image: linear-gradient(90deg, #3a1028fa, #52132beb 58%, #38172c80), url('/pizza-command-hero.png');
  }
}

/* Replace the former warm surfaces and high-specificity sidebar colors. */
aside nav a, aside nav a span, aside nav a > svg { color: #d2ddf0; }
aside nav a.active, aside nav a.active:hover, aside nav a.active span,
aside nav a:hover, aside nav a:hover span, aside nav a:hover > svg,
aside nav a.active > svg, aside nav .nav-count { color: #fff; }
.card, .stat, .command-panel, .command-stat, .tool-card {
  background: #fff !important;
  box-shadow: 0 4px 18px #18345f0c !important;
}
.live-grid .card {
  background: linear-gradient(145deg, #fff 28%, #eff5ff) !important;
}
.hero-capabilities > div { border-color: #ffffff40; }
.hero-capabilities svg, .hero-capabilities > div:first-child svg,
.hero-capabilities > div:nth-child(2) svg { color: #ffbdc8; }
.red-swish { background: linear-gradient(90deg, #fb4c6b, #ffc36f); }
.news-wire, .table-wrap { background: #f2f6ff; border-color: var(--line); }
td { background: #fff; border-color: var(--line); }
.news-item, .conversation, .team-row, .plan-item, .command-campaign-row,
.activity, .steps li, footer { border-color: var(--line); }
.news-topline, .library-search span { color: var(--blue-ink); }
.library-search:focus-within { outline-color: #426ad9; }
.library-row { background: #fff; border-color: var(--line); }
.library-row:nth-child(even) { background: #f4f7fd; }
.library-row:hover { background: var(--blue-wash); }
.library-copy h3, .library-metric strong { color: var(--ink); }
.library-description, .library-copy small, .library-metric span,
.library-secondary, .library-pagination { color: var(--muted); }
.library-pagination, .library-empty { background: #f4f7fd; border-color: var(--line); }
#nav a[href="#slice"] span, #nav a[href="#slice"] > svg,
#nav a[href="#slice-customers"] > svg { color: #154e2e; }
#nav a[href="#slice-customers"].active > svg { color: #c9ffdc; }

/* Contact names open a profile. Unsubscribe is a destructive action. */
#contact-rows button[data-contact-detail] {
  background: var(--blue-wash);
  border-color: #b4c9ec;
  color: #203d70;
}
#contact-rows button[data-contact-detail]:hover {
  background: #d7e5ff;
  border-color: #7899d2;
}
#contact-rows button[data-unsubscribe] {
  background: #b91c29;
  border-color: #941421;
  color: #fff;
}
#contact-rows button[data-unsubscribe]:hover {
  background: #971523;
  border-color: #73101b;
}

/* Separate the import action from destructive contact controls. */
main:has(#contact-rows) button[onclick*="#import"],
#do-import {
  background: #157044;
  border-color: #126039;
  color: #fff;
}
main:has(#contact-rows) button[onclick*="#import"]:hover,
#do-import:hover {
  background: #105834;
  border-color: #0c482a;
  color: #fff;
}

/* Sign-in artwork uses the existing restaurant photography. */
.restaurant-signin {
  min-height: 100svh;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: var(--night);
}
.restaurant-signin .signin-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(30px, 5.5vw, 84px);
  background: #221025;
}
.signin-hero::before, .signin-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.signin-hero::before {
  background: url('/pizza-command-hero.png') 68% center / cover no-repeat;
  animation: signin-photo 1000ms ease-out both;
}
.signin-hero::after {
  background:
    linear-gradient(0deg, #220e22 4%, #2d1027ee 28%, #45162a30 76%),
    linear-gradient(115deg, #111c30ef, #30132944 72%);
}
.signin-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.restaurant-signin .signin-brand img {
  width: 68px;
  height: 68px;
  margin: 0;
  border: 1px solid #ffbf83;
  box-shadow: 0 0 0 5px #ffbf8322;
}
.signin-brand strong { display: block; font-size: 20px; color: #fff; }
.signin-brand span {
  display: block;
  margin-top: 4px;
  color: #ffd0a0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}
.signin-story {
  max-width: 590px;
  animation: signin-reveal 550ms 100ms ease-out both;
}
.restaurant-signin .signin-tagline {
  display: block;
  margin: 12px 0 0;
  color: #fff;
  font: 800 clamp(39px, 6vw, 94px)/.99 'Manrope', Arial, sans-serif;
  letter-spacing: -.065em;
}
.signin-tagline em {
  color: #ffc477;
  font: 400 1.12em/.94 'Birthstone', cursive;
  letter-spacing: -.01em;
}
.restaurant-signin .signin-description {
  max-width: 370px;
  margin: 18px 0 20px;
  color: #f1e1e9;
  font-size: 15px;
  line-height: 1.65;
}
.signin-features { display: flex; flex-wrap: wrap; gap: 8px; }
.signin-features span {
  padding: 7px 11px;
  border: 1px solid #ffcad055;
  border-radius: 999px;
  background: #ffffff0d;
  color: #ffe8eb;
  font-size: 11px;
}
.restaurant-signin .signin-panel {
  padding: clamp(24px, 5vw, 82px);
  background: radial-gradient(ellipse at 95% 0%, #dce9ff, transparent 62%), #eef3fb;
}
.signin-card {
  width: min(100%, 480px);
  margin: auto;
  padding: clamp(24px, 4vw, 54px);
  border: 1px solid #d6e0f0;
  border-top: 4px solid var(--tomato);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 68px #1a345124;
  animation: signin-reveal 550ms ease-out both;
}
.signin-card h1 {
  margin: 10px 0;
  font-size: clamp(28px, 3.5vw, 47px);
  line-height: 1.08;
  letter-spacing: -.055em;
}
.signin-card .subtitle { line-height: 1.55; }
.signin-card input { border: 1px solid #b6c7de; border-radius: 10px; }
.signin-card .auth-submit { border-radius: 10px; }
.signin-card .auth-links { flex-wrap: wrap; }
.signin-card .auth-links button { color: #244a80; text-decoration: underline; text-underline-offset: 3px; }
.signin-card .form-message:empty { margin: 12px 0 0; }

@keyframes signin-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes signin-photo {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}
@media (max-width: 700px) {
  .restaurant-signin { grid-template-columns: 1fr; }
  .restaurant-signin .signin-hero { min-height: 265px; gap: 28px; padding: 23px 24px 28px; }
  .restaurant-signin .signin-brand img { width: 48px; height: 48px; }
  .signin-brand strong { font-size: 16px; }
  .restaurant-signin .signin-tagline { font-size: clamp(37px, 9vw, 62px); }
  .restaurant-signin .signin-panel { padding: 22px 16px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .signin-hero::before, .signin-story, .signin-card { animation: none; }
}