/* ==========================================================================
   نظام إدارة المحل — Design System
   --------------------------------------------------------------------------
   One calm light theme built on a deep teal-green identity:
     primary #315C5B · secondary #6F918D · ground #F6F8F7 · ink #151A1A
   Surfaces stay white with hairline #E3E9E7 borders; the accent colour is
   reserved for primary actions, active navigation, and key figures. Status
   colours (success / warning / error / info) keep their own semantic hues.
   No purple, beige, or gold anywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Type */
  --font: "IBM Plex Sans Arabic", "Inter", "Segoe UI", sans-serif;

  /* Monochrome ramp — the entire non-status palette lives here */
  --white:#FFFFFF;
  --gray-50:#FAFAFA;
  --gray-100:#F6F6F6;   /* hover */
  --gray-150:#F1F1F1;
  --gray-200:#ECECEC;   /* border */
  --gray-300:#DFDFDF;
  --gray-400:#B9B9BE;
  --gray-500:#6B7280;   /* secondary text */
  --gray-600:#52525B;
  --gray-700:#3F3F46;
  /* The two darkest steps ARE the identity: every legacy accent that painted
     itself near-black (buttons, active pills, selection, progress, brand
     marks, the hero) now renders in the brand teal without touching each
     rule. True near-black text comes from --text (#151A1A), not the ramp. */
  --gray-800:#294E4D;
  --gray-900:#315C5B;

  /* Brand identity — the ONE accent family */
  --primary:#315C5B;
  --primary-hover:#294E4D;
  --primary-active:#22403F;
  --primary-soft:#E7EFED;      /* selected nav / soft chips */
  --primary-soft-border:#C9DAD6;
  --secondary:#6F918D;

  /* Semantic surfaces */
  --bg:#F6F8F7;
  --surface:var(--white);
  --surface-subtle:#F1F5F4;
  --surface-hover:#ECF1F0;
  --border:#E3E9E7;
  --border-strong:#CBD8D4;

  /* Semantic text */
  --text:#151A1A;
  --text-secondary:#5C6B68;
  --text-tertiary:#93A5A1;
  --text-inverse:var(--white);

  /* Primary action */
  --btn-primary-bg:var(--primary);
  --btn-primary-bg-hover:var(--primary-hover);
  --btn-primary-text:var(--white);

  /* Status — semantic hues only */
  --success:#0F7B4F; --success-bg:#ECFDF3; --success-border:#A9E6C4;
  --warning:#B54708; --warning-bg:#FFFAEB; --warning-border:#FBDF96;
  --error:#B42318;   --error-bg:#FEF3F2;   --error-border:#FBCFCA;
  --info:#175CD3;    --info-bg:#EFF8FF;    --info-border:#B0DBFF;

  /* Focus */
  --focus-ring:0 0 0 3px rgba(49,92,91,.16);
  --focus-ring-error:0 0 0 3px rgba(180,35,24,.12);

  /* Radius — restrained. Large radii read consumer, not enterprise. */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-full:999px;

  /* Elevation — used sparingly; borders do the structural work */
  --shadow-xs:0 1px 2px rgba(17,17,17,.04);
  --shadow-sm:0 1px 3px rgba(17,17,17,.06),0 1px 2px rgba(17,17,17,.04);
  --shadow-md:0 4px 12px rgba(17,17,17,.07),0 2px 4px rgba(17,17,17,.04);
  --shadow-lg:0 12px 32px rgba(17,17,17,.10),0 4px 8px rgba(17,17,17,.04);
  --shadow-xl:0 24px 56px rgba(17,17,17,.14);

  /* Spacing scale (8px base) */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  --s-20:80px; --s-24:96px; --s-32:128px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.12s var(--ease);
  --t:.18s var(--ease);
  --t-slow:.3s var(--ease);

  /* Layout */
  --sidebar-w:248px;
  --container:1200px;
  --container-narrow:760px;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
/* overflow-x:hidden on the root closes an RTL quirk where a nested horizontal
   scroll container (a wide `.table-wrap` on a narrow screen) leaks its
   left-side overflow onto the viewport even though <body> and the content box
   already contain it — so the whole page scrolled sideways on mobile. On the
   root, x:hidden makes the viewport clip horizontally while y stays scrollable
   (used value auto), so vertical scrolling and the sticky topbar are
   untouched. Page-level fixed modals are viewport-positioned, not clipped. */
