/* ============================================================
   Wazifa — one stylesheet.
   Identity: iris violet on near-black plum, with apricot kept
   exclusively for the one action that matters — Apply.
   Latin type is Outfit; Arabic and Kurdish fall through to Noto
   Kufi Arabic; @handles and figures use Space Mono.
   Logical properties throughout, so RTL and LTR both work.
   ============================================================ */

:root{
  --ink:#191331; --ink-2:#241C46;
  --iris:#5A3FE0; --iris-600:#4A31C6; --iris-50:#EDEAFD;
  --apricot:#FF8A4C; --apricot-50:#FFEFE4; --apricot-ink:#8A3F12;
  --rose:#D93B4E; --rose-50:#FBE7E9;
  --paper:#F5F4FA; --surface:#FFFFFF; --surface-2:#FAFAFD;
  --text:#191331; --muted:#6B6789; --faint:#9C98B8;
  --line:#E7E4F2; --line-2:#F0EEF7;
  --r:16px; --r-sm:11px; --r-lg:24px;
  --shadow:0 1px 2px rgba(25,19,49,.05),0 10px 24px -14px rgba(25,19,49,.24);
  --shadow-up:0 -2px 20px -6px rgba(25,19,49,.14);
  --sans:'Outfit','Noto Kufi Arabic',system-ui,'Segoe UI',sans-serif;
  --mono:'Space Mono','Noto Kufi Arabic',ui-monospace,monospace;
  --bar:58px; --tabs:68px;
}
[data-theme="dark"]{
  --ink:#0C0918; --ink-2:#151030;
  --iris:#8B74FF; --iris-600:#A08FFF; --iris-50:#221A47;
  --apricot:#FF9E6B; --apricot-50:#3A2114; --apricot-ink:#FFC9A8;
  --rose:#F0697A; --rose-50:#3A1B20;
  --paper:#0C0918; --surface:#16112E; --surface-2:#120E26;
  --text:#EDEBF7; --muted:#A5A0C4; --faint:#7C77A0;
  --line:#282050; --line-2:#1F1940;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 24px -14px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.22;letter-spacing:-.02em;font-weight:700}
h1{font-size:25px} h2{font-size:20px} h3{font-size:17px} h4{font-size:15px}
p{margin:0 0 .9em}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid var(--apricot);outline-offset:2px;border-radius:6px}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  width:1.15em;height:1.15em;flex:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
bdi{unicode-bidi:isolate}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.hide{display:none!important}
.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--iris);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{inset-inline-start:0}

/* ---------- App frame: a phone-width column, centred on desktop ---------- */
.app{max-width:600px;margin-inline:auto;min-height:100vh;background:var(--paper);position:relative}
@media (min-width:640px){
  .app{border-inline:1px solid var(--line);min-height:100dvh}
  body{background:var(--ink-2)}
}

/* ---------- Top bar ---------- */
.topbar{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;height:calc(var(--bar) + env(safe-area-inset-top));
  padding-block-start:env(safe-area-inset-top);
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);
  border-block-end:1px solid var(--line)}
.topbar__in{max-width:600px;margin-inline:auto;height:var(--bar);display:flex;align-items:center;gap:10px;padding-inline:14px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;letter-spacing:-.03em}
.brand svg{width:28px;height:28px;stroke:none;flex:none}
.topbar__sp{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.topbar__title{font-weight:700;font-size:17px;letter-spacing:-.02em}
.iconbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:0;background:transparent;
  color:var(--text);cursor:pointer;position:relative}
.iconbtn:hover{background:var(--line-2)}
.iconbtn svg{width:22px;height:22px}
.dot{position:absolute;inset-block-start:7px;inset-inline-end:7px;min-width:16px;height:16px;padding-inline:4px;
  border-radius:20px;background:var(--rose);color:#fff;font:600 10px/16px var(--mono);text-align:center}
.ico-moon{display:none} [data-theme="dark"] .ico-sun{display:none} [data-theme="dark"] .ico-moon{display:block}

/* ---------- Screen ---------- */
.screen{padding-block:calc(var(--bar) + env(safe-area-inset-top) + 12px)
        calc(var(--tabs) + env(safe-area-inset-bottom) + 24px);
  padding-inline:14px}
.screen--flush{padding-inline:0}
.screen--plain{padding-block-end:32px}

/* ---------- Bottom tabs ---------- */
.tabs{position:fixed;inset-block-end:0;inset-inline:0;z-index:60;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);
  border-block-start:1px solid var(--line);box-shadow:var(--shadow-up);
  padding-block-end:env(safe-area-inset-bottom)}
