/* ═══════════════════════════════════════════════════════════
   NISAB — Financial Atelier Design System
   Based on Material Design 3 + Editorial Fintech Aesthetic
   Fonts: Plus Jakarta Sans (EN) + Cairo (AR)
   ═══════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ── TOKENS ── */
:root {
  /* Brand — Material You Palette */
  --primary:              #002c18;
  --primary-hover:        #001a0e;
  --primary-container:    #004428;
  --primary-fixed:        #b3f0c8;
  --primary-fixed-dim:    #97d4ad;
  --on-primary:           #ffffff;
  --on-primary-container: #76b18d;
  --on-primary-fixed:     #002111;
  --on-primary-fixed-var: #145134;
  --inverse-primary:      #97d4ad;

  /* Secondary (Gold) */
  --secondary:            #765a00;
  --secondary-container:  #fed571;
  --secondary-fixed:      #ffdf95;
  --secondary-fixed-dim:  #e9c260;
  --on-secondary:         #ffffff;
  --on-secondary-fixed:   #251a00;

  /* Surface */
  --surface:              #f8f9fa;
  --surface-bright:       #f8f9fa;
  --surface-dim:          #d9dadb;
  --surface-container-lowest: #ffffff;
  --surface-container-low:    #f3f4f5;
  --surface-container:        #edeeef;
  --surface-container-high:   #e7e8e9;
  --surface-container-highest:#e1e3e4;
  --surface-variant:      #e1e3e4;
  --surface-tint:         #2f694a;
  --inverse-surface:      #2e3132;
  --inverse-on-surface:   #f0f1f2;

  /* Text */
  --on-surface:           #191c1d;
  --on-surface-variant:   #404942;
  --on-background:        #191c1d;

  /* Outline */
  --outline:              #707972;
  --outline-variant:      #c0c9c0;

  /* Error */
  --error:                #ba1a1a;
  --error-container:      #ffdad6;
  --on-error:             #ffffff;
  --on-error-container:   #93000a;

  /* Background */
  --background:           #f8f9fa;

  /* Fonts */
  --font-en:    'Plus Jakarta Sans', sans-serif;
  --font-ar:    'Cairo', sans-serif;
  --font-mono:  'IBM Plex Mono', monospace;

  /* Layout */
  --sidebar-w:  256px;
  --topbar-h:   64px;

  /* Radius */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-full: 12px;

  /* Shadow */
  --sh-editorial: 0px 4px 20px rgba(0,44,24,.04), 0px 8px 40px rgba(0,44,24,.08);
  --sh-sm:        0px 1px 4px rgba(0,0,0,.05);
  --sh-md:        0px 4px 16px rgba(0,0,0,.07);
  --sh-topbar:    0px 4px 20px rgba(0,44,24,.04);

  /* Legacy aliases for JS compatibility */
  --p:              var(--primary);
  --ph:             var(--primary-hover);
  --pl:             rgba(0,44,24,.08);
  --pm:             var(--primary-container);
  --bg:             var(--surface);
  --card:           var(--surface-container-lowest);
  --inp:            var(--surface-container-low);
  --hov:            var(--surface-container-high);
  --t:              var(--on-surface);
  --t2:             var(--on-surface-variant);
  --t3:             var(--outline);
  --bdr:            var(--outline-variant);
  --ok:             var(--primary);
  --okl:            rgba(0,44,24,.1);
  --warn:           var(--secondary);
  --warnl:          rgba(118,90,0,.12);
  --err:            var(--error);
  --errl:           rgba(186,26,26,.08);
  --info:           #1650CA;
  --infol:          rgba(22,80,202,.08);
  --sh:             var(--sh-sm);
  --sh2:            var(--sh-md);
  --sh3:            var(--sh-editorial);
  --r:              var(--r-sm);
  --rl:             var(--r-md);
  --rx:             var(--r-lg);
  --r2x:            var(--r-lg);
  --rf:             var(--r-full);
  --sidebar:        var(--sidebar-w);
  --th:             var(--topbar-h);
  --font:           var(--font-ar);
  --mono:           var(--font-mono);
  --green:          var(--primary);
  --green2:         var(--primary-container);
  --red:            var(--error);
  --red-dim:        var(--error-container);
  --blue:           #1650CA;
  --blue-dim:       rgba(22,80,202,.08);
  --bg1:            var(--surface-container-lowest);
  --bg2:            var(--surface-container-low);
  --bg3:            var(--surface-container);
  --bg-page:        var(--surface);
  --bg-card:        var(--surface-container-lowest);
  --bg-input:       var(--surface-container-low);
  --bg-hover:       var(--surface-container-high);
  --border:         var(--outline-variant);
  --border2:        rgba(0,0,0,.1);
  --text-primary:   var(--on-surface);
  --text-secondary: var(--on-surface-variant);
  --text-muted:     var(--outline);
  --shadow-sm:      var(--sh-sm);
  --shadow-md:      var(--sh-md);
}

