/* =====================================================================
   NY DELI — Finance & Payroll
   Design system. Navy and white, taken from the app in the reference
   video: a deep blue header, soft grey canvas, white cards with hairline
   borders, and a pill tab strip that scrolls sideways on a phone.
   ===================================================================== */

:root{
  /* Brand */
  --navy:#0F3D6E;
  --navy-2:#134C8B;
  --navy-3:#1A63AF;
  --blue:#1877D2;
  --blue-soft:#E8F1FB;
  --blue-line:#CFE0F3;

  /* Canvas */
  --bg:#EEF1F5;
  --card:#FFFFFF;
  --line:#DCE3EC;
  --line-soft:#E9EEF4;

  /* Text */
  --ink:#12243A;
  --ink-2:#3C4E64;
  --muted:#6B7C91;
  --faint:#95A3B4;

  /* Status */
  --green:#1B7F4B;
  --green-soft:#E4F4EA;
  --red:#C4342B;
  --red-soft:#FBE9E7;
  --amber:#B4740A;
  --amber-soft:#FDF1DC;
  --slate-soft:#EDF1F6;

  /* Shape */
  --r:14px;
  --r-sm:10px;
  --r-lg:20px;
  --shadow:0 1px 2px rgba(15,61,110,.06), 0 4px 14px rgba(15,61,110,.05);
  --shadow-lg:0 10px 40px rgba(15,61,110,.18);

  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
}

html[lang="ar"]{ --sans:'IBM Plex Sans Arabic',system-ui,sans-serif; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
.font-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- */
/* App bar                                                           */
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* Layout                                                            */
/* ---------------------------------------------------------------- */
.page-head{margin-bottom:14px}
.page-title{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0}
.page-sub{color:var(--muted);font-size:14px;margin:2px 0 0}
.page-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---------------------------------------------------------------- */
/* Cards                                                             */
/* ---------------------------------------------------------------- */
.card-x{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;
}
.card-x-head{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--line-soft);
}
.card-x-title{font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em}
.card-x-body{padding:16px}
.card-x-body.tight{padding:0}
.card-x-foot{padding:12px 16px;border-top:1px solid var(--line-soft);background:#FAFBFD}

/* Stat tiles */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.stat::before{
  content:'';position:absolute;inset-block:0;inset-inline-start:0;width:4px;
  background:var(--accent,var(--blue));
}
.stat-label{
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);
}
html[lang="ar"] .stat-label{letter-spacing:0;text-transform:none;font-size:12px}
.stat-value{font-size:23px;font-weight:700;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.stat-meta{font-size:12px;color:var(--muted);margin-top:2px}
.stat.up .stat-value{color:var(--green)}
.stat.down .stat-value{color:var(--red)}

/* ---------------------------------------------------------------- */
/* Forms                                                             */
/* ---------------------------------------------------------------- */
.field{margin-bottom:14px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.form-control,.form-select,input[type=text],input[type=number],input[type=date],
input[type=time],input[type=email],input[type=tel],input[type=password],select,textarea{
  width:100%;padding:11px 13px;font-size:15px;font-family:inherit;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .12s,box-shadow .12s;
}
.form-control:focus,.form-select:focus,select:focus,textarea:focus,input:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(24,119,210,.14);
}
.form-control::placeholder{color:var(--faint)}
textarea{min-height:80px;resize:vertical}
.form-hint{font-size:12px;color:var(--muted);margin-top:4px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 12px}
.money-input{font-family:var(--mono);font-weight:600}

.check{display:flex;align-items:center;gap:9px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--blue);margin:0;flex:0 0 18px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 18px;font-size:15px;font-weight:600;font-family:inherit;line-height:1;
  border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;
  transition:background .12s,box-shadow .12s,transform .05s;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--navy-3);color:#fff}
