@charset "UTF-8";
/* ==========================================================================
   PORTOUS EXCHANGE SUITE — Design System
   Golden Lozan · Portous Solutions
   Build target: Arabic (RTL)
   --------------------------------------------------------------------------
   Table of contents
   00. Fonts
   01. Design tokens (light)
   02. Design tokens (dark)
   03. Base & reset layer
   04. Accessibility utilities
   05. App shell (sidebar / topbar / main)
   06. Buttons
   07. Forms
   08. Cards & panels
   09. Tables
   10. Badges, pills & status
   11. Domain components (money, rates, timeline, variance, matrix…)
   12. Navigation aids (tabs, breadcrumb, pagination, stepper)
   13. Feedback (alerts, toasts, empty, skeleton, modal)
   14. Auth pages
   15. Charts
   16. Motion & AOS
   17. Utilities
   18. Responsive
   19. Print
   ========================================================================== */

/* ==========================================================================
   00. FONTS
   ========================================================================== */

@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/plex-arabic-400.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/plex-arabic-500.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/plex-arabic-600.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/plex-arabic-700.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/plex-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/plex-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/plex-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/plex-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}



/* ==========================================================================
   01. DESIGN TOKENS — LIGHT
   ========================================================================== */
:root{
  /* -- brand -------------------------------------------------------------
     Lozan Exchange's mark is a monochrome charcoal badge, so the system is
     built on a graphite foundation with a single brass-gold accent — the one
     colour the brand name implies, and the one that never collides with the
     green/red a ledger needs for credit and debit.                           */
  --brand-50:#FBF6E7;  --brand-100:#F5EAC6; --brand-200:#EBD894;
  --brand-300:#DFC15C; --brand-400:#CFA92F; --brand-500:#C9A227;
  --brand-600:#8A6A12; --brand-700:#6E5410; --brand-800:#54400C;
  /* Brass fills carry near-black text, not white — 6.9:1 either way round. */
  --brand-solid:#C9A227;   --brand-solid-hover:#B08C1C;
  --brand-on-solid:#1A1A1A;

  --violet-100:#EAE7F6; --violet-400:#8B7FC4; --violet-500:#6A5CB0; --violet-600:#4C3F92;
  --gold-100:#FBF3D9; --gold-500:#C9A227; --gold-700:#7A6211;
  --grad-brand:linear-gradient(135deg,#2B3036 0%,#C9A227 100%);
  --grad-brand-soft:linear-gradient(135deg,rgba(43,48,54,.10) 0%,rgba(201,162,39,.14) 100%);
  --grad-avatar:linear-gradient(135deg,#3A4149 0%,#22272C 100%);

  /* -- ink / neutral -----------------------------------------------------
     A neutral graphite ramp, matching the logo's ink rather than the cool
     blue-grey a generic dashboard would use.                                 */
  --ink-900:#16191C; --ink-800:#22272C; --ink-700:#343A41; --ink-600:#4A5158;
  --ink-500:#5A626A; --ink-400:#626B74; --ink-300:#A6ADB4; --ink-200:#CBD1D6;
  --ink-100:#E2E6EA; --ink-50:#F1F3F5;

  /* -- surfaces ---------------------------------------------------------- */
  --bg:#F4F6F7;
  --surface:#FFFFFF;
  --surface-2:#F9FAFB;
  --surface-3:#F1F3F5;
  --surface-inverse:#16191C;
  --line:#E2E6EA;
  --line-strong:#CBD1D6;
  --sidebar-bg:#15181B;
  --sidebar-fg:#AEB6BD;
  --sidebar-fg-active:#FFFFFF;
  --sidebar-hover:rgba(255,255,255,.07);
  --sidebar-active:rgba(201,162,39,.16);

  /* -- semantic ---------------------------------------------------------- */
  --success-50:#E7F6EF;  --success-100:#C8EBDB; --success-500:#12946A; --success-600:#0E7C55; --success-700:#0A5D40;
  --danger-50:#FDECEA;   --danger-100:#F9D2CE;  --danger-500:#DB3226;  --danger-600:#C0281F;  --danger-700:#931D17;
  --warning-50:#FDF3E3;  --warning-100:#FAE3BE; --warning-500:#C87400; --warning-600:#A45B00; --warning-700:#7A4400;
  --info-50:#E8F0FB;     --info-100:#CADEF7;    --info-500:#2168C4;    --info-600:#1A56A8;    --info-700:#12407E;
  --muted-50:#F1F3F8;    --muted-500:#666E8C;   --muted-600:#5C6480;

  /* -- solid fills ------------------------------------------------------
     The semantic scale is inverted in dark mode so its 600 step becomes a
     light tint — perfect for text on a dark surface, useless as a fill.
     These tokens stay dark in both themes so white text always clears AA.
     (--brand-solid is declared with the brand ramp: it is brass in both
     themes and carries near-black text instead of white.)                   */
  --success-solid:#0E7C55; --success-solid-hover:#0A5D40;
  --danger-solid:#C0281F;  --danger-solid-hover:#931D17;
  --warning-solid:#A45B00; --warning-solid-hover:#7A4400;

  /* -- finance ----------------------------------------------------------- */
  --credit:var(--success-600);
  --debit:var(--danger-600);
  --buy:var(--success-600);
  --sell:var(--danger-600);

  /* -- typography -------------------------------------------------------- */
  --font-sans:'Plex Arabic','IBM Plex Sans Arabic','Segoe UI',Tahoma,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-2xs:.6875rem; --fs-xs:.75rem;  --fs-sm:.8125rem; --fs-base:.875rem;
  --fs-md:1rem;      --fs-lg:1.125rem;--fs-xl:1.375rem; --fs-2xl:1.75rem;
  --fs-3xl:2.25rem;  --fs-4xl:2.75rem;
  --lh-tight:1.35; --lh-base:1.68; --lh-loose:1.85;

  /* -- spacing ----------------------------------------------------------- */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;   --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem;   --sp-10:2.5rem;--sp-12:3rem;  --sp-16:4rem;

  /* -- radii ------------------------------------------------------------- */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;

  /* -- elevation --------------------------------------------------------- */
  --shadow-xs:0 1px 2px rgba(17,21,40,.06);
  --shadow-sm:0 2px 8px rgba(17,21,40,.06);
  --shadow-md:0 8px 24px rgba(17,21,40,.08);
  --shadow-lg:0 16px 48px rgba(17,21,40,.12);
  --shadow-focus:0 0 0 3px rgba(201,162,39,.34);

  /* -- layout ------------------------------------------------------------ */
  --sidebar-w:264px;
  --sidebar-w-collapsed:76px;
  --topbar-h:60px;
  --content-max:1680px;

  /* -- motion ------------------------------------------------------------ */
  --t-fast:150ms; --t-base:250ms; --t-slow:400ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   02. DESIGN TOKENS — DARK
   ========================================================================== */
[data-theme="dark"]{
  --bg:#0E1113;
  --surface:#171B1E;
  --surface-2:#1E2326;
  --surface-3:#262B2F;
  --surface-inverse:#F1F3F5;
  --line:#2B3135;
  --line-strong:#3B4348;
  --sidebar-bg:#0F1214;
  --sidebar-fg:#9BA3AA;
  --sidebar-fg-active:#FFFFFF;
  --sidebar-hover:rgba(255,255,255,.06);
  --sidebar-active:rgba(201,162,39,.22);

  --ink-900:#F2F4F5; --ink-800:#E2E6E9; --ink-700:#C7CCD1; --ink-600:#AEB5BB;
  --ink-500:#9AA2A9; --ink-400:#8B939A; --ink-300:#5E666C; --ink-200:#3B4348;
  --ink-100:#2B3135; --ink-50:#1E2326;

  --brand-50:#241E0C; --brand-100:#332A11; --brand-300:#8A711B;
  --brand-500:#D8B23A; --brand-600:#E0BE5A; --brand-700:#EACE83;
  --violet-100:#231F33; --violet-400:#9C90D6; --violet-500:#8B7FC4; --violet-600:#B2A6E2;
  --gold-100:#2C2410; --gold-500:#D8B23A; --gold-700:#E3C463;

  --success-50:#0F2A21;  --success-100:#154034; --success-500:#3FBF90; --success-600:#4FCC9D; --success-700:#7EDCB8;
  --danger-50:#2E1614;   --danger-100:#48201C;  --danger-500:#F07268; --danger-600:#F4877E;  --danger-700:#F8A9A2;
  --warning-50:#2C2110;  --warning-100:#43331A; --warning-500:#E0A040; --warning-600:#EDB55F; --warning-700:#F3C983;
  --info-50:#101F33;     --info-100:#18304F;    --info-500:#5A9BE8;   --info-600:#7DB2EF;    --info-700:#A5CCF5;
  --muted-50:#1E2338;    --muted-500:#8B93AE;   --muted-600:#9AA2BC;

  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 16px 48px rgba(0,0,0,.55);
  --shadow-focus:0 0 0 3px rgba(201,162,39,.38);

  /* The brass fill is identical in both themes and always carries near-black
     text; the semantic fills stay dark so their white text clears AA. */
  --brand-solid:#C9A227;   --brand-solid-hover:#DCB63C; --brand-on-solid:#16191C;
  --success-solid:#0C6B49; --success-solid-hover:#095339;
  --danger-solid:#B32218;  --danger-solid-hover:#8E1B13;
  --warning-solid:#8A4C00; --warning-solid-hover:#6B3B00;

  color-scheme:dark;
}

/* ==========================================================================
   03. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-800);
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}

h1,h2,h3,h4,h5,h6{margin:0 0 var(--sp-2);color:var(--ink-900);font-weight:600;line-height:var(--lh-tight);}
h1{font-size:var(--fs-2xl);font-weight:700;}
h2{font-size:var(--fs-xl);}
h3{font-size:var(--fs-lg);}
h4{font-size:var(--fs-md);}
h5,h6{font-size:var(--fs-base);}
p{margin:0 0 var(--sp-3);}
p:last-child{margin-bottom:0;}
small,.small{font-size:var(--fs-xs);}

a{color:var(--brand-600);text-decoration:none;transition:color var(--t-fast) var(--ease-out);}
a:hover{color:var(--brand-700);text-decoration:underline;text-underline-offset:2px;}

hr{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0;opacity:1;}

img,svg,video{max-width:100%;height:auto;display:block;}

code,kbd,.mono{font-family:var(--font-mono);font-size:.9em;}
kbd{background:var(--surface-3);border:1px solid var(--line-strong);border-block-end-width:2px;
  border-radius:var(--radius-sm);padding:1px 6px;font-size:var(--fs-2xs);color:var(--ink-700);}

::selection{background:var(--brand-100);color:var(--brand-800);}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--ink-200) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--ink-200);border-radius:var(--radius-pill);border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--ink-300);background-clip:content-box;}

/* ==========================================================================
   04. ACCESSIBILITY
   ========================================================================== */
:focus{outline:none;}
:focus-visible{outline:3px solid var(--brand-500);outline-offset:2px;border-radius:var(--radius-sm);}
[data-theme="dark"] :focus-visible{outline-color:var(--brand-600);}

.visually-hidden,.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;inset-block-start:-100px;inset-inline-start:var(--sp-4);z-index:2000;
  background:var(--brand-solid);color:var(--brand-on-solid);padding:.65rem 1.1rem;border-radius:0 0 var(--radius-md) var(--radius-md);
  font-weight:600;box-shadow:var(--shadow-md);transition:inset-block-start var(--t-base) var(--ease-out);
}
.skip-link:focus{inset-block-start:0;color:#fff;text-decoration:none;}

@media (prefers-contrast:more){
  :root{--line:#8A90A8;--line-strong:#5C6480;}
  .badge-status{border-width:2px;}
}

/* ==========================================================================
   05. APP SHELL
   ========================================================================== */
.app{display:flex;min-height:100vh;}

/* --- Sidebar --------------------------------------------------------- */
.sidebar{
  inline-size:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:var(--sidebar-bg);
  color:var(--sidebar-fg);
  display:flex;flex-direction:column;
  position:sticky;inset-block-start:0;block-size:100vh;
  z-index:1030;
  transition:inline-size var(--t-base) var(--ease-out),flex-basis var(--t-base) var(--ease-out);
  border-inline-end:1px solid rgba(255,255,255,.06);
}
.sidebar__brand{
  display:flex;align-items:center;gap:var(--sp-3);
  block-size:var(--topbar-h);padding-inline:var(--sp-4);
  border-block-end:1px solid rgba(255,255,255,.07);flex:0 0 auto;
}
/* The client mark ships as a transparent PNG painted in --ink-900, so one
   asset serves both themes: it sits as-is on paper and light chrome, and is
   flipped to pure white wherever it lands on a dark surface. */
.sidebar__logo{
  inline-size:36px;block-size:36px;flex:0 0 auto;
  display:grid;place-items:center;
}
.sidebar__logo img{inline-size:100%;block-size:100%;object-fit:contain;display:block;}
.sidebar .sidebar__logo img,
.auth__aside .sidebar__logo img{filter:brightness(0) invert(1);}
[data-theme="dark"] .sidebar__logo img{filter:brightness(0) invert(1);}
/* A printed document keeps its paper palette, so its mark stays dark ink. */
[data-theme="dark"] .doc .sidebar__logo img{filter:none;}
.sidebar__title{display:flex;flex-direction:column;line-height:1.2;overflow:hidden;}
.sidebar__title b{color:#fff;font-size:var(--fs-base);font-weight:700;white-space:nowrap;}
.sidebar__title span{font-size:var(--fs-2xs);color:var(--sidebar-fg);white-space:nowrap;}

.sidebar__scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-3) var(--sp-2) var(--sp-4);}
.sidebar__section{
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.42);padding:var(--sp-4) var(--sp-3) var(--sp-2);
}
.nav-item{margin-block-end:2px;}
.nav-link-x{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:.58rem var(--sp-3);border-radius:var(--radius-md);
  color:var(--sidebar-fg);font-size:var(--fs-base);font-weight:500;
  text-decoration:none;position:relative;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.nav-link-x:hover{background:var(--sidebar-hover);color:#fff;text-decoration:none;}
.nav-link-x i{font-size:1.05rem;inline-size:1.3rem;text-align:center;flex:0 0 auto;opacity:.9;}
.nav-link-x .nav-text{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-link-x.active{background:var(--sidebar-active);color:#fff;font-weight:600;}
.nav-link-x.active::before{
  content:"";position:absolute;inset-inline-start:0;inset-block:22%;
  inline-size:3px;border-radius:var(--radius-pill);background:var(--gold-500);
}
.nav-link-x .nav-badge{
  background:var(--brand-solid);color:var(--brand-on-solid);font-size:var(--fs-2xs);font-weight:700;
  min-inline-size:20px;block-size:20px;border-radius:var(--radius-pill);
  display:grid;place-items:center;padding-inline:6px;
}
.sidebar__footer{flex:0 0 auto;padding:var(--sp-3);border-block-start:1px solid rgba(255,255,255,.07);}

/* collapsed */
.app.is-collapsed .sidebar{inline-size:var(--sidebar-w-collapsed);flex-basis:var(--sidebar-w-collapsed);}
.app.is-collapsed .sidebar__title,
.app.is-collapsed .sidebar__section,
.app.is-collapsed .nav-text,
.app.is-collapsed .nav-badge,
.app.is-collapsed .sidebar__footer .btn span{display:none;}
.app.is-collapsed .nav-link-x{justify-content:center;padding-inline:0;}
.app.is-collapsed .sidebar__brand{justify-content:center;padding-inline:0;}

/* --- Main ------------------------------------------------------------- */
.main{flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;}

.topbar{
  block-size:var(--topbar-h);flex:0 0 auto;
  background:var(--surface);border-block-end:1px solid var(--line);
  display:flex;align-items:center;gap:var(--sp-3);
  padding-inline:var(--sp-5);position:sticky;inset-block-start:0;z-index:1020;
}
.topbar__toggle{
  border:0;background:transparent;color:var(--ink-600);inline-size:38px;block-size:38px;
  border-radius:var(--radius-md);display:grid;place-items:center;font-size:1.15rem;
  transition:background var(--t-fast);flex:0 0 auto;
}
.topbar__toggle:hover{background:var(--surface-3);color:var(--ink-900);}
.topbar__search{position:relative;flex:1 1 320px;max-inline-size:420px;}
.topbar__search i{
  position:absolute;inset-inline-start:.75rem;inset-block-start:50%;transform:translateY(-50%);
  color:var(--ink-400);font-size:.95rem;pointer-events:none;
}
.topbar__search input{
  inline-size:100%;block-size:38px;border:1px solid var(--line);background:var(--surface-2);
  border-radius:var(--radius-pill);padding-inline:2.35rem .9rem;font-size:var(--fs-base);
  color:var(--ink-800);transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.topbar__search input::placeholder{color:var(--ink-400);}
.topbar__search input:focus{background:var(--surface);border-color:var(--brand-400);box-shadow:var(--shadow-focus);outline:none;}
.topbar__spacer{flex:1 1 auto;}
.topbar__actions{display:flex;align-items:center;gap:var(--sp-1);flex:0 0 auto;}
.icon-btn{
  position:relative;border:0;background:transparent;color:var(--ink-600);
  inline-size:38px;block-size:38px;border-radius:var(--radius-md);
  display:grid;place-items:center;font-size:1.05rem;transition:background var(--t-fast),color var(--t-fast);
}
.icon-btn:hover{background:var(--surface-3);color:var(--ink-900);}
.icon-btn .dot{
  position:absolute;inset-block-start:7px;inset-inline-end:7px;
  inline-size:8px;block-size:8px;border-radius:50%;background:var(--brand-solid);
  border:2px solid var(--surface);
}
.icon-btn .count{
  position:absolute;inset-block-start:2px;inset-inline-end:2px;
  min-inline-size:17px;block-size:17px;padding-inline:4px;border-radius:var(--radius-pill);
  background:var(--brand-solid);color:var(--brand-on-solid);font-size:9px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--surface);
}
.topbar__user{
  display:flex;align-items:center;gap:var(--sp-2);padding:4px 6px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:var(--surface-2);transition:background var(--t-fast);
}
.topbar__user:hover{background:var(--surface-3);}
.topbar__user .avatar{inline-size:30px;block-size:30px;font-size:var(--fs-xs);}
.topbar__user .meta{display:flex;flex-direction:column;line-height:1.15;text-align:start;}
.topbar__user .meta b{font-size:var(--fs-sm);color:var(--ink-900);font-weight:600;}
.topbar__user .meta span{font-size:var(--fs-2xs);color:var(--ink-500);}

.avatar{
  inline-size:36px;block-size:36px;border-radius:50%;flex:0 0 auto;
  background:var(--grad-avatar);color:#fff;font-weight:600;font-size:var(--fs-sm);
  display:grid;place-items:center;text-transform:uppercase;
}
.avatar--sm{inline-size:28px;block-size:28px;font-size:var(--fs-2xs);}
.avatar--lg{inline-size:64px;block-size:64px;font-size:var(--fs-xl);}

/* rates ticker */
.ticker{
  background:var(--surface);border-block-end:1px solid var(--line);
  padding:.45rem var(--sp-5);display:flex;align-items:center;gap:var(--sp-5);
  overflow-x:auto;scrollbar-width:none;font-size:var(--fs-xs);
}
.ticker::-webkit-scrollbar{display:none;}
.ticker__label{font-weight:600;color:var(--ink-500);white-space:nowrap;flex:0 0 auto;}
.ticker__item{display:flex;align-items:center;gap:.4rem;white-space:nowrap;flex:0 0 auto;}
.ticker__item b{color:var(--ink-900);font-weight:600;}
.ticker__item .up{color:var(--success-600);}
.ticker__item .down{color:var(--danger-600);}

/* content */
.content{flex:1 1 auto;padding:var(--sp-6) var(--sp-5) var(--sp-10);inline-size:100%;max-inline-size:var(--content-max);margin-inline:auto;}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-4);margin-block-end:var(--sp-5);}
.page-head__text{flex:1 1 260px;min-inline-size:0;}
.page-head h1{margin-block-end:.15rem;}
.page-head .sub{color:var(--ink-500);font-size:var(--fs-base);margin:0;}
.page-head__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;}

.app-footer{
  padding:var(--sp-4) var(--sp-5);border-block-start:1px solid var(--line);
  color:var(--ink-400);font-size:var(--fs-xs);display:flex;flex-wrap:wrap;gap:var(--sp-3);
  justify-content:space-between;align-items:center;background:var(--surface);
}

/* ==========================================================================
   06. BUTTONS
   ========================================================================== */
.btn{
  --btn-h:40px;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  block-size:var(--btn-h);padding-inline:1rem;border-radius:var(--radius-md);
  font-family:inherit;font-size:var(--fs-base);font-weight:600;line-height:1;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast),
             color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn:disabled,.btn.disabled{opacity:.55;pointer-events:none;}
.btn i{font-size:1.02em;}
.btn-sm{--btn-h:32px;padding-inline:.7rem;font-size:var(--fs-sm);}
.btn-lg{--btn-h:48px;padding-inline:1.5rem;font-size:var(--fs-md);}
.btn-icon{inline-size:var(--btn-h);padding-inline:0;}

.btn-brand{background:var(--brand-solid);border-color:var(--brand-solid);color:var(--brand-on-solid);}
.btn-brand:hover{background:var(--brand-solid-hover);border-color:var(--brand-solid-hover);color:var(--brand-on-solid);box-shadow:0 4px 14px rgba(201,162,39,.35);}
.btn-outline-brand{background:transparent;border-color:var(--brand-300);color:var(--brand-600);}
.btn-outline-brand:hover{background:var(--brand-50);border-color:var(--brand-500);color:var(--brand-700);}
.btn-neutral{background:var(--surface);border-color:var(--line-strong);color:var(--ink-700);}
.btn-neutral:hover{background:var(--surface-3);color:var(--ink-900);border-color:var(--ink-300);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-600);}
.btn-ghost:hover{background:var(--surface-3);color:var(--ink-900);}
.btn-success{background:var(--success-solid);border-color:var(--success-solid);color:#fff;}
.btn-success:hover{background:var(--success-solid-hover);border-color:var(--success-solid-hover);color:#fff;}
.btn-danger{background:var(--danger-solid);border-color:var(--danger-solid);color:#fff;}
.btn-danger:hover{background:var(--danger-solid-hover);border-color:var(--danger-solid-hover);color:#fff;}
.btn-warning{background:var(--warning-solid);border-color:var(--warning-solid);color:#fff;}
.btn-warning:hover{background:var(--warning-solid-hover);border-color:var(--warning-solid-hover);color:#fff;}
.btn-soft-brand{background:var(--brand-50);border-color:transparent;color:var(--brand-700);}
.btn-soft-brand:hover{background:var(--brand-100);color:var(--brand-800);}
.btn-soft-success{background:var(--success-50);border-color:transparent;color:var(--success-700);}
.btn-soft-success:hover{background:var(--success-100);}
.btn-soft-danger{background:var(--danger-50);border-color:transparent;color:var(--danger-700);}
.btn-soft-danger:hover{background:var(--danger-100);}
.btn-soft-warning{background:var(--warning-50);border-color:transparent;color:var(--warning-700);}
.btn-soft-warning:hover{background:var(--warning-100);}
.btn-soft-info{background:var(--info-50);border-color:transparent;color:var(--info-700);}
.btn-soft-info:hover{background:var(--info-100);}
.btn-soft-neutral{background:var(--surface-3);border-color:transparent;color:var(--ink-700);}
.btn-soft-neutral:hover{background:var(--ink-100);color:var(--ink-900);}

.btn-group-x{display:inline-flex;background:var(--surface-3);border-radius:var(--radius-md);padding:3px;gap:2px;}
.btn-group-x .btn{--btn-h:32px;background:transparent;border:0;color:var(--ink-600);font-weight:500;}
.btn-group-x .btn.active{background:var(--surface);color:var(--ink-900);font-weight:600;box-shadow:var(--shadow-xs);}

/* ==========================================================================
   07. FORMS
   ========================================================================== */
.form-field{margin-block-end:var(--sp-4);}
.form-label{
  display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink-700);
  margin-block-end:.35rem;
}
.form-label .req{color:var(--danger-600);margin-inline-start:2px;}
.form-label .opt{color:var(--ink-400);font-weight:400;font-size:var(--fs-xs);margin-inline-start:4px;}

.form-control,.form-select{
  inline-size:100%;block-size:40px;
  border:1px solid var(--line-strong);border-radius:var(--radius-md);
  background:var(--surface);color:var(--ink-900);
  padding-inline:.75rem;font-family:inherit;font-size:var(--fs-base);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
textarea.form-control{block-size:auto;min-block-size:88px;padding-block:.6rem;resize:vertical;line-height:var(--lh-base);}
.form-control::placeholder{color:var(--ink-400);}
.form-control:hover,.form-select:hover{border-color:var(--ink-300);}
.form-control:focus,.form-select:focus{
  border-color:var(--brand-500);box-shadow:var(--shadow-focus);outline:none;background:var(--surface);
}
.form-control:disabled,.form-select:disabled,.form-control[readonly]{
  background:var(--surface-3);color:var(--ink-500);cursor:not-allowed;
}
.form-select{
  padding-inline-end:2.1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%237C849F' d='M8 11.2 3.2 6.4l1.1-1.1L8 9l3.7-3.7 1.1 1.1z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left .7rem center;background-size:16px;
  appearance:none;-webkit-appearance:none;
}
.form-control-lg{block-size:48px;font-size:var(--fs-md);}
.form-control-sm{block-size:32px;font-size:var(--fs-sm);padding-inline:.55rem;}
.form-hint{display:block;font-size:var(--fs-xs);color:var(--ink-500);margin-block-start:.3rem;}
.form-error{display:block;font-size:var(--fs-xs);color:var(--danger-600);margin-block-start:.3rem;font-weight:500;}
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--danger-500);}
.form-control.is-invalid:focus{box-shadow:0 0 0 3px rgba(219,50,38,.22);}
.form-control.is-valid{border-color:var(--success-500);}

.input-group{display:flex;}
.input-group>.form-control,.input-group>.form-select{border-radius:0;flex:1 1 auto;min-inline-size:0;}
.input-group>:first-child{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md);}
.input-group>:last-child{border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md);}
.input-group>*+*{margin-inline-start:-1px;}
.input-group .input-addon{
  display:flex;align-items:center;padding-inline:.75rem;background:var(--surface-3);
  border:1px solid var(--line-strong);color:var(--ink-600);font-size:var(--fs-sm);font-weight:600;
  white-space:nowrap;
}
.input-group .form-select{flex:0 0 auto;inline-size:auto;min-inline-size:96px;}
.input-group>.form-control:focus,.input-group>.form-select:focus{position:relative;z-index:2;}

.form-check-x{display:flex;align-items:flex-start;gap:.55rem;margin-block-end:.5rem;}
.form-check-x input[type="checkbox"],.form-check-x input[type="radio"]{
  inline-size:18px;block-size:18px;margin:1px 0 0;accent-color:var(--brand-solid);flex:0 0 auto;cursor:pointer;
}
.form-check-x label{font-size:var(--fs-base);color:var(--ink-700);cursor:pointer;line-height:1.4;}

.switch{position:relative;display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;}
.switch input{position:absolute;opacity:0;inline-size:0;block-size:0;}
.switch .track{
  inline-size:40px;block-size:22px;border-radius:var(--radius-pill);background:var(--ink-200);
  position:relative;transition:background var(--t-fast) var(--ease-out);flex:0 0 auto;
}
.switch .track::after{
  content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;
  inline-size:16px;block-size:16px;border-radius:50%;background:#fff;
  transition:transform var(--t-fast) var(--ease-out);box-shadow:var(--shadow-xs);
}
.switch input:checked+.track{background:var(--brand-solid);}
.switch input:checked+.track::after{transform:translateX(-18px);}
.switch input:focus-visible+.track{box-shadow:var(--shadow-focus);}

fieldset{border:0;padding:0;margin:0 0 var(--sp-6);}
legend{
  font-size:var(--fs-sm);font-weight:700;color:var(--ink-900);padding:0;margin-block-end:var(--sp-3);
  display:flex;align-items:center;gap:.5rem;inline-size:100%;
}
legend::after{content:"";flex:1 1 auto;block-size:1px;background:var(--line);}
legend .num{
  inline-size:22px;block-size:22px;border-radius:var(--radius-sm);background:var(--grad-brand);
  color:var(--brand-on-solid);font-size:var(--fs-2xs);display:grid;place-items:center;flex:0 0 auto;
}

.form-actions{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:flex-end;
  padding-block-start:var(--sp-4);border-block-start:1px solid var(--line);margin-block-start:var(--sp-2);
}
.form-sticky-bar{
  position:sticky;inset-block-end:0;z-index:15;background:var(--surface);
  border-block-start:1px solid var(--line);box-shadow:0 -4px 16px rgba(17,21,40,.06);
  padding:var(--sp-3) var(--sp-5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
  margin:var(--sp-5) calc(var(--sp-5)*-1) calc(var(--sp-5)*-1);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}

/* file / dropzone */
.dropzone{
  border:2px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--surface-2);
  padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--ink-500);
  transition:border-color var(--t-fast),background var(--t-fast);cursor:pointer;
}
.dropzone:hover,.dropzone.is-dragover{border-color:var(--brand-400);background:var(--brand-50);color:var(--brand-700);}
.dropzone i{font-size:1.9rem;display:block;margin-block-end:.5rem;opacity:.7;}
.dropzone strong{display:block;color:var(--ink-800);font-size:var(--fs-base);}

/* ==========================================================================
   08. CARDS
   ========================================================================== */
.card-x{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);overflow:hidden;
  display:flex;flex-direction:column;block-size:100%;
}
/* block-size:100% above lets a lone card fill its column or grid cell so it
   matches a taller neighbour (equal-height rows). But when several cards share one
   container — a .stack, or two cards stacked in the same column — each one tries to
   fill the whole container, which inflates short cards and leaves large blank gaps
   (and pushes the siblings past the fold). A card that has siblings must size to
   its own content; only a truly lone card keeps the equal-height stretch. */
.card-x:not(:only-child){block-size:auto;}
.card-x__head{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-block-end:1px solid var(--line);
}
.card-x__head h2,.card-x__head h3{margin:0;font-size:var(--fs-md);font-weight:600;}
.card-x__head .sub{font-size:var(--fs-xs);color:var(--ink-500);margin:0;}
.card-x__head-text{flex:1 1 auto;min-inline-size:0;}
.card-x__body{padding:var(--sp-5);flex:1 1 auto;}
.card-x__body--flush{padding:0;}
.card-x__foot{
  padding:var(--sp-3) var(--sp-5);border-block-start:1px solid var(--line);
  background:var(--surface-2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
}

/* stat card */
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-xs);position:relative;overflow:hidden;
  block-size:100%;transition:box-shadow var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);
}
.stat:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.stat__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-block-end:var(--sp-3);}
.stat__label{font-size:var(--fs-xs);color:var(--ink-500);font-weight:500;margin:0;}
.stat__icon{
  inline-size:38px;block-size:38px;border-radius:var(--radius-md);display:grid;place-items:center;
  font-size:1.1rem;flex:0 0 auto;
}
.stat__icon--brand{background:var(--brand-50);color:var(--brand-600);}
.stat__icon--success{background:var(--success-50);color:var(--success-600);}
.stat__icon--danger{background:var(--danger-50);color:var(--danger-600);}
.stat__icon--warning{background:var(--warning-50);color:var(--warning-600);}
.stat__icon--info{background:var(--info-50);color:var(--info-600);}
.stat__icon--violet{background:var(--violet-100);color:var(--violet-600);}
.stat__value{
  font-size:var(--fs-3xl);font-weight:700;color:var(--ink-900);line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:0;
}
.stat__value small{font-size:var(--fs-md);font-weight:600;color:var(--ink-500);margin-inline-start:.25rem;}
.stat__foot{display:flex;align-items:center;gap:.4rem;margin-block-start:var(--sp-2);font-size:var(--fs-xs);}
.trend{display:inline-flex;align-items:center;gap:.2rem;font-weight:600;}
.trend--up{color:var(--success-600);}
.trend--down{color:var(--danger-600);}
.trend--flat{color:var(--ink-400);}
.stat__note{color:var(--ink-400);}

