/* Dusk component layer. Tokens come from tailwind.config.js; this file is the one place a
   button, a field, a card or a row is defined, so no screen invents its own. */

:root {
  --canvas: #0a0a0a;
  --graphite: #161616;
  --frost: rgba(212, 212, 212, 0.1);
  --frost-strong: rgba(212, 212, 212, 0.16);
  --snow: #ffffff;
  --bone: #ededed;
  --ash: #c2c2c2;
  --slate: #686868;
  --smoke: #b2b2b2;
  --hair: rgba(229, 229, 229, 0.14);
  --hair-strong: rgba(229, 229, 229, 0.28);
  --ok: #7fbf8f;
  --wait: #d9b36b;
  --bad: #e07a7a;
  --r-ui: 10px;
  --r-card: 24px;
  --r-pill: 9999px;
  --gap-s: 12px;   /* inside a component */
  --gap-l: 32px;   /* between sections */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: dark;
}

/* Minimal reset: Tailwind's preflight is off (see tailwind.config.js). */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--hair); }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
input, select, textarea { font: inherit; color: inherit; margin: 0; }
table { border-collapse: collapse; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
html { background: var(--canvas); color: var(--bone); -webkit-text-size-adjust: 100%; }
body {
  font-family: Inter, "Noto Sans Hebrew", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.5; letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; margin: 0;
}
h1, h2, h3, h4 { font-weight: 500; color: var(--bone); margin: 0; text-wrap: balance; }
h1 { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
h3 { font-size: 16px; line-height: 1.4; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg.ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.ic.sm { width: 16px; height: 16px; }
svg.ic.lg { width: 24px; height: 24px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--slate); }
.sec { color: var(--ash); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; border-radius: var(--r-ui); }
::selection { background: rgba(107, 98, 242, 0.4); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- surfaces ---------- */
.panel { background: var(--graphite); border: 1px solid var(--hair); border-radius: var(--r-card); }
.glass { background: var(--frost); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hair); border-radius: var(--r-card); }
.inverted { background: var(--snow); color: var(--graphite); border-radius: var(--r-card); }
.card { background: var(--graphite); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 20px; }
.card.pad-lg { padding: 28px; }
.hero { background-image: linear-gradient(100deg, #e0875a 0%, #c86a6a 35%, #5d5bd6 70%, #2f4fd6 100%);
  color: var(--snow); border-radius: var(--r-card); }
.wash { position: relative; }
.wash::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 30%, rgba(107,98,242,0.7) 50%, rgba(0,0,0,0) 70%, rgba(0,0,0,0)); }
.hr { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  padding: 8px 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent; transition: transform 160ms var(--ease-out), background-color 160ms ease,
  border-color 160ms ease, color 160ms ease, opacity 160ms ease; user-select: none; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--snow); color: var(--graphite); }
.btn-primary:hover { background: var(--bone); }
.btn-secondary { background: transparent; color: rgba(255,255,255,0.85); border-color: var(--hair-strong); }
.btn-secondary:hover { background: var(--frost); color: var(--snow); }
.btn-ghost { background: transparent; color: var(--ash); }
.btn-ghost:hover { background: var(--frost); color: var(--bone); }
.btn-danger { background: transparent; color: var(--bad); border-color: rgba(224,122,122,0.4); }
.btn-danger:hover { background: rgba(224,122,122,0.1); }
.btn-sm { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.btn-lg { min-height: 48px; padding: 12px 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--r-pill); }
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn .spinner { display: none; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .label { opacity: 0.6; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- chips, badges ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
  border-radius: var(--r-pill); border: 1px solid var(--hair-strong); font-size: 13px; color: var(--ash);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); white-space: nowrap; }
.chip:hover { color: var(--bone); background: var(--frost); }
.chip:active { transform: scale(0.97); }
.chip.is-on { background: var(--snow); color: var(--graphite); border-color: var(--snow); }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em; background: var(--frost); color: var(--ash); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--smoke); flex: none; }
.badge-ok::before { background: var(--ok); }
.badge-wait::before { background: var(--wait); }
.badge-bad::before { background: var(--bad); }
.badge-ok { color: var(--bone); }
.badge-bad { color: var(--bad); }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  border: 1px solid var(--hair); font-size: 12px; color: var(--slate); }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: 13px; color: var(--ash); letter-spacing: 0.02em; }
.help { font-size: 12px; color: var(--slate); }
.error { font-size: 12px; color: var(--bad); display: none; }
.field.is-invalid .error { display: block; }
.field.is-invalid .input { border-color: var(--bad); }
.input, .select, .textarea { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-ui);
  background: var(--graphite); border: 1px solid var(--hair); color: var(--bone); font: inherit; font-size: 15px;
  transition: border-color 160ms ease, background-color 160ms ease; box-sizing: border-box; }
.input::placeholder, .textarea::placeholder { color: var(--slate); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--hair-strong); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--smoke); background: #1a1a1a; }
.select { appearance: none; -webkit-appearance: none; background-color: var(--graphite); color: var(--bone);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23c2c2c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.textarea { min-height: 96px; resize: vertical; }
.input-wrap { position: relative; }
.input-wrap .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--slate); pointer-events: none; }
.input-wrap .input { padding-left: 40px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; }
.check input { appearance: none; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--hair-strong);
  background: var(--graphite); display: grid; place-items: center; margin: 0; flex: none; transition: background-color 160ms ease; }
.check input:checked { background: var(--snow); border-color: var(--snow); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite); transform: translateY(-1px) rotate(-45deg); }
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { appearance: none; position: absolute; inset: 0; margin: 0; border-radius: var(--r-pill);
  background: rgba(229,229,229,0.18); cursor: pointer; transition: background-color 200ms ease; }
.switch input:checked { background: var(--ok); }
.switch span { position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--snow);
  pointer-events: none; transition: transform 220ms var(--ease-out); }
.switch input:checked + span { transform: translateX(20px); }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; gap: 2px;
  background: var(--frost); border-radius: var(--r-pill); width: 100%; }
.seg button { min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--ash);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); white-space: nowrap; }
.seg button:active { transform: scale(0.97); }
.seg button.is-on { background: var(--snow); color: var(--graphite); }
/* The language picker: two options side by side, each written in its own language, sized to its
   labels rather than the row. On the gradient hero the frost fill would vanish, so it darkens. */
.seg.auto { width: auto; }
.hero .seg { background: rgba(0,0,0,0.28); }
.hero .seg button { color: rgba(255,255,255,0.88); }
.hero .seg button.is-on { color: var(--graphite); }
.stepper { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--hair-strong); border-radius: var(--r-pill); padding: 2px; }
.stepper button { width: 36px; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--ash); }
.stepper button:hover { background: var(--frost); color: var(--bone); }
.stepper output { min-width: 28px; text-align: center; font-weight: 500; }
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp input { text-align: center; font-size: 22px; font-weight: 500; padding: 0; height: 56px; }

/* ---------- rows and lists ---------- */
.row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 0; width: 100%; text-align: left;
  border-bottom: 1px solid var(--hair); transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.row:last-child { border-bottom: 0; }
.row.press:active { transform: scale(0.985); }
.row .body { flex: 1; min-width: 0; }
.row .title { font-weight: 500; color: var(--bone); }
.row .sub { font-size: 13px; color: var(--slate); }
.row .right { display: flex; align-items: center; gap: 8px; flex: none; color: var(--slate); }
.row .chev { color: var(--slate); }
.avatar { width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center; flex: none;
  background: var(--frost-strong); color: var(--bone); font-weight: 500; font-size: 14px; letter-spacing: 0.02em; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.tile { width: 48px; height: 48px; border-radius: var(--r-ui); display: grid; place-items: center; flex: none;
  background: var(--frost); color: var(--bone); }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14px; }
.kv dt { color: var(--slate); flex: none; }
.kv dd { color: var(--bone); margin: 0; text-align: right; min-width: 0; }
.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat .value { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; font-variant-numeric: tabular-nums; }
.stat .label { font-size: 13px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  padding: 40px 20px; border: 1px dashed var(--hair-strong); border-radius: var(--r-card); color: var(--ash); }
.empty .tile { width: 48px; height: 48px; }
.empty h3 { color: var(--bone); }
.empty p { font-size: 14px; color: var(--slate); max-width: 320px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-title h2 { font-size: 17px; }
.section-title a, .section-title button { font-size: 13px; color: var(--ash); }
.section { margin-bottom: var(--gap-l); }
.meter { height: 6px; border-radius: var(--r-pill); background: var(--frost); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--bone); border-radius: var(--r-pill);
  transition: width 400ms var(--ease-out); transform-origin: left; }