.btn-navy{background:var(--navy-2);color:#fff}
.btn-navy:hover{background:var(--navy);color:#fff}
.btn-soft{background:var(--blue-soft);color:var(--navy-2);border-color:var(--blue-line)}
.btn-soft:hover{background:#DBE9F8;color:var(--navy)}
.btn-ghost{background:#fff;color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover{background:#F5F8FB;color:var(--ink)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#A82A22;color:#fff}
.btn-block{width:100%}
.btn-sm{padding:7px 12px;font-size:13.5px;border-radius:8px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------------------------------------------------------------- */
/* Chips                                                             */
/* ---------------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap;
}
.chip-ok{background:var(--green-soft);color:var(--green)}
.chip-bad{background:var(--red-soft);color:var(--red)}
.chip-warn{background:var(--amber-soft);color:var(--amber)}
.chip-info{background:var(--blue-soft);color:var(--navy-2)}
.chip-muted{background:var(--slate-soft);color:var(--muted)}

/* ---------------------------------------------------------------- */
/* Tables                                                            */
/* ---------------------------------------------------------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-x{width:100%;border-collapse:collapse;font-size:14px}
.table-x thead th{
  background:var(--navy-2);color:#fff;text-align:start;
  padding:11px 13px;font-size:12px;font-weight:600;white-space:nowrap;
  letter-spacing:.03em;text-transform:uppercase;
}
html[lang="ar"] .table-x thead th{text-transform:none;letter-spacing:0;font-size:13px}
.table-x thead th.num{text-align:end}
.table-x tbody td{padding:11px 13px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.table-x tbody td.num{text-align:end;font-variant-numeric:tabular-nums}
.table-x tbody tr:nth-child(even){background:#FAFBFD}
.table-x tbody tr:hover{background:var(--blue-soft)}
.table-x tfoot td{padding:12px 13px;font-weight:700;border-top:2px solid var(--navy-2);background:#F4F7FB}
.table-x tfoot td.num{text-align:end;font-variant-numeric:tabular-nums}
.row-title{font-weight:600;color:var(--ink)}
.row-sub{font-size:12.5px;color:var(--muted)}
.pos-amt{color:var(--green);font-weight:600}
.neg-amt{color:var(--red);font-weight:600}
.col-actions{width:1%;white-space:nowrap;text-align:end}
.act-btn{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--ink-2);display:inline-grid;place-items:center;font-size:14px;cursor:pointer;
}
.act-btn:hover{background:var(--blue-soft);color:var(--navy-2);border-color:var(--blue-line)}
.act-btn.danger:hover{background:var(--red-soft);color:var(--red);border-color:#F3C9C5}

/* Empty state */
.empty{text-align:center;padding:44px 20px}
.empty-icon{
  width:56px;height:56px;border-radius:16px;background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;font-size:24px;margin:0 auto 12px;
}
.empty-title{font-weight:700;font-size:16px;margin-bottom:4px}
.empty-body{color:var(--muted);font-size:14px;max-width:340px;margin:0 auto}

/* ---------------------------------------------------------------- */
/* Charts (pure CSS, no library)                                     */
/* ---------------------------------------------------------------- */
.bars{display:flex;align-items:stretch;gap:10px;height:200px;padding-top:8px}
.bar-group{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:0}
.bar-pair{flex:1;display:flex;align-items:flex-end;gap:3px;width:100%;justify-content:center;min-height:0}
.bar{width:16px;border-radius:5px 5px 0 0;min-height:3px;transition:height .35s ease}
.bar.inc{background:linear-gradient(180deg,#2FA35F,#1B7F4B)}
.bar.exp{background:linear-gradient(180deg,#D9483E,#C4342B)}
.bar-label{font-size:10.5px;color:var(--muted);font-family:var(--mono);white-space:nowrap}
.legend{display:flex;gap:14px;justify-content:center;margin-top:10px;font-size:12.5px;color:var(--muted)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-inline-end:5px}
.progress-thin{height:6px;border-radius:99px;background:var(--slate-soft);overflow:hidden}
.progress-thin span{display:block;height:100%;border-radius:99px;background:var(--blue)}

/* ---------------------------------------------------------------- */
/* Export sheet                                                      */
/* ---------------------------------------------------------------- */
.modal-sheet .modal-content{border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.modal-header{padding:16px 18px 10px;border-bottom:0;align-items:flex-start}
.modal-title{font-size:17px;font-weight:700;margin:0}
.modal-sub{font-size:13px;color:var(--muted);margin:2px 0 0}
.modal-body{padding:6px 14px 18px}
.modal-footer{padding:12px 18px;border-top:1px solid var(--line-soft);gap:8px}

.export-opt{
  display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);
}
.export-opt:hover{text-decoration:none;background:var(--blue-soft);border-color:var(--blue-line)}
.export-badge{
  width:42px;height:42px;flex:0 0 42px;border-radius:10px;display:grid;place-items:center;
  font-size:18px;color:#fff;
}
.export-badge.pdf{background:#C4342B}
.export-badge.csv{background:#1B7F4B}
.export-badge.xlsx{background:#12704A}
.export-badge.docx{background:#1B4C8F}
.export-badge.print{background:#5B6B7F}
.export-text{display:flex;flex-direction:column;min-width:0}
.export-text strong{font-size:14.5px;font-weight:600}
.export-text small{font-size:12px;color:var(--muted)}
.export-go{margin-inline-start:auto;color:var(--faint);font-size:14px}

/* ---------------------------------------------------------------- */
/* Pay stub                                                          */
/* ---------------------------------------------------------------- */
.stub{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.stub-head{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:3px solid var(--navy-2)}
.stub-brand{font-size:17px;font-weight:700;color:var(--navy-2);line-height:1.2}
.stub-kind{
  margin-inline-start:auto;font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--muted);text-transform:uppercase;
}
html[lang="ar"] .stub-kind{letter-spacing:0;text-transform:none;font-size:14px}
.stub-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line-soft)}
.stub-meta div{background:#fff;padding:10px 14px}
.stub-meta .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
html[lang="ar"] .stub-meta .l{text-transform:none;letter-spacing:0;font-size:12px}
.stub-meta .v{font-weight:600;font-size:14px;margin-top:2px}
.stub-section{padding:6px 16px;background:var(--blue-soft);font-weight:700;font-size:13px;color:var(--navy-2)}
.stub-line{display:flex;justify-content:space-between;padding:9px 16px;border-bottom:1px solid var(--line-soft);font-size:14px}
.stub-line.total{font-weight:700;border-bottom:0}
.stub-net{
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 16px;background:var(--navy-2);color:#fff;font-size:17px;font-weight:700;
}
.stub-net .v{font-family:var(--mono);font-size:20px}

/* ---------------------------------------------------------------- */
/* Login                                                             */
/* ---------------------------------------------------------------- */
.login-bg{
  min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 45%,var(--navy-3) 100%);
}
.login-card{
  width:100%;max-width:410px;background:#fff;border-radius:22px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden;
}
.login-top{text-align:center;padding:30px 26px 20px}
.login-logo{
  width:66px;height:66px;border-radius:19px;margin:0 auto 14px;overflow:hidden;
  background:var(--navy-2);display:grid;place-items:center;color:#fff;font-size:28px;
  box-shadow:0 6px 18px rgba(15,61,110,.3);
}
.login-logo img{width:100%;height:100%;object-fit:cover}
.login-title{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0}
.login-sub{color:var(--muted);font-size:14px;margin:4px 0 0}
.login-body{padding:0 26px 26px}
.demo-row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:start;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;margin-bottom:7px;cursor:pointer;font-family:inherit;font-size:13.5px;
}
.demo-row:hover{background:var(--blue-soft);border-color:var(--blue-line)}
.demo-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:0 0 8px}
.pw-wrap{position:relative}
.pw-toggle{
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--muted);width:36px;height:36px;
  border-radius:8px;cursor:pointer;font-size:16px;
}
.pw-toggle:hover{background:var(--slate-soft)}

/* ---------------------------------------------------------------- */
/* Alerts and toasts                                                 */
/* ---------------------------------------------------------------- */
.alert{padding:12px 15px;border-radius:var(--r-sm);font-size:14px;margin-bottom:14px;
  display:flex;gap:9px;align-items:flex-start;border:1px solid transparent}
.alert i{margin-top:2px}
.alert-success{background:var(--green-soft);color:var(--green);border-color:#BFE3CD}
.alert-danger{background:var(--red-soft);color:var(--red);border-color:#F3C9C5}
.alert-warning{background:var(--amber-soft);color:var(--amber);border-color:#F2DDB4}
.alert-info{background:var(--blue-soft);color:var(--navy-2);border-color:var(--blue-line)}

.toast-stack{position:fixed;inset-block-end:80px;inset-inline:14px;z-index:1080;
  display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast-x{
  background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r-sm);
  font-size:14px;box-shadow:var(--shadow-lg);animation:toastIn .22s ease;
  max-width:420px;margin:0 auto;pointer-events:auto;
}
.toast-x.ok{background:var(--green)}
.toast-x.bad{background:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Recovered-draft banner */
.draft-note{
  display:flex;align-items:center;gap:9px;padding:10px 13px;margin-bottom:12px;
  background:var(--amber-soft);border:1px solid #F2DDB4;border-radius:var(--r-sm);
  color:var(--amber);font-size:13.5px;
}
.draft-note button{margin-inline-start:auto}

/* Receipt thumbnail */
.receipt-thumb{
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:#F7F9FC;max-width:220px;margin-top:10px;
}
.receipt-thumb img{width:100%;display:block}

/* Bottom bar for mobile */
.fab-bar{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:1020;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:none;gap:8px;
}
.fab-bar .btn{flex:1}

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */
@media (max-width:768px){
  .page-title{font-size:22px}
  .wrap{padding:14px 12px 90px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-value{font-size:20px}
  .card-x-body{padding:14px}

  /* Tables collapse into stacked cards */
  .table-x.stack thead{display:none}
  .table-x.stack tbody tr{
    display:block;border:1px solid var(--line);border-radius:var(--r);
    margin-bottom:10px;background:#fff;padding:4px 0;
  }
  .table-x.stack tbody tr:nth-child(even){background:#fff}
  .table-x.stack tbody td{
    display:flex;justify-content:space-between;gap:14px;
    border-bottom:1px solid var(--line-soft);padding:9px 13px;text-align:end;
  }
  .table-x.stack tbody td:last-child{border-bottom:0}
  .table-x.stack tbody td::before{
    content:attr(data-label);font-size:12px;font-weight:600;color:var(--muted);
    text-align:start;flex:0 0 42%;
  }
  .table-x.stack tbody td.col-actions{justify-content:flex-end}
  .fab-bar{display:flex}
}

@media (min-width:769px){
  .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
  .page-actions{margin-top:0}
}

/* ---------------------------------------------------------------- */
/* Print                                                             */
/* ---------------------------------------------------------------- */
@media print{
  .sidebar,.topbar,.side-scrim,.no-print,.page-actions,.toast-stack{display:none !important}
  .shell{margin-inline-start:0 !important}
  body{background:#fff}
  .wrap{max-width:none;padding:0}
  .card-x{border:0;box-shadow:none;margin:0 0 10px}
  .table-x thead th{background:#134C8B !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .stub-net{background:#134C8B !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* =====================================================================
   Application shell — sidebar + topbar
   ===================================================================== */
:root{ --side-w:260px; --top-h:60px; }

.sidebar{
  position:fixed;inset-block:0;inset-inline-start:0;width:var(--side-w);z-index:1040;
  background:linear-gradient(180deg,var(--navy-2),var(--navy));
  display:flex;flex-direction:column;color:rgba(255,255,255,.86);
  transform:translateX(0);transition:transform .22s ease;
}
html[dir="rtl"] .sidebar{transform:translateX(0)}

.side-brand{display:flex;align-items:center;gap:11px;padding:15px 16px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1)}
.side-brand:hover{text-decoration:none;color:#fff}
.side-brand .brand-mark{width:40px;height:40px;flex:0 0 40px;border-radius:12px;
  overflow:hidden;background:#fff;display:grid;place-items:center}
.side-brand .brand-mark img{width:100%;height:100%;object-fit:cover}
.side-brand-text{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.25}
.side-brand-text strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-brand-text small{font-size:11.5px;opacity:.7}

.side-nav{flex:1;overflow-y:auto;padding:10px 10px 16px;scrollbar-width:thin}
.side-nav::-webkit-scrollbar{width:5px}
.side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}

.side-link{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  color:rgba(255,255,255,.78);font-size:14.5px;font-weight:500;margin-bottom:2px;
}
.side-link:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.side-link.on{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.side-link i{font-size:16px;width:19px;text-align:center;flex:0 0 19px}
.side-link.sub{padding-inline-start:16px;font-size:14px}
.side-link.danger{color:#FFB3AC}
.side-link.danger:hover{background:rgba(196,52,43,.28);color:#fff}

.side-group{margin:6px 0 2px}
.side-group-head{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;
  background:transparent;border:0;color:rgba(255,255,255,.58);font-family:inherit;
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  cursor:pointer;border-radius:10px;
}
html[lang="ar"] .side-group-head{letter-spacing:0;text-transform:none;font-size:13px}
.side-group-head:hover{background:rgba(255,255,255,.07);color:#fff}
.side-group-head i:first-child{font-size:15px;width:19px;flex:0 0 19px}
.side-caret{margin-inline-start:auto;font-size:11px;transition:transform .2s}
.side-group.open .side-caret{transform:rotate(180deg)}
.side-group-body{display:none;padding-inline-start:8px}
.side-group.open .side-group-body{display:block}

.side-foot{padding:10px;border-top:1px solid rgba(255,255,255,.1)}
.side-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1035;backdrop-filter:blur(2px)}

/* Shell */
.shell{margin-inline-start:var(--side-w);min-height:100vh;display:flex;flex-direction:column}
.shell.bare{margin-inline-start:0}

.topbar{
  position:sticky;top:0;z-index:1030;height:var(--top-h);
  display:flex;align-items:center;gap:12px;padding:0 16px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-title{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.topbar-title strong{font-size:16.5px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-title small{font-size:12px;color:var(--muted)}
.topbar-actions{margin-inline-start:auto;display:flex;align-items:center;gap:8px}

.icon-btn{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);display:inline-grid;place-items:center;
  font-size:17px;cursor:pointer;flex:0 0 38px;
}
.icon-btn:hover{background:var(--blue-soft);color:var(--navy-2);text-decoration:none}
.avatar-btn{
  width:38px;height:38px;border-radius:50%;border:0;background:var(--navy-2);color:#fff;
  font-size:13px;font-weight:700;cursor:pointer;flex:0 0 38px;
}
.lang-switch{display:flex;background:var(--slate-soft);border-radius:9px;padding:3px;gap:2px}
.lang-switch a{color:var(--muted);font-size:12.5px;font-weight:700;padding:5px 10px;
  border-radius:7px;line-height:1}
.lang-switch a:hover{text-decoration:none;background:#fff}
.lang-switch a.on{background:var(--navy-2);color:#fff}

.wrap{flex:1;max-width:1320px;width:100%;margin:0 auto;padding:18px 16px 40px}
.wrap-bare{max-width:none;padding:0}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%);box-shadow:8px 0 32px rgba(0,0,0,.3)}
  html[dir="rtl"] .sidebar{transform:translateX(100%)}
  body.side-open .sidebar{transform:translateX(0)}
  .shell{margin-inline-start:0}
}
@media (min-width:992px){ .side-scrim{display:none !important} }

/* ---------------------------------------------------------------- */
/* Daily close — a dense sheet, closer to the paper it replaces      */
/* ---------------------------------------------------------------- */
.close-bar{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 14px;margin-bottom:12px;box-shadow:var(--shadow);
}
.close-date{display:flex;flex-direction:column;gap:3px;min-width:190px}
.close-date .form-label{margin:0}
.close-date .form-control{padding:8px 11px}
.close-day{display:flex;flex-direction:column;line-height:1.3}
.close-day strong{font-size:15px}
.close-day small{color:var(--muted);font-size:12.5px}
.close-bar .btn{margin-inline-start:auto}

.close-body{padding:0 14px 14px}
.grp{
  margin:0 -14px 10px;padding:6px 14px;background:var(--blue-soft);
  font-size:12px;font-weight:700;color:var(--navy-2);letter-spacing:.04em;text-transform:uppercase;
}
.grp:not(:first-child){margin-top:16px}
html[lang="ar"] .grp{text-transform:none;letter-spacing:0;font-size:13px}

.close-grid{display:grid;gap:9px;grid-template-columns:repeat(3,1fr)}
.close-grid.four{grid-template-columns:repeat(4,1fr)}
.close-grid.five{grid-template-columns:repeat(5,1fr)}
.close-grid.six{grid-template-columns:repeat(6,1fr)}
.close-grid label{display:flex;flex-direction:column;gap:3px;min-width:0}
.close-grid label > span{font-size:11.5px;font-weight:600;color:var(--muted)}
.close-grid .form-control{padding:8px 10px;font-size:14.5px}
.close-grid .calc output{
  display:block;padding:8px 10px;border:1px dashed var(--line);border-radius:var(--r-sm);
  background:var(--slate-soft);font-family:var(--mono);font-weight:600;font-size:14.5px;
}
.totals-row{margin-top:14px;padding-top:12px;border-top:2px solid var(--navy-2)}
.tot{display:flex;flex-direction:column;gap:2px}
.tot span{font-size:11.5px;font-weight:600;color:var(--muted)}
.tot output{font-family:var(--mono);font-weight:700;font-size:17px}
.tot.strong output{font-size:20px;color:var(--navy-2)}
.notes-row{display:flex;flex-direction:column;gap:3px;margin-top:14px}
.notes-row > span{font-size:11.5px;font-weight:600;color:var(--muted)}

.loc-badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:var(--blue-soft);color:var(--navy-2);font-size:12.5px;font-weight:600;
  white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis;
}
.loc-badge i{font-size:12px}

@media (max-width:900px){
  .close-grid,.close-grid.four,.close-grid.five,.close-grid.six{grid-template-columns:repeat(2,1fr)}
  .loc-badge{display:none}
}

/* Short explanations that sit under a group heading or a total */
.grp-note{
  margin:-4px 0 10px;font-size:12px;color:var(--muted);
  display:flex;align-items:flex-start;gap:6px;line-height:1.45;
}
.grp-note i{margin-top:2px;color:var(--blue)}
.tot small{font-size:11px;color:var(--faint);line-height:1.35;margin-top:2px}
.tot.strong small{color:var(--muted)}

/* ---------------------------------------------------------------- */
/* Page-access tick boxes                                            */
/* ---------------------------------------------------------------- */
.perm-head{
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line-soft);
}
.perm-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.perm-card{border:1px solid var(--line);border-radius:var(--r);padding:10px;background:#fff}
.perm-card-head{
  margin:-10px -10px 8px;padding:9px 11px;background:var(--blue-soft);
  border-radius:var(--r) var(--r) 0 0;border:0;font-size:13px;
}
.perm-card-head strong{color:var(--navy-2);font-size:12.5px;letter-spacing:.03em;text-transform:uppercase}
html[lang="ar"] .perm-card-head strong{text-transform:none;letter-spacing:0;font-size:13.5px}
.perm-item{border:0;padding:6px 4px;font-size:13.5px;background:transparent;margin:0}
.perm-item:hover{background:var(--blue-soft);border-radius:7px}
.perm-grid.is-locked{opacity:.62}

/* =====================================================================
   Responsive — phones, tablets, laptops and wide screens
   ===================================================================== */

/* Wide desktops: let the content breathe rather than stretch forever */
@media (min-width:1600px){
  .wrap{max-width:1520px}
  .close-grid.six{grid-template-columns:repeat(6,1fr)}
}

/* Laptops and small desktops */
@media (max-width:1280px){
  .close-grid.six{grid-template-columns:repeat(3,1fr)}
  .close-grid.five{grid-template-columns:repeat(3,1fr)}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* Tablets */
@media (max-width:1024px){
  :root{--side-w:236px}
  .close-grid.four{grid-template-columns:repeat(2,1fr)}
  .perm-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
}

/* Phones */
@media (max-width:767.98px){
  :root{--top-h:56px}
  body{font-size:15px}
  .wrap{padding:12px 11px 84px}
  .topbar{padding:0 11px;gap:9px}
  .topbar-title strong{font-size:15px}
  .topbar-title small{display:none}
  .page-title{font-size:20px}

  .stat-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat{padding:11px 12px}
  .stat-value{font-size:18px}
  .stat-meta{font-size:11px}

  .close-grid,.close-grid.four,.close-grid.five,.close-grid.six{grid-template-columns:repeat(2,1fr)}
  .close-bar{padding:10px 11px;gap:10px}
  .close-date{min-width:100%;order:-1}
  .close-bar .btn{margin-inline-start:0}
  .tot output{font-size:15px}
  .tot.strong output{font-size:18px}

  .card-x-body{padding:12px}
  .card-x-head{padding:11px 12px}
  .form-row{grid-template-columns:1fr}
  .perm-grid{grid-template-columns:1fr}

  /* Buttons become comfortable tap targets */
  .btn{padding:12px 16px;min-height:44px}
  .btn-sm{min-height:38px}
  .act-btn{width:38px;height:38px}
  .icon-btn,.avatar-btn{width:40px;height:40px;flex-basis:40px}
  .form-control,.form-select,input,select,textarea{font-size:16px} /* stops iOS zooming in */

  .modal-sheet .modal-dialog{margin:0;position:fixed;inset-block-end:0;inset-inline:0;max-width:none}
  .modal-sheet .modal-content{border-radius:20px 20px 0 0;max-height:92vh}
  .card-x-foot{display:flex;flex-wrap:wrap;gap:8px}
  .card-x-foot .btn{flex:1 1 auto}
}

/* Very narrow phones only */
@media (max-width:360px){
  .stat-grid{grid-template-columns:1fr}
  .close-grid,.close-grid.four,.close-grid.five,.close-grid.six{grid-template-columns:1fr}
  .side-brand-text small{display:none}
}

/* Landscape phones: reclaim vertical space */
@media (max-height:520px) and (orientation:landscape){
  .close-bar{padding:7px 11px}
  .grp{padding:4px 14px}
  .card-x{margin-bottom:9px}
}

/* Fine-pointer devices keep the denser layout; touch gets more room */
@media (pointer:coarse){
  .check{padding:12px}
  .side-link{padding:12px}
  .table-x tbody td{padding:13px}
}

/* =====================================================================
   Themes
   Only the brand colours change; every other rule reads these variables,
   so a theme is a handful of values rather than a second stylesheet.
   ===================================================================== */
html[data-theme="forest"]{
  --navy:#14432B; --navy-2:#1B5B3A; --navy-3:#237049; --blue:#2E8B57;
  --blue-soft:#E7F4EC; --blue-line:#C7E4D3;
}
html[data-theme="burgundy"]{
  --navy:#4A1220; --navy-2:#6B1B2D; --navy-3:#8A2439; --blue:#A32B45;
  --blue-soft:#FBEAEE; --blue-line:#F0CBD4;
}
html[data-theme="teal"]{
  --navy:#0C3B44; --navy-2:#125A66; --navy-3:#177483; --blue:#128C9B;
  --blue-soft:#E4F4F6; --blue-line:#C2E5EA;
}
html[data-theme="plum"]{
  --navy:#331A4D; --navy-2:#4B2670; --navy-3:#60338C; --blue:#7A42AE;
  --blue-soft:#F1EAF9; --blue-line:#DCCBEF;
}
html[data-theme="charcoal"]{
  --navy:#1C2126; --navy-2:#2C343C; --navy-3:#3D4852; --blue:#4A6785;
  --blue-soft:#EDF1F5; --blue-line:#D3DCE5;
}
html[data-theme="amber"]{
  --navy:#4A2E07; --navy-2:#7A4C0B; --navy-3:#9A6110; --blue:#B87514;
  --blue-soft:#FBF1DF; --blue-line:#F0DCB6;
}

/* The swatches on the settings and profile screens */
.theme-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.theme-opt{position:relative}
.theme-opt input{position:absolute;opacity:0;pointer-events:none}
.theme-opt span{
  display:flex;align-items:center;gap:9px;padding:10px 12px;cursor:pointer;
  border:2px solid var(--line);border-radius:var(--r);background:#fff;font-size:14px;font-weight:600;
}
.theme-opt input:checked + span{border-color:var(--blue);background:var(--blue-soft)}
.theme-opt input:focus-visible + span{box-shadow:0 0 0 3px rgba(24,119,210,.2)}
.theme-dot{
  width:26px;height:26px;flex:0 0 26px;border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}

/* ---------------------------------------------------------------- */
/* Money in / money out switch on the Daily form                     */
/* ---------------------------------------------------------------- */

/* ---------------------------------------------------------------- */
/* Daily Transactions — compact entry form                           */
/* ---------------------------------------------------------------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.req{color:var(--red);font-weight:700}
.field-error{
  display:flex;align-items:center;gap:5px;margin:4px 0 0;
  font-size:12.5px;color:var(--red);
}
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--red);background:#FFFBFB}
.form-control.is-invalid:focus{box-shadow:0 0 0 3px rgba(196,52,43,.15)}

.txn-body{padding:14px 16px}
.txn-grid{display:grid;gap:10px 12px;grid-template-columns:repeat(4,1fr)}
.txn-grid .field{margin:0;min-width:0}
.txn-grid .field-wide{grid-column:span 2}
.txn-grid .form-control,.txn-grid .form-select{padding:9px 11px}
.txn-grid .form-label{margin-bottom:4px;font-size:12.5px}

/* Type switch */
.entry-type{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px;padding:0;border:0}
.entry-type.has-error span{border-color:var(--red)}
.entry-type .et-opt{position:relative;margin:0}
.entry-type input{position:absolute;opacity:0;pointer-events:none}
.entry-type span{
  display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;
  padding:11px 12px;border:2px solid transparent;border-radius:var(--r);
  cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s;
}
/* Each side is tinted from the start, so the two are told apart at a glance
   rather than only once one has been chosen. */
.et-out span{background:var(--red-soft);border-color:#F1D3D0}
.et-out span i,.et-out span strong{color:var(--red)}
.et-in span{background:var(--green-soft);border-color:#C6E5D3}
.et-in span i,.et-in span strong{color:var(--green)}
.et-opt span:hover{filter:brightness(.985)}
.entry-type span i{font-size:19px}
.entry-type span strong{font-size:14.5px}
.entry-type span small{font-size:11.5px;color:var(--muted);line-height:1.3}
.entry-type input:focus-visible + span{box-shadow:0 0 0 3px rgba(24,119,210,.28)}
.et-out input:checked + span{
  border-color:var(--red);background:#F8DAD6;box-shadow:0 2px 10px rgba(196,52,43,.18);
}
.et-in input:checked + span{
  border-color:var(--green);background:#D6EEDF;box-shadow:0 2px 10px rgba(27,127,75,.18);
}
/* A tick marks the chosen side, so the choice is not carried by colour alone. */
.et-opt input:checked + span::after{
  content:'\2713';position:absolute;inset-block-start:8px;inset-inline-end:11px;
  font-size:13px;font-weight:700;
}
.et-out input:checked + span::after{color:var(--red)}
.et-in input:checked + span::after{color:var(--green)}

/* Running total */
.txn-sum{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  margin:12px 0;padding:10px 14px;border-radius:var(--r-sm);
  background:var(--slate-soft);border:1px solid var(--line-soft);
}
.txn-sum > div{display:flex;flex-direction:column;line-height:1.25}
.txn-sum span{font-size:11px;font-weight:600;color:var(--muted)}
.txn-sum output{font-family:var(--mono);font-weight:600;font-size:14.5px}
.txn-sum .grand{margin-inline-start:auto;text-align:end}
.txn-sum .grand output{font-size:19px;font-weight:700;color:var(--navy-2)}
.txn-form[data-type="income"] .txn-sum{background:var(--green-soft);border-color:#BFE3CD}
.txn-form[data-type="expense"] .txn-sum{background:var(--red-soft);border-color:#F3C9C5}

/* Receipt */
.receipt-panel{border:1px dashed var(--line);border-radius:var(--r);margin:12px 0}
.receipt-panel.has-error{border-color:var(--red);background:#FFFBFB}
.rp-head{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 13px;border-bottom:1px dashed var(--line);background:#FAFBFD;
  border-radius:var(--r) var(--r) 0 0;font-size:13.5px;
}
.rp-head small{color:var(--muted);font-size:11.5px;margin-inline-start:auto}
.rp-body{padding:11px 13px}
.rp-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rp-name{max-width:220px}
.rp-file{
  display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
}
.rp-file img{width:46px;height:46px;object-fit:cover;border-radius:7px}
.rp-file .rp-icon{font-size:26px;color:var(--muted)}
.rp-file-name{font-size:13px;word-break:break-all;flex:1;min-width:0}
.rp-remove{margin-top:9px;max-width:220px}

.txn-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn.is-loading{opacity:.75;pointer-events:none;position:relative}
.btn.is-loading i{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn:focus-visible,.act-btn:focus-visible,a.btn:focus-visible{
  outline:3px solid rgba(24,119,210,.45);outline-offset:2px;
}

/* Log filters and totals */
.log-filters{padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.lf-grid{display:grid;gap:8px;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr 1.2fr auto auto;align-items:center}
.log-totals{display:flex;flex-wrap:wrap;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
.lt{
  flex:1 1 150px;display:flex;flex-direction:column;line-height:1.3;
  padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--line-soft);
}
.lt span{font-size:11px;font-weight:600;color:var(--muted)}
.lt strong{font-size:16px;font-variant-numeric:tabular-nums}
.lt.in{background:var(--green-soft);border-color:#BFE3CD}
.lt.out{background:var(--red-soft);border-color:#F3C9C5}
.lt.net{background:var(--blue-soft);border-color:var(--blue-line)}

/* Type badges */
.badge-t{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;white-space:nowrap;
}
.badge-t.in{background:var(--green-soft);color:var(--green)}
.badge-t.out{background:var(--red-soft);color:var(--red)}
.badge-t.draft{background:var(--slate-soft);color:var(--muted)}

@media (max-width:1200px){
  .txn-grid{grid-template-columns:repeat(3,1fr)}
  .lf-grid{grid-template-columns:repeat(3,1fr);}
  .lf-grid .btn{grid-column:auto}
}
@media (max-width:820px){
  .txn-grid{grid-template-columns:repeat(2,1fr)}
  .txn-grid .field-wide{grid-column:span 2}
  .lf-grid{grid-template-columns:repeat(2,1fr)}
  .txn-sum .grand{margin-inline-start:0;width:100%;text-align:start;
    padding-top:8px;border-top:1px solid rgba(0,0,0,.08)}
}
@media (max-width:560px){
  .txn-grid,.lf-grid{grid-template-columns:1fr}
  .txn-grid .field-wide{grid-column:span 1}
  .entry-type{grid-template-columns:1fr}
  .rp-name{max-width:none;width:100%}
  .txn-foot .btn{flex:1 1 100%}
}

.rp-existing{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:9px}
.rp-existing .rp-remove{margin:0}

/* ---------------------------------------------------------------- */
/* Owner Draws — amber, so it reads as neither income nor expense    */
/* ---------------------------------------------------------------- */
:root{ --draw:#B4740A; --draw-dark:#8A5907; --draw-soft:#FDF1DC; --draw-line:#F2DDB4; }

.btn-draw{background:var(--draw);color:#fff;border-color:var(--draw)}
.btn-draw:hover{background:var(--draw-dark);color:#fff}
.btn-draw:disabled{background:var(--draw);opacity:.5}
.btn-draw:focus-visible{outline:3px solid rgba(180,116,10,.45);outline-offset:2px}
.draw-amt{color:var(--draw);font-weight:600}
.lt.draw{background:var(--draw-soft);border-color:var(--draw-line)}
.lt.draw strong{color:var(--draw)}

.draw-dialog{max-width:640px}
.draw-modal{border:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.draw-head{
  display:flex;align-items:flex-start;gap:12px;padding:16px 18px 12px;
  background:var(--draw-soft);border-bottom:1px solid var(--draw-line);
}
.draw-badge{
  width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;
  background:var(--draw);color:#fff;font-size:19px;
}
.draw-head .modal-title{font-size:17px;font-weight:700;margin:0}
.draw-head .modal-sub{font-size:12.5px;color:var(--ink-2);margin:3px 0 0;line-height:1.45;max-width:46ch}
.draw-head .btn-close{margin-inline-start:auto}

.draw-body{padding:16px 18px}
.draw-grid{display:grid;gap:12px 14px;grid-template-columns:repeat(3,1fr)}
.draw-grid .field{margin:0;min-width:0}
.draw-grid .field-full{grid-column:1/-1}
.draw-grid .form-label{margin-bottom:4px;font-size:12.5px}
.opt{font-weight:500;color:var(--faint);font-size:11.5px}

/* Amount carries the currency inside the box and reads right-aligned */
.money-wrap{position:relative}
.money-sym{
  position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-weight:600;font-size:14.5px;pointer-events:none;
}
.money-field{
  padding-inline-start:28px;text-align:end;
  font-family:var(--mono);font-weight:700;font-size:17px;
}
.money-field::-webkit-outer-spin-button,
.money-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.money-field{-moz-appearance:textfield}

.char-count{font-size:11px;color:var(--faint)}
.draw-foot{padding:12px 18px;gap:8px;background:#FAFBFD}
.draws-filters{grid-template-columns:1.6fr 1.2fr 1fr 1fr auto auto}

@media (max-width:820px){
  .draw-grid{grid-template-columns:repeat(2,1fr)}
  .draws-filters{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .draw-dialog{max-width:none;margin:0}
  .draw-modal{border-radius:18px 18px 0 0}
  .draw-grid,.draws-filters{grid-template-columns:1fr}
  .draw-head .modal-sub{max-width:none}
  .draw-foot{flex-wrap:wrap}
  .draw-foot .btn{flex:1 1 100%}
}

/* A search box that is mid-request */
input.is-searching{
  background-image:linear-gradient(90deg,transparent,rgba(24,119,210,.14),transparent);
  background-size:200% 100%;background-repeat:no-repeat;
  animation:searching 1s linear infinite;
}
@keyframes searching{from{background-position:200% 0}to{background-position:-200% 0}}
.money-field.no-sym{padding-inline-start:11px}

/* ---- The newer themes ---- */
html[data-theme="indigo"]{
  --navy:#312E81; --navy-2:#4338CA; --navy-3:#4F46E5; --blue:#6366F1;
  --blue-soft:#EEF0FE; --blue-line:#D3D6FB;
}
html[data-theme="sky"]{
  --navy:#0C4A6E; --navy-2:#0369A1; --navy-3:#0284C7; --blue:#0EA5E9;
  --blue-soft:#E5F4FD; --blue-line:#C0E4F8;
}
html[data-theme="emerald"]{
  --navy:#064E3B; --navy-2:#047857; --navy-3:#059669; --blue:#10B981;
  --blue-soft:#E6F7F0; --blue-line:#C3EBDA;
}
html[data-theme="sunset"]{
  --navy:#7C2D12; --navy-2:#C2410C; --navy-3:#EA580C; --blue:#F97316;
  --blue-soft:#FEF0E6; --blue-line:#FBD9C2;
}
html[data-theme="rose"]{
  --navy:#881337; --navy-2:#BE123C; --navy-3:#E11D48; --blue:#F43F5E;
  --blue-soft:#FDEBEF; --blue-line:#F9CDD6;
}
html[data-theme="violet"]{
  --navy:#4C1D95; --navy-2:#6D28D9; --navy-3:#7C3AED; --blue:#8B5CF6;
  --blue-soft:#F2ECFE; --blue-line:#DDCFFA;
}
html[data-theme="slate"]{
  --navy:#1E293B; --navy-2:#334155; --navy-3:#475569; --blue:#64748B;
  --blue-soft:#EFF2F6; --blue-line:#D5DBE4;
}
html[data-theme="midnight"]{
  --navy:#0B1424; --navy-2:#111C33; --navy-3:#1B2A47; --blue:#3B6CA8;
  --blue-soft:#EAEFF6; --blue-line:#CBD8E8;
}

/* ---- Theme picker in the top bar ---- */
.theme-btn{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:#fff;display:inline-grid;place-items:center;cursor:pointer;flex:0 0 38px;padding:0;
}
.theme-btn:hover{background:var(--blue-soft);border-color:var(--blue-line)}
.theme-btn .swatch{
  width:20px;height:20px;border-radius:6px;display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
.theme-menu{padding:12px;min-width:262px}
.theme-menu h6{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 9px;
}
html[lang="ar"] .theme-menu h6{letter-spacing:0;text-transform:none;font-size:12.5px}
.theme-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.theme-pick{
  position:relative;width:100%;aspect-ratio:1;border-radius:9px;border:2px solid transparent;
  cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.theme-pick:hover{transform:scale(1.07)}
.theme-pick.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px #fff inset}
.theme-pick.on::after{
  content:'\2713';position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:13px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.theme-name{margin-top:9px;font-size:12px;color:var(--muted);text-align:center}

.install-step{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.install-step:last-child{border-bottom:0}
.is-num{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--navy-2);font-size:12.5px;font-weight:700;
}
.install-step strong{font-size:14px}
.install-step p{margin:2px 0 0;font-size:13px;color:var(--muted);line-height:1.5}