/* Cancer CARE Bangladesh (CCB) app v2.
   Palette sampled from the org logo: white base, lavender and periwinkle
   accents (#C7B0E6, #EFC7FB, #9897D0, #6B80B9), deep maroon #3B0C12 for
   headings and primary buttons. Mobile first, quiet and clean. */
:root{
  --maroon:#3B0C12; --maroon-hover:#57161F;
  --peri:#6B80B9; --peri-dark:#4A5E96; --mid:#9897D0;
  --lav:#C7B0E6; --lilac:#EFC7FB;
  --tint:#F5F1FC; --tint2:#EDE7FA; --line:#E3D9F6;
  --ink:#37262C; --muted:#7A6A72; --bg:#FFFFFF; --card:#FFFFFF;
  --ok:#15803D; --warn:#B45309; --radius:18px;
  --shadow:0 6px 24px rgba(59,12,18,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Inter","Hind Siliguri","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",sans-serif;background-color:var(--bg);background-image:radial-gradient(560px 300px at 10% -40px, rgba(239,199,251,.55), transparent 70%),radial-gradient(680px 320px at 92% -60px, rgba(199,176,230,.5), transparent 70%);background-repeat:no-repeat;color:var(--ink);overflow-x:clip;-webkit-tap-highlight-color:transparent}
a{color:var(--peri-dark)}
h1,h2,h3{line-height:1.3;color:var(--maroon)}
.muted{color:var(--muted);font-size:.92rem}
small{color:var(--muted);font-weight:400}

.demo-banner{background:var(--tint2);color:var(--maroon);text-align:center;font-size:.8rem;font-weight:500;padding:7px 12px;border-bottom:1px solid var(--line)}

.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:8px 14px;min-height:58px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:0}
.brand img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--lav);flex:none}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text strong{font-size:.95rem;color:var(--maroon);white-space:nowrap}
.brand-text small{color:var(--muted);font-size:.74rem}
.topnav{display:flex;gap:16px;margin-left:10px}
.topnav a{color:var(--ink);font-size:.92rem;text-decoration:none;padding:10px 2px}
.topnav a:hover{color:var(--maroon)}
.topnav a.on{color:var(--maroon);font-weight:700;box-shadow:inset 0 -3px 0 var(--lav)}
.session-box .btn{min-height:38px;padding:8px 15px;font-size:.9rem}
:focus-visible{outline:2px solid var(--peri);outline-offset:2px}
.lang-toggle{display:flex;background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:3px;margin-left:auto;flex:none}
.lang-toggle button{border:none;background:transparent;font-family:inherit;font-size:.85rem;font-weight:600;color:var(--muted);padding:7px 13px;border-radius:999px;cursor:pointer;min-height:34px}
.lang-toggle button.on{background:var(--maroon);color:#fff}
.session-box{display:flex;gap:8px;align-items:center;flex:none}
.chip{background:var(--tint);border:1px solid var(--lav);color:var(--maroon);padding:6px 11px;border-radius:999px;font-size:.8rem;font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-logout{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 12px;cursor:pointer;font-family:inherit;font-size:.85rem;min-height:36px}

main{max-width:1080px;margin:0 auto;padding:18px 16px 34px;width:100%}
.view{display:none}
.view.active{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-title{font-size:1.55rem;margin:6px 0 14px}
.page-title small{font-size:.88rem}

.hero{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.hero-img{width:100%;display:block;max-height:340px;object-fit:cover}
.hero-body{padding:22px 24px 26px;background:linear-gradient(160deg,#fff 40%,var(--tint) 85%,var(--tint2))}
.hero-body h1{margin:0 0 8px;font-size:2.05rem;letter-spacing:.2px}
.hero-body h1::after{content:"";display:block;width:74px;height:5px;border-radius:99px;margin-top:10px;background:linear-gradient(90deg,var(--lav),var(--peri))}
.hero-sub{font-size:1.06rem;margin:0 0 18px;color:var(--ink)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;border-radius:13px;padding:11px 20px;font-size:1rem;font-weight:600;font-family:inherit;min-height:46px;text-decoration:none;transition:transform .08s ease,background .2s,box-shadow .2s}
.btn:active{transform:scale(.98)}
.btn-main{background:linear-gradient(135deg,var(--maroon),var(--maroon-hover));color:#fff;box-shadow:0 8px 20px rgba(59,12,18,.22)}
.btn-main:hover{background:linear-gradient(135deg,var(--maroon-hover),var(--maroon))}
.btn-ghost{background:#fff;color:var(--maroon);border:1.5px solid var(--maroon)}
.btn-soft{background:var(--tint);color:var(--maroon);border:1px solid var(--lav)}
.btn-google{background:#fff;color:#222;border:1px solid #ddd;width:100%;font-weight:600}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.counter{background:linear-gradient(180deg,#fff,var(--tint));border:1px solid var(--line);border-radius:var(--radius);padding:16px 10px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
.counter::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--lilac),var(--lav),var(--peri))}
.counter .num{font-size:1.75rem;font-weight:800;color:var(--maroon)}
.counter .lbl{font-size:.83rem;color:var(--muted);margin-top:2px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:14px 0;box-shadow:var(--shadow)}
.card h2{margin-top:0;font-size:1.16rem}
.card h2 small{font-size:.78rem}
.link-card{display:block;color:var(--ink);text-decoration:none}
.link-card:hover{border-color:var(--lav)}
.link-card p{margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid2f{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}

.steps-mini{list-style:none;counter-reset:st;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.steps-mini li{counter-increment:st;background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:13px 13px 13px 50px;position:relative}
.steps-mini li::before{content:counter(st);position:absolute;left:13px;top:13px;width:27px;height:27px;border-radius:50%;background:var(--maroon);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.steps-mini li b{display:block;color:var(--maroon);margin-bottom:2px}
.steps-mini li span{font-size:.9rem}

.input{width:100%;padding:12px;border:1px solid #D9CCF2;border-radius:11px;font-size:1rem;font-family:inherit;margin:4px 0 12px;background:#fff;min-height:46px}
.input:focus{outline:2px solid var(--lav);border-color:var(--peri)}
.input.invalid{border-color:#DC2626;outline:2px solid rgba(220,38,38,.25)}
.guide{background:var(--tint);border:1px solid var(--line);border-radius:13px;padding:14px 16px;margin:0 0 16px}
.guide h3{margin:10px 0 4px;font-size:1rem}
.guide h3:first-child{margin-top:0}
.guide p{margin:0 0 8px;font-size:.94rem}
.guide p:last-child{margin-bottom:0}
.cond{border:1px dashed var(--lav);border-radius:13px;padding:6px 14px 10px;margin:0 0 10px;background:#fff}
.cond h3{margin:10px 0 2px;font-size:1rem}
.form-errors{background:#FEF2F2;border:1px solid #FCA5A5;color:#991B1B;border-radius:11px;padding:11px 13px;font-weight:600;margin:0 0 12px}
.success-panel h2{color:var(--ok)}
.lbl{display:block;font-weight:600;margin-top:8px}
.check{display:flex;gap:9px;align-items:flex-start;margin:11px 0;font-size:.95rem;min-height:30px}
.check input{margin-top:3px;width:19px;height:19px;accent-color:var(--maroon);flex:none}
.or{text-align:center;color:var(--muted);margin:12px 0 2px}
.role-switch{display:flex;gap:8px;margin-bottom:14px}
.role-switch button{flex:1;padding:10px;border-radius:11px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;font-size:.95rem;min-height:44px}
.role-switch button.on{background:var(--maroon);color:#fff;border-color:var(--maroon)}

.wall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;margin-top:12px}
.wall-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 10px;text-align:center;box-shadow:var(--shadow)}
.wall-item .av{width:47px;height:47px;border-radius:50%;background:linear-gradient(135deg,var(--lav),var(--peri));color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.wall-item b{display:block;color:var(--maroon)}
.wall-item span{color:var(--muted);font-size:.85rem}

.story-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);border-top:4px solid var(--lav)}
.story-card h3{margin:0}
.story-card .meta{color:var(--muted);font-size:.85rem}
.story-card p{margin:0}
.story-card a{margin-top:auto;font-weight:600}

.event-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:12px 0;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow)}
.event-item .date-badge{background:var(--maroon);color:#fff;border-radius:11px;padding:9px 10px;text-align:center;min-width:76px;font-size:.82rem;line-height:1.35;font-weight:600}
.event-item h3{margin:0 0 4px}
.event-item p{margin:0}

.faq h3{margin:19px 0 4px}
.faq h3:first-child{margin-top:0}
.faq p{margin:0 0 6px}

.result{margin-top:14px;border-radius:12px;padding:14px;display:none}
.result.show{display:block}
.result.ok{background:#ECFDF3;border:1px solid #86EFAC}
.result.bad{background:#FEF2F2;border:1px solid #FCA5A5}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700}
.badge.verified{background:#DCFCE7;color:var(--ok);border:1px solid #86EFAC}
.badge.locked{background:#FEF3C7;color:var(--warn);border:1px solid #FCD34D}
.badge.demo{background:var(--tint);color:var(--maroon);border:1px solid var(--lav)}

.donor-card{max-width:430px;margin:0 auto;background:linear-gradient(135deg,var(--maroon) 20%,var(--peri) 78%,var(--mid));color:#fff;border-radius:22px;padding:23px;box-shadow:0 18px 36px rgba(59,12,18,.3)}
.donor-card .dc-head{display:flex;align-items:center;gap:10px}
.donor-card .dc-head img{width:44px;height:44px;border-radius:50%;border:2px solid #fff;object-fit:cover}
.donor-card .dc-head small{color:rgba(255,255,255,.85)}
.donor-card .dc-name{font-size:1.38rem;font-weight:800;margin:15px 0 2px}
.donor-card .dc-id{opacity:.92;letter-spacing:1px}
.donor-card .dc-row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:15px;gap:12px}
.donor-card .dc-qr{background:#fff;border-radius:11px;padding:8px;width:118px;text-align:center}
.donor-card .dc-qr img,.donor-card .dc-qr canvas{max-width:100%}
.donor-card .dc-qr .qr-url{color:#333;font-size:.58rem;word-break:break-all;margin-top:4px}
.donor-card .dc-photo{width:74px;height:74px;border-radius:15px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;border:2px solid rgba(255,255,255,.5)}

.journey-step{display:flex;gap:12px;padding:14px 0;border-bottom:1px dashed var(--line)}
.journey-step:last-child{border-bottom:none}
.journey-step .dot{flex:none;width:31px;height:31px;border-radius:50%;border:2px solid var(--lav);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--maroon);background:#fff}
.journey-step.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.journey-step.now .dot{background:var(--lav);border-color:var(--peri);color:var(--maroon)}
.journey-step.lock{opacity:.55}
.journey-step b{color:var(--maroon)}
.journey-step p{margin:2px 0}
.rules{background:var(--tint);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:.93rem}

.switch-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line);min-height:48px}
.switch-row input{width:23px;height:23px;accent-color:var(--maroon);flex:none}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tabs button{padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;font-size:.93rem;min-height:42px}
.tabs button.on{background:var(--maroon);color:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:.93rem}
table.tbl th,table.tbl td{border-bottom:1px solid var(--line);padding:9px 6px;text-align:left;vertical-align:top}
table.tbl th{color:var(--maroon)}
.table-wrap{overflow-x:auto}
.notif{border-left:4px solid var(--lav);background:#fff;border-radius:8px;padding:10px 12px;margin:8px 0;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.notif b{color:var(--maroon)}

.cert-wrap{max-width:680px;margin:0 auto;position:relative}
.cert-sheet{background:#fff;border:3px double var(--maroon);border-radius:8px;padding:34px 30px;text-align:center;position:relative;overflow:hidden}
.cert-sheet::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right, var(--tint2), transparent 55%);pointer-events:none}
.cert-sheet .org{font-weight:800;color:var(--maroon);font-size:1.05rem;letter-spacing:.4px}
.cert-sheet h2{letter-spacing:3px;margin:14px 0 4px;font-size:1.45rem}
.cert-sheet .cname{font-size:1.7rem;font-weight:800;color:var(--peri-dark);margin:12px 0 4px}
.cert-sheet .cmsg{font-style:italic;color:var(--ink)}
.cert-sheet .cmeta{display:flex;justify-content:space-between;gap:10px;margin-top:22px;font-size:.86rem;color:var(--muted);flex-wrap:wrap}
.cert-sheet .sig{text-align:right;margin-top:20px;font-size:.9rem}
.cert-sheet .sig b{color:var(--maroon)}
.cert-lock{position:absolute;inset:0;background:rgba(255,255,255,.55);backdrop-filter:grayscale(.7);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:700;color:var(--maroon);border-radius:8px;text-align:center;padding:16px}
.cert-grey{filter:grayscale(.75);opacity:.75}

.chat-banner{background:#FEF3C7;border:1px solid #FCD34D;color:#92400E;border-radius:11px;padding:11px 13px;font-weight:600;margin-bottom:10px}
.chat-box{border:1px solid var(--line);border-radius:13px;padding:12px;max-height:300px;overflow-y:auto;background:var(--tint)}
.chat-msg{max-width:80%;padding:9px 13px;border-radius:15px;margin:6px 0;background:#fff;border:1px solid var(--line)}
.chat-msg.me{margin-left:auto;background:var(--maroon);color:#fff;border-color:var(--maroon)}
.chat-form{display:flex;gap:8px;margin-top:10px}
.chat-form .input{margin:0}

.more-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.more-item{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;color:var(--ink);text-decoration:none;font-weight:600;border-bottom:1px solid var(--line);min-height:54px}
.more-item:last-child{border-bottom:none}
.more-item .chev{color:var(--peri);font-size:1.3rem}

.bottomnav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);display:none;z-index:50;padding-bottom:env(safe-area-inset-bottom)}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px 7px;color:var(--muted);font-weight:600;font-size:.72rem;text-decoration:none;min-height:56px}
.bottomnav a svg{width:23px;height:23px;fill:currentColor}
.bottomnav a.on{color:var(--maroon)}
.bottomnav a.on svg{background:var(--tint2);border-radius:999px;padding:3px;width:31px;height:27px}

footer{max-width:1080px;margin:8px auto 0;padding:18px 16px 10px;text-align:center;color:var(--muted)}
footer strong{color:var(--maroon)}

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--maroon);color:#fff;padding:12px 19px;border-radius:999px;box-shadow:0 10px 24px rgba(0,0,0,.25);z-index:99;font-size:.95rem;display:none;max-width:92vw;text-align:center}
.toast.show{display:block}

/* ---------- Phone: up to 640px. Single column, bottom tab bar. ---------- */
@media (max-width:640px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .counters{grid-template-columns:repeat(2,1fr)}
  .grid2,.grid3,.grid2f,.steps-mini{grid-template-columns:1fr}
  .topnav{display:none}
  .bottomnav{display:flex}
  .hero-body{padding:18px}
  .hero-body h1{font-size:1.6rem}
  .brand-text strong{font-size:.85rem}
  .brand-text small{display:none}
  .chip{max-width:110px}
  main{padding:14px 12px 26px}
  .cert-sheet{padding:24px 16px}
  .cert-sheet .cmeta{flex-direction:column;gap:4px}
  .page-title{font-size:1.35rem}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* ---------- Tablet: 641 to 1024px. Bottom tab bar stays (app-like),
   top nav hidden, grids open up to two columns, roomier reading. ---------- */
@media (min-width:641px) and (max-width:1024px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .topnav{display:none}
  .bottomnav{display:flex}
  main{padding:20px 24px 34px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .hero-img{max-height:300px}
  .hero-body{padding:20px 22px 24px}
  .hero-body h1{font-size:1.85rem}
  .chip{max-width:170px}
  .cert-sheet{padding:30px 24px}
  .donor-card{max-width:480px}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media print{
  body>*{display:none !important}
  body{padding:0}
  #printArea{display:block !important;position:static}
}