/* balance card */
.balance-card{
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
  padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);block-size:100%;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.balance-card:hover{border-color:var(--brand-300);box-shadow:var(--shadow-sm);}
.balance-card__cur{display:flex;align-items:center;gap:.5rem;}
.balance-card__amt{font-size:var(--fs-xl);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-900);line-height:1.15;}
.balance-card__amt.is-neg{color:var(--danger-600);}
.balance-card__meta{font-size:var(--fs-xs);color:var(--ink-500);}

/* section title */
.section-title{
  display:flex;align-items:center;gap:var(--sp-3);margin-block:var(--sp-6) var(--sp-4);
}
.section-title h2{margin:0;font-size:var(--fs-lg);white-space:nowrap;}
.section-title::after{content:"";flex:1 1 auto;block-size:1px;background:var(--line);}

/* ==========================================================================
   09. TABLES
   ========================================================================== */
.table-wrap{inline-size:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-x{inline-size:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);}
.table-x caption{
  caption-side:top;text-align:start;padding:0 var(--sp-5) var(--sp-3);
  font-size:var(--fs-xs);color:var(--ink-500);
}
.table-x thead th{
  position:sticky;inset-block-start:0;z-index:2;
  background:var(--surface-2);color:var(--ink-600);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  text-align:start;padding:.7rem var(--sp-4);white-space:nowrap;
  border-block-end:1px solid var(--line);
}
.table-x tbody td{
  padding:.6rem var(--sp-4);border-block-end:1px solid var(--line);
  color:var(--ink-700);vertical-align:middle;block-size:44px;
}
.table-x tbody tr{transition:background var(--t-fast);}
.table-x tbody tr:hover{background:var(--surface-2);}
.table-x tbody tr:last-child td{border-block-end:0;}
.table-x--zebra tbody tr:nth-child(even){background:var(--surface-2);}
.table-x--zebra tbody tr:nth-child(even):hover{background:var(--surface-3);}
.table-x .num,.table-x .amount{
  text-align:end;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-900);white-space:nowrap;
}
.table-x .amount--credit{color:var(--credit);}
.table-x .amount--debit{color:var(--danger-600);}
.table-x .col-actions{text-align:end;white-space:nowrap;inline-size:1%;}
.table-x tbody tr.is-reversed td{color:var(--ink-400);background:var(--warning-50);}
.table-x tbody tr.is-reversed .cell-main{text-decoration:line-through;}
.table-x tbody tr.is-selected{background:var(--brand-50);}
.table-x th.sortable{cursor:pointer;user-select:none;}
.table-x th.sortable:hover{color:var(--ink-900);}
.table-x th.sortable::after{content:"\F282";font-family:bootstrap-icons;opacity:.32;margin-inline-start:.35rem;font-size:.8em;}
.table-x th.sortable[aria-sort="ascending"]::after{content:"\F235";opacity:1;color:var(--brand-600);}
.table-x th.sortable[aria-sort="descending"]::after{content:"\F229";opacity:1;color:var(--brand-600);}
.table-x tfoot td{
  padding:.7rem var(--sp-4);background:var(--surface-2);font-weight:700;color:var(--ink-900);
  border-block-start:2px solid var(--line-strong);
}
.cell-main{display:block;color:var(--ink-900);font-weight:600;}
/* A name or number that navigates somewhere must look like it does — the
   brand colour is the only signal a dense table has room for. */
