/* Hidden must always win: component classes like .loader (grid) and .btn (inline-flex) otherwise override the hidden attribute, leaving spinners and hidden buttons visible after load. */
[hidden]{display:none !important}
/* Bangla typeface: Hind Siliguri, self-hosted (OFL, Indian Type Foundry),
   loaded only when Bangla mode is on, so English pages download nothing extra. */
@font-face{font-family:"Hind Siliguri";src:url("/fonts/HindSiliguri-Regular.ttf?v=20261130") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hind Siliguri";src:url("/fonts/HindSiliguri-Medium.ttf?v=20261130") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Hind Siliguri";src:url("/fonts/HindSiliguri-Bold.ttf?v=20261130") format("truetype");font-weight:700;font-style:normal;font-display:swap}
/* Language switch: a proper pill button in the header bar itself, always
   visible, never buried at the bottom of the mobile menu. */
.lang-switch{margin-left:0;order:10;min-height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font-size:15px;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;flex-shrink:0}
.lang-switch:hover{background:var(--surface-2);border-color:var(--teal)}
/* TrustyTouch design system — light-first, premium SaaS.
   Tokens only; no external fonts (system stack, so the site stays fast
   on slow mobile connections and works offline). All colour pairs below
   are chosen for WCAG AA contrast on their backgrounds. */
:root{
  --rose:#e11d48; --ocean:#0369a1; --violet:#7c3aed;
  --bg:#faf9f6; --surface:#ffffff; --surface-2:#f3f1ea; --surface-3:#eef4f2;
  --ink:#13282e; --ink-2:#223c44; --muted:#4f646a; --faint:#4f646a;
  --teal:#0e7c6b; --teal-dark:#0a5f52; --teal-soft:#e2f0ec;
  --amber:#e9a13b; --amber-dark:#8a5a00; --amber-soft:#fdf3dd;
  --plum:#6b3a6e; --slate:#334155; --forest:#2d5a3d;
  --danger:#b42318; --danger-soft:#fdece9; --success:#0a5f52; --success-soft:#e2f0ec;
  --line:#e3ded2; --line-strong:#cfc8b8;
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-xl:20px;
  --shadow-sm:0 1px 2px rgba(19,40,46,.06); --shadow:0 4px 16px rgba(19,40,46,.08); --shadow-lg:0 16px 40px rgba(19,40,46,.12);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-8:48px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --max:1120px; --app-max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
a{color:var(--teal-dark);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{line-height:1.2;color:var(--ink);letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.5vw,2.75rem);margin:0 0 var(--space-4)}
h2{font-size:1.35rem;margin:var(--space-6) 0 var(--space-3)}
h3{font-size:1.1rem;margin:var(--space-5) 0 var(--space-2)}
p{margin:0 0 var(--space-4)}
ul,ol{margin:0 0 var(--space-4);padding-left:22px}
code{background:var(--surface-2);padding:2px 6px;border-radius:6px;font-size:.9em;overflow-wrap:anywhere}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;padding:10px 14px;z-index:99;border:1px solid var(--line);border-radius:8px}

/* ---- Header / navigation ---- */
header.site{position:sticky;top:0;background:rgba(250,249,246,.97);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(19,40,46,.02),0 10px 28px rgba(19,40,46,.05);z-index:20}
.nav{max-width:var(--max);margin:0 auto;padding:0 20px;min-height:64px;display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
.logo{font-weight:800;font-size:20px;color:var(--ink);text-decoration:none;display:flex;gap:11px;align-items:center;letter-spacing:-.01em;flex-shrink:0}
.mark{width:38px;height:38px;border-radius:11px;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:19px;font-weight:800;box-shadow:var(--shadow-sm)}
.logo-img{width:38px;height:38px;border-radius:11px;box-shadow:var(--shadow-sm);flex-shrink:0;display:block}
.wordmark{font-size:21px;letter-spacing:-.02em;line-height:1}
.wordmark em{font-style:normal;color:var(--teal-dark)}
.navlinks{display:flex;gap:2px;flex-wrap:nowrap;align-items:center;flex-shrink:0}
.navlinks a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:15px;padding:9px 10px;border-radius:8px;white-space:nowrap}
.navlinks a:hover{background:var(--surface-2);color:var(--ink)}
.navlinks a[aria-current="page"]{background:var(--teal-soft);color:var(--teal-dark)}
#authLinks{margin-left:auto;flex-shrink:0}
#authLinks .btn{padding:10px 18px;box-shadow:var(--shadow-sm);white-space:nowrap;flex-shrink:0}
#authLinks .btn:hover{box-shadow:var(--shadow)}
/* Header actions never wrap: the Log out button used to shrink and break
   onto two lines when the bar was crowded, because .btn sets no
   white-space and a flex item may shrink to its longest word. Every
   header button and label is pinned to one line the same way. */
