/* מחולל הגרפיקות: the personality of this system on top of the kit (base.css + parts.css), the studio's structure kept
 * (the deep header panel, white rounded cards, Rubik). Amir: "colorful, a rainbow, a paint brush, but in the style of
 * מקדמים סטודיו: mature, elegant and advanced". So: a deep ink-violet header with a luminous rainbow brush stroke,
 * very soft multicolor paint washes behind the page, jewel-tone primary buttons with an aurora glow, plum-black at night. */
:root {
  --bg: #f8f5fb; --surface: #ffffff; --surface-2: #f4f0fa; --surface-3: #ebe4f5; --ink: #1c1530; --muted: #6c6485; --line: #e8e1f2;
  --accent: #6a46e0; --accent-soft: #efe9fd; --mint: #e7defe;
  --rainbow: linear-gradient(120deg, #ff6b8b 0%, #ffa45c 20%, #f5d061 38%, #5fd6a4 58%, #55a8ff 78%, #8b7bff 100%);
  --grad: linear-gradient(112deg, #d63d78 0%, #8f45e6 50%, #4b5fe6 100%);
  --grad-brand: var(--rainbow);
  --grad-deep: linear-gradient(150deg, #2d1e5e 0%, #1c1241 52%, #0f0a26 100%);
  --iris: linear-gradient(115deg, #ffd7e2 0%, #ffe7cf 26%, #e4f7da 52%, #d8ebff 76%, #e7defe 100%);
  --glow-1: #ffe2ea; --glow-2: #e6e3ff; --glow-3: #ddf5ea; --glow-4: #ffeedd; --glow-5: #dff0ff;
  --shadow: 0 1px 2px rgba(40, 20, 80, .05), 0 14px 34px -16px rgba(70, 40, 140, .26);
  --shadow-lift: 0 2px 4px rgba(40, 20, 80, .06), 0 26px 50px -20px rgba(70, 40, 140, .42);
  --r-admin: #2d1e5e; --r-partner: #8f45e6; --r-employee: #4b5fe6; --r-client: #7a7290;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f0a18; --surface: #19122a; --surface-2: #221937; --surface-3: #2b2044; --ink: #f3eefc; --muted: #a89ec2; --line: #30264a;
  --accent: #b8a5ff; --accent-soft: #2a2049; --mint: #3a2d63;
  --grad-deep: linear-gradient(150deg, #261850 0%, #170f33 55%, #0b0717 100%);
  --glow-1: #2a0f2e; --glow-2: #16163a; --glow-3: #0d2622; --glow-4: #2a1a0e; --glow-5: #0d1e33;
  --shadow: 0 14px 34px -18px rgba(0, 0, 0, .7); --shadow-lift: 0 26px 50px -20px rgba(0, 0, 0, .8);
  --r-admin: #e7defe; --r-partner: #c9a6ff; --r-employee: #94a6ff; --r-client: #aaa2c0;
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0f0a18; --surface: #19122a; --surface-2: #221937; --surface-3: #2b2044; --ink: #f3eefc; --muted: #a89ec2; --line: #30264a;
  --accent: #b8a5ff; --accent-soft: #2a2049; --mint: #3a2d63;
  --grad-deep: linear-gradient(150deg, #261850 0%, #170f33 55%, #0b0717 100%);
  --glow-1: #2a0f2e; --glow-2: #16163a; --glow-3: #0d2622; --glow-4: #2a1a0e; --glow-5: #0d1e33;
  --shadow: 0 14px 34px -18px rgba(0, 0, 0, .7); --shadow-lift: 0 26px 50px -20px rgba(0, 0, 0, .8);
  --r-admin: #e7defe; --r-partner: #c9a6ff; --r-employee: #94a6ff; --r-client: #aaa2c0;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- the page: soft washes of paint */
body {
  background:
    radial-gradient(820px 520px at 104% -6%, var(--glow-1) 0%, transparent 62%),
    radial-gradient(720px 460px at -8% 22%, var(--glow-2) 0%, transparent 60%),
    radial-gradient(640px 420px at 70% 46%, var(--glow-4) 0%, transparent 62%),
    radial-gradient(760px 480px at 10% 92%, var(--glow-3) 0%, transparent 60%),
    radial-gradient(620px 420px at 96% 104%, var(--glow-5) 0%, transparent 60%), var(--bg);
  background-attachment: fixed;
}
.boot-orb { background: conic-gradient(from 200deg, #ff6b8b, #ffa45c, #f5d061, #5fd6a4, #55a8ff, #8b7bff, #ff6b8b); filter: saturate(.9); }

/* ---------------------------------------------------------------- the deep panel: ink-violet with a rainbow brush stroke */
.deep {
  --muted: #c9bfe8; --surface: #2a1d55; --surface-2: rgba(255, 255, 255, .1); --line: rgba(255, 255, 255, .14);
  --accent: #ffd2a6; --accent-soft: rgba(255, 210, 166, .16); --good: #8ff0c4; --mint: #e7defe;
  background:
    radial-gradient(circle at 10% -40%, rgba(139, 123, 255, .55) 0%, transparent 52%),
    radial-gradient(circle at 96% 135%, rgba(255, 107, 139, .3) 0%, transparent 44%), var(--grad-deep);
  box-shadow: 0 24px 48px -26px rgba(30, 10, 70, .75);
}
.deep::after {
  width: 620px; height: 140px; left: 16%; top: -52px; border-radius: 0; opacity: .5;
  background: url(/brand/stroke.svg) center / 100% 100% no-repeat; filter: blur(16px); transform: rotate(-5deg);
}
.deep::before {
  width: 300px; height: 60px; left: -40px; bottom: -14px; border-radius: 0; opacity: .78;
  background: url(/brand/stroke.svg) center / 100% 100% no-repeat; filter: blur(1.5px); transform: rotate(4deg);
}
.tab { background: rgba(255, 255, 255, .08); color: #ddd4f6; }
.tab:hover { background: rgba(255, 255, 255, .16); }
.tab[aria-current="page"] { background: var(--iris); color: #1c1530; box-shadow: 0 6px 18px -8px rgba(255, 180, 210, .6); }
.tab-badge { margin-inline-start: 2px; min-width: 19px; height: 19px; border-radius: 99px; background: #ff6f8f; color: #fff; font-size: 11px; font-weight: 800;
  display: inline-grid; place-items: center; padding: 0 5px; }
.brand-mark { background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04)); }

/* ---------------------------------------------------------------- buttons and accents */
.btn.primary { background: var(--grad); color: #fff;
  box-shadow: -6px 10px 22px -12px rgba(214, 61, 120, .75), 6px 10px 22px -12px rgba(75, 95, 230, .75), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn.mint { background: var(--iris); color: #1c1530; }
.btn.mint:hover { filter: brightness(1.04); background: var(--iris); }
.switch[aria-checked="true"] { background: var(--grad); }
.chip.iris { background: var(--iris); color: #1c1530; }
.prog > span { background: var(--rainbow); }
:focus-visible { outline-color: var(--accent); }

/* a title with a stroke of paint under its key word */
.brushed { position: relative; white-space: nowrap; z-index: 0; }
.brushed::after { content: ""; position: absolute; z-index: -1; inset-inline: -6px; bottom: -.06em; height: .44em; opacity: .55;
  background: url(/brand/stroke.svg) center / 100% 100% no-repeat; border-radius: 8px; }