a.cell-main{color:var(--brand-600);}
a.cell-main:hover{color:var(--brand-700);text-decoration:underline;text-underline-offset:2px;}
.cell-sub{display:block;font-size:var(--fs-2xs);color:var(--ink-500);margin-block-start:1px;}
.cell-user{display:flex;align-items:center;gap:.55rem;}

/* toolbar above tables */
.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);border-block-end:1px solid var(--line);background:var(--surface);
}
.toolbar__search{position:relative;flex:1 1 220px;max-inline-size:320px;}
.toolbar__search i{position:absolute;inset-inline-start:.7rem;inset-block-start:50%;transform:translateY(-50%);color:var(--ink-400);font-size:.9rem;}
.toolbar__search input{block-size:36px;padding-inline-start:2.1rem;}
.toolbar__spacer{flex:1 1 auto;}
.filter-chip{
  display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .6rem;
  background:var(--brand-50);color:var(--brand-700);border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:600;border:1px solid var(--brand-100);
}
.filter-chip button{border:0;background:transparent;color:inherit;padding:0;line-height:1;cursor:pointer;opacity:.7;}
.filter-chip button:hover{opacity:1;}
.filter-bar{
  display:grid;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  background:var(--surface-2);border-block-end:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end;
}
.filter-bar .form-field{margin:0;}

