/* ════════════════════════════════════════════════════════════════════════
   TRIOSHOT DESIGN SYSTEM — drop-in stylesheet  (trioshot.css)
   From idea to spread · من الفكرة إلى الانتشار

   Self-contained: design tokens + fonts + responsive rhythm + reusable
   component classes. Link this ONE file and you have the whole system.

   Usage:
     <link rel="stylesheet" href="~/css/trioshot.css" />
   Then use the CSS variables (var(--ts-violet), var(--space-md), …) and/or
   the .ts-* component classes documented inline below.

   Breakpoint contract (keep consistent across the whole site):
     ≤1100px  admin stat grid 4→2
     ≤1024px  marketing/content multi-column grids stack; spacing compresses
     ≤900px   admin sidebar becomes an off-canvas drawer
     ≤768px   top nav collapses into a hamburger drawer
     ≤640px   gutters + section spacing compress further
   ════════════════════════════════════════════════════════════════════════ */

/* ── FONTS ─────────────────────────────────────────────────────────────────
   Satoshi (body) is self-hosted from /wwwroot/fonts/ (reliable even if the CDN
   is blocked); Fontshare stays linked as a progressive enhancement.
   Clash Display (display/headings) is CDN-only — no brand file ships in the
   repo, so it needs Fontshare reachable (or drop a Clash TTF in /wwwroot/fonts/
   and add an @font-face to self-host it like Satoshi below).
   Inter (admin) + Tajawal/Cairo (Arabic fallback) from Google.
   British Council Arabic is self-hosted from /wwwroot/fonts/.                   */
/* Clash Display (display face) is currently OFF — Satoshi is the display face (self-hosted).
   Re-enable this Fontshare import + the --font-display line below to restore Clash headings. */
/* @import url("https://api.fontshare.com/v2/css?f[]=clash-display@300,400,500,600,700&f[]=satoshi@300,400,500,700&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cairo:wght@300;400;500;700&family=Tajawal:wght@300;400;500;700&display=swap");

/* Self-hosted Satoshi (body) — variable TTF shipped in /wwwroot/fonts/. Declared
   AFTER the Fontshare @import so the local file is the reliable source even when
   the CDN font files are blocked; Fontshare stays as a progressive enhancement. */