html{-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1;
}
h1,h2,h3,h4,h5{margin:0;font-weight:600;line-height:1.25;letter-spacing:-.018em;color:var(--text);}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
::selection{background:var(--gray-900);color:var(--white);}

/* Numerals sit inside RTL prose — tabular figures keep money columns aligned */
.tnum,.stat-value,.num,td.num,.metric-value{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--r-full);border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--gray-400);background-clip:content-box;}

:focus-visible{outline:2px solid var(--gray-900);outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes scaleIn{from{opacity:0;transform:translateY(8px) scale(.985);}to{opacity:1;transform:none;}}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY SCALE
   Hierarchy comes from weight and spacing, never from oversized text.
   -------------------------------------------------------------------------- */
.display{font-size:44px;line-height:1.12;font-weight:600;letter-spacing:-.032em;}
.h1{font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.026em;}
.h2{font-size:22px;line-height:1.28;font-weight:600;letter-spacing:-.02em;}
.h3{font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.015em;}
.h4{font-size:15px;line-height:1.4;font-weight:600;letter-spacing:-.01em;}
.body-lg{font-size:16px;line-height:1.65;color:var(--text-secondary);}
.body{font-size:14px;line-height:1.6;}
.body-sm{font-size:13px;line-height:1.55;}
.caption{font-size:12px;line-height:1.5;color:var(--text-secondary);}
.overline{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-tertiary);}
.text-secondary{color:var(--text-secondary);}
.text-tertiary{color:var(--text-tertiary);}

@media(max-width:768px){
  .display{font-size:32px;letter-spacing:-.028em;}
  .h1{font-size:25px;}
  .h2{font-size:20px;}
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--s-6);}
.container-narrow{width:100%;max-width:var(--container-narrow);margin:0 auto;padding:0 var(--s-6);}
.stack{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);}
.wrap{flex-wrap:wrap;}
.grow{flex:1;min-width:0;}
.gap-1{gap:var(--s-1);} .gap-2{gap:var(--s-2);} .gap-3{gap:var(--s-3);}
.gap-4{gap:var(--s-4);} .gap-6{gap:var(--s-6);} .gap-8{gap:var(--s-8);}
/* `.hidden` lives at the very end of this file — see section 18. It is a single
   class, so every later rule that sets `display` (.field, .banner, .badge,
   .auth-form …) would out-rank it on source order alone and leave the element
   visible. It cannot use !important either: an !important rule would beat the
   inline `style.display` several screens toggle visibility with. */
.section-pad{padding:var(--s-24) 0;}
@media(max-width:768px){ .section-pad{padding:var(--s-16) 0;} .container,.container-narrow{padding:0 var(--s-5);} }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--font);font-size:13.5px;font-weight:500;line-height:1;
  padding:0 var(--s-4);height:38px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  background:var(--btn-primary-bg);color:var(--btn-primary-text);border-color:var(--btn-primary-bg);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t),opacity var(--t);
}
.btn:hover{background:var(--btn-primary-bg-hover);border-color:var(--btn-primary-bg-hover);}
.btn:active{background:var(--gray-900);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--gray-900);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;}

.btn-secondary{background:var(--white);color:var(--text);border-color:var(--border);box-shadow:var(--shadow-xs);}
.btn-secondary:hover{background:var(--surface-hover);border-color:var(--border-strong);}
.btn-secondary:active{background:var(--gray-150);}

.btn-ghost{background:transparent;color:var(--text);border-color:transparent;box-shadow:none;}
.btn-ghost:hover{background:var(--surface-hover);border-color:transparent;}

.btn-danger{background:var(--white);color:var(--error);border-color:var(--border);box-shadow:var(--shadow-xs);}
.btn-danger:hover{background:var(--error-bg);border-color:var(--error-border);}

.btn-link{background:none;border:none;padding:0;height:auto;color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gray-300);font-weight:500;box-shadow:none;}
.btn-link:hover{background:none;border:none;text-decoration-color:var(--gray-900);}

