/* ==========================================================================
   AccBooks — Material 3 Design System (Light)
   Load order: main.css -> app.css
   ========================================================================== */

/* ============================ 1. TOKENS ================================== */
:root{
  /* ---- surface tonal ramp (M3 surface containers) ---- */
  --bg-900:#F2F3F8;          /* body */
  --bg-800:#FFFFFF;          /* card */
  --bg-700:#F7F8FC;          /* container low */
  --bg-600:#EDEFF6;          /* container */
  --bg-500:#E4E7F0;          /* container high */

  --surface:#FFFFFF;
  --surface-dim:#DEE1EA;
  --surface-tint:rgba(38,74,178,.05);

  --border:#E2E5EE;
  --border-light:#CBD1DE;
  --outline:#767D8C;

  /* ---- primary ---- */
  --accent:#264AB2;
  --accent-light:#1C3A93;
  --accent-dim:rgba(38,74,178,.10);
  --on-accent:#FFFFFF;
  --accent-container:#DDE4FF;
  --on-accent-container:#0D1F5C;

  /* ---- ledger semantics ---- */
  --green:#0A6E3E;  --green-dim:rgba(10,110,62,.10);  --green-container:#C8F0DA;
  --red:#B3261E;    --red-dim:rgba(179,38,30,.10);    --red-container:#FADAD7;
  --yellow:#8A5A00; --yellow-dim:rgba(138,90,0,.11);  --yellow-container:#FCE7BF;
  --purple:#5E3BB7; --purple-dim:rgba(94,59,183,.10); --purple-container:#E6DDFF;

  /* ---- ink ---- */
  --text-primary:#111318;
  --text-secondary:#454B59;
  --text-muted:#6E7480;

  /* ---- shape (M3) ---- */
  --r-xs:4px; --r-sm:8px; --r-md:12px;
  --radius-sm:12px; --radius:16px; --radius-lg:20px; --radius-xl:28px;
  --r-full:999px;

  /* ---- elevation ---- */
  --e1:0 1px 2px rgba(17,19,24,.28), 0 1px 3px 1px rgba(17,19,24,.10);
  --e2:0 1px 2px rgba(17,19,24,.28), 0 2px 6px 2px rgba(17,19,24,.10);
  --e3:0 4px 8px 3px rgba(17,19,24,.10), 0 1px 3px rgba(17,19,24,.28);
  --e4:0 6px 10px 4px rgba(17,19,24,.10), 0 2px 3px rgba(17,19,24,.28);
  --e5:0 8px 12px 6px rgba(17,19,24,.10), 0 4px 4px rgba(17,19,24,.28);
  --shadow:var(--e2); --shadow-sm:var(--e1);

  /* ---- motion (M3 emphasized) ---- */
  --ease:cubic-bezier(.2,0,0,1);
  --ease-decel:cubic-bezier(.05,.7,.1,1);
  --ease-accel:cubic-bezier(.3,0,.8,.15);
  --d-short:150ms; --d-med:300ms; --d-long:450ms;

  --header-h:60px;
  --nav-h:80px;
}

/* ============================ 2. BASE =================================== */
body{
  background:var(--bg-900);
  color:var(--text-primary);
  font-feature-settings:"tnum" 1,"lnum" 1;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:calc(var(--nav-h) + 12px);
  overscroll-behavior-y:contain;
}

/* SIGNATURE: ledger figures — sob taka column e align kore */
.h-sv,.txn-amount,.hds-amt,.da-amt,.date-day,.pc-amt,.stat-value,
.amount,.co-stat b,.plan-days b,.tab-count,.h-cnt,.m3-amt,td,th{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.015em;
}
.cur{ font-size:.7em; font-weight:600; opacity:.5; margin-right:1px; }

