/* ===== شيكاتي — تصميم مستوحى من شيك برو ===== */
:root{
  /* -- Reference palette -- */
  --bg-body:#fbfaf6;
  --fg:#071027;
  --fg-dim:#515e75;
  --primary:#08173f;
  --primary-fg:#faf8f5;
  --gold:#d9a850;
  --gold-fg:#08173f;
  --gold-gradient:linear-gradient(135deg,#ebbd57 0%,#d49838 100%);
  --muted:#edf2f8;
  --muted-fg:#515e75;
  --card:#ffffff;
  --card-fg:#071027;
  --border:#d8dee8;
  --border-60:rgba(216,222,232,.6);
  --input:#dfe5ef;
  --ring:#d9a850;
  --hero-gradient:linear-gradient(135deg,#08173f 0%,#050f2c 50%,#102459 100%);
  --shadow-elegant:0 10px 40px -10px rgba(8,23,63,.25);
  --shadow-gold:0 8px 30px -8px rgba(217,168,80,.45);
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;
  --transition:all .25s cubic-bezier(.4,0,.2,1);

  /* -- Dark palette for app pages -- */
  --dark-bg:#0f172a;
  --dark-card:#1e293b;
  --dark-surface:#162032;
  --dark-input:#0f1a2e;
  --dark-border:rgba(255,255,255,.08);
  --dark-border-light:rgba(255,255,255,.14);
  --dark-ink:#f0f2f5;
  --dark-ink-dim:#94a3b8;
  --dark-gold-glow:rgba(217,168,80,.18);
  --danger:#ef4444;
  --danger-bg:rgba(239,68,68,.12);
  --ok:#22c55e;
  --ok-bg:rgba(34,197,94,.12);
  --warning:#f59e0b;
  --warning-bg:rgba(245,158,11,.12);
  --info:#3b82f6;
  --info-bg:rgba(59,130,246,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--dark-bg);color:var(--dark-ink);font-family:"Cairo","Tajawal",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.7;min-height:100vh}
a{color:var(--gold);text-decoration:none;transition:var(--transition)}
a:hover{opacity:.85}
h1{font-size:1.65rem;font-weight:900;margin:0 0 .5rem;letter-spacing:-.01em}
h2{font-size:1.15rem;font-weight:800;margin:0 0 .5rem}
img{max-width:100%}
.muted{color:var(--dark-ink-dim);font-size:.88rem}
.ltr{direction:ltr;text-align:left}
.center{text-align:center}

/* ===== Homepage body override ===== */
body.homepage{background:var(--bg-body);color:var(--fg)}

/* ===== Layout ===== */
.wrap{max-width:1200px;margin:0 auto;padding:28px 18px}
.wrap.narrow{max-width:540px}

/* ===== Grid ===== */
.grid{display:grid;gap:16px}
.grid.cols2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.cols3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid.cols4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* ===== Cards (app pages) ===== */
.card{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius);padding:22px;box-shadow:0 2px 12px rgba(0,0,0,.35);margin-bottom:18px;transition:var(--transition)}
.card:hover{border-color:var(--dark-border-light)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--gold-gradient);color:var(--gold-fg);border:0;border-radius:var(--radius-sm);padding:12px 28px;font-family:inherit;font-size:.93rem;font-weight:800;cursor:pointer;text-decoration:none;transition:var(--transition);box-shadow:0 2px 8px rgba(217,168,80,.25)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold);color:var(--gold-fg);opacity:1}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--dark-ink);border:1.5px solid var(--dark-border-light);box-shadow:none}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);background:var(--dark-gold-glow);box-shadow:none;opacity:1}
.btn.small{padding:8px 16px;font-size:.84rem;border-radius:var(--radius-xs)}
.btn.danger{background:linear-gradient(135deg,var(--danger),#dc2626);box-shadow:0 2px 8px rgba(239,68,68,.2)}
.btn.danger:hover{box-shadow:0 4px 16px rgba(239,68,68,.3)}

/* ===== Form Elements ===== */
label{display:block;font-weight:700;font-size:.86rem;color:var(--dark-ink-dim)}
label input,label select,label textarea{margin-top:5px}
input,select,textarea{width:100%;padding:10px 14px;border:1px solid var(--dark-border);border-radius:var(--radius-sm);font-family:inherit;font-size:.93rem;background:var(--dark-input);color:var(--dark-ink);transition:var(--transition);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--dark-gold-glow)}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.25)}
input[type=checkbox]{width:auto;margin:0;accent-color:var(--gold)}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239ca3af' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center;padding-left:32px}
textarea{resize:vertical;min-height:60px}