.bulkbar{
  position:sticky;inset-block-end:var(--sp-4);z-index:12;margin:var(--sp-3) auto 0;
  inline-size:fit-content;max-inline-size:100%;
  background:var(--ink-900);color:#fff;border-radius:var(--radius-pill);
  padding:.5rem .75rem .5rem 1.1rem;display:flex;align-items:center;gap:var(--sp-3);
  box-shadow:var(--shadow-lg);font-size:var(--fs-sm);
}
[data-theme="dark"] .bulkbar{background:var(--surface-3);border:1px solid var(--line-strong);}

/* ==========================================================================
   10. BADGES / STATUS
   ========================================================================== */
.badge-status{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.2rem .55rem;border-radius:var(--radius-pill);
  font-size:var(--fs-2xs);font-weight:600;line-height:1.5;white-space:nowrap;
  border:1px solid transparent;
}
.badge-status .dot{inline-size:6px;block-size:6px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.badge-status i{font-size:.9em;}
.bs-success{background:var(--success-50);color:var(--success-700);border-color:var(--success-100);}
.bs-danger{background:var(--danger-50);color:var(--danger-700);border-color:var(--danger-100);}
.bs-warning{background:var(--warning-50);color:var(--warning-700);border-color:var(--warning-100);}
.bs-info{background:var(--info-50);color:var(--info-700);border-color:var(--info-100);}
.bs-brand{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100);}
.bs-violet{background:var(--violet-100);color:var(--violet-600);border-color:var(--violet-100);}
.bs-gold{background:var(--gold-100);color:var(--gold-700);border-color:var(--gold-100);}
.bs-muted{background:var(--muted-50);color:var(--muted-600);border-color:var(--line);}

