/* Layout: red pandal header band with an alpana dot border; left nav per role; working area of tables, tiles and forms. */
:root{
  --bg:#FBF5EA; --surface:#FFFDF8; --soft:#F6E8D2; --line:#E6D4B8;
  --fg:#3A0A10; --muted:#7A574A;
  --red:#B5121B; --on-red:#FFF8EE; --marigold:#E3940A; --gold:#B08A26;
  --ok:#1E7440; --ok-bg:#E2F2E7; --bad:#B5121B; --bad-bg:#FBE3E0; --warn:#8A5800; --warn-bg:#FFF0CF;
  --display:'Rozha One', Georgia, 'Times New Roman', serif;
  --body:'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1C090B; --surface:#280F12; --soft:#361519; --line:#4B2329;
  --fg:#F7EADB; --muted:#C8AC98;
  --red:#C9252E; --on-red:#FFF5E8; --marigold:#F2B43F; --gold:#D8B451;
  --ok:#6CD394; --ok-bg:#15301F; --bad:#FF7A72; --bad-bg:#3C1517; --warn:#F4C452; --warn-bg:#3A2A0C;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1C090B; --surface:#280F12; --soft:#361519; --line:#4B2329;
  --fg:#F7EADB; --muted:#C8AC98;
  --red:#C9252E; --on-red:#FFF5E8; --marigold:#F2B43F; --gold:#D8B451;
  --ok:#6CD394; --ok-bg:#15301F; --bad:#FF7A72; --bad-bg:#3C1517; --warn:#F4C452; --warn-bg:#3A2A0C;
  color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;line-height:1.15}
h2{font-size:1.7rem} h3{font-size:1.2rem}
p{margin:0}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* alpana dotted border */
.alpana{height:12px;background:
  radial-gradient(circle at 6px 6px,var(--gold) 2.2px,transparent 2.6px) 0 0/12px 12px repeat-x,
  radial-gradient(circle at 12px 6px,var(--marigold) 1.4px,transparent 1.8px) 0 0/24px 12px repeat-x;}

.btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:var(--surface);
  padding:.55rem 1rem;border-radius:999px;cursor:pointer;font-weight:600;white-space:nowrap}
.btn:hover{border-color:var(--gold)}
.btn.primary{background:var(--red);color:var(--on-red);border-color:var(--red)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.gold{background:var(--marigold);border-color:var(--marigold);color:#2A0A00}
.btn.sm{padding:.3rem .75rem;font-size:.85rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

.field{display:grid;gap:.3rem;min-width:0}
.field label{font-weight:600;font-size:.9rem}
.field input,.field select{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:.6rem .75rem;width:100%}
.field input:focus,.field select:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 20%,transparent)}
.field .err{color:var(--bad);font-size:.82rem;min-height:1.1em}
.req{color:var(--red)}

.pill{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.soft{background:var(--soft);color:var(--fg)}
.pill.wa{background:var(--ok-bg);color:var(--ok)}
.pill.em{background:var(--warn-bg);color:var(--warn)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.65rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--soft)}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.login-art{background:var(--red);color:var(--on-red);padding:3rem 2.5rem;display:flex;flex-direction:column;justify-content:center;gap:1.25rem;position:relative;overflow:hidden}
.login-art::before{content:"";position:absolute;inset:14px;border:2px dotted color-mix(in srgb,var(--on-red) 55%,transparent);border-radius:14px;pointer-events:none}
.login-art h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.login-art .bn{font-size:1.6rem;font-weight:600}
.login-art .eye{width:min(220px,50%);height:auto}
.login-side{display:flex;align-items:center;justify-content:center;padding-block:2.5rem;padding-inline:1.25rem}
.login-card{width:100%;max-width:400px;display:grid;gap:1rem;background:var(--surface);border:1.5px solid var(--gold);border-radius:14px;padding:1.75rem}
.pw{position:relative}
.pw input{padding-right:4.2rem}
.pw button{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--red);font-weight:600;cursor:pointer;padding:.3rem .5rem}
.row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.linkbtn{border:0;background:none;color:var(--red);font-weight:600;cursor:pointer;padding:0}
.formmsg{font-size:.88rem;padding:.6rem .8rem;border-radius:8px}
.formmsg.bad{background:var(--bad-bg);color:var(--bad)}
.formmsg.ok{background:var(--ok-bg);color:var(--ok)}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border-radius:999px;padding:4px}
.tabs button{border:0;background:none;padding:.45rem;border-radius:999px;font-weight:600;cursor:pointer;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--red);box-shadow:0 1px 3px color-mix(in srgb,var(--fg) 15%,transparent)}
.stack{display:grid;gap:1rem}
.linkbtn:disabled{color:var(--muted);cursor:default}
.demo{border-top:1px dashed var(--line);padding-top:1rem;display:grid;gap:.5rem}
.demo .chips{display:flex;gap:.5rem;flex-wrap:wrap}