/* =============================================================
   HEADER — sticky, light bg with blur (matches on all pages)
   ============================================================= */
.site-head{
  position:sticky;top:0;z-index:100;
  width:100%;
  border-bottom:1px solid var(--border-60);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:0 24px;
}
/* Dark header for app pages (default) */
.site-head{background:rgba(15,23,42,.92)}
/* Light header for homepage */
body.homepage .site-head{background:rgba(251,250,246,.8);border-bottom-color:var(--border-60)}
body.homepage .site-head .brand{color:var(--primary)}
body.homepage .site-head .main-nav a{color:var(--fg-dim)}
body.homepage .site-head .main-nav a:hover{color:var(--primary)}
body.homepage .site-head .head-actions a:not(.btn){color:var(--fg-dim)}
body.homepage .site-head .nav-toggle{color:var(--fg);border-color:var(--border)}
body.homepage .site-head .mobile-nav{border-top-color:var(--border)}
body.homepage .site-head .mobile-nav a{color:var(--fg-dim)}

.head-inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;height:64px}
.brand{font-weight:900;font-size:1.12rem;text-decoration:none;display:flex;align-items:center;gap:10px;color:var(--dark-ink);white-space:nowrap}
.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--primary);color:var(--gold);font-weight:900;font-size:1rem}
.main-nav{display:flex;gap:6px;align-items:center;font-size:.88rem;font-weight:600}
.main-nav a{text-decoration:none;color:var(--dark-ink-dim);padding:8px 14px;border-radius:var(--radius-xs);transition:var(--transition)}
.main-nav a:hover{color:var(--dark-ink);background:rgba(255,255,255,.06);opacity:1}
.admin-link{color:var(--gold)!important;font-weight:800}
.head-actions{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:1px solid var(--dark-border-light);border-radius:var(--radius-xs);color:var(--dark-ink);font-size:1.3rem;padding:6px 10px;cursor:pointer}
.mobile-nav{display:none;width:100%;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--dark-border)}
.mobile-nav.open{display:flex}
.mobile-nav a{display:block;padding:10px 16px;color:var(--dark-ink-dim);border-radius:var(--radius-xs);font-size:.9rem;font-weight:600;text-decoration:none}
.mobile-nav a:hover{background:rgba(255,255,255,.06);color:var(--dark-ink);opacity:1}
@media(max-width:768px){
  .site-head{padding:0 16px}
  .nav-toggle{display:block}
  .main-nav{display:none}
  .head-actions{display:none}
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-foot{
  background:var(--primary);
  border-top:1px solid rgba(255,255,255,.08);
  padding:48px 32px 0;
  color:var(--primary-fg);
  font-size:.88rem;
}
.foot-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-brand .brand{color:var(--primary-fg)}
.foot-brand .logo{background:var(--gold);color:var(--primary)}
.foot-brand p{color:rgba(250,248,245,.6);font-size:.86rem;line-height:1.8;max-width:320px}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col h4{color:var(--primary-fg);font-size:.92rem;font-weight:800;margin-bottom:4px}
.foot-col a{color:rgba(250,248,245,.6);font-size:.85rem;text-decoration:none;transition:var(--transition)}
.foot-col a:hover{color:var(--gold);opacity:1}
.foot-bottom{max-width:1200px;margin:32px auto 0;padding:20px 0;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:rgba(250,248,245,.5);font-size:.82rem}
@media(max-width:768px){
  .site-foot{padding:32px 20px 0}
  .foot-inner{grid-template-columns:1fr 1fr;gap:24px}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:480px){
  .foot-inner{grid-template-columns:1fr}
}

/* ===== Flash ===== */
.flash{padding:12px 20px;font-weight:700;border-radius:var(--radius-sm);margin:12px 18px}
.flash{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(34,197,94,.2)}
.flash.err{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(239,68,68,.2)}
.ok-box{background:var(--ok-bg);color:var(--ok);padding:12px;border-radius:var(--radius-sm);border:1px solid rgba(34,197,94,.2)}
.err-box{background:var(--danger-bg);color:var(--danger);padding:12px;border-radius:var(--radius-sm);border:1px solid rgba(239,68,68,.2)}

/* ===== Tables ===== */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--dark-border)}
th{background:var(--dark-surface);font-weight:800;color:var(--dark-ink-dim);font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
tbody tr{transition:var(--transition)}
tbody tr:hover{background:rgba(217,168,80,.04)}
.table-wrap{overflow-x:auto;border:1px solid var(--dark-border);border-radius:var(--radius);background:var(--dark-card)}

/* ===== Tags ===== */
.tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.76rem;font-weight:700}
.tag{background:rgba(255,255,255,.06);color:var(--dark-ink-dim)}
.tag.due{background:var(--warning-bg);color:var(--warning)}
.tag.paid,.tag.approved{background:var(--ok-bg);color:var(--ok)}
.tag.returned,.tag.late,.tag.rejected{background:var(--danger-bg);color:var(--danger)}
.tag.canceled{background:rgba(255,255,255,.05);color:var(--dark-ink-dim)}
.tag.pending{background:var(--info-bg);color:var(--info)}