.tag{
  display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .5rem;
  border-radius:var(--radius-sm);background:var(--surface-3);color:var(--ink-600);
  font-size:var(--fs-2xs);font-weight:600;
}

/* ==========================================================================
   11. DOMAIN COMPONENTS
   ========================================================================== */
.money{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
.money--pos,.money--credit{color:var(--credit);}
.money--neg,.money--debit{color:var(--debit);}
.money__cur{font-size:.8em;font-weight:500;color:var(--ink-400);margin-inline-start:.2rem;}

.cur-chip{
  display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:var(--fs-xs);
  color:var(--ink-700);background:var(--surface-3);border-radius:var(--radius-sm);padding:.15rem .45rem;
}
.cur-chip .sym{
  inline-size:18px;block-size:18px;border-radius:50%;background:var(--ink-100);color:var(--ink-700);
  display:grid;place-items:center;font-size:10px;font-weight:700;
}
.cur-chip--usd .sym{background:#DDEFE5;color:#0E7C55;}
.cur-chip--ils .sym{background:#DCE8F8;color:#1A56A8;}
.cur-chip--jod .sym{background:#F6E4DC;color:#9A4A21;}
.cur-chip--eur .sym{background:#E4E1F8;color:#4C3AA8;}
.cur-chip--usdt .sym{background:#D6F0EA;color:#0B7C6B;}
[data-theme="dark"] .cur-chip .sym{filter:brightness(.85);}

/* rate tile */
.rate-tile{
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
  padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);block-size:100%;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.rate-tile:hover{border-color:var(--brand-300);box-shadow:var(--shadow-sm);}
.rate-tile__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);}
.rate-tile__code{font-size:var(--fs-md);font-weight:700;color:var(--ink-900);}
.rate-tile__name{font-size:var(--fs-2xs);color:var(--ink-500);}
.rate-tile__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);}
.rate-tile__cell{background:var(--surface-2);border-radius:var(--radius-md);padding:.5rem .6rem;}
.rate-tile__cell span{display:block;font-size:var(--fs-2xs);color:var(--ink-500);margin-block-end:1px;}
.rate-tile__cell b{font-size:var(--fs-md);font-variant-numeric:tabular-nums;font-weight:700;}
.rate-tile__cell--buy b{color:var(--buy);}
.rate-tile__cell--sell b{color:var(--sell);}

/* timeline */
.timeline{list-style:none;margin:0;padding:0;position:relative;}
.timeline::before{
  content:"";position:absolute;inset-block:8px 8px;inset-inline-start:11px;
  inline-size:2px;background:var(--line);
}
.timeline li{position:relative;padding-inline-start:2.25rem;padding-block-end:var(--sp-5);}
.timeline li:last-child{padding-block-end:0;}
.timeline__dot{
  position:absolute;inset-inline-start:0;inset-block-start:2px;
  inline-size:24px;block-size:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:2px solid var(--line);color:var(--ink-400);font-size:.7rem;z-index:1;
}
.timeline li.is-done .timeline__dot{background:var(--success-solid);border-color:var(--success-solid);color:#fff;}
.timeline li.is-current .timeline__dot{background:var(--brand-solid);border-color:var(--brand-solid);color:var(--brand-on-solid);box-shadow:0 0 0 4px var(--brand-50);}
.timeline li.is-error .timeline__dot{background:var(--danger-solid);border-color:var(--danger-solid);color:#fff;}
.timeline__title{font-weight:600;color:var(--ink-900);font-size:var(--fs-base);}
.timeline__meta{font-size:var(--fs-xs);color:var(--ink-500);margin-block-start:.15rem;}
.timeline__body{font-size:var(--fs-sm);color:var(--ink-600);margin-block-start:.35rem;}

/* variance meter */
.variance{display:flex;flex-direction:column;gap:.4rem;}
.variance__bar{block-size:8px;border-radius:var(--radius-pill);background:var(--surface-3);overflow:hidden;position:relative;}
.variance__fill{block-size:100%;border-radius:var(--radius-pill);transition:inline-size var(--t-slow) var(--ease-out);}
.variance__fill--ok{background:var(--success-500);}
.variance__fill--warn{background:var(--warning-500);}
.variance__fill--bad{background:var(--danger-500);}
.variance__legend{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--ink-500);}

/* comparison row (expected vs actual) */
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp-3);align-items:center;}
.compare__box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--sp-3);text-align:center;}
.compare__box span{display:block;font-size:var(--fs-2xs);color:var(--ink-500);margin-block-end:.2rem;}
.compare__box b{font-size:var(--fs-lg);font-variant-numeric:tabular-nums;color:var(--ink-900);}
.compare__vs{color:var(--ink-300);font-size:1.1rem;}

/* ledger entry preview */
.entry-preview{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;}
.entry-preview table{inline-size:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.entry-preview th{background:var(--surface-2);padding:.5rem .75rem;font-size:var(--fs-2xs);
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500);text-align:start;font-weight:700;}
.entry-preview td{padding:.5rem .75rem;border-block-start:1px solid var(--line);}
.entry-preview .num{text-align:end;font-variant-numeric:tabular-nums;font-weight:600;}
.entry-preview tfoot td{background:var(--surface-2);font-weight:700;border-block-start:2px solid var(--line-strong);}

/* permission matrix */
.matrix-wrap{overflow:auto;max-block-size:70vh;border:1px solid var(--line);border-radius:var(--radius-md);}
.matrix{inline-size:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);}
.matrix thead th{
  position:sticky;inset-block-start:0;z-index:3;background:var(--surface-2);
  padding:.6rem .75rem;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-600);font-weight:700;border-block-end:1px solid var(--line);text-align:center;white-space:nowrap;
}
.matrix tbody th{
  position:sticky;inset-inline-start:0;z-index:2;background:var(--surface);
  text-align:start;font-weight:500;color:var(--ink-700);padding:.5rem .75rem;
  border-block-end:1px solid var(--line);border-inline-end:1px solid var(--line);white-space:nowrap;
}
.matrix thead th:first-child{z-index:4;inset-inline-start:0;text-align:start;}
.matrix td{padding:.4rem;text-align:center;border-block-end:1px solid var(--line);}
.matrix tbody tr:hover th,.matrix tbody tr:hover td{background:var(--surface-2);}
.matrix .group-row th{background:var(--surface-3);font-weight:700;color:var(--ink-900);
  text-transform:uppercase;font-size:var(--fs-2xs);letter-spacing:.04em;}
