/* =====================================================================
   delta — Open Air Resort · brand.css
   Authoritative design tokens + shared component classes for the web demo.
   Light, airy, editorial. Viola is the dark accent. (BRAND-SPEC.md)
   ===================================================================== */

:root {
  /* ---- Core brand palette (exact hex) ---- */
  --azzurro: #d8efff;   /* sky — cool surfaces, info, washes */
  --viola:   #351e29;   /* deep plum — PRIMARY brand */
  --verde:   #ebf2d0;   /* sage — eco accent, text on viola */
  --nero:    #000000;
  --bianco:  #ffffff;

  /* ---- Extended blues ---- */
  --blue-100: #d8efff;
  --blue-300: #a8cfdf;
  --blue-700: #33505c;

  /* ---- Extended plum / coral ---- */
  --plum-900: #351e29;
  --sand-300: #c6a591;
  --coral:    #ff6b6b;   /* alerts / urgent */

  /* ---- Extended greens ---- */
  --verde-100:  #ebf2d0;
  --verde-400:  #9cc080;
  --forest-700: #1f3a16;  /* readable green text on light */
  --forest-500: #4f7a3a;

  /* ---- Tinted surfaces ---- */
  --wash-azzurro: #eef7ff;
  --wash-verde:   #f4f8e6;
  --surface:      #ffffff;
  --surface-2:    #faf9fb;

  /* ---- Text ---- */
  --ink:        #351e29;   /* body text on light (warm near-black) */
  --ink-muted:  #6b5560;   /* muted viola tint */
  --ink-faint:  #9a8a91;
  --on-viola:        #ffffff;
  --on-viola-muted:  rgba(255,255,255,.66);

  /* ---- Hairlines & borders ---- */
  --hairline:       rgba(53,30,41,.10);
  --hairline-strong:rgba(53,30,41,.16);
  --hairline-onviola: rgba(255,255,255,.12);

  /* ---- Type ---- */
  --font-display: "Zodiac", "Playfair Display", Georgia, serif;
  --font-sans:    "Satoshi", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(53,30,41,.05);
  --shadow:    0 6px 24px -12px rgba(53,30,41,.20);
  --shadow-lg: 0 24px 60px -28px rgba(53,30,41,.32);

  /* ---- Spacing scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --content-max: 1240px;
}

/* =====================================================================
   Gentle reset
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--surface-2);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--viola);
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.12rem; }
p  { color: var(--ink); }

::selection { background: var(--viola); color: var(--verde); }

/* =====================================================================
   App shell — CSS grid sidebar + main (injected by shell.js)
   ===================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ---- Sidebar (guest) ---- */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background: var(--viola);
  color: var(--on-viola);
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-5);
  gap: var(--s-7);
  overflow-y: auto;
}

.brand-lockup { display: flex; flex-direction: column; gap: 4px; }
.brand-lockup .mark {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bianco);
  text-transform: lowercase;
}
.brand-lockup .descriptor {
  font-family: var(--font-sans);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--on-viola-muted);
}
/* lockup on light surfaces (index hero / staff header) */
.brand-lockup.on-light .mark { color: var(--viola); }
.brand-lockup.on-light .descriptor { color: var(--ink-muted); }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-section {
  font-family: var(--font-sans);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-viola-muted);
  padding: 0 var(--s-3);
  margin-bottom: var(--s-2);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  color: var(--on-viola-muted);
  font-size: .92rem;
  font-weight: 500;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }
.nav-item:hover { background: rgba(255,255,255,.06); color: var(--bianco); }
.nav-item.active {
  background: var(--verde);
  color: var(--viola);
  border-left-color: var(--verde);
}
.nav-item.active svg { opacity: 1; }

.sidebar-foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline-onviola);
}
.avatar {
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  background: var(--verde);
  color: var(--viola);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1rem;
  flex-shrink: 0;
}
.sidebar-foot .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sidebar-foot .who b { font-weight: 600; font-size: .85rem; color: var(--bianco); }
.sidebar-foot .who span { font-size: .72rem; color: var(--on-viola-muted); }
.sidebar-foot .esci {
  margin-left: auto;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-viola-muted);
}
.sidebar-foot .esci:hover { color: var(--verde); }