/* ===== Stats (app pages) ===== */
.stat{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius);padding:16px 18px;transition:var(--transition)}
.stat:hover{border-color:var(--gold);box-shadow:0 0 16px var(--dark-gold-glow)}
.stat b{display:block;font-size:1.4rem;color:var(--gold);margin-top:4px}
.stat .muted{font-size:.8rem}

/* ===== Tabs ===== */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.tabs a,.tab{padding:8px 16px;border-radius:99px;background:var(--dark-card);border:1px solid var(--dark-border);text-decoration:none;font-size:.86rem;font-weight:700;color:var(--dark-ink-dim);transition:var(--transition);cursor:pointer}
.tabs a:hover,.tab:hover{border-color:var(--gold);color:var(--gold);background:var(--dark-gold-glow)}
.tabs a.on,.tabs a.active,.tab.active{background:var(--gold-gradient);color:var(--gold-fg);border-color:var(--gold)}

/* ===== Row actions ===== */
.row-actions{display:flex;gap:6px;justify-content:flex-start;flex-wrap:wrap}
.row-actions form{display:flex;gap:6px;align-items:center}

/* ===== Pricing ===== */
.price{font-size:2.2rem;font-weight:900;color:var(--gold)}
.pricing-card{transition:var(--transition);position:relative;overflow:hidden}
.pricing-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 8px 32px var(--dark-gold-glow)}
.pricing-card.featured{border-color:var(--gold);box-shadow:0 0 24px var(--dark-gold-glow)}
.pricing-card.featured::before{content:'الأكثر طلباً';position:absolute;top:16px;left:-30px;background:var(--gold-gradient);color:var(--gold-fg);font-size:.72rem;font-weight:800;padding:4px 36px;transform:rotate(-45deg);letter-spacing:.03em}
ul.features{list-style:none;padding:0;margin:14px 0}
ul.features li{padding:8px 0;border-bottom:1px solid var(--dark-border);color:var(--dark-ink-dim);font-size:.88rem;display:flex;align-items:center;gap:8px}
ul.features li:last-child{border:none}
ul.features li::before{content:none}
ul.features li svg{flex-shrink:0}

/* =============================================================
   HOMEPAGE — Hero Section
   ============================================================= */
.hp-hero{
  position:relative;overflow:hidden;
  background:var(--hero-gradient);
  color:var(--primary-fg);
}
.hp-hero-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  padding:80px 32px 60px;
}
.hp-hero-content{position:relative;z-index:1}
.hp-hero::before{
  content:'';position:absolute;top:-30%;right:-10%;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(217,168,80,.08) 0%,transparent 70%);
  pointer-events:none;
}

/* Badge */
.hp-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(217,168,80,.12);border:1px solid rgba(217,168,80,.2);
  border-radius:99px;padding:6px 18px;font-size:.82rem;font-weight:700;color:var(--gold);
  margin-bottom:24px;
}
.hp-badge svg{flex-shrink:0}

/* Hero title */
.hp-hero h1{
  font-size:clamp(2rem,5vw,3.2rem);font-weight:900;line-height:1.25;
  margin-bottom:20px;color:var(--primary-fg);
}
.hp-hero h1 .gold{color:var(--gold)}

/* Hero subtitle */
.hp-hero .subtitle{
  font-size:1.05rem;line-height:1.9;color:rgba(250,248,245,.65);
  max-width:520px;margin-bottom:32px;
}