/* ── LANGUAGE ── */
html[lang="ar"] .en,html[lang="ar"] span.en{display:none!important}
html[lang="ar"] .ar{display:block}
html[lang="ar"] span.ar{display:inline}
html[lang="en"] .ar,html[lang="en"] span.ar{display:none!important}
html[lang="en"] .en{display:block}
html[lang="en"] span.en,html[lang="en"] div.en{display:inline}
html[lang="en"] #landing-page{direction:ltr;font-family:var(--font-en)}
html[lang="en"] #landing-page h1,html[lang="en"] #landing-page h2,
html[lang="en"] #landing-page p{text-align:left}
html[lang="en"] #landing-page .hero-btns{justify-content:flex-start}
html[lang="en"] #landing-page nav,html[lang="en"] #landing-page footer{direction:ltr}
html[lang="en"] body.app-mode #app-wrapper{direction:ltr}
html[lang="en"] .sidebar{right:auto!important;left:0!important;border-left:none;border-right:1px solid rgba(192,201,192,.3)}
html[lang="en"] .main{margin-right:0!important;margin-left:var(--sidebar-w)!important}
html[lang="en"] .nav-item.active::after{right:auto;left:0;border-radius:0 2px 2px 0}
html[lang="en"] .nav-badge{margin-right:0;margin-left:auto}
html[lang="en"] body,html[lang="en"] #app-wrapper,
html[lang="en"] #app-wrapper *{font-family:var(--font-en)!important}
html[lang="en"] #app-wrapper .mono{font-family:var(--mono)!important}

/* ── DISPLAY LOGIC ── */
#landing-page{display:none}
#app-wrapper{display:none}
#nisab-loader{position:fixed;inset:0;background:#fff;z-index:9999;display:flex;align-items:center;justify-content:center}
body.auth-ready #landing-page{display:block}
body.auth-ready #nisab-loader,body.app-mode #nisab-loader{display:none}
body.app-mode #landing-page{display:none!important}
body.app-mode #app-wrapper{display:flex!important;width:100%;min-height:100vh}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ar);
  background:var(--surface);
  color:var(--on-surface);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body.app-mode{display:block;overflow-x:hidden}

/* ══════════════════════════════════════════
   LANDING PAGE
══════════════════════════════════════════ */
#landing-page{
  background:var(--surface);
  color:var(--on-surface);
  font-family:var(--font-ar);
  overflow-x:hidden;
}

/* Nav */
#landing-page nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:80px;padding:0 max(24px,4vw);
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(192,201,192,.2);
  box-shadow:var(--sh-topbar);
}
#landing-page .nav-inner{max-width:1160px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between}
#landing-page .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
#landing-page .nav-logo-mark{width:32px;height:32px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800;border-radius:var(--r-xs)}
#landing-page .nav-logo-name{font-size:18px;font-weight:800;color:var(--on-surface);letter-spacing:-.3px}
#landing-page .nav-right{display:flex;align-items:center;gap:8px}
#landing-page .btn-lang{height:32px;padding:0 12px;border:none;border-radius:var(--r-full);font-size:12px;font-weight:600;color:var(--on-surface-variant);cursor:pointer;background:var(--surface-container-low);font-family:inherit;transition:.2s}
#landing-page .btn-lang:hover{background:var(--surface-container);color:var(--primary)}
#landing-page .btn-nav-cta{height:36px;padding:0 18px;background:var(--primary);color:#fff;border:none;border-radius:var(--r-full);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:.2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
#landing-page .btn-nav-cta:hover{background:var(--primary-hover)}

/* Hero */
#landing-page .hero{
  min-height:100vh;
  padding:120px max(24px,5vw) 80px;
  display:flex;align-items:center;
  background:var(--surface-container-lowest);
}
#landing-page .hero-inner{max-width:1160px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
#landing-page .hero-tag{
  display:inline-block;padding:4px 12px;
  background:var(--primary-container);
  color:var(--on-primary-container);
  font-size:10px;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:20px;border-radius:var(--r-xs);
}
#landing-page h1{
  font-size:clamp(44px,5.5vw,72px);
  font-weight:800;line-height:.95;
  letter-spacing:-2px;margin-bottom:20px;
  color:var(--primary);
}
#landing-page h1 .accent{color:var(--secondary);font-style:italic}
#landing-page .hero-sub{font-size:16px;line-height:1.75;color:var(--on-surface-variant);margin-bottom:36px;max-width:480px}
#landing-page .hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
#landing-page .btn-cta{height:48px;padding:0 28px;background:var(--primary);color:#fff;border:none;border-radius:var(--r-xs);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:.2s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
#landing-page .btn-cta:hover{background:var(--primary-hover)}
#landing-page .btn-outline{height:48px;padding:0 22px;border:1px solid rgba(192,201,192,.4);background:var(--surface-container-lowest);color:var(--on-surface);border-radius:var(--r-xs);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.2s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
#landing-page .btn-outline:hover{border-color:var(--primary);color:var(--primary)}
#landing-page .hero-trust{font-size:11px;color:var(--outline);font-weight:500;line-height:1.8}
#landing-page .hero-trust span{color:var(--primary);font-weight:700}

/* Hero visual — VAT card */
#landing-page .hero-visual{animation:rise .8s ease both}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
#landing-page .mockup{background:var(--surface-container-lowest);border-radius:var(--r-xs);box-shadow:var(--sh-editorial);overflow:hidden}
#landing-page .mockup-top{background:var(--primary-container);padding:24px 28px;position:relative;overflow:hidden}
#landing-page .mockup-top::after{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:rgba(255,255,255,.04);border-radius:50%}
#landing-page .mockup-lbl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--on-primary-container);margin-bottom:8px;opacity:.8}
#landing-page .mockup-amount{font-size:36px;font-weight:800;color:#fff;font-family:var(--font-mono);letter-spacing:-1px;margin-bottom:8px}
#landing-page .mockup-amount span{font-size:14px;color:var(--secondary-fixed);font-family:var(--font-ar);margin-left:4px}
#landing-page .mockup-trend{font-size:12px;color:var(--primary-fixed);display:flex;align-items:center;gap:5px;font-weight:600}
#landing-page .mockup-body{padding:20px 24px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
#landing-page .mkpi{background:var(--surface-container-low);border-radius:var(--r-xs);padding:14px}
#landing-page .mkpi-lbl{font-size:9px;font-weight:700;color:var(--outline);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
#landing-page .mkpi-val{font-size:20px;font-weight:800;color:var(--on-surface);font-family:var(--font-mono)}
#landing-page .mkpi-sub{font-size:10px;color:var(--primary);font-weight:600;margin-top:3px}
#landing-page .mockup-rows{padding:0 24px 16px}
#landing-page .mrow{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--surface-container-high);font-size:11px}
#landing-page .mrow:last-child{border-bottom:none}
#landing-page .mrow-lbl{color:var(--on-surface-variant)}
#landing-page .mrow-val{font-weight:700;font-family:var(--font-mono);color:var(--primary)}