/* ---- Staff header (minimal, replaces guest sidebar) ---- */
.staff-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-7);
  background: var(--viola);
  color: var(--on-viola);
}
.staff-header .brand-lockup .mark { color: var(--bianco); }
.staff-header .staff-tag {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--verde);
  padding-left: var(--s-5);
  border-left: 1px solid var(--hairline-onviola);
}
.staff-header .back {
  margin-left: auto;
  font-size: .82rem;
  color: var(--on-viola-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.staff-header .back:hover { color: var(--verde); }

/* =====================================================================
   Main column + topbar
   ===================================================================== */
.main-col { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-7);
  background: rgba(250,249,251,.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.page-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--viola);
  line-height: 1.1;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
.guest-id { text-align: right; line-height: 1.25; }
.guest-id b { font-weight: 600; font-size: .88rem; color: var(--viola); }
.guest-id span { display: block; font-size: .74rem; color: var(--ink-muted); }

/* =====================================================================
   Content
   ===================================================================== */
.content {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-7) var(--s-7) var(--s-9);
}
.content > * + * { margin-top: var(--s-6); }

/* =====================================================================
   Cards
   ===================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-6);
}
.card.pad-lg { padding: var(--s-7); }
.card.wash-azzurro { background: var(--wash-azzurro); border-color: rgba(51,80,92,.12); }
.card.wash-verde   { background: var(--wash-verde);   border-color: rgba(31,58,22,.12); }
.card.on-viola     { background: var(--viola); color: var(--on-viola); border-color: var(--hairline-onviola); }
.card.on-viola h1, .card.on-viola h2, .card.on-viola h3, .card.on-viola h4 { color: var(--bianco); }
.card.on-viola p { color: var(--on-viola-muted); }
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-4);
}

/* =====================================================================
   Responsive grid
   ===================================================================== */
.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.tight  { gap: var(--s-4); }

/* =====================================================================
   Stat — big Zodiac number
   ===================================================================== */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
  line-height: 1;
  color: var(--viola);
  letter-spacing: -0.01em;
}
.stat .num small { font-size: .5em; color: var(--ink-muted); }
.stat .stat-foot { font-size: .82rem; color: var(--forest-500); }
.card.on-viola .stat .num { color: var(--bianco); }
.card.on-viola .stat .stat-foot { color: var(--verde); }

/* =====================================================================
   Eyebrow + labels
   ===================================================================== */
.eyebrow {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.card.on-viola .eyebrow { color: var(--verde); }

.lede { font-size: 1.12rem; color: var(--ink-muted); line-height: 1.5; max-width: 60ch; }

/* =====================================================================
   Pills / badges
   ===================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(53,30,41,.06);
  color: var(--viola);
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}
.pill.no-dot::before { display: none; }
.pill-verde   { background: var(--wash-verde);  color: var(--forest-700); border-color: rgba(31,58,22,.18); }
.pill-azzurro { background: var(--wash-azzurro); color: var(--blue-700);   border-color: rgba(51,80,92,.18); }
.pill-coral   { background: #ffecec;            color: #c0392b;            border-color: rgba(255,107,107,.35); }
.pill-viola   { background: var(--viola);       color: var(--verde);       border-color: transparent; }

/* status pill in the topbar */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--wash-verde);
  color: var(--forest-700);
  border: 1px solid rgba(31,58,22,.18);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.status-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--forest-500);
  box-shadow: 0 0 0 3px rgba(79,122,58,.18);
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .01em;
  background: var(--viola);
  color: var(--bianco);
  border: 1px solid var(--viola);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }

.btn-outline { background: transparent; color: var(--viola); border-color: var(--hairline-strong); }
.btn-outline:hover { background: rgba(53,30,41,.04); border-color: var(--viola); }

.btn-verde { background: var(--verde); color: var(--viola); border-color: var(--verde); }
.btn-verde:hover { background: #e1ecc0; }

.btn.sm { padding: 8px 14px; font-size: .82rem; }
.btn.block { width: 100%; }

/* =====================================================================
   Utilities
   ===================================================================== */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.serif { font-family: var(--font-display); }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: var(--s-4); }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack.tight { gap: var(--s-2); }

.divider { height: 1px; background: var(--hairline); border: 0; margin: var(--s-5) 0; }
.divider.on-viola { background: var(--hairline-onviola); }

.tag-mono {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--blue-700);
  background: var(--wash-azzurro);
  padding: 2px 8px;
  border-radius: 6px;
}

/* =====================================================================
   Index / cover
   ===================================================================== */
.cover {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--s-8) var(--s-7) var(--s-9);
  max-width: 1200px;
  margin: 0 auto;
}
.cover-hero { padding: var(--s-8) 0 var(--s-7); }
.cover-hero .mark-xl {
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 12vw, 9rem);
  line-height: .9;
  letter-spacing: -0.03em;
  color: var(--viola);
  text-transform: lowercase;
}
.cover-hero .descriptor {
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--s-3);
}
.cover-hero .tagline {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  color: var(--viola);
  margin-top: var(--s-6);
}
.cover-hero .intro { margin-top: var(--s-3); max-width: 56ch; }

