/* HisaabBox site theme: the same look as the mobile app (frontend/app/mobile.css) and the blog,
   applied on top of Bootstrap 5.3 + style.css on every website page. Load it AFTER both.
   Dark mode: <html data-bs-theme="dark"> (set by theme.js from localStorage "hb_dark" or the
   system setting) -- Bootstrap's own dark palette is re-tinted green below. */
:root,[data-bs-theme="light"]{
  --hb-g400:#3E9C6B; --hb-g500:#2F855A; --hb-g600:#256B49; --hb-g700:#1B5E20; --hb-g900:#1A3A28;
  --hb-grad:linear-gradient(135deg,#2F855A 0%,#1B5E20 100%);
  --hb-hero:radial-gradient(110% 120% at 100% 0%,rgba(47,133,90,.55) 0%,transparent 55%),linear-gradient(135deg,#1A3A28 0%,#0B1E14 100%);
  --hb-bg:#F2F6F3; --hb-surface:#FFFFFF; --hb-surface-2:#F6FAF7; --hb-line:#E4EBE6; --hb-line-2:#D2DDD5;
  --hb-ink:#0F1F16; --hb-text:#33443A; --hb-muted:#5F7166; --hb-ok-soft:#E3F3E9;
  --hb-sh:0 1px 2px rgba(15,31,22,.05),0 6px 20px rgba(15,31,22,.06);
  --hb-sh-lg:0 18px 44px rgba(15,31,22,.12);
  --hb-sh-green:0 8px 20px rgba(27,94,32,.28);

  --bs-body-bg:var(--hb-bg); --bs-body-bg-rgb:242,246,243;
  --bs-body-color:var(--hb-text); --bs-body-color-rgb:51,68,58;
  --bs-emphasis-color:var(--hb-ink); --bs-heading-color:var(--hb-ink);
  --bs-secondary-color:var(--hb-muted);
  --bs-secondary-bg:#EAF1EC; --bs-tertiary-bg:var(--hb-surface-2);
  --bs-border-color:var(--hb-line); --bs-border-color-translucent:rgba(15,31,22,.1);
  --bs-primary:#2F855A; --bs-primary-rgb:47,133,90; --bs-success:#2F855A; --bs-success-rgb:47,133,90;
  --bs-primary-text-emphasis:#1B5E20; --bs-primary-bg-subtle:#E3F3E9; --bs-primary-border-subtle:#B9DCC6;
  --bs-success-text-emphasis:#1B5E20; --bs-success-bg-subtle:#E3F3E9; --bs-success-border-subtle:#B9DCC6;
  --bs-link-color:#256B49; --bs-link-color-rgb:37,107,73; --bs-link-hover-color:#1B5E20; --bs-link-hover-color-rgb:27,94,32;
  --bs-focus-ring-color:rgba(47,133,90,.3);
  --bs-border-radius:.75rem; --bs-border-radius-sm:.6rem; --bs-border-radius-lg:1rem; --bs-border-radius-xl:1.25rem;
  --bs-font-sans-serif:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --accent:#2F855A;
}
[data-bs-theme="dark"]{
  --hb-bg:#101914; --hb-surface:#17231B; --hb-surface-2:#1D2B22; --hb-line:#2A3A30; --hb-line-2:#3A4C40;
  --hb-ink:#F0F7F2; --hb-text:#C6D5CB; --hb-muted:#A1B3A7; --hb-ok-soft:#203D2B;
  --hb-sh:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25); --hb-sh-lg:0 18px 44px rgba(0,0,0,.45);

  --bs-body-bg:var(--hb-bg); --bs-body-bg-rgb:16,25,20;
  --bs-body-color:var(--hb-text); --bs-body-color-rgb:198,213,203;
  --bs-emphasis-color:var(--hb-ink); --bs-heading-color:var(--hb-ink);
  --bs-secondary-color:var(--hb-muted);
  --bs-secondary-bg:#1D2B22; --bs-tertiary-bg:#1A271F;
  --bs-border-color:var(--hb-line); --bs-border-color-translucent:rgba(255,255,255,.1);
  --bs-primary:#4FBF85; --bs-primary-rgb:79,191,133; --bs-success:#4FBF85; --bs-success-rgb:79,191,133;
  --bs-primary-text-emphasis:#86EFAC; --bs-primary-bg-subtle:#203D2B; --bs-primary-border-subtle:#2F5A3F;
  --bs-success-text-emphasis:#86EFAC; --bs-success-bg-subtle:#203D2B; --bs-success-border-subtle:#2F5A3F;
  --bs-link-color:#6EE7A8; --bs-link-color-rgb:110,231,168; --bs-link-hover-color:#A7F3C9; --bs-link-hover-color-rgb:167,243,201;
  color-scheme:dark;
}

body{background-color:var(--hb-bg)!important;color:var(--bs-body-color);font-family:var(--bs-font-sans-serif);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{letter-spacing:-.01em}

/* ---------- Buttons ---------- */
.btn{border-radius:12px;font-weight:700}
.btn-sm{border-radius:10px}
.btn.rounded-pill{border-radius:999px}
.btn-primary,.btn-success{--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-disabled-color:#fff;
  --bs-btn-bg:#2F855A;--bs-btn-border-color:transparent;--bs-btn-hover-bg:#256B49;--bs-btn-hover-border-color:transparent;
  --bs-btn-active-bg:#1B5E20;--bs-btn-active-border-color:transparent;--bs-btn-disabled-bg:#7FB596;--bs-btn-disabled-border-color:transparent;
  --bs-btn-focus-shadow-rgb:47,133,90;background-image:var(--hb-grad);box-shadow:var(--hb-sh-green)}
.btn-primary:hover,.btn-success:hover{box-shadow:0 10px 26px rgba(27,94,32,.38)}
.btn-outline-primary,.btn-outline-success{--bs-btn-color:var(--hb-g600);--bs-btn-border-color:#9CCBB0;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#2F855A;
  --bs-btn-hover-border-color:#2F855A;--bs-btn-active-color:#fff;--bs-btn-active-bg:#256B49;--bs-btn-active-border-color:#256B49;--bs-btn-focus-shadow-rgb:47,133,90}
[data-bs-theme="dark"] .btn-outline-primary,[data-bs-theme="dark"] .btn-outline-success{--bs-btn-color:#86EFAC;--bs-btn-border-color:#2F5A3F}
.btn-outline-secondary{--bs-btn-color:var(--hb-text);--bs-btn-border-color:var(--hb-line-2);--bs-btn-hover-bg:var(--hb-surface-2);--bs-btn-hover-color:var(--hb-ink);--bs-btn-hover-border-color:var(--hb-g500)}
.btn-light{--bs-btn-bg:#fff;--bs-btn-color:#1B5E20;--bs-btn-hover-bg:#E9F5EE;--bs-btn-hover-color:#1B5E20;--bs-btn-border-color:#fff;--bs-btn-hover-border-color:#E9F5EE}
.btn-link{--bs-btn-color:var(--bs-link-color);--bs-btn-hover-color:var(--bs-link-hover-color)}
.text-primary,.text-success{color:var(--bs-primary)!important}
.bg-primary,.bg-success{background-image:var(--hb-grad)!important;background-color:#2F855A!important}
.badge.bg-success,.badge.bg-primary,.badge.text-bg-success{background-image:var(--hb-grad)!important}
.badge{border-radius:999px;font-weight:700}

/* ---------- Surfaces ---------- */
.card{--bs-card-bg:var(--hb-surface);--bs-card-border-color:var(--hb-line);--bs-card-border-radius:16px;--bs-card-inner-border-radius:15px;
  --bs-card-cap-bg:var(--hb-surface-2);box-shadow:var(--hb-sh)}
.card.shadow-lg{box-shadow:var(--hb-sh-lg)!important}
.card.border-0{box-shadow:var(--hb-sh)}
.modal{--bs-modal-bg:var(--hb-surface);--bs-modal-border-radius:20px;--bs-modal-border-color:var(--hb-line)}
.dropdown-menu{--bs-dropdown-bg:var(--hb-surface);--bs-dropdown-border-color:var(--hb-line);--bs-dropdown-link-active-bg:#2F855A;--bs-dropdown-border-radius:14px;box-shadow:var(--hb-sh-lg)}
.offcanvas{--bs-offcanvas-bg:var(--hb-surface)}
.list-group{--bs-list-group-bg:var(--hb-surface);--bs-list-group-border-color:var(--hb-line);--bs-list-group-active-bg:#2F855A;--bs-list-group-active-border-color:#2F855A}
.nav-pills{--bs-nav-pills-link-active-bg:#2F855A}
.nav-tabs{--bs-nav-tabs-link-active-color:var(--hb-g600)}
.pagination{--bs-pagination-active-bg:#2F855A;--bs-pagination-active-border-color:#2F855A;--bs-pagination-color:var(--bs-link-color)}
.progress-bar{background-image:var(--hb-grad)}
.alert{border-radius:14px}
.alert-success{--bs-alert-bg:var(--bs-success-bg-subtle);--bs-alert-color:var(--bs-success-text-emphasis);--bs-alert-border-color:var(--bs-success-border-subtle)}
.table{--bs-table-bg:transparent;--bs-table-striped-bg:rgba(47,133,90,.04);--bs-table-hover-bg:rgba(47,133,90,.06)}
.table thead th{color:var(--hb-muted)}
.form-control,.form-select{border-radius:12px;border-color:var(--hb-line-2);background-color:var(--hb-surface)}
.form-control-sm,.form-select-sm{border-radius:10px}
.form-control:focus,.form-select:focus{border-color:#2F855A;box-shadow:0 0 0 .2rem rgba(47,133,90,.2)}
.form-check-input:checked{background-color:#2F855A;border-color:#2F855A}
.form-check-input:focus{border-color:#2F855A;box-shadow:0 0 0 .2rem rgba(47,133,90,.2)}
.input-group-text{background:var(--hb-surface-2);border-color:var(--hb-line-2)}
.input-group>.form-control{border-radius:12px}
.input-group>:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}
.input-group>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu){border-top-right-radius:0;border-bottom-right-radius:0}

/* Hard-coded light utility classes and inline backgrounds follow the theme in dark mode. */
[data-bs-theme="dark"] .bg-white{background-color:var(--hb-surface)!important}
[data-bs-theme="dark"] .bg-light{background-color:var(--hb-surface-2)!important}
[data-bs-theme="dark"] .text-dark{color:var(--hb-ink)!important}
[data-bs-theme="dark"] .text-black{color:var(--hb-ink)!important}
[data-bs-theme="dark"] .border-light{border-color:var(--hb-line)!important}
[data-bs-theme="dark"] [style*="background:#fff;"]:not(.hb-keep-light),
[data-bs-theme="dark"] [style*="background: #fff;"]:not(.hb-keep-light),
[data-bs-theme="dark"] [style*="background:#ffffff"]:not(.hb-keep-light){background-color:var(--hb-surface)!important}
[data-bs-theme="dark"] [style*="background:#f8f9fa"],[data-bs-theme="dark"] [style*="background:#f1f5f9"],[data-bs-theme="dark"] [style*="background:#eef2f5"]{background:var(--hb-surface-2)!important}
[data-bs-theme="dark"] img[src*="hisaabbox-mark"]{background:transparent}

/* ---------- App shell (logged-in website) ---------- */
.sidebar{background:var(--hb-hero)!important}
.sidebar-nav .nav-link{border-radius:12px;font-weight:600}
.sidebar-nav .nav-link.active{background:var(--hb-grad);box-shadow:var(--hb-sh-green)}
.topbar{border-bottom-color:var(--hb-line)}
.kpi-label{color:var(--hb-muted)}
.kpi-value{color:var(--hb-ink)}
.sale-summary{background:var(--hb-surface-2);border-color:var(--hb-line);color:var(--hb-text);border-radius:12px}
.sale-summary span+span{border-left-color:var(--hb-line)}
.auth-page{background:var(--hb-hero)}
@media (max-width:991.98px){.topbar{background:var(--hb-hero)}}
#scanCamera{border-color:var(--hb-line);border-radius:16px}

/* ---------- Theme toggle ---------- */
.hb-theme-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--hb-line-2);background:var(--hb-surface);
  color:var(--hb-ink);cursor:pointer;flex:none;line-height:1;padding:0}
.hb-theme-btn:hover{border-color:#2F855A}
.hb-theme-btn--glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.hb-theme-btn--glass:hover{background:rgba(255,255,255,.2)}
.hb-theme-btn--float{position:fixed;top:14px;right:14px;z-index:1030;width:42px;height:42px;box-shadow:var(--hb-sh)}
.hb-theme-btn svg{width:18px;height:18px}

/* Simple content pages (guides, privacy, terms) */
.hb-page h1{color:var(--hb-ink)}
.hb-page h2{color:var(--hb-ink)}
.hb-page .container{background:var(--hb-surface);border:1px solid var(--hb-line);border-radius:24px;box-shadow:var(--hb-sh);margin-top:24px;margin-bottom:24px;padding:32px clamp(18px,4vw,44px)!important}
.hb-page table{--bs-table-bg:transparent}

/* Top bar on the simple pages (guides, privacy, terms): logo + clearly visible Log in / Sign up */
.hb-topbar{position:sticky;top:0;z-index:1020;display:flex;align-items:center;gap:10px;padding:10px max(16px,calc((100vw - 900px)/2));
  background:color-mix(in srgb,var(--hb-surface) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--hb-line)}
.hb-topbar__brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:var(--hb-ink);text-decoration:none;margin-right:auto}
.hb-topbar__tile{width:36px;height:36px;border-radius:10px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px var(--hb-line)}
.hb-topbar__nav{display:flex;align-items:center;gap:8px}
.hb-topbar__nav .btn{min-height:36px;display:inline-flex;align-items:center}
@media (max-width:400px){.hb-topbar__name{display:none}}

/* ================= Homepage (index.html) ================= */
.hb-navlink{color:rgba(255,255,255,.85);text-decoration:none;font-weight:700;font-size:14px;padding:6px 8px;border-radius:8px}
.hb-navlink:hover{color:#fff;background:rgba(255,255,255,.1)}
.hb-hero{background:var(--hb-hero);color:#fff;overflow:hidden}
.hb-hero__in{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;padding-top:56px;padding-bottom:56px}
.hb-hero h1{color:#fff;font-weight:800;font-size:clamp(30px,3.9vw,46px);line-height:1.1;letter-spacing:-.03em;margin:18px 0 14px}
.hb-hero__lede{font-size:18px;color:rgba(255,255,255,.82);max-width:600px;margin-bottom:24px}
.hb-hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.hb-hero__sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:16px;font-size:15px}
.hb-new{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;font-weight:700;font-size:14px}
.hb-new span{background:#6EE7A8;color:#0B1E14;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.hb-new:hover{color:#fff;background:rgba(255,255,255,.16)}
.hb-hero__art{position:relative;height:520px}
.hb-phone{border-radius:34px;padding:8px;background:#0B1E14;box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.hb-phone img{display:block;width:100%;height:auto;border-radius:27px}
.hb-hero__art .hb-phone{position:absolute;width:240px}
.hb-phone--front{right:12%;top:20px;transform:rotate(3deg);z-index:2}
.hb-phone--back{right:46%;top:70px;transform:rotate(-7deg);opacity:.9}
.hb-shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:1040px;margin:0 auto}
.hb-shots figure{margin:0;text-align:center}
.hb-shots .hb-phone{box-shadow:var(--hb-sh-lg)}
.hb-shots figcaption{margin-top:12px;font-weight:700;color:var(--hb-ink);font-size:14.5px}
.hb-app__points{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.hb-app__points span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--hb-surface);border:1px solid var(--hb-line);font-weight:700;font-size:14px;color:var(--hb-ink)}
.hb-app__points i{color:var(--hb-g500)}
.hb-ind{background:var(--hb-surface);border:1px solid var(--hb-line);border-radius:20px;padding:22px;box-shadow:var(--hb-sh);display:flex;flex-direction:column}
.hb-ind--featured{border:2px solid var(--hb-g500)}
.hb-ind__ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:22px;color:#fff;background:var(--hb-grad);margin-bottom:12px;box-shadow:var(--hb-sh-green)}
.hb-ind h3{font-size:18px;font-weight:800;margin:0 0 10px}
.hb-ind ul{padding-left:18px;margin:0 0 14px;color:var(--hb-text);font-size:14.5px}
.hb-ind li{margin-bottom:4px}
.hb-ind li::marker{color:var(--hb-g500)}
.hb-ind__cta{margin-top:auto;font-weight:800;text-decoration:none;font-size:14.5px}
.hb-flow{background:var(--hb-surface-2);border-top:1px solid var(--hb-line);border-bottom:1px solid var(--hb-line)}
.hb-flow__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto}
.hb-flow__steps > div{background:var(--hb-surface);border:1px solid var(--hb-line);border-radius:18px;padding:20px;box-shadow:var(--hb-sh)}
.hb-flow__steps span{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--hb-grad);color:#fff;font-weight:800;margin-bottom:10px}
.hb-flow__steps h3{font-size:17px;font-weight:800;margin:0 0 6px}
.hb-flow__steps p{margin:0;color:var(--hb-muted);font-size:14.5px}
.hb-trust{border:1px solid var(--hb-line);border-radius:18px;padding:22px;background:var(--hb-surface-2)}
.hb-trust h3{font-size:17px;font-weight:800;margin:0 0 10px;display:flex;gap:8px;align-items:center}
.hb-trust h3 i{color:var(--hb-g500)}
.hb-trust--limits h3 i{color:#B7791F}
.hb-trust ul{padding-left:18px;margin:0 0 10px;font-size:14.5px}
.hb-trust li{margin-bottom:6px}
.hb-blogcard{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--hb-surface);border:1px solid var(--hb-line);border-radius:18px;padding:20px;
  text-decoration:none;color:inherit;box-shadow:var(--hb-sh);transition:transform .2s,box-shadow .2s}
.hb-blogcard:hover{transform:translateY(-3px);box-shadow:var(--hb-sh-lg);color:inherit}
.hb-blogcard__ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:20px;background:var(--hb-ok-soft);color:var(--hb-g500)}
.hb-blogcard h3{font-size:17px;font-weight:800;margin:0;line-height:1.35}
.hb-blogcard p{margin:0;color:var(--hb-muted);font-size:14.5px}
.hb-blogcard small{margin-top:auto;color:var(--hb-muted);font-weight:600}
.hb-blogcard .hb-new-tag{align-self:flex-start;font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:999px;background:var(--hb-grad);color:#fff}
/* App/install buttons only make sense on a phone (touch, narrow); computers get a hint instead. */
.hb-phone-only{display:none}
@media (max-width:820px) and (pointer:coarse){.hb-phone-only{display:block}.hb-desktop-only{display:none}}
@media (max-width:991.98px){
  .hb-hero__in{grid-template-columns:1fr;text-align:left;padding-top:36px;padding-bottom:20px}
  .hb-hero__art{height:330px;margin:0 auto;width:100%;max-width:420px}
  .hb-hero__art .hb-phone{width:170px}
  .hb-phone--front{right:12%;top:10px}
  .hb-phone--back{right:44%;top:40px}
  .hb-shots{grid-template-columns:repeat(4,72%);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 16px 16px;margin:0 -12px}
  .hb-shots figure{scroll-snap-align:center}
  .hb-flow__steps{grid-template-columns:1fr}
}
@media (min-width:600px) and (max-width:991.98px){.hb-shots{grid-template-columns:repeat(4,40%)}}
.hb-ind .badge{align-self:flex-start}

/* ================= /login/ and /signup/ pages ================= */
.hb-auth{max-width:1120px;margin:0 auto;padding:40px 16px 56px;display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:start}
.hb-auth__intro{padding:28px;border-radius:24px;color:#fff;background:var(--hb-hero);position:sticky;top:84px}
.hb-auth__intro h1{color:#fff;font-weight:800;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;margin:16px 0 10px}
.hb-auth__intro p{color:rgba(255,255,255,.82);font-size:16.5px}
.hb-auth__intro ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.hb-auth__intro li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:#fff}
.hb-auth__intro li i{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#6EE7A8}
.hb-auth__intro .hb-auth__note{margin:20px 0 0;font-size:14px}
.hb-auth__intro .btn-link{color:#6EE7A8;font-weight:700;font-size:14px}
.hb-auth__card{background:var(--hb-surface);border:1px solid var(--hb-line);border-radius:24px;padding:32px clamp(18px,4vw,36px);box-shadow:var(--hb-sh-lg)}
.hb-auth__card h2{font-size:24px;font-weight:800;margin:0 0 18px}
.hb-auth__or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--hb-muted);font-size:13px}
.hb-auth__or::before,.hb-auth__or::after{content:"";flex:1;height:1px;background:var(--hb-line)}
.hb-auth__rules{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
@media (max-width:860px){.hb-auth{grid-template-columns:1fr;gap:20px;padding-top:20px}.hb-auth__intro{position:static;padding:22px}.hb-auth__card{order:-1}}
@media (max-width:480px){.hb-auth__rules{grid-template-columns:1fr}}