/* ==========================================================================
   Classroom Course — ভিত্তি: token, reset, টাইপোগ্রাফি
   --------------------------------------------------------------------------
   হালকা আলো প্রধান (শূন্য পে-র মতো), অন্ধকার থাকে পছন্দ হিসেবে।
   সব রঙ token-এ, তাই component একবার লিখলেই দুই theme-এ চলে।
   ========================================================================== */

:root {
  /* পরিমাপ */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  /* কোণা — বড় আর নরম। ছোট কোণা সস্তা দেখায় */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;  --r-full: 999px;

  --w-text: 68ch;
  --w-page: 1180px;
  --w-wide: 1280px;

  --font: 'Anek Latin', 'Anek Bangla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  --t-xs:   .75rem;
  --t-sm:   .8125rem;
  --t-base: .9375rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.125rem, .92rem + .62vw, 1.375rem);
  --t-xl:   clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --t-2xl:  clamp(1.75rem, 1.3rem + 2vw,   2.625rem);
  --t-3xl:  clamp(2rem, 1.5rem + 2.1vw, 3.125rem);

  --lh-tight: 1.2;
  --lh-snug:  1.42;
  --lh-body:  1.74;     /* বাংলা যুক্তাক্ষরের জন্য বাড়তি জায়গা */

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .2s;

  --z-header: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400;

  /* পেমেন্ট মাধ্যমের নিজস্ব রঙ — চেনা ব্র্যান্ড চেনা রঙেই থাকুক */
  --bkash: #E2136E;
  --nagad: #EE7421;
  --rocket: #8C3494;
}

/* ---------- আলো (প্রধান) ---------- */
:root, [data-theme="light"] {
  color-scheme: light;

  --bg:        #F6F7F6;   /* খাঁটি সাদা নয় — কার্ড সাদা হলে তবেই আলাদা দেখায় */
  --bg-2:      #EFF1EF;
  --surface:   #FFFFFF;
  --surface-2: #F6F7F6;
  --surface-3: #EAEDEB;

  --line:      #E4E8E5;
  --line-2:    #D4DAD6;

  --text:      #121714;
  --text-2:    #5A6560;
  --text-3:    #8B958F;

  --brand:     #0E9F6E;   /* প্রধান সবুজ */
  --brand-2:   #0B7A54;   /* চাপলে / গাঢ় */
  --brand-3:   #06603F;
  --brand-dim: #E6F6EF;
  --brand-line:#BFE6D5;
  --on-brand:  #FFFFFF;

  --sky:  #1D6CE0;
  --ok:   #0E9F6E;
  --warn: #C2771A;
  --bad:  #D23B3B;
  --ok-dim:   #E6F6EF;
  --warn-dim: #FDF3E3;
  --bad-dim:  #FCECEC;

  /* ছায়া নরম আর নিচু — ভাসমান নয়, বসানো */
  --sh-1: 0 1px 2px rgba(18,23,20,.05);
  --sh-2: 0 1px 3px rgba(18,23,20,.05), 0 8px 20px -10px rgba(18,23,20,.1);
  --sh-3: 0 2px 6px rgba(18,23,20,.05), 0 20px 48px -16px rgba(18,23,20,.16);
  --sh-float: 0 1px 2px rgba(18,23,20,.06), 0 10px 34px -12px rgba(18,23,20,.18);
  --sh-brand: 0 6px 18px -8px rgba(14,159,110,.5);
}

/* ---------- অন্ধকার ---------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0C110E;
  --bg-2:      #121814;
  --surface:   #161D19;
  --surface-2: #1C241F;
  --surface-3: #242E28;

  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  --text:      #E8EEEA;
  --text-2:    #9FACA5;
  --text-3:    #6E7C75;

  --brand:     #27C28A;
  --brand-2:   #42D49E;
  --brand-3:   #6FE3B8;
  --brand-dim: rgba(39,194,138,.13);
  --brand-line:rgba(39,194,138,.3);
  --on-brand:  #04150D;

  --sky:  #68A8FF;
  --ok:   #27C28A;
  --warn: #E8A33C;
  --bad:  #FF6B6B;
  --ok-dim:   rgba(39,194,138,.13);
  --warn-dim: rgba(232,163,60,.13);
  --bad-dim:  rgba(255,107,107,.13);

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 10px 26px -12px rgba(0,0,0,.6);
  --sh-3: 0 4px 12px rgba(0,0,0,.45), 0 24px 56px -18px rgba(0,0,0,.72);
  --sh-float: 0 2px 8px rgba(0,0,0,.5), 0 12px 36px -14px rgba(0,0,0,.7);
  --sh-brand: 0 6px 18px -8px rgba(39,194,138,.4);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  -moz-tab-size: 4; tab-size: 4;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  min-height: 100svh;
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
textarea { resize: vertical; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ---------- টাইপোগ্রাফি ---------- */
h1, h2, h3, h4, h5 {
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--text);
}
h1 { font-size: var(--t-3xl); font-weight: 650; letter-spacing: -.03em; }
h2 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -.028em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
h5 { font-size: var(--t-md); }

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
a:not([class]) {
  color: var(--brand-2);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .06em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--dur) var(--ease);
}
a:not([class]):hover { text-decoration-color: currentColor; }

strong, b { font-weight: 600; }
code, kbd, samp { font-family: var(--font-mono); font-size: .92em; }

/* সংখ্যার কলাম যেন মেলে — টাকা, TrxID, হিসাব */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

::selection { background: var(--brand-dim); color: var(--brand-3); }

/* ---------- কীবোর্ড ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }

.skip-link {
  position: absolute; left: var(--s4); top: -4rem; z-index: 999;
  padding: var(--s3) var(--s5);
  background: var(--brand); color: var(--on-brand);
  border-radius: var(--r-full); font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: var(--s4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- সাজানোর সহায়ক ---------- */
.wrap      { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--s5); }
.wrap-wide { width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--s5); }
.wrap-text { width: 100%; max-width: var(--w-text); margin-inline: auto; padding-inline: var(--s5); }
@media (max-width: 640px) {
  .wrap, .wrap-wide, .wrap-text { padding-inline: var(--s4); }
}

.stack > * + * { margin-top: var(--flow, var(--s4)); }
.row      { display: flex; align-items: center; gap: var(--s3); }
.row-sb   { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.wrap-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.grow     { flex: 1 1 auto; min-width: 0; }

.section    { padding-block: clamp(var(--s7), 7vw, var(--s9)); }
.section-sm { padding-block: var(--s7); }

.muted  { color: var(--text-2); }
.faint  { color: var(--text-3); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.clamp-1, .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

.hr { height: 1px; background: var(--line); border: 0; }

@media (max-width: 760px) { .hide-sm { display: none !important; } }
@media (min-width: 761px) { .only-sm { display: none !important; } }