.bar-chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 8px; height: 160px; }
.bar-chart .bar { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.bar-chart .bar i { display: block; width: 100%; max-width: 40px; background: var(--frost-strong); border-radius: 6px 6px 2px 2px;
  transform-origin: bottom; animation: grow 500ms var(--ease-out) both; }
.bar-chart .bar b { font-size: 11px; color: var(--slate); font-weight: 400; white-space: nowrap; }
@keyframes grow { from { transform: scaleY(0); } }

/* ---------- cards, carousels, timelines, chat composer, stars ---------- */
.hscroll { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 6px; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { flex: 0 0 220px; scroll-snap-align: start; }
.ocard { display: flex; flex-direction: column; gap: 10px; text-align: left; background: var(--graphite); border: 1px solid var(--hair);
  border-radius: 16px; padding: 14px; min-width: 0; transition: transform 160ms var(--ease-out), border-color 160ms ease; }
.ocard:hover { border-color: var(--hair-strong); }
.ocard:active { transform: scale(0.97); }
.ocard .art { height: 96px; border-radius: 10px; background: var(--frost); display: grid; place-items: center; color: var(--ash); }
.ocard .name { font-weight: 500; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocard .meta { font-size: 13px; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocard .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--ash); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 1px; background: var(--hair-strong); }
.timeline .stop { position: relative; padding: 10px 0 18px; }
.timeline .stop::before { content: ""; position: absolute; left: -24px; top: 16px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--canvas); border: 2px solid var(--smoke); }
.timeline .stop.ok::before { border-color: var(--ok); background: var(--ok); }
.timeline .stop.wait::before { border-color: var(--wait); }
.timeline .stop.bad::before { border-color: var(--bad); }
.chat { display: flex; flex-direction: column; gap: 8px; }
.composer { position: absolute; left: 16px; right: 16px; bottom: 112px; z-index: 48; display: flex; align-items: flex-end; gap: 6px; padding: 6px;
  background: rgba(22,22,22,0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--hair); border-radius: 28px; }
.composer .textarea { min-height: 40px; max-height: 120px; border: 0; background: transparent; padding: 9px 12px; resize: none; line-height: 1.4; }
.composer .textarea:focus { background: transparent; }
.stars { display: inline-flex; gap: 2px; }
.stars button { width: 44px; height: 44px; display: grid; place-items: center; color: var(--slate); border-radius: var(--r-pill);
  transition: color 120ms ease, transform 160ms var(--ease-out); }
.stars button.is-on { color: var(--bone); }
.stars button.is-on .ic { fill: currentColor; }
.stars button:active { transform: scale(0.9); }
.slot { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; padding: 8px 4px; border-radius: var(--r-ui);
  border: 1px solid var(--hair); background: var(--graphite); font-size: 13px; color: var(--ash); min-width: 0;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.slot small { font-size: 11px; color: var(--slate); }
.slot:active { transform: scale(0.97); }
.slot.is-on { background: var(--snow); color: var(--graphite); border-color: var(--snow); }
.slot.is-on small { color: var(--slate); }
.slot.is-off { opacity: 0.45; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--graphite); overscroll-behavior-x: contain; }
table.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 640px; }
.table th { position: sticky; top: 0; z-index: 1; background: var(--graphite); text-align: left; font-weight: 500; color: var(--slate);
  font-size: 12px; letter-spacing: 0.04em; padding: 12px 16px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.table th button { display: inline-flex; align-items: center; gap: 4px; color: inherit; font: inherit; letter-spacing: inherit; }
.table th button:hover { color: var(--bone); }
.table th.sorted button { color: var(--bone); }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--hair); color: var(--ash); vertical-align: middle; max-width: 280px; }
.table td.primary { color: var(--bone); font-weight: 500; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background-color 120ms ease; }
.table tbody tr.link { cursor: pointer; }
.table tbody tr.link:hover { background: var(--frost); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td .truncate { display: block; max-width: 260px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.toolbar .input-wrap { flex: 1 1 220px; min-width: 180px; }
.toolbar .select { width: auto; min-width: 150px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 13px; color: var(--slate);
  border-top: 1px solid var(--hair); }
.cards-md { display: none; }
@media (max-width: 767px) {
  .table-wrap.responsive { display: none; }
  .cards-md { display: grid; gap: 10px; }
  .cards-md .mcard { display: block; width: 100%; text-align: left; background: var(--graphite); border: 1px solid var(--hair);
    border-radius: 16px; padding: 14px 16px; min-height: 44px; }
  .cards-md .mcard .top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
  .cards-md .mcard .meta { font-size: 13px; color: var(--slate); margin-top: 4px; }
}

/* ---------- web shell ---------- */
.web-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 16px auto 16px 16px; width: 248px; z-index: 40; display: flex; flex-direction: column;
  background: rgba(22,22,22,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hair); border-radius: var(--r-card); padding: 20px 14px; box-shadow: rgba(255,255,255,0.02) 0px 3px 4.5px, rgba(0,0,0,0.04) 0px 10px 8px, rgba(0,0,0,0.1) 0px 4px 3px;
  transform: translateX(-120%); transition: transform 260ms var(--ease-drawer); overscroll-behavior: contain; overflow-y: auto; }
.sidebar.is-open { transform: translateX(0); }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
.brand .mark { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--snow); color: var(--graphite); display: grid; place-items: center; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: var(--r-pill);
  color: var(--ash); font-size: 14px; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.sidebar nav a:hover { background: var(--frost); color: var(--bone); }
.sidebar nav a:active { transform: scale(0.97); }
.sidebar nav a.is-active { background: var(--snow); color: var(--graphite); }
.sidebar .foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.sidebar .role { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: var(--frost); }
.sidebar .role .label { font-size: 12px; }
.backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none;
  transition: opacity 200ms ease; }