.gallery-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 168px;
}
.gallery-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--hairline-strong); }
.gallery-card .gc-num {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-faint);
}
.gallery-card h3 { font-size: 1.3rem; }
.gallery-card p { font-size: .9rem; color: var(--ink-muted); }
.gallery-card .go {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 600; color: var(--viola);
}
.gallery-card.is-staff { background: var(--viola); border-color: var(--hairline-onviola); }
.gallery-card.is-staff h3 { color: var(--bianco); }
.gallery-card.is-staff p { color: var(--on-viola-muted); }
.gallery-card.is-staff .gc-num,
.gallery-card.is-staff .go { color: var(--verde); }

/* =====================================================================
   Responsive — collapse sidebar to a top bar under 900px
   ===================================================================== */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
  }
  .brand-lockup { margin-right: auto; }
  .brand-lockup .mark { font-size: 1.5rem; }
  .nav {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    order: 3;
  }
  .nav-section { display: none; }
  .nav-item {
    border-left: 0;
    padding: 7px 12px;
    font-size: .84rem;
  }
  .nav-item.active { border-left: 0; }
  .nav-item span.label { display: inline; }
  .sidebar-foot { border-top: 0; padding-top: 0; }
  .sidebar-foot .who { display: none; }
  .topbar { padding: var(--s-4) var(--s-5); flex-wrap: wrap; }
  .content { padding: var(--s-5) var(--s-5) var(--s-8); }
  .staff-header { flex-wrap: wrap; padding: var(--s-4) var(--s-5); }
}

@media (max-width: 560px) {
  .guest-id { display: none; }
  .nav-item span.label { font-size: .8rem; }
  .cover { padding: var(--s-6) var(--s-5) var(--s-8); }
}

/* =====================================================================
   CONCEPT EXTENSIONS — shared component classes for screen agents.
   ADD-ONLY. Uses existing brand tokens. Light, editorial, WCAG AA.
   (See SHARED-CONTRACT.md for the class index + usage.)
   ===================================================================== */

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group + .field-group { margin-top: var(--s-4); }

.field-label {
  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.input,
.textarea,
.select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: .94rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-faint); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.select {
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5560' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--viola);
  box-shadow: 0 0 0 3px rgba(53,30,41,.14);
}

/* Pill toggle */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 46px; height: 26px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: rgba(53,30,41,.16);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.switch::after {
  content: "";
  position: absolute;
  left: 3px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bianco);
  box-shadow: var(--shadow-sm);
  transition: left .18s ease;
}
.switch:checked,
.switch.checked { background: var(--viola); }
.switch:checked::after,
.switch.checked::after { left: 23px; }
.switch:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(53,30,41,.14); }

/* Segmented control */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: rgba(53,30,41,.06);
  border: 1px solid var(--hairline);
}
.seg-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.seg-item:hover { color: var(--viola); }
.seg-item.active { background: var(--viola); color: var(--bianco); }
.seg-item.active:hover { color: var(--bianco); }

/* Selectable card */
.choice {
  display: block;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.choice:hover { border-color: var(--viola); box-shadow: var(--shadow-sm); }
.choice.sel {
  border-color: var(--viola);
  background: rgba(53,30,41,.05);
  box-shadow: 0 0 0 1px var(--viola) inset;
}

/* Checkbox / radio row */
.check-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 2px;
  font-size: .92rem;
  color: var(--ink);
  cursor: pointer;
}
.check-row input[type="checkbox"],
.check-row input[type="radio"] {
  accent-color: var(--viola);
  width: 17px; height: 17px;
  flex-shrink: 0;
  cursor: pointer;
}
.check-row + .check-row { border-top: 1px solid var(--hairline); }

/* ---------------------------------------------------------------------
   Data — tables
   --------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: .9rem;
}
.table thead th {
  font-family: var(--font-sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline-strong);
  white-space: nowrap;
}
.table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.table th.num { text-align: right; }

/* ---------------------------------------------------------------------
   Data — KPI tile
   --------------------------------------------------------------------- */
.kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.kpi .kpi-label {
  font-family: var(--font-sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.kpi .num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  line-height: 1;
  color: var(--viola);
  letter-spacing: -.01em;
}
.kpi .num small { font-size: .5em; color: var(--ink-muted); }
.kpi .kpi-foot { font-size: .78rem; color: var(--ink-muted); }
.kpi.wash-verde   { background: var(--wash-verde);   border-color: rgba(31,58,22,.12); }
.kpi.wash-azzurro { background: var(--wash-azzurro); border-color: rgba(51,80,92,.12); }
.kpi.on-viola     { background: var(--viola); border-color: var(--hairline-onviola); }
.kpi.on-viola .num { color: var(--bianco); }
.kpi.on-viola .kpi-label { color: var(--verde); }
.kpi.on-viola .kpi-foot { color: var(--on-viola-muted); }

/* ---------------------------------------------------------------------
   Data — progress bar
   --------------------------------------------------------------------- */
.bar {
  height: 8px;
  width: 100%;
  border-radius: var(--r-pill);
  background: rgba(53,30,41,.08);
  overflow: hidden;
}
.bar .fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--viola);
  transition: width .4s ease;
}
.bar.verde .fill { background: var(--forest-500); }
.bar.coral .fill { background: var(--coral); }

/* ---------------------------------------------------------------------
   Data — timeline
   --------------------------------------------------------------------- */
.timeline { position: relative; display: flex; flex-direction: column; gap: var(--s-5); }
.tl-item {
  position: relative;
  padding-left: var(--s-6);
}
.tl-item::before {
  content: "";
  position: absolute;
  left: 4px; top: 16px; bottom: -22px;
  width: 2px;
  background: var(--hairline-strong);
}
.timeline .tl-item:last-child::before { display: none; }
.tl-item::after {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--viola);
  box-shadow: 0 0 0 3px rgba(53,30,41,.10);
}
.tl-item.verde::after { background: var(--forest-500); box-shadow: 0 0 0 3px rgba(79,122,58,.18); }
.tl-item.coral::after { background: var(--coral); box-shadow: 0 0 0 3px rgba(255,107,107,.22); }
.tl-item .tl-time {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-muted);
  letter-spacing: -.01em;
}
.tl-item .tl-body { margin-top: 2px; }

/* ---------------------------------------------------------------------
   Data — tabs
   --------------------------------------------------------------------- */
.tabs {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  border-bottom: 1px solid var(--hairline);
}
.tab {
  position: relative;
  padding: 0 0 12px;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease;
}
.tab:hover { color: var(--viola); }
.tab.active { color: var(--viola); }
.tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--viola);
  border-radius: var(--r-pill);
}

/* ---------------------------------------------------------------------
   Selectable chip
   --------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.chip:hover { border-color: var(--viola); }
.chip.sel {
  background: var(--viola);
  color: var(--bianco);
  border-color: var(--viola);
}

/* ---------------------------------------------------------------------
   QR placeholder (faux scannable code)
   --------------------------------------------------------------------- */
.qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.qr .qr-code {
  width: 140px; height: 140px;
  background: var(--bianco);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  padding: 12px;
  background-image:
    linear-gradient(45deg, var(--viola) 25%, transparent 25%, transparent 75%, var(--viola) 75%),
    linear-gradient(45deg, var(--viola) 25%, transparent 25%, transparent 75%, var(--viola) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  background-origin: content-box;
  background-clip: content-box;
}
.qr .qr-cap {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------
   Empty state
   --------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
  padding: var(--s-8) var(--s-6);
  color: var(--ink-muted);
}
.empty-state svg { width: 34px; height: 34px; color: var(--ink-faint); }
.empty-state .es-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--viola); }
.empty-state p { color: var(--ink-muted); font-size: .9rem; max-width: 42ch; }

/* ---------------------------------------------------------------------
   Product card + price
   --------------------------------------------------------------------- */
.product {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
}
.product:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--hairline-strong); }
.product-media {
  height: 140px;
  background:
    linear-gradient(135deg, var(--azzurro), var(--wash-verde) 55%, rgba(53,30,41,.10));
  display: flex;
  align-items: flex-end;
  padding: var(--s-4);
}
.product-media.verde  { background: linear-gradient(135deg, var(--wash-verde), var(--verde) 60%, rgba(31,58,22,.14)); }
.product-media.viola  { background: linear-gradient(135deg, var(--azzurro), var(--viola)); }
.product-body { display: flex; flex-direction: column; gap: 6px; padding: var(--s-5); flex: 1; }
.product-body h4 { font-size: 1.08rem; }
.product-body p { font-size: .86rem; color: var(--ink-muted); }
.product .product-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: auto; padding-top: var(--s-3);
}

.price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1;
  color: var(--viola);
  letter-spacing: -.01em;
}
.price .unit {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------------
   Concept extensions — responsive
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
  .seg { width: 100%; }
  .seg-item { flex: 1; padding: 7px 10px; }
  .tabs { gap: var(--s-4); overflow-x: auto; }
  .product-media { height: 120px; }
}