/* ============================ 3. APP BAR ================================ */
.app-header,.m3-appbar{
  height:var(--header-h);
  background:var(--surface);
  border-bottom:none;
  box-shadow:none;
  transition:box-shadow var(--d-short) var(--ease),
             background var(--d-short) var(--ease);
}
.app-header.scrolled,.m3-appbar.scrolled{
  background:var(--bg-700);
  box-shadow:var(--e2);
}
.app-logo{ color:var(--text-primary); font-weight:800; letter-spacing:-.02em; }

.m3-iconbtn{
  width:44px;height:44px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);background:transparent;border:none;
  font-size:17px;cursor:pointer;position:relative;overflow:hidden;
  transition:background var(--d-short) var(--ease);
  text-decoration:none;
}
.m3-iconbtn:hover{ background:rgba(17,19,24,.06); }
.m3-iconbtn:active{ background:rgba(17,19,24,.11); }

/* ============================ 4. NAV BAR (M3 pill) ====================== */
.bottom-nav{
  height:var(--nav-h);
  background:var(--bg-600);
  border-top:none;
  box-shadow:0 -1px 0 rgba(17,19,24,.05);
  padding:12px 8px 16px;
  display:flex;align-items:flex-start;justify-content:space-around;
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--text-secondary);text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:.01em;
  background:none;border:none;position:relative;
  transition:color var(--d-short) var(--ease);
}
.nav-item i,.nav-item svg{
  position:relative;z-index:1;font-size:19px;
  transition:transform var(--d-med) var(--ease);
}
/* pill indicator */
.nav-item::before{
  content:'';position:absolute;top:-6px;left:50%;
  width:64px;height:32px;border-radius:var(--r-full);
  background:var(--accent-container);
  transform:translateX(-50%) scaleX(.3);
  opacity:0;
  transition:opacity var(--d-med) var(--ease),
             transform var(--d-med) var(--ease);
}
.nav-item.active{ color:var(--on-accent-container); }
.nav-item.active::before{ opacity:1; transform:translateX(-50%) scaleX(1); }
.nav-item.active i{ transform:translateY(-1px); }
.nav-item:active i{ transform:scale(.88); }

/* ============================ 5. FAB ==================================== */
.m3-fab{
  position:fixed;right:16px;
  bottom:calc(var(--nav-h) + 16px);
  height:56px;min-width:56px;
  display:flex;align-items:center;gap:0;
  padding:0 16px;
  background:var(--accent);color:var(--on-accent);
  border:none;border-radius:var(--r-xl);
  box-shadow:var(--e3);
  font-family:var(--font-display);font-size:15px;font-weight:800;
  text-decoration:none;cursor:pointer;z-index:60;
  overflow:hidden;
  transition:box-shadow var(--d-short) var(--ease),
             padding var(--d-med) var(--ease),
             transform var(--d-med) var(--ease);
}
.m3-fab i{ font-size:19px;flex-shrink:0; }
.m3-fab .fab-label{
  max-width:120px;margin-left:10px;white-space:nowrap;
  opacity:1;overflow:hidden;
  transition:max-width var(--d-med) var(--ease),
             margin var(--d-med) var(--ease),
             opacity var(--d-short) var(--ease);
}
/* SIGNATURE: scroll korle FAB gutiye icon-only hoy */
.m3-fab.collapsed{ padding:0;width:56px;justify-content:center; }
.m3-fab.collapsed .fab-label{ max-width:0;margin-left:0;opacity:0; }
.m3-fab:active{ box-shadow:var(--e1);transform:scale(.96); }
.m3-fab.hidden{ transform:translateY(120px) scale(.8);opacity:0; }

/* ============================ 6. CARD =================================== */
.m3-card,.txn-card,.menu-tile,.app-info-card,.card,.pcard,.ob-card,.co-item{
  background:var(--surface);
  border:none;
  border-radius:var(--radius);
  box-shadow:var(--e1);
  transition:box-shadow var(--d-short) var(--ease),
             transform var(--d-short) var(--ease),
             background var(--d-short) var(--ease);
}
.m3-card.filled{ background:var(--bg-600);box-shadow:none; }
.m3-card.outlined{ background:var(--surface);box-shadow:none;border:1px solid var(--border); }
.m3-card:active,.txn-card:active,.menu-tile:active,.co-item:active{
  box-shadow:var(--e1);transform:scale(.985);background:var(--bg-700);
}
.menu-tile:hover,.co-item:hover{ box-shadow:var(--e2); }

