/* Zahy UI — the design system every app page loads first.
   Tokens (colour, type, space, radius, depth, motion), the base, and the shared components: buttons, icon buttons,
   fields, status pills, toasts and the signed-out gate. shell.css draws the sidebar and the page frame on top of it,
   and each page's own stylesheet builds on both.

   Two rules keep the posters safe:
   · The poster engine (engine.css, kit.css) reads --f-display, --f-body, --violet and --cream from :root, so those keep
     their values here. The interface uses --font-ui and --font-brand instead.
   · Never define --fb, --bg, --tx, --b, --f, --i, --s or other short custom properties at :root: the kit reads them as
     per-element inputs with fallbacks, and a value up here would repaint the designs. */
:root{
  color-scheme:light;

  /* brand (the poster engine reads some of these: keep the values) */
  --blue:#2E40FF; --violet:#8B3DFF; --pink:#FF4D9A; --cream:#F5F3EF;
  --grad:linear-gradient(135deg,var(--blue),var(--violet) 55%,var(--pink));
  --f-display:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;

  /* type: one family for the whole interface, the brand face only for the wordmark and hero lines */
  --font-ui:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --font-brand:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;

  /* neutrals: cool and quiet, so the designs carry the colour */
  --ink:#141417; --ink-2:#3F3F46; --ink-3:#55555F; --stone:#6B6B75; --faint:#9F9FA9; --ghost:#C9C9D0;
  --surface:#FFFFFF; --panel:#FFFFFF; --app:#F7F7F8; --soft:#F4F4F5; --soft-2:#ECECEF; --side-bg:#F8F8F9;
  --line:#EBEBEE; --sand:#E2E2E7; --line-strong:#D2D2D8;
  --hover:rgba(20,20,26,.045); --press:rgba(20,20,26,.08);

  /* accent: one violet for actions, selection and focus */
  --primary:#7232F2; --primary-h:#6125E2; --primary-ink:#5B1FD3;
  --primary-soft:#F4F0FF; --primary-soft-2:#EBE3FF; --primary-line:#D5C5FF;
  --ring:0 0 0 3px rgba(114,50,242,.16);

  /* status */
  --ok:#0F7B55; --ok-soft:#E8F6EF; --ok-line:#BFE5D3;
  --bad:#C62B40; --bad-soft:#FDEFF1; --bad-line:#F6C9D1;
  --warn:#965A05; --warn-soft:#FFF5E2; --warn-line:#F5DDAE;
  --info:#2F55E4; --info-soft:#EEF2FF;
  --c-facebook:#0866FF; --c-meta:#1C2B33;

  /* shape */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:999px;
  --h-sm:32px; --h-md:36px; --h-lg:42px;
  --head-h:56px;

  /* depth */
  --sh-xs:0 1px 2px rgba(18,18,28,.05);
  --sh-sm:0 1px 2px rgba(18,18,28,.04),0 2px 6px -1px rgba(18,18,28,.06);
  --sh-md:0 1px 3px rgba(18,18,28,.04),0 8px 20px -6px rgba(18,18,28,.1);
  --sh-lg:0 4px 10px -4px rgba(18,18,28,.08),0 20px 44px -12px rgba(18,18,28,.18);
  --sh-xl:0 10px 24px -10px rgba(18,18,28,.14),0 36px 80px -24px rgba(18,18,28,.3);
  --sh-pop:0 0 0 1px rgba(18,18,28,.07),0 4px 10px -4px rgba(18,18,28,.08),0 18px 40px -12px rgba(18,18,28,.2);

  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1); --ease-io:cubic-bezier(.4,0,.2,1);
  --t-fast:.12s; --t:.18s; --t-slow:.32s;
}

/* ---------- base ----------
   Element rules stay out of the designs (.dz, the poster engine): a headline there is an <h3> and a title line a
   .sub or .row, and the interface must never restyle them. Headings get no font or colour here at all (they
   inherit the page's), and what they do get is zero-specificity and skips anything inside a design. */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-ui);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* designs keep the base they were made on (15px, the system's text rendering) whatever the page around them uses */
:where(.dz){font-size:15px;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
:where(h1,h2,h3,h4,h5,h6):where(:not(.dz *)){margin:0;line-height:1.35;font-weight:700}
:where(h3,h4,h5,h6):where(:not(.dz *)){font-weight:600}
a{color:var(--primary);text-underline-offset:3px}
::selection{background:rgba(114,50,242,.18)}
::placeholder{color:var(--faint);opacity:1}
:focus{outline:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:inherit}
input:focus-visible,textarea:focus-visible,select:focus-visible,[contenteditable]:focus-visible{outline:none}
kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--sand),0 1px 0 var(--sand);font:600 11px/1 var(--font-mono);color:var(--stone);direction:ltr}
.muted{color:var(--stone)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* quiet scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(20,20,26,.18) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(20,20,26,.16);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(20,20,26,.28);border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* ---------- buttons ----------
   .btn          neutral, filled          .btn.ghost   outlined on white
   .btn.dark     primary (violet)         .btn.grad    brand gradient, for the one hero action on a screen
   .btn.danger   destructive              .btn.fb      Facebook
   sizes: .sm (32) · default (36) · .lg (42) */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h-md);padding:0 14px;border-radius:var(--r-md);
  border:0;font-size:13.5px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;color:var(--ink);background:var(--soft);
  transition:background-color var(--t-fast),box-shadow var(--t-fast),color var(--t-fast),transform var(--t-fast),filter var(--t-fast);user-select:none;-webkit-tap-highlight-color:transparent}