.backdrop.is-open { opacity: 1; pointer-events: auto; }
.web-main { flex: 1; min-width: 0; padding: 16px; }
.topbar { position: sticky; top: 16px; z-index: 30; display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 8px 10px 8px 14px; margin-bottom: 24px; background: rgba(22,22,22,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hair); border-radius: var(--r-nav, 19px); }
.topbar h1 { font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .search { display: none; flex: 0 1 280px; }
.topbar .search .input { min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.topbar .who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ash); }
.topbar .who span { display: none; }
.page { max-width: 1200px; margin: 0 auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.page-head p { color: var(--slate); font-size: 14px; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--slate); margin-bottom: 12px; }
.crumbs a:hover { color: var(--bone); }
.grid-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* minmax(0, …) rather than a bare 1fr: a bare 1fr never shrinks below its content, so a row with
   two buttons and a long title pushed the vendor dashboard sideways on a phone. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .topbar .search { display: block; }
  .topbar .who span { display: inline; }
  .grid-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .sidebar { transform: none; }
  .web-main { padding-left: 296px; padding-right: 24px; }
  .menu-btn { display: none; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- dialogs ---------- */
.dialog { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 16px; }
.dialog.is-open { display: flex; }
.dialog .scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.65); animation: fade 200ms ease-out both; }
.dialog .box { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; background: var(--graphite);
  border: 1px solid var(--hair); border-radius: var(--r-card); padding: 24px; animation: pop 220ms var(--ease-out) both; overscroll-behavior: contain; }
.dialog .box.wide { max-width: 640px; }
.dialog .close { position: absolute; right: 12px; top: 12px; }
.dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(6px); } }

/* ---------- toast ---------- */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--snow); color: var(--graphite);
  font-size: 14px; font-weight: 500; box-shadow: rgba(0,0,0,0.3) 0 8px 24px; opacity: 0; transform: translateY(12px);
  transition: opacity 220ms ease, transform 260ms var(--ease-out); }
.toast.is-in { opacity: 1; transform: translateY(0); }