.m3-card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 10px;
}
.m3-card-title{
  font-family:var(--font-display);font-size:15px;font-weight:800;
  color:var(--text-primary);letter-spacing:-.01em;
}
.m3-card-action{
  font-size:13px;font-weight:700;color:var(--accent);
  text-decoration:none;padding:6px 10px;border-radius:var(--r-full);
}
.m3-card-action:active{ background:var(--accent-dim); }

/* ============================ 7. LIST ITEM ============================== */
.m3-list{ background:var(--surface);border-radius:var(--radius);overflow:hidden; }
.m3-item{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
  transition:background var(--d-short) var(--ease);
}
.m3-item + .m3-item{ box-shadow:inset 0 1px 0 var(--border); }
.m3-item:active{ background:var(--bg-700); }
.m3-avatar{
  width:44px;height:44px;border-radius:var(--r-full);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:16px;font-weight:800;
  text-transform:uppercase;
}
.m3-item-body{ flex:1;min-width:0; }
.m3-item-title{
  font-size:15px;font-weight:700;color:var(--text-primary);
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.m3-item-sub{
  font-size:12.5px;color:var(--text-muted);margin-top:2px;
  display:flex;align-items:center;gap:5px;
}
.m3-item-dot{ width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5; }
.m3-item-end{ text-align:right;flex-shrink:0; }
.m3-amt{ font-family:var(--font-display);font-size:16px;font-weight:800;line-height:1; }

/* ============================ 8. CHIP =================================== */
.m3-chip{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 12px;border-radius:var(--r-sm);
  font-size:11.5px;font-weight:700;letter-spacing:.01em;
  background:var(--bg-600);color:var(--text-secondary);
  border:none;text-decoration:none;
  transition:background var(--d-short) var(--ease);
}
.m3-chip i{ font-size:10px; }
.m3-chip.green{ background:var(--green-container);color:var(--green); }
.m3-chip.red{ background:var(--red-container);color:var(--red); }
.m3-chip.amber{ background:var(--yellow-container);color:var(--yellow); }
.m3-chip.violet{ background:var(--purple-container);color:var(--purple); }
.m3-chip.blue{ background:var(--accent-container);color:var(--on-accent-container); }

/* segmented button (M3 tabs) */
.m3-segment{
  display:flex;background:var(--bg-600);
  border-radius:var(--r-full);padding:4px;margin:0 16px;
}
.m3-seg-btn{
  flex:1;height:38px;border:none;background:transparent;
  border-radius:var(--r-full);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--font-body);font-size:13.5px;font-weight:700;
  color:var(--text-secondary);position:relative;overflow:hidden;
  transition:background var(--d-med) var(--ease),color var(--d-med) var(--ease);
}
.m3-seg-btn.active{ background:var(--surface);color:var(--accent);box-shadow:var(--e1); }
.m3-seg-count{
  font-size:11px;font-weight:800;padding:1px 7px;border-radius:var(--r-full);
  background:var(--bg-500);color:var(--text-muted);
}
.m3-seg-btn.active .m3-seg-count{ background:var(--accent-container);color:var(--on-accent-container); }

/* ============================ 9. BUTTON ================================= */
.m3-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:48px;padding:0 24px;border:none;border-radius:var(--r-full);
  font-family:var(--font-display);font-size:15px;font-weight:800;
  cursor:pointer;text-decoration:none;position:relative;overflow:hidden;
  transition:box-shadow var(--d-short) var(--ease),
             transform var(--d-short) var(--ease),
             background var(--d-short) var(--ease);
}
.m3-btn.filled{ background:var(--accent);color:var(--on-accent);box-shadow:var(--e1); }
.m3-btn.filled:active{ transform:scale(.97);box-shadow:none; }
.m3-btn.tonal{ background:var(--accent-container);color:var(--on-accent-container); }
.m3-btn.outlined{ background:transparent;border:1px solid var(--border-light);color:var(--accent); }
.m3-btn.text{ background:transparent;color:var(--accent);padding:0 14px; }
.m3-btn.block{ width:100%; }
.m3-btn:disabled{ background:var(--bg-600);color:var(--text-muted);box-shadow:none;pointer-events:none; }