/* ---------- Shell ---------- */
.top{background:var(--red);color:var(--on-red);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.top-in{display:flex;align-items:center;gap:1rem;padding:.7rem 1.25rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-size:1.35rem;margin-right:auto}
.brand svg{width:34px;height:34px}
.fy{background:color-mix(in srgb,var(--on-red) 16%,transparent);padding:.25rem .75rem;border-radius:999px;font-size:.85rem;font-weight:600}
.who{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.who select{background:color-mix(in srgb,var(--on-red) 16%,transparent);color:var(--on-red);border:1px solid color-mix(in srgb,var(--on-red) 40%,transparent);border-radius:999px;padding:.25rem .6rem}
.who select option{color:#3A0A10;background:#FFFDF8}
.top .btn{background:transparent;color:var(--on-red);border-color:color-mix(in srgb,var(--on-red) 50%,transparent)}
.rolebadge{background:var(--marigold);color:#2A0A00;border-radius:999px;padding:.1rem .6rem;font-weight:700;font-size:.78rem}

.shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 70px)}
.nav{border-right:1px solid var(--line);padding:1.25rem .75rem;display:flex;flex-direction:column;gap:.25rem;background:var(--surface)}
.nav button{border:0;background:none;text-align:left;padding:.6rem .85rem;border-radius:8px;cursor:pointer;font-weight:500;display:flex;gap:.6rem;align-items:center}
.nav button:hover{background:var(--soft)}
.nav button[aria-current="page"]{background:var(--soft);color:var(--red);font-weight:700;box-shadow:inset 3px 0 0 var(--red)}
.nav svg{width:18px;height:18px;flex:none}
.main{padding-block:1.75rem 3rem;padding-inline:1.5rem;display:grid;gap:1.5rem;align-content:start;min-width:0}
.head{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap}
.head p{margin-top:.25rem}

/* tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;display:grid;gap:.25rem}
.kpi .v{font-family:var(--display);font-size:1.9rem;line-height:1.1}
.kpi.hero{background:var(--red);color:var(--on-red);border-color:var(--red)}
.kpi.hero .label{color:color-mix(in srgb,var(--on-red) 80%,transparent)}
.dates{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.dtile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;display:grid;gap:.75rem;border-top:4px solid var(--marigold)}
.dtile.today{border-top-color:var(--red)}
.dtile dl{display:grid;grid-template-columns:1fr auto;gap:.3rem .75rem;margin:0}
.dtile dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.dtile dt{color:var(--muted)}
.bar{height:8px;border-radius:99px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--red);border-radius:99px}
.split{display:grid;gap:.6rem}
.split .line{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:.75rem;align-items:center}
.split .bar i{background:var(--marigold)}

/* forms */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.formfoot{display:flex;gap:.75rem;justify-content:flex-end;flex-wrap:wrap;margin-top:.5rem}
.toolbar{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.toolbar input{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.5rem 1rem;min-width:0;flex:1 1 220px;max-width:340px}

/* coupons */
.coupons{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}
.coupon{border:1.5px dashed var(--gold);border-radius:10px;padding:.75rem;display:grid;gap:.4rem;justify-items:center;background:var(--surface);text-align:center}
.coupon canvas{width:110px;height:110px;border-radius:4px;max-width:100%}
.coupon .mono{font-size:1.1rem;letter-spacing:.12em;font-weight:600}
.coupon.used{opacity:.6}
.dategroup{display:grid;gap:.75rem}
.dategroup + .dategroup{margin-top:1.25rem}

/* message preview */
.preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.wa{background:var(--ok-bg);border-radius:12px;padding:1rem;display:grid;gap:.6rem}
.wa .bubble{background:var(--surface);border-radius:10px 10px 10px 2px;padding:.75rem .9rem;display:grid;gap:.5rem;max-width:340px}
.wa .qrs{display:flex;gap:.4rem;flex-wrap:wrap}
.wa canvas{width:56px;height:56px}
.mail{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.mail .mh{background:var(--red);color:var(--on-red);padding:.75rem 1rem;font-family:var(--display);font-size:1.1rem}
.mail .mb{padding:1rem;display:grid;gap:.6rem}

/* validate */
.validate{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.scanbox{display:grid;gap:1rem}
.codein{font-family:var(--mono);font-size:2rem;letter-spacing:.35em;text-align:center;border:2px solid var(--line);border-radius:12px;padding:.6rem;width:100%;background:var(--surface)}
.codein:focus{border-color:var(--red);outline:none}
.scanbtn{border:2px dashed var(--gold);border-radius:12px;background:var(--soft);padding:1.25rem;cursor:pointer;display:grid;justify-items:center;gap:.4rem;font-weight:600}
.scanbtn svg{width:42px;height:42px;color:var(--red)}
.result{border-radius:12px;padding:1.25rem;display:grid;gap:.4rem;border:2px solid transparent}
.result.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.result.bad{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.result.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.result h3{font-size:1.6rem}
.result .who2{color:var(--fg)}
.scans{display:grid;gap:.5rem}
.scan{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line)}
.scan:last-child{border-bottom:0}

.note{font-size:.85rem;color:var(--muted);border-left:3px solid var(--marigold);padding-left:.75rem}
.toast{position:fixed;left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:.65rem 1.1rem;border-radius:999px;font-weight:600;z-index:20;max-width:calc(100% - 32px)}

@media (max-width:820px){
  .login{grid-template-columns:1fr}
  .login-art{padding:2.25rem 1.5rem}
  .login-art .eye{width:110px}
  .shell{grid-template-columns:1fr}
  .nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:.5rem}
  .nav button{white-space:nowrap}
  .nav button[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--red)}
  .main{padding-inline:1rem}
  .validate{grid-template-columns:1fr}
  .brand{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- App additions ---------- */
html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
a{color:var(--red)}
.coupon img{width:120px;height:120px;border-radius:4px;background:#fff}
.wa img{width:56px;height:56px;background:#fff}
.field-validation-error{color:var(--bad);font-size:.82rem}
.field-validation-valid{display:none}
.input-validation-error{border-color:var(--bad)!important}
.validation-summary-errors ul{margin:0;padding-left:1.1rem}
.validation-summary-valid{display:none}
.alert{padding:.7rem 1rem;border-radius:8px;font-size:.92rem}
.alert.bad{background:var(--bad-bg);color:var(--bad)}
.alert.ok{background:var(--ok-bg);color:var(--ok)}
.alert.warn{background:var(--warn-bg);color:var(--warn)}
.inline{display:inline}
.check{display:flex;gap:.5rem;align-items:flex-start;font-size:.92rem}
.check input{margin-top:.3rem}
.pager{display:flex;gap:.75rem;justify-content:flex-end}
#reader{width:100%;max-width:420px;margin-inline:auto;border-radius:12px;overflow:hidden}
#reader video{border-radius:12px}
.empty{padding:2rem;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}
.toast{animation:toastout 3.2s forwards}
@keyframes toastout{0%,85%{opacity:1}100%{opacity:0;visibility:hidden}}
.nav a.navlink{text-decoration:none;color:var(--fg);padding:.6rem .85rem;border-radius:8px;font-weight:500;display:flex;gap:.6rem;align-items:center;white-space:nowrap}
.nav a.navlink:hover{background:var(--soft)}
.nav a.navlink[aria-current="page"]{background:var(--soft);color:var(--red);font-weight:700;box-shadow:inset 3px 0 0 var(--red)}
.top a.btn{text-decoration:none;background:transparent;color:var(--on-red);border-color:color-mix(in srgb,var(--on-red) 50%,transparent)}
a.btn{text-decoration:none;color:inherit}
a.btn.primary{color:var(--on-red)}
@media (max-width:820px){.nav a.navlink[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--red)}}
.tabs a.tab{display:block;text-align:center;text-decoration:none;padding:.45rem;border-radius:999px;font-weight:600;color:var(--muted)}
.tabs a.tab[aria-selected="true"]{background:var(--surface);color:var(--red);box-shadow:0 1px 3px color-mix(in srgb,var(--fg) 15%,transparent)}
/* Email templates */
.field textarea{border:1px solid var(--line);background:var(--surface);color:inherit;border-radius:8px;padding:.6rem .75rem;width:100%;font:inherit;resize:vertical;min-height:12rem}
.field textarea:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 20%,transparent)}
.tplnav{display:flex;gap:.5rem;flex-wrap:wrap}
.tplnav a{text-decoration:none;color:var(--fg);border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.35rem .9rem;font-weight:600;font-size:.9rem}
.tplnav a:hover{border-color:var(--gold)}
.tplnav a[aria-current="page"]{background:var(--red);border-color:var(--red);color:var(--on-red)}
.tpl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}
@media (max-width:1100px){.tpl{grid-template-columns:minmax(0,1fr)}}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{border:1px dashed var(--gold);background:var(--soft);border-radius:999px;padding:.2rem .6rem;font-family:var(--mono);font-size:.8rem;cursor:pointer;color:inherit}
.chip:hover{border-style:solid}
.mailframe{width:100%;height:520px;border:1px solid var(--line);border-radius:10px;background:#fff}
.mailcfg{display:flex;gap:.75rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:.7rem 1rem;border-radius:8px;font-size:.92rem}
.mailcfg.ok{background:var(--ok-bg);color:var(--ok)}
.mailcfg.warn{background:var(--warn-bg);color:var(--warn)}
.field textarea.mono{font-family:var(--mono);font-size:.85rem;line-height:1.45}