.matrix input[type=checkbox]{inline-size:17px;block-size:17px;accent-color:var(--brand-solid);cursor:pointer;}

/* denomination grid */
.denoms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3);}
.denom{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--sp-3);background:var(--surface);}
.denom__label{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--ink-500);margin-block-end:.35rem;}
.denom__label b{color:var(--ink-900);font-size:var(--fs-sm);}
.denom input{block-size:34px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;}
.denom__total{text-align:end;font-size:var(--fs-xs);color:var(--ink-600);margin-block-start:.35rem;font-variant-numeric:tabular-nums;}

/* audit chain */
.chain{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;}
.chain__node{
  inline-size:10px;block-size:10px;border-radius:2px;background:var(--success-500);flex:0 0 auto;
}
.chain__node--broken{background:var(--danger-500);}
.hash{
  font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-400);
  max-inline-size:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;
  vertical-align:middle;direction:ltr;
}

/* KPI mini list */
.kpi-list{display:flex;flex-direction:column;gap:0;}
.kpi-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:.6rem 0;border-block-end:1px solid var(--line);font-size:var(--fs-sm);}
.kpi-row:last-child{border-block-end:0;}
.kpi-row span{color:var(--ink-600);}
.kpi-row b{font-variant-numeric:tabular-nums;color:var(--ink-900);font-weight:600;}

/* quick action tiles */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-3);}
.qa{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  padding:var(--sp-4) var(--sp-3);border-radius:var(--radius-lg);border:1px solid var(--line);
  background:var(--surface);color:var(--ink-700);text-align:center;font-weight:600;font-size:var(--fs-sm);
  min-block-size:96px;transition:all var(--t-fast) var(--ease-out);text-decoration:none;
}
.qa:hover{border-color:var(--brand-300);background:var(--brand-50);color:var(--brand-700);
  transform:translateY(-2px);box-shadow:var(--shadow-sm);text-decoration:none;}
.qa i{font-size:1.5rem;color:var(--brand-600);}

/* progress */
.progress-x{block-size:6px;border-radius:var(--radius-pill);background:var(--surface-3);overflow:hidden;}
.progress-x__bar{block-size:100%;background:var(--grad-brand);border-radius:var(--radius-pill);
  transition:inline-size var(--t-slow) var(--ease-out);}

/* ==========================================================================
   12. NAVIGATION AIDS
   ========================================================================== */
.breadcrumb-x{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font-size:var(--fs-xs);color:var(--ink-500);margin-block-end:var(--sp-3);padding:0;list-style:none;
}
.breadcrumb-x li{display:flex;align-items:center;gap:.4rem;}
.breadcrumb-x li+li::before{content:"\F285";font-family:bootstrap-icons;font-size:.72em;color:var(--ink-300);}
[dir="rtl"] .breadcrumb-x li+li::before{content:"\F284";}
.breadcrumb-x a{color:var(--ink-500);}
.breadcrumb-x a:hover{color:var(--brand-600);}
.breadcrumb-x [aria-current]{color:var(--ink-800);font-weight:600;}

.tabs-x{
  display:flex;gap:var(--sp-1);border-block-end:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;margin-block-end:var(--sp-5);
}
.tabs-x::-webkit-scrollbar{display:none;}
.tabs-x button,.tabs-x a{
  border:0;background:transparent;padding:.65rem var(--sp-4);
  color:var(--ink-500);font-size:var(--fs-base);font-weight:600;white-space:nowrap;cursor:pointer;
  border-block-end:2px solid transparent;margin-block-end:-1px;
  transition:color var(--t-fast),border-color var(--t-fast);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
}
.tabs-x button:hover,.tabs-x a:hover{color:var(--ink-800);text-decoration:none;}
.tabs-x button.active,.tabs-x a.active{color:var(--brand-600);border-block-end-color:var(--brand-600);}
.tabs-x .count{background:var(--surface-3);color:var(--ink-600);border-radius:var(--radius-pill);
  padding:0 .4rem;font-size:var(--fs-2xs);font-weight:700;}

.pagination-x{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);border-block-start:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-500);
}
.pagination-x__pages{display:flex;gap:.25rem;align-items:center;}
.pagination-x__pages button{
  min-inline-size:32px;block-size:32px;border-radius:var(--radius-md);border:1px solid transparent;
  background:transparent;color:var(--ink-600);font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);padding-inline:.4rem;
}
.pagination-x__pages button:hover{background:var(--surface-3);color:var(--ink-900);}
.pagination-x__pages button.active{background:var(--brand-solid);color:var(--brand-on-solid);}
.pagination-x__pages button:disabled{opacity:.4;pointer-events:none;}
[dir="rtl"] .pagination-x__pages .bi-chevron-left::before{content:"\F285";}
[dir="rtl"] .pagination-x__pages .bi-chevron-right::before{content:"\F284";}

/* stepper */
.stepper{display:flex;gap:0;margin-block-end:var(--sp-6);overflow-x:auto;scrollbar-width:none;}
.stepper::-webkit-scrollbar{display:none;}
.stepper__item{display:flex;align-items:center;gap:.6rem;flex:1 1 0;min-inline-size:150px;position:relative;padding-block:var(--sp-2);}
.stepper__item::after{
  content:"";position:absolute;inset-block-start:calc(var(--sp-2) + 15px);
  inset-inline-start:calc(30px + .6rem);inset-inline-end:0;block-size:2px;background:var(--line);z-index:0;
}
.stepper__item:last-child::after{display:none;}
.stepper__num{
  inline-size:30px;block-size:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--surface-3);color:var(--ink-500);font-weight:700;font-size:var(--fs-sm);
  border:2px solid var(--surface-3);z-index:1;
}
.stepper__item.is-active .stepper__num{background:var(--brand-solid);border-color:var(--brand-solid);color:var(--brand-on-solid);}
.stepper__item.is-done .stepper__num{background:var(--success-solid);border-color:var(--success-solid);color:#fff;}
.stepper__label{display:flex;flex-direction:column;line-height:1.25;z-index:1;background:var(--bg);padding-inline-end:.5rem;}
.stepper__label b{font-size:var(--fs-sm);color:var(--ink-800);font-weight:600;}
.stepper__label span{font-size:var(--fs-2xs);color:var(--ink-500);}
.stepper__item.is-active .stepper__label b{color:var(--brand-600);}

/* ==========================================================================
   13. FEEDBACK
   ========================================================================== */
.alert-x{
  display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);
  border:1px solid transparent;font-size:var(--fs-sm);align-items:flex-start;margin-block-end:var(--sp-4);
}
.alert-x i{font-size:1.05rem;flex:0 0 auto;margin-block-start:1px;}
.alert-x b{display:block;margin-block-end:.15rem;}
.alert-x p{margin:0;}
.alert-info-x{background:var(--info-50);border-color:var(--info-100);color:var(--info-700);}
.alert-success-x{background:var(--success-50);border-color:var(--success-100);color:var(--success-700);}
.alert-warning-x{background:var(--warning-50);border-color:var(--warning-100);color:var(--warning-700);}
.alert-danger-x{background:var(--danger-50);border-color:var(--danger-100);color:var(--danger-700);}
.alert-brand-x{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-700);}

.rule-note,
b.rule-note{
  display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-2xs);font-weight:600;
  color:var(--violet-600);background:var(--violet-100);border-radius:var(--radius-sm);padding:.1rem .4rem;
}

.empty{
  text-align:center;padding:var(--sp-12) var(--sp-5);color:var(--ink-500);
}
.empty__icon{
  inline-size:64px;block-size:64px;border-radius:var(--radius-xl);background:var(--surface-3);
  display:grid;place-items:center;margin:0 auto var(--sp-4);font-size:1.7rem;color:var(--ink-300);
}
.empty h3{color:var(--ink-800);font-size:var(--fs-md);margin-block-end:.35rem;}
.empty p{max-inline-size:38ch;margin-inline:auto;font-size:var(--fs-sm);}

.skeleton{
  background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);
  background-size:400% 100%;animation:skeleton 1.4s ease infinite;border-radius:var(--radius-sm);
}
@keyframes skeleton{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.skeleton-line{block-size:12px;margin-block-end:8px;}

.toast-stack{
  position:fixed;inset-block-end:var(--sp-5);inset-inline-end:var(--sp-5);z-index:1080;
  display:flex;flex-direction:column;gap:var(--sp-2);max-inline-size:360px;
}
.toast-x{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:var(--sp-3) var(--sp-4);display:flex;gap:var(--sp-3);
  align-items:flex-start;font-size:var(--fs-sm);animation:toastIn .3s var(--ease-out);
}
@keyframes toastIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.toast-x i{font-size:1.05rem;flex:0 0 auto;}
.toast-x.is-success i{color:var(--success-600);}
.toast-x.is-danger i{color:var(--danger-600);}
.toast-x.is-warning i{color:var(--warning-600);}
.toast-x.is-info i{color:var(--info-600);}

/* modal tuning on top of Bootstrap */
.modal-content{border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-lg);}
.modal-header{border-block-end:1px solid var(--line);padding:var(--sp-4) var(--sp-5);}
.modal-title{font-size:var(--fs-lg);font-weight:700;color:var(--ink-900);}
.modal-body{padding:var(--sp-5);color:var(--ink-700);}
.modal-footer{border-block-start:1px solid var(--line);padding:var(--sp-3) var(--sp-5);gap:var(--sp-2);}
.modal-danger .modal-header{background:var(--danger-50);border-block-end-color:var(--danger-100);}
.modal-danger .modal-title{color:var(--danger-700);}