.btn-sm{height:32px;font-size:13px;padding:0 var(--s-3);border-radius:var(--r-xs);}
.btn-lg{height:44px;font-size:14.5px;padding:0 var(--s-5);}
.btn-block{width:100%;}
.btn-icon{width:36px;height:36px;padding:0;}
.btn svg{width:15px;height:15px;flex-shrink:0;}
.btn.hidden{display:none;}

/* --------------------------------------------------------------------------
   6. FORMS
   -------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.label{font-size:12.5px;font-weight:500;color:var(--text);}
.hint{font-size:12px;color:var(--text-secondary);line-height:1.55;}
.input,input[type="text"],input[type="password"],input[type="email"],input[type="number"],
input[type="date"],input[type="tel"],input[type="search"],select,textarea{
  width:100%;
  font-family:var(--font);font-size:13.5px;line-height:1.4;color:var(--text);
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:0 var(--s-3);height:38px;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
textarea{height:auto;min-height:88px;padding:10px var(--s-3);resize:vertical;line-height:1.6;}
.input::placeholder,input::placeholder,textarea::placeholder{color:var(--text-tertiary);}
.input:hover,input:hover,select:hover,textarea:hover{border-color:var(--border-strong);}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gray-900);box-shadow:var(--focus-ring);}
.input:disabled,input:disabled,select:disabled{background:var(--gray-50);color:var(--text-tertiary);cursor:not-allowed;}
.input.is-error,input.is-error{border-color:var(--error);}
.input.is-error:focus,input.is-error:focus{box-shadow:var(--focus-ring-error);}
/* `select.input` as well as `select`: `.input` is in the field rule above, so a
   <select class="input"> — which is every select on admin.html — matched that
   rule at CLASS specificity and out-ranked a lone `select`, losing both the
   drawn chevron and the gutter that keeps the option text out from under it.
   appearance:none removes the native arrow, which otherwise renders a second
   chevron right beside this one. */
select,select.input{
  appearance:none;-webkit-appearance:none;
  cursor:pointer;padding-inline-end:var(--s-8);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left var(--s-3) center;background-size:15px;
}
input[type="file"]{height:auto;padding:8px var(--s-3);cursor:pointer;}
.field-error{display:none;font-size:12px;color:var(--error);}
.field-error.show{display:block;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-4);}
.form-row{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:flex-end;}

.checkbox{display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;font-size:13.5px;}
.checkbox input{width:16px;height:16px;accent-color:var(--gray-900);cursor:pointer;margin:0;}

/* Password field with a visibility toggle — login / register / reset-password.
   PHYSICAL sides on purpose. The input itself is dir="ltr", so a logical
   padding-inline-end on it resolves to the RIGHT, while the button is
   positioned inside the RTL card and resolves to the LEFT. Using logical
   properties here puts the reserved space and the button on opposite sides
   and the typed text runs under the icon. */
.pw{position:relative;display:block;}
.pw input{padding-left:40px;}
.pw-toggle{
  position:absolute;left:2px;top:2px;width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  background:none;border:none;border-radius:var(--r-xs);
  color:var(--text-tertiary);cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast);
}
.pw-toggle:hover{color:var(--text);background:var(--surface-hover);}
.pw-toggle:focus-visible{outline:2px solid var(--gray-900);outline-offset:-2px;}
.pw-toggle:disabled{opacity:.45;cursor:not-allowed;}
.pw-toggle:disabled:hover{color:var(--text-tertiary);background:none;}
.pw-toggle svg{width:16px;height:16px;}

/* --------------------------------------------------------------------------
   7. SURFACES
   -------------------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);}
.card-pad{padding:var(--s-6);}
.card-header{padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;}
.card-body{padding:var(--s-6);}
.card-footer{padding:var(--s-4) var(--s-6);border-top:1px solid var(--border);background:var(--surface-subtle);border-radius:0 0 var(--r-lg) var(--r-lg);}

/* Definition list rendered as bordered rows — the account summary on
   subscription-expired.html and every modal summary in admin.html read the
   same because they are the same component, declared once.
   `[hidden]` is restored explicitly: `.detail-row` is an author rule and any
   author declaration beats the user-agent `[hidden]{display:none}`. */
.detail-list{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
.detail-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:10px var(--s-4);border-bottom:1px solid var(--border);font-size:13.5px;
}
.detail-row:last-child{border-bottom:none;}
.detail-row dt,.detail-row .k{color:var(--text-secondary);font-size:13px;}
.detail-row dd,.detail-row .v{margin:0;font-weight:500;text-align:end;font-variant-numeric:tabular-nums;}