.tabs__in{max-width:600px;margin-inline:auto;height:var(--tabs);display:grid;grid-template-columns:repeat(5,1fr);
  align-items:center}
.tab{display:grid;justify-items:center;gap:3px;color:var(--faint);font-size:10.5px;font-weight:600;padding-block:6px}
.tab svg{width:23px;height:23px}
.tab.is-on{color:var(--iris)}
.tab.is-on svg{stroke-width:2.2}
.tab--make{align-self:center}
.tab--make span{display:none}
.tab--make i{width:46px;height:46px;border-radius:16px;background:var(--iris);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 18px -8px var(--iris)}
.tab--make i svg{width:24px;height:24px;stroke-width:2.4}
.tab--make.is-on i{background:var(--iris-600)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;
  border:1px solid transparent;font:600 15px/1 var(--sans);cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.btn:active{transform:scale(.985)}
.btn svg{width:18px;height:18px}
.btn--lg svg{width:20px;height:20px}
.btn--sm svg{width:15px;height:15px}
.btn--primary{background:var(--iris);color:#fff} .btn--primary:hover{background:var(--iris-600)}
.btn--apply{background:var(--apricot);color:#3A1B06} .btn--apply:hover{filter:brightness(.96)}
.btn--ghost{border-color:var(--line);background:var(--surface);color:var(--text)}
.btn--ghost:hover{border-color:var(--iris);color:var(--iris)}
.btn--quiet{background:var(--line-2);color:var(--muted)} .btn--quiet:hover{color:var(--text)}
.btn--danger{background:var(--rose-50);color:var(--rose)} .btn--danger:hover{background:var(--rose);color:#fff}
.btn--block{width:100%} .btn--sm{padding:8px 13px;font-size:13.5px;border-radius:10px}
.btn--lg{padding:15px 22px;font-size:16px;border-radius:14px}
.btn[disabled],.btn.is-done{opacity:.62;pointer-events:none}

/* ---------- Flash ---------- */
.flashes{display:grid;gap:8px;margin-block-end:12px}
.flash{padding:11px 14px;border-radius:12px;font-size:14.5px;font-weight:600;
  background:var(--iris-50);color:var(--iris-600);border-inline-start:4px solid var(--iris)}
.flash--bad{background:var(--rose-50);color:var(--rose);border-color:var(--rose)}

/* ---------- Avatar ---------- */
.av{width:42px;height:42px;flex:none;border-radius:50%;background:var(--iris-50);color:var(--iris-600);
  display:grid;place-items:center;font:700 15px var(--sans);overflow:hidden;border:1px solid var(--line)}
.av img{width:100%;height:100%;object-fit:cover}
.av svg{width:20px;height:20px}
.av--sm{width:34px;height:34px;font-size:13px}
.av--lg{width:84px;height:84px;font-size:28px}
.av--co{border-radius:14px}

/* ---------- Post card ---------- */
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-block-end:12px;overflow:hidden}
.pcard__head{display:flex;align-items:center;gap:11px;padding:13px 14px}
.pcard__who{min-width:0;flex:1}
.pcard__name{font-weight:700;font-size:15px;display:flex;align-items:center;gap:5px}
.pcard__name svg{width:15px;height:15px;color:var(--iris);stroke-width:2.4}
.pcard__meta{font:400 12.5px var(--mono);color:var(--faint)}
.pcard__body{padding:0 14px 12px;font-size:15.5px;white-space:pre-wrap;word-break:break-word}
.pcard__img{width:100%;max-height:520px;object-fit:cover;background:var(--line-2)}
.pcard__acts{display:flex;align-items:center;gap:4px;padding:8px 8px;border-block-start:1px solid var(--line-2)}
.act{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:10px;border:0;background:transparent;
  color:var(--muted);font:600 13.5px var(--sans);cursor:pointer}
.act:hover{background:var(--line-2);color:var(--text)}
.act svg{width:19px;height:19px}
.act.is-on{color:var(--rose)} .act.is-on svg{fill:var(--rose);stroke:var(--rose)}
.act__n{font-family:var(--mono);font-size:13px}

/* ---------- Job card: the one place colour is loud ---------- */
.pcard--job{border-color:var(--apricot);position:relative}
.pcard--job::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--apricot)}
.jchip{display:inline-flex;align-items:center;gap:5px;font:700 10.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;padding:5px 8px;border-radius:6px;background:var(--apricot-50);color:var(--apricot-ink)}
.jtitle{font-size:19px;font-weight:700;letter-spacing:-.02em;padding:2px 14px 0;line-height:1.25}
.jpay{font:700 16px var(--mono);color:var(--iris);padding:8px 14px 0}
.jmeta{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 0}
.jbtn{padding:12px 14px 14px}
.chip{display:inline-flex;align-items:center;gap:5px;font:600 12.5px/1 var(--sans);padding:7px 10px;border-radius:8px;
  background:var(--line-2);color:var(--muted)}
.chip svg{width:14px;height:14px}
.chip--iris{background:var(--iris-50);color:var(--iris-600)}
.chip--warn{background:var(--apricot-50);color:var(--apricot-ink)}
.chip--off{background:var(--rose-50);color:var(--rose)}

/* ---------- Segmented tabs ---------- */
.seg{display:flex;gap:4px;background:var(--line-2);padding:4px;border-radius:12px;margin-block-end:14px;overflow-x:auto}
.seg a{flex:1;text-align:center;padding:8px 12px;border-radius:9px;font-weight:600;font-size:13.5px;color:var(--muted);white-space:nowrap}
.seg a.is-on{background:var(--surface);color:var(--iris);box-shadow:var(--shadow)}

/* ---------- Lists ---------- */
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-block-end:1px solid var(--line-2)}
.row:last-child{border-block-end:0}
.row:hover{background:var(--surface-2)}
.row__main{min-width:0;flex:1}
.row__t{font-weight:600;font-size:15px;display:flex;align-items:center;gap:5px;min-width:0}
.row__t svg{width:15px;height:15px;color:var(--iris);stroke-width:2.4}
.row__s{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__end{text-align:end;font-size:12px;color:var(--faint);flex:none}
.row__end svg{width:17px;height:17px;color:var(--faint)}

/* ---------- Profile ---------- */
.phead{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;margin-block-end:12px}
.phead__top{display:flex;align-items:center;gap:16px}
.pname{font-size:19px;font-weight:700;display:flex;align-items:center;gap:6px;letter-spacing:-.02em}
.pname svg{width:17px;height:17px;color:var(--iris);stroke-width:2.4}
.phandle{font:400 13px var(--mono);color:var(--faint)}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-block:16px 0;
  border-block-start:1px solid var(--line-2);padding-block-start:14px}