@font-face{font-family:"Satoshi";src:url("/fonts/Satoshi-Variable.ttf") format("truetype");font-weight:300 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Satoshi";src:url("/fonts/Satoshi-VariableItalic.ttf") format("truetype");font-weight:300 900;font-style:italic;font-display:swap;}

/* Self-hosted Clash Display (display/headings) — variable font shipped in /wwwroot/fonts/
   (woff2 → woff → ttf). Covers weights 200–700; no CDN dependency. */
@font-face{font-family:"Clash Display";src:url("/fonts/ClashDisplay-Variable.woff2") format("woff2"),url("/fonts/ClashDisplay-Variable.woff") format("woff"),url("/fonts/ClashDisplay-Variable.ttf") format("truetype");font-weight:200 700;font-style:normal;font-display:swap;}

/* Self-hosted brand Arabic face — points at the ArbFONTS TTFs shipped in /wwwroot/fonts/ */
@font-face{font-family:"British Council Arabic";src:url("/fonts/ArbFONTS-BritishCouncil-Arabic-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"British Council Arabic";src:url("/fonts/ArbFONTS-BritishCouncil-Arabic-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"British Council Arabic";src:url("/fonts/ArbFONTS-BritishCouncil-Arabic-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"British Council Arabic";src:url("/fonts/ArbFONTS-BritishCouncil-Arabic-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap;}

/* ── TOKENS ───────────────────────────────────────────────────────────────── */
:root{
  /* Brand spectrum */
  --ts-violet:#8B5CF6; --ts-violet-dim:#7C3AED; --ts-violet-light:#A78BFA;
  --ts-teal:#2DD4BF;   --ts-teal-dim:#14B8A6;
  --ts-cyan:#06B6D4;   --ts-cyan-dim:#0891B2;  --ts-cyan-bright:#22D3EE;
  /* Deep "spread" world */
  --ts-navy:#0B1A3A; --ts-navy-deep:#060F24; --ts-navy-2:#122249; --ts-cream:#F6F6EC;
  /* Burgundy alternate mark */
  --ts-burgundy:#7C2649; --ts-burgundy-light:#A8456B;
  /* Neutrals */
  --ts-white:#FFFFFF; --ts-gray-50:#F8F9FA; --ts-gray-100:#F1F3F5; --ts-gray-200:#E9ECEF;
  --ts-gray-300:#DEE2E6; --ts-gray-500:#868E96; --ts-gray-700:#495057; --ts-gray-900:#212529;
  /* Status */
  --ts-success:#2DD4BF; --ts-success-ink:#0E9384; --ts-danger:#FF6B6B; --ts-warning:#F5A524; --ts-info:#06B6D4;
  /* Gradients */
  --ts-gradient-brand:linear-gradient(135deg,#8B5CF6 0%,#2DD4BF 100%);
  --ts-gradient-tri:linear-gradient(135deg,#8B5CF6 0%,#2DD4BF 50%,#06B6D4 100%);
  --ts-gradient-text:linear-gradient(135deg,#8B5CF6 0%,#2DD4BF 50%,#06B6D4 100%);
  --ts-gradient-navy:linear-gradient(160deg,#122249 0%,#0B1A3A 55%,#060F24 100%);
  --ts-glow-violet:radial-gradient(circle,rgba(139,92,246,.45) 0%,transparent 70%);
  --ts-glow-teal:radial-gradient(circle,rgba(45,212,191,.40) 0%,transparent 70%);
  /* Semantic aliases */
  --text-body:var(--ts-gray-700); --text-strong:var(--ts-gray-900); --text-muted:var(--ts-gray-500);
  --text-inverse:var(--ts-white); --text-accent:var(--ts-violet);
  --surface-page:var(--ts-gray-50); --surface-card:var(--ts-white); --surface-sunken:var(--ts-gray-100);
  --surface-raised:var(--ts-gray-200); --surface-dark:var(--ts-navy);
  --border:var(--ts-gray-300); --border-subtle:var(--ts-gray-200);
  --accent:var(--ts-violet); --accent-2:var(--ts-teal); --accent-3:var(--ts-cyan);
  --focus-ring:var(--ts-cyan);

  /* Type */
  /* Display face = Clash Display (self-hosted), Satoshi as fallback. */
  --font-display:"Clash Display","Satoshi",system-ui,sans-serif;
  /* Satoshi-only fallback kept here, commented, in case Clash is ever removed: */
  /* --font-display:"Satoshi",system-ui,sans-serif; */
  --font-body:"Satoshi",system-ui,-apple-system,sans-serif;
  --font-arabic:"British Council Arabic","Tajawal","Cairo",sans-serif;
  --font-admin:"Inter","Satoshi",system-ui,sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fs-display-xl:clamp(3rem,7vw,5.5rem); --fs-display-lg:clamp(2.5rem,5vw,4rem); --fs-display-md:clamp(2rem,4vw,3.5rem);
  --fs-h1:2.5rem; --fs-h2:2rem; --fs-h3:1.4rem; --fs-h4:1.15rem;
  --fs-lead:1.15rem; --fs-body:1rem; --fs-sm:.9rem; --fs-xs:.8rem; --fs-eyebrow:.8rem;
  --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.7;
  --tracking-display:-.03em; --tracking-tight:-.01em; --tracking-eyebrow:.2em; --tracking-caps:.1em; --tracking-nav:.06em;

  /* Spacing / radii / shadows / motion / layout */
  --space-xs:.5rem; --space-sm:1rem; --space-md:2rem; --space-lg:4rem; --space-xl:6rem; --space-2xl:10rem;
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-pill:100px; --radius-circle:50%;
  --clip-notch:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 4px 12px rgba(16,24,40,.05);
  --shadow-raised:0 8px 24px rgba(16,24,40,.08);
  --shadow-violet:0 8px 30px rgba(139,92,246,.35);
  --shadow-teal:0 8px 30px rgba(45,212,191,.30);
  --blur-glass:20px;
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --duration-fast:.2s; --duration:.3s; --duration-slow:.6s;
  --container:1400px; --container-narrow:800px;
}

/* Responsive rhythm — section-scale tokens compress with the viewport so any
   surface that spends them breathes correctly on tablet & phone.              */
@media (max-width:1024px){ :root{ --space-2xl:6rem; --space-xl:4.5rem; --space-lg:3rem; } }
@media (max-width:640px){  :root{ --space-2xl:4.5rem; --space-xl:3.25rem; --space-lg:2.25rem; --space-md:1.25rem; } }

/* ── OPTIONAL BASE (apply class "ts" to <body> or a wrapper) ───────────────── */
.ts,.ts *{box-sizing:border-box;}
.ts{font-family:var(--font-body);color:var(--text-body);background:var(--surface-page);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;}
.ts h1,.ts h2,.ts h3,.ts h4{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-strong);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);margin:0;}
/* :where() keeps this reset at zero specificity for the `a`, so it never beats
   component classes like .btn-primary / .ts-btn--primary (which set their own
   color). Without :where() the reset would force button text to inherit body color. */
.ts :where(a){color:inherit;text-decoration:none;}
.ts img{max-width:100%;display:block;}
.ts[dir="rtl"],.ts [dir="rtl"]{font-family:var(--font-arabic);}

/* ── TYPOGRAPHY HELPERS ───────────────────────────────────────────────────── */
.ts-display-xl{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-display-xl);line-height:1.1;letter-spacing:var(--tracking-display);color:var(--text-strong);}
.ts-display-lg{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-display-lg);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);color:var(--text-strong);}
.ts-display-md{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-display-md);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);color:var(--text-strong);}
.ts-eyebrow{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ts-violet);}
.ts-gradient-text{background:var(--ts-gradient-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ts-lead{font-size:var(--fs-lead);color:var(--text-muted);}

/* ── LAYOUT ───────────────────────────────────────────────────────────────── */
.ts-container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-md);}
.ts-section{padding:var(--space-lg) var(--space-md) 5rem;}
.ts-grid{display:grid;gap:var(--space-md);}
.ts-grid--auto{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));}
.ts-grid--3{grid-template-columns:repeat(3,1fr);}
.ts-grid--4{grid-template-columns:repeat(4,1fr);}
.ts-grid--flush{gap:2px;} /* 2px gaps read as hairlines between flush cards */
@media (max-width:1024px){ .ts-grid--3,.ts-grid--4{grid-template-columns:1fr;} }
@media (max-width:1100px){ .ts-grid--4.ts-grid--stat{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){  .ts-grid--4.ts-grid--stat{grid-template-columns:1fr;} }

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.ts-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;cursor:pointer;border:none;text-decoration:none;transition:all var(--duration) var(--ease-out);}
.ts-btn--primary{padding:.8rem 1.8rem;background:var(--ts-gradient-brand);color:#fff;clip-path:var(--clip-notch);}
.ts-btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-violet);}
.ts-btn--ghost{padding:.8rem 1.6rem;background:transparent;color:var(--text-strong);border:1px solid var(--border-subtle);}
.ts-btn--ghost:hover{border-color:var(--ts-violet);color:var(--ts-violet);}
.ts-btn--lg{padding:1rem 2.5rem;font-size:1rem;}
.ts-btn--block{width:100%;}

/* ── CARDS ────────────────────────────────────────────────────────────────── */
.ts-card{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-md);box-shadow:var(--shadow-card);transition:transform var(--duration) var(--ease-out),box-shadow var(--duration);}
.ts-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised);}
.ts-card--flat{box-shadow:none;border-radius:0;}
.ts-card--feature{background:var(--surface-sunken);border:1px solid var(--ts-violet);}
/* service-style card with gradient top-border on hover */
.ts-svc{position:relative;overflow:hidden;background:var(--surface-card);border:1px solid var(--border);padding:var(--space-lg) var(--space-md);transition:all var(--duration-slow) var(--ease-out);}
.ts-svc::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--ts-gradient-brand);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-slow) var(--ease-out);}
.ts-svc:hover{transform:translateY(-4px);background:var(--surface-sunken);}
.ts-svc:hover::before{transform:scaleX(1);}

/* ── STATS ────────────────────────────────────────────────────────────────── */
.ts-stat__n{font-family:var(--font-display);font-size:clamp(3rem,5vw,4.6rem);font-weight:var(--fw-bold);color:var(--text-strong);line-height:1;}
.ts-stat__n span{color:var(--ts-violet);font-weight:var(--fw-light);}
.ts-stat__l{display:block;margin-top:.5rem;font-size:var(--fs-sm);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted);}

/* ── PILLS / BADGES ───────────────────────────────────────────────────────── */
.ts-pill{display:inline-flex;align-items:center;padding:.22rem .6rem;border-radius:var(--radius-pill);font-size:.7rem;font-weight:var(--fw-semibold);letter-spacing:.03em;}
.ts-pill--violet{background:rgba(139,92,246,.1);color:var(--ts-violet);border:1px solid rgba(139,92,246,.2);}
.ts-pill--cyan{background:rgba(6,182,212,.1);color:var(--ts-cyan-dim);border:1px solid rgba(6,182,212,.2);}
.ts-pill--green{background:rgba(45,212,191,.12);color:var(--ts-success-ink);border:1px solid rgba(45,212,191,.25);}
.ts-pill--red{background:rgba(255,107,107,.1);color:#E14B4B;border:1px solid rgba(255,107,107,.2);}
.ts-pill--muted{background:rgba(0,0,0,.04);color:var(--text-muted);border:1px solid var(--border);}

/* ── FORM INPUTS ──────────────────────────────────────────────────────────── */
.ts-field{margin-bottom:.85rem;}
.ts-label{display:block;font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.4rem;}
.ts-input{width:100%;font-family:var(--font-body);font-size:var(--fs-body);color:var(--text-strong);background:var(--surface-card);border:1.5px solid var(--border);border-radius:var(--radius-xs);padding:.7rem .9rem;transition:border-color var(--duration),box-shadow var(--duration);box-sizing:border-box;}
.ts-input:focus{outline:none;border-color:var(--ts-cyan);box-shadow:0 0 0 3px rgba(6,182,212,.15);}
textarea.ts-input{resize:vertical;min-height:100px;}

/* ── TOP NAV + MOBILE DRAWER (CSS-only via a hidden checkbox) ─────────────────
   Markup:
     <header class="ts-header"><nav class="ts-nav ts-container">
       <a class="ts-nav__logo" href="/"><img …></a>
       <input id="tsNav" class="ts-nav__toggle" type="checkbox">
       <label for="tsNav" class="ts-burger" aria-label="Menu">☰ (svg)</label>
       <div class="ts-nav__collapse">
         <ul class="ts-nav__links">…</ul>
         <div class="ts-nav__actions">…</div>
       </div>
     </nav></header>                                                             */
.ts-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));border-bottom:1px solid var(--border);}
.ts-nav{display:flex;align-items:center;justify-content:space-between;padding-block:.7rem;}
.ts-nav__logo img{height:54px;width:auto;display:block;}
.ts-nav__toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.ts-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);background:none;color:var(--text-strong);cursor:pointer;}
.ts-burger svg{width:22px;height:22px;}
.ts-nav__collapse{display:contents;} /* desktop: links + actions flow in the nav row */
.ts-nav__links{display:flex;gap:2.2rem;list-style:none;margin:0;padding:0;}
.ts-nav__links a{font-size:.82rem;font-weight:var(--fw-medium);letter-spacing:var(--tracking-nav);text-transform:uppercase;color:var(--text-muted);transition:color var(--duration);}
.ts-nav__links a:hover,.ts-nav__links a.is-active{color:var(--text-strong);}
.ts-nav__actions{display:flex;align-items:center;gap:.9rem;}
@media (max-width:768px){
  .ts-nav{flex-wrap:wrap;}
  .ts-burger{display:inline-flex;}
  .ts-nav__collapse{display:flex;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;max-height:0;overflow:hidden;transition:max-height var(--duration-slow) var(--ease-out);}
  .ts-nav__toggle:checked ~ .ts-nav__collapse{max-height:80vh;}
  .ts-nav__links{flex-direction:column;gap:0;width:100%;padding:.5rem 0;}
  .ts-nav__links a{display:block;padding:.6rem 0;font-size:.95rem;}
  .ts-nav__actions{flex-direction:column;align-items:stretch;width:100%;gap:.6rem;padding-bottom:.8rem;}
  .ts-nav__actions>*{width:100%;justify-content:center;text-align:center;}
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.ts-hero{position:relative;min-height:88vh;display:flex;align-items:center;padding:var(--space-lg) var(--space-md);overflow:hidden;}
.ts-hero__inner{position:relative;z-index:2;max-width:820px;margin-inline:auto;width:100%;}
.ts-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.4;z-index:0;pointer-events:none;}
@media (max-width:768px){ .ts-hero{min-height:auto;} }

/* ── TABLE (with horizontal scroll on small screens) ──────────────────────── */
.ts-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ts-table{width:100%;border-collapse:collapse;}
.ts-table th{text-align:left;font-size:.7rem;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:.6rem .75rem;border-bottom:1px solid var(--border);}
.ts-table td{padding:.8rem .75rem;font-size:.88rem;color:var(--text-body);border-bottom:1px solid var(--border-subtle);}
.ts-table tbody tr:last-child td{border-bottom:none;}
.ts-table tbody tr:hover td{background:rgba(0,0,0,.015);}
@media (max-width:768px){ .ts-table-scroll .ts-table{min-width:520px;} }

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.ts-footer{background:var(--surface-sunken);border-top:1px solid var(--border);padding:var(--space-lg) var(--space-md) var(--space-md);}
.ts-footer__grid{max-width:var(--container);margin:0 auto var(--space-lg);display:grid;grid-template-columns:2fr repeat(4, minmax(0, 1fr));gap:var(--space-lg);}
.ts-footer__grid h4{font-family:var(--font-display);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-strong);margin:0 0 var(--space-sm);}
.ts-footer__grid a{display:block;color:var(--text-muted);font-size:.9rem;margin-bottom:.6rem;}
.ts-footer__grid a:hover{color:var(--ts-violet);}
@media (max-width:1024px){ .ts-footer__grid{grid-template-columns:1fr 1fr 1fr;gap:var(--space-md);} }
@media (max-width:560px){  .ts-footer__grid{grid-template-columns:1fr;} }

/* ════════════════════════════════════════════════════════════════════════════
   ADMIN APP SHELL — sidebar that becomes an off-canvas drawer ≤900px
   Markup:
     <div class="ts-app">
       <input id="tsSide" class="ts-side__toggle" type="checkbox">
       <aside class="ts-side">…nav…</aside>
       <label for="tsSide" class="ts-overlay"></label>
       <div class="ts-main">
         <div class="ts-topbar">
           <label for="tsSide" class="ts-menu-btn">☰</label> …crumb… </div>
         <div class="ts-content">…</div>
       </div>
     </div>
   ════════════════════════════════════════════════════════════════════════════ */
.ts-app{display:flex;min-height:100vh;font-family:var(--font-admin);color:var(--text-body);}
.ts-side__toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.ts-side{width:260px;min-width:260px;background:var(--surface-card);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;}
.ts-side__label{font-size:.66rem;font-weight:var(--fw-bold);letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);padding:0 1.25rem;margin-bottom:.4rem;}
.ts-nav-link{display:flex;align-items:center;gap:.75rem;padding:.6rem 1.25rem;color:var(--text-muted);font-size:.88rem;font-weight:var(--fw-medium);border-left:3px solid transparent;cursor:pointer;transition:all var(--duration-fast);text-decoration:none;}
.ts-nav-link:hover{color:var(--text-strong);background:rgba(0,0,0,.03);}
.ts-nav-link.is-active{color:var(--ts-cyan);background:rgba(6,182,212,.06);border-left-color:var(--ts-cyan);}
.ts-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.ts-topbar{display:flex;align-items:center;gap:1rem;padding:.85rem var(--space-md);background:var(--surface-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;}
.ts-content{padding:var(--space-md);overflow-y:auto;}
.ts-menu-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);background:none;color:var(--text-strong);cursor:pointer;flex-shrink:0;}
.ts-menu-btn svg{width:20px;height:20px;}
.ts-overlay{display:none;}
@media (max-width:900px){
  .ts-menu-btn{display:inline-flex;}
  .ts-side{position:fixed;top:0;left:0;height:100vh;transform:translateX(-100%);transition:transform var(--duration) var(--ease-out);z-index:60;box-shadow:var(--shadow-raised);}
  .ts-side__toggle:checked ~ .ts-side{transform:none;}
  .ts-side__toggle:checked ~ .ts-overlay{display:block;position:fixed;inset:0;background:rgba(11,26,58,.4);z-index:55;}
}

/* ── RTL niceties (the site toggles dir="rtl" for Arabic) ─────────────────── */
[dir="rtl"] .ts-side{border-right:none;border-left:1px solid var(--border);}
[dir="rtl"] .ts-nav-link{border-left:none;border-right:3px solid transparent;}
[dir="rtl"] .ts-nav-link.is-active{border-right-color:var(--ts-cyan);}
@media (max-width:900px){ [dir="rtl"] .ts-side{left:auto;right:0;transform:translateX(100%);} [dir="rtl"] .ts-side__toggle:checked ~ .ts-side{transform:none;} }

/* ── ALERTS ───────────────────────────────────────────────────────────────── */
.ts-alert{display:block;padding:.85rem 1.1rem;border-radius:var(--radius-xs);font-size:.85rem;font-weight:500;line-height:1.5;margin-bottom:.75rem;}
.ts-alert--success{background:rgba(45,212,191,.1);color:var(--ts-success-ink,#0f9488);border:1px solid rgba(45,212,191,.3);}
.ts-alert--danger{background:rgba(255,107,107,.08);color:#c53030;border:1px solid rgba(255,107,107,.25);}
.ts-alert--info{background:rgba(6,182,212,.08);color:var(--ts-cyan-dim,#0891b2);border:1px solid rgba(6,182,212,.2);}
.ts-alert--warning{background:rgba(245,158,11,.08);color:#b45309;border:1px solid rgba(245,158,11,.2);}

/* ── MOTION RESPECT ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}