/* Metric tile — dashboard KPI */
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5);transition:border-color var(--t),box-shadow var(--t);}
.metric:hover{border-color:var(--border-strong);box-shadow:var(--shadow-xs);}
.metric-label{font-size:12.5px;color:var(--text-secondary);margin-bottom:var(--s-2);font-weight:450;}
.metric-value{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.2;color:var(--text);}
.metric-sub{font-size:12px;color:var(--text-tertiary);margin-top:6px;}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s-3);}

/* Feature tile — landing */
.feature{padding:var(--s-6);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);transition:border-color var(--t),box-shadow var(--t);}
.feature:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.feature-icon{width:36px;height:36px;border-radius:var(--r-md);background:var(--gray-900);color:var(--white);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-4);}
.feature-icon svg{width:17px;height:17px;}

/* --------------------------------------------------------------------------
   8. TABLES — enterprise density and alignment
   -------------------------------------------------------------------------- */
/* One scroller, two names. admin.html says `.table-wrap` and app.html says
   `.table-scroll` across ~26 markup sites; aliasing costs one selector, renaming
   would touch every one of them and the JS template strings that emit them. */
.table-wrap,.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
thead th{
  text-align:start;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-secondary);
  background:var(--surface-subtle);
  padding:10px var(--s-4);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody td{padding:13px var(--s-4);border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background var(--t-fast);}
tbody tr:hover td{background:var(--surface-hover);}
/* Numbers align to the SAME edge as the header above them, which is also the
   edge that lines the UNITS digits up with each other.
   `text-align:left` against a `text-align:right` header put the two at opposite
   ends of the cell: in this RTL layout every figure drifted away from the label
   it belonged to, further the wider the number, and the digits lined up on their
   most-significant end so 984 and 15,480 shared no common column. Both are
   `start` now — identical rendering to the header's old physical `right` under
   dir=rtl, and correct if a table is ever rendered LTR. */
td.num,th.num{text-align:start;font-variant-numeric:tabular-nums;}
.table-empty{padding:var(--s-12) var(--s-4);text-align:center;color:var(--text-secondary);font-size:13.5px;}
.card > .table-wrap thead th:first-child,.card > .table-scroll thead th:first-child{border-start-start-radius:var(--r-lg);}
.card > .table-wrap thead th:last-child,.card > .table-scroll thead th:last-child{border-start-end-radius:var(--r-lg);}

/* The last column of a list row: one or more buttons, side by side. The hook was
   never defined here, so app.html's day list broke its pair of buttons onto two
   lines as soon as the column tightened. */
td.actions-cell{white-space:nowrap;}

/* --------------------------------------------------------------------------
   9. STATUS — badges and banners (the only colour in the system)
   -------------------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;line-height:1;padding:5px 9px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface-subtle);color:var(--text-secondary);white-space:nowrap;}
.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}
.badge-success{background:var(--success-bg);border-color:var(--success-border);color:var(--success);}
.badge-warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning);}
.badge-error{background:var(--error-bg);border-color:var(--error-border);color:var(--error);}
.badge-info{background:var(--info-bg);border-color:var(--info-border);color:var(--info);}
.badge-neutral{background:var(--gray-900);border-color:var(--gray-900);color:var(--white);}

.banner{display:flex;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-subtle);font-size:13px;line-height:1.55;color:var(--text);}
.banner svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;}
.banner-success{background:var(--success-bg);border-color:var(--success-border);color:#0A5C3B;}
.banner-warning{background:var(--warning-bg);border-color:var(--warning-border);color:#8A3706;}
.banner-error{background:var(--error-bg);border-color:var(--error-border);color:#8F1C13;}
.banner-info{background:var(--info-bg);border-color:var(--info-border);color:#134BA8;}

.pos{color:var(--success);}
.neg{color:var(--error);}

/* --------------------------------------------------------------------------
   10. PROGRESS
   -------------------------------------------------------------------------- */
.progress{background:var(--gray-150);border-radius:var(--r-full);height:5px;overflow:hidden;}
.progress-bar{height:100%;background:var(--gray-900);border-radius:var(--r-full);transition:width .5s var(--ease);}

/* --------------------------------------------------------------------------
   11. APP SHELL — sidebar + main
   -------------------------------------------------------------------------- */
.shell{display:flex;min-height:100vh;}
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--surface-subtle);
  /* inline-END is the seam with the content pane. Under RTL the sidebar sits on
     the right, so inline-start is the viewport edge — a hairline there is
     invisible and leaves the sidebar and the content with no separator. */
  border-inline-end:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar-brand{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-5) var(--s-5) var(--s-4);}
.brand-mark{width:30px;height:30px;border-radius:var(--r-md);background:var(--gray-900);color:var(--white);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-mark svg{width:16px;height:16px;}
.brand-name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;}
.brand-sub{font-size:11px;color:var(--text-secondary);line-height:1.4;}

.nav{padding:var(--s-2) var(--s-3);display:flex;flex-direction:column;gap:1px;}
.nav-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);padding:var(--s-4) var(--s-3) 6px;}
.nav-item{
  appearance:none;background:none;border:none;width:100%;
  display:flex;align-items:center;gap:var(--s-3);
  font-family:var(--font);font-size:13.5px;font-weight:450;color:var(--text-secondary);
  padding:8px var(--s-3);border-radius:var(--r-sm);cursor:pointer;text-align:start;
  transition:background var(--t-fast),color var(--t-fast);
}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.75;}
.nav-item:hover{background:var(--surface-hover);color:var(--text);}
.nav-item.active{background:var(--white);color:var(--text);font-weight:550;box-shadow:var(--shadow-xs);border:1px solid var(--border);padding:7px calc(var(--s-3) - 1px);}
.nav-item.active svg{opacity:1;}
.sidebar-footer{margin-top:auto;padding:var(--s-4) var(--s-5);border-top:1px solid var(--border);font-size:11.5px;color:var(--text-tertiary);line-height:1.55;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) var(--s-8);
  border-bottom:1px solid var(--border);
  background:var(--white);
  position:sticky;top:0;z-index:20;flex-wrap:wrap;
}
.page-title{font-size:16px;font-weight:600;letter-spacing:-.015em;}
.content{padding:var(--s-8);max-width:1320px;width:100%;}

@media(max-width:900px){
  .shell{flex-direction:column;}
  .sidebar{width:100%;position:static;height:auto;border-inline-end:none;border-bottom:1px solid var(--border);}
  .nav{flex-direction:row;flex-wrap:wrap;gap:var(--s-1);}
  .nav-label{display:none;}
  .content,.topbar{padding:var(--s-5);}
}

/* --------------------------------------------------------------------------
   12. MODAL + TOAST
   -------------------------------------------------------------------------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(17,17,17,.40);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:1000;padding:var(--s-5);
  animation:fadeIn .15s var(--ease) both;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);width:100%;max-width:420px;max-height:88vh;overflow-y:auto;
  animation:scaleIn .2s var(--ease) both;
}
.modal-lg{max-width:640px;}
.modal-header{padding:var(--s-5) var(--s-6) 0;}
.modal-title{font-size:16px;font-weight:600;letter-spacing:-.015em;}
.modal-body{padding:var(--s-4) var(--s-6);font-size:13.5px;color:var(--text-secondary);line-height:1.65;}
.modal-footer{padding:var(--s-4) var(--s-6) var(--s-5);display:flex;gap:var(--s-2);justify-content:flex-end;flex-wrap:wrap;}
/* A form inside a modal stacks exactly like .auth-form does inside a card. */
.modal-form{display:flex;flex-direction:column;gap:var(--s-4);}

.toast{
  position:fixed;bottom:var(--s-6);left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--gray-900);color:var(--white);
  padding:11px var(--s-5);border-radius:var(--r-md);
  font-size:13px;box-shadow:var(--shadow-lg);
  z-index:1200;opacity:0;pointer-events:none;
  transition:opacity var(--t-slow),transform var(--t-slow);
  max-width:calc(100vw - 32px);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}

/* --------------------------------------------------------------------------
   13. LANDING PAGE
   -------------------------------------------------------------------------- */
/* The public header is one component shared by index / terms / privacy — its
   markup is identical on all three, so its CSS lives here and nowhere else. */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);height:60px;}
