/* מחולל הווידאו: the personality of this system on top of the kit (base.css + parts.css): an evening premiere.
 * Dark by default (an explicit light choice gets a refined "silver screen"), black / charcoal / silver with a deep crimson
 * red-carpet accent, a whisper of film grain and spotlights, film / clapper / lens motifs used sparingly, and Bellefair for
 * the big Hebrew titles. The studio's structure stays (the deep header panel, rounded cards, Rubik for the interface).
 * Page layouts are in pages.css. */

/* ---------------------------------------------------------------- tokens: dark (the default) */
:root:not([data-theme="light"]) {
  --bg: #08080a; --surface: #131316; --surface-2: #1c1c21; --surface-3: #26262c; --ink: #f2efea; --muted: #a29e97; --line: #2a2a30;
  --accent: #ff5a66; --accent-soft: rgba(224, 24, 42, .15); --mint: #efe5d6; --sky: #c9c9d1;
  --grad: linear-gradient(135deg, #e0182a 0%, #b3121e 52%, #780a13 100%);
  --grad-brand: linear-gradient(90deg, #7d0b14 0%, #e0182a 62%, #ff8f97 100%);
  --grad-deep: linear-gradient(165deg, #1f1f24 0%, #0f0f12 55%, #040405 100%);
  --glow-1: #2a0a0e; --glow-2: #131317; --glow-3: #1d0a0d;
  --shadow: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 20px 44px -24px rgba(0, 0, 0, .95);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 64px -26px rgba(0, 0, 0, 1);
  --good: #63d69f; --good-soft: #0f2a1d; --bad: #ff8d84; --bad-soft: #36120f; --warn: #f0c35c; --warn-soft: #33280f;
  --r-admin: #efe5d6; --r-partner: #ff8f97; --r-employee: #c9c9d1; --r-client: #a29e97;
  --carpet: #b3121e; --carpet-2: #e0182a; --silver: #c9c5be; --edge: rgba(255, 255, 255, .06);
  color-scheme: dark;
}
/* ---------------------------------------------------------------- tokens: light ("silver screen") */
:root[data-theme="light"] {
  --bg: #ebe9e5; --surface: #ffffff; --surface-2: #f3f2ee; --surface-3: #e6e3dd; --ink: #141417; --muted: #6b6862; --line: #dcd8d1;
  --accent: #b3121e; --accent-soft: #f6e1e2; --mint: #efe5d6; --sky: #4b4b55;
  --grad: linear-gradient(135deg, #e0182a 0%, #b3121e 52%, #780a13 100%);
  --grad-brand: linear-gradient(90deg, #7d0b14 0%, #e0182a 62%, #ff8f97 100%);
  --grad-deep: linear-gradient(165deg, #232328 0%, #121215 55%, #060607 100%);
  --glow-1: #f6f4f0; --glow-2: #e4e1db; --glow-3: #f1e6e5;
  --shadow: 0 1px 2px rgba(20, 20, 24, .05), 0 16px 36px -20px rgba(20, 20, 24, .28);
  --shadow-lift: 0 2px 4px rgba(20, 20, 24, .06), 0 28px 56px -24px rgba(20, 20, 24, .42);
  --good: #13744f; --good-soft: #def2e8; --bad: #b3121e; --bad-soft: #f8e3e3; --warn: #85580a; --warn-soft: #f8eed6;
  --r-admin: #141417; --r-partner: #b3121e; --r-employee: #4b4b55; --r-client: #6b6862;
  --carpet: #b3121e; --carpet-2: #e0182a; --silver: #7a766f; --edge: rgba(20, 20, 24, .07);
  color-scheme: light;
}
:root { --display: 'Bellefair', 'Frank Ruhl Libre', 'Times New Roman', serif; }

/* ---------------------------------------------------------------- the room: a projector's light, a red haze, film grain */
body {
  background:
    radial-gradient(1100px 640px at 50% -14%, rgba(255, 255, 255, .06) 0%, transparent 62%),
    radial-gradient(900px 620px at 100% -4%, var(--glow-1) 0%, transparent 62%),
    radial-gradient(820px 560px at -4% 104%, var(--glow-3) 0%, transparent 60%), var(--bg);
  background-attachment: fixed;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(1100px 640px at 50% -14%, #ffffff 0%, transparent 62%),
    radial-gradient(900px 620px at 100% 0%, var(--glow-3) 0%, transparent 62%), var(--bg);
  background-attachment: fixed;
}
body::after {
  content: ""; position: fixed; inset: -60px; z-index: 95; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(5) infinite;
}
:root[data-theme="light"] body::after { opacity: .035; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-14px, 8px); } 40% { transform: translate(10px, -12px); } 60% { transform: translate(-6px, -4px); } 80% { transform: translate(12px, 10px); } }

.display { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.page-head h1.display { font-size: clamp(36px, 5vw, 54px); line-height: 1.04; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--muted); }

.boot-orb { background: radial-gradient(circle at 50% 45%, #fff 0%, #ffd9dc 18%, #e0182a 46%, rgba(179, 18, 30, 0) 72%); }

/* ---------------------------------------------------------------- the header: a dark velvet panel with film perforations */
.deep {
  --ink: #f5f2ed; --muted: #aaa69f; --surface: #1d1d22; --surface-2: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .1);
  --accent: var(--mint); --accent-soft: rgba(239, 229, 214, .12); --good: #8de8b8; --bad: #ff9aa2;
  background:
    radial-gradient(120% 150% at 50% -55%, rgba(255, 255, 255, .11) 0%, transparent 46%),
    radial-gradient(70% 120% at 104% 125%, rgba(179, 18, 30, .42) 0%, transparent 58%), var(--grad-deep);
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.deep::before, .deep::after {
  content: ""; position: absolute; z-index: -1; inset-inline: 26px; width: auto; height: 7px; border-radius: 0; opacity: 1; left: 26px; right: 26px;
  background: radial-gradient(ellipse 5px 2.6px at center, rgba(255, 255, 255, .13) 96%, transparent 100%) 0 0 / 22px 7px repeat-x;
}
.deep::after { top: 7px; bottom: auto; }
.deep::before { bottom: 7px; top: auto; }
header.top { padding-block: 22px; }
.tab { background: rgba(255, 255, 255, .07); color: #d9d5ce; }
.tab:hover { background: rgba(255, 255, 255, .13); }
.tab[aria-current="page"] { background: var(--grad); color: #fff; box-shadow: 0 10px 22px -10px rgba(224, 24, 42, .9); }
.tab-badge { margin-inline-start: 2px; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 99px; background: #fff; color: #b3121e; font-size: 11px;
  font-weight: 800; display: inline-grid; place-items: center; }
.brand-mark { background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 26px -6px rgba(224, 24, 42, .55); }
.brand-mark svg { width: 24px; height: 24px; margin: 0; }
.brand-text b { font-family: var(--display); font-weight: 400; font-size: 25px; letter-spacing: .01em; }
.me-btn .avatar { background: linear-gradient(135deg, #f5efe6, #c9c2b6); color: #17171a; }
.bell-link .n { background: #e0182a; }

/* ---------------------------------------------------------------- cards, buttons, fields */
.card { box-shadow: var(--shadow); border: 1px solid var(--edge); }
.btn.primary { box-shadow: 0 12px 26px -12px rgba(224, 24, 42, .85); }
.btn.mint { background: var(--mint); color: #17171a; }
.btn.mint:hover { background: #f8f1e7; }
.btn.silver { background: linear-gradient(180deg, #f6f4f0, #cfcac2); color: #141417; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7); }
.seg button[aria-pressed="true"] { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); }
.seg button svg { width: 15px; height: 15px; flex: none; }
.seg button[disabled] { opacity: .5; cursor: not-allowed; }
.empty svg, .note svg { width: 18px; height: 18px; }
.chip.accent { background: var(--accent-soft); color: var(--accent); }
.toast { background: #151518; border: 1px solid rgba(255, 255, 255, .08); }
.toast svg { color: #ff8f97; }
.drop { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: color-mix(in srgb, var(--accent) 3%, transparent); }
.drop svg { color: var(--accent); }
:focus-visible { outline-color: var(--accent); }

/* ---------------------------------------------------------------- motifs (used sparingly) */
/* the clapperboard's stripes */
.m-clapper .way-motif { position: absolute; inset-inline: 0; top: 0; height: 9px; background: repeating-linear-gradient(-45deg, #f2efea 0 11px, #121215 11px 22px); opacity: .92; }
/* a film strip along the side */
.m-strip .way-motif { position: absolute; inset-block: 0; inset-inline-end: 0; width: 24px; background:
  radial-gradient(ellipse 4px 6px at center, rgba(255, 255, 255, .16) 96%, transparent 100%) 50% 0 / 24px 22px repeat-y, #0b0b0d; }
:root[data-theme="light"] .m-strip .way-motif { background: radial-gradient(ellipse 4px 6px at center, rgba(255, 255, 255, .9) 96%, transparent 100%) 50% 0 / 24px 22px repeat-y, #1b1b1f; }
/* a lens: its rings and a red glint */
.m-lens .way-motif { position: absolute; width: 260px; height: 260px; inset-inline-end: -90px; bottom: -110px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 42% 40%, rgba(224, 24, 42, .32) 0 6%, transparent 7%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, .07) 0 1px, transparent 1px 15px), radial-gradient(circle, #1b1b20 0%, #0b0b0d 70%); }
:root[data-theme="light"] .m-lens .way-motif { background: radial-gradient(circle at 42% 40%, rgba(224, 24, 42, .3) 0 6%, transparent 7%),
  repeating-radial-gradient(circle, rgba(20, 20, 24, .08) 0 1px, transparent 1px 15px), radial-gradient(circle, #f3f2ee 0%, #e6e3dd 70%); }

/* ---------------------------------------------------------------- the hero: a premiere (spotlights, a red carpet) */
.hero { padding: 38px 32px 28px; display: grid; gap: 22px; min-height: 250px; }
.hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; position: relative; }
.hero-text { max-width: 640px; }
.hero h1.display { margin: 8px 0 10px; font-size: clamp(40px, 6.2vw, 72px); line-height: 1.0; }
.hero-biz { background: linear-gradient(180deg, #ffffff 25%, #cfc8bd 70%, #a59d91); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { margin: 0; color: var(--muted); font-size: 16px; max-width: 560px; }
.hero-carpet { position: absolute; z-index: -1; bottom: 0; left: 50%; width: min(560px, 70%); height: 78%; transform: translateX(-50%);
  clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(179, 18, 30, 0) 0%, rgba(179, 18, 30, .28) 38%, rgba(150, 12, 22, .78) 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 55%); mask: linear-gradient(180deg, transparent 0%, #000 55%); opacity: .9; }
.hero-lights { position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: conic-gradient(from 160deg at 8% -18%, transparent 0deg, rgba(255, 255, 255, .07) 10deg, transparent 24deg),
    conic-gradient(from 176deg at 92% -18%, transparent 0deg, rgba(255, 255, 255, .07) 10deg, transparent 24deg); }
.hero-biz-card { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border-radius: 20px; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); backdrop-filter: blur(8px); }
.hero-biz-card b { display: block; font-size: 16px; }
.hero-biz-card small { color: var(--muted); font-size: 12.5px; }

/* ---------------------------------------------------------------- a business's mark */
.biz-mark { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); overflow: hidden; }
.biz-mark.sm { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
.biz-mark.lg { width: 54px; height: 54px; border-radius: 17px; font-size: 18px; }
.biz-mark.has-logo { background: #fff; padding: 4px; }
.biz-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.biz-pick { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.biz-chip { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 5px 14px 5px 6px; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: var(--ink); font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.biz-chip:hover { background: rgba(255, 255, 255, .12); }
.biz-chip[aria-checked="true"] { background: rgba(239, 229, 214, .16); box-shadow: inset 0 0 0 1.5px var(--mint); }

@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }