/* ADS POS — dependency-free stylesheet. Works offline; no CDN required. */

:root{
  --brand:#0f766e; --brand-dark:#134e4a; --brand-soft:#ccfbf1;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --line:#e2e8f0;
  --bg:#f6f7f9; --card:#ffffff; --ok:#059669; --warn:#d97706; --err:#dc2626;
  --surface-2:#fafbfc; --hover:#f8fafc; --chip:#eef2f7;
  --input-bg:#ffffff; --input-line:#cbd5e1;
  --radius:12px; --shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px -16px rgba(15,23,42,.25);
  --font:"Segoe UI",system-ui,-apple-system,"Noto Sans Arabic","Tahoma",sans-serif;
}

/* Arabic gets Cairo. The selector is html[dir="rtl"] (0,1,1) so it outranks the
   :root declaration above (0,1,0) whatever the source order. Cairo is only
   fetched on RTL pages — see views/partials/_arabic_font.php — and the old
   stack stays behind it so text still shapes correctly before the font lands. */
html[dir="rtl"]{
  --font:"Cairo","Segoe UI",system-ui,-apple-system,"Noto Sans Arabic","Tahoma",sans-serif;
}

/* Night mode — the second option; light is the default everywhere. */
:root[data-theme="dark"]{
  --ink:#e8eefc; --ink-2:#cbd5e1; --muted:#94a3b8; --line:#243149;
  --bg:#0b1220; --card:#131c31;
  --surface-2:#172238; --hover:#1b2740; --chip:#1f2b44;
  --input-bg:#1b2740; --input-line:#31405e;
  --brand-soft:#134e4a;
  --shadow:0 1px 2px rgba(2,6,23,.4), 0 10px 26px -18px rgba(2,6,23,.8);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
[dir="rtl"] body{letter-spacing:0}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.25;font-weight:650}
h1{font-size:1.6rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
p{margin:0 0 .75rem}
img{max-width:100%}
hr{border:0;border-top:1px solid var(--line);margin:1.25rem 0}
small{font-size:.82em;color:var(--muted)}

/* ------------------------------------------------------------- layout */
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
.shell{display:flex;min-height:100vh}
.side{width:236px;flex:0 0 236px;background:#0b1220;color:#cbd5e1;padding:16px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;color:#fff;font-weight:700}
.side .brand img{width:30px;height:30px;object-fit:contain;border-radius:7px;background:#fff;padding:2px}
.side .grouplabel{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#64748b;margin:14px 10px 6px}
.side a{display:flex;align-items:center;gap:9px;color:#cbd5e1;padding:8px 10px;border-radius:9px;font-size:.9rem}
.side a:hover{background:#16213a;color:#fff;text-decoration:none}
.side a.active{background:var(--brand);color:#fff}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:10px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.topbar .spacer{flex:1}
.content{padding:20px;flex:1}

/* -------------------------------------------------------------- cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .hd{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card .hd h3{margin:0}
.card .bd{padding:16px}
.card .ft{padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--radius) var(--radius)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.stat .label{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat .value{font-size:1.5rem;font-weight:700;margin-top:4px;letter-spacing:-.02em}
.stat .delta{font-size:.8rem;margin-top:2px}
.up{color:var(--ok)} .down{color:var(--err)}

/* ------------------------------------------------------------- tables */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:9px 10px;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;background:var(--surface-2);position:sticky;top:0}
tbody tr:hover{background:var(--hover)}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto;border-radius:var(--radius)}
tfoot td{font-weight:650;background:var(--hover)}

/* ------------------------------------------------------------- inputs */
label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:4px}
input,select,textarea{width:100%;padding:8px 11px;border:1px solid var(--input-line);border-radius:9px;font:inherit;font-size:.92rem;background:var(--input-bg);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 35%,transparent);outline-offset:1px;border-color:var(--brand)}
input[type=checkbox]{width:auto;accent-color:var(--brand)}
.field{margin-bottom:12px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:170px}
.inline{display:flex;align-items:center;gap:8px}
.inline input[type=checkbox]{margin:0}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:0 0 16px}
legend{font-weight:650;padding:0 6px;font-size:.9rem}

/* ------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:9px;border:1px solid transparent;background:var(--brand);color:#fff;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.07);text-decoration:none;color:#fff}
.btn.ghost{background:var(--card);color:var(--ink-2);border-color:var(--input-line)}
.btn.ghost:hover{background:var(--hover);color:var(--ink)}
.btn.danger{background:var(--err)}
.btn.warn{background:var(--warn)}
.btn.dark{background:#0b1220}
.btn.sm{padding:5px 10px;font-size:.82rem}
.btn.lg{padding:12px 22px;font-size:1rem}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap}

.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:650;background:var(--chip);color:var(--ink-2)}
.pill.ok{background:#dcfce7;color:#166534}
.pill.warn{background:#fef3c7;color:#92400e}
.pill.err{background:#fee2e2;color:#991b1b}
.pill.info{background:#dbeafe;color:#1e40af}

/* ------------------------------------------------------------- alerts */
.alert{padding:11px 14px;border-radius:10px;margin-bottom:14px;border:1px solid;font-size:.9rem}
.alert.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.alert.err{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert.warn{background:#fffbeb;border-color:#fde68a;color:#92400e}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs a{padding:9px 14px;border-bottom:2px solid transparent;color:var(--muted);font-weight:600;font-size:.9rem;white-space:nowrap}
.tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}
.tabs a:hover{text-decoration:none;color:var(--ink)}

.bar{height:8px;background:var(--chip);border-radius:99px;overflow:hidden}
.bar>span{display:block;height:100%;background:var(--brand)}
.spark{display:flex;align-items:flex-end;gap:3px;height:64px}
.spark i{flex:1;background:var(--brand-soft);border-radius:3px 3px 0 0;min-height:2px;display:block}
.spark i.hi{background:var(--brand)}

.pimg{display:block;border-radius:10px;object-fit:cover}
img.pimg{background:#f8fafc;border:1px solid var(--line)}
.empty{padding:36px 16px;text-align:center;color:var(--muted)}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.86em}
.muted{color:var(--muted)}
.right{text-align:end} .center{text-align:center}
.mt{margin-top:16px} .mb{margin-bottom:16px} .nowrap{white-space:nowrap}

/* --------------------------------------------------- public / marketing */
/* ------------------------------------------------------- marketing site */
.pub-nav{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.pub-nav .wrap{display:flex;align-items:center;gap:18px;height:80px}
.pub-nav .logo{display:flex;align-items:center;color:var(--ink)}
.pub-nav .logo img{display:block;height:52px;width:auto}
.pub-nav nav{display:flex;gap:18px;margin-inline-start:auto;align-items:center}
/* :not(.btn) matters — without it this rule (0,2,1) outranks .btn (0,1,0) and
   paints the Sign in pill slate-on-teal, about 1.7:1 against its own
   background. The nav's plain links stay slate; the button keeps its own. */
.pub-nav nav a:not(.btn){color:var(--ink-2);font-weight:600;font-size:.94rem}
.pub-nav nav a:not(.btn):hover{color:var(--brand)}
.pub-nav nav a.btn{font-weight:650}
.pub-nav nav a.lang{border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:.86rem}
.navtoggle{display:none;margin-inline-start:auto;background:none;border:1px solid var(--line);
           border-radius:9px;width:40px;height:38px;font-size:1.1rem;cursor:pointer;color:var(--ink)}

/* hero — the photographed banner is the background; the base gradient below it
   is tuned to the image's own edge colour (#011e1e) so the two meet invisibly,
   and it is what shows when the image is dropped on a narrow screen.
   The readability scrim is its own layer (::before) rather than part of the
   background shorthand, so a breakpoint can strengthen it without having to
   restate the image and lose the webp. */
.hero{background:
        url(../img/hero-banner.jpg) right center / cover no-repeat,
        linear-gradient(160deg,#011e1e,#062c2c 55%,#063537);
      color:#fff;padding:70px 0 78px;overflow:hidden;position:relative;
      min-height:clamp(420px, 33vw, 560px);display:flex;align-items:center}
@supports (background-image: image-set(url(x.webp) type("image/webp"))){
  .hero{background:
          image-set(url(../img/hero-banner.webp) type("image/webp"),
                    url(../img/hero-banner.jpg)  type("image/jpeg")) right center / cover no-repeat,
          linear-gradient(160deg,#011e1e,#062c2c 55%,#063537)}
}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
              background:linear-gradient(90deg, rgba(1,30,30,.95) 0%, rgba(1,30,30,.9) 36%,
                                         rgba(1,30,30,.5) 56%, rgba(1,30,30,0) 72%)}
/* Arabic is right-aligned, so every line — headline, paragraph, buttons, ticks
   — runs to the right edge of the copy column instead of only the long ones.
   That edge is where the devices start, so the scrim has to stay solid further
   across than it does in English or the short lines land on the tablet. */
[dir="rtl"] .hero::before{
  background:linear-gradient(90deg, rgba(1,30,30,.96) 0%, rgba(1,30,30,.94) 48%,
                             rgba(1,30,30,.62) 62%, rgba(1,30,30,0) 78%)}
.hero > .wrap{width:100%;position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,clamp(360px,46%,560px)) 1fr;
           gap:40px;align-items:center;direction:ltr}
.hero-copy{direction:ltr}
[dir="rtl"] .hero-copy{direction:rtl;text-align:right}
.hero .eyebrow{display:inline-block;background:rgba(45,212,191,.14);border:1px solid rgba(45,212,191,.32);
               color:#7ff0e0;border-radius:999px;padding:5px 15px;font-size:.8rem;font-weight:700;
               letter-spacing:.03em;margin-bottom:18px}
.hero h1{font-size:2.7rem;max-width:none;letter-spacing:-.032em;line-height:1.1;margin:0 0 14px}
.hero p{font-size:1.05rem;max-width:none;color:#c3ded9;margin:0}
.hero .btns{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.08)}
.hero .ticks{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:8px}
.hero .ticks li{color:#a7cfc9;font-size:.92rem;display:flex;align-items:flex-start;gap:9px}
.hero .ticks li::before{content:"✓";color:#2dd4bf;font-weight:800;flex:none}
.hero-art{min-height:340px}
.hero-art img{display:none}

/* Below ~1200px `cover` has to zoom the 2.6:1 banner to fill a taller box,
   which drags the devices left under the copy. Rather than ship a crowded
   hero, fall back to the gradient — the same one the phone layout uses. */
@media(max-width:900px){
  .hero::before{display:none}
  .hero{background:
          radial-gradient(120% 90% at 85% 0%, rgba(20,184,166,.26), transparent 60%),
          linear-gradient(160deg,#011e1e,#062c2c 55%,#0d6d63);
        min-height:0}
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .hero-art img{display:block;width:100%;height:auto;max-width:480px;margin-inline-start:auto}
}

@media(min-width:901px) and (max-width:1240px){
  .hero{padding:52px 0 58px;min-height:clamp(400px,38vw,470px)}
  .hero h1{font-size:2.15rem}
  .hero p{font-size:.99rem}
  .hero .btns{margin-top:20px}
  .hero .ticks{margin-top:20px;gap:6px}
  .hero .ticks li{font-size:.87rem}
  .hero-grid{gap:28px;grid-template-columns:minmax(0,50%) 1fr}
  .hero::before{background:linear-gradient(90deg, rgba(1,30,30,.97) 0%, rgba(1,30,30,.94) 44%,
                                           rgba(1,30,30,.66) 60%, rgba(1,30,30,0) 82%)}
  [dir="rtl"] .hero::before{
    background:linear-gradient(90deg, rgba(1,30,30,.97) 0%, rgba(1,30,30,.95) 53%,
                               rgba(1,30,30,.72) 66%, rgba(1,30,30,0) 86%)}
}

/* trust band */
.trustband{background:#071a19;color:#fff;padding:22px 0}
.trustband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.trustband .t b{display:block;font-size:1.9rem;font-weight:800;color:#2dd4bf;line-height:1.1;
                letter-spacing:-.03em}
.trustband .t span{font-size:.84rem;color:#8fb5b0}

/* sections */
.section{padding:66px 0}
.section.alt{background:var(--card);border-block:1px solid var(--line)}
.section h2{font-size:1.75rem;letter-spacing:-.025em;margin:0 0 10px}
.lede{color:var(--muted);max-width:72ch;font-size:1.02rem;margin:0}
.split h2{font-size:1.4rem}

/* showcase — two feature cards, each opening on a real screen from the product.
   The screenshot is the argument; the copy explains it. */
.showcase-section{background:
    radial-gradient(90% 60% at 50% 0%, rgba(15,118,110,.055), transparent 70%), var(--bg)}
.showcase{gap:26px}
.showcard{background:var(--card);border:1px solid var(--line);border-radius:16px;
          overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
/* The well matches the photographs' own 3:2, so neither is cropped. */
.showcard .shot{margin:0;background:var(--surface-2);border-bottom:1px solid var(--line);
                aspect-ratio:3/2;overflow:hidden}
.showcard .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.showbody{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.showcard .tag{align-self:flex-start;background:var(--brand-soft);color:var(--brand);
               border-radius:999px;padding:4px 12px;font-size:.74rem;font-weight:700;
               letter-spacing:.05em;text-transform:uppercase}
.showcase h2{font-size:1.32rem;margin:0}
.showcard p.muted{margin:0;font-size:.95rem;line-height:1.6}
.showcard .note{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);
                color:var(--muted);font-size:.85rem;line-height:1.5;
                display:flex;gap:8px;align-items:flex-start}
.showcard .note::before{content:"";flex:none;width:3px;align-self:stretch;border-radius:2px;
                        background:var(--brand);opacity:.45;margin-top:1px}
@media(max-width:760px){
  .showbody{padding:18px 18px 20px}
}

.feature{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;
         display:block;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.feature .ico{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:11px;
              background:var(--brand-soft);color:var(--brand);margin-bottom:13px}
.feature h3{font-size:1.03rem;margin:0 0 6px}
.feature p{color:var(--muted);font-size:.92rem;margin:0;line-height:1.55}
.feature.ind:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.feature .more{display:inline-block;margin-top:11px;color:var(--brand);font-weight:650;font-size:.88rem}

/* plans */
.price{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;
       display:flex;flex-direction:column;position:relative}
.price.featured{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.price .tagbest{position:absolute;top:-11px;inset-inline-start:24px;background:var(--brand);color:#fff;
                border-radius:999px;padding:3px 13px;font-size:.72rem;font-weight:800;letter-spacing:.04em}
.price h3{margin:0 0 4px;font-size:1.1rem}
.price .amt{font-size:2.1rem;font-weight:780;letter-spacing:-.035em}
.price .amt small{font-size:.92rem;font-weight:500;color:var(--muted);letter-spacing:0}
.price ul{list-style:none;padding:0;margin:16px 0;flex:1}
.price li{padding:6px 0;border-bottom:1px dashed var(--line);font-size:.9rem;display:flex;gap:8px}
.price li::before{content:"✓";color:var(--ok);font-weight:800}
.price li:last-child{border-bottom:0}

/* closing call to action */
.cta{background:linear-gradient(160deg,#0b3d38,#0d6d63);color:#fff;padding:62px 0;text-align:center}
.cta h2{font-size:1.9rem;letter-spacing:-.03em;margin:0 0 10px}
.cta p{color:#bcdcd7;max-width:62ch;margin:0 auto}
.cta .btns{margin-top:24px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}

/* footer */
footer.site{background:#071a19;color:#8fb5b0;padding:44px 0 28px}
footer.site a{color:#cbe7e3;font-size:.9rem}
footer.site a:hover{color:#fff}
footer.site p{font-size:.9rem;line-height:1.8;margin:10px 0 0}
footer.site .flogo{height:48px;width:auto;display:block;margin-bottom:8px}
footer.site .fh{color:#fff;font-weight:700;margin-bottom:4px;font-size:.95rem}
footer.site hr{border:0;border-top:1px solid #12332f;margin:28px 0 14px}
footer.site small{font-size:.84rem}

@media(max-width:960px){
  .hero{background:
          radial-gradient(120% 90% at 85% 0%, rgba(20,184,166,.26), transparent 60%),
          linear-gradient(160deg,#011e1e,#062c2c 55%,#0d6d63);
        min-height:0;display:block}
  .hero-grid{grid-template-columns:1fr;gap:0;direction:inherit}
  .hero-copy{direction:inherit}
  .hero-art{display:none}
  .hero h1{font-size:2.2rem;max-width:none}
  .trustband .wrap{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media(max-width:760px){
  .navtoggle{display:block}
  .pub-nav nav{display:none;position:absolute;inset-inline:0;top:80px;background:var(--card);
               border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
               gap:0;padding:8px 20px 16px;margin:0}
  .pub-nav nav.open{display:flex}
  .pub-nav nav a{padding:11px 0;border-bottom:1px solid var(--line)}
  .pub-nav nav a.lang{border-radius:9px;text-align:center;margin-top:10px}
  .hero h1{font-size:1.9rem}
  .section{padding:46px 0}
  .section h2{font-size:1.45rem}
}

/* ------------------------------------------------------------- auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:28px;
      background:linear-gradient(150deg,var(--brand-dark),var(--brand))}
.auth .box{width:100%;max-width:410px;background:var(--card);border-radius:18px;padding:30px;box-shadow:0 30px 60px -25px rgba(2,6,23,.55)}
.auth .logo{width:88px;height:88px;object-fit:contain;border-radius:18px;margin-bottom:14px;background:#fff}
.auth .who{display:flex;align-items:center;gap:10px;background:var(--chip);border-radius:10px;padding:8px 12px;margin-bottom:16px;font-size:.9rem}
.auth .who a{margin-inline-start:auto;font-size:.82rem}

/* --------------------------------------------------------------- print */
/* --------------------------------------------------------- printing A4 */
/* Any back-office page prints as a letterheaded A4 report: the navigation,
   the toolbars and every button drop away, and the tables are re-set for
   paper so a long report breaks across pages with its headings intact. */
.printhead{display:none}

@page{ size:A4 portrait; margin:14mm 12mm; }

@media print{
  :root{--bg:#fff;--card:#fff;--surface-2:#f4f6f8;--line:#cbd5e1;--ink:#0f172a;--muted:#475569}
  body{background:#fff;font-size:10.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  .noprint,.side,.topbar,.tabs,.pagination,.btn,button,.ai-bar,.ai-chips,
  form.inline,form .field,input,select,textarea{display:none!important}
  /* a card header left holding only filters is dead weight on paper */
  .card .hd:empty,.card .hd > span[style*="flex"]{display:none}
  .shell{display:block}
  .main{margin:0}
  .content{padding:0;max-width:none}

  .printhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
             border-bottom:2pt solid var(--brand);padding-bottom:7px;margin-bottom:12px}
  .printhead .nm{font-size:13pt;font-weight:750}
  .printhead .ttl{font-size:12pt;font-weight:750;color:var(--brand)}
  .printhead .sub{font-size:8.5pt;color:var(--muted)}
  .printhead .r{text-align:end}

  .card{border:0;box-shadow:none;margin:0 0 12px;break-inside:auto}
  .card .hd{border-bottom:1pt solid var(--line);padding:0 0 5px;margin-bottom:7px;background:none}
  .card .hd h3{font-size:11pt;text-transform:uppercase;letter-spacing:.05em}
  .card .bd{padding:0}
  .table-wrap{overflow:visible;border:0}

  table{width:100%;border-collapse:collapse;font-size:9.5pt}
  thead{display:table-header-group}
  tr{break-inside:avoid}
  th{background:#f1f5f9!important;font-size:8pt;padding:5px 7px}
  td{padding:4.5px 7px;border-bottom:.5pt solid #e2e8f0}

  .stat{border:1pt solid var(--line);box-shadow:none;padding:8px 10px}
  .stat .value{font-size:13pt}
  .grid.g4{grid-template-columns:repeat(4,1fr);gap:7px}
  .alert{border:1pt solid var(--line);padding:6px 9px;font-size:9pt}

  a[href]::after{content:""}
  .stat.pay .value,.stat.claim .value{color:var(--ink)}
}

/* ------------------------------------------------------- AI assistant */
.ai-wrap{max-width:980px}
.ai-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.ai-head h2{margin:0 0 2px;font-size:1.35rem}
.ai-head p{margin:0;font-size:.92rem}
.ai-head .pill{margin-inline-start:auto}

.ai-thread{display:flex;flex-direction:column;gap:16px;min-height:260px;margin-bottom:14px}
.ai-empty{text-align:center;padding:34px 16px;border:1px dashed var(--line);border-radius:16px;background:var(--card)}
.ai-mark{width:46px;height:46px;margin:0 auto 12px;border-radius:14px;display:grid;place-items:center;
         background:var(--brand);color:#fff;font-size:1.5rem}
.ai-empty h3{margin:0 0 16px;font-size:1.05rem;font-weight:650}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ai-chips button{background:var(--chip);border:1px solid var(--line);color:var(--ink-2);border-radius:999px;
                 padding:8px 15px;font:inherit;font-size:.86rem;cursor:pointer;transition:.12s}
.ai-chips button:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}

.ai-msg.me{align-self:flex-end;max-width:78%;text-align:end}
.ai-msg.me .ai-who{font-size:.72rem;font-weight:750;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ai-msg.me .ai-q{background:var(--brand);color:#fff;border-radius:14px 14px 4px 14px;padding:10px 15px;
                 display:inline-block;text-align:start;font-weight:500}
.ai-say{font-size:1rem;line-height:1.6;margin-bottom:10px}
.ai-say.wait{color:var(--muted)}
.ai-say.wait::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
                    background:var(--brand);margin-inline-start:8px;animation:aipulse 1s infinite}
@keyframes aipulse{0%,100%{opacity:.25}50%{opacity:1}}
.ai-say.err{color:var(--err)}

.ai-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.ai-title{font-weight:750;font-size:.95rem;margin-bottom:12px}
.ai-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.ai-stats .s{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.ai-stats .s span{display:block;font-size:.78rem;color:var(--muted);margin-bottom:3px}
.ai-stats .s b{font-size:1.22rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ai-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:11px}
.ai-table{width:100%;border-collapse:collapse;font-size:.88rem}
.ai-table th{background:var(--surface-2);text-align:start;padding:9px 12px;font-size:.76rem;
             text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.ai-table td{padding:9px 12px;border-top:1px solid var(--line);white-space:nowrap}
.ai-table td.num{text-align:end;font-variant-numeric:tabular-nums}
.ai-table tbody tr:hover{background:var(--hover)}
.ai-note{font-size:.86rem;color:var(--muted);margin-top:10px}
.ai-none{color:var(--muted);padding:6px 0}
.ai-link{display:inline-block;margin-top:11px;font-size:.86rem;font-weight:650}

.ai-bar{display:flex;gap:8px;position:sticky;bottom:0;background:var(--bg);padding:10px 0}
.ai-bar input{flex:1;font-size:1rem;padding:13px 16px;border-radius:12px}
.ai-bar .btn{padding-inline:22px}
.ai-can{margin-top:18px;font-size:.9rem}
.ai-can summary{cursor:pointer;font-weight:650;color:var(--ink-2)}
.ai-can ul{columns:2;column-gap:26px;margin:12px 0;padding-inline-start:18px}
.ai-can li{padding:3px 0;break-inside:avoid}
@media(max-width:720px){.ai-can ul{columns:1}.ai-msg.me{max-width:92%}}

/* ------------------------------------------------------ upgrade prompt */
.upgrade{max-width:560px;margin:30px auto;text-align:center}
.upgrade .up-mark{width:52px;height:52px;margin:6px auto 14px;border-radius:15px;display:grid;place-items:center;
                  background:var(--brand);color:#fff;font-size:1.6rem}
.upgrade h2{margin:0 0 8px}
.upgrade .up-list{list-style:none;padding:0;margin:18px 0;text-align:start;
                  display:inline-block;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.upgrade .up-list li{padding:9px 18px;border-bottom:1px solid var(--line);font-size:.9rem}
.upgrade .up-list li:last-child{border-bottom:0}
.upgrade .up-list li::before{content:"✓";color:var(--ok);font-weight:800;margin-inline-end:9px}
.upgrade .up-actions{display:flex;gap:9px;justify-content:center;margin:18px 0 10px;flex-wrap:wrap}
.upgrade .sm{font-size:.82rem}
.side .lockpill{background:var(--brand);color:#fff;border-radius:999px;padding:1px 7px;
                font-size:.64rem;font-weight:800;margin-inline-start:6px;letter-spacing:.04em;vertical-align:1px}

/* ----------------------------------------------------------- VAT return */
.vat-head .vh{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.vat-head .vh h3{margin:0 0 3px;font-size:1.15rem}
.vperiods{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px;
          padding-top:13px;border-top:1px solid var(--line)}
.vperiods a{background:var(--chip);border:1px solid var(--line);color:var(--ink-2);border-radius:999px;
            padding:6px 14px;font-size:.86rem;font-weight:650;text-decoration:none}
.vperiods a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.vperiods a:hover:not(.on){border-color:var(--brand);color:var(--brand)}
.vperiods .custom{display:flex;align-items:center;gap:6px;margin-inline-start:6px}
.vperiods .custom label{font-size:.78rem;color:var(--muted);font-weight:650}
.vperiods .custom input{width:auto;padding:5px 9px;font-size:.85rem}

table.vat201{width:100%;border-collapse:collapse}
table.vat201 th{background:var(--surface-2);text-align:start;padding:9px 12px;font-size:.74rem;
                text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
table.vat201 td{padding:8px 12px;border-top:1px solid var(--line);vertical-align:middle}
table.vat201 td.num,table.vat201 th.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
table.vat201 td.mono{font-family:ui-monospace,Consolas,monospace;font-weight:750;color:var(--brand);width:56px}
table.vat201 tr.sub td{color:var(--muted);font-size:.88rem}
table.vat201 tfoot tr.total td{background:var(--surface-2);font-weight:750;
                               border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
table.vat201 tr.grand td{background:var(--brand);color:#fff;font-weight:800;font-size:1.05rem}
table.vat201 tr.grand td.mono{color:#fff}
table.vat201 tr.grand td.num{font-size:1.35rem}
table.vat201 .docs{display:inline-block;background:var(--chip);color:var(--muted);border-radius:999px;
                   padding:1px 9px;font-size:.72rem;font-weight:700;margin-inline-start:8px}
table.vat201 input.cell{width:112px;padding:6px 9px;text-align:end;font-variant-numeric:tabular-nums;
                        border-radius:7px;font-size:.9rem}
table.vat201 input.cell:placeholder-shown{border-style:dashed;color:var(--muted)}
.hintq{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;cursor:help;
       background:var(--chip);color:var(--muted);font-size:.68rem;font-weight:800;margin-inline-start:6px}
.stat.pay .value{color:var(--err)}
.stat.claim .value{color:var(--ok)}
.muted.sm{font-size:.85rem}

/* A print button that never ends up on the paper */
@media print{ .vperiods,.vat-head,.tabs,.side,.topbar{display:none!important} }