/* =====================================================
   ALISMMAR ERP — Design System v2 (PACC)
   Color presets + structural layouts + Theme Studio
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Cairo:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --font-ar:"IBM Plex Sans Arabic",-apple-system,sans-serif;
  --font-head-ar:"Cairo",var(--font-ar);
  --font-en:"Inter",sans-serif;
  --radius:14px;
  --radius-sm:calc(var(--radius) - 5px);
  --radius-lg:calc(var(--radius) + 5px);
  --density:1;
  --fs:14px;
  --shadow-sm:0 1px 3px rgba(15,23,42,.07);
  --shadow:0 8px 30px rgba(15,23,42,.10);
  --shadow-lg:0 24px 70px rgba(15,23,42,.20);
  --tr:.18s cubic-bezier(.4,0,.2,1);
  --sidebar-w:268px; --topbar-h:66px;
  --g1:linear-gradient(135deg,#FF9F43,#FF6B6B);
  --g2:linear-gradient(135deg,#36D1DC,#5B86E5);
  --g3:linear-gradient(135deg,#2BD37E,#0BA360);
  --g4:linear-gradient(135deg,#A18CD1,#7367F0);
  --g5:linear-gradient(135deg,#F6416C,#FF4B2B);
  --g6:linear-gradient(135deg,#F7B733,#E3950E);
  --g7:linear-gradient(135deg,#13B0C4,#0E7490);
  --g8:linear-gradient(135deg,#FA709A,#EE4D8B);
  --g9:linear-gradient(135deg,#30CFD0,#330867);
  --g10:linear-gradient(135deg,#667EEA,#764BA2);
  --excel:#1F9D55; --pdf:#E0443A; --printc:#3867D6;
}

html[data-theme="royal"]{
  --primary:#C8920B; --primary-2:#F0B01C; --primary-strong:#A87908;
  --primary-soft:#FBF3DF; --on-primary:#FFFFFF;
  --accent:#16263B;
  --bg:#F3F5F9; --bg-wash:radial-gradient(1200px 500px at 85% -10%,#FBF3DF66,transparent 60%);
  --surface:#FFFFFF; --surface-2:#F2F4F8;
  --text:#16202E; --text-2:#5B6675; --text-3:#9AA4B2;
  --border:#E5E9F0; --ring:rgba(200,146,11,.25);
  --success:#16A364; --warning:#C8920B; --danger:#DE4B43; --info:#2080C0;
  --chart-1:#F0B01C; --chart-2:#16263B; --chart-3:#16A364; --chart-4:#7367F0; --chart-5:#2080C0;
  --side-bg:linear-gradient(180deg,#101B2B 0%,#16263B 100%); --side-text:#C7D2E1; --side-text-dim:#7C8CA3;
  --side-active-bg:linear-gradient(90deg,#F0B01C,#D89C0D); --side-active-text:#161D27;
  --side-border:rgba(255,255,255,.07); --side-hero:#F0B01C;
  --hero:linear-gradient(120deg,#101B2B 0%,#1D3450 55%,#3D2E08 100%);
}
html[data-theme="pearl"]{
  --primary:#1A3A5F; --primary-2:#2E5E96; --primary-strong:#122B48;
  --primary-soft:#E8EFF7; --on-primary:#FFFFFF;
  --accent:#1A3A5F;
  --bg:#F5F7FA; --bg-wash:radial-gradient(1200px 500px at 85% -10%,#E8EFF766,transparent 60%);
  --surface:#FFFFFF; --surface-2:#F0F3F7;
  --text:#15202D; --text-2:#5A6678; --text-3:#9AA4B2;
  --border:#E4E8EF; --ring:rgba(26,58,95,.22);
  --success:#0F9D58; --warning:#B7791F; --danger:#D64541; --info:#0E7490;
  --chart-1:#1A3A5F; --chart-2:#F0A92D; --chart-3:#0F9D58; --chart-4:#7367F0; --chart-5:#13B0C4;
  --side-bg:#FFFFFF; --side-text:#3D4A5C; --side-text-dim:#9AA4B2;
  --side-active-bg:linear-gradient(90deg,#1A3A5F,#2E5E96); --side-active-text:#FFFFFF;
  --side-border:#EBEEF3; --side-hero:#1A3A5F;
  --hero:linear-gradient(120deg,#16314E 0%,#2E5E96 60%,#1B4F72 100%);
}
html[data-theme="emerald"]{
  --primary:#0E7B53; --primary-2:#16A364; --primary-strong:#0A5C3E;
  --primary-soft:#E2F4EC; --on-primary:#FFFFFF;
  --accent:#0B3B2A;
  --bg:#F2F7F4; --bg-wash:radial-gradient(1200px 500px at 85% -10%,#E2F4EC88,transparent 60%);
  --surface:#FFFFFF; --surface-2:#EEF4F0;
  --text:#142420; --text-2:#56685F; --text-3:#94A49B;
  --border:#E2EAE5; --ring:rgba(14,123,83,.22);
  --success:#0E7B53; --warning:#B7891F; --danger:#D64541; --info:#0E7490;
  --chart-1:#16A364; --chart-2:#C9A961; --chart-3:#0E7490; --chart-4:#7367F0; --chart-5:#F0A92D;
  --side-bg:linear-gradient(180deg,#0A2E20 0%,#0E4530 100%); --side-text:#BFD9CC; --side-text-dim:#6F8F80;
  --side-active-bg:linear-gradient(90deg,#D8B95B,#C9A961); --side-active-text:#0A2E20;
  --side-border:rgba(255,255,255,.07); --side-hero:#D8B95B;
  --hero:linear-gradient(120deg,#0A2E20 0%,#11573C 60%,#3A4D0E 100%);
}
html[data-theme="sapphire"]{
  --primary:#2563EB; --primary-2:#4E8DF5; --primary-strong:#1B4FC4;
  --primary-soft:#E7EEFD; --on-primary:#FFFFFF;
  --accent:#1E3A8A;
  --bg:#F4F6FB; --bg-wash:radial-gradient(1200px 500px at 85% -10%,#E7EEFD88,transparent 60%);
  --surface:#FFFFFF; --surface-2:#EFF2F9;
  --text:#131C2E; --text-2:#5A6678; --text-3:#9AA4B2;
  --border:#E4E8F2; --ring:rgba(37,99,235,.22);
  --success:#0F9D58; --warning:#B7791F; --danger:#D64541; --info:#0E7490;
  --chart-1:#2563EB; --chart-2:#F0A92D; --chart-3:#16A364; --chart-4:#9B59B6; --chart-5:#13B0C4;
  --side-bg:linear-gradient(165deg,#1E3A8A 0%,#2563EB 100%); --side-text:#D6E2FB; --side-text-dim:#93AEE8;
  --side-active-bg:#FFFFFF; --side-active-text:#1E3A8A;
  --side-border:rgba(255,255,255,.12); --side-hero:#FFD166;
  --hero:linear-gradient(120deg,#1E3A8A 0%,#2563EB 60%,#0E7490 100%);
}
html[data-theme="desert"]{
  --primary:#B0552B; --primary-2:#D2703F; --primary-strong:#94431F;
  --primary-soft:#F8E9DF; --on-primary:#FFF9F2;
  --accent:#6B3A1D;
  --bg:#FAF5EE; --bg-wash:radial-gradient(1200px 500px at 85% -10%,#F8E9DF88,transparent 60%);
  --surface:#FFFDFA; --surface-2:#F4EDE2;
  --text:#2C241B; --text-2:#6E6155; --text-3:#A99C8E;
  --border:#EADFD0; --ring:rgba(176,85,43,.22);
  --success:#247B52; --warning:#9C6E1B; --danger:#B03A30; --info:#1F6F80;
  --chart-1:#B0552B; --chart-2:#1F6F80; --chart-3:#247B52; --chart-4:#8A6FB8; --chart-5:#C9A961;
  --side-bg:linear-gradient(180deg,#3B2415 0%,#6B3A1D 100%); --side-text:#EBD9C8; --side-text-dim:#B5997F;
  --side-active-bg:linear-gradient(90deg,#E0A36B,#D2703F); --side-active-text:#2C1407;
  --side-border:rgba(255,255,255,.08); --side-hero:#E0A36B;
  --hero:linear-gradient(120deg,#3B2415 0%,#94431F 60%,#9C6E1B 100%);
}
html[data-theme="orchid"]{
  --primary:#7C3AED; --primary-2:#9D6CF5; --primary-strong:#6428C9;
  --primary-soft:#F1EAFE; --on-primary:#FFFFFF;
  --accent:#3B1D77;
  --bg:#F6F5FB; --bg-wash:radial-gradient(1200px 500px at 85% -10%,#F1EAFE88,transparent 60%);
  --surface:#FFFFFF; --surface-2:#F1F0F8;
  --text:#1B1530; --text-2:#5D5A75; --text-3:#9D9AB2;
  --border:#E8E6F2; --ring:rgba(124,58,237,.22);
  --success:#0F9D58; --warning:#B7791F; --danger:#D64541; --info:#0E7490;
  --chart-1:#7C3AED; --chart-2:#F0A92D; --chart-3:#13B0C4; --chart-4:#EE4D8B; --chart-5:#16A364;
  --side-bg:linear-gradient(165deg,#2B1457 0%,#5B21B6 100%); --side-text:#DCD3F5; --side-text-dim:#9D8BCB;
  --side-active-bg:#FFFFFF; --side-active-text:#5B21B6;
  --side-border:rgba(255,255,255,.10); --side-hero:#FFD166;
  --hero:linear-gradient(120deg,#2B1457 0%,#7C3AED 60%,#BE3387 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--fs)}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-en); line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:var(--bg-wash); background-attachment:fixed;
}
html[dir="rtl"] body{font-family:var(--font-ar); letter-spacing:0}
h1,h2,h3{font-family:var(--font-en)}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{font-family:var(--font-head-ar)}
a{color:inherit;text-decoration:none}
::selection{background:var(--primary-soft)}
.num{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#C4CCD8;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.content>*{animation:fadeUp .4s ease-out both}
.content>*:nth-child(2){animation-delay:.05s}.content>*:nth-child(3){animation-delay:.1s}
.content>*:nth-child(4){animation-delay:.15s}.content>*:nth-child(5){animation-delay:.2s}

.shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--side-bg);
  border-inline-end:1px solid var(--side-border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:40;
}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:20px 18px 14px}
.sidebar-brand .logo-tile{
  width:44px;height:44px;border-radius:13px;background:#FFFFFF;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25); flex-shrink:0;
}
.sidebar-brand .logo-tile img{width:34px;height:auto}
.sidebar-brand .b-name{font-weight:700;font-size:13px;line-height:1.35;color:var(--side-text)}
.sidebar-brand .b-sub{font-size:10.5px;color:var(--side-text-dim)}
.sidebar-search{padding:4px 14px 10px}
.sidebar-search input{
  width:100%;background:rgba(255,255,255,.08);border:1px solid var(--side-border);
  border-radius:10px;padding:9px 12px;color:var(--side-text);font-family:inherit;font-size:12.5px;outline:none;transition:var(--tr);
}
html[data-theme="pearl"] .sidebar-search input{background:var(--surface-2);color:var(--text)}
.sidebar-search input::placeholder{color:var(--side-text-dim)}
.sidebar-search input:focus{border-color:var(--side-hero);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.sidebar-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--side-text-dim);padding:8px 22px 6px}
.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 10px 12px;display:flex;flex-direction:column;gap:3px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:12px;
  color:var(--side-text);font-size:13.5px;font-weight:500;cursor:pointer;transition:var(--tr);position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.08)}
html[data-theme="pearl"] .nav-item:hover{background:var(--surface-2)}
.nav-item.active{background:var(--side-active-bg);color:var(--side-active-text);font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.mi{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:#fff; box-shadow:0 3px 8px rgba(0,0,0,.22); transition:var(--tr);
}
.mi svg{width:17px;height:17px}
.nav-item:hover .mi{transform:scale(1.08) rotate(-3deg)}
.c1{background:var(--g1)}.c2{background:var(--g2)}.c3{background:var(--g3)}.c4{background:var(--g4)}.c5{background:var(--g5)}
.c6{background:var(--g6)}.c7{background:var(--g7)}.c8{background:var(--g8)}.c9{background:var(--g9)}.c10{background:var(--g10)}
.nav-item .chev{margin-inline-start:auto;width:14px;height:14px;opacity:.5;transition:var(--tr)}
.nav-item.open .chev{transform:rotate(90deg)}
html[dir="rtl"] .nav-item .chev{transform:scaleX(-1)}
html[dir="rtl"] .nav-item.open .chev{transform:scaleX(-1) rotate(90deg)}
.nav-sub{display:none;flex-direction:column;gap:1px;padding-inline-start:30px;margin:2px 0 6px}
.nav-group.open .nav-sub{display:flex}
.nav-sub a{
  padding:7px 12px;font-size:12.5px;color:var(--side-text-dim);border-radius:9px;
  border-inline-start:2px solid var(--side-border);transition:var(--tr);
}
.nav-sub a:hover{color:var(--side-text);background:rgba(255,255,255,.06)}
html[data-theme="pearl"] .nav-sub a:hover{background:var(--surface-2)}
.nav-sub a.active{color:var(--side-hero);border-inline-start-color:var(--side-hero);font-weight:700}
.sidebar-foot{
  padding:12px 16px;border-top:1px solid var(--side-border);font-size:10.5px;color:var(--side-text-dim);
  display:flex;align-items:center;gap:8px;
}
.sidebar-foot .dot{width:8px;height:8px;border-radius:50%;background:#3DCB8A;box-shadow:0 0 8px #3DCB8A}

html[data-layout="rail"] .sidebar{width:86px}
html[data-layout="rail"] .sidebar-brand{justify-content:center;padding:18px 8px 10px}
html[data-layout="rail"] .sidebar-brand div:not(.logo-tile),
html[data-layout="rail"] .sidebar-search,
html[data-layout="rail"] .sidebar-label,
html[data-layout="rail"] .sidebar-foot span{display:none}
html[data-layout="rail"] .nav-item{flex-direction:column;gap:5px;padding:9px 4px}
html[data-layout="rail"] .nav-item span{font-size:9.8px;text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}
html[data-layout="rail"] .nav-item .chev{display:none}
html[data-layout="rail"] .nav-sub{display:none !important}
html[data-layout="rail"] .sidebar-foot{justify-content:center}

html[data-layout="top"] .shell{flex-direction:column}
html[data-layout="top"] .sidebar{
  width:100%;height:auto;position:sticky;top:0;flex-direction:row;align-items:center;
  border-inline-end:0;border-bottom:1px solid var(--side-border);padding:0 16px;gap:6px;
}
html[data-layout="top"] .sidebar-brand{padding:10px 6px}
html[data-layout="top"] .sidebar-brand div:not(.logo-tile){display:none}
html[data-layout="top"] .sidebar-search,html[data-layout="top"] .sidebar-label{display:none}
html[data-layout="top"] .nav{flex-direction:row;align-items:center;padding:8px 4px;gap:4px;overflow-x:auto;overflow-y:visible}
html[data-layout="top"] .nav-item{padding:7px 11px;white-space:nowrap}
html[data-layout="top"] .nav-item span{font-size:12.5px}
html[data-layout="top"] .nav-group{position:relative}
html[data-layout="top"] .nav-sub{
  position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:230px;z-index:70;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:8px;margin:0;
}
html[data-layout="top"] .nav-sub a{color:var(--text-2);border-inline-start:0}
html[data-layout="top"] .nav-sub a:hover{background:var(--surface-2);color:var(--text)}
html[data-layout="top"] .sidebar-foot{display:none}
html[data-layout="top"] .topbar{top:0}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:var(--topbar-h);position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:0 22px;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);
}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);min-width:0}
.crumbs b{color:var(--text);font-weight:700}
.top-spacer{flex:1}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--text-2);
  white-space:nowrap;cursor:pointer;transition:var(--tr);font-family:inherit;
}
.chip:hover{border-color:var(--primary);color:var(--text);box-shadow:var(--shadow-sm)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--success)}
.chip svg{width:14px;height:14px}
.icon-btn{
  width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);cursor:pointer;transition:var(--tr);position:relative;
}
.icon-btn:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.icon-btn svg{width:19px;height:19px}
.icon-btn .badge{
  position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;border-radius:9px;
  background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  padding:0 4px;border:2px solid var(--bg);
}
.avatar{
  width:40px;height:40px;border-radius:13px;background:var(--hero);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;cursor:pointer;box-shadow:var(--shadow-sm);
}
.user-mini{line-height:1.25}
.user-mini .u-name{font-size:12.8px;font-weight:700}
.user-mini .u-role{font-size:10.5px;color:var(--text-3)}
.menu{position:relative}
.menu-pop{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:200px;background:var(--surface);
  border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:7px;display:none;z-index:80;
}
.menu.open .menu-pop{display:block;animation:fadeUp .18s ease-out}
.menu-pop a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:13px;
  color:var(--text-2);cursor:pointer;transition:var(--tr);
}
.menu-pop a:hover{background:var(--surface-2);color:var(--text)}

.content{padding:22px;display:flex;flex-direction:column;gap:calc(18px * var(--density));max-width:1680px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-title{font-size:23px;font-weight:800;margin:0}
.page-sub{font-size:12.5px;color:var(--text-3);margin-top:3px}

.hero{
  position:relative;border-radius:calc(var(--radius-lg) + 4px);padding:26px 30px;color:#fff;overflow:hidden;
  background:var(--hero);box-shadow:var(--shadow);
}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.12;
  background-image:linear-gradient(30deg,#fff 1px,transparent 1px),linear-gradient(150deg,#fff 1px,transparent 1px);
  background-size:44px 44px;
}
.hero::after{
  content:"";position:absolute;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%);
  top:-160px;inset-inline-end:-80px;
}
.hero-inner{position:relative;display:flex;align-items:center;gap:24px;flex-wrap:wrap;z-index:2}
.hero h2{margin:0;font-size:24px;font-weight:800}
.hero p{margin:5px 0 0;font-size:13px;opacity:.82}
.hero-stats{display:flex;gap:12px;margin-inline-start:auto;flex-wrap:wrap}
.hero-stat{
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);
  border-radius:14px;padding:10px 18px;text-align:center;min-width:104px;
}
.hero-stat b{display:block;font-size:19px;font-weight:800}
.hero-stat span{font-size:10.5px;opacity:.85}
.hero-actions{display:flex;gap:8px;width:100%;margin-top:14px;flex-wrap:wrap;position:relative;z-index:2}
.hero-btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;
  font-family:inherit;font-size:12.5px;font-weight:600;transition:var(--tr);
}
.hero-btn:hover{background:#fff;color:var(--accent);transform:translateY(-2px)}
.hero-btn svg{width:16px;height:16px}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:box-shadow var(--tr);
}
.card:hover{box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 0;flex-wrap:wrap}
.card-title{font-size:15px;font-weight:700;margin:0;display:flex;align-items:center;gap:10px}
.ct-ic{
  width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.ct-ic svg{width:17px;height:17px}
.card-body{padding:calc(16px*var(--density)) 20px calc(18px*var(--density))}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(16px*var(--density))}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:calc(17px*var(--density)) 18px 10px;position:relative;overflow:hidden;transition:var(--tr);box-shadow:var(--shadow-sm);
}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi-label{font-size:12.5px;color:var(--text-2);font-weight:600}
.kpi-ic{
  width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.kpi-ic svg{width:20px;height:20px}
.kpi-value{font-size:25px;font-weight:800;margin-top:9px;letter-spacing:-.01em}
.kpi-value small{font-size:11.5px;color:var(--text-3);font-weight:600;margin-inline-start:4px}
.kpi-trend{font-size:11.5px;margin-top:3px;display:flex;align-items:center;gap:5px;color:var(--text-3)}
.kpi-trend b{font-weight:700}
.kpi-trend.up b{color:var(--success)}.kpi-trend.down b{color:var(--danger)}
.kpi-spark{margin:6px -18px -10px}

.fav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(12px*var(--density))}
.fav-tile{
  display:flex;align-items:center;gap:13px;padding:calc(14px*var(--density)) 15px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:var(--tr);position:relative;overflow:hidden;
}
.fav-tile::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:0;transition:var(--tr);opacity:.08}
.fav-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.fav-tile:hover::after{width:100%}
.fav-tile.t1::after{background:var(--g1)}.fav-tile.t2::after{background:var(--g2)}
.fav-tile.t3::after{background:var(--g3)}.fav-tile.t4::after{background:var(--g4)}
.fav-tile.t5::after{background:var(--g5)}.fav-tile.t6::after{background:var(--g6)}
.fav-tile.t7::after{background:var(--g7)}.fav-tile.t8::after{background:var(--g8)}
.fav-ic{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 7px 16px rgba(0,0,0,.18);position:relative;z-index:1;
}
.fav-ic svg{width:22px;height:22px}
.fav-tile:hover .fav-ic{transform:scale(1.1) rotate(-4deg)}
.fav-txt{position:relative;z-index:1;min-width:0}
.fav-txt .f1{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-txt .f2{font-size:10.8px;color:var(--text-3)}

.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:calc(16px*var(--density))}
.dash-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(16px*var(--density))}
.list-panel{display:flex;flex-direction:column}
.lp-row{
  display:flex;align-items:center;gap:12px;padding:calc(10px*var(--density)) 6px;
  border-bottom:1px dashed var(--border);font-size:13px;transition:var(--tr);border-radius:10px;cursor:pointer;
}
.lp-row:last-child{border-bottom:0}
.lp-row:hover{background:var(--surface-2);padding-inline:10px}
.lp-ic{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.lp-ic svg{width:17px;height:17px}
.lp-txt{flex:1;min-width:0}
.lp-txt .t1{font-weight:600}
.lp-txt .t2{font-size:10.8px;color:var(--text-3)}
.lp-count{
  min-width:26px;height:24px;border-radius:9px;padding:0 8px;background:var(--primary-soft);color:var(--primary);
  font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.seg{display:inline-flex;background:var(--surface-2);border-radius:11px;padding:3px;gap:2px}
.seg button{
  border:0;background:transparent;color:var(--text-2);font-family:inherit;font-size:12px;font-weight:700;
  padding:6px 15px;border-radius:9px;cursor:pointer;transition:var(--tr);
}
.seg button.on{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}
.prog{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.prog>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--primary-2),var(--primary))}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:9.5px 18px;border-radius:12px;border:1px solid transparent;
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:var(--tr);white-space:nowrap;
}
.btn svg{width:16px;height:16px}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(135deg,var(--primary-2),var(--primary));color:var(--on-primary);box-shadow:0 6px 16px var(--ring)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px var(--ring)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text-2)}
.btn-ghost:hover{color:var(--text);border-color:var(--text-3);transform:translateY(-1px)}
.btn-soft{background:var(--primary-soft);color:var(--primary)}
.btn-soft:hover{background:var(--primary);color:var(--on-primary)}
.btn-danger-soft{background:#FDECEB;color:var(--danger)}
.btn-danger-soft:hover{background:var(--danger);color:#fff}
.btn-sm{padding:7px 13px;font-size:12px;border-radius:10px}
.btn-tool{color:#fff;padding:8.5px 15px}
.btn-excel{background:linear-gradient(135deg,#2BBE6C,var(--excel))}
.btn-pdf{background:linear-gradient(135deg,#F0655C,var(--pdf))}
.btn-print{background:linear-gradient(135deg,#5C85E8,var(--printc))}
.btn-tool:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.22);color:#fff}

.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(13px*var(--density)) 18px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.field label .req{color:var(--danger);margin-inline-start:3px}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface-2);border:1.5px solid transparent;color:var(--text);
  border-radius:11px;padding:calc(9px*var(--density)) 13px;font-family:inherit;font-size:13px;outline:none;transition:var(--tr);
}
.field input:hover,.field select:hover{border-color:var(--border)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 3.5px var(--ring);background:var(--surface);
}
.switch{position:relative;width:42px;height:23px;display:inline-block;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .tr{position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;transition:var(--tr);cursor:pointer}
.switch .tr::before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);top:2px;inset-inline-start:3px;transition:var(--tr)}
.switch input:checked+.tr{background:linear-gradient(135deg,var(--primary-2),var(--primary));border-color:transparent}
.switch input:checked+.tr::before{transform:translateX(18px)}
html[dir="rtl"] .switch input:checked+.tr::before{transform:translateX(-18px)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);padding:0 20px;overflow-x:auto}
.tab{padding:12px 17px;font-size:13px;font-weight:700;color:var(--text-2);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:var(--tr);white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.on{color:var(--primary);border-bottom-color:var(--primary)}

.doc-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;padding:12px 20px;
  background:linear-gradient(90deg,var(--primary-soft),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius-lg);font-size:12px;color:var(--text-2);
}
.doc-strip b{color:var(--text);font-weight:700}
.doc-strip .star{color:var(--primary);cursor:pointer;font-size:17px;transition:var(--tr)}
.doc-strip .star:hover{transform:scale(1.25)}

.table-wrap{overflow-x:auto;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
table.dt{width:100%;border-collapse:collapse;font-size:13px}
.dt thead th{
  position:sticky;top:0;background:var(--surface-2);color:var(--text-2);font-size:11.5px;font-weight:700;
  text-align:start;padding:calc(11px*var(--density)) 14px;border-bottom:1px solid var(--border);white-space:nowrap;z-index:5;
}
.dt tbody td{padding:calc(10px*var(--density)) 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.dt tbody tr{transition:var(--tr)}
.dt tbody tr:hover{background:var(--primary-soft)}
.dt tbody tr.sel{background:var(--primary-soft);box-shadow:inset 3px 0 0 var(--primary)}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums}
.badge-st{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700}
.badge-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-st.ok{background:#E3F6EC;color:#0F8A50}
.badge-st.off{background:#FDECEB;color:#C0392B}
.badge-st.mid{background:#FBF0DA;color:#9C6E1B}
.badge-st.inf{background:#E3F0FA;color:#1F6FA8}
.dt-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;font-size:12px;color:var(--text-3);flex-wrap:wrap}
.pager{display:flex;gap:4px}
.pager button{
  min-width:32px;height:32px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:var(--tr);
}
.pager button:hover{border-color:var(--primary);color:var(--primary)}
.pager button.on{background:linear-gradient(135deg,var(--primary-2),var(--primary));border-color:transparent;color:var(--on-primary);font-weight:800}
.app-foot{margin-top:auto;padding:18px 24px;text-align:center;font-size:11.5px;color:var(--text-3)}

.studio-overlay{position:fixed;inset:0;background:rgba(10,16,28,.45);backdrop-filter:blur(2px);z-index:90;display:none}
.studio{
  position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(380px,94vw);z-index:95;background:var(--surface);
  box-shadow:var(--shadow-lg);transform:translateX(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
html[dir="rtl"] .studio{transform:translateX(-110%)}
body.studio-open .studio{transform:none}
body.studio-open .studio-overlay{display:block}
.studio-head{
  padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;
  background:var(--hero);color:#fff;
}
.studio-head h3{margin:0;font-size:16px;font-weight:800;display:flex;align-items:center;gap:9px}
.studio-head .x{background:rgba(255,255,255,.15);border:0;color:#fff;width:32px;height:32px;border-radius:10px;cursor:pointer;font-size:15px}
.studio-body{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:22px}
.studio-sec h4{margin:0 0 10px;font-size:12px;font-weight:800;color:var(--text-2);letter-spacing:.04em;text-transform:uppercase}
.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.preset{border:2px solid var(--border);border-radius:13px;padding:8px;cursor:pointer;transition:var(--tr);text-align:center}
.preset:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.preset.sel{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.preset .pv{height:44px;border-radius:8px;display:flex;overflow:hidden;margin-bottom:6px}
.preset .pv i{flex:1}
.preset span{font-size:10.5px;font-weight:700;color:var(--text-2)}
.lay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.lay{border:2px solid var(--border);border-radius:13px;padding:10px 6px;cursor:pointer;transition:var(--tr);text-align:center}
.lay:hover{transform:translateY(-2px)}
.lay.sel{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.lay .lv{height:38px;border-radius:7px;background:var(--surface-2);position:relative;margin-bottom:6px;overflow:hidden}
.lay .lv::before{content:"";position:absolute;background:var(--primary);opacity:.75}
.lay[data-v="side"] .lv::before{top:4px;bottom:4px;inset-inline-start:4px;width:11px;border-radius:3px}
.lay[data-v="rail"] .lv::before{top:4px;bottom:4px;inset-inline-start:4px;width:6px;border-radius:3px}
.lay[data-v="top"] .lv::before{top:4px;inset-inline:4px;height:8px;border-radius:3px}
.lay span{font-size:10.5px;font-weight:700;color:var(--text-2)}
.sw-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sw{width:34px;height:34px;border-radius:11px;cursor:pointer;border:2.5px solid transparent;transition:var(--tr)}
.sw:hover{transform:scale(1.12)}
.sw.sel{border-color:var(--text);box-shadow:0 0 0 3px var(--ring)}
.sw-custom{position:relative;overflow:hidden}
.sw-custom input{position:absolute;inset:-8px;cursor:pointer;opacity:0}
.studio-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;color:var(--text-2)}
.studio-row input[type="range"]{flex:1;accent-color:var(--primary)}
.saved-list{display:flex;flex-direction:column;gap:7px}
.saved-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:12px;
  font-size:12.5px;font-weight:700;cursor:pointer;transition:var(--tr);
}
.saved-item:hover{border-color:var(--primary)}
.saved-item .sdot{width:18px;height:18px;border-radius:6px}
.saved-item .del{margin-inline-start:auto;background:none;border:0;color:var(--danger);cursor:pointer;font-size:14px;opacity:.6}
.saved-item .del:hover{opacity:1}
.studio-save{display:flex;gap:8px}
.studio-save input{
  flex:1;background:var(--surface-2);border:1.5px solid transparent;border-radius:11px;padding:9px 13px;
  font-family:inherit;font-size:13px;color:var(--text);outline:none;
}
.studio-save input:focus{border-color:var(--primary)}
.studio-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px}

.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.login-bg{position:fixed;inset:0;z-index:-1;background:var(--hero)}
.login-bg::before{
  content:"";position:absolute;inset:0;opacity:.10;
  background-image:linear-gradient(30deg,#fff 1px,transparent 1px),linear-gradient(150deg,#fff 1px,transparent 1px);
  background-size:48px 48px;
}
.login-bg::after{
  content:"";position:absolute;width:60vw;height:60vw;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 60%);top:-30vw;inset-inline-end:-18vw;
}
.login-card{
  width:min(980px,100%);min-height:580px;display:grid;grid-template-columns:1.05fr 1fr;
  background:var(--surface);border-radius:26px;box-shadow:var(--shadow-lg);overflow:hidden;
}
.login-brand{position:relative;padding:46px 44px;display:flex;flex-direction:column;background:var(--hero);color:#fff}
.login-brand::after{
  content:"";position:absolute;inset:0;opacity:.08;
  background-image:linear-gradient(30deg,#fff 1px,transparent 1px),linear-gradient(150deg,#fff 1px,transparent 1px);
  background-size:42px 42px;
}
.login-brand .logo-wrap{
  background:#fff;border-radius:18px;padding:12px 18px;align-self:flex-start;margin-bottom:34px;box-shadow:0 10px 30px rgba(0,0,0,.3);
  position:relative;z-index:2;
}
.login-brand img.logo{height:46px;width:auto;display:block}
.login-brand h1{font-size:27px;font-weight:800;line-height:1.4;margin:0 0 10px;position:relative;z-index:2}
.login-brand h1 em{font-style:normal;color:#F5C64E}
.login-brand p{color:rgba(255,255,255,.75);font-size:13.5px;margin:0;max-width:38ch;position:relative;z-index:2}
.login-stats{margin-top:auto;display:flex;gap:24px;padding-top:30px;position:relative;z-index:2;flex-wrap:wrap}
.login-stats div b{display:block;font-size:21px;font-weight:800;color:#F5C64E}
.login-stats div span{font-size:11px;color:rgba(255,255,255,.7)}
.login-form-side{padding:40px 44px;display:flex;flex-direction:column}
.login-top{display:flex;justify-content:flex-end;gap:8px;margin-bottom:24px}
.login-form-side h2{font-size:24px;font-weight:800;margin:0 0 4px}
.login-form-side .sub{color:var(--text-3);font-size:13px;margin:0 0 26px}
.login-form-side .field{margin-bottom:15px}
.pw-wrap{position:relative}
.pw-wrap .eye{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--text-3);cursor:pointer;padding:4px;display:flex}
.pw-wrap .eye svg{width:17px;height:17px}
.login-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 20px;font-size:12.5px}
.login-row label{display:flex;align-items:center;gap:8px;color:var(--text-2);cursor:pointer}
.login-row a{color:var(--primary);font-weight:700}
.btn-login{width:100%;justify-content:center;padding:13px;font-size:14.5px;border-radius:13px}
.login-foot{margin-top:auto;padding-top:24px;text-align:center;font-size:11px;color:var(--text-3)}
.demo-note{margin-top:14px;padding:9px 12px;border:1.5px dashed var(--border);border-radius:11px;font-size:11.5px;color:var(--text-3);text-align:center}

@media (max-width:1280px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .fav-grid{grid-template-columns:repeat(2,1fr)}
  .dash-grid{grid-template-columns:1fr}
  .dash-grid-3{grid-template-columns:1fr}
  .form-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .login-card{grid-template-columns:1fr}
  .login-brand{display:none}
  html[data-layout="side"] .sidebar,html[data-layout="rail"] .sidebar{position:fixed;inset-inline-start:0;transform:translateX(-105%);transition:transform .22s}
  html[dir="rtl"][data-layout="side"] .sidebar,html[dir="rtl"][data-layout="rail"] .sidebar{transform:translateX(105%)}
  .sidebar.open{transform:none !important}
  .hero-stats{margin-inline-start:0}
}
@media (max-width:640px){
  .kpi-grid,.form-grid,.fav-grid{grid-template-columns:1fr}
  .content{padding:14px}
  .hero{padding:20px}
}

/* fix: exclude fixed drawers from content entrance animation */
.content>.studio,.content>.studio-overlay{animation:none}