/* ---------- iOS shell ---------- */
.ios body, body.ios { width: 390px; height: 844px; overflow: hidden; position: relative; margin: 0 auto; background: var(--canvas); }
@media (min-width: 600px) {
  html.ios { background: #050505; display: grid; place-items: center; min-height: 100vh; }
  body.ios { border-radius: 48px; border: 1px solid var(--hair-strong); box-shadow: 0 0 0 10px #111, 0 30px 80px rgba(0,0,0,0.6); margin: 24px auto; }
}
.statusbar { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 50; display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 28px 8px; font-size: 15px; font-weight: 600; color: var(--bone); pointer-events: none; }
.statusbar .sig { display: flex; align-items: center; gap: 5px; }
.statusbar .bat { width: 25px; height: 12px; border: 1px solid rgba(237,237,237,0.6); border-radius: 4px; padding: 1.5px; }
.statusbar .bat i { display: block; height: 100%; width: 80%; background: var(--bone); border-radius: 2px; }
.navbar { position: absolute; top: 54px; left: 0; right: 0; height: 48px; z-index: 45; display: flex; align-items: center; padding: 0 12px;
  background: rgba(10,10,10,0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); border-bottom: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease; }
.navbar.is-scrolled { background: rgba(10,10,10,0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--hair); }
.navbar .nav-title { position: absolute; left: 72px; right: 72px; text-align: center; font-size: 16px; font-weight: 500; opacity: 0;
  transform: translateY(4px); transition: opacity 200ms ease, transform 200ms var(--ease-out); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar.is-scrolled .nav-title, .navbar.always .nav-title { opacity: 1; transform: none; }
.navbar .left, .navbar .rightside { display: flex; align-items: center; gap: 4px; z-index: 1; }
.navbar .rightside { margin-left: auto; }
.navbar .back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px 0 4px; color: var(--bone); font-size: 16px; border-radius: var(--r-pill); }
.navbar .back:active { opacity: 0.6; }
.scroll { position: absolute; top: 102px; left: 0; right: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 8px 20px 120px; }
.scroll.no-tabs { padding-bottom: 48px; }
.scroll.flush { top: 54px; }
.large-title { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 4px 0 18px; }
.large-title small { display: block; font-size: 14px; letter-spacing: 0.01em; font-weight: 400; color: var(--slate); margin-top: 4px; }
.tabbar { position: absolute; left: 16px; right: 16px; bottom: 34px; height: 64px; z-index: 50; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: center; background: rgba(22,22,22,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--hair);
  border-radius: var(--r-pill); padding: 0 6px; }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 56px; border-radius: var(--r-pill);
  color: var(--slate); font-size: 10px; font-weight: 500; letter-spacing: 0.02em; transition: color 160ms ease, transform 160ms var(--ease-out); }
.tabbar a:active { transform: scale(0.94); }
.tabbar a.is-active { color: var(--snow); }
.tabbar a .ic { width: 22px; height: 22px; }
.home-ind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; border-radius: 3px; background: var(--bone); transform: translateX(-50%); opacity: 0.9; z-index: 50; }
.group { background: var(--graphite); border: 1px solid var(--hair); border-radius: 16px; padding: 0 16px; }
.group .row { min-height: 52px; padding: 8px 0; }
.group-cap { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin: 0 0 8px 16px; }
.ios-cta { position: absolute; left: 20px; right: 20px; bottom: 44px; z-index: 48; }
.ios-cta.with-tabs { bottom: 112px; }
.sheet-host { position: absolute; inset: 0; z-index: 70; display: none; }
.sheet-host.is-open { display: block; }
.sheet-host .scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 220ms ease; }
.sheet-host.is-in .scrim { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; overflow: auto; background: var(--graphite); border: 1px solid var(--hair);
  border-bottom: 0; border-radius: 28px 28px 0 0; padding: 10px 20px 44px; transform: translateY(100%); transition: transform 320ms var(--ease-drawer); overscroll-behavior: contain; }
.sheet-host.is-in .sheet { transform: translateY(0); }
.sheet-host.is-out .sheet { transition: transform 200ms ease-out; transform: translateY(100%); }
.sheet .grab { width: 36px; height: 5px; border-radius: 3px; background: rgba(229,229,229,0.3); margin: 0 auto 16px; }
.sheet h2 { margin-bottom: 4px; }
.sheet .actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }

/* chat */
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; word-wrap: break-word; }
.bubble.me { align-self: flex-end; background: var(--snow); color: var(--graphite); border-bottom-right-radius: 6px; }
.bubble.ai { align-self: flex-start; background: var(--frost); color: var(--bone); border-bottom-left-radius: 6px; }
.bubble .time { display: block; font-size: 11px; opacity: 0.55; margin-top: 4px; }
.typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ash); animation: blink 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 150ms; } .typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.wave { display: flex; align-items: center; gap: 3px; height: 28px; }
.wave i { width: 3px; border-radius: 2px; background: var(--bone); height: 30%; animation: wave 900ms ease-in-out infinite; }
.wave i:nth-child(2n) { animation-delay: 120ms; } .wave i:nth-child(3n) { animation-delay: 240ms; } .wave i:nth-child(5n) { animation-delay: 360ms; }
@keyframes wave { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* swipe to confirm */
.swipe { position: relative; height: 60px; border-radius: var(--r-pill); background: var(--frost); border: 1px solid var(--hair); overflow: hidden; user-select: none; }
.swipe .track { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--ash); padding-left: 56px; transition: opacity 160ms ease; }
.swipe .knob { position: absolute; top: 4px; left: 4px; width: 50px; height: 50px; border-radius: 50%; background: var(--snow); color: var(--graphite); display: grid; place-items: center;
  touch-action: none; cursor: grab; transition: transform 240ms var(--ease-out); }
.swipe.is-dragging .knob { transition: none; cursor: grabbing; }
.swipe.is-done { background: var(--snow); }
.swipe.is-done .track { color: var(--graphite); padding-left: 0; }
.swipe.is-done .knob { opacity: 0; }

/* qr */
.qr { display: grid; grid-template-columns: repeat(21, 1fr); gap: 1px; width: 168px; height: 168px; padding: 10px; background: var(--snow); border-radius: 12px; }
.qr i { background: var(--graphite); border-radius: 1px; }
.qr i.off { background: transparent; }

/* skeleton */
.skeleton { position: relative; overflow: hidden; background: var(--frost); border-radius: var(--r-ui); min-height: 14px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* concierge replies: option cards, the diff after an edit, the "why" trace */
.options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; }
.option { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--graphite); border: 1px solid var(--hair); border-radius: 16px; }
.option .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.option .head .num { flex: none; }
.option .line { font-size: 13px; color: var(--slate); }
.option .why { font-size: 13px; color: var(--ash); }
.option .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.option.over { border-color: rgba(255,128,128,0.35); }
.diff { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 13px; }
.diff .d { display: flex; gap: 10px; align-items: flex-start; }
.diff .d b { flex: none; width: 14px; font-weight: 600; }
.diff .d.minus { color: var(--slate); text-decoration: line-through; }
.diff .d.plus { color: var(--bone); }
.diff .d.same { color: var(--ash); }
.trace { font-size: 12px; color: var(--slate); margin-top: 6px; }
.trace summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; }
.trace summary::-webkit-details-marker { display: none; }
.trace summary::after { content: "›"; display: inline-block; transition: transform 160ms var(--ease-out); }
.trace[open] summary::after { transform: rotate(90deg); }
.trace ul { margin: 4px 0 0; padding-left: 14px; display: flex; flex-direction: column; gap: 2px; }
.trace li { list-style: disc; }
.hold { font-size: 13px; color: var(--ash); font-variant-numeric: tabular-nums; }
.hold.is-low { color: var(--wait); }
.sheet-rows { display: flex; flex-direction: column; }
.sheet-rows .r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.sheet-rows .r:last-child { border-bottom: 0; }
.sheet-rows .r .note { grid-column: 1 / -1; font-size: 12px; color: var(--slate); margin-top: -4px; }
.sheet-rows .r .env { color: var(--slate); }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes push { from { opacity: 0; transform: translateX(40px); } }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } }
.screen { animation: rise 240ms var(--ease-drawer) both; }
.screen-push { animation: push 260ms var(--ease-drawer) both; }
.stagger > * { animation: rise 240ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
.enter { animation: slide-in 260ms var(--ease-out) both; }
.leave { transition: opacity 200ms ease, transform 200ms ease-out, max-height 240ms ease-out, margin 240ms ease-out, padding 240ms ease-out; opacity: 0 !important; transform: scale(0.97); overflow: hidden; }
.press:active { transform: scale(0.97); }
.pressable { transition: transform 160ms var(--ease-out); }
.pressable:active { transform: scale(0.97); }
.tick { display: inline-block; animation: tick 320ms var(--ease-out); }
@keyframes tick { from { transform: translateY(6px); opacity: 0; } }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }
.success-ring { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--snow); color: var(--graphite); animation: pop 320ms var(--ease-out) both; }