.btn svg{width:16px;height:16px;flex:none}
.btn:hover:not(:disabled){background:var(--soft-2)}
.btn:active:not(:disabled){transform:translateY(.5px)}
.btn.ghost{background:var(--surface);box-shadow:inset 0 0 0 1px var(--sand),var(--sh-xs)}
.btn.ghost:hover:not(:disabled){background:#FAFAFB;box-shadow:inset 0 0 0 1px var(--line-strong),var(--sh-xs)}
.btn.dark{background:var(--primary);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(60,20,170,.28),0 4px 12px -4px rgba(114,50,242,.45)}
.btn.dark:hover:not(:disabled){background:var(--primary-h)}
.btn.grad{background:var(--grad);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(60,20,170,.25),0 6px 16px -6px rgba(139,61,255,.6)}
.btn.grad:hover:not(:disabled){filter:brightness(1.06) saturate(1.05);background:var(--grad)}
.btn.fb{background:var(--c-facebook);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(8,60,180,.3)}
.btn.fb:hover:not(:disabled){background:#0757DB}
.btn.danger{background:var(--bad-soft);color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad-line)}
.btn.danger:hover:not(:disabled){background:#FBE3E7}
.btn.sm{height:var(--h-sm);padding:0 12px;font-size:13px;border-radius:var(--r-sm);gap:6px}
.btn.sm svg{width:15px;height:15px}
.btn.lg{height:var(--h-lg);padding:0 18px;font-size:14px;border-radius:var(--r-lg)}
.btn:disabled{opacity:.45;box-shadow:none;filter:none}
.btn.dark:disabled,.btn.grad:disabled{opacity:.4}

.ic-btn{position:relative;width:32px;height:32px;border-radius:var(--r-sm);border:0;background:transparent;display:grid;place-items:center;color:var(--stone);flex:none;
  transition:background-color var(--t-fast),color var(--t-fast);-webkit-tap-highlight-color:transparent;text-decoration:none}
.ic-btn:hover{background:var(--hover);color:var(--ink)}
.ic-btn:active{background:var(--press)}
.ic-btn svg{width:18px;height:18px}

/* ---------- fields ---------- */
.field{display:grid;gap:6px;min-width:0}
.field>label,.field>.lbl{font-size:13px;color:var(--ink-2);font-weight:500;line-height:1.4}
.field input,.field select,.field textarea{height:38px;border-radius:var(--r-md);border:1px solid var(--sand);background:var(--surface);padding:0 12px;outline:0;min-width:0;width:100%;
  font-size:14px;color:var(--ink);box-shadow:var(--sh-xs);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field textarea{height:auto;padding:10px 12px;line-height:1.65;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:var(--ring)}
.field small{font-size:12.5px;color:var(--stone);line-height:1.5}
/* selects get a quiet chevron on the end side (pages opt in with .sel-ui or a .field) */
.field select,select.sel-ui{-webkit-appearance:none;appearance:none;padding-inline-end:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:16px;background-position:left 11px center}
.field select[dir=ltr],select.sel-ui[dir=ltr]{background-position:right 11px center}
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}
input[type=range]{accent-color:var(--primary)}
.msg-line{font-size:13px;color:var(--stone);min-height:1.2em}
.msg-line.err{color:var(--bad)}
.msg-line.ok{color:var(--ok)}

/* ---------- status pills, badges and platform marks ---------- */
/* (a design's torn title also uses .st: the base look skips anything inside a design) */
.st:where(:not(.dz *)){display:inline-flex;align-items:center;gap:5px;height:22px;font-size:12px;font-weight:600;border-radius:var(--r-full);padding:0 9px;background:var(--soft);color:var(--stone);white-space:nowrap;line-height:1}
.st:where(:not(.dz *))::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85;flex:none}
.st.scheduled,.st.draft{background:var(--info-soft);color:var(--info)}
.st.processing,.st.publishing,.st.creating,.st.running,.st.in_review{background:var(--primary-soft);color:var(--primary-ink)}
.st.published,.st.active,.st.done{background:var(--ok-soft);color:var(--ok)}
.st.failed,.st.rejected{background:var(--bad-soft);color:var(--bad)}
.st.canceled,.st.completed,.st.paused{background:var(--soft);color:var(--stone)}
.pf{width:22px;height:22px;border-radius:7px;display:inline-grid;place-items:center;color:#fff;flex:none}
.pf svg{width:13px;height:13px}
.pf.facebook{background:var(--c-facebook)}
.pf.instagram{background:linear-gradient(45deg,#F58529,#DD2A7B 50%,#8134AF)}
.pf.meta_ads{background:var(--c-meta)}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px);z-index:90;display:flex;align-items:center;gap:10px;background:#18181C;color:#fff;
  font-size:13.5px;font-weight:500;line-height:1.5;padding:11px 18px;border-radius:var(--r-lg);box-shadow:0 12px 32px -8px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06) inset;
  opacity:0;pointer-events:none;transition:opacity var(--t) var(--ease),transform var(--t-slow) var(--ease);max-width:min(520px,calc(100vw - 32px));text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#8F1D33}

/* ---------- the signed-out gate ---------- */
.gate{margin:auto;max-width:420px;text-align:center;display:grid;gap:12px;justify-items:center;padding:40px 24px}
.gate::before{content:"";width:52px;height:52px;border-radius:15px;margin-bottom:6px;background:var(--surface) url("symbol.svg") center/28px no-repeat;
  box-shadow:0 0 0 1px var(--line),var(--sh-md)}
.gate h2{font-size:20px;font-weight:700}
.gate p{margin:0;color:var(--stone);font-size:14.5px;line-height:1.7}
.gate .btn{margin-top:6px}

/* ---------- shimmer for loading placeholders ---------- */
.skel{position:relative;overflow:hidden;background:var(--soft);border-radius:var(--r-sm)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:skel 1.4s infinite}
@keyframes skel{to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}