/* ============================================================
   /vacancy2026 — পাতার সব CSS
   ============================================================
   ২০২৬-০৮-৩০ পর্যন্ত এটা vacancy2026.html-এর ভেতরে `<style>` ব্লক ছিল
   (৭৮৭ লাইন, ফাইলের ২৭%)। বাইরে আনার একটাই কারণ: একটা বোতামের রং
   বদলাতেও গোটা ১,৮৭,০০০ অক্ষরের ফাইলটা পড়তে হতো।

   🔴 আপেক্ষিক `url()` লিখবেন না — বাইরের স্টাইলশিটে আপেক্ষিক পথ **CSS
      ফাইলের** সাপেক্ষে মেলে, পাতার নয়। এখানকার সবগুলোই `data:` URI।
   🔴 `/css/*`-এ Caddy `Cache-Control: no-cache` দেয় (Caddyfile-এর @appjs) —
      নামে হ্যাশ নেই, তাই বাদ দিলে নতুন HTML + পুরনো CSS হয়ে পাতা ভাঙত।
   ============================================================ */
  :root{
    /* ── মন্থন ব্র্যান্ড প্যালেট (dashboard/bank/contact.html-এর সাথে অভিন্ন) ── */
    --deep:#013E2F;       /* brand deep forest */
    --deep-2:#02291f;     /* gradient partner */
    --acc:#0d6e52;        /* primary green */
    --acc2:#1d9e75;       /* bright green */
    --mint:#a8f0d4;       /* mint highlight */

    --ink:#152420;        /* body text */
    --ink-soft:#657a70;   /* muted text */
    --paper:#eef6f1;      /* page background */
    --surface:#ffffff;
    --line:#dcece4;
    --line-strong:#c2ded0;

    /* পুরনো নামগুলো রাখা হয়েছে — মার্কআপ ও JS এগুলোই ব্যবহার করে,
       শুধু মানগুলো মন্থনের সবুজে বদলানো হয়েছে। */
    --marigold:#1d9e75;
    --marigold-deep:#0d6e52;
    --teal:#0d6e52;
    --teal-soft:#e6f5ee;

    --tint:#f2fbf6;       /* সবচেয়ে হালকা সবুজ ওয়াশ */
    --tint-2:#e6f5ee;
    --danger:#b91c1c;
    --warn:#b45309;
    --shadow:0 1px 2px rgba(1,62,47,.06),0 10px 30px -12px rgba(1,62,47,.20);
    --radius:14px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:"Noto Sans Bengali",system-ui,sans-serif;
    background:var(--paper);color:var(--ink);
    -webkit-font-smoothing:antialiased;line-height:1.55;
  }
  .en{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
  button{font-family:inherit;cursor:pointer}
  input,select{font-family:inherit}

  /* ---------- GATE ---------- */
  /* ── নম্বর যাচাইয়ের মডাল ──
     আগে এটা পেজে ঢোকার **দরজা** ছিল: প্রতিটা দর্শক একটা করে SMS।
     তালিকাটা মাউশি/টেলিটকের প্রকাশিত সরকারি ডেটা, আর সার্ভারে যা কিছু
     সত্যিই পাহারা দরকার (favourites, swap, support পড়া) তার প্রতিটাতে
     `requirePhone` আগে থেকেই বসানো — তাই দরজাটার কোনো কাজ ছিল না, শুধু দাম ছিল।
     এখন এটা চাওয়া হলে খোলা মডাল: `display:none`, `.on` দিলে দেখা যায়। */
  /* entry মোডে বেরোনোর কোনো পথ নেই (✕ নেই, Esc নেই, ব্যাকড্রপে ট্যাপ নেই) —
     নম্বরটাই এই পেজের ফসল। ask মোডে উল্টো: কাজটা ঐচ্ছিক, তাই বন্ধ করা যায়। */
  #gate.entry .gate-close,
  #gate.entry .gate-reason,
  #gate.entry .gate-skip{display:none!important}
  #gate.ask .stat,
  #gate.ask .cd-gate{display:none!important}
  #gate{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
    padding:20px;overflow-y:auto;background:
      radial-gradient(1200px 500px at 80% -10%, rgba(168,240,212,.16), transparent 60%),
      radial-gradient(900px 500px at -10% 110%, rgba(29,158,117,.22), transparent 55%),
      linear-gradient(160deg,rgba(1,62,47,.94),rgba(2,41,31,.96));}
  #gate.on{display:flex}
  .gate-card{background:var(--surface);border-radius:20px;max-width:460px;width:100%;
    padding:38px 34px 30px;box-shadow:0 30px 80px -20px rgba(1,32,25,.6);position:relative;overflow:hidden;
    margin:auto}
  .gate-close{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;
    border:0;background:var(--tint-2);color:var(--acc);font-size:15px;line-height:1;cursor:pointer}
  .gate-close:hover{background:var(--mint)}
  /* কেন নম্বরটা চাওয়া হচ্ছে — কাজভেদে আলাদা লেখা। কারণ না বললে
     "হঠাৎ নম্বর কেন" ভেবে মানুষ বন্ধ করে দেন। */
  .gate-reason{background:var(--tint);border:1px solid #c9e9da;border-radius:11px;
    padding:11px 13px;font-size:13.5px;color:#1c4f3f;margin:0 0 16px;line-height:1.6}
  /* "কেন সত্যি নম্বরটাই দেবেন" — বোতামের ঠিক উপরে, পড়া না হলে কাজ করে না */
  .gate-why{background:#fff8ec;border:1px solid #f2dcb4;border-radius:11px;
    padding:11px 13px;margin:0 0 16px;font-size:12.5px;line-height:1.65;color:#6b4f19}
  .gate-why b{display:block;font-size:13px;color:#8a5a00;margin-bottom:3px}
  .gate-why span b{display:inline;font-size:12.5px;color:#8a5a00;margin:0}
  .gate-skip{display:block;width:100%;margin-top:12px;background:none;border:0;
    color:var(--ink-soft);font-size:12.5px;font-family:inherit;text-decoration:underline;cursor:pointer;padding:4px}
  .gate-skip:hover{color:var(--acc)}
  /* হেডারের চিপ — নম্বর না থাকলে ধূসর বিন্দু আর "যাচাই করুন" */
  .who.anon .dot{background:var(--line-strong);box-shadow:none}
  .gate-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
    background:linear-gradient(90deg,var(--acc2),var(--mint))}
  /* বাংলায় uppercase-এর মানে নেই আর চওড়া letter-spacing যুক্তাক্ষর ও মাত্রা
     ভেঙে দেয় ("ব দ লি যো গ্য") — তাই ইংরেজি ট্র্যাকিংয়ের বদলে সবুজ পট্টি। */
  .eyebrow{font-size:12.5px;letter-spacing:.01em;color:var(--acc);font-weight:700;
    font-family:"Noto Sans Bengali",sans-serif;margin-bottom:14px;
    display:inline-flex;align-items:center;gap:8px}
  .eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;flex:0 0 auto;
    background:linear-gradient(90deg,var(--acc2),var(--mint))}
  .gate-card h1{font-family:"Noto Serif Bengali",serif;font-weight:800;font-size:26px;
    line-height:1.3;margin:0 0 6px;color:var(--deep)}
  .gate-sub{color:var(--ink-soft);font-size:14.5px;margin:0 0 22px}
  .stat{display:flex;align-items:baseline;gap:10px;background:linear-gradient(180deg,var(--tint),var(--tint-2));
    border:1px solid #c9e9da;border-radius:12px;padding:14px 16px;margin-bottom:24px}
  .stat b{font-family:"Noto Serif Bengali",serif;font-size:34px;font-weight:800;color:var(--deep);line-height:1}
  .stat span{font-size:13px;color:var(--ink-soft)}
  .field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink)}
  .phone-wrap{display:flex;align-items:stretch;border:1.5px solid var(--line-strong);border-radius:11px;
    overflow:hidden;transition:border-color .15s, box-shadow .15s;background:#fff}
  .phone-wrap:focus-within{border-color:var(--acc2);box-shadow:0 0 0 3px rgba(29,158,117,.18)}
  .phone-wrap .cc{display:flex;align-items:center;padding:0 12px;background:var(--tint);
    border-right:1px solid var(--line);font-weight:600;color:var(--acc);font-size:15px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  .phone-wrap input{border:0;outline:0;padding:13px 14px;font-size:16px;width:100%;letter-spacing:.02em;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:transparent;color:var(--ink)}
  .hint{font-size:12.5px;color:var(--ink-soft);margin-top:8px}
  .err{color:var(--danger);font-weight:500}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
    margin-top:20px;padding:14px 18px;border:0;border-radius:11px;font-size:15.5px;font-weight:700;
    background:var(--deep);color:#fff;transition:transform .05s, background .15s, box-shadow .15s}
  .btn:hover{background:var(--deep-2)}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:linear-gradient(135deg,var(--acc2),var(--acc));color:#fff;
    box-shadow:0 6px 18px -8px rgba(13,110,82,.7)}
  .btn-primary:hover{background:linear-gradient(135deg,#188c67,#0a5b44)}
  .privacy{font-size:11.5px;color:#8a9a94;margin-top:16px;text-align:center;line-height:1.5}

  /* ---------- APP ---------- */
  /* #app আর লুকানো নয় — তালিকাটা লোডেই খোলা (আগের গেট = প্রতি দর্শকে ১ SMS) */
  header.top{position:sticky;top:0;z-index:20;background:rgba(238,246,241,.92);
    backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
  .top-in{max-width:1160px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
  .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-family:"Noto Serif Bengali",serif}
  .logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--acc2),var(--deep));
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto;
    box-shadow:0 0 0 1px rgba(168,240,212,.35)}
  .logo::after{content:"শূ"}
  .brand small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-soft);font-family:"Noto Sans Bengali",sans-serif}
  .brand .t{font-size:16px;line-height:1.15;color:var(--deep)}
  .top-spacer{flex:1}
  .who{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft);
    background:#fff;border:1px solid var(--line);padding:6px 12px;border-radius:999px}
  .who .dot{width:8px;height:8px;border-radius:50%;background:var(--acc2);
    box-shadow:0 0 0 3px rgba(29,158,117,.18)}
  .who .en{font-weight:600;color:var(--ink)}
  .link-btn{background:none;border:0;color:var(--acc);font-weight:600;font-size:12.5px;text-decoration:underline;padding:0}

  .hero{max-width:1160px;margin:0 auto;padding:34px 20px 8px}
  .hero h2{font-family:"Noto Serif Bengali",serif;font-size:30px;font-weight:800;margin:0 0 6px;
    letter-spacing:-.01em;color:var(--deep)}
  .hero p{color:var(--ink-soft);margin:0;font-size:15px;max-width:640px}

  /* ── কোন তালিকা: স্কুল-কলেজ না মাদ্রাসা ──
     দুটো আলাদা সরকারি তালিকা (আলাদা PDF, আলাদা বোর্ড, একটাও প্রতিষ্ঠান
     দুই জায়গায় নেই)। মাদ্রাসার শিক্ষক মাদ্রাসাতেই বদলি হন — তাই মেশানো
     তালিকা কারও কাজে লাগত না, উল্টো "আমার পদ" ছাঁকনিতে অন্য ধারার পদ
     এসে ভুল ফল দিত। বোতামটা বাছলে অন্য তালিকার একটা সারিও আর আসে না।
     হিরোর ঠিক নিচে, ছাঁকনির উপরে — এটাই সবচেয়ে বড় শর্ত, তাই সবার আগে। */
  .lsw{max-width:1160px;margin:0 auto;padding:16px 20px 0}
  .lsw-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:11px 13px}
  .lsw-lab{font-size:13px;font-weight:700;color:var(--ink)}
  .lsw-seg{display:flex;gap:5px;background:var(--tint);border:1px solid var(--line);
    border-radius:12px;padding:4px}
  .lsw-seg button{border:0;background:transparent;color:var(--acc);cursor:pointer;
    font-family:inherit;font-size:14px;font-weight:600;padding:9px 15px;border-radius:9px;
    display:flex;align-items:center;gap:7px;min-height:42px;transition:background .15s,color .15s}
  .lsw-seg button:hover{background:#fff}
  .lsw-seg button.on{background:var(--acc);color:#fff;box-shadow:0 1px 3px rgba(1,62,47,.25)}
  .lsw-seg button[disabled]{opacity:.55;cursor:progress}
  .lsw-n{font-size:13px;color:var(--ink-soft);margin-left:auto}
  /* মাদ্রাসার ভেতরের ভাগ — পুরো চওড়া নিয়ে নিজের লাইনে, যাতে উপরের সুইচের
     সাথে মিশে গিয়ে "চারটে বোতামের এক সারি" মনে না হয়। উপরে একটা সরু দাগ
     সম্পর্কটা দেখায়: এটা মাদ্রাসার **ভেতরের** বাছাই।
     🔴 `[hidden]`-টা `display:flex`-এর পরে লিখতে হয় — নইলে হারে।
        দেখুন [[hidden-attr-loses-to-display-flex]]। */
  .lsw-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;
           margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
  .lsw-sub[hidden]{display:none}
  .lsw-sub-lab{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
  .lsw-n b{color:var(--ink)}
  @media(max-width:640px){
    .lsw{padding:12px 14px 0}
    .lsw-in{padding:10px;gap:8px}
    .lsw-lab{width:100%;font-size:12.5px;color:var(--ink-soft)}
    .lsw-seg{flex:1}
    .lsw-seg button{flex:1;justify-content:center;padding:9px 8px;font-size:13.5px}
    .lsw-n{width:100%;margin-left:0;font-size:12.5px}
    .lsw-sub{gap:6px;margin-top:8px;padding-top:8px}
    .lsw-sub-lab{width:100%;font-size:12px}
    .lsw-sub .lsw-seg{flex:1;width:100%}
  }


  /* ---------- নিয়ম-কার্ড: "এই তালিকায় আবেদন কীভাবে" ----------
     তালিকা-সুইচের ঠিক নিচে, একই কার্ডের ধারাবাহিকতায় (উপরের কোণ দুটো
     সোজা, তাই সুইচের বাক্সের সাথে জোড়া লাগানো একটা জিনিস মনে হয়)।

     ডিফল্ট ভাঁজ করা: যিনি শুধু শূন্যপদ দেখতে এসেছেন তাঁর পথে ছ'টা ধাপ
     বসানোর মানে হয় না। কিন্তু **শিরোনামের নিচের এক লাইনেই** সবচেয়ে
     দরকারি তিনটে কথা থাকে — চলছে কি না, কবে পর্যন্ত, আর কাগজে না অনলাইনে।
     না খুলেও ওটুকু পড়া যায়। */
  .rulebox{margin-top:-1px}
  .rb-head{display:flex;align-items:center;gap:10px;width:100%;text-align:right;
    background:var(--surface);border:1px solid var(--line);border-top-color:transparent;
    border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);
    padding:10px 13px;font-family:inherit;color:var(--ink)}
  .rb-head:hover{background:var(--tint)}
  .rb-ic{flex:0 0 auto;font-size:17px;line-height:1}
  .rb-t{flex:1 1 auto;min-width:0;text-align:left;font-size:13.5px;line-height:1.45}
  .rb-t b{display:block;font-weight:700}
  .rb-t small{display:block;font-size:11.5px;color:var(--ink-soft)}
  .rb-ar{flex:0 0 auto;color:var(--acc);font-size:12px;transition:transform .18s}
  .rulebox.open .rb-ar{transform:rotate(90deg)}
  /* 🔴 `display:none` নয়, `max-height:0` নয় — `hidden`-এর মতো দুম করে
     লুকোনো এখানে ঠিক আছে, কারণ ভেতরের উচ্চতা তালিকা ভেদে বদলায় আর
     transition দিতে গেলে একটা ভুল ধ্রুবক বসাতে হতো। */
  .rb-body{display:none;background:var(--surface);border:1px solid var(--line);
    border-top:0;border-radius:0 0 var(--radius) var(--radius);
    box-shadow:var(--shadow);padding:2px 15px 14px}
  .rulebox.open .rb-head{border-radius:0;box-shadow:none}
  .rulebox.open .rb-body{display:block}

  /* লাল সতর্কবার্তা — শুধু মাদ্রাসায় ওঠে, আর ওটাই কার্ডের সবচেয়ে দামি লাইন:
     "টেলিটকে গিয়ে খুঁজবেন না"। */
  .rb-note{background:#fff4f4;border:1px solid #f3d5d5;border-left:4px solid var(--danger);
    border-radius:10px;padding:10px 12px;margin:12px 0 4px;font-size:12.5px;line-height:1.65}
  .rb-note b{color:#8f1919}

  /* কোন সাব-তালিকা দেখছেন সেটা কার্ডের মাথাতেই — লাল নোটের **আগে**, কারণ
     "এটা কোন পদের তালিকা" না জানলে নিচের ধাপগুলো কার প্রযোজ্য বোঝা যায় না।
     নিরপেক্ষ রং: এটা সতর্কবার্তা নয়, পরিচয়। */
  .rb-sub{background:var(--tint);border:1px solid var(--line);border-radius:10px;
    padding:9px 12px;margin:12px 0 0;font-size:12.5px;line-height:1.65;color:var(--ink)}

  .rb-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
  .rb-steps li{display:flex;gap:10px;align-items:flex-start}
  .rb-steps .n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;
    background:var(--tint-2);color:var(--acc);border:1px solid #c9e9da;
    font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
    margin-top:1px}
  .rb-steps .s{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.6}
  .rb-steps .s small{display:block;font-size:11.5px;color:var(--ink-soft);line-height:1.55}

  /* শর্তের ছোট ছক — দুই কলাম, নাম আর কথা। মাদ্রাসায় ছ'টা সারি, তাই
     ডেস্কটপে দুই কলামে ভাগ হয়ে যায়, নইলে কার্ডটা একটা লম্বা দেয়াল হতো। */
  .rb-facts{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line);
    display:grid;grid-template-columns:repeat(2,1fr);gap:9px 18px}
  .rb-facts > div{display:flex;gap:8px;align-items:flex-start}
  .rb-facts dt{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--acc);
    background:var(--tint);border-radius:6px;padding:2px 7px;white-space:nowrap;
    max-width:44%;overflow:hidden;text-overflow:ellipsis}
  .rb-facts dd{flex:1 1 auto;min-width:0;margin:0;font-size:12.5px;line-height:1.6}
  .rb-fine{margin-top:11px;font-size:11.5px;line-height:1.6;color:var(--ink-soft);
    background:var(--tint);border-radius:9px;padding:8px 11px}
  .rb-src{margin-top:11px;font-size:11px;line-height:1.6;color:var(--ink-soft)}

  /* মাদ্রাসা বাছা থাকলে কাউন্টডাউনের পট্টিটাও অন্য রঙে — দুটো তালিকার
     জানালা আলাদা, আর রঙটাই সবচেয়ে দ্রুত বলে "এটা এখন অন্য তালিকা"।
     সবুজটা মন্থনের ব্র্যান্ড, তাই মাদ্রাসারটা গাঢ় নীল-সবুজ (teal) —
     একই পরিবারে, কিন্তু আলাদা। */
  .cdbar.md{background:linear-gradient(120deg,#0b3b46,#062730)}

  .wrap{max-width:1160px;margin:0 auto;padding:20px}

  .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .filters{padding:18px 18px 8px;margin-bottom:18px}
  .filters .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .filters .grid .wide{grid-column:span 2}
  .fitem label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink)}
  .ctrl{width:100%;padding:11px 12px;border:1.4px solid var(--line-strong);border-radius:10px;
    font-size:14.5px;background:#fff;color:var(--ink);appearance:none;transition:border-color .15s,box-shadow .15s}
  select.ctrl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23657a70' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
  .ctrl:focus{outline:0;border-color:var(--acc2);box-shadow:0 0 0 3px rgba(29,158,117,.16)}
  .filters .actions{display:flex;align-items:center;gap:12px;padding:14px 0 8px;flex-wrap:wrap}
  .btn-sm{width:auto;margin:0;padding:10px 16px;font-size:13.5px;border-radius:9px}
  .btn-ghost{background:#fff;border:1.4px solid var(--line-strong);color:var(--acc)}
  .btn-ghost:hover{background:var(--tint);border-color:var(--acc2)}

  /* ── এক ঘরে খোঁজা ──
     সাপোর্টে পাঁচজন লিখেছেন "সার্চ কোথায়?" — কারণ এতদিন লেখার একমাত্র ঘরটা
     ছিল আটটা ড্রপডাউনের **শেষে**, আর ফোনে সেটা পর্দার অনেক নিচে। তাই বাক্সটা
     এখন প্যানেলের সবার উপরে, আর দেখতে যেন আর কিছুর মতো না লাগে সেজন্য
     ইচ্ছাকৃতভাবে বড় ও অন্য রঙের (`.ctrl`-এর চেয়ে আলাদা)। */
  .qbox{position:relative;margin:2px 0 14px}
  .qwrap{display:flex;align-items:center;gap:10px;background:#fff;
    border:2px solid var(--acc2);border-radius:14px;padding:4px 6px 4px 14px;
    box-shadow:0 2px 10px rgba(13,110,82,.10);transition:box-shadow .15s,border-color .15s}
  .qwrap:focus-within{border-color:var(--acc);box-shadow:0 0 0 4px rgba(29,158,117,.16)}
  .qico{font-size:17px;line-height:1;flex:none;opacity:.85}
  .qinput{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);
    font-size:16px;font-family:inherit;padding:13px 0;appearance:none}
  .qinput::-webkit-search-cancel-button{display:none}
  .qinput::placeholder{color:#8ea79b}
  .qclear{flex:none;border:0;background:var(--tint-2);color:var(--acc);cursor:pointer;
    width:30px;height:30px;border-radius:50%;font-size:13px;line-height:1;margin-right:6px}
  .qclear:hover{background:var(--mint)}
  /* উদাহরণ — ফাঁকা বাক্স দেখে অনেকে বোঝেন না কী লেখা যায়। একবার লিখলেই উঠে যায়। */
  .qex{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:9px 2px 0;
    font-size:12.5px;color:var(--ink-soft)}
  .qex button{border:1px dashed var(--line-strong);background:#fff;color:var(--acc);
    border-radius:999px;padding:4px 11px;font-size:12.5px;font-family:inherit;cursor:pointer}
  .qex button:hover{background:var(--tint);border-style:solid;border-color:var(--acc2)}

  .qsug{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
    background:#fff;border:1px solid var(--line-strong);border-radius:12px;
    box-shadow:0 10px 30px rgba(1,62,47,.16);overflow:hidden;max-height:340px;overflow-y:auto}
  .qsug.on{display:block}
  .qsug button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:#fff;
    text-align:left;padding:11px 14px;font-size:14px;font-family:inherit;color:var(--ink);
    cursor:pointer;border-bottom:1px solid var(--line)}
  .qsug button:last-child{border-bottom:0}
  .qsug button:hover,.qsug button.hi{background:var(--tint)}
  .qsug .kind{flex:none;font-size:11px;font-weight:700;color:var(--acc);background:var(--tint-2);
    border-radius:6px;padding:3px 8px;min-width:58px;text-align:center}
  .qsug .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .qsug .lbl.en{font-size:13px}
  .qsug .n{flex:none;font-size:12px;color:var(--ink-soft)}

  /* ── চালু ছাঁকনির চিপ ──
     ফল ০ হলে "কেন ০" প্রশ্নটার উত্তর এক নজরে দেখা যায়, আর একটা শর্ত তুলতে
     ড্রপডাউন খুঁজে বেড়াতে হয় না। */
  .chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
  .chips:empty{display:none}
  .chip{display:inline-flex;align-items:center;gap:7px;background:var(--tint-2);color:#1c4f3f;
    border:1px solid #bfe6d5;border-radius:999px;padding:5px 6px 5px 12px;font-size:12.5px;font-weight:600}
  .chip small{font-weight:400;color:var(--acc);margin-right:-2px}
  .chip button{border:0;background:rgba(1,62,47,.10);color:#1c4f3f;cursor:pointer;
    width:19px;height:19px;border-radius:50%;font-size:11px;line-height:1;font-family:inherit}
  .chip button:hover{background:var(--deep);color:#fff}
  .chips .chip-clear{background:#fff;border:1px dashed var(--line-strong);color:var(--acc);
    border-radius:999px;padding:5px 12px;font-size:12.5px;font-family:inherit;cursor:pointer;font-weight:600}
  .chips .chip-clear:hover{background:var(--tint);border-style:solid}

  /* ফোনে আটটা ড্রপডাউন আটটা সারি খায় — ওটাই সার্চ বাক্সকে চাপা দিত।
     ডেস্কটপে বোতামটা নেই, গ্রিড আগের মতোই খোলা। */
  .fmore{display:none}

  .summary{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:2px 2px 14px;color:var(--ink-soft);font-size:14px}
  .summary b{color:var(--ink)}
  .pill{display:inline-flex;align-items:center;gap:6px;background:var(--tint-2);color:#1c4f3f;
    border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}
  .pill.mari{background:var(--deep);color:var(--mint)}

  .results{padding:0;overflow:hidden}
  .tbl-scroll{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
  thead th{position:sticky;top:0;background:#f3f9f5;text-align:right;font-size:12px;font-weight:700;
    color:var(--acc);padding:12px 14px;border-bottom:1.5px solid var(--line-strong);white-space:nowrap;text-align:left}
  tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
  tbody tr:hover{background:#f6fbf8}
  .inst{font-weight:600;color:var(--ink)}
  .inst .en{font-size:13.5px}
  .muted{color:var(--ink-soft);font-size:13px}
  .subj{font-weight:600}
  .vac{display:inline-flex;min-width:30px;justify-content:center;background:var(--mint);color:var(--deep);
    font-weight:800;border-radius:8px;padding:3px 9px;font-family:"Noto Serif Bengali",serif}
  .tag{display:inline-block;font-size:12px;padding:2px 8px;border-radius:6px;background:#eaf3ee;color:var(--ink-soft);font-weight:500}

  /* expandable detail */
  tbody tr.rowline{cursor:pointer}
  tbody tr.rowline.open{background:#e9f6ef}
  .caret{display:inline-block;margin-left:6px;color:var(--acc2);transition:transform .15s;font-size:12px}
  tr.rowline.open .caret{transform:rotate(90deg)}
  tr.detail>td{background:#f4faf7;border-bottom:1px solid var(--line);padding:0}
  .detail-in{padding:16px 18px 18px}
  .detail-head{font-family:"Noto Serif Bengali",serif;font-weight:800;font-size:14px;margin-bottom:12px;color:var(--deep)}
  .info-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .ichip{background:#fff;border:1px solid var(--line-strong);border-radius:10px;padding:9px 13px;min-width:120px}
  .ichip .k{font-size:11.5px;color:var(--ink-soft);margin-bottom:2px}
  .ichip .v{font-weight:700;font-family:"Noto Serif Bengali",serif;font-size:15px;color:var(--ink)}
  .ichip .v.tbd{color:var(--acc);font-weight:600;font-size:13px;font-family:"Noto Sans Bengali",sans-serif}
  .ichip .src{font-size:10.5px;color:#8a9a94;margin-top:2px}
  .info-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .info-links a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:12.5px;font-weight:600;
    color:var(--acc);background:var(--tint-2);border:1px solid #c9e9da;border-radius:8px;padding:7px 12px}
  .info-links a:hover{background:#d6ede1}
  .info-note{font-size:12px;color:var(--ink-soft);margin-top:11px;line-height:1.6}
  .empty{padding:56px 24px;text-align:center;color:var(--ink-soft)}
  .empty b{display:block;color:var(--deep);font-size:17px;font-family:"Noto Serif Bengali",serif;margin-bottom:6px}
  .more{padding:16px;text-align:center;border-top:1px solid var(--line)}

  /* ---------- মন্থন সাইট-নেভিগেশন ---------- */
  /* গেটের উপরে ব্র্যান্ড — নম্বর দেওয়ার আগেই দর্শক জানুক এটা কার সেবা। */
  .gate-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
    border:1px solid var(--line);background:var(--tint);border-radius:12px;padding:9px 12px;margin-bottom:20px;
    transition:border-color .15s,background .15s}
  .gate-brand:hover{border-color:var(--acc2);background:var(--tint-2)}
  .gate-brand .gb-logo{width:32px;height:32px;border-radius:9px;
    background:linear-gradient(135deg,var(--acc2),var(--deep));color:#fff;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;font-family:"Noto Serif Bengali",serif;font-size:16px;font-weight:800}
  .gate-brand b{display:block;font-family:"Noto Serif Bengali",serif;font-size:14.5px;line-height:1.2;color:var(--deep)}
  .gate-brand small{display:block;font-size:11.5px;color:var(--ink-soft)}
  .gate-brand .gb-go{margin-left:auto;font-size:12px;font-weight:700;color:var(--acc);white-space:nowrap}

  /* অ্যাপের মাথায় সরু মাদার-ব্র্যান্ড পট্টি */
  .sitebar{background:linear-gradient(120deg,var(--deep),var(--deep-2));color:var(--mint);
    box-shadow:0 2px 14px rgba(1,62,47,.18)}
  .sitebar-in{max-width:1160px;margin:0 auto;padding:7px 20px;display:flex;align-items:center;gap:9px;
    font-size:12.5px;flex-wrap:wrap}
  .sitebar b{font-family:"Noto Serif Bengali",serif;color:#fff;font-weight:800}
  .sitebar .sb-short{display:none}
  .sitebar .sb-go{margin-left:auto;color:var(--mint);text-decoration:none;font-weight:700;white-space:nowrap;
    background:rgba(168,240,212,.14);border:1px solid rgba(168,240,212,.32);border-radius:20px;padding:3px 12px}
  .sitebar .sb-go:hover{background:rgba(168,240,212,.24)}

  nav.site{display:flex;align-items:center;gap:2px}
  nav.site a{font-size:13.5px;font-weight:500;color:var(--ink-soft);text-decoration:none;
    padding:8px 11px;border-radius:9px;white-space:nowrap;transition:background .15s,color .15s}
  nav.site a:hover{background:#fff;color:var(--acc);box-shadow:0 1px 2px rgba(1,62,47,.10)}
  .menu-btn{display:none;background:#fff;border:1.4px solid var(--line-strong);border-radius:10px;
    padding:7px 11px;font-size:16px;line-height:1;color:var(--deep)}

  /* ---------- মন্থন সম্পর্কে (ফুটারের উপরে) ---------- */
  .about{max-width:1160px;margin:26px auto 0;padding:0 20px}
  .about-in{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:26px 24px;display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:center}
  .about h3{font-family:"Noto Serif Bengali",serif;font-size:21px;margin:6px 0 8px;font-weight:800;color:var(--deep)}
  .about p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.7}
  .about-links{display:grid;gap:9px}
  .about-links a{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
    border:1px solid var(--line);border-radius:11px;padding:11px 13px;transition:border-color .15s,background .15s}
  .about-links a:hover{border-color:var(--acc2);background:var(--tint)}
  .about-links .ic{width:34px;height:34px;flex:0 0 auto;border-radius:9px;background:var(--tint-2);
    color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:17px}
  .about-links b{display:block;font-family:"Noto Serif Bengali",serif;font-size:14px;line-height:1.25;color:var(--deep)}
  .about-links small{display:block;font-size:11.5px;color:var(--ink-soft)}

  footer{max-width:1160px;margin:10px auto 40px;padding:0 20px;color:#7d9189;font-size:12.5px;text-align:center;line-height:1.7}

  /* ---------- OTP ধাপ ---------- */
  .otp-box{display:flex;gap:8px;align-items:stretch}
  .otp-box input{flex:1;border:1.5px solid var(--line-strong);border-radius:11px;padding:13px 14px;
    font-size:22px;letter-spacing:.42em;text-align:center;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    color:var(--deep);background:#fff;outline:0;transition:border-color .15s,box-shadow .15s}
  .otp-box input:focus{border-color:var(--acc2);box-shadow:0 0 0 3px rgba(29,158,117,.18)}
  .gate-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
  .gate-row .link-btn{font-size:12.5px}
  .link-btn[disabled]{color:var(--ink-soft);text-decoration:none;cursor:default}
  .known{display:flex;align-items:center;gap:11px;background:linear-gradient(180deg,var(--tint),var(--tint-2));
    border:1px solid #c9e9da;border-radius:12px;padding:13px 15px}
  .known .tick{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--acc);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:15px}
  .known b{display:block;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;color:var(--deep)}
  .known small{display:block;font-size:11.5px;color:var(--ink-soft)}
  .gate-note{font-size:12px;color:var(--warn);background:#fff8ec;border:1px solid #f2dcb4;
    border-radius:10px;padding:9px 11px;margin-top:12px;line-height:1.6;display:none}

  /* ---------- পছন্দ (★) ---------- */
  th.st,td.st{width:38px;padding-left:10px;padding-right:0;text-align:center}
  .star{border:0;background:none;font-size:19px;line-height:1;color:#d7e5dd;padding:2px 4px;
    transition:transform .1s,color .15s}
  .star:hover{color:#f0b429;transform:scale(1.12)}
  .star.on{color:#f0a500}
  .fav-open{margin-left:auto}

  .choices{margin-bottom:18px;overflow:hidden}
  .ch-head{display:flex;align-items:center;gap:11px;padding:13px 16px;cursor:pointer;
    background:linear-gradient(120deg,var(--deep),var(--deep-2));color:#fff}
  .ch-head b{font-family:"Noto Serif Bengali",serif;font-size:15px}
  .ch-head .cnt{background:rgba(168,240,212,.2);border:1px solid rgba(168,240,212,.35);color:var(--mint);
    border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:700}
  .ch-head .arrow{margin-left:auto;font-size:13px;color:var(--mint);transition:transform .15s}
  .choices.open .ch-head .arrow{transform:rotate(90deg)}
  .ch-body{display:none;padding:14px 16px 16px}
  .choices.open .ch-body{display:block}
  .ch-tip{font-size:12.5px;color:var(--ink-soft);line-height:1.7;margin:0 0 12px}
  .ch-tip b{color:var(--deep)}
  .ch-item{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;
    padding:11px 13px;margin-bottom:9px;background:#fff}
  .ch-item.top{border-color:#bde3d2;background:var(--tint)}
  .ch-rank{flex:0 0 auto;min-width:62px;font-size:11.5px;font-weight:700;color:var(--acc);
    background:var(--tint-2);border-radius:8px;padding:5px 8px;text-align:center}
  .ch-item.top .ch-rank{background:var(--deep);color:var(--mint)}
  .ch-main{flex:1;min-width:0}
  .ch-main .nm{font-weight:600;font-size:13.5px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
    word-break:break-word}
  .ch-main .mt{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .ch-note{width:100%;margin-top:7px;border:1px dashed var(--line-strong);border-radius:8px;
    padding:6px 9px;font-size:12.5px;color:var(--ink);background:#fcfefd;outline:0}
  .ch-note:focus{border-color:var(--acc2);border-style:solid}
  .ch-btns{display:flex;flex-direction:column;gap:4px}
  .ch-btns button{border:1px solid var(--line-strong);background:#fff;border-radius:7px;width:28px;height:24px;
    font-size:12px;color:var(--ink-soft);line-height:1;padding:0}
  .ch-btns button:hover{border-color:var(--acc2);color:var(--acc)}
  .ch-btns button.rm:hover{border-color:#e3b1b1;color:var(--danger)}
  .ch-empty{color:var(--ink-soft);font-size:13.5px;padding:6px 2px 2px;line-height:1.8}
  .ch-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px;align-items:center}
  .ch-sync{font-size:11.5px;color:var(--ink-soft);margin-left:auto}
  .ch-sync.ok{color:var(--acc)}
  .ch-verify{background:none;border:0;padding:0;font-family:inherit;font-size:11.5px;
    font-weight:700;color:var(--acc);text-decoration:underline;cursor:pointer}
  .sup-verify{margin-top:8px;background:var(--acc);border:0;border-radius:8px;padding:7px 13px;
    font-family:inherit;font-size:12px;font-weight:700;color:#fff;cursor:pointer}
  .sup-verify:hover{background:var(--deep)}

  /* ---------- সাপোর্ট চ্যাট ---------- */
  /* ── ইমেইল চাওয়ার কার্ড ──
     সহায়তা FAB ডান কোণে, তাই এটা **বাঁ** কোণে — নইলে দুটো একে অপরকে ঢেকে
     দিত। ফোনে দুটোই নিচে, তাই সেখানে FAB-এর উপরে পুরো চওড়া হয়ে বসে। */
  .epop{position:fixed;left:18px;bottom:18px;z-index:45;width:320px;max-width:calc(100vw - 36px);
    background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;
    padding:18px 18px 14px;box-shadow:0 18px 50px -12px rgba(1,32,25,.34);
    display:none;transform:translateY(14px);opacity:0;transition:transform .25s,opacity .25s}
  .epop.on{display:block}
  .epop.in{transform:none;opacity:1}
  .epop-x{position:absolute;top:9px;right:9px;width:28px;height:28px;border-radius:50%;border:0;
    background:var(--tint-2);color:var(--acc);font-size:12px;line-height:1;cursor:pointer}
  .epop-x:hover{background:var(--mint)}
  .epop b{display:block;font-family:"Noto Serif Bengali",serif;font-size:15.5px;color:var(--deep);
    margin:0 26px 7px 0;line-height:1.4}
  .epop p{margin:0 0 12px;font-size:12.5px;line-height:1.65;color:var(--ink-soft)}
  .epop .ctrl{margin-bottom:9px;font-size:14px;padding:10px 12px}
  .epop-a{display:flex;align-items:center;gap:14px}
  .epop-note{font-size:12px;margin-top:9px;color:var(--acc);font-weight:600;min-height:1px}
  .epop-note.err{color:#b4451f}
  @media (max-width:700px){
    .epop{left:12px;right:12px;bottom:76px;width:auto}
  }
  .sup-fab{position:fixed;right:18px;bottom:18px;z-index:40;width:auto;margin:0;padding:12px 18px;
    border-radius:999px;background:linear-gradient(135deg,var(--acc2),var(--acc));color:#fff;border:0;
    font-size:14px;font-weight:700;box-shadow:0 10px 28px -10px rgba(1,62,47,.75);display:flex;
    align-items:center;gap:8px}
  .sup-fab:hover{background:linear-gradient(135deg,#188c67,#0a5b44)}
  .sup-panel{position:fixed;right:18px;bottom:18px;z-index:41;width:min(370px,calc(100vw - 24px));
    max-height:min(560px,calc(100vh - 36px));background:var(--surface);border:1px solid var(--line);
    border-radius:16px;box-shadow:0 24px 60px -18px rgba(1,32,25,.45);display:none;flex-direction:column;
    overflow:hidden}
  .sup-panel.open{display:flex}
  .sup-h{display:flex;align-items:center;gap:10px;padding:13px 15px;color:#fff;
    background:linear-gradient(120deg,var(--deep),var(--deep-2))}
  .sup-h b{font-family:"Noto Serif Bengali",serif;font-size:14.5px}
  .sup-h small{display:block;font-size:11px;color:var(--mint)}
  .sup-h .x{margin-left:auto;background:none;border:0;color:var(--mint);font-size:17px;padding:0 2px}
  .sup-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;
    background:var(--tint);min-height:170px}
  .sup-msg{max-width:82%;padding:9px 12px;border-radius:13px;font-size:13.5px;line-height:1.65;
    white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
  .sup-msg.me{align-self:flex-end;background:var(--deep);color:#fff;border-bottom-right-radius:4px}
  .sup-msg.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
  .sup-msg .t{font-size:9.5px;opacity:.7;margin-top:3px}
  .sup-hint{font-size:12px;color:var(--ink-soft);text-align:center;line-height:1.7;padding:8px 6px}
  /* ── চ্যাটে লেখা সার্চ-কোয়েরি ধরার পট্টি (২০২৬-০৮-২২) ──
     ৩২টা সাপোর্ট বার্তার ২০টাই ছিল সার্চ কোয়েরি ("ঢাকা জেলা দেখতে চাই",
     "Thakurgaon", "চারু ও কারুকলা")। মানুষ সাহায্য চাননি — খুঁজছিলেন।
     এখন লেখাটা সত্যিই তালিকায় মিললে পাঠানোর **আগেই** এই পট্টিটা ওঠে। */
  .sup-jump{border-top:1px solid var(--line);background:var(--tint);padding:10px 11px}
  .sup-jump button{width:100%;margin:0;display:flex;align-items:center;gap:8px;text-align:right;
    background:#fff;border:1.4px solid var(--acc2);border-radius:10px;padding:9px 12px;
    font-family:inherit;font-size:13px;font-weight:700;color:var(--deep);cursor:pointer;line-height:1.5}
  .sup-jump button:hover{background:var(--mint)}
  .sup-jump .n{margin-right:auto;background:var(--acc);color:#fff;border-radius:999px;
    padding:1px 9px;font-size:11.5px;flex:0 0 auto}
  .sup-jump small{display:block;font-size:11px;color:var(--ink-soft);margin-top:7px;text-align:center}
  .sup-f{padding:11px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:flex-end;background:#fff}
  .sup-f textarea{flex:1;resize:none;border:1.4px solid var(--line-strong);border-radius:10px;padding:9px 11px;
    font-size:13.5px;font-family:inherit;color:var(--ink);outline:0;max-height:110px}
  .sup-f textarea:focus{border-color:var(--acc2)}
  .sup-f button{width:auto;margin:0;padding:10px 15px;border-radius:10px;font-size:13.5px;flex:0 0 auto}

  /* ---------- আবেদনের কাউন্টডাউন পট্টি ---------- */
  .cdbar{background:linear-gradient(120deg,var(--deep),var(--deep-2));color:var(--mint)}
  .cdbar.shut{background:linear-gradient(120deg,#4a4a4a,#2e2e2e)}
  .cdbar-in{max-width:1160px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;
    gap:12px;font-size:13.5px;flex-wrap:wrap}
  .cdbar .cd-d{font-family:"Noto Serif Bengali",serif;font-weight:800;font-size:19px;color:#fff;
    line-height:1;background:rgba(168,240,212,.16);border:1px solid rgba(168,240,212,.34);
    border-radius:10px;padding:6px 11px;flex:0 0 auto}
  .cdbar .cd-t b{color:#fff;font-weight:700}
  .cdbar .cd-t small{display:block;font-size:11.5px;opacity:.82}
  .cdbar .cd-go{margin-left:auto;background:var(--mint);color:var(--deep);text-decoration:none;
    font-weight:800;font-size:13px;white-space:nowrap;border-radius:20px;padding:7px 15px;
    box-shadow:0 2px 10px rgba(0,0,0,.18)}
  .cdbar .cd-go:hover{background:#fff}
  /* গেটের ভেতরের সংক্ষিপ্ত রূপ — দর্শক যাচাইয়ের আগেই তারিখটা দেখেন */
  .cd-gate{display:none;align-items:center;gap:9px;background:var(--tint);border:1px solid #c9e9da;
    border-left:4px solid var(--acc2);border-radius:10px;padding:9px 12px;margin:-10px 0 20px;
    font-size:12.5px;color:var(--ink);line-height:1.6}
  .cd-gate.on{display:flex}
  .cd-gate b{color:var(--deep)}
  .cd-gate a{margin-left:auto;color:var(--acc);font-weight:700;white-space:nowrap;text-decoration:none}
  .cd-gate a:hover{text-decoration:underline}

  /* ---------- আমার পদ ও বিষয় ---------- */
  .myp{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;line-height:1.6;
    background:var(--tint);border:1px solid #c9e9da;border-radius:11px;padding:9px 13px;margin-bottom:14px}
  .myp.set{background:var(--tint-2);border-color:#bde3d2}
  .myp .ic{flex:0 0 auto;font-size:14px}
  .myp .tx{flex:1;min-width:200px;color:var(--ink-soft)}
  .myp .tx b{color:var(--deep)}
  .myp .link-btn{font-size:12.5px}
  .myp .link-btn+.link-btn{margin-left:2px}

  /* ---------- "নিজ জেলায় নেই → নিজ বিভাগে" পথনির্দেশ ---------- */
  .zhint{max-width:520px;margin:18px auto 0;background:var(--tint);border:1px solid #c9e9da;
    border-left:4px solid var(--acc2);border-radius:12px;padding:14px 16px;text-align:start;
    font-size:13.5px;color:var(--ink);line-height:1.75}
  .zhint b{color:var(--deep)}
  .zhint .rule{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:6px}
  .zhint .btn{margin-top:11px}

  /* ---------- যোগ্যতা যাচাই (মডাল) ---------- */
  .ovl{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
    padding:18px;background:rgba(1,32,25,.55)}
  .ovl.open{display:flex}
  .ovl-card{background:var(--surface);border-radius:18px;width:100%;max-width:520px;
    max-height:calc(100vh - 36px);overflow:auto;box-shadow:0 30px 80px -20px rgba(1,32,25,.6)}
  .ovl-h{display:flex;align-items:center;gap:10px;padding:16px 18px;color:#fff;
    background:linear-gradient(120deg,var(--deep),var(--deep-2));position:sticky;top:0;z-index:1}
  .ovl-h b{font-family:"Noto Serif Bengali",serif;font-size:16px}
  .ovl-h small{display:block;font-size:11.5px;color:var(--mint);opacity:.9}
  .ovl-h .x{margin-left:auto;background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:8px;
    width:30px;height:30px;font-size:15px;line-height:1;flex:0 0 auto}
  .ovl-b{padding:16px 18px 18px}
  .eq{border-bottom:1px solid var(--line);padding:13px 0}
  .eq:first-child{padding-top:2px}
  .eq .q{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:9px}
  .eq .q i{display:block;font-style:normal;font-size:11.5px;font-weight:400;color:var(--ink-soft);margin-top:3px}
  .eopts{display:flex;gap:8px;flex-wrap:wrap}
  .eopts button{border:1.4px solid var(--line-strong);background:#fff;color:var(--ink);border-radius:9px;
    padding:8px 15px;font-size:13.5px;width:auto;margin:0;transition:all .15s}
  .eopts button:hover{border-color:var(--acc2)}
  .eopts button.on{background:var(--deep);border-color:var(--deep);color:#fff;font-weight:600}
  .eres{margin-top:16px;border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:1.75;display:none}
  .eres.on{display:block}
  .eres.yes{background:var(--tint);border:1px solid #bde3d2}
  .eres.no{background:#fdf2f2;border:1px solid #f0cccc}
  .eres.part{background:#fdf6ec;border:1px solid #f0dcc0}
  .eres h4{margin:0 0 7px;font-family:"Noto Serif Bengali",serif;font-size:15.5px}
  .eres.yes h4{color:var(--acc)} .eres.no h4{color:var(--danger)} .eres.part h4{color:var(--warn)}
  .eres ul{margin:6px 0 0;padding-left:20px} .eres li{margin-bottom:4px}
  .eres .src{font-size:11.5px;color:var(--ink-soft);margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-strong)}

  /* ---------- চাহিদা ব্যাজ (কজন এই প্রতিষ্ঠান চেয়েছেন) ---------- */
  .dm{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:11px;
    background:#fdf6ec;border:1px solid #f0dcc0;color:#8a5a1a;border-radius:20px;padding:2px 9px;
    font-family:"Noto Sans Bengali",sans-serif;white-space:nowrap}
  .dm b{color:#7a4a10;font-weight:700}

  /* ---------- পারস্পরিক বদলি ---------- */
  .swap{margin-bottom:18px;overflow:hidden}
  .sw-head{display:flex;align-items:center;gap:11px;padding:13px 16px;cursor:pointer;
    background:linear-gradient(120deg,#123c58,#0c2a3e);color:#bfe4f7}
  .sw-head b{font-family:"Noto Serif Bengali",serif;font-size:15px}
  .sw-head .cnt{background:rgba(191,228,247,.2);border:1px solid rgba(191,228,247,.35);color:#dff2fc;
    border-radius:20px;padding:1px 9px;font-size:12px;font-weight:700}
  .sw-head .arrow{margin-left:auto;font-size:13px;transition:transform .15s}
  .swap.open .sw-head .arrow{transform:rotate(90deg)}
  .sw-body{display:none;padding:14px 16px 16px}
  .swap.open .sw-body{display:block}
  .sw-tip{font-size:12.5px;color:var(--ink-soft);line-height:1.75;margin:0 0 13px}
  .sw-tip b{color:var(--deep)}
  .sw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}
  .sw-grid .wide{grid-column:span 2}
  .sw-pick{position:relative}
  .sw-sug{position:absolute;z-index:9;left:0;right:0;top:calc(100% + 4px);background:#fff;
    border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);
    max-height:230px;overflow:auto;display:none}
  .sw-sug.on{display:block}
  .sw-sug button{display:block;width:100%;text-align:left;background:none;border:0;
    padding:9px 12px;font-size:12.5px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
    border-bottom:1px solid var(--line);margin:0;border-radius:0}
  .sw-sug button:last-child{border-bottom:0}
  .sw-sug button:hover,.sw-sug button.sel{background:var(--tint);color:var(--acc)}
  .sw-sug .none{padding:11px 12px;font-size:12.5px;color:var(--ink-soft);line-height:1.7}
  .sw-chosen{display:flex;align-items:center;gap:8px;background:var(--tint);border:1px solid #c9e9da;
    border-radius:10px;padding:9px 12px;font-size:12.5px}
  .sw-chosen .nm{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:600;flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sw-opt{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.65;
    color:var(--ink);padding:7px 0;cursor:pointer}
  .sw-opt input{margin:3px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:var(--acc)}
  .sw-opt small{display:block;color:var(--ink-soft);font-size:11.5px}
  .sw-save{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:8px}
  .sw-note{font-size:11.5px;color:var(--ink-soft)}
  .sw-note.ok{color:var(--acc);font-weight:600}
  .sw-note.err{color:var(--danger)}

  .sw-match{border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:10px;background:#fff}
  .sw-match.open{border-color:#bde3d2;background:var(--tint)}
  .sw-m-top{display:flex;align-items:flex-start;gap:10px}
  .sw-m-main{flex:1;min-width:0}
  .sw-m-main .nm{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:600;font-size:13.5px;color:var(--ink);
    overflow-wrap:anywhere}
  .sw-m-main .mt{font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.7}
  .sw-m-main .mt b{color:var(--deep)}
  .sw-m-top .btn{flex:0 0 auto;margin:0}
  .sw-phone{margin-top:10px;padding-top:10px;border-top:1px dashed #bde3d2;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
  .sw-phone .num{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:800;font-size:16px;color:var(--deep);
    letter-spacing:.02em}
  .sw-phone a{color:var(--acc);font-weight:700;text-decoration:none;border:1.4px solid var(--line-strong);
    border-radius:8px;padding:5px 12px;font-size:12.5px;background:#fff}
  .sw-phone a:hover{border-color:var(--acc2);background:#fff}
  .sw-empty{font-size:13px;color:var(--ink-soft);line-height:1.85;padding:4px 2px}

  /* ---------- আবেদনের পরের ধাপ (সময়সীমা) ---------- */
  .stg{border-top:1px dashed var(--line-strong);margin-top:16px;padding-top:14px}
  .stg h4{margin:0 0 4px;font-family:"Noto Serif Bengali",serif;font-size:14.5px;color:var(--deep)}
  .stg .lead{font-size:12px;color:var(--ink-soft);line-height:1.75;margin:0 0 12px}
  .stg-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;
    border-bottom:1px solid var(--line);font-size:12.5px}
  .stg-row:last-child{border-bottom:0}
  .stg-row .k{flex:1;min-width:150px;color:var(--ink)}
  .stg-row .k small{display:block;color:var(--ink-soft);font-size:11.5px;margin-top:2px}
  .stg-row input[type=date]{border:1.4px solid var(--line-strong);border-radius:9px;padding:7px 10px;
    font-family:inherit;font-size:12.5px;color:var(--ink);background:#fff}
  .stg-row input[type=date]:focus{outline:0;border-color:var(--acc2)}
  .due{border-radius:20px;padding:3px 11px;font-size:11.5px;font-weight:700;white-space:nowrap}
  .due.ok{background:var(--tint-2);color:#1c4f3f;border:1px solid #bde3d2}
  .due.soon{background:#fdf6ec;color:#8a5a1a;border:1px solid #f0dcc0}
  .due.late{background:#fdf2f2;color:var(--danger);border:1px solid #f0cccc}
  .due.idle{background:#f2f4f3;color:var(--ink-soft);border:1px solid var(--line)}

  /* ছাপার টেবিল পর্দায় কখনো দেখা যায় না — শুধু @media print-এ। */
  #print-area{display:none}
  .pa-h{font-family:"Noto Serif Bengali",serif;font-size:15px;margin:0 0 2px}
  .pa-sub{font-size:11px;color:#444;margin:0 0 10px}
  .pa-t{width:100%;border-collapse:collapse;font-size:10.5px}
  .pa-t th,.pa-t td{border:1px solid #999;padding:3px 5px;text-align:left;vertical-align:top}
  .pa-t th{background:#eee;font-weight:700}
  .pa-t td.n{text-align:center}
  .pa-note{font-size:10px;color:#444;margin-top:8px}

  @media print{
    #gate,.epop,header.top,.sitebar,.filters,.summary,.results,.about,.sup-fab,.sup-panel,.hero p,
    .cdbar,.ovl,.swap{display:none!important}
    .choices{border:0;box-shadow:none}
    .ch-head{background:none;color:#000;border-bottom:2px solid #000}
    .ch-head .arrow,.ch-btns,.ch-actions{display:none!important}
    .ch-body{display:block!important}

    /* ফলাফল ছাপার মোড — body-তে ক্লাসটা বসিয়ে print() ডাকা হয়, তারপর সরানো।
       ডিফল্ট ছাপা এখনো "আমার পছন্দ", তাই ক্লাস ছাড়া আচরণ অপরিবর্তিত। */
    body.print-results .choices{display:none!important}
    body.print-results .hero{display:none!important}
    body.print-results #print-area{display:block!important}
    /* সারি যেন পাতার সীমানায় দুভাগ না হয়, আর প্রতি পাতায় শিরোনাম থাকে। */
    .pa-t thead{display:table-header-group}
    .pa-t tr{page-break-inside:avoid}
    @page{margin:10mm}
  }

  @media (max-width:860px){
    .filters .grid{grid-template-columns:repeat(2,1fr)}
    .hero h2{font-size:24px}
  }
  @media (max-width:900px){
    /* লিংকগুলো এক সারিতে ধরে না — হ্যামবার্গারের নিচে প্যানেল হয়ে নামে */
    .menu-btn{display:block;order:4}
    nav.site{display:none;order:5;width:100%;flex-direction:column;align-items:stretch;gap:0;
      border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
    nav.site.open{display:flex}
    nav.site a{padding:11px 6px;border-radius:0}
    nav.site a:hover{background:transparent;box-shadow:none}
    .top-in{flex-wrap:wrap}
    .about-in{grid-template-columns:1fr;gap:18px}
  }
  /* ফোন/ছোট ট্যাব — ড্রপডাউনগুলো ভাঁজ করে রাখা, সার্চ বাক্সই প্রথম জিনিস।
     `.grid.open` না থাকলে লুকানো; JS বুট করার সময় কোনো ছাঁকনি বসানো থাকলে
     (যেমন সংরক্ষিত পদ ও বিষয়) নিজে থেকেই খুলে দেয় — নইলে চালু শর্তটা
     লুকিয়ে থাকত আর ফল কম আসার কারণ বোঝা যেত না। */
  @media (max-width:700px){
    .hero{padding:18px 16px 4px}
    .hero h2{font-size:21px;margin-bottom:4px}
    .hero p{font-size:14px}
    .hero-more{display:none}
    .filters{padding:14px 14px 6px}
    .filters .grid{display:none}
    .filters .grid.open{display:grid}
    .fmore{display:flex;align-items:center;gap:9px;width:100%;margin:0 0 12px;cursor:pointer;
      background:#fff;border:1.4px solid var(--line-strong);border-radius:10px;
      padding:11px 13px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--acc)}
    .fmore .arrow{margin-left:auto;transition:transform .18s;font-size:11px}
    .fmore[aria-expanded="true"] .arrow{transform:rotate(90deg)}
    .fmore .fn{background:var(--acc);color:#fff;border-radius:999px;
      padding:1px 8px;font-size:11.5px}
    .qinput{font-size:16px}   /* ১৬px-এর নিচে হলে iOS ফোকাসে পুরো পেজ জুম করে */

    /* ── 🔴 খোঁজার ঘর ভাঁজের উপরে তোলা (২০২৬-০৮-২২) ─────────────────────
       মাপা: ৩৬০×৬৪০ ফোনে `#f-q` ছিল **৪৭৫px নিচে**, প্রথম ফলাফল ১২০৫px।
       ফল — সাপোর্ট ইনবক্সের ৩২টা বার্তার **২০টাই সার্চ কোয়েরি** ছিল
       ("ঢাকা জেলা দেখতে চাই", "Thakurgaon", "চারু ও কারুকলা"), ১৭ জন
       আলাদা মানুষের। তাঁরা সাহায্য চাননি — খুঁজছিলেন, আর খোঁজার ঘরটা
       না পেয়ে ভাসমান 💬 বোতামেই লিখেছেন। উপরের ৪৭৫px-এর ভাগ ছিল:
       sitebar ৩৯ + header ১১২ + cdbar ১৫৮ + hero ১২৪।
       নিচের তিনটে কাটে ~১৭৫px, কোনো তথ্য না মুছে। */

    /* ১. ক্রস-প্রোমো পট্টিটা সবার নিচে। যিনি শূন্যপদ খুঁজতে এসেছেন তাঁর
          কাছে "মন্থন দেখুন →" প্রথম জিনিস নয় — শেষ জিনিস। DOM অপরিবর্তিত,
          তাই ডেস্কটপে আর প্রিন্টে আগের মতোই উপরে থাকে। */
    #app{display:flex;flex-direction:column}
    /* 🔴 এই তিনটে ঘোষণার একটাও বাদ দেবেন না — প্রথম চেষ্টায় গোটা পাতা
       ৩৬০px পর্দায় আড়াআড়ি বেরিয়ে গিয়েছিল (খোঁজার ঘর, চিপ, প্যানেল সব
       ডান দিক দিয়ে কাটা পড়ছিল), অথচ `#app` নিজে ঠিক ৩৬০px-ই ছিল।
       কারণ দুটো, দুটোই flex-এর নিয়ম:
       ১. flex আইটেমের ডিফল্ট `min-width:auto` — সে নিজের বিষয়বস্তুর
          চেয়ে সরু হতে রাজি নয়, আর `.wrap`-এর ভেতরে ৮২০px টেবিল আছে।
       ২. **আসল দোষী** — `.wrap` ও `.hero`-তে `margin:0 auto` আছে।
          flex আইটেমে auto মার্জিন `stretch`-কে হারিয়ে দেয়, তাই আইটেমটা
          max-content মাপ নেয় → `.wrap` হয়ে যেত ৮৬২px। মার্জিন শূন্য
          করলেই stretch ফিরে আসে। ছোট পর্দায় `max-width:1160px` এমনিতেই
          অপ্রাসঙ্গিক, তাই কেন্দ্রীকরণ হারিয়ে কিছু যায়-আসে না।
       যাচাই: `documentElement.scrollWidth == innerWidth` আর
       `.tbl-scroll` এর `clientWidth < scrollWidth` (মানে টেবিলটা
       নিজের ঘরের ভেতরেই স্ক্রল করছে, পাতাটা নয়)। */
    #app > *{min-width:0;margin-left:0;margin-right:0;align-self:stretch}
    /* 🔴 এখানে ক্রম **হাতে** লেখা — order না দিলে আইটেমটা 0 পায় আর সবার
       আগে, হেডারেরও উপরে গিয়ে বসে। `.lsw` যোগ করার সময় ঠিক সেটাই হয়েছিল:
       ডেস্কটপে হিরোর নিচে, অথচ ফোনে পাতার একদম মাথায়। নতুন কোনো সেকশন
       যোগ করলে এই তালিকাতেও তাকে জায়গা দিতে হবে। */
    #app > header.top{order:1}
    #app > #cdbar{order:2}
    #app > .hero{order:3}
    #app > .lsw{order:4}
    #app > .wrap{order:5}
    #app > .about{order:6}
    #app > footer{order:7}
    #app > .sitebar{order:8}

    /* ২. হিরোর শিরোনামটা `header.top`-এর ব্র্যান্ড-লেখার হুবহু নকল, আর
          দুটোর দূরত্ব এক পর্দারও কম। তাই চোখ থেকে সরানো হলো — কিন্তু
          `display:none` নয়: তাতে পাতার একমাত্র <h2> DOM থেকেই হারাত।
          এই কৌশলে স্ক্রিন রিডার ও সার্চ ইঞ্জিন দুটোই আগের মতো পায়। */
    .hero h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
      overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
    .hero{padding:14px 16px 4px}

    /* ৩. আবেদনের পট্টি ১৫৮px → ~৭০px। তারিখ বা লিংক কিছুই বাদ যায়নি,
          শুধু বোতামটা আর নিজের একটা আস্ত সারি নেয় না (সেটাই ছিল
          অর্ধেক উচ্চতার কারণ) আর "টেলিটকে" শব্দটা লুকোয় — গন্তব্য
          তো ওই লিংকেই লেখা। */
    .cdbar-in{gap:9px;padding:8px 14px;font-size:12.5px;flex-wrap:nowrap;align-items:center}
    .cdbar .cd-d{font-size:15px;padding:4px 9px;border-radius:8px}
    .cdbar .cd-t{flex:1 1 auto;min-width:0;line-height:1.35}
    .cdbar .cd-t small{font-size:10.5px;line-height:1.32}
    .cdbar .cd-go{margin-left:0;width:auto;flex:0 0 auto;
      font-size:11.5px;padding:6px 11px;text-align:center}
    .cdbar .cd-go-long{display:none}

    /* নিয়ম-কার্ড: ফোনে শর্তের ছকটা এক কলামে। দুই কলামে ৩৯০px-এ প্রতিটা
       ঘরে ~১৭০px থাকত, তাতে "সমমান/সমস্তরের মাদ্রাসায় সমপদে…" ছয় লাইনে
       ভেঙে ডান দিকটা কাটা পড়ত। লেবেলটাও আর কাটা যায় না — ভাঁজ হয়। */
    .rb-facts{grid-template-columns:1fr;gap:10px}
    .rb-facts dt{white-space:normal;max-width:40%}
    .rb-body{padding:2px 13px 13px}
    .rb-steps .s{font-size:12.5px}

    /* ── ৪. ফলাফল: ফোনে ছক নয়, কার্ড ───────────────────────────────────
       🔴 আগে ফোনেও একই সাতটা কলামের `<table>` বসত, `min-width:820px` নিয়ে,
       আর `.tbl-scroll` তাকে আড়াআড়ি স্ক্রলে রাখত। ৩৯০px পর্দায় একবারে
       দেখা যেত ৪৭% — প্রতিটা সারির জন্য **ডানে-বাঁয়ে টেনে** পড়তে হতো,
       আর "শূন্যপদ কটা" ঘরটা ছিল সবচেয়ে ডানে, অর্থাৎ সবার শেষে। যে
       তথ্যটার জন্য মানুষ এসেছেন সেটা পেতেই সবচেয়ে বেশি খাটুনি।

       এখন এক-একটা সারি এক-একটা কার্ড, আর তিন লাইনে সাজানো:
         ★  প্রতিষ্ঠানের নাম ▸                    [শূন্যপদ]
            পদবি — বিষয়
            জেলা · উপজেলা · ধরন

       🔴 কলামগুলো লেবেল-মান জোড়া বানিয়ে কার্ডে **ফিরিয়ে আনা হয়নি** —
       ওটাই "রেসপনসিভ টেবিল"-এর চেনা ফাঁদ, তাতে সাত সারির একটা ফর্ম
       তৈরি হয় আর কার্ড আগের চেয়েও লম্বা হয়। বদলে **ক্যাটাগরি ঘরটা ফোনে
       বাদ** (৯৩% সারিতেই "শিক্ষক" — একই কথা বারবার), আর বাকিগুলো
       পরিচয়ের অংশ হিসেবে এক লাইনে মিশে গেছে। ছক, CSV আর ছাপা অক্ষত —
       নিয়মগুলো এই একটাই `@media` ব্লকের ভেতরে।

       🔴 `<tr>` কার্ড হয় flex দিয়ে, grid দিয়ে নয়: তিনটে টুকরো (ধরন, পদবি,
       বিষয়) **একই লাইনে গিয়ে উপচে পড়লে তবেই** পরের লাইনে নামা দরকার,
       আর সেটা grid পারে না (প্রতিটা আইটেম নিজের ঘর নিয়ে বসে, বা
       নিজে থেকে কলাম বানিয়ে কার্ডটাকেই চওড়া করে ফেলে)। */
    .tbl-scroll{overflow-x:visible}
    .results table{display:block;min-width:0;width:100%}
    .results thead{display:none}          /* কার্ডে কলামের নাম বলার কিছু নেই */
    .results tbody{display:block;padding:10px 10px 2px}
    .results tbody td{display:block;padding:0;border:0}

    .results tr.rowline{
      display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:4px;
      position:relative;padding:12px 12px 12px 42px;margin-bottom:8px;
      background:var(--surface);border:1px solid var(--line);border-radius:12px;
      box-shadow:0 1px 2px rgba(1,62,47,.05)}
    .results tr.rowline:hover{background:var(--surface)}
    .results tr.rowline.open{background:var(--tint);border-color:#c9e9da}

    /* ★ বাঁ পাশের গলিতে, নামের প্রথম লাইনের সাথে সমান্তরালে। আঙুলের মাপ
       ৪৪px — কার্ডের প্যাডিংয়ের ভেতরেই, তাই আলাদা জায়গা খায় না। */
    .results tr.rowline > td.st{position:absolute;left:0;top:4px;width:42px;padding:0}
    .results tr.rowline .star{width:42px;height:44px;font-size:20px;padding:0}

    /* ১. নাম — কার্ডের শিরোনাম। লম্বা ইংরেজি নাম ভাঙতে দেওয়া হয়, নইলে
       একটা টোকেনই কার্ডটাকে চওড়া করে দিত। */
    /* 🔴 `flex:1 1 auto` নয় — লম্বা নামের কার্ডে (CHANADULY BAGHIA M.R HIGH
       SCHOOL) শূন্যপদের বড়িটা প্রথম লাইনে আর আঁটত না, পরের লাইনে নেমে
       পদবির পাশে গিয়ে বসত। বেসিসটা "পুরো চওড়া বাদে বড়ির জায়গা" ধরে
       বাঁধা, তাই নাম যত লম্বাই হোক নিজের ঘরের ভেতরেই ভাঁজ হয়। */
    .results tr.rowline > td.inst{order:1;flex:1 1 calc(100% - 56px);min-width:0;
      font-size:14px;line-height:1.45;overflow-wrap:anywhere}
    .results tr.rowline > td.inst .en{font-size:13.5px}
    /* ২. শূন্যপদ — ডান কোণে, নামের সাথে এক লাইনে। এটাই সারির “উত্তর”,
       তাই আর সবার শেষে নয়। */
    .results tr.rowline > td:nth-child(7){order:2;flex:0 0 auto;margin-left:auto}
    .results tr.rowline .vac{font-size:15px;padding:3px 11px}
    /* ৩. পদবি — বিষয়: নিজের লাইনে, সবুজে। যিনি নিজের পদ খুঁজছেন তাঁর
       চোখ এখানেই আটকায়। */
    /* 🔴 এই চারটে `flex-basis`-ই কার্ডটাকে **তিন লাইনে** ধরে রাখে, আর
       এটাই এখানকার একমাত্র সূক্ষ্ম জায়গা। flex লাইন ভাগ করে আইটেমের
       **বেসিস** দেখে, বেড়ে যাওয়া মাপ দেখে নয় — তাই `.subj`-কে শুধু
       `flex-grow:1` দিলে সে লাইনটা "ভরে" ফেলত ঠিকই, কিন্তু জেলার ঘরটা
       বেসিস ছোট বলে **তার আগেই ওই লাইনে ঢুকে পড়ত** (সবুজ পদবির পাশে
       ম্লান "গাজীপুর · কালিয়াকৈর", আর ধরনের ট্যাগটা একা পরের লাইনে)।
       পদবি+বিষয়ের বেসিস মিলিয়ে ৯২% রাখায় দ্বিতীয় লাইনে আর কিছু আঁটে না,
       আর জেলা(৪৫%)+ধরন একসাথে তৃতীয় লাইনে বসে। */
    .results tr.rowline > td:nth-child(5){order:3;flex:1 1 52%;min-width:0;
      font-weight:700;font-size:13px;color:var(--acc)}
    .results tr.rowline > td.subj{order:4;flex:1 1 40%;min-width:0;
      font-weight:600;font-size:13px;color:var(--acc)}
    .results tr.rowline > td.subj::before{content:"— ";color:var(--ink-soft);font-weight:400}
    /* ৪. জায়গা ও ধরন — ম্লান, সবার নিচে। পুরো চওড়া নেয় বলে পরের
       টুকরোগুলো এর পরে নতুন লাইনে যায়। */
    /* `flex:0 1 auto` — জায়গা থাকলে ধরনের ট্যাগটা এই লাইনেই এসে বসে,
       একটা আস্ত লাইন কম। লাইন-ভাঙাটা আসে উপরের `.subj`-এর `flex-grow:1`
       থেকে, সে বাকি জায়গাটুকু খেয়ে নেয়। */
    .results tr.rowline > td:nth-child(2){order:5;flex:1 1 45%;min-width:0;
      display:flex;flex-wrap:wrap;column-gap:6px;font-size:12.5px;color:var(--ink-soft)}
    .results tr.rowline > td:nth-child(2) div{display:inline}
    .results tr.rowline > td:nth-child(2) .muted::before{content:"· ";}
    /* ধরনটা মাদ্রাসায় সত্যিই দরকারি — নাম বলে "FAZIL MADRASHA" অথচ স্তর
       "কামিল মাদ্রাসা (১-১৭)" হতে পারে, আর বদলি হয় **সমস্তরে**। তাই
       কার্ড থেকে বাদ দেওয়া যায় না; শুধু ছোট করে জেলার পাশে বসানো হয়েছে।
       লম্বা হলে ভাঁজ হবে, কাটা যাবে না (`white-space:normal`)। */
    .results tr.rowline > td:nth-child(4){order:6;flex:0 1 auto;min-width:0}
    .results tr.rowline .tag{font-size:11.5px;padding:1px 7px;white-space:normal}
    /* ৫. ক্যাটাগরি — কার্ডে থাকেই না (ছকে, CSV-তে আর ছাপায় আগের মতোই) */
    .results tr.rowline > td:nth-child(5) .muted{display:none}

    /* খোলা বিস্তারিত — কার্ডের নিচে জোড়া লাগানো, আলাদা কার্ড নয় */
    .results tr.detail{display:block;margin:-12px 0 10px}
    .results tr.detail > td{display:block;border:1px solid #c9e9da;border-top:0;
      border-radius:0 0 12px 12px;background:var(--tint)}
    .results tr.rowline.open{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
    .detail-in{padding:12px 13px 14px}
    .ichip{min-width:0;flex:1 1 44%;padding:8px 10px}
    .info-chips{gap:7px;margin-bottom:11px}
    .info-links a{padding:9px 12px}
  }
  /* 🔴 ফোনে গেটের কার্ডটা এত লম্বা হয়ে যেত যে **"তালিকা দেখুন" বোতামটাই
     ভাঁজের নিচে** পড়ত — একটা লিড-গেটের পক্ষে সবচেয়ে খারাপ ভুল। তাই ছোট
     পর্দায় ব্র্যান্ড-লিংকটা (ক্রস-প্রোমো, এখানে জরুরি নয়) লুকিয়ে যায় আর
     বাকি সব একটু চেপে বসে, যাতে ঘর+বোতাম দুটোই এক পর্দায় থাকে। */
  @media (max-width:540px){
    .gate-card{padding:24px 20px 20px}
    .gate-card h1{font-size:21px;margin-bottom:8px}
    #gate.entry .gate-brand{display:none}
    .eyebrow{margin-bottom:10px}
    .gate-sub{font-size:13.5px;margin-bottom:14px}
    .stat{padding:10px 13px;margin-bottom:12px}
    .stat b{font-size:26px}
    .stat span{font-size:12px}
    .cd-gate{padding:8px 11px;font-size:12px;margin-bottom:14px}
    .gate-why{padding:9px 11px;margin-bottom:12px;font-size:12px;line-height:1.55}
    .privacy{font-size:11px}
    .filters .grid{grid-template-columns:1fr}
    .filters .grid .wide{grid-column:auto}   /* নইলে span 2 ইমপ্লিসিট কলাম বানায় */
    .sitebar .sb-long{display:none}          /* সরু পর্দায় লম্বা বাক্যটা ৩ লাইন খেয়ে ফেলত */
    .sitebar .sb-short{display:inline}
    .top-in{flex-wrap:wrap;gap:10px}
    .who{order:3}
    .sitebar-in{font-size:12px}
    .sitebar .sb-go{padding:2px 10px}
    /* 🔴 আগে এখানে `.cd-go{width:100%}` ছিল — বোতামটা নিজের একটা আস্ত সারি
       নিত আর পট্টিটা ১৫৮px লম্বা হয়ে খোঁজার ঘরকে ভাঁজের নিচে ঠেলে দিত।
       এখন ৭০০px ব্লকের কম্প্যাক্ট নিয়মটাই চলে (সেখানে "টেলিটকে" শব্দটা
       লুকোয় বলে বোতাম সরু হয়ে একই সারিতে আঁটে)। এই ফাইলে ৫৪০px ব্লকটা
       ৭০০px-এর **পরে** আসে, তাই এখানে আবার লিখলে ওটাকেই হারিয়ে দিত। */
    .cdbar-in{padding:8px 13px}
    .cd-gate{flex-wrap:wrap}
    .cd-gate a{margin-left:0;width:100%}
    .sw-grid{grid-template-columns:1fr}
    .sw-grid .wide{grid-column:auto}
    .sw-m-top{flex-wrap:wrap}
    .sw-m-top .btn{width:100%}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}