/* =========================================================
   UI layer: typography, motion, skeletons, toasts, icons.
   Loaded after app.css so it can refine the base tokens.
   ========================================================= */

:root{
  --font:"IBM Plex Sans Arabic","Inter","Segoe UI","Noto Sans Arabic",Tahoma,system-ui,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* Softer, layered shadows read as more modern than a single hard drop. */
  --shadow:0 1px 2px rgba(16,24,40,.04),0 2px 6px rgba(16,24,40,.04),0 12px 28px -8px rgba(16,24,40,.10);
  --shadow-lg:0 2px 6px rgba(16,24,40,.06),0 24px 60px -12px rgba(16,24,40,.24);
  --radius:12px; --radius-sm:9px;
}
:root[data-theme="dark"]{
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 28px -8px rgba(0,0,0,.5);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 24px 60px -12px rgba(0,0,0,.7);
}

body{
  font-family:var(--font);
  font-feature-settings:"kern" 1,"liga" 1;
  letter-spacing:-.006em;
}
h1,h2,h3,.brand,.mtitle{letter-spacing:-.022em}
:root[dir="ltr"] body,:root[lang="en"] body{letter-spacing:-.011em}

/* ---------- icons ---------- */
.ic{
  width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em;
  stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.ic-lg{width:1.2em;height:1.2em}
.navitem .ic,.tbtn .ic,.mact .ic,.btn .ic{opacity:.85}
.navitem.active .ic{opacity:1}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .row,.navitem,.card,.panel,.plan,.jcard,.file,.mact,.tbtn,.btn,.iconbtn{
    transition:background-color .16s var(--ease),border-color .16s var(--ease),
               color .16s var(--ease),transform .18s var(--ease-out),box-shadow .2s var(--ease);
  }
  .btn:active,.mact:active,.tbtn:active{transform:scale(.97)}
  .msglist .row{animation:rowIn .3s var(--ease-out) backwards}
  .msglist .row:nth-child(1){animation-delay:.01s}
  .msglist .row:nth-child(2){animation-delay:.03s}
  .msglist .row:nth-child(3){animation-delay:.05s}
  .msglist .row:nth-child(4){animation-delay:.07s}
  .msglist .row:nth-child(5){animation-delay:.09s}
  .msglist .row:nth-child(n+6){animation-delay:.11s}
  .tabpane.on,.stepPane{animation:paneIn .26s var(--ease-out)}
  .msg{animation:paneIn .24s var(--ease-out) backwards}
}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Focus ring — accessibility and a modern tell. */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;
}

/* ---------- skeleton loading ---------- */
.sk{
  background:linear-gradient(90deg,var(--surface-3) 25%,var(--border) 37%,var(--surface-3) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:6px;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skrow{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--border)}
.skrow .sk.av{width:34px;height:34px;border-radius:50%;flex:none}
.skrow .sk.l1{height:11px;width:38%;margin-bottom:8px}
.skrow .sk.l2{height:11px;width:76%;margin-bottom:7px}
.skrow .sk.l3{height:10px;width:56%}

/* ---------- toasts ---------- */
#toasts{
  position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:9999;
  display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none;max-width:min(420px,calc(100vw - 44px));
}
.toast{
  pointer-events:auto;display:flex;align-items:flex-start;gap:12px;position:relative;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:13px 15px;box-shadow:var(--shadow-lg);overflow:hidden;
  animation:toastIn .34s var(--ease-out);
  will-change:transform,opacity;
}
.toast.out{animation:toastOut .22s var(--ease) forwards}
@keyframes toastIn{
  from{opacity:0;transform:translateY(14px) scale(.96)}
  to{opacity:1;transform:none}
}
@keyframes toastOut{
  to{opacity:0;transform:translateY(6px) scale(.97)}
}
.toast .tico{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;margin-top:1px;
}
.toast .tmsg{flex:1;min-width:0;font-size:13.5px;line-height:1.6;color:var(--text)}
.toast .tsub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.toast .tact{
  align-self:center;font-size:12.5px;font-weight:700;color:var(--accent);
  padding:5px 11px;border-radius:8px;flex:none;
}
.toast .tact:hover{background:var(--accent-soft)}
.toast .tx{align-self:flex-start;color:var(--muted);padding:3px;border-radius:6px;flex:none}
.toast .tx:hover{background:var(--surface-3);color:var(--text)}
.toast .bar{position:absolute;inset-block-end:0;inset-inline-start:0;height:2px;background:currentColor;opacity:.45}
.toast.ok    .tico{background:rgba(18,133,95,.14);color:var(--green)}
.toast.ok    .bar{color:var(--green)}
.toast.err   .tico{background:rgba(200,55,45,.13);color:var(--red)}
.toast.err   .bar{color:var(--red)}
.toast.warn  .tico{background:rgba(176,115,7,.15);color:var(--amber)}
.toast.warn  .bar{color:var(--amber)}
.toast.info  .tico{background:var(--accent-soft);color:var(--accent)}
.toast.info  .bar{color:var(--accent)}
@keyframes barDrain{from{width:100%}to{width:0%}}

/* ---------- refinements ---------- */
.row:hover{background:var(--surface-2)}
.card:hover,.panel:hover{box-shadow:0 1px 2px rgba(16,24,40,.03)}
.jcard:hover{transform:translateY(-3px)}
.plan:hover{transform:translateY(-3px)}
.btn{box-shadow:0 1px 2px rgba(16,24,40,.08)}
.btn:hover{box-shadow:0 4px 14px -2px rgba(67,86,214,.4)}
.pill,.tag,.pill2{letter-spacing:0}
.avatar,.rav,.mav{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}