.pstat{text-align:center}
.pstat b{display:block;font:700 18px var(--mono);letter-spacing:-.02em}
.pstat span{font-size:12px;color:var(--muted)}
.pbio{margin-block-start:12px;font-size:14.5px;white-space:pre-wrap}
.pacts{display:flex;gap:8px;margin-block-start:14px}
.pacts .btn{flex:1}

/* ---------- Forms ---------- */
.field{display:grid;gap:6px;margin-block-end:14px}
.field>label,.label{font-weight:600;font-size:14px}
.input,.select,.textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--text);font:500 15.5px var(--sans)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--iris);box-shadow:0 0 0 3px var(--iris-50)}
.textarea{min-height:110px;resize:vertical;line-height:1.6}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6789' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-inline-end:40px}
[dir="rtl"] .select{background-position:left 12px center;padding-inline-end:14px;padding-inline-start:40px}
.help{font-size:12.5px;color:var(--faint)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.span2{grid-column:1/-1}
.pick{display:grid;gap:10px;margin-block-end:18px}
.pick label{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:14px;padding:14px;
  cursor:pointer;font-weight:600;background:var(--surface)}
.pick label:has(input:checked){border-color:var(--iris);background:var(--iris-50);color:var(--iris-600)}
.pick input{accent-color:var(--iris);width:19px;height:19px;flex:none}
.pick em{display:block;font-style:normal;font-weight:400;font-size:13px;color:var(--muted)}
.filebox{border:1.5px dashed var(--line);border-radius:12px;padding:14px;text-align:center;background:var(--surface-2);
  font-size:13.5px;color:var(--muted)}
.filebox input{width:100%;margin-block-start:8px;font-size:13px}
.switch{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;cursor:pointer;margin-block-end:14px}
.switch input{accent-color:var(--iris);width:19px;height:19px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}

/* ---------- Composer ---------- */
.composer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.composer .textarea{border:0;padding:0;min-height:96px;font-size:17px}
.composer .textarea:focus{box-shadow:none}
.composer__bar{display:flex;align-items:center;gap:8px;border-block-start:1px solid var(--line-2);
  padding-block-start:12px;margin-block-start:12px}
.preview{margin-block-start:12px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}

/* ---------- Chat ---------- */
.thread{display:flex;flex-direction:column;gap:8px;padding-block:6px 78px}
.bub{max-width:78%;padding:10px 13px;border-radius:16px;font-size:15px;white-space:pre-wrap;word-break:break-word}
.bub--them{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-start-start-radius:5px}
.bub--me{align-self:flex-end;background:var(--iris);color:#fff;border-end-end-radius:5px}
.bub time{display:block;font:400 10.5px var(--mono);opacity:.65;margin-block-start:4px}
.composer--chat{position:fixed;inset-block-end:0;inset-inline:0;z-index:55;background:var(--surface);
  border-block-start:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.composer--chat .in{max-width:600px;margin-inline:auto;display:flex;gap:8px;align-items:end}
.composer--chat .textarea{min-height:44px;max-height:120px;border-radius:22px;padding:11px 16px}

/* ---------- Status pills ---------- */
.st{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--sans);padding:5px 10px;border-radius:20px;
  background:var(--line-2);color:var(--muted);white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st--seen{background:#E8EEFA;color:#3A63A8}
.st--shortlisted{background:var(--apricot-50);color:var(--apricot-ink)}
.st--interview{background:var(--iris-50);color:var(--iris-600)}
.st--hired{background:var(--iris);color:#fff}
.st--rejected{background:var(--rose-50);color:var(--rose)}
.st--blocked{background:var(--rose-50);color:var(--rose)}
.st--active{background:var(--iris-50);color:var(--iris-600)}
[data-theme="dark"] .st--seen{background:#1B2540;color:#93B4EC}

/* ---------- Empty ---------- */
.empty{text-align:center;padding:52px 22px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r)}
.empty svg{width:44px;height:44px;color:var(--faint);margin-inline:auto;margin-block-end:14px}
.empty h3{margin-block-end:6px} .empty p{color:var(--muted);font-size:14.5px;margin-block-end:16px}

/* ---------- Table (admin) ---------- */
.tbl-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.tbl th{text-align:start;font:600 11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
  padding:11px 12px;border-block-end:1px solid var(--line)}
.tbl td{padding:11px 12px;border-block-end:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-block-end:0}

/* ---------- Auth screens ---------- */
.auth{min-height:100dvh;display:grid;align-content:center;padding:28px 20px calc(28px + env(safe-area-inset-bottom));
  max-width:460px;margin-inline:auto}
.auth__logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:24px;letter-spacing:-.03em;margin-block-end:6px}
.auth__logo svg{width:40px;height:40px;stroke:none}
.auth__sub{color:var(--muted);margin-block:0 24px;font-size:15px}
.auth .langsw{display:flex;gap:4px;background:var(--line-2);padding:4px;border-radius:20px;margin-block-start:22px;
  justify-content:center}
.auth .langsw a{padding:6px 14px;border-radius:16px;font:600 13px var(--mono);color:var(--muted)}
.auth .langsw a.is-on{background:var(--surface);color:var(--iris)}

/* ---------- Misc ---------- */
.sect-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block:4px 12px}
.sect-h h2{font-size:17px}
.sect-h a{font-size:13.5px;font-weight:600;color:var(--iris)}
.gridposts{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.gridposts a{aspect-ratio:1;background:var(--line-2);overflow:hidden;position:relative}
.gridposts img{width:100%;height:100%;object-fit:cover}
.gridposts .txt{padding:8px;font-size:11.5px;color:var(--muted);overflow:hidden}
.more{display:block;text-align:center;padding:13px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);font-weight:600;font-size:14px;color:var(--iris)}
/* Directional arrows follow the reading direction */
[dir="rtl"] .row__end svg,
[dir="rtl"] .topbar__in .iconbtn:first-child svg{transform:scaleX(-1)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}