/* ============================ 10. RIPPLE =============================== */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:currentColor;opacity:.22;transform:scale(0);
  animation:rippleGo 560ms var(--ease-decel) forwards;
}
@keyframes rippleGo{ to{ transform:scale(2.6);opacity:0; } }

/* ============================ 11. MOTION =============================== */
@keyframes m3Rise{
  from{ opacity:0;transform:translateY(14px); }
  to{ opacity:1;transform:translateY(0); }
}
@keyframes m3Fade{ from{opacity:0} to{opacity:1} }
@keyframes m3Pop{
  0%{ opacity:0;transform:scale(.94) }
  60%{ opacity:1;transform:scale(1.01) }
  100%{ transform:scale(1) }
}

.stagger > *{ opacity:0;animation:m3Rise var(--d-long) var(--ease-decel) forwards; }
.stagger > *:nth-child(1){animation-delay:20ms}
.stagger > *:nth-child(2){animation-delay:55ms}
.stagger > *:nth-child(3){animation-delay:90ms}
.stagger > *:nth-child(4){animation-delay:125ms}
.stagger > *:nth-child(5){animation-delay:160ms}
.stagger > *:nth-child(6){animation-delay:195ms}
.stagger > *:nth-child(7){animation-delay:230ms}
.stagger > *:nth-child(8){animation-delay:265ms}
.stagger > *:nth-child(n+9){animation-delay:300ms}

.enter{ animation:m3Rise var(--d-long) var(--ease-decel) both; }
.pop{ animation:m3Pop var(--d-med) var(--ease-decel) both; }

/* count-up er somoy number ta jump kore, tai fixed width */
.m3-count{ display:inline-block;font-variant-numeric:tabular-nums; }

/* ============================ 12. EMPTY / SKELETON ===================== */
.m3-empty{
  display:flex;flex-direction:column;align-items:center;
  padding:48px 28px;gap:14px;text-align:center;
}
.m3-empty-ico{
  width:76px;height:76px;border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;font-size:30px;
  background:var(--bg-600);color:var(--text-muted);
}
.m3-empty h3{ font-family:var(--font-display);font-size:16px;font-weight:800; }
.m3-empty p{ font-size:13.5px;color:var(--text-muted);line-height:1.6;max-width:260px; }

.skel{
  background:linear-gradient(90deg,var(--bg-600) 25%,var(--bg-500) 37%,var(--bg-600) 63%);
  background-size:400% 100%;border-radius:var(--r-sm);
  animation:skelShine 1.4s ease-in-out infinite;
}
@keyframes skelShine{ from{background-position:100% 0} to{background-position:0 0} }