/* Sections */
#landing-page section{padding:80px max(24px,5vw)}
#landing-page .section-head{margin-bottom:56px}
#landing-page .stag{
  display:inline-block;padding:4px 12px;
  background:var(--primary-container);
  color:var(--on-primary-container);
  font-size:9px;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:14px;border-radius:var(--r-xs);
}
#landing-page h2{font-size:clamp(28px,3.5vw,42px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;margin-bottom:14px;color:var(--primary)}
#landing-page .sub{font-size:15px;color:var(--on-surface-variant);line-height:1.75;max-width:540px}

/* How section */
#landing-page .how-sec{background:var(--surface-container-lowest)}
#landing-page .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--surface-container-high);margin-top:48px}
#landing-page .step{background:var(--surface-container-lowest);padding:36px 32px}
#landing-page .step-n{font-size:9px;font-weight:800;color:var(--primary);letter-spacing:2px;margin-bottom:18px;font-family:var(--font-mono);text-transform:uppercase}
#landing-page .step-icon-wrap{width:44px;height:44px;background:var(--primary-container);display:flex;align-items:center;justify-content:center;margin-bottom:16px;border-radius:var(--r-xs)}
#landing-page .step-icon-wrap svg{width:20px;height:20px;stroke:var(--on-primary-container);stroke-width:2;fill:none}
#landing-page .step h3{font-size:15px;font-weight:700;margin-bottom:8px;color:var(--on-surface)}
#landing-page .step p{font-size:13px;color:var(--on-surface-variant);line-height:1.7}

/* Features */
#landing-page .feat-sec{background:var(--surface-container-low)}
#landing-page .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
#landing-page .feat{background:var(--surface-container-lowest);padding:28px;transition:.25s;box-shadow:var(--sh-sm)}
#landing-page .feat:hover{transform:translateY(-2px);box-shadow:var(--sh-editorial)}
#landing-page .feat-ico{width:44px;height:44px;background:var(--primary-container);display:flex;align-items:center;justify-content:center;margin-bottom:16px;border-radius:var(--r-xs)}
#landing-page .feat-ico svg{width:22px;height:22px;stroke:var(--on-primary-container);stroke-width:2;fill:none}
#landing-page .feat h3{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--on-surface)}
#landing-page .feat p{font-size:13px;color:var(--on-surface-variant);line-height:1.65}

/* Sectors */
#landing-page .who-sec{background:var(--surface-container-lowest)}
#landing-page .sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px}
#landing-page .sector{background:var(--surface-container-low);padding:20px 16px;text-align:center;transition:.2s;border-radius:var(--r-xs)}
#landing-page .sector:hover{background:rgba(0,44,24,.06);transform:translateY(-2px)}
#landing-page .sector-ico{width:40px;height:40px;background:var(--surface-container-lowest);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:var(--sh-sm);border-radius:var(--r-xs)}
#landing-page .sector-ico svg{width:20px;height:20px;stroke:var(--primary);stroke-width:2;fill:none}
#landing-page .sector-name{font-size:12px;font-weight:700;color:var(--on-surface-variant)}

/* Stats */
#landing-page .stats-sec{background:var(--primary);padding:72px max(24px,5vw);position:relative;overflow:hidden}
#landing-page .stats-sec::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.02) 1px,transparent 1px);background-size:24px 24px}
#landing-page .stats-grid{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;position:relative;z-index:1;text-align:center}
#landing-page .stat-num{font-size:clamp(48px,6vw,72px);font-weight:800;color:#fff;font-family:var(--font-mono);letter-spacing:-2px;line-height:1}
#landing-page .stat-lbl{font-size:12px;color:rgba(255,255,255,.5);margin-top:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

/* CTA */
#landing-page .cta-sec{padding:80px max(24px,5vw);background:var(--surface-container-low)}
#landing-page .cta-box{max-width:580px;margin:0 auto;background:var(--surface-container-lowest);padding:56px 48px;text-align:center;box-shadow:var(--sh-editorial)}
#landing-page .cta-ico{font-size:40px;margin-bottom:20px}
#landing-page .cta-box h2{font-size:clamp(22px,3vw,32px);margin-bottom:12px;letter-spacing:-1px}
#landing-page .cta-box .sub{margin:0 auto 32px}
#landing-page .email-form{display:flex;gap:8px;max-width:400px;margin:0 auto;flex-wrap:wrap}
#landing-page .email-inp{flex:1;min-width:180px;height:48px;padding:0 16px;border:1px solid var(--outline-variant);border-radius:var(--r-xs);font-family:inherit;font-size:13px;color:var(--on-surface);outline:none;background:var(--surface-container-low);transition:.2s}
#landing-page .email-inp:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 2px rgba(0,44,24,.1)}
#landing-page .btn-submit{height:48px;padding:0 24px;background:var(--primary);color:#fff;border:none;border-radius:var(--r-xs);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.2s}
#landing-page .btn-submit:hover{background:var(--primary-hover)}
#landing-page .cta-note{font-size:11px;color:var(--outline);margin-top:16px;line-height:1.6}
#landing-page .cta-note a{color:var(--primary);font-weight:600;text-decoration:none}
#landing-page #cta-done{display:none;font-size:13px;color:var(--primary);font-weight:700;margin-top:16px}