#authLinks button{white-space:nowrap;flex-shrink:0}
/* Header "More" dropdown: the secondary links (About, FAQ, Contact,
   Search) live here, so the bar stays slim at every desktop width. */
.nav-dropdown{position:relative;display:flex;align-items:center;flex-shrink:0}
.nav-dropdown-btn{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);background:none;border:0;font:inherit;font-weight:600;font-size:15px;padding:9px 10px;border-radius:8px;white-space:nowrap;cursor:pointer}
.nav-dropdown-btn:hover{background:var(--surface-2);color:var(--ink)}
.nav-dropdown-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.nav-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);flex-shrink:0}
.nav-dropdown.open .nav-caret{transform:rotate(-135deg) translateY(-1px)}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:210px;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:40}
.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.nav-dropdown-menu a:hover{background:var(--surface-2);color:var(--ink)}
.nav-dropdown-menu a:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
/* Nav-menu wrapper: transparent on desktop so links lay out as before. */
.nav-menu{display:contents}
/* Mobile menu toggle: hidden on desktop, 44px touch target on phones. */
.nav-toggle{display:none;order:11;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
.nav-toggle:hover{background:var(--surface-2)}

/* ---- Layout ---- */
main{max-width:var(--max);margin:0 auto;padding:28px 20px 48px}
main > section + section{margin-top:20px}
main.wide{max-width:var(--app-max)}
.page-head{max-width:720px;margin-bottom:var(--space-7);padding-bottom:var(--space-5);border-bottom:1px solid var(--line)}
.page-head h1{margin-bottom:12px}
.page-head .lead{font-size:1.15rem;color:var(--muted);margin-bottom:0}
.section{margin:var(--space-8) 0}
.eyebrow{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);margin:0 0 var(--space-2)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm)}
.box h2:first-child,.box h3:first-child{margin-top:0}
.box .muted{color:var(--muted)}