/* Hero buttons */
.hp-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.hp-hero-actions .btn.ghost{color:var(--primary-fg);border-color:rgba(250,248,245,.25)}
.hp-hero-actions .btn.ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(217,168,80,.12)}

/* Hero checks */
.hp-hero-checks{
  display:flex;gap:24px;flex-wrap:wrap;
  font-size:.86rem;color:rgba(250,248,245,.55);
}
.hp-hero-checks span{display:flex;align-items:center;gap:6px}

/* Cheque mockup */
.hp-cheque-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
.hp-cheque{
  width:100%;max-width:480px;
  background:linear-gradient(135deg,#f9fafb,#fff);
  border-radius:14px;border:1px solid #e2e8f0;
  padding:24px 28px;text-align:right;direction:rtl;
  box-shadow:0 25px 60px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.15);
  color:#1e293b;position:relative;overflow:hidden;
}
.hp-cheque::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--gold-gradient);
}
.hp-cheque-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding-bottom:14px;border-bottom:1.5px solid #e2e8f0;margin-bottom:14px;
}
.hp-cheque-bank{font-weight:900;font-size:.95rem;color:#1e293b}
.hp-cheque-bank small{display:block;font-weight:400;color:#64748b;font-size:.72rem}
.hp-cheque-date{font-size:.82rem;color:#64748b;font-weight:600;direction:ltr}
.hp-cheque-cross{
  padding:2px 12px;border:1.5px solid var(--gold);border-radius:6px;
  font-size:.75rem;font-weight:800;color:var(--gold);
}
.hp-cheque-body{display:grid;gap:10px;margin-bottom:14px}
.hp-cheque-row{display:flex;gap:10px;align-items:baseline}
.hp-cheque-lbl{color:#64748b;font-size:.8rem;font-weight:700;flex-shrink:0}
.hp-cheque-val{flex:1;border-bottom:1px dotted #cbd5e1;font-weight:700;font-size:.85rem;color:#1e293b;padding-bottom:2px}
.hp-cheque-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:14px;border-top:1.5px solid #e2e8f0;
}
.hp-cheque-amount{
  font-weight:900;font-size:1.1rem;color:var(--gold);direction:ltr;
  background:rgba(217,168,80,.08);padding:4px 14px;border-radius:8px;
}
.hp-cheque-sig{text-align:center;font-size:.75rem;color:#94a3b8}
.hp-cheque-sig span{display:block}

@media(max-width:900px){
  .hp-hero-inner{grid-template-columns:1fr;text-align:center;padding:56px 20px 40px}
  .hp-hero .subtitle{margin-left:auto;margin-right:auto}
  .hp-hero-actions{justify-content:center}
  .hp-hero-checks{justify-content:center}
  .hp-cheque-wrap{margin-top:20px}
  .hp-cheque{max-width:400px;margin:0 auto}
}

/* =============================================================
   HOMEPAGE — Features Section (LIGHT background)
   ============================================================= */
.hp-features{
  background:rgba(237,242,248,.4);
  padding:80px 24px;
}
.hp-features-inner{max-width:1100px;margin:0 auto;text-align:center}
.hp-section-label{
  display:inline-block;
  background:rgba(217,168,80,.1);border:1px solid rgba(217,168,80,.18);
  color:#b8911e;border-radius:99px;
  padding:5px 20px;font-size:.8rem;font-weight:700;
  margin-bottom:16px;
}
.hp-section-title{
  font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:900;
  color:var(--fg);margin-bottom:12px;
}
.hp-section-desc{
  color:var(--fg-dim);font-size:1rem;
  max-width:540px;margin:0 auto 48px;line-height:1.8;
}
.hp-features-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.hp-feat-card{
  background:var(--card);
  border:1px solid var(--border-60);
  border-radius:16px;
  padding:32px 24px;
  text-align:center;
  transition:var(--transition);
}
.hp-feat-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-elegant);
  border-color:rgba(217,168,80,.5);
}
.hp-feat-icon{
  width:56px;height:56px;
  border-radius:50%;
  display:grid;place-items:center;
  margin:0 auto 18px;
  background:var(--primary);
  color:var(--gold);
}
.hp-feat-icon svg{width:24px;height:24px}
.hp-feat-card h3{
  font-size:1.05rem;font-weight:800;color:var(--fg);margin-bottom:8px;
}
.hp-feat-card p{
  font-size:.88rem;color:var(--fg-dim);line-height:1.75;
}
@media(max-width:900px){
  .hp-features-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:540px){
  .hp-features{padding:48px 16px}
  .hp-features-grid{grid-template-columns:1fr}
}

/* =============================================================
   HOMEPAGE — Stats Section
   ============================================================= */
.hp-stats{
  background:rgba(237,242,248,.25);
  padding:64px 24px;
}
.hp-stats-inner{max-width:900px;margin:0 auto}
.hp-stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center;
}
.hp-stat-item{padding:16px 0}
.hp-stat-item strong{
  display:block;font-size:clamp(2.2rem,5vw,3rem);font-weight:900;
  color:var(--gold);direction:ltr;line-height:1.15;margin-bottom:6px;
}
.hp-stat-item span{
  color:var(--fg-dim);font-size:.92rem;font-weight:600;
}
@media(max-width:640px){
  .hp-stats-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}

/* =============================================================
   HOMEPAGE — CTA Section
   ============================================================= */
.hp-cta{
  padding:20px 24px 80px;
  max-width:1100px;margin:0 auto;
}
.hp-cta-box{
  background:var(--hero-gradient);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:64px 40px;text-align:center;
  position:relative;overflow:hidden;
  color:var(--primary-fg);
}
.hp-cta-box::before{
  content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(217,168,80,.08) 0%,transparent 60%);
  pointer-events:none;
}
.hp-cta-box h2{
  font-size:clamp(1.4rem,3vw,1.9rem);font-weight:900;
  margin-bottom:14px;position:relative;z-index:1;
}
.hp-cta-box p{
  color:rgba(250,248,245,.6);font-size:1rem;margin-bottom:28px;
  position:relative;z-index:1;
}
.hp-cta-box .btn{position:relative;z-index:1}
@media(max-width:640px){
  .hp-cta{padding:20px 16px 48px}
  .hp-cta-box{padding:40px 20px;border-radius:16px}
}

/* ===== Cheque preview (app page) ===== */
.cheque-sheet{position:relative;overflow:hidden;background:#fff;background-repeat:no-repeat;background-size:100% 100%}
.cheque-field{position:absolute;display:inline-block;text-align:center;white-space:pre-wrap;color:#000!important}
.cheque-preview{display:flex;justify-content:center;overflow:hidden;background:var(--dark-surface);border:1px solid var(--dark-border);border-radius:var(--radius);padding:16px}

/* ===== Voucher ===== */
.voucher{border:2px solid var(--dark-border-light);border-radius:var(--radius);background:var(--dark-card);overflow:hidden}
.voucher header{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:2px solid var(--dark-border-light);background:var(--dark-surface);padding:16px 22px}
.voucher .vtitle{border:1px solid var(--dark-border-light);border-radius:var(--radius-xs);padding:6px 16px;font-weight:900;font-size:1.15rem;color:var(--gold)}
.voucher .meta{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--dark-border);font-size:.9rem}
.voucher .meta div{padding:10px 22px}
.voucher .meta div:first-child{border-left:1px solid var(--dark-border)}
.voucher .body{padding:22px;display:grid;gap:16px;line-height:2}
.vline{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.vline span.lbl{color:var(--dark-ink-dim);flex-shrink:0}
.vline span.val{flex:1;min-width:0;border-bottom:1px dotted rgba(255,255,255,.15);font-weight:700;overflow-wrap:anywhere}
.vamount{display:flex;justify-content:space-between;gap:14px;align-items:center;border:1px solid var(--dark-border-light);background:var(--dark-surface);border-radius:var(--radius-sm);padding:14px 18px}
.vamount b{font-size:1.3rem;color:var(--gold)}
.vsign{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--dark-border);font-size:.9rem}
.vsign div{padding:16px 22px 36px}
.vsign div:first-child{border-left:1px solid var(--dark-border)}
.vsign p.line{margin-top:36px;border-top:1px dotted rgba(255,255,255,.2)}

/* ===== Notifications ===== */
.notif{padding:12px 0;border-bottom:1px solid var(--dark-border)}
.notif:last-child{border-bottom:none}
.notif.unread{background:var(--dark-gold-glow);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:4px}

/* ===== Auth page ===== */
.auth-wrapper{min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:440px;background:var(--dark-card);border:1px solid var(--dark-border);border-radius:var(--radius);padding:32px;box-shadow:0 8px 32px rgba(0,0,0,.45)}
.auth-card .tabs{justify-content:center;margin-bottom:20px}
.auth-card label span{display:block;margin-bottom:4px;color:var(--dark-ink-dim);font-weight:700;font-size:.86rem}
.auth-card label small{font-weight:400}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

/* ===== Print ===== */
@media print{
  @page{size:A4 landscape;margin:0}
  @page voucherpage{size:A4 portrait;margin:1.5cm}
  html,body{width:29.7cm;height:21cm;margin:0!important;padding:0!important;background:#fff!important;color:#000!important}
  body.printing-voucher,html:has(body.printing-voucher){width:auto!important;height:auto!important;overflow:visible!important}
  body *{visibility:hidden!important}
  .cheque-print-area,.cheque-print-area *,.voucher-print-area,.voucher-print-area *{visibility:visible!important}
  .voucher-print-area{
    page:voucherpage;position:absolute!important;top:0!important;right:0!important;left:0!important;bottom:auto!important;
    width:auto!important;max-width:100%!important;height:auto!important;max-height:none!important;overflow:visible!important;
    margin:0!important;border:1.5pt solid #111!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;
    color:#111!important;padding:0!important;box-sizing:border-box!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .voucher-print-area *{overflow:visible!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;text-overflow:clip!important;color:#111!important}
  .voucher-print-area > *{break-inside:avoid;page-break-inside:avoid}
  .voucher-print-area header{background:#eee!important}
  .voucher-print-area .vamount{background:#f7f7f7!important;border-color:#333!important}
  .voucher-print-area .vamount b{color:#111!important}
  .voucher-print-area .vtitle{color:#111!important;border-color:#333!important}
  .voucher-print-area .vline span.val{border-bottom-color:#999!important}
  .voucher-print-area .meta div{border-color:#ccc!important}
  .voucher-print-area .vsign div{border-color:#ccc!important}
  .voucher-print-area .vsign p.line{border-color:#999!important}
  .cheque-print-area{position:absolute!important;top:6.35cm!important;right:0!important;left:auto!important;bottom:auto!important;transform:none!important;width:auto!important;height:auto!important;overflow:visible!important}
  .cheque-sheet{box-shadow:none!important;border:none!important;background-image:none!important;transform:none!important;transform-origin:top right!important;margin:0!important}
  .cheque-field{color:#000!important}
  .no-print{display:none!important}
}

/* ===== Animation ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .6s ease both}
.fade-up-d1{animation-delay:.1s}
.fade-up-d2{animation-delay:.2s}
.fade-up-d3{animation-delay:.3s}
.fade-up-d4{animation-delay:.4s}
.fade-up-d5{animation-delay:.5s}

/* ===== Utility ===== */
.gold{color:var(--gold)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--danger);color:#fff;font-size:.7rem;font-weight:800;margin-right:4px;vertical-align:middle}
.main-nav a svg{vertical-align:-2px;margin-left:4px;opacity:.6}
.main-nav a:hover svg{opacity:1}
.admin-tabs{margin-bottom:20px}
.admin-tabs .tabs{gap:4px}

/* ===== Hero for inner pages (pricing etc) ===== */
.hero{text-align:center;padding:60px 20px 50px;background:radial-gradient(ellipse at top,rgba(217,168,80,.08) 0%,transparent 60%)}
.hero h1{font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.35;margin-bottom:12px}
.hero .gold{color:var(--gold)}
.hero p{max-width:600px;margin:0 auto 24px;color:var(--dark-ink-dim);font-size:1.05rem;line-height:1.8}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.feature-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:14px;background:var(--dark-gold-glow);color:var(--gold);border:1px solid rgba(217,168,80,.15)}
.feature-card{text-align:center;padding:28px 20px}
.feature-card:hover{border-color:var(--gold);box-shadow:0 4px 20px var(--dark-gold-glow)}
.feature-card .feature-icon{margin:0 auto 14px}
.hero-stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:40px;padding-top:28px;border-top:1px solid var(--dark-border)}
.hero-stat{text-align:center}
.hero-stat b{display:block;font-size:1.6rem;color:var(--gold);font-weight:900}
.hero-stat span{color:var(--dark-ink-dim);font-size:.84rem}
.cta-banner{text-align:center;padding:40px;background:linear-gradient(135deg,rgba(217,168,80,.08),rgba(217,168,80,.02));border:1px solid rgba(217,168,80,.15);border-radius:var(--radius)}
.cta-banner h2{font-size:1.4rem;margin-bottom:10px}
.cta-banner p{color:var(--dark-ink-dim);margin-bottom:20px}