/* ============================ 13. SNACKBAR ============================= */
.alert{
  border-radius:var(--r-sm);border:none;
  background:#2E323C;color:#E9EAEE;
  box-shadow:var(--e3);
  padding:14px 16px;font-size:13.5px;
  animation:m3Rise var(--d-med) var(--ease-decel) both;
}
.alert-error{ background:var(--red);color:#fff; }
.alert-success{ background:#12341F;color:#B7F0CE; }

/* ============================ 14. FORM ================================= */
input,select,textarea{
  background:var(--bg-700);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  color:var(--text-primary);
  transition:border-color var(--d-short) var(--ease),
             box-shadow var(--d-short) var(--ease),
             background var(--d-short) var(--ease);
}
input:focus,select:focus,textarea:focus{
  background:var(--surface);
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-dim);
  outline:none;
}
input::placeholder{ color:#98A0AE; }

/* ============================ 15. A11Y ================================= */
:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .stagger > *{ opacity:1; }
}
::-webkit-scrollbar-thumb{ background:#C3C9D6;border-radius:99px; }
::selection{ background:var(--accent-container); }

/* ==========================================================================
   TYPE — darker ink, heavier weight
   Primary near-black + heavy. Secondary gaaro-dhusor kintu porar moto.
   Duita alada rakha lagbe, na hole hierarchy chole jay.
   ========================================================================== */
:root{
  --text-primary:#0A0C11;
  --text-secondary:#3D4351;
  --text-muted:#565D6C;
}

body{ color:var(--text-primary); font-weight:500; }

h1,h2,h3,h4,h5,h6{ color:#05070B; font-weight:800; letter-spacing:-.025em; }

/* titles — heavy */
.m3-item-title,.hb-name,.m3-card-title,.hs-val,.m3-amt,
.tile-label,.co-name,.pc-name,.plan-name,.hd-body b,
.h-banner .hb-t,.m3-empty h3,.app-logo{
  color:#0A0C11;
  font-weight:800;
}

/* secondary — darker than before, still lighter than titles */
.m3-item-sub,.hs-top,.hs-foot,.hb-sub,.tile-sub,.co-meta,
.pc-tag,.h-banner .hb-s,.m3-empty p,.hq,.h-listhead > span:first-child,
.txn-time,.txn-inv,.hint,.air-key{
  color:#3D4351;
  font-weight:600;
}

/* labels / chips — small text needs extra weight to read */
.m3-chip,.m3-seg-btn,.nav-item,.hs-top,.m3-seg-count{ font-weight:700; }
.m3-seg-btn.active,.nav-item.active{ font-weight:800; }

/* form */
label,.field label,.ob-f label{ color:#2A303C; font-weight:700; }
input,select,textarea{ color:#0A0C11; font-weight:600; }
input::placeholder{ color:#7A8291; font-weight:500; }

/* tables */
th{ color:#0A0C11; font-weight:800; }
td{ color:#1A1F29; font-weight:600; }

/* links */
a{ color:var(--accent); font-weight:700; }

/* money — heaviest thing on screen, seta thik ache */
.m3-amt,.hs-val,.hd-amt,.h-sv{ font-weight:800; }

/* ==========================================================================
   NAVIGATION BAR — M3, native feel
   Pill spring-e khole, icon bounce kore, gesture bar er jonno safe area.
   ========================================================================== */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  height:auto;min-height:var(--nav-h);
  padding:10px 6px calc(12px + env(safe-area-inset-bottom));
  background:rgba(246,247,251,.92);
  -webkit-backdrop-filter:saturate(200%) blur(22px);
  backdrop-filter:saturate(200%) blur(22px);
  border-top:none;
  box-shadow:0 -1px 0 rgba(17,19,24,.06);
  display:flex;align-items:flex-start;justify-content:space-around;
}

.nav-item{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0;background:none;border:none;
  text-decoration:none;position:relative;
  color:var(--text-secondary);
  -webkit-tap-highlight-color:transparent;
  transition:color 220ms var(--ease);
}

/* icon holder — pill ei tar pechone */
.nav-item i,
.nav-item svg{
  position:relative;z-index:2;
  width:64px;height:34px;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;
  transition:transform 320ms cubic-bezier(.34,1.5,.5,1);
}

/* pill indicator — spring */
.nav-item::before{
  content:'';position:absolute;top:0;left:50%;
  width:64px;height:34px;border-radius:var(--r-full);
  background:var(--accent-container);
  transform:translateX(-50%) scale(.55);
  opacity:0;z-index:1;
  transition:transform 340ms cubic-bezier(.34,1.4,.5,1),
             opacity 180ms var(--ease);
}
.nav-item.active::before{
  opacity:1;
  transform:translateX(-50%) scale(1);
}
.nav-item.active{ color:var(--on-accent-container); }
.nav-item.active i{ transform:scale(1.06); }

/* label */
.nav-item span{
  font-size:11.5px;font-weight:700;letter-spacing:.005em;
  line-height:1;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:font-weight 200ms var(--ease),
             transform 260ms var(--ease);
}
.nav-item.active span{ font-weight:800; }

/* press — icon dabe jay, chere dile spring kore fere */
.nav-item.pressing i{ transform:scale(.82); }
.nav-item.pressing::before{ transform:translateX(-50%) scale(.92); }

/* ripple ei khane gol thakbe, choturbhuj na */
.nav-item .ripple{ opacity:.18; }

@media (prefers-reduced-motion:reduce){
  .nav-item i,.nav-item::before,.nav-item span{ transition:none; }
}

body{ padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); }
.m3-fab{ bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); }

/* ==========================================================================
   FEATURE LOCK
   Locked feature lukai na — dekhai, kintu lock badge soho.
   Karon: na dekhle customer jante-i parbe na upgrade e ki ache.
   ========================================================================== */
.lk-off{
  position:relative;
  filter:saturate(.35);
  opacity:.72;
}
.lk-off::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:rgba(246,247,251,.35);
  pointer-events:none;
}

.lk-badge{
  position:absolute;top:9px;right:9px;z-index:3;
  width:24px;height:24px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--yellow);color:#fff;font-size:10px;
  box-shadow:var(--e1);
  animation:lkIn var(--d-med) var(--ease-decel) both;
}
@keyframes lkIn{
  from{ opacity:0;transform:scale(.5) }
  to{ opacity:1;transform:scale(1) }
}

/* wide row-e badge ta inline bosbe */
.lk-inline{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  padding:3px 9px;border-radius:var(--r-full);
  background:var(--yellow-container);color:var(--yellow);
  font-size:10px;font-weight:800;letter-spacing:.04em;
}
.lk-inline i{ font-size:8.5px; }

/* ==========================================================================
   UPGRADE SHEET — locked feature e tap korle
   ========================================================================== */
.lk-scrim{
  position:fixed;inset:0;z-index:120;
  background:rgba(10,12,17,.5);
  opacity:0;pointer-events:none;
  transition:opacity var(--d-med) var(--ease);
}
.lk-scrim.on{ opacity:1;pointer-events:auto; }

.lk-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:125;
  background:var(--surface);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:8px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow:var(--e5);
  transform:translateY(101%);
  transition:transform var(--d-long) var(--ease-decel);
}
.lk-sheet.open{ transform:translateY(0); }

.lk-handle{
  width:36px;height:4px;border-radius:var(--r-full);
  background:var(--border-light);margin:8px auto 22px;
}
.lk-ico{
  width:72px;height:72px;border-radius:var(--r-full);margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;font-size:28px;
  background:var(--yellow-container);color:var(--yellow);
}
.lk-sheet h3{
  font-family:var(--font-display);font-size:21px;font-weight:800;
  color:var(--text-primary);text-align:center;letter-spacing:-.03em;
  line-height:1.2;
}
.lk-sheet > p{
  font-size:14px;font-weight:600;color:var(--text-muted);
  text-align:center;margin-top:10px;line-height:1.55;
}
.lk-need{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:20px 0 4px;padding:13px;
  border-radius:var(--radius);background:var(--accent-container);
  color:var(--on-accent-container);
  font-size:13.5px;font-weight:700;
}
.lk-need b{ font-weight:800; }
.lk-actions{ display:flex;flex-direction:column;gap:10px;margin-top:20px; }

@media (min-width:600px){
  .lk-sheet{
    left:50%;right:auto;transform:translate(-50%,101%);
    width:min(460px,100%);
  }
  .lk-sheet.open{ transform:translate(-50%,0); }
}

/* ==========================================================================
   APP-LIKE — zoom, bounce, selection bondho
   ========================================================================== */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

input, textarea, select,
[contenteditable], .se-in, .selectable,
.bl-item, .sd-item, .rc, .lg-doc{
  -webkit-user-select:text;
  user-select:text;
}

/* iOS: 16px er kom font hole input e zoom kore */
input, select, textarea{ font-size:16px !important; }

.as-amt input, .kd-amt input, .bk-amt.big input,
.fm-amt input, .as-qty input, .rt-qty input,
.ot-box{ font-size:inherit !important; }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; }
input[type=number]{ -moz-appearance:textfield; }

.m3-pane, .as-results, .se-wrap, .pr-cats,
.pv-rail, .m3-list, .ad-tablewrap{ -webkit-overflow-scrolling:touch; }

img{ -webkit-user-drag:none; }



/* ==========================================================================
   KEYBOARD-AWARE DOCK

   Mobile browser-e keyboard uthle viewport chapa hoy, kintu
   position:fixed dock ta keyboard-er UPORE ese boshe — tokhon
   input dhake fele. Native app e emon hoy na.

   Somadhan: keyboard uthle dock-ta document-er sesh e sore jay
   (position:static), ar input-er niche space thake. Keyboard
   bondho hole abar fixed hoy.
   ========================================================================== */
body.kb-open .as-dock,
body.kb-open .fm-dock,
body.kb-open .bk-dock,
body.kb-open .ex-dock,
body.kb-open .kh-dock,
body.kb-open .pp-dock,
body.kb-open .se-dock,
body.kb-open .sd-dock,
body.kb-open .sh-dock,
body.kb-open .bs-dock,
body.kb-open .m3-fab,
body.kb-open .m3-nav{
  position:static !important;
  box-shadow:none !important;
  transform:none !important;
}

/* niche-r padding-o lagbe na tokhon */
body.kb-open .m3-pane,
body.kb-open .as-body,
body.kb-open .fm-body{
  padding-bottom:20px !important;
}

/* je input e tap kora hoyeche, seta jate keyboard-er niche na jay */
body.kb-open{ scroll-padding-bottom:20px; }

/* iOS safe area — dock er niche */
.as-dock, .fm-dock, .bk-dock, .ex-dock, .kh-dock,
.pp-dock, .se-dock, .sd-dock, .sh-dock, .bs-dock{
  padding-bottom:max(12px, env(safe-area-inset-bottom));
}


/* ==========================================================================
   iOS STANDALONE — safe area

   Home screen theke khulle iOS-e status bar (ghori, battery) app-er
   UPORE bose. Tokhon header tar tolay chole jay ar button tap kora
   jay na. env(safe-area-inset-top) diye totukhani jaiga chhere dei.

   Sudhu standalone mode-e — browser-e khullle iOS nijei jaiga rakhe,
   tokhon ei padding dile duibar jaiga jabe.
   ========================================================================== */
@media all and (display-mode: standalone){
  .app-header{
    padding-top:calc(14px + env(safe-area-inset-top)) !important;
  }

  /* header sticky/fixed hole tar niche-r content-o namate hobe */
  .main-content{
    padding-top:env(safe-area-inset-top);
  }

  /* niche-r nav — iPhone-er home indicator bar */
  .bottom-nav{
    padding-bottom:env(safe-area-inset-bottom);
    height:calc(var(--nav-h, 64px) + env(safe-area-inset-bottom));
  }

  /* fixed dock/fab gulo-o oi bar-er upore */
  .as-dock,
  .fm-bar,
  .m3-fab{
    margin-bottom:env(safe-area-inset-bottom);
  }

  /* sheet, modal */
  .fm-sheet,
  .py-sheet,
  .m3-sheet{
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
}

/* iOS 11.0-11.3 — purano syntax, kichu phone e ekhono lage */
@supports (padding-top: constant(safe-area-inset-top)){
  @media all and (display-mode: standalone){
    .app-header{ padding-top:calc(14px + constant(safe-area-inset-top)) !important; }
    .main-content{ padding-top:constant(safe-area-inset-top); }
    .bottom-nav{ padding-bottom:constant(safe-area-inset-bottom); }
  }
}