/* Footer */
#landing-page footer{background:var(--on-surface);color:#fff;padding:40px max(24px,5vw) 28px}
#landing-page .footer-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:24px}
#landing-page .footer-logo{display:flex;align-items:center;gap:10px}
#landing-page .footer-logo-name{font-size:15px;font-weight:800;color:#fff}
#landing-page .footer-links{display:flex;gap:24px;flex-wrap:wrap}
#landing-page .footer-link{font-size:12px;color:rgba(255,255,255,.4);text-decoration:none;transition:.2s}
#landing-page .footer-link:hover{color:#fff}
#landing-page .footer-copy{max-width:1160px;margin:0 auto;font-size:11px;color:rgba(255,255,255,.2);border-top:1px solid rgba(255,255,255,.06);padding-top:20px}
#landing-page .reveal{opacity:0;transform:translateY(14px);transition:.5s ease}
#landing-page .reveal.show{opacity:1;transform:translateY(0)}

@media(max-width:900px){
  #landing-page .hero-inner{grid-template-columns:1fr}
  #landing-page .hero-visual{display:none}
  #landing-page .steps{grid-template-columns:1fr}
  #landing-page .feats{grid-template-columns:1fr 1fr}
  #landing-page .sectors{grid-template-columns:repeat(2,1fr)}
  #landing-page .stats-grid{grid-template-columns:1fr;gap:32px}
  #landing-page .cta-box{padding:36px 24px}
}
@media(max-width:540px){#landing-page .feats{grid-template-columns:1fr}}

/* ══════════════════════════════════════════
   APP SHELL — Sidebar + Topbar
══════════════════════════════════════════ */
.sidebar{
  width:var(--sidebar-w);
  background:var(--surface-container-low);
  border-left:1px solid rgba(192,201,192,.2);
  display:flex;flex-direction:column;
  position:fixed;top:0;right:0;bottom:0;z-index:100;
}
[dir=ltr] .sidebar{right:auto!important;left:0!important;border-left:none;border-right:1px solid rgba(192,201,192,.2)}

.logo-area{padding:20px 16px 16px}
.logo-row{display:flex;align-items:center;gap:10px}
.logo-icon{
  width:32px;height:32px;
  background:var(--primary);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:800;
  border-radius:var(--r-xs);flex-shrink:0;
}
.logo-txt{font-size:17px;font-weight:800;letter-spacing:-.5px;color:var(--on-surface);text-transform:uppercase}
.logo-sub{font-size:8px;color:var(--outline);letter-spacing:2px;text-transform:uppercase;margin-top:2px;font-weight:700}

.company-pill{
  margin-top:12px;
  background:var(--surface-container);
  padding:8px 10px;
  display:flex;align-items:center;gap:9px;
  cursor:pointer;transition:.2s;
  border-radius:var(--r-xs);
}
.company-pill:hover{background:var(--surface-container-high)}
.company-av{
  width:28px;height:28px;
  background:var(--primary-container);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;
  color:var(--on-primary-container);
  flex-shrink:0;overflow:hidden;
  border-radius:var(--r-xs);
}
.company-av img{width:100%;height:100%;object-fit:cover}
.company-info{flex:1;min-width:0}
.company-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--on-surface)}
.company-role{font-size:9px;color:var(--outline);margin-top:1px}

.nav{flex:1;padding:8px 4px;overflow-y:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-sec{
  font-size:9px;color:var(--outline);
  letter-spacing:2px;text-transform:uppercase;
  padding:12px 12px 4px;margin-top:4px;font-weight:700;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  cursor:pointer;transition:.2s;
  color:var(--on-surface-variant);
  font-size:13px;font-weight:500;
  position:relative;margin-bottom:1px;
  user-select:none;
}
.nav-item:hover{
  background:var(--surface-container-high);
  color:var(--on-surface);
  transform:translateX(-2px);
}
[dir=ltr] .nav-item:hover{transform:translateX(2px)}
.nav-item.active{
  background:var(--primary-fixed);
  color:var(--on-primary-fixed-var);
  font-weight:600;
  border-radius:var(--r-xs);
  margin:0 4px 1px;
}
.nav-item.active::after{display:none}
.nav-icon{width:18px;text-align:center;flex-shrink:0}
.nav-icon .material-symbols-outlined{font-size:18px;vertical-align:middle}
.nav-badge{
  margin-right:auto;
  background:var(--error);
  color:#fff;font-size:9px;
  padding:1px 6px;border-radius:var(--r-full);
  font-family:var(--font-mono);font-weight:700;
}
[dir=ltr] .nav-badge{margin-right:0;margin-left:auto}
.nav-badge.g{background:rgba(118,90,0,.15);color:var(--secondary)}

.sidebar-footer{padding:8px 4px;border-top:1px solid rgba(192,201,192,.2)}
.sf-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;cursor:pointer;
  font-size:12px;color:var(--outline);
  transition:.2s;margin-bottom:1px;
}
.sf-item:hover{background:var(--surface-container-high);color:var(--on-surface-variant)}
.sf-item .material-symbols-outlined{font-size:18px}