.offcanvas{background:var(--surface);color:var(--ink-800);}
.offcanvas-header{border-block-end:1px solid var(--line);}
.offcanvas.sidebar-oc{background:var(--sidebar-bg);inline-size:var(--sidebar-w);}
.offcanvas.sidebar-oc .sidebar{position:static;block-size:100%;inline-size:100%;flex-basis:auto;border:0;}

.dropdown-menu{
  border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-md);
  background:var(--surface);padding:.35rem;font-size:var(--fs-sm);min-inline-size:190px;
}
.dropdown-item{border-radius:var(--radius-sm);padding:.45rem .6rem;color:var(--ink-700);
  display:flex;align-items:center;gap:.55rem;}
.dropdown-item:hover,.dropdown-item:focus{background:var(--surface-3);color:var(--ink-900);}
.dropdown-item.text-danger{color:var(--danger-600)!important;}
.dropdown-item.text-danger:hover{background:var(--danger-50);color:var(--danger-700)!important;}
.dropdown-header{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-400);
  font-weight:700;padding:.4rem .6rem .2rem;}
.dropdown-divider{border-color:var(--line);margin:.3rem 0;}

/* notification list */
.notif{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--line);
  transition:background var(--t-fast);}
.notif:hover{background:var(--surface-2);}
.notif.is-unread{background:var(--brand-50);}
[data-theme="dark"] .notif.is-unread{background:rgba(201,162,39,.09);}
.notif__icon{inline-size:34px;block-size:34px;border-radius:var(--radius-md);display:grid;place-items:center;flex:0 0 auto;font-size:.95rem;}
.notif__body{flex:1 1 auto;min-inline-size:0;}
.notif__title{font-weight:600;color:var(--ink-900);font-size:var(--fs-sm);margin-block-end:.1rem;}
.notif__text{font-size:var(--fs-xs);color:var(--ink-600);}
.notif__time{font-size:var(--fs-2xs);color:var(--ink-400);white-space:nowrap;flex:0 0 auto;}

/* ==========================================================================
   14. AUTH
   ========================================================================== */
.auth{min-block-size:100vh;display:grid;grid-template-columns:1fr;}
@media (min-width:992px){.auth{grid-template-columns:1.05fr .95fr;}}
.auth__aside{
  display:none;position:relative;overflow:hidden;
  background:var(--sidebar-bg);color:#fff;padding:var(--sp-12) var(--sp-10);
  flex-direction:column;justify-content:space-between;
}
@media (min-width:992px){.auth__aside{display:flex;}}
.auth__aside::before{
  content:"";position:absolute;inset-block-start:-25%;inset-inline-end:-18%;
  inline-size:520px;block-size:520px;border-radius:50%;background:var(--grad-brand);
  filter:blur(90px);opacity:.4;
}
.auth__aside::after{
  content:"";position:absolute;inset-block-end:-22%;inset-inline-start:-14%;
  inline-size:400px;block-size:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,47,247,.55),transparent 70%);filter:blur(60px);
}
.auth__aside>*{position:relative;z-index:1;}
.auth__aside h2{color:#fff;font-size:var(--fs-2xl);max-inline-size:22ch;line-height:1.35;}
.auth__aside p{color:rgba(255,255,255,.72);max-inline-size:42ch;}
.auth__points{list-style:none;padding:0;margin:var(--sp-6) 0 0;display:flex;flex-direction:column;gap:var(--sp-3);}
.auth__points li{display:flex;gap:.7rem;align-items:flex-start;color:rgba(255,255,255,.85);font-size:var(--fs-base);}
.auth__points i{color:var(--brand-500);font-size:1.05rem;margin-block-start:2px;}
.auth__main{
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-8) var(--sp-5);background:var(--surface);
}
.auth__card{inline-size:100%;max-inline-size:420px;}
.auth__logo{display:flex;align-items:center;gap:var(--sp-3);margin-block-end:var(--sp-8);}
.auth__logo .sidebar__logo{inline-size:44px;block-size:44px;font-size:var(--fs-md);border-radius:12px;}
.auth__logo b{font-size:var(--fs-lg);color:var(--ink-900);display:block;line-height:1.2;}
.auth__logo span{font-size:var(--fs-xs);color:var(--ink-500);}
.otp-group{display:flex;gap:var(--sp-2);justify-content:center;direction:ltr;}
.otp-group input{
  inline-size:52px;block-size:60px;text-align:center;font-size:var(--fs-2xl);font-weight:700;
  border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);
  color:var(--ink-900);font-variant-numeric:tabular-nums;
}
.otp-group input:focus{border-color:var(--brand-500);box-shadow:var(--shadow-focus);outline:none;}
.pw-meter{display:flex;gap:4px;margin-block-start:.4rem;}
.pw-meter span{block-size:4px;flex:1 1 0;border-radius:var(--radius-pill);background:var(--surface-3);}
.pw-meter span.on-1{background:var(--danger-500);}
.pw-meter span.on-2{background:var(--warning-500);}
.pw-meter span.on-3{background:var(--success-500);}

/* ==========================================================================
   15. CHARTS
   ========================================================================== */
.chart-box{position:relative;inline-size:100%;}
.chart-box canvas{inline-size:100%!important;}
.chart-h-200{block-size:200px;}
.chart-h-260{block-size:260px;}
.chart-h-320{block-size:320px;}
.legend-x{display:flex;flex-wrap:wrap;gap:var(--sp-4);font-size:var(--fs-xs);color:var(--ink-600);margin-block-start:var(--sp-3);}
.legend-x span{display:inline-flex;align-items:center;gap:.4rem;}
.legend-x i{inline-size:10px;block-size:10px;border-radius:3px;display:inline-block;}

/* ==========================================================================
   16. MOTION
   ========================================================================== */
[data-aos]{will-change:transform,opacity;}

/* Content must never depend on JavaScript to become visible.
   Without scripting the reveal styles are neutralised outright; with scripting
   a watchdog in app.js adds .aos-failed if the library never initialises. */
html:not(.js) [data-aos],
html.aos-failed [data-aos]{opacity:1!important;transform:none!important;transition:none!important;animation:none!important;}
.hover-lift{transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);}
.hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
@keyframes pulseSoft{0%,100%{opacity:1;}50%{opacity:.55;}}
.pulse{animation:pulseSoft 2s ease-in-out infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.spin{animation:spin 1s linear infinite;display:inline-block;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-aos]{opacity:1!important;transform:none!important;}
}

/* ==========================================================================
   17. UTILITIES
   ========================================================================== */