/* ===== ZK SOLUTIONS default theme (brand: #00406A / #009EDF / #465467) ===== */
html[data-theme="zx"]{
  --primary:#009EDF; --primary-2:#2DB6F0; --primary-strong:#0080B8;
  --primary-soft:#E3F4FD; --on-primary:#FFFFFF;
  --accent:#00406A;
  --bg:#F3F6F9; --bg-wash:radial-gradient(1200px 500px at 85% -10%,#E3F4FD88,transparent 60%);
  --surface:#FFFFFF; --surface-2:#EFF3F7;
  --text:#1A2733; --text-2:#465467; --text-3:#94A1AF;
  --border:#E2E8EF; --ring:rgba(0,158,223,.25);
  --success:#16A364; --warning:#C8920B; --danger:#DE4B43; --info:#009EDF;
  --chart-1:#009EDF; --chart-2:#00406A; --chart-3:#16A364; --chart-4:#7367F0; --chart-5:#F0A92D;
  --side-bg:linear-gradient(180deg,#00406A 0%,#002C4A 100%); --side-text:#BFD9EC; --side-text-dim:#6F93AE;
  --side-active-bg:linear-gradient(90deg,#009EDF,#0080B8); --side-active-text:#FFFFFF;
  --side-border:rgba(255,255,255,.08); --side-hero:#009EDF;
  --hero:linear-gradient(120deg,#00263F 0%,#00406A 55%,#0077A8 100%);
}
/* customer logo chip in topbar */
.cust-chip img{height:20px;width:auto}

/* hard guards: brand/customer images can never explode the layout */
.topbar .chip img{height:20px;width:auto;max-width:90px;object-fit:contain}
.topbar img{max-height:28px}
.sidebar-brand .logo-tile img{width:34px;height:auto;max-height:38px;object-fit:contain}
.login-brand .logo-wrap img{height:46px;width:auto;max-width:220px;object-fit:contain}

/* ===== Accounting: COA tree ===== */
.coa-tree{display:flex;flex-direction:column}
.coa-row{
  display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px dashed var(--border);
  font-size:13px;transition:var(--tr);cursor:pointer;
}
.coa-row:hover{background:var(--primary-soft)}
.coa-row .code{font-variant-numeric:tabular-nums;font-weight:800;color:var(--primary);min-width:64px;direction:ltr;text-align:start}
.coa-row .nm{flex:1;font-weight:600}
.coa-row .nm small{display:block;font-size:10.5px;color:var(--text-3);font-weight:500}
.coa-row .bal{font-variant-numeric:tabular-nums;color:var(--text-2);direction:ltr}
.coa-row .tw{width:14px;height:14px;flex-shrink:0;transition:var(--tr);opacity:.5}
html[dir="rtl"] .coa-row .tw{transform:scaleX(-1)}
.coa-group.open > .coa-row .tw{transform:rotate(90deg)}
html[dir="rtl"] .coa-group.open > .coa-row .tw{transform:scaleX(-1) rotate(90deg)}
.coa-children{display:none}
.coa-group.open > .coa-children{display:block}
.coa-l1 > .coa-row{background:var(--surface-2);font-weight:800}
.coa-l1 > .coa-row .nm{font-weight:800}
.coa-indent-1{padding-inline-start:14px}.coa-indent-2{padding-inline-start:40px}
.coa-indent-3{padding-inline-start:66px}.coa-indent-4{padding-inline-start:92px}
.acc-chip{font-size:10.5px;font-weight:800;padding:2.5px 9px;border-radius:99px}
.acc-chip.sum{background:var(--surface-2);color:var(--text-3)}
.acc-chip.post{background:var(--primary-soft);color:var(--primary)}

/* ===== Banking cards ===== */
.bank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bank-card{
  position:relative;border-radius:18px;padding:20px;color:#fff;overflow:hidden;min-height:150px;
  display:flex;flex-direction:column;box-shadow:var(--shadow);transition:var(--tr);
}
.bank-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.bank-card::after{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);top:-90px;inset-inline-end:-50px;
}
.bank-card .bk-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px}
.bank-card .bk-iban{font-size:11.5px;opacity:.75;margin-top:6px;direction:ltr;text-align:start;letter-spacing:.04em}
.bank-card .bk-bal{margin-top:auto;font-size:23px;font-weight:800;font-variant-numeric:tabular-nums}
.bank-card .bk-bal small{font-size:11px;font-weight:600;opacity:.8}
.bank-card .bk-foot{display:flex;justify-content:space-between;font-size:10.5px;opacity:.75;margin-top:4px}
.cc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cc-card{
  position:relative;border-radius:18px;padding:18px 20px;color:#fff;min-height:130px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.cc-card .cc-num{font-size:15px;letter-spacing:.14em;direction:ltr;text-align:start;margin-top:auto;font-weight:700}
.cc-card .cc-foot{display:flex;justify-content:space-between;font-size:10.5px;opacity:.8;margin-top:8px}
.cc-chip{width:34px;height:24px;border-radius:6px;background:linear-gradient(135deg,#F5D67B,#C9A227)}
@media (max-width:1100px){.bank-grid,.cc-grid{grid-template-columns:1fr}}

/* journal entry detail */
.jv-detail{border:1.5px dashed var(--border);border-radius:var(--radius-lg);padding:16px 20px;background:var(--surface-2)}
.jv-detail table{width:100%;border-collapse:collapse;font-size:12.8px}
.jv-detail th{text-align:start;color:var(--text-3);font-size:11px;padding:6px 10px;border-bottom:1px solid var(--border)}
.jv-detail td{padding:7px 10px;border-bottom:1px dashed var(--border)}
.jv-detail tr:last-child td{border-bottom:0;font-weight:800}