/*
 * A faithful copy of the wallet grid on classico-erp /cash, so the logos can be
 * judged where they will actually live rather than on a contact sheet.
 *
 * Tokens are lifted verbatim from the app (styles/adminex/variables.css,
 * astryx-names.css, fonts.css) rather than eyeballed — a preview that is a
 * shade off is a preview that answers the wrong question.
 */
@font-face{font-family:'Plex Arabic';src:url(fonts/plex-arabic-400-arabic.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Plex Arabic';src:url(fonts/plex-arabic-400-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url(fonts/plex-arabic-500-arabic.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Plex Arabic';src:url(fonts/plex-arabic-500-latin.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url(fonts/plex-arabic-600-arabic.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Plex Arabic';src:url(fonts/plex-arabic-600-latin.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url(fonts/plex-arabic-700-arabic.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Plex Arabic';src:url(fonts/plex-arabic-700-latin.woff2) format('woff2');font-weight:700;font-display:swap}

/* Three theme states, the same shape the ERP itself uses: bare :root is the
   light palette; the media query covers "system dark, no explicit choice"; the
   attribute selector lets the toggle win in BOTH directions. Only the tokens
   are redefined — no component rule below is theme-scoped, so nothing can be
   left behind when a state is added. */
:root{
  --theme-primary:59 111 224;
  --accent:rgb(var(--theme-primary));
  --radius:0.625rem;
  --secondary-500:#5d7287; --secondary-900:#1d354f;
  --surface-50:#fafafa; --surface-100:#f4f4f5; --surface-200:#e4e4e7; --surface-900:#18181b;
  --success-600:#16a34a; --danger-600:#dc2626;
  --page:#f4f6f9; --card:#ffffff;
  --ink:var(--secondary-900); --ink-soft:var(--secondary-500);
  --rule:var(--surface-200);
  --tile-bg:var(--surface-100);
  --shadow-card:0 1px 2px rgb(0 0 0/.04),0 8px 24px -4px rgb(0 0 0/.06);
  --shadow-ring:0 0 0 1px rgb(0 0 0/.03);
  --shadow-hover:0 2px 6px rgb(0 0 0/.06),0 14px 32px -6px rgb(0 0 0/.10);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --page:#101215; --card:#18181b;
    --ink:#ffffff; --ink-soft:#94a3b8;
    --rule:#27272a;
    --tile-bg:#27272a;
    --shadow-card:0 1px 2px rgb(0 0 0/.4),0 8px 24px -4px rgb(0 0 0/.5);
    --shadow-ring:0 0 0 1px rgb(255 255 255/.06);
    --shadow-hover:0 2px 6px rgb(0 0 0/.5),0 14px 32px -6px rgb(0 0 0/.6);
  }
}
:root[data-theme="dark"]{
  --page:#101215; --card:#18181b;
  --ink:#ffffff; --ink-soft:#94a3b8;
  --rule:#27272a;
  --tile-bg:#27272a;
  --shadow-card:0 1px 2px rgb(0 0 0/.4),0 8px 24px -4px rgb(0 0 0/.5);
  --shadow-ring:0 0 0 1px rgb(255 255 255/.06);
  --shadow-hover:0 2px 6px rgb(0 0 0/.5),0 14px 32px -6px rgb(0 0 0/.6);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Plex Arabic',system-ui,sans-serif;
  background:var(--page); color:var(--ink);
  line-height:1.6; padding-bottom:64px;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------------------------------------------------------------- chrome */
.bar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:blur(12px);
  border-block-end:1px solid var(--rule);
}
.bar .wrap{display:flex;align-items:center;gap:12px;height:60px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:30px;height:30px;flex-shrink:0}
.brand b{font-size:15px;font-weight:600;letter-spacing:-.025em}
.brand span{font-size:12px;color:var(--ink-soft)}
.spacer{flex:1}
.ghostbtn{
  height:34px;padding:0 12px;border-radius:9px;
  border:1px solid var(--rule);background:var(--card);color:var(--ink-soft);
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.ghostbtn:hover{color:var(--ink)}

.note{
  margin:24px 0 8px;padding:14px 16px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--accent) 8%,var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  font-size:13.5px;color:var(--ink);
}
.note b{font-weight:600}

h1{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.25;margin-top:28px}
.sub{font-size:14px;color:var(--ink-soft);margin-top:2px}
h2{font-size:16px;font-weight:600;letter-spacing:-.025em;margin:32px 0 4px}
.h2note{font-size:12px;color:var(--ink-soft);margin-bottom:14px}

/* ------------------------------------------------------- the wallet grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:16px}

.wcard{
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow-card),var(--shadow-ring);
  padding:16px;cursor:pointer;border:0;text-align:start;
  font:inherit;color:inherit;display:block;width:100%;
  transition:box-shadow .15s,transform .15s;
}
.wcard:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover),var(--shadow-ring)}
.wcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
/* The 44px rounded tile the Stat component already draws — the logo simply
   replaces the generic glyph that sits in it today. */
.tile{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:grid;place-items:center;overflow:hidden;
  background:var(--tile-bg);
}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
/* Marks that carry no ground of their own would float on the card, so they get
   the neutral tile behind them and a little breathing room instead. */
.tile.pad{background:#fff;padding:5px}
.tile.pad img{object-fit:contain}
.more{font-size:12px;font-weight:500;color:var(--ink-soft)}

.wlabel{font-size:14px;font-weight:500;color:var(--ink-soft);line-height:1.6}
.wval{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.25;margin-top:4px}
.whint{font-size:12px;color:var(--ink-soft);margin-top:6px;line-height:1.6}
.wflow{display:flex;gap:12px;align-items:center;margin-top:12px;font-size:12px}
.wflow span{display:inline-flex;align-items:center;gap:4px}
.up{color:var(--success-600)} .down{color:var(--danger-600)}
.wflow svg{width:13px;height:13px}

/* ------------------------------------------------------------ size check */
.sizes{
  display:flex;flex-wrap:wrap;gap:22px;padding:20px;
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow-card),var(--shadow-ring);margin-top:16px;
}
.sz{display:flex;flex-direction:column;align-items:center;gap:8px}
.sz .row{display:flex;align-items:flex-end;gap:8px}
.sz .b{border-radius:6px;overflow:hidden;background:var(--tile-bg)}
.sz .b img{width:100%;height:100%;object-fit:cover;display:block}
.sz small{font-size:11px;color:var(--ink-soft)}

footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--rule);font-size:12px;color:var(--ink-soft)}