/* Main area */
.main{
  margin-right:var(--sidebar-w);
  flex:1;display:flex;flex-direction:column;
  min-height:100vh;
  width:calc(100% - var(--sidebar-w));
}
[dir=ltr] .main{margin-right:0!important;margin-left:var(--sidebar-w)!important}

/* Topbar */
.topbar{
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(192,201,192,.15);
  box-shadow:var(--sh-topbar);
  padding:0 24px;
  height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:50;
}
.page-title{font-size:14px;font-weight:700;color:var(--on-surface)}
.page-sub{font-size:10px;color:var(--outline);margin-top:1px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.topbar-right{display:flex;align-items:center;gap:8px}

.period-tabs{display:flex;background:var(--surface-container-low);padding:2px;border-radius:var(--r-full)}
.period-tab{
  padding:5px 14px;font-size:11px;font-weight:700;
  color:var(--outline);cursor:pointer;border:none;
  background:none;font-family:var(--font-ar);
  transition:.15s;border-radius:var(--r-full);
  text-transform:uppercase;letter-spacing:.5px;
}
.period-tab.active{background:var(--surface-container-lowest);color:var(--primary);box-shadow:var(--sh-sm)}

.btn-upload{
  display:flex;align-items:center;gap:7px;
  background:var(--primary);color:#fff;border:none;
  padding:9px 18px;
  font-size:12px;font-weight:700;
  cursor:pointer;font-family:var(--font-ar);
  transition:.2s;white-space:nowrap;
  border-radius:var(--r-xs);
  letter-spacing:.3px;
}
.btn-upload:hover{background:var(--primary-hover)}
.icon-btn{
  width:36px;height:36px;
  background:var(--surface-container-lowest);
  border:1px solid rgba(192,201,192,.3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;transition:.15s;
  border-radius:50%;
}
.icon-btn:hover{background:var(--surface-container-low)}
.icon-btn .material-symbols-outlined{font-size:18px;color:var(--on-surface-variant)}
.notif-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;background:var(--secondary);border-radius:50%;border:1.5px solid #fff}
.lang-btn{
  padding:5px 12px;border-radius:var(--r-full);
  font-size:11px;font-weight:700;
  color:var(--on-surface-variant);cursor:pointer;
  background:var(--surface-container-low);
  font-family:var(--font-ar);border:none;transition:.15s;
}
.lang-btn:hover{background:var(--surface-container);color:var(--primary)}

.content{padding:24px;flex:1}
.screen{display:none}
.screen.active{display:block}

/* ══════════════════════════════════════════
   COMPONENTS
══════════════════════════════════════════ */

/* Card */
.card{
  background:var(--surface-container-lowest);
  padding:24px;
  box-shadow:var(--sh-editorial);
  animation:fadeUp .4s ease both;
}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.card-title{font-size:14px;font-weight:700;color:var(--on-surface);letter-spacing:-.2px}
.card-sub{font-size:11px;color:var(--outline);margin-top:2px}
.card-action{font-size:11px;color:var(--primary);cursor:pointer;font-weight:700;background:none;border:none;font-family:var(--font-ar)}

/* Tax Alert */
.tax-alert{
  background:linear-gradient(135deg,#FFFDF0,#FFF8DC);
  padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
  box-shadow:var(--sh-sm);
  animation:fadeUp .4s ease both;
  flex-wrap:wrap;gap:12px;
}
.tax-alert-left{display:flex;align-items:center;gap:12px}
.tax-alert-icon{display:flex;align-items:center;color:var(--secondary)}
.tax-alert-icon .material-symbols-outlined{font-size:22px}
.tax-alert-title{font-size:13px;font-weight:700;color:var(--secondary)}
.tax-alert-sub{font-size:10px;color:var(--on-surface-variant);margin-top:2px}
.tax-alert-stats{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tax-stat{text-align:center}
.tax-stat-val{font-size:16px;font-weight:700;font-family:var(--font-mono)}
.tax-stat-lbl{font-size:9px;color:var(--outline);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}
.tax-divider{width:1px;height:28px;background:var(--surface-container-high)}
.btn-outline{
  padding:7px 16px;
  border:1px solid rgba(118,90,0,.3);
  color:var(--secondary);background:none;
  font-size:11px;font-weight:700;
  cursor:pointer;font-family:var(--font-ar);transition:.2s;
  border-radius:var(--r-xs);
}
.btn-outline:hover{background:rgba(118,90,0,.06)}

/* KPI Grid */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.kpi-card{
  background:var(--surface-container-lowest);
  padding:20px;
  position:relative;overflow:hidden;
  transition:.2s;animation:fadeUp .5s ease both;
  box-shadow:var(--sh-sm);
}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--sh-editorial)}
.kpi-card.cg{border-left:3px solid var(--primary)}
.kpi-card.cb{border-left:3px solid var(--info)}
.kpi-card.co{border-left:3px solid var(--secondary)}
.kpi-card.cr{border-left:3px solid var(--error)}
[dir=rtl] .kpi-card.cg{border-left:none;border-right:3px solid var(--primary)}
[dir=rtl] .kpi-card.cb{border-left:none;border-right:3px solid var(--info)}
[dir=rtl] .kpi-card.co{border-left:none;border-right:3px solid var(--secondary)}
[dir=rtl] .kpi-card.cr{border-left:none;border-right:3px solid var(--error)}
.kpi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kpi-label{font-size:9px;color:var(--on-surface-variant);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.kpi-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-xs)}
.kpi-icon .material-symbols-outlined{font-size:16px}
.cg .kpi-icon{background:rgba(0,44,24,.08);color:var(--primary)}
.cb .kpi-icon{background:rgba(22,80,202,.08);color:var(--info)}
.co .kpi-icon{background:rgba(118,90,0,.1);color:var(--secondary)}
.cr .kpi-icon{background:rgba(186,26,26,.08);color:var(--error)}
.kpi-val{font-size:24px;font-weight:800;font-family:var(--font-mono);letter-spacing:-.5px;margin-bottom:6px;line-height:1;color:var(--on-surface)}
.kpi-val span{font-size:11px;color:var(--outline);font-family:var(--font-ar);font-weight:400;margin-right:4px}
[dir=ltr] .kpi-val span{margin-right:0;margin-left:4px}
.kpi-change{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-full)}
.kpi-change.up{background:rgba(0,44,24,.08);color:var(--primary)}
.kpi-change.dn{background:rgba(186,26,26,.08);color:var(--error)}
.kpi-change.nu{background:var(--surface-container-low);color:var(--outline)}