/* ---- Hero (light) ---- */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);padding:40px 36px;display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;box-shadow:var(--shadow-sm)}
.hero h1{font-size:clamp(2.1rem,5vw,3.2rem);line-height:1.05;margin:0 0 var(--space-4)}
.hero p.lead{font-size:1.15rem;color:var(--muted);max-width:56ch}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--space-5)}
.mini-card{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.mini-card .mini-top{padding:20px;text-align:center;background:var(--teal);color:#fff}
.mini-card .mini-top .avatar{width:60px;height:60px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:26px;font-weight:800;margin:0 auto 10px}
.mini-card .mini-body{padding:18px}
.mini-card .mini-body a{display:block}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--teal);color:#fff!important;text-decoration:none;padding:12px 20px;border-radius:10px;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;transition:background .15s,box-shadow .15s,transform .05s}
.btn:hover{background:var(--teal-dark);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:var(--surface);color:var(--ink)!important;border-color:var(--line-strong)}
.btn.secondary:hover{background:var(--surface-2)}
.btn.amber{background:var(--amber);color:#1c1500!important}
.btn.amber:hover{background:#d9932a}
.btn.ghost{background:transparent;color:var(--ink)!important;border:2px solid var(--line-strong)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:#93200f}
.btn.small{padding:8px 14px;font-size:14px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Vertical rhythm: a button that follows an input must never touch it.
     This was the site-wide mobile bug: <input><p><button> has no top margin. */
p:has(> .btn),p:has(> button){margin-top:14px}
p.btn-row{margin-top:14px}
.box p:last-child{margin-bottom:0}
/* Dashboard / profile sections stack with one consistent gap, not 0 or 18 at random. */
#dash section.box,#prof section.box{margin-top:16px}
.editor-layout{margin-top:16px}
/* ---- Forms ---- */
form label{display:block;font-weight:650;margin:16px 0 6px}
form label:first-child{margin-top:0}
input,textarea,select{width:100%;padding:12px 13px;border:1px solid var(--line-strong);border-radius:10px;font:inherit;color:var(--ink);background:#fff;min-width:0}
input:focus,textarea:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft);outline:none}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type="checkbox"],input[type="radio"]{width:auto;height:18px;min-width:18px;accent-color:var(--teal)}
.field-hint{font-size:13.5px;color:var(--muted);margin-top:4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.form-grid .full{grid-column:1/-1}

/* ---- Notices, states, toast ---- */
.notice{padding:13px 16px;border-radius:10px;margin:14px 0;border:1px solid transparent}
.ok{background:var(--success-soft);border-color:#bcd8d1;color:#0a3d35}
.bad{background:var(--danger-soft);border-color:#f0c2bc;color:#7d150e}
.warn{background:var(--amber-soft);border-color:#ecd9a8;color:#5c3d00}
.small{color:var(--muted);font-size:14px}.muted{color:var(--muted)}
.empty{border:1px dashed var(--line-strong);border-radius:var(--radius);padding:28px;text-align:center;color:var(--muted);background:var(--surface)}
.empty strong{color:var(--ink);display:block;margin-bottom:4px}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 18px;border-radius:10px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:300;max-width:min(92vw,480px);text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.ok{background:var(--teal-dark)} #toast.bad{background:var(--danger)}

/* ---- Tables, badges, tabs ---- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--surface-2);color:var(--ink-2)}
.badge.pro{background:var(--teal-soft);color:var(--teal-dark)}
.badge.pending{background:var(--amber-soft);color:#5c3d00}
.badge.approved,.badge.success{background:var(--success-soft);color:var(--success)}
.badge.rejected,.badge.danger{background:var(--danger-soft);color:var(--danger)}
.badge.admin{background:#e8e6f6;color:#3d3670}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:var(--space-5)}
.tabs a{padding:10px 14px;text-decoration:none;color:var(--muted);font-weight:650;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.active{color:var(--teal-dark);border-bottom-color:var(--teal)}

/* ---- FAQ accordions (native details) ---- */
details.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:12px}
details.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";flex-shrink:0;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--teal-dark);font-size:18px;line-height:1}
details.faq[open] summary::after{content:"\2212"}
details.faq p:last-child{margin-bottom:0}

/* ---- Pricing ---- */
.price-card{position:relative}
.price-card.featured{border:2px solid var(--teal);box-shadow:var(--shadow)}
.price-amount{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.checklist{list-style:none;padding:0}
.checklist li{padding:6px 0 6px 28px;position:relative}
.checklist li::before{content:"✓";position:absolute;left:4px;color:var(--teal-dark);font-weight:800}

/* ---- App shell (dashboard / profile / admin) ---- */
.app{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}
.app > *{min-width:0}
#admin{min-width:0}
.box{min-width:0}
.table-wrap{min-width:0}
.app-nav{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px;position:sticky;top:76px}
.app-nav a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-weight:600}
.app-nav a:hover{background:var(--surface-2)}
.app-nav a.active{background:var(--teal-soft);color:var(--teal-dark)}
.app-nav .nav-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:10px 12px 4px;font-weight:700}
.app-top{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:var(--space-5)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stat .num{font-size:1.7rem;font-weight:800;line-height:1.1}
.stat .label{font-size:13px;color:var(--muted);font-weight:600}
.progress{height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.progress > div{height:100%;background:var(--teal);border-radius:999px}
.editor-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.preview{position:sticky;top:76px}
.inbox-item{padding:14px 0;border-bottom:1px solid var(--line)}
.inbox-item:last-child{border-bottom:0}
.inbox-item .meta{font-size:13px;color:var(--muted)}


/* ---- Professional app shell: dashboard + admin ---- */
.app-top{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow-sm)}
.app-top h1{margin:0 0 4px}
.stat{border-top:4px solid var(--teal);box-shadow:var(--shadow-sm)}
.stat .num{font-size:2rem}
.stat:nth-child(2){border-top-color:var(--amber)}
.stat:nth-child(3){border-top-color:var(--plum)}
.stat:nth-child(4){border-top-color:var(--slate)}
.box h2:first-child{margin-top:0}
.app-nav a.active{box-shadow:inset 3px 0 0 var(--teal)}
.public-card .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.public-card.rose .top{background:var(--rose)}
.public-card.ocean .top{background:var(--ocean)}
.public-card.violet .top{background:var(--violet)}
.public-card.layout-modern.rose .top{background:linear-gradient(135deg,#e11d48,#9f1239)}
.public-card.layout-modern.ocean .top{background:linear-gradient(135deg,#0369a1,#075985)}
.public-card.layout-modern.violet .top{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
.public-card.layout-minimal.rose .avatar{background:#ffe4e6;color:#9f1239;border-color:#e11d48}
.public-card.layout-minimal.ocean .avatar{background:#e0f2fe;color:#075985;border-color:#0369a1}
.public-card.layout-minimal.violet .avatar{background:#ede9fe;color:#5b21b6;border-color:#7c3aed}
.public-card.layout-executive.rose .link-list a{border-left-color:#e11d48}
.public-card.layout-executive.ocean .link-list a{border-left-color:#0369a1}
.public-card.layout-executive.violet .link-list a{border-left-color:#7c3aed}

/* ---- Public card ---- */
.public-card{max-width:560px;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.public-card .top{padding:32px 24px;text-align:center;color:#fff}
.public-card .top h1{color:#fff;margin:8px 0 4px}
.public-card .top p{color:rgba(255,255,255,.92);margin:0 0 4px}
.public-card.teal .top{background:var(--teal)}.public-card.amber .top{background:var(--amber);color:#1c1500}
.public-card.amber .top h1,.public-card.amber .top p{color:#1c1500}
.public-card.plum .top{background:var(--plum)}.public-card.slate .top{background:var(--slate)}.public-card.forest .top{background:var(--forest)}
.public-card .body{padding:24px}
.public-card .avatar{width:76px;height:76px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:32px;font-weight:800;margin:0 auto;border:3px solid rgba(255,255,255,.6)}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.action-grid .btn{width:100%}
.link-list a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:10px;text-decoration:none;font-weight:650;margin-bottom:10px;color:var(--ink)}
.link-list a:hover{border-color:var(--teal);background:var(--teal-soft)}


/* ---- Card customisation: photo position/shape, header alignment ---- */
.public-card.avatar-left .top{text-align:left}
.public-card.avatar-left .avatar{margin:0}
.public-card.avatar-right .top{text-align:right}
.public-card.avatar-right .avatar{margin:0 0 0 auto}
.public-card.avatar-none .avatar{display:none}
.public-card.avatar-rounded .avatar{border-radius:16px}
.public-card.avatar-square .avatar{border-radius:0}
.public-card.header-left .top{text-align:left}
.public-card.header-right .top{text-align:right}
.public-card.header-center .top{text-align:center}
/* ---- New layouts ---- */
.public-card.layout-bold .top{padding:40px 24px}
.public-card.layout-bold .avatar{width:96px;height:96px;font-size:38px;border-width:4px}
.public-card.layout-bold .top h1{font-size:2.1rem;font-weight:900;letter-spacing:-.02em}
.public-card.layout-bold .link-list a{border:2px solid var(--ink);font-size:17px;padding:16px}
.public-card.layout-elegant .top{background:#1a1a1a;border-bottom:3px solid #d4af37;padding:36px 24px}
.public-card.layout-elegant .avatar{border:3px solid #d4af37}
.public-card.layout-elegant .top h1{font-family:Georgia,serif;letter-spacing:.02em}
.public-card.layout-elegant .top p{text-transform:uppercase;letter-spacing:.12em;font-size:13px}
.public-card.layout-elegant .link-list a{border-color:#d4af37}
/* ---- Print: full card, clean, no site chrome ----
   Print must work even when the browser suppresses background graphics
   (the default on Android Chrome and many printers). A dark header with
   white text would print as invisible white text on white paper, so the
   printed card is forced to a light theme with dark text, regardless of
   the on-screen layout, theme, or custom accent colour. */
.print-only{display:none}
@media print{
  @page{margin:12mm}
  header.site,footer.site,.skip,.print-actions,.action-grid,#card .body section,#counts,#loading,#notfound{display:none !important}
  main{padding:0 !important;max-width:none !important}
  body{background:#fff !important}
  /* Print keeps the website's design: the old rules forced the card
     white (top, rows, links all !important white), so even with
     print-color-adjust:exact there was no colour left to print — the
     printed card looked nothing like the screen card. Now only layout
     is changed for print (no shadow, centred, no page break inside);
     theme, layout and custom-accent colours flow through unchanged,
     and print-color-adjust:exact makes Chrome print those backgrounds
     without the user having to enable "Background graphics". */
  .public-card{box-shadow:none !important;border-radius:12px !important;max-width:520px !important;margin:0 auto !important;page-break-inside:avoid;overflow:hidden}
  .public-card .top{padding:24px !important}
  .public-card .top h1{font-size:28px !important}
  .public-card .body{padding:20px 24px 16px !important}
  .public-card .body .qr-wrap img{border:1px solid #cbd5e1 !important}
  .print-only{display:block !important;text-align:center;font-size:12px;color:#64748b;margin-top:16px}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- Premium public card: contact rows, not one wrapped line ---- */
.contact-list{display:grid;gap:8px;margin:16px 0}
.contact-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);text-align:left}
.contact-row .label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);width:74px;flex-shrink:0}
.contact-row a{font-weight:700;color:var(--ink);text-decoration:none;overflow-wrap:break-word}
.contact-row a:hover{text-decoration:underline}
.link-list a{padding:14px 16px;border-radius:12px;font-weight:700}
.link-list a::after{content:"\2192";float:right;color:var(--muted)}
.public-card .body .qr-wrap{text-align:center;margin:20px 0 8px}
.public-card .body .qr-wrap img{max-width:200px;background:#fff;padding:12px;border:1px solid var(--line);border-radius:14px}
/* Layouts: same data, four professional looks. Theme colour still applies. */
.public-card.layout-modern .top{background:linear-gradient(135deg,var(--teal),#0a4f44)}
.public-card.layout-modern.amber .top{background:linear-gradient(135deg,#e8a317,#b97d0a);color:#1c1500}
.public-card.layout-modern.amber .top h1,.public-card.layout-modern.amber .top p{color:#1c1500}
.public-card.layout-modern.plum .top{background:linear-gradient(135deg,#7c3aed,#4c1d95)}
.public-card.layout-modern.slate .top{background:linear-gradient(135deg,#334155,#0f172a)}
.public-card.layout-modern.forest .top{background:linear-gradient(135deg,#166534,#052e16)}
.public-card.layout-modern .top{padding:40px 24px}
.public-card.layout-modern .avatar{width:88px;height:88px;font-size:36px}
.public-card.layout-modern .link-list a{border-radius:999px;text-align:center}
.public-card.layout-minimal .top{background:var(--surface);color:var(--ink);padding:28px 24px 8px}
.public-card.layout-minimal .top h1{color:var(--ink)}
.public-card.layout-minimal .top p{color:var(--muted)}
.public-card.layout-minimal .avatar{background:var(--teal-soft);color:var(--teal-dark);border:2px solid var(--teal)}
.public-card.layout-minimal.amber .avatar{background:#fdf3dd;color:#8a6100;border-color:#e8a317}
.public-card.layout-minimal.plum .avatar{background:#f1eafd;color:#5b21b6;border-color:#7c3aed}
.public-card.layout-minimal.slate .avatar{background:#e8edf2;color:#1e293b;border-color:#334155}
.public-card.layout-minimal.forest .avatar{background:#e6f2e8;color:#14532d;border-color:#166534}
.public-card.layout-minimal .link-list a{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 4px}
.public-card.layout-minimal .link-list a::after{content:"\2192"}
.public-card.layout-executive .top{background:#10292d;padding:36px 24px;text-align:left}
.public-card.layout-executive .avatar{border-radius:16px;margin:0;border:0;background:#fff;color:#10292d}
.public-card.layout-executive .top h1{font-family:Georgia,serif;letter-spacing:.01em}
.public-card.layout-executive .top p{text-transform:uppercase;letter-spacing:.1em;font-size:13px}
.public-card.layout-executive .link-list a{border-left:4px solid var(--teal);border-radius:8px}
.public-card.layout-executive.amber .link-list a{border-left-color:#e8a317}
.public-card.layout-executive.plum .link-list a{border-left-color:#7c3aed}
.public-card.layout-executive.slate .link-list a{border-left-color:#334155}
.public-card.layout-executive.forest .link-list a{border-left-color:#166534}


/* ---- Auth ---- */
.pw-field{position:relative;display:block}
.pw-field input{padding-right:52px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--teal-dark);font-weight:700;font-size:13px;padding:8px;cursor:pointer;min-height:36px}
.auth-head{text-align:center;margin-bottom:20px}
.auth-head h1{margin-bottom:8px}
.auth-head p{color:var(--muted);margin-bottom:0}
.auth-trust{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.auth-card p:last-child{margin-bottom:0}
.auth-wrap{max-width:480px;margin:32px auto}
.auth-wrap h1{text-align:center}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
.auth-card .btn{width:100%}
.recovery-code{font-size:20px;letter-spacing:2px;font-weight:800;word-break:break-all}

/* ---- Marketing extras ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step-num{width:36px;height:36px;border-radius:50%;background:var(--teal-soft);color:var(--teal-dark);display:grid;place-items:center;font-weight:800;margin-bottom:10px}
.use-case{border-top:3px solid var(--teal);padding-top:14px}
.cta-band{background:var(--ink);color:#fff;border-radius:var(--radius-xl);padding:40px 32px;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#cfe0dc}
footer.site{border-top:1px solid var(--line);background:var(--surface)}
.footer-grid{max-width:var(--max);margin:0 auto;padding:48px 20px 32px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.footer-brand .logo{margin-bottom:12px}
.footer-brand p{color:var(--muted);max-width:34ch}
.footer-col h3{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li a{display:inline-block;padding:6px 0;color:var(--muted);text-decoration:none;font-weight:500}
.footer-col li a:hover{color:var(--teal-dark)}
.footer-bottom{border-top:1px solid var(--line);background:var(--surface-2)}
.footer-bottom .inner{max-width:var(--max);margin:0 auto;padding:18px 20px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}
.footer-bottom nav{display:flex;gap:18px;flex-wrap:wrap}
.footer-bottom a{color:var(--muted);text-decoration:none}
.footer-bottom a:hover{color:var(--ink)}
.legal{max-width:760px}
.legal .box{padding:28px}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .editor-layout{grid-template-columns:1fr}
  .preview{position:static}
  .app{grid-template-columns:1fr}
  .app-nav{position:static;display:flex;flex-wrap:wrap;gap:4px}
  .app-nav a{padding:8px 12px}
  .app-nav .nav-label{width:100%}
}
/* Header menu below 1150px: the full nav (8 main links + Dashboard/Admin/
   Log out) does not fit, so it wrapped to a broken second row in PC view
   on a phone. Use the same overlay menu as on phones instead. */
@media(max-width:1150px){
  .nav{padding:0 20px;min-height:64px;position:relative}
  .nav-toggle{display:flex}
  /* Mobile pill position: the pill must hug the right edge, immediately
     left of the hamburger. The pill takes all free space in the bar
     (margin-left:auto) and the hamburger takes none (margin-left:0), so
     nothing is left between them but the bar gap. These rules must live
     here, after the base .nav-toggle rule: the base rule sets
     margin-left:auto, and an earlier media query with the same
     specificity loses to it, so both auto margins split the free space
     and the pill landed in the middle of the bar. */
  .lang-switch{margin-left:auto}
  .nav-toggle{margin-left:0}
  .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:10px 20px 16px;max-height:calc(100dvh - 64px);overflow-y:auto;z-index:30}
  .nav.nav-open .nav-menu{display:block}
  .nav-menu .navlinks{display:flex;margin-left:0;width:100%;flex-direction:column;align-items:stretch;gap:2px}
  .nav-menu .navlinks a{min-height:44px;display:flex;align-items:center;padding:12px 10px;font-size:16px;white-space:normal}
  .nav-menu #authLinks{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
  #authLinks .btn{justify-content:center}
  /* "More" dropdown inside the mobile overlay: expands inline, full width,
     same 44px rows as the other links, instead of floating. */
  .nav-menu .nav-dropdown{display:block;width:100%}
  .nav-menu .nav-dropdown-btn{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:12px 10px;font-size:16px;color:var(--ink-2)}
  .nav-menu .nav-dropdown-menu{position:static;display:none;min-width:0;border:0;box-shadow:none;padding:0 0 0 12px;background:none}
  .nav-menu .nav-dropdown.open .nav-dropdown-menu{display:block}
  .nav-menu .nav-dropdown-menu a{min-height:44px;display:flex;align-items:center;padding:12px 10px;font-size:16px}
}
@media(max-width:768px){
  main{padding:16px 16px 24px}
  main > section + section{margin-top:16px}
  .nav{padding:0 16px;min-height:60px;position:relative}
  /* Mobile menu: header stays 60px slim; the menu is a scrollable panel
     dropped below it, so it never expands or sticks the header tall. */
  .nav-toggle{display:flex}
  .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:10px 16px 16px;max-height:calc(100dvh - 60px);overflow-y:auto;z-index:30}
  .nav.nav-open .nav-menu{display:block}
  .nav-menu .navlinks{display:flex;margin-left:0;width:100%;flex-direction:column;align-items:stretch;gap:2px}
  .navlinks a{min-height:44px;display:flex;align-items:center;padding:12px 10px;font-size:16px}
  .nav-menu #authLinks{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
  #authLinks .btn{justify-content:center}
  /* Tighter mobile rhythm: no double gaps between main, sections and footer. */
  .page-head{margin-bottom:20px;padding-bottom:16px}
  .section{margin:28px 0}
  .grid,.grid2,.steps{gap:14px;margin:20px 0}
  .box{padding:18px}
  h2{margin:20px 0 10px}
  .hero{padding:24px 18px;gap:20px}
  .cta-band{padding:24px 18px}
  .grid,.grid2,.steps{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .hero{padding:28px 20px}
  .hero h1{font-size:2rem}
  .stat-grid{grid-template-columns:1fr 1fr}
  .action-grid{grid-template-columns:1fr}
  .auth-card{padding:22px 18px}
  .auth-wrap{margin:16px auto}
  .cta-band{padding:28px 20px}
  .public-card .top{padding:24px 16px}
  .public-card .body{padding:18px 16px}
  .app-nav a{min-height:44px;display:flex;align-items:center}
  .app{gap:16px}
  .app-top{margin-bottom:16px}
  .stat-grid{gap:12px}
  /* Admin on phones (enterprise mobile): the 3-link app nav wraps
     visibly (no hidden scroll row). Admin tables are stacked cards
     (see below), never a horizontal scroll: that is the one pattern
     for admin tables on phones. Non-admin tables (e.g. the pricing
     compare table) keep the contained .table-wrap horizontal scroll
     from the base rules. Long admin values (emails, slugs, links,
     message text) wrap instead of pushing the page wide. Server logs
     are a capped scroll pane. */
  .app-nav{flex-wrap:wrap;overflow-x:visible}
  .app-nav a{flex:1 1 140px;text-align:center;justify-content:center}
  .app-nav .nav-label{width:100%}
  .table-wrap table{min-width:480px}
  .table-wrap th,.table-wrap td{padding:8px 10px;font-size:14px}
  .table-wrap td{overflow-wrap:anywhere}
  .table-wrap .btn{min-height:44px}
  .btn.small{min-height:44px}
  #admin .box,#admin .inbox-item{overflow-wrap:anywhere}
  #logs{max-height:480px;overflow:auto}
  /* Admin tables as stacked cards on phones: no more 480px-wide
     side-scroll for every table. Each row becomes a card, each cell
     a labelled line ("Email: …") via data-label from labelAdminTables
     in admin.html. Desktop tables are untouched (this is mobile-only).
     The higher-specificity min-width:0 override is required because
     .table-wrap table sets 480px above. */
  #admin .table-wrap{overflow-x:visible}
  #admin .table-wrap table{min-width:0;width:100%}
  #admin table,#admin tbody,#admin tr,#admin td{display:block;width:100%}
  #admin thead{display:none}
  #admin tr{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:6px 14px}
  #admin td{border:0;padding:6px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
  #admin td > *{min-width:0}
  #admin td:not([data-label])::before{display:none}
  #admin td:not([data-label]){display:block}
  #admin td[data-label=""]{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
  #admin td[data-label=""] .btn{flex:1 1 140px;min-height:44px}
  #admin td .btn{min-height:44px}
  #admin td::before{content:attr(data-label);font-weight:700;color:var(--muted);flex-shrink:0;max-width:45%;text-align:left}
  #admin td .btn-row{flex-wrap:wrap}
  #admin{overflow-wrap:anywhere}
  .stat{padding:14px}
  .editor-layout{margin-top:14px}
  #dash section.box,#prof section.box{margin-top:14px}
  .footer-grid{grid-template-columns:1fr 1fr;padding:28px 16px 20px;gap:20px}
  .footer-brand{grid-column:1/-1}
  .footer-col h3{margin-bottom:10px}
  .footer-brand p{max-width:none}
  .footer-col li a{padding:11px 0;display:block;min-height:44px}
  .footer-bottom .inner{flex-direction:column;align-items:flex-start;gap:10px;padding:16px}
  h1{font-size:1.8rem}
  /* Long URLs, slugs and card links must wrap instead of pushing the page wide. */
  .public-card .body,.link-list a,#cardLink,.inbox-item,.box{overflow-wrap:anywhere}
  .link-list a{word-break:break-word}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat{padding:12px}
  .stat .num{font-size:1.5rem}
  .btn{width:100%}
  .btn-row .btn{width:100%}
  p:not(.btn-row) > .btn + .btn,p:not(.btn-row) > button.btn + button.btn{margin-top:12px}
  .navlinks a{padding:7px 8px}
}
@media(max-width:340px){
  .stat-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
/* ---- Admin spacing ---- */
#admin>section+section{margin-top:20px}
/* ---- Professional loading animation ---- */
.loader{display:grid;place-items:center;gap:12px;padding:32px 16px;text-align:center}
.loader .ring{width:48px;height:48px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--teal);animation:ttspin 1s linear infinite}
.loader img{width:40px;height:40px;animation:ttpulse 1.6s ease-in-out infinite}
.loader p{color:var(--muted);margin:0}
@keyframes ttspin{to{transform:rotate(360deg)}}
@keyframes ttpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.96)}}
@media (prefers-reduced-motion:reduce){.loader .ring,.loader img{animation:none}}

/* Selected layout button in the physical-card chooser */
.btn.active{outline:2px solid var(--teal);outline-offset:1px}

/* ---- Install app banner (PWA) ---- */
#ttInstallBanner{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:150;max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;box-shadow:var(--shadow-lg);padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
#ttInstallBanner img{width:44px;height:44px;border-radius:11px;flex-shrink:0}
#ttInstallBanner .tt-install-text{flex:1;min-width:0}
#ttInstallBanner .tt-install-text strong{display:block;font-size:15px}
#ttInstallBanner .tt-install-text p{font-size:13.5px;color:var(--muted);margin:4px 0 0}
#ttInstallBanner .tt-install-steps{font-size:13.5px;color:var(--ink-2);background:var(--surface-2);border-radius:8px;padding:8px 10px;margin-top:8px}
#ttInstallBanner .tt-install-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
#ttInstallBanner .tt-install-actions .btn{min-height:44px}
#ttInstallBanner .tt-install-close{width:44px;height:44px;flex-shrink:0;border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);border-radius:10px}
#ttInstallBanner .tt-install-close:hover{background:var(--surface-2)}
body.tt-install-shown #toast{bottom:170px}
@media(max-width:480px){#ttInstallBanner{left:8px;right:8px;padding:12px}}
/* ---- Mobile-first tap targets + safe area ---- */
#toast{bottom:calc(20px + env(safe-area-inset-bottom, 0px))}
@media(max-width:768px){
  .btn-row .btn{flex:1 1 160px}
  input,select,textarea{font-size:16px}
}

/* Bangla: self-hosted Hind Siliguri first, so Bangla text renders in one
   consistent professional typeface instead of whatever system font varies
   by phone. Taller line-height for Bengali glyphs. */
html[lang="bn"]{--font:"Hind Siliguri","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",sans-serif;}
html[lang="bn"] body{line-height:1.75}
html[lang="bn"] h1,html[lang="bn"] h2,html[lang="bn"] h3{line-height:1.35}

/* Admin tabs: one tab per area, horizontally scrollable on small screens. */
.admin-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:thin;scroll-snap-type:x proximity}
.admin-tab{flex:0 0 auto;min-height:44px;padding:11px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;scroll-snap-align:start}
.admin-tab.active{background:var(--teal);border-color:var(--teal);color:#fff}
@media(max-width:768px){.admin-tab{padding:11px 14px;font-size:14px;min-height:44px}}
/* Scroll affordance for the 12-tab row: a fade appears only while there
   is more to scroll to (toggled by JS in admin.html), so Logs and the
   tabs after it are never silently stranded off-screen. */
.admin-tabs-wrap{position:relative}
.admin-tabs-wrap::before,.admin-tabs-wrap::after{content:"";position:absolute;top:0;bottom:0;width:28px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
.admin-tabs-wrap::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.admin-tabs-wrap::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.admin-tabs-wrap.can-scroll-left::before{opacity:1}
.admin-tabs-wrap.can-scroll-right::after{opacity:1}