.site-header .brand-mark{width:28px;height:28px;border-radius:var(--r-sm);}
.site-header .brand-mark svg{width:15px;height:15px;}
.header-actions{display:flex;align-items:center;gap:var(--s-2);flex-shrink:0;}
.logo{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;letter-spacing:-.015em;}
.logo span{white-space:nowrap;}
.site-nav{display:flex;align-items:center;gap:var(--s-6);}
.site-nav a{font-size:13.5px;color:var(--text-secondary);transition:color var(--t-fast);}
.site-nav a:hover{color:var(--text);}
@media(max-width:860px){ .site-nav.links{display:none;} }
@media(max-width:480px){ .header-login{display:none;} .logo{font-size:13.5px;} .site-header .container{gap:var(--s-3);} }

.hero{padding:var(--s-24) 0 var(--s-20);text-align:center;}
.hero .eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);font-size:12px;color:var(--text-secondary);border:1px solid var(--border);background:var(--surface-subtle);padding:5px 12px;border-radius:var(--r-full);margin-bottom:var(--s-6);}
.hero h1{max-width:15ch;margin:0 auto var(--s-5);}
.hero p{max-width:56ch;margin:0 auto var(--s-8);}
.hero-actions{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;}

.preview-frame{
  border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--white);
}
.preview-chrome{display:flex;align-items:center;gap:6px;padding:10px var(--s-4);border-bottom:1px solid var(--border);background:var(--surface-subtle);}
.preview-dot{width:9px;height:9px;border-radius:50%;background:var(--gray-300);}

.section-head{text-align:center;max-width:60ch;margin:0 auto var(--s-12);}
.section-head p{margin-top:var(--s-3);}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-4);}

.price-card{border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s-6);background:var(--surface);display:flex;flex-direction:column;transition:border-color var(--t),box-shadow var(--t);}
.price-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.price-card.featured{border-color:var(--gray-900);box-shadow:var(--shadow-md);}
/* 30px is the ceiling for everything except the landing hero (.display). */
.price-amount{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1;}
.price-period{font-size:13px;color:var(--text-secondary);}
.price-list{list-style:none;padding:0;margin:var(--s-5) 0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;}
.price-list li{display:flex;gap:10px;align-items:flex-start;color:var(--text-secondary);}
.price-list svg{width:15px;height:15px;flex-shrink:0;margin-top:3px;color:var(--gray-900);}

.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) 0;cursor:pointer;list-style:none;font-size:14.5px;font-weight:500;
}
.faq-item summary::-webkit-details-marker{display:none;}
/* Physical sides on purpose — logical (inline-end) sides flip under RTL and turn
   a down-chevron into a sideways arrow. */
.faq-item summary::after{content:"";width:8px;height:8px;flex-shrink:0;border-right:1.6px solid var(--text-tertiary);border-bottom:1.6px solid var(--text-tertiary);transform:rotate(45deg) translate(-1px,-1px);transition:transform var(--t);}
.faq-item[open] summary::after{transform:rotate(-135deg) translate(-1px,-1px);}
.faq-item .faq-answer{padding:0 0 var(--s-5);color:var(--text-secondary);font-size:13.5px;line-height:1.7;max-width:70ch;}

.site-footer{border-top:1px solid var(--border);padding:var(--s-12) 0 var(--s-8);background:var(--surface-subtle);}
/* `repeat(auto-fit,…)` may not be combined with a flexible track in the same
   track list — `1.5fr repeat(auto-fit,…)` is invalid and the whole declaration
   is dropped, collapsing the footer to one column. Explicit tracks instead. */
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,minmax(120px,1fr));gap:var(--s-8);margin-bottom:var(--s-10);}
@media(max-width:900px){ .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-8);} }
@media(max-width:640px){ .footer-grid{grid-template-columns:1fr;gap:var(--s-6);} }
.footer-col h5{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:var(--s-3);}
/* :not(.logo) — otherwise this rule outranks `.logo{display:flex}` and stacks
   the footer brand mark above the wordmark. */
.footer-col a:not(.logo){display:block;font-size:13.5px;color:var(--text-secondary);padding:5px 0;transition:color var(--t-fast);}
.footer-col a:not(.logo):hover{color:var(--text);}
.footer-brand p{font-size:13px;color:var(--text-secondary);max-width:34ch;margin-top:var(--s-3);line-height:1.7;}
.footer-bottom{border-top:1px solid var(--border);padding-top:var(--s-5);display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;font-size:12.5px;color:var(--text-tertiary);}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--s-5);}
.footer-legal a{transition:color var(--t-fast);}
.footer-legal a:hover{color:var(--text);}

/* --------------------------------------------------------------------------
   14. LEGAL PAGES — terms.html + privacy.html share one layout
   -------------------------------------------------------------------------- */
.legal-head{padding:var(--s-16) 0 var(--s-8);}
.legal-head .overline{display:block;margin-bottom:var(--s-3);}
.legal-head h1{margin-bottom:var(--s-3);}
.legal-meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-5);}
.legal-body{padding-bottom:var(--s-20);}
.legal-sec{padding:var(--s-8) 0;border-top:1px solid var(--border);}
.legal-sec h2{margin-bottom:var(--s-3);}
.legal-sec p{color:var(--text-secondary);font-size:14px;line-height:1.85;max-width:68ch;}
.legal-sec p + p{margin-top:var(--s-3);}
.legal-note{margin-top:var(--s-5);max-width:68ch;}
.legal-list{list-style:none;margin:var(--s-4) 0 0;padding:0;max-width:68ch;}
.legal-list li{position:relative;padding-inline-start:var(--s-4);color:var(--text-secondary);font-size:14px;line-height:1.85;}
.legal-list li + li{margin-top:var(--s-3);}
.legal-list li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--gray-300);}
.legal-list b{font-weight:600;color:var(--text);}
@media(max-width:768px){ .legal-head{padding:var(--s-12) 0 var(--s-6);} .legal-body{padding-bottom:var(--s-16);} }

/* --------------------------------------------------------------------------
   15. AUTH + STANDALONE PAGES
   -------------------------------------------------------------------------- */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s-12) var(--s-6);background:var(--surface-subtle);}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s-8);box-shadow:var(--shadow-sm);}
.auth-head{text-align:center;margin-bottom:var(--s-6);}
.auth-head .brand-mark{margin:0 auto var(--s-4);width:36px;height:36px;transition:background var(--t);}
.auth-head a.brand-mark:hover{background:var(--gray-800);}
.auth-head h1{font-size:19px;margin-bottom:6px;}
.auth-form{display:flex;flex-direction:column;gap:var(--s-4);}
/* Shared by the auth cards and the landing contact form so both render their
   success/error banner with identical spacing. */
.auth-alert,.contact-alert{margin-bottom:var(--s-5);}
/* Secondary button sitting directly under the primary one. */
.alt-action{margin-top:var(--s-3);}
/* Centred note under the action stack. */
.auth-note{margin-top:var(--s-4);text-align:center;}
/* A latin e-mail address quoted inside an Arabic sentence. */
.sent-mail{font-weight:500;}
.auth-foot{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--border);text-align:center;font-size:13px;color:var(--text-secondary);}
.foot-sep{color:var(--text-tertiary);padding:0 8px;}

/* --------------------------------------------------------------------------
   16. QUIET UNDERLINE LINKS
   One treatment, listed once. Every page that needs an underlined inline link
   uses one of these hooks instead of restating the four declarations.
   -------------------------------------------------------------------------- */
.auth-foot a,.link-quiet,.legal-head a,.legal-sec a,.checkbox-top a,
.contact-item a.v,.detail-row a.v{
  color:var(--text);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gray-300);
  transition:color var(--t-fast),text-decoration-color var(--t-fast);
}
.auth-foot a:hover,.link-quiet:hover,.legal-head a:hover,.legal-sec a:hover,
.checkbox-top a:hover,.contact-item a.v:hover,.detail-row a.v:hover{
  color:var(--text);text-decoration-color:var(--gray-900);
}
.link-quiet{font-size:12.5px;font-weight:400;color:var(--text-secondary);}

/* --------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */
/* A latin run (e-mail, phone, plan code) inside RTL prose or an RTL cell.
   `text-align:right` keeps it flush with the RTL column it sits in. */
