/* ==========================================================================
   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); }
}