/* Charts */
.charts-row{display:grid;grid-template-columns:1fr 280px;gap:16px;margin-bottom:20px}
.bars-wrap{display:flex;align-items:flex-end;gap:5px;height:140px;padding-bottom:24px;position:relative}
.bars-wrap::before{content:'';position:absolute;bottom:24px;left:0;right:0;border-top:1px dashed var(--surface-container-high)}
.bar-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.bar-pair{display:flex;gap:2px;align-items:flex-end}
.bar{width:10px;transition:.3s;cursor:pointer}
.bar:hover{opacity:.75}
.bar.s{background:var(--primary)}
.bar.p{background:var(--primary-fixed)}
.bar-lbl{font-size:8px;color:var(--outline);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.chart-legend{display:flex;gap:14px;margin-top:10px}
.leg{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--on-surface-variant)}
.leg-dot{width:8px;height:8px;border-radius:50%}
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.donut-con{position:relative;display:flex;align-items:center;justify-content:center}
.donut-cen{position:absolute;text-align:center}
.donut-v{font-size:17px;font-weight:700;font-family:var(--font-mono);color:var(--on-surface)}
.donut-l{font-size:9px;color:var(--outline);margin-top:1px}
.donut-legend{width:100%;display:flex;flex-direction:column;gap:6px}
.donut-row{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--surface-container-low);font-size:12px}
.donut-rl{display:flex;align-items:center;gap:7px;color:var(--on-surface-variant)}
.donut-dot{width:8px;height:8px;border-radius:50%}
.donut-rv{font-weight:700;font-family:var(--font-mono);font-size:12px;color:var(--on-surface)}
.bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Suppliers */
.sup-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--surface-container-low);cursor:pointer;transition:.15s}
.sup-item:last-child{border-bottom:none}
.sup-item:hover{padding-right:4px}
[dir=ltr] .sup-item:hover{padding-right:0;padding-left:4px}
.sup-rank{font-size:10px;color:var(--outline);font-family:var(--font-mono);width:16px;text-align:center;flex-shrink:0}
.sup-rank.g{color:var(--secondary);font-weight:700}
.sup-av{width:32px;height:32px;background:var(--surface-container-high);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;font-weight:800;color:var(--on-surface-variant)}
.sup-inf{flex:1;min-width:0}
.sup-nm{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--on-surface)}
.sup-ct{font-size:10px;color:var(--outline);margin-top:1px}
.sup-bar{height:2px;background:var(--surface-container-high);margin-top:4px}
.sup-fill{height:100%;background:var(--primary)}
.sup-r{text-align:left}
.sup-am{font-size:12px;font-weight:700;font-family:var(--font-mono);color:var(--on-surface)}
.sup-pc{font-size:10px;color:var(--outline)}

/* Table */
.inv-table{width:100%;border-collapse:collapse}
.inv-table th{font-size:9px;color:var(--outline);font-weight:700;text-align:right;padding:0 14px 10px;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--surface-container-high)}
[dir=ltr] .inv-table th{text-align:left}
.inv-table td{padding:12px 14px;font-size:12px;border-bottom:1px solid var(--surface-container-low);color:var(--on-surface-variant)}
.inv-table tr:last-child td{border-bottom:none}
.inv-table tr:hover td{background:var(--surface-container-low)}

/* Invoice type badges */
.inv-type{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.it-s{background:rgba(0,44,24,.08);color:var(--primary)}
.it-p{background:rgba(22,80,202,.08);color:var(--info)}
.it-r{background:rgba(186,26,26,.08);color:var(--error)}

/* Invoice filters */
.inv-filters{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.filter-btn{
  padding:6px 16px;
  font-size:10px;font-weight:700;cursor:pointer;
  background:var(--surface-container-lowest);
  color:var(--on-surface-variant);
  font-family:var(--font-ar);transition:.15s;
  border:1px solid rgba(192,201,192,.3);
  text-transform:uppercase;letter-spacing:.5px;
  border-radius:var(--r-xs);
}
.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.filter-btn:hover:not(.active){border-color:var(--primary);color:var(--primary)}

/* Folders */
.year-folder{background:var(--surface-container-lowest);margin-bottom:12px;box-shadow:var(--sh-sm);overflow:hidden}
.year-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;cursor:pointer;transition:.15s;border-bottom:1px solid var(--surface-container-low)}
.year-header:hover{background:var(--surface-container-low)}
.year-title{font-size:14px;font-weight:800;color:var(--on-surface);display:flex;align-items:center;gap:10px}
.year-meta{font-size:10px;color:var(--outline)}
.month-folder{border-bottom:1px solid var(--surface-container-low)}
.month-folder:last-child{border-bottom:none}
.month-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 12px 30px;cursor:pointer;transition:.15s}
.month-header:hover{background:var(--surface-container-low)}
.month-info{display:flex;align-items:flex-start;gap:10px}
.month-name{font-size:13px;font-weight:700;color:var(--on-surface)}
.month-company{font-size:10px;font-weight:700;color:var(--primary)}
.month-stats{display:flex;gap:10px;margin-top:2px;flex-wrap:wrap}
.month-stat-s{font-size:9px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:3px}
.month-stat-p{font-size:9px;font-weight:700;color:var(--info);display:flex;align-items:center;gap:3px}
.month-count{font-size:10px;color:var(--outline);flex-shrink:0}
.inv-rows{background:var(--surface)}
.inv-row{display:flex;align-items:center;padding:11px 20px 11px 34px;border-bottom:1px solid var(--surface-container-low);font-size:12px;gap:14px;transition:.15s}
.inv-row:last-child{border-bottom:none}
.inv-row:hover{background:var(--surface-container-low)}
.inv-row-name{flex:1;font-weight:600;color:var(--on-surface)}
.inv-row-name a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.inv-row-date{width:90px;color:var(--outline);font-size:10px;text-align:center}
.inv-row-type{width:70px;text-align:center}
.inv-row-amount{font-family:var(--font-mono);font-weight:700;color:var(--on-surface);min-width:80px;text-align:left}

/* Upload */
.upload-zone{
  border:1px dashed rgba(0,44,24,.2);
  padding:48px;text-align:center;
  cursor:pointer;transition:.2s;
  background:var(--surface-container-lowest);
  margin-bottom:16px;
  box-shadow:var(--sh-sm);
}
.upload-zone:hover,.upload-zone.drag{border-color:var(--primary);background:rgba(0,44,24,.04)}
.upload-zone-icon{font-size:40px;margin-bottom:12px}
.upload-zone-title{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--on-surface)}
.upload-zone-sub{font-size:12px;color:var(--outline)}
.upload-progress{background:var(--surface-container-low);padding:14px;margin-bottom:10px;display:none}
.upload-progress-bar{height:2px;background:var(--surface-container-high);margin-top:8px;overflow:hidden}
.upload-progress-fill{height:100%;background:var(--primary);transition:.3s}

/* QR */
.qr-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;align-items:center;justify-content:center}
.qr-overlay.open{display:flex}
.qr-modal{background:var(--surface-container-lowest);padding:24px;width:min(340px,90vw)}
.qr-modal-title{font-size:14px;font-weight:700;margin-bottom:12px;color:var(--on-surface)}
#qr-video{width:100%;background:#000}
.qr-status{font-size:11px;color:var(--outline);margin-top:8px;min-height:16px}
.btn-close-qr{margin-top:12px;width:100%;padding:10px;background:var(--error);color:#fff;border:none;font-family:var(--font-ar);font-weight:700;cursor:pointer;font-size:13px}

/* Toast */
.toast{
  position:fixed;bottom:28px;left:50%;
  transform:translateX(-50%);
  background:var(--on-surface);color:#fff;
  padding:10px 22px;
  font-family:var(--font-ar);font-size:13px;font-weight:600;
  z-index:9999;box-shadow:var(--sh-editorial);
  white-space:nowrap;pointer-events:none;
  animation:fadeUp .25s ease;display:none;
}

/* Settings */
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--surface-container-low)}
.settings-row:last-child{border-bottom:none}
.settings-label{font-size:13px;font-weight:600;color:var(--on-surface)}
.settings-sub{font-size:11px;color:var(--outline);margin-top:2px}
.inp{
  width:100%;padding:10px 14px;
  border:1px solid rgba(192,201,192,.3);
  font-family:var(--font-ar);font-size:13px;
  background:var(--surface-container-low);
  color:var(--on-surface);outline:none;transition:.2s;
}
.inp:focus{border-color:var(--primary);background:var(--surface-container-lowest);box-shadow:0 0 0 2px rgba(0,44,24,.08)}
.inp-group{display:flex;gap:8px;margin-top:8px}
.btn-save{
  padding:9px 20px;background:var(--primary);color:#fff;border:none;
  font-family:var(--font-ar);font-weight:700;cursor:pointer;font-size:12px;
  transition:.2s;letter-spacing:.3px;
}
.btn-save:hover{background:var(--primary-hover)}
.empty-state{text-align:center;padding:64px 20px;color:var(--outline)}
.empty-icon{font-size:48px;margin-bottom:16px}
.empty-title{font-size:15px;font-weight:700;color:var(--on-surface-variant);margin-bottom:8px}
.empty-sub{font-size:13px;line-height:1.6}
.role-badge{display:inline-flex;align-items:center;padding:2px 9px;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.role-owner{background:rgba(118,90,0,.12);color:var(--secondary)}
.role-accountant{background:rgba(22,80,202,.08);color:var(--info)}
.role-viewer{background:var(--surface-container-low);color:var(--outline)}
.role-select{
  width:100%;padding:10px 14px;
  border:1px solid rgba(192,201,192,.3);
  font-family:var(--font-ar);font-size:13px;
  background:var(--surface-container-low);
  color:var(--on-surface);outline:none;transition:.2s;
  cursor:pointer;margin-bottom:12px;
}

/* Misc */
.inv-card{background:var(--surface-container-lowest);padding:14px 18px;margin-bottom:6px;box-shadow:var(--sh-sm);display:flex;align-items:center;gap:14px;transition:.2s}
.inv-card:hover{box-shadow:var(--sh-editorial);transform:translateY(-1px)}
.inv-card-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.inv-card-info{flex:1;min-width:0}
.inv-card-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--on-surface)}
.inv-card-sub{font-size:10px;color:var(--outline);margin-top:2px}
.inv-card-right{text-align:left;flex-shrink:0}
.inv-card-amount{font-size:15px;font-weight:800;font-family:var(--font-mono);color:var(--on-surface)}
.inv-card-vat{font-size:10px;color:var(--outline);margin-top:1px}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* Scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-container-high)}

/* Overlay */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99}
.menu-toggle{
  display:none;width:36px;height:36px;
  background:var(--surface-container-lowest);
  border:1px solid rgba(192,201,192,.3);
  align-items:center;justify-content:center;cursor:pointer;
  border-radius:50%;
}

/* Print */
@media print{
  .sidebar,.topbar,.btn-upload,.topbar-right,.sf-item{display:none!important}
  .main{margin:0!important}
  .content{padding:0!important}
}

/* Responsive */
@media(max-width:900px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(100%);transition:.3s;z-index:200;--sidebar-w:256px}
  [dir=ltr] .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:-12px 0 40px rgba(0,0,0,.12)}
  .main{margin:0!important;width:100%!important}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .charts-row,.bottom-row{grid-template-columns:1fr}
  .menu-toggle{display:flex!important}
  .topbar{padding:0 16px}
  .content{padding:16px}
  .sb-overlay{display:block!important}
}
@media(max-width:540px){
  .kpi-grid{grid-template-columns:1fr}
  .topbar{height:56px}
  .content{padding:12px}
  .btn-upload span{display:none}
  .btn-upload{padding:0 12px;width:36px;justify-content:center}
}

/* ── AUTH PAGE ── */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--surface-container-low);padding:24px}
.auth-card{width:min(420px,100%);background:var(--surface-container-lowest);padding:40px;box-shadow:var(--sh-editorial)}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.auth-logo-mark{width:32px;height:32px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800}
.auth-logo-name{font-size:16px;font-weight:800;color:var(--on-surface);letter-spacing:-.3px}
.auth-title{font-size:20px;font-weight:800;color:var(--on-surface);margin-bottom:6px;letter-spacing:-.5px}
.auth-sub{font-size:13px;color:var(--outline);margin-bottom:24px;line-height:1.6}
.auth-label{font-size:10px;font-weight:700;color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.auth-inp{width:100%;padding:11px 14px;border:1px solid rgba(192,201,192,.3);background:var(--surface-container-low);font-family:var(--font-ar);font-size:13px;color:var(--on-surface);outline:none;transition:.2s}
.auth-inp:focus{border-color:var(--primary);background:var(--surface-container-lowest);box-shadow:0 0 0 2px rgba(0,44,24,.08)}
.auth-inp.err{border-color:var(--error)}
.auth-err{font-size:11px;color:var(--error);margin-top:4px;display:none}
.auth-btn{width:100%;padding:12px;background:var(--primary);color:#fff;border:none;font-family:var(--font-ar);font-size:14px;font-weight:700;cursor:pointer;transition:.2s;letter-spacing:.3px}
.auth-btn:hover{background:var(--primary-hover)}
.auth-btn:disabled{opacity:.6;cursor:not-allowed}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;font-size:10px;color:var(--outline);text-transform:uppercase;letter-spacing:1px;font-weight:700}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(192,201,192,.3)}
.social{flex:1;padding:10px;border:1px solid rgba(192,201,192,.3);background:var(--surface-container-lowest);font-family:var(--font-ar);font-size:12px;font-weight:600;cursor:pointer;color:var(--on-surface-variant);display:flex;align-items:center;justify-content:center;gap:7px;transition:.2s}
.social:hover{border-color:var(--primary);color:var(--primary);background:rgba(0,44,24,.04)}
.socials{display:flex;gap:8px}
.tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid rgba(192,201,192,.2)}
.tab-btn{flex:1;padding:11px;font-size:12px;font-weight:700;cursor:pointer;background:none;border:none;font-family:var(--font-ar);color:var(--outline);transition:.15s;text-align:center;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ══════════════════════
   DASHBOARD BENTO GRID
══════════════════════ */
@media(max-width:1100px){
  #screen-dashboard [style*="grid-template-columns:1fr 1fr 1fr 1fr"]{
    grid-template-columns:1fr 1fr!important;
  }
  #screen-dashboard [style*="grid-column:span 2"]{
    grid-column:span 2!important;
  }
}
@media(max-width:900px){
  #screen-dashboard [style*="grid-template-columns:1fr auto"]{
    grid-template-columns:1fr!important;
  }
  #screen-dashboard [style*="min-width:240px"]{
    display:none;
  }
  #screen-dashboard [style*="grid-template-columns:1fr 300px"]{
    grid-template-columns:1fr!important;
  }
  #screen-dashboard [style*="padding:32px 32px"]{
    padding:20px 16px 16px!important;
    margin:-16px -16px 0!important;
  }
  #screen-dashboard [style*="background:var(--surface-container-low);padding:20px 32px"]{
    padding:16px 16px 24px!important;
    margin:0 -16px!important;
  }
  #screen-dashboard [style*="grid-template-columns:1fr 1fr 1fr 1fr"]{
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:600px){
  #screen-dashboard [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  #screen-dashboard [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
  #screen-dashboard [style*="grid-column:span 2"]{
    grid-column:span 1!important;
  }
  #screen-dashboard h1{
    font-size:28px!important;
  }
}