.ltr{direction:ltr;display:inline-block;text-align:right;font-variant-numeric:tabular-nums;}
.input-ltr,.cell-ltr{direction:ltr;text-align:right;}
.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;}
/* Host for an inline <symbol> sprite — never painted, only referenced by <use>. */
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.spinner{animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* --------------------------------------------------------------------------
   18. VISIBILITY — declared last, deliberately
   `.hidden` carries one class of specificity, so it only beats the display of
   .field / .banner / .badge / .auth-form / .detail-row / … by being the last
   rule in the file. Keep it here. !important is not an option: several screens
   toggle visibility through inline style.display, which !important would beat.
   `[hidden]` gets the same treatment: it is a user-agent rule, so ANY author
   `display` declaration out-ranks it no matter how weak.
   -------------------------------------------------------------------------- */
.hidden,[hidden]{display:none;}

/* ==========================================================================
   REDESIGN v2 — modern SaaS surface language
   --------------------------------------------------------------------------
   Appended last so it overrides by source order. A neutral gray CANVAS with
   white, softly-elevated surfaces (clearer figure/ground), a bold solid-dark
   active navigation, stronger page/section hierarchy, roomier readable tables,
   and refined modals. Palette unchanged (white/black/neutral, no beige/gold),
   RTL + IBM Plex Sans Arabic preserved. Shared components + ADMIN shell.
   ========================================================================== */

/* Canvas — content rests on a soft neutral ground; white surfaces lift off it */
body{background:var(--gray-100);}

/* Typography — a firmer hierarchy */
h1,h2{letter-spacing:-.021em;}

/* Buttons — more presence, softer corners, clear tiers */
.btn{height:40px;border-radius:var(--r-md);font-weight:550;padding:0 var(--s-5);box-shadow:var(--shadow-xs);}
.btn:hover{box-shadow:var(--shadow-sm);}
.btn-sm{height:34px;border-radius:var(--r-sm);padding:0 var(--s-4);}
.btn-lg{height:46px;font-size:14.5px;}
.btn-icon{width:40px;height:40px;}

/* Inputs — taller with softer corners */
input,select,textarea{border-radius:var(--r-md);}
input:not([type="checkbox"]):not([type="radio"]),select{height:40px;}

/* Tables — roomier, quiet zebra, clear hover; sticky header inside scrollers */
thead th{background:var(--gray-50);font-size:11px;letter-spacing:.05em;padding:12px var(--s-4);position:sticky;top:0;z-index:1;}
tbody td{padding:14px var(--s-4);}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--gray-50) 60%,transparent);}
tbody tr:hover td{background:var(--gray-100);}

/* Cards / panels (admin + shared component classes) — larger radius, soft lift */
.card{border-radius:var(--r-xl);box-shadow:var(--shadow-sm);}
.card-header{padding:var(--s-5) var(--s-6);}
.card-body,.card-pad{padding:var(--s-6);}

/* Badges — a touch bolder */
.badge{font-weight:600;padding:5px 10px;}

/* Empty / loading states — centered, calmer, more air */
.table-empty,.empty{padding:var(--s-16) var(--s-4);}

/* Sections spacing */
.page-head{margin-bottom:var(--s-6);}
.page-head h1,.page-head h2,.page-head .h1{font-size:23px;font-weight:700;letter-spacing:-.022em;}
.page-head p{color:var(--text-secondary);}

/* ---- ADMIN shell: white rail on the neutral canvas, bold active pill ---- */
.shell{background:var(--gray-100);}
.sidebar{background:var(--white);border-inline-end:1px solid var(--border);}
.nav-item{border-radius:var(--r-md);font-weight:500;color:var(--text-secondary);padding:10px var(--s-3);transition:background var(--t-fast),color var(--t-fast);}
.nav-item:hover{background:var(--gray-100);color:var(--text);}
.nav-item.active,.nav-item[aria-current="page"]{background:var(--gray-900);color:var(--white);box-shadow:var(--shadow-sm);}
.nav-item.active svg,.nav-item[aria-current="page"] svg{color:var(--white);opacity:.92;}
.nav-label{letter-spacing:-.005em;}
.topbar{background:color-mix(in srgb,var(--gray-100) 82%,transparent);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);}
.main{background:transparent;}

/* Modals — darker scrim + blur, larger radius, stronger elevation */
.modal-overlay{background:rgba(17,17,17,.44);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.modal{border-radius:var(--r-xl);box-shadow:var(--shadow-xl);}