@media (hover: none) { .btn:hover, .chip:hover, .row:hover { background-color: inherit; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- right-to-left, when the language switch is on Hebrew ----------
   The layout rules above are written for English. Rather than rewrite them as logical
   properties, which would touch every line, this block mirrors only the ones that take
   a side. assets/i18n.js sets dir="rtl" on <html> before first paint. */
[dir=rtl] .skip { left: auto; right: -999px; }
[dir=rtl] .skip:focus { right: 8px; }
[dir=rtl] .spinner { border-right-color: currentColor; border-left-color: transparent; }
[dir=rtl] .select { background-position: left 12px center; padding-right: 14px; padding-left: 36px; }
[dir=rtl] .input-wrap .ic { left: auto; right: 12px; }
[dir=rtl] .input-wrap .input { padding-left: 14px; padding-right: 40px; }
[dir=rtl] .switch span { left: auto; right: 2px; }
[dir=rtl] .switch input:checked + span { transform: translateX(-20px); }
[dir=rtl] .row, [dir=rtl] .ocard, [dir=rtl] .cards-md .mcard { text-align: right; }
[dir=rtl] .kv dd { text-align: left; }
[dir=rtl] .meter > span { transform-origin: right; }
[dir=rtl] .timeline { padding-left: 0; padding-right: 28px; }
[dir=rtl] .timeline::before { left: auto; right: 9px; }
[dir=rtl] .timeline .stop::before { left: auto; right: -24px; }
[dir=rtl] .table th { text-align: right; }
[dir=rtl] .table td.num, [dir=rtl] .table th.num { text-align: left; }
[dir=rtl] .sidebar { inset: 16px 16px 16px auto; transform: translateX(120%); }
[dir=rtl] .sidebar.is-open { transform: translateX(0); }
@media (min-width: 1024px) {
  /* The mirrored drawer rule above outranks the desktop "transform: none", which left Hebrew
     desktop pages with the sidebar parked off the right edge and an empty 296px gutter. */
  [dir=rtl] .sidebar { transform: none; }
  [dir=rtl] .web-main { padding-left: 24px; padding-right: 296px; }
}
[dir=rtl] .dialog .close { right: auto; left: 12px; }
[dir=rtl] .navbar .rightside { margin-left: 0; margin-right: auto; }
[dir=rtl] .navbar .back { padding: 0 4px 0 8px; }
[dir=rtl] .navbar .back .ic, [dir=rtl] .row .chev, [dir=rtl] .trace summary::after { transform: scaleX(-1); }
[dir=rtl] .trace[open] summary::after { transform: scaleX(-1) rotate(-90deg); }
[dir=rtl] .trace ul { padding-left: 0; padding-right: 14px; }
[dir=rtl] .group-cap { margin: 0 16px 8px 0; letter-spacing: 0; text-transform: none; }
[dir=rtl] .bubble.me { border-bottom-right-radius: 18px; border-bottom-left-radius: 6px; }
[dir=rtl] .bubble.ai { border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
[dir=rtl] .swipe { direction: ltr; }
[dir=rtl] .skeleton::after { transform: translateX(100%); animation-name: shimmer-rtl; }
@keyframes shimmer-rtl { to { transform: translateX(-100%); } }
[dir=rtl] .screen-push { animation-name: push-rtl; }
@keyframes push-rtl { from { opacity: 0; transform: translateX(-40px); } }
[dir=rtl] .hscroll { scroll-padding-right: 20px; }
[dir=rtl] .otp, [dir=rtl] .tabular, [dir=rtl] .code, [dir=rtl] .mono, [dir=rtl] .hold { direction: ltr; unicode-bidi: isolate; }
/* Tailwind's physical utilities used in the screens, mirrored. */
[dir=rtl] .ml-auto { margin-left: 0; margin-right: auto; }
[dir=rtl] .mr-auto { margin-right: 0; margin-left: auto; }
[dir=rtl] .ml-4 { margin-left: 0; margin-right: 1rem; }
[dir=rtl] .pr-8 { padding-right: 0; padding-left: 2rem; }
[dir=rtl] .text-left { text-align: right; }
[dir=rtl] .text-right { text-align: left; }
/* Hebrew has no uppercase; letter-spacing meant for Latin caps reads as gaps. */
[dir=rtl] .label, [dir=rtl] .badge, [dir=rtl] .uppercase { letter-spacing: 0; }