.text-muted-x{color:var(--ink-500)!important;}
.text-ink{color:var(--ink-900)!important;}
.text-brand{color:var(--brand-600)!important;}
.text-success-x{color:var(--success-600)!important;}
.text-danger-x{color:var(--danger-600)!important;}
.text-warning-x{color:var(--warning-600)!important;}
.text-info-x{color:var(--info-600)!important;}
.bg-surface{background:var(--surface)!important;}
.bg-surface-2{background:var(--surface-2)!important;}
.bg-brand-soft{background:var(--brand-50)!important;}
.border-x{border:1px solid var(--line)!important;}
.rounded-x{border-radius:var(--radius-lg)!important;}
.shadow-x{box-shadow:var(--shadow-sm)!important;}
.tabular{font-variant-numeric:tabular-nums;}
.ltr{direction:ltr;unicode-bidi:isolate;}
.rtl{direction:rtl;unicode-bidi:isolate;}
.nowrap{white-space:nowrap;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fw-6{font-weight:600!important;}
.fs-xs-x{font-size:var(--fs-xs)!important;}
.fs-sm-x{font-size:var(--fs-sm)!important;}
.gap-x{gap:var(--sp-4);}
.stack{display:flex;flex-direction:column;gap:var(--sp-4);}
.row-x{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);}
.grid-auto{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.grid-auto-sm{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
.deferred{opacity:.6;}
.deferred::after{content:"";}

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (max-width:1200px){
  :root{--sidebar-w:236px;}
  .content{padding-inline:var(--sp-4);}
}

/* laptop and below: sidebar becomes offcanvas */
@media (max-width:991.98px){
  /* Hide only the docked shell sidebar; the offcanvas reuses .sidebar and must stay visible. */
  .app > .sidebar{display:none;}
  .topbar{padding-inline:var(--sp-4);}
  .content{padding:var(--sp-5) var(--sp-4) var(--sp-10);}
  .topbar__search{max-inline-size:none;}
}

@media (max-width:767.98px){
  :root{--fs-3xl:1.875rem;--fs-2xl:1.5rem;--topbar-h:56px;}
  .content{padding:var(--sp-4) var(--sp-3) 5.5rem;}
  .card-x__head,.card-x__body,.card-x__foot,.toolbar,.filter-bar,.pagination-x{padding-inline:var(--sp-4);}
  .topbar__search{display:none;}
  .topbar__user .meta{display:none;}
  .page-head__actions{inline-size:100%;}
  .page-head__actions .btn{flex:1 1 auto;}
  .form-sticky-bar{margin-inline:calc(var(--sp-4)*-1);padding-inline:var(--sp-4);}
  .compare{grid-template-columns:1fr;}
  .compare__vs{display:none;}
  .modal-dialog{margin:var(--sp-3);}

  /* tables become cards */
  .table-x--cards thead{display:none;}
  .table-x--cards tbody tr{
    display:grid;grid-template-columns:1fr;gap:.15rem;
    border:1px solid var(--line);border-radius:var(--radius-md);
    padding:var(--sp-3);margin-block-end:var(--sp-3);background:var(--surface);
  }
  .table-x--cards tbody tr:hover{background:var(--surface);}
  .table-x--cards tbody td{
    display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
    border:0;padding:.3rem 0;block-size:auto;min-block-size:28px;
  }
  .table-x--cards tbody td::before{
    content:attr(data-label);font-size:var(--fs-2xs);color:var(--ink-500);
    font-weight:600;text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto;
  }
  .table-x--cards tbody td:empty{display:none;}
  .table-x--cards .col-actions{justify-content:flex-end;padding-block-start:.6rem;
    border-block-start:1px solid var(--line);margin-block-start:.3rem;}
  .table-x--cards tfoot{display:none;}
  .table-x--cards .num,.table-x--cards .amount{text-align:end;}

  /* mobile action bar */
  .mobile-actions{
    position:fixed;inset-block-end:0;inset-inline:0;z-index:1035;
    background:var(--surface);border-block-start:1px solid var(--line);
    padding:.6rem var(--sp-3);display:flex;gap:var(--sp-2);
    box-shadow:0 -4px 16px rgba(17,21,40,.08);
  }
  .mobile-actions .btn{flex:1 1 0;min-block-size:44px;}
  .btn{min-block-size:44px;}
  .btn-icon{min-inline-size:44px;}
  /* 44x44 is the smallest reliable touch target on a phone. */
  .icon-btn,.topbar__toggle{inline-size:44px;block-size:44px;}
  .pagination-x__pages button{min-inline-size:40px;block-size:40px;}
}

@media (max-width:479.98px){
  .content{padding-inline:var(--sp-3);}
  .stat{padding:var(--sp-3) var(--sp-4);}
  .stat__value{font-size:var(--fs-2xl);}
  .qa-grid{grid-template-columns:repeat(2,1fr);}
  .grid-auto,.grid-auto-sm{grid-template-columns:1fr;}
  .otp-group input{inline-size:44px;block-size:52px;font-size:var(--fs-xl);}
  .denoms{grid-template-columns:1fr 1fr;}
  .auth__main{padding:var(--sp-6) var(--sp-4);}
  .form-actions .btn{flex:1 1 100%;}
}

/* ==========================================================================
   19. PRINT
   ========================================================================== */
.print-only{display:none;}

@media print{
  @page{size:A4;margin:14mm 12mm;}
  :root{--bg:#fff;--surface:#fff;--surface-2:#fff;--surface-3:#fff;--line:#c9ccd8;}
  html,body{background:#fff!important;color:#000!important;font-size:11pt;}
  .sidebar,.topbar,.ticker,.app-footer,.mobile-actions,.toast-stack,
  .no-print,.page-head__actions,.toolbar,.filter-bar,.pagination-x,
  .btn,.offcanvas,.modal,.skip-link,.bulkbar{display:none!important;}
  .print-only{display:block!important;}
  .app,.main{display:block;}
  .content{padding:0;max-inline-size:none;}
  .card-x{border:0;box-shadow:none;break-inside:avoid;}
  .card-x__head{padding:0 0 6pt;border-block-end:1pt solid #000;}
  .card-x__body{padding:8pt 0;}
  .table-x{font-size:9.5pt;}
  .table-x thead th{background:#f0f0f0!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .table-x tbody td{padding:4pt 6pt;block-size:auto;}
  .table-x tbody tr{break-inside:avoid;}
  .badge-status{border:1pt solid #666;color:#000!important;background:transparent!important;}
  a{color:#000!important;text-decoration:none;}
  .stat{border:1pt solid #ccc;break-inside:avoid;}
  h1,h2,h3{break-after:avoid;}
}

/* print document layouts (receipt / voucher / statement) */
.doc{
  /* A printed document is a sheet of paper: it keeps the light palette in both
     themes, so the theme tokens are re-declared locally rather than inherited. */
  --ink-900:#111528; --ink-800:#20263C; --ink-700:#333A54; --ink-600:#464E6B;
  --ink-500:#5C6480; --ink-400:#666E8C; --ink-300:#A8AEC4; --ink-200:#CDD2E0;
  --ink-100:#E3E6EF; --ink-50:#F1F3F8;
  --surface:#FFFFFF; --surface-2:#F9FAFC; --surface-3:#F1F3F8;
  --line:#E3E6EF; --line-strong:#CDD2E0;
  --success-600:#0E7C55; --danger-600:#C0281F; --warning-600:#A45B00; --info-600:#1A56A8;
  --credit:#0E7C55; --debit:#C0281F;
  background:#fff;color:#111528;max-inline-size:210mm;margin:var(--sp-6) auto;
  padding:16mm 14mm;box-shadow:var(--shadow-md);border-radius:var(--radius-sm);
}
.doc--receipt{max-inline-size:80mm;padding:8mm 6mm;font-size:11px;}
.doc__head{display:flex;justify-content:space-between;gap:var(--sp-5);
  border-block-end:2px solid #111528;padding-block-end:var(--sp-4);margin-block-end:var(--sp-5);}
.doc__brand{display:flex;gap:var(--sp-3);align-items:center;}
.doc__title{text-align:end;}
.doc__title h1{font-size:18px;margin:0;color:#111528;}
.doc__title p{margin:0;font-size:11px;color:#5C6480;}
.doc__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-3);
  margin-block-end:var(--sp-5);font-size:12px;}
.doc__meta div span{display:block;color:#5C6480;font-size:10px;text-transform:uppercase;letter-spacing:.04em;}
.doc__meta div b{color:#111528;}
.doc table{inline-size:100%;border-collapse:collapse;font-size:12px;}
.doc table th{background:#F1F3F8;text-align:start;padding:6px 8px;font-size:10px;
  text-transform:uppercase;letter-spacing:.04em;color:#5C6480;border-block-end:1px solid #CDD2E0;}
.doc table td{padding:6px 8px;border-block-end:1px solid #E3E6EF;}
.doc table .num{text-align:end;font-variant-numeric:tabular-nums;}
.doc__totals{margin-block-start:var(--sp-4);margin-inline-start:auto;max-inline-size:280px;}
.doc__totals .kpi-row{border-color:#E3E6EF;}
.doc__sign{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin-block-start:var(--sp-12);font-size:11px;}
.doc__sign div{border-block-start:1px solid #111528;padding-block-start:6px;text-align:center;color:#5C6480;}
.doc__foot{margin-block-start:var(--sp-8);padding-block-start:var(--sp-3);border-block-start:1px solid #E3E6EF;
  font-size:10px;color:#666E8C;display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;}
.doc__stamp{
  display:inline-block;border:2px solid var(--danger-solid);color:var(--danger-solid);
  padding:.2rem .7rem;border-radius:var(--radius-sm);font-weight:700;font-size:12px;
  transform:rotate(-6deg);letter-spacing:.05em;
}
/* On a phone an A4 document is wider than the screen. Let the document scroll
   inside its own box rather than pushing the whole page sideways. */
@media (max-width:767.98px){
  .doc{padding:var(--sp-6) var(--sp-4);overflow-x:auto;}
  .doc__head{gap:var(--sp-3);}
  .doc table{min-inline-size:420px;}
  .doc__sign{grid-template-columns:1fr;gap:var(--sp-6);}
}

@media print{
  .doc{box-shadow:none;margin:0;padding:0;max-inline-size:none;overflow:visible;}
  .doc--receipt{max-inline-size:none;}
  .doc table{min-inline-size:0;}
}


/* ==========================================================================
   RTL-SPECIFIC REFINEMENTS
   ========================================================================== */
body{line-height:1.68;}
.table-x thead th{letter-spacing:0;}
.badge-status,.tag,.sidebar__section,.stepper__label span{letter-spacing:0;}
.hash,.mono,code,kbd{direction:ltr;unicode-bidi:embed;display:inline-block;}
.doc__title{text-align:start;}
input[type="tel"],input[type="email"],input[type="url"],input.ltr-input{direction:ltr;text-align:start;}
.form-control[inputmode="decimal"],.form-control[inputmode="numeric"]{direction:ltr;text-align:start;}
.otp-group{direction:ltr;}