/* =====================================================================
   PRISM EXTRAS — রসায়ন স্পেশাল, কমান্ড প্যালেট, ডেইলি রোডম্যাপ
   অ্যাপের থিম ভেরিয়েবল (--card, --border, --text, --accent …) ব্যবহার করে,
   তাই লাইট/ডার্ক দুই মোডেই মানিয়ে যায়।
   ===================================================================== */
:root{
  --px-chem:#0f766e; --px-chem2:#14907f; --px-qp:#4338ca; --px-qp2:#5b6cf0; --px-pt:#7c3aed; --px-pt2:#a06bff;
  --px-gold:#d4a017; --px-warn:#c2410c; --px-cell-empty:#e9ecf1; --px-muted:#6b7280; --px-soft:rgba(15,118,110,.08);
  /* পর্যায় সারণীর শ্রেণি-রঙ */
  --cat-alkali:#ffd9d4;     --cat-alkaline:#ffe7c2;  --cat-transition:#d7e6fb; --cat-post:#d8efe3;
  --cat-metalloid:#e9f3b8;  --cat-nonmetal:#c8f0e6;  --cat-halogen:#f6d6f2;    --cat-noble:#e0d8fb;
  --cat-lanthanide:#fbe0f1; --cat-actinide:#f3d4e3;  --cat-unknown:#e5e8ed;
  --cat-ink:#1a1d29;
}
[data-theme="dark"]{
  --px-soft:rgba(45,212,191,.10); --px-cell-empty:#2a2f3a; --px-muted:#9aa3b2;
  --cat-alkali:#6b3a36;     --cat-alkaline:#6a5330;  --cat-transition:#2f4a73; --cat-post:#2f5c47;
  --cat-metalloid:#58632b;  --cat-nonmetal:#2c6257;  --cat-halogen:#6a3a66;    --cat-noble:#4a3f78;
  --cat-lanthanide:#6a3a57; --cat-actinide:#5f3a4e;  --cat-unknown:#3a3f4b;
  --cat-ink:#eef1f6;
}

/* ───────── হিরো ব্যানার ───────── */
.px-hero{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 18px; border-radius:var(--radius, 14px); color:#fff; margin-bottom:14px; }
.px-hero-chem{ background:linear-gradient(120deg,var(--px-chem),#0b4f5c); }
.px-hero-pt{ background:linear-gradient(120deg,var(--px-pt),#3b1d8f); }
.px-hero-qp{ background:linear-gradient(120deg,var(--px-qp),#1f2a7a); }
.px-hero-ic{ width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:26px; flex:none; }
.px-hero-tx{ flex:1; min-width:200px; }
.px-hero-tx h2{ margin:0; font-size:22px; font-weight:700; color:#fff; }
.px-hero-tx p{ margin:2px 0 0; font-size:14.5px; opacity:.92; }
.px-hero-stats{ display:flex; gap:8px; flex-wrap:wrap; }
.px-hero-stats span{ background:rgba(255,255,255,.16); padding:5px 12px; border-radius:20px; font-size:14px; }
.px-hero-stats b{ font-size:16px; margin-right:2px; }

/* ───────── সাধারণ ───────── */
.px-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.px-toolbar input[type="search"], .px-toolbar input[type="text"]{ flex:1 1 220px; min-width:0; }
.px-chips{ display:flex; gap:7px; overflow-x:auto; padding:2px 2px 10px; margin-bottom:6px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.px-chip{ flex:none; border-radius:20px; padding:6px 14px; font-size:14px; background:var(--card); border:1px solid var(--border); color:var(--text-sec, var(--text)); cursor:pointer; white-space:nowrap; }
.px-chip.on{ background:var(--px-chem); border-color:var(--px-chem); color:#fff; }
.px-tag{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; padding:2px 9px; border-radius:20px; line-height:1.5; }
.px-tag-ch{ background:var(--px-soft); color:var(--px-chem); font-weight:600; }
[data-theme="dark"] .px-tag-ch{ color:#5eead4; }
.px-tag-imp.imp-top{ background:#fde8e1; color:#c2410c; }
.px-tag-imp.imp-freq{ background:#e3edff; color:#1d4ed8; }
.px-tag-imp.imp-care{ background:#fff1cf; color:#a16207; }
[data-theme="dark"] .px-tag-imp.imp-top{ background:#4a2a20; color:#fdba74; }
[data-theme="dark"] .px-tag-imp.imp-freq{ background:#23345a; color:#9ec0ff; }
[data-theme="dark"] .px-tag-imp.imp-care{ background:#4a3d18; color:#fcd34d; }
.px-mine{ font-size:12px; color:var(--px-muted); margin-left:auto; }
.px-hint{ font-size:13.5px; color:var(--px-muted); margin:4px 0; }
.px-scrollhint{ display:none; text-align:center; }
@media (max-width:900px){ .px-scrollhint{ display:block; } }
.px-hint.warn{ color:var(--px-warn); }
.px-foot-note{ font-size:13px; color:var(--px-muted); text-align:center; margin:18px 0 4px; }
.px-empty{ grid-column:1/-1; text-align:center; padding:34px 12px; color:var(--px-muted); }
.px-empty i{ font-size:36px; display:block; margin-bottom:6px; opacity:.7; }
.px-empty.small{ padding:16px 8px; } .px-empty.small i{ font-size:26px; }
.px-empty p{ margin:0; }
.px-seg{ display:inline-flex; gap:3px; padding:3px; border-radius:11px; background:var(--px-soft); max-width:100%; overflow-x:auto; }
.px-seg button{ border:none; background:transparent; padding:7px 14px; border-radius:9px; font-size:14.5px; cursor:pointer; color:var(--text); white-space:nowrap; }
.px-seg button.on{ background:var(--card); box-shadow:0 1px 4px rgba(0,0,0,.14); font-weight:700; color:var(--px-chem); }
[data-theme="dark"] .px-seg button.on{ color:#5eead4; }
.px-seg.small button{ padding:4px 11px; font-size:13.5px; }
.px-seg small{ opacity:.7; margin-left:3px; }
.px-form label{ display:block; font-size:14px; color:var(--text-sec, var(--text)); margin-bottom:9px; }
.px-form input[type="text"], .px-form input[type="number"], .px-form input[type="date"], .px-form select, .px-form textarea{ width:100%; margin-top:3px; }
.px-form textarea{ resize:vertical; font-family:inherit; }
.px-row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.px-row3{ display:grid; grid-template-columns:2fr 2fr 1fr; gap:10px; }
.px-chk{ display:flex !important; align-items:center; gap:7px; padding-top:20px; }
.px-chk input{ width:auto !important; margin:0 !important; }
.px-toast{ position:fixed; left:50%; bottom:90px; transform:translate(-50%,20px); background:#1f2937; color:#fff; padding:9px 18px; border-radius:24px; font-size:14.5px; opacity:0; pointer-events:none; transition:.25s; z-index:100000; }
.px-toast.show{ opacity:1; transform:translate(-50%,0); }
#px-confetti{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:99999; }

/* ───────── মডাল ───────── */
.px-modal-overlay{ position:fixed; inset:0; background:rgba(8,12,20,.55); display:flex; align-items:center; justify-content:center; padding:14px; z-index:9000; }
.px-modal{ background:var(--card); color:var(--text); border-radius:16px; width:100%; max-width:520px; max-height:92vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.35); border:1px solid var(--border); }
.px-modal.wide{ max-width:760px; }
.px-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px 8px; }
.px-modal-head h3{ margin:0; font-size:19px; }
.px-x{ border:none; background:transparent; font-size:19px; cursor:pointer; color:var(--px-muted); padding:4px 8px; }
.px-modal-body{ padding:6px 18px 10px; overflow:auto; }
.px-modal-foot{ display:flex; gap:8px; justify-content:flex-end; padding:10px 18px 16px; border-top:1px solid var(--border); flex-wrap:wrap; }
.px-qm-part{ display:flex; gap:8px; align-items:center; margin-bottom:7px; }
.px-qm-part b{ width:22px; flex:none; text-align:center; }
.px-qm-part input[type="text"]{ flex:1; margin:0 !important; }
.px-qm-part input[type="number"]{ width:64px !important; margin:0 !important; flex:none; }
.px-mc-list table{ width:100%; font-size:14.5px; }
.px-mc-list{ max-height:300px; overflow:auto; margin:6px 0 10px; border:1px solid var(--border); border-radius:10px; }
.px-mc-more{ margin:6px 0; } .px-mc-more summary{ cursor:pointer; font-size:14.5px; color:var(--px-chem); padding:4px 0; }

/* ───────── রসায়ন ভল্ট ───────── */
.px-fgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:12px; }
.px-fcard{ background:var(--card); border:1px solid var(--border); border-left:4px solid var(--px-chem2); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:7px; }
.px-fcard.imp-top{ border-left-color:#e8590c; } .px-fcard.imp-care{ border-left-color:#d4a017; }
.px-fh{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.px-fcard h3{ margin:0; font-size:17px; line-height:1.4; }
.px-formula{ margin:0; padding:9px 11px; border-radius:9px; background:var(--px-soft); font-family:'JetBrains Mono','Hind Siliguri',ui-monospace,monospace; font-size:14px; line-height:1.75; white-space:pre-wrap; word-break:break-word; overflow-x:auto; }
.px-note{ margin:0; font-size:14px; line-height:1.6; color:var(--text-sec, var(--text)); display:flex; gap:6px; }
.px-note i{ color:var(--px-gold); margin-top:3px; flex:none; }
.px-ff{ display:flex; gap:6px; align-items:center; margin-top:auto; padding-top:4px; }
.px-star{ margin-left:auto; border:none; background:transparent; font-size:20px; cursor:pointer; color:var(--px-muted); padding:2px 4px; line-height:1; }
.px-star.on{ color:var(--px-gold); }
.px-calc-wrap{ margin-bottom:14px; }
.px-calc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:12px; }
.px-calc{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.px-calc h4{ margin:0 0 4px; font-size:16px; } .px-calc h4 i{ color:var(--px-chem2); }
.px-calc label{ display:block; font-size:13.5px; margin-top:7px; color:var(--text-sec, var(--text)); }
.px-calc input{ width:100%; margin-top:2px; }
.px-res{ margin-top:9px; }
.px-res div{ display:flex; justify-content:space-between; gap:8px; padding:5px 9px; border-radius:8px; background:var(--px-soft); margin-bottom:4px; font-size:14.5px; }
.px-res b{ font-family:'JetBrains Mono',ui-monospace,monospace; color:var(--px-chem); }
[data-theme="dark"] .px-res b{ color:#5eead4; }

/* ───────── পর্যায় সারণী ───────── */
.px-legend{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.px-leg{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:20px; padding:4px 11px; font-size:13.5px; cursor:pointer; }
.px-leg i{ width:12px; height:12px; border-radius:4px; display:inline-block; }
.px-leg small{ opacity:.65; }
.px-leg.on{ outline:2px solid var(--px-pt); }
.px-leg.cat-alkali i{ background:var(--cat-alkali); } .px-leg.cat-alkaline i{ background:var(--cat-alkaline); } .px-leg.cat-transition i{ background:var(--cat-transition); }
.px-leg.cat-post i{ background:var(--cat-post); } .px-leg.cat-metalloid i{ background:var(--cat-metalloid); } .px-leg.cat-nonmetal i{ background:var(--cat-nonmetal); }
.px-leg.cat-halogen i{ background:var(--cat-halogen); } .px-leg.cat-noble i{ background:var(--cat-noble); } .px-leg.cat-lanthanide i{ background:var(--cat-lanthanide); }
.px-leg.cat-actinide i{ background:var(--cat-actinide); } .px-leg.cat-unknown i{ background:var(--cat-unknown); }
.px-ptwrap{ overflow-x:auto; padding-bottom:8px; border-radius:12px; -webkit-overflow-scrolling:touch; }
.px-pt{ display:grid; grid-template-columns:repeat(18,minmax(46px,1fr)); grid-template-rows:20px repeat(8,minmax(54px,auto)) 10px repeat(3,minmax(54px,auto)); gap:3px; min-width:900px; }
.px-ptg{ font-size:12px; text-align:center; color:var(--px-muted); align-self:end; }
.px-ptmark, .px-ptlbl{ display:grid; place-items:center; font-size:11px; color:var(--px-muted); border:1px dashed var(--border); border-radius:6px; text-align:center; }
.px-ptlbl{ border:none; justify-items:end; padding-right:6px; font-size:12px; }
.px-el{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2px 1px; border-radius:7px; border:1.5px solid transparent; cursor:pointer; color:var(--cat-ink); line-height:1.15; transition:transform .12s, opacity .12s; font-family:inherit; }
.px-el:hover{ transform:scale(1.12); z-index:2; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.px-el .z{ position:absolute; top:2px; left:4px; font-size:10px; font-style:normal; opacity:.75; }
.px-el b{ font-size:17px; font-weight:700; }
.px-el .nm{ font-size:9.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.px-el .ms{ font-size:9px; opacity:.7; }
.px-el.dim{ opacity:.22; } .px-el.hit{ outline:2px solid var(--px-pt); outline-offset:1px; }
.px-el.sel{ border-color:var(--px-pt); box-shadow:0 0 0 2px var(--px-pt); z-index:3; }
.cat-alkali{ background:var(--cat-alkali); } .cat-alkaline{ background:var(--cat-alkaline); } .cat-transition{ background:var(--cat-transition); }
.cat-post{ background:var(--cat-post); } .cat-metalloid{ background:var(--cat-metalloid); } .cat-nonmetal{ background:var(--cat-nonmetal); }
.cat-halogen{ background:var(--cat-halogen); } .cat-noble{ background:var(--cat-noble); } .cat-lanthanide{ background:var(--cat-lanthanide); }
.cat-actinide{ background:var(--cat-actinide); } .cat-unknown{ background:var(--cat-unknown); }
.px-leg[class*="cat-"]{ background:var(--card); }
.px-ptdetail{ margin-top:14px; }
.px-ptd-head{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.px-ptd-tile{ width:96px; height:96px; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; color:var(--cat-ink); flex:none; }
.px-ptd-tile i{ position:absolute; top:6px; left:9px; font-size:14px; font-style:normal; opacity:.8; }
.px-ptd-tile strong{ font-size:40px; line-height:1; } .px-ptd-tile small{ font-size:12px; opacity:.8; margin-top:3px; }
.px-ptd-name{ flex:1; min-width:150px; } .px-ptd-name h3{ margin:0; font-size:24px; } .px-ptd-name p{ margin:0 0 6px; color:var(--px-muted); }
.px-ptd-nav{ display:flex; gap:6px; } .px-ptd-nav button{ width:38px; height:38px; padding:0; border-radius:50%; display:grid; place-items:center; }
.px-ptd-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:14px 0 10px; }
.px-ptd-grid div, .px-ptd-cfg div{ background:var(--px-soft); border-radius:10px; padding:8px 11px; display:flex; flex-direction:column; gap:2px; }
.px-ptd-grid span, .px-ptd-cfg span{ font-size:12.5px; color:var(--px-muted); } .px-ptd-grid b{ font-size:16px; }
.px-ptd-cfg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px; }
.px-ptd-cfg div{ position:relative; } .px-ptd-cfg button{ position:absolute; top:6px; right:6px; }
.px-mono{ font-family:'JetBrains Mono','Hind Siliguri',ui-monospace,monospace; font-size:16px; word-break:break-word; }

/* ───────── প্রশ্নপত্র জেনারেটর ───────── */
.px-qp{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); gap:14px; align-items:start; }
.px-qp-side{ position:sticky; top:72px; display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 90px); overflow:auto; }
.px-qp-meta h4, .px-qp-picked h4{ margin:0 0 8px; font-size:16px; } .px-qp-meta label{ display:block; font-size:13.5px; margin-bottom:7px; }
.px-qp-meta input, .px-qp-meta select, .px-qp-meta textarea{ width:100%; margin-top:2px; }
.px-qlist{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.px-qcard{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:11px 13px; }
.px-qcard.picked{ border-color:var(--px-qp2); box-shadow:0 0 0 1px var(--px-qp2) inset; }
.px-q-top{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.px-q-marks{ font-size:12.5px; color:var(--px-muted); }
.px-q-stim{ margin:0 0 6px; padding:7px 10px; background:var(--px-soft); border-radius:8px; font-family:inherit; white-space:pre-wrap; font-size:14.5px; }
.px-q-parts{ list-style:none; margin:0; padding:0; } .px-q-parts li{ display:flex; gap:8px; font-size:14.5px; padding:2px 0; } .px-q-parts li span:nth-child(2){ flex:1; } .px-q-parts .k{ font-weight:700; width:18px; } .px-q-parts em{ font-style:normal; color:var(--px-muted); }
.px-q-text{ margin:0 0 4px; font-size:15px; line-height:1.55; } .px-q-m{ font-style:normal; color:var(--px-muted); font-size:13px; }
.px-q-opts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:3px 12px; font-size:14.5px; }
.px-q-opts li span{ display:inline-block; width:22px; font-weight:700; color:var(--px-muted); } .px-q-opts li.ok{ color:#15803d; font-weight:600; } [data-theme="dark"] .px-q-opts li.ok{ color:#4ade80; }
.px-q-hint{ margin-top:6px; font-size:13.5px; } .px-q-hint summary{ cursor:pointer; color:var(--px-qp); } .px-q-hint p{ margin:4px 0 0; color:var(--text-sec, var(--text)); }
.px-q-foot{ display:flex; gap:6px; margin-top:8px; }
.px-pk-top{ display:flex; justify-content:space-between; align-items:center; }
.px-pk-sec{ margin-bottom:9px; } .px-pk-h{ display:flex; justify-content:space-between; font-size:13.5px; padding:3px 0; border-bottom:1px solid var(--border); margin-bottom:4px; } .px-pk-h span{ color:var(--px-muted); }
.px-pk{ display:flex; align-items:center; gap:6px; padding:3px 0; font-size:14px; } .px-pk .n{ width:20px; color:var(--px-muted); flex:none; } .px-pk .t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.px-pk button{ padding:2px 7px; }
.px-pk-total{ display:flex; justify-content:space-between; padding:8px 10px; border-radius:9px; background:var(--px-soft); margin:6px 0 10px; font-size:14.5px; }
.px-qp-print{ width:100%; justify-content:center; padding:10px; font-size:16px; }

/* ───────── ডেইলি রোডম্যাপ ───────── */
.px-road{ margin-bottom:14px; }
.px-road-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.px-road-head h3{ margin:0; font-size:18px; } .px-road-head h3 i{ color:var(--px-chem2); }
.px-road-prog{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13.5px; color:var(--px-muted); }
.px-road-prog .bar{ flex:1; height:7px; border-radius:6px; background:var(--px-soft); overflow:hidden; } .px-road-prog .bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--px-chem2),#2dd4bf); border-radius:6px; transition:width .35s; }
.px-rd-list{ list-style:none; margin:0 0 6px; padding:0; }
.px-rd{ display:flex; align-items:center; gap:9px; padding:7px 4px; border-bottom:1px dashed var(--border); }
.px-rd:last-child{ border-bottom:none; }
.px-rd-chk{ position:relative; width:22px; height:22px; flex:none; cursor:pointer; display:block; margin:0; }
.px-rd-chk input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; width:100%; height:100%; }
.px-rd-chk i{ position:absolute; inset:0; border:2px solid var(--border); border-radius:7px; transition:.15s; }
.px-rd-chk input:checked + i{ background:var(--px-chem2); border-color:var(--px-chem2); }
.px-rd-chk input:checked + i::after{ content:'✓'; color:#fff; position:absolute; inset:0; display:grid; place-items:center; font-size:14px; }
.px-rd-chk input:focus-visible + i{ outline:2px solid var(--px-pt); outline-offset:2px; }
.px-rd-tag{ flex:none; display:inline-flex; align-items:center; gap:4px; font-size:12px; padding:2px 8px; border-radius:20px; }
.tag-class{ background:#e0ecff; color:#1d4ed8; } .tag-exam{ background:#fde2e2; color:#b91c1c; } .tag-event{ background:#ece3ff; color:#6d28d9; }
.tag-money{ background:#fff0cc; color:#a16207; } .tag-ops{ background:#d9f3ee; color:#0f766e; } .tag-mine{ background:#eceff4; color:#475569; }
[data-theme="dark"] .tag-class{ background:#1f3358; color:#9ec0ff; } [data-theme="dark"] .tag-exam{ background:#4a2323; color:#fca5a5; } [data-theme="dark"] .tag-event{ background:#35285c; color:#c4b5fd; }
[data-theme="dark"] .tag-money{ background:#4a3d18; color:#fcd34d; } [data-theme="dark"] .tag-ops{ background:#17403b; color:#5eead4; } [data-theme="dark"] .tag-mine{ background:#2f3440; color:#cbd5e1; }
.px-rd-tx{ flex:1; min-width:0; font-size:15px; line-height:1.45; word-break:break-word; }
.px-rd.done .px-rd-tx{ text-decoration:line-through; opacity:.55; }
.px-rd-go, .px-rd-del{ border:none; background:transparent; cursor:pointer; color:var(--px-muted); padding:3px 6px; font-size:16px; border-radius:6px; } .px-rd-go:hover, .px-rd-del:hover{ background:var(--px-soft); }
.px-rd-day{ font-weight:700; font-size:14.5px; margin:10px 0 2px; } .px-rd-day small{ font-weight:400; color:var(--px-muted); }
.px-road-add{ display:flex; gap:8px; margin-top:8px; } .px-road-add input{ flex:1; min-width:0; }

/* ───────── Ctrl+K কমান্ড প্যালেট ───────── */
.px-cmdk{ position:fixed; inset:0; z-index:9500; background:rgba(8,12,20,.5); display:none; align-items:flex-start; justify-content:center; padding:11vh 12px 12px; backdrop-filter:blur(2px); }
.px-cmdk.open{ display:flex; }
body.px-ck-lock{ overflow:hidden; }
.px-ck-box{ width:100%; max-width:620px; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.4); overflow:hidden; display:flex; flex-direction:column; max-height:76vh; }
.px-ck-top{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); }
.px-ck-top i{ font-size:20px; color:var(--px-muted); }
.px-ck-top input{ flex:1; border:none !important; outline:none !important; background:transparent !important; box-shadow:none !important; font-size:17px; padding:4px 0 !important; min-width:0; }
.px-ck-list{ overflow:auto; padding:6px 8px 8px; flex:1; }
.px-ck-head{ font-size:12px; letter-spacing:.3px; color:var(--px-muted); padding:9px 10px 3px; text-transform:uppercase; }
.px-ck-item{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:none; background:transparent; padding:9px 11px; border-radius:10px; cursor:pointer; color:var(--text); font-size:15.5px; }
.px-ck-item > i:first-child{ font-size:19px; color:var(--px-chem2); width:22px; text-align:center; }
.px-ck-lbl{ flex:1; min-width:0; display:flex; flex-direction:column; } .px-ck-lbl small{ color:var(--px-muted); font-size:12.5px; }
.px-ck-ret{ opacity:0; color:var(--px-muted); } .px-ck-item.sel{ background:var(--px-soft); } .px-ck-item.sel .px-ck-ret{ opacity:1; }
.px-ck-empty{ text-align:center; color:var(--px-muted); padding:26px; }
.px-ck-search{ padding:2px 2px 6px; } .px-ck-search .gs-head{ margin-top:2px; }
.px-ck-foot{ display:flex; gap:16px; flex-wrap:wrap; padding:8px 16px; border-top:1px solid var(--border); font-size:12.5px; color:var(--px-muted); }
.px-cmdk kbd, .px-ck-hint kbd{ font-family:inherit; font-size:11.5px; background:var(--px-soft); border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; padding:0 5px; margin:0 1px; color:var(--text); }
.sd-topbar-search{ position:relative; }
.px-ck-hint{ position:absolute; right:10px; top:50%; transform:translateY(-50%); border:none; background:transparent; padding:0; cursor:pointer; display:inline-flex; gap:2px; opacity:.85; }
.sd-topbar-search input{ padding-right:74px; }
@media (max-width:760px){
  .px-ck-hint{ display:none; } .sd-topbar-search input{ padding-right:12px; }
  .px-ck-foot span:nth-child(3){ display:none; } .px-cmdk{ padding-top:5vh; }
  .px-qp{ grid-template-columns:1fr; } .px-qp-side{ position:static; max-height:none; }
  .px-row3{ grid-template-columns:1fr; } .px-q-opts{ grid-template-columns:1fr; }
  .px-hero{ padding:13px 14px; } .px-hero-tx h2{ font-size:19px; }
}

/* ───────── সাইডবারে নতুন মডিউলের রং-ইঙ্গিত ───────── */
.tab[data-tab="chemVault"].active, .sd-tab[data-tab="chemVault"].active{ box-shadow:inset 3px 0 0 var(--px-chem2); }
.tab[data-tab="periodic"].active, .sd-tab[data-tab="periodic"].active{ box-shadow:inset 3px 0 0 var(--px-pt2); }
.tab[data-tab="qpaper"].active, .sd-tab[data-tab="qpaper"].active{ box-shadow:inset 3px 0 0 var(--px-qp2); }
@media (prefers-reduced-motion:reduce){ .px-el, .px-road-prog .bar i{ transition:none; } .px-el:hover{ transform:none; } }
@media print{ .px-cmdk, #px-confetti, .px-toast, .px-modal-overlay{ display:none !important; } }

/* অ্যাপের গ্লোবাল রংধনু-গ্রেডিয়েন্ট হেডিং: কার্ডের শিরোনামে (৫০+টি) সাদামাটা রং রাখা হলো, ব্যানারে সাদা।
   বাকি জায়গায় (রোডম্যাপ, ক্যালকুলেটর, মডাল) অ্যাপের নিজস্ব স্টাইলই থাকছে। */
.px-fcard h3, .px-ptd-name h3{
  background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important;
  -webkit-text-fill-color:currentColor !important; color:var(--text) !important; animation:none !important;
}
html body .px-hero .px-hero-tx h2{ background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; -webkit-text-fill-color:#fff !important; color:#fff !important; animation:none !important; }
.px-fcard h3{ font-size:17px; }

/* =====================================================================
   শিক্ষার্থী পোর্টাল — রসায়ন স্পেশাল ট্যাব
   ===================================================================== */
.px-portal .px-sub .px-hero{ display:none; }              /* একটাই হিরো (ওপরে) */
.px-hero-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.px-hero-chips span{ background:rgba(255,255,255,.16); padding:5px 12px; border-radius:20px; font-size:14px; }
.px-hero-chips b{ font-size:16px; margin-right:2px; }
.px-seg{ display:flex; gap:6px; padding:5px; margin:0 0 14px; background:var(--px-soft); border:1px solid var(--border); border-radius:14px; overflow-x:auto; scrollbar-width:none; }
.px-seg::-webkit-scrollbar{ display:none; }
.px-seg button{ flex:1 1 0; min-width:max-content; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 14px; border:0; border-radius:10px; background:transparent; color:var(--text-sec, var(--px-muted)); font:inherit; font-weight:700; font-size:15px; cursor:pointer; white-space:nowrap; box-shadow:none; }
.px-seg button i{ font-size:19px; }
.px-seg button.on{ background:linear-gradient(120deg,var(--px-chem2),var(--px-chem)); color:#fff; box-shadow:0 4px 12px rgba(15,118,110,.28); }
.px-seg button:focus-visible{ outline:2px solid var(--px-chem2); outline-offset:2px; }

/* MCQ অনুশীলন */
.px-prac-intro{ text-align:center; padding:34px 18px; border:1px dashed var(--border); border-radius:16px; background:var(--card); }
.px-prac-intro i{ font-size:42px; color:var(--px-chem2); }
.px-prac-intro h3{ margin:8px 0 4px; font-size:19px; }
.px-prac-intro p{ margin:0 auto 8px; max-width:440px; color:var(--text-sec, var(--px-muted)); line-height:1.65; }
.px-prac-score{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px; margin-bottom:12px; border:1px solid var(--border); border-radius:14px; background:var(--card); position:sticky; top:6px; z-index:5; box-shadow:0 6px 16px rgba(15,29,51,.08); }
.px-prac-score.done{ border-color:var(--px-chem2); background:var(--px-soft); }
.px-prac-meter{ flex:1; min-width:90px; height:8px; border-radius:99px; background:var(--border); overflow:hidden; }
.px-prac-meter i{ display:block; height:100%; background:linear-gradient(90deg,var(--px-chem2),#22c55e); border-radius:99px; transition:width .3s; }
.px-prac-verdict{ flex-basis:100%; font-weight:700; color:var(--px-chem); }
.px-prac-list{ display:grid; gap:12px; }
.px-prac-q{ border:1px solid var(--border); border-radius:16px; background:var(--card); padding:14px 16px; }
.px-prac-qh{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.px-prac-no{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--px-soft); color:var(--px-chem); font-weight:800; font-size:14px; }
.px-prac-text{ margin:4px 0 10px; font-size:17px; line-height:1.7; font-weight:600; }
.px-prac-opts{ display:grid; gap:8px; grid-template-columns:1fr 1fr; }
.px-prac-opt{ display:flex; align-items:center; gap:10px; text-align:left; padding:11px 12px; border:1.5px solid var(--border); border-radius:12px; background:var(--card); color:var(--text); font:inherit; font-size:16px; cursor:pointer; min-height:48px; box-shadow:none; transition:border-color .15s, background .15s; }
.px-prac-opt:hover:not(:disabled){ border-color:var(--px-chem2); background:var(--px-soft); }
.px-prac-opt:disabled{ cursor:default; opacity:1; }
.px-prac-l{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--px-soft); font-weight:800; font-size:14px; color:var(--px-chem); }
.px-prac-opt > span:nth-child(2){ flex:1; overflow-wrap:anywhere; }
.px-prac-opt.ok{ border-color:#16a34a; background:rgba(22,163,74,.12); } .px-prac-opt.ok .px-prac-l{ background:#16a34a; color:#fff; } .px-prac-opt.ok i{ color:#16a34a; font-size:20px; }
.px-prac-opt.bad{ border-color:#dc2626; background:rgba(220,38,38,.10); } .px-prac-opt.bad .px-prac-l{ background:#dc2626; color:#fff; } .px-prac-opt.bad i{ color:#dc2626; font-size:20px; }
.px-prac-opt.dim{ opacity:.55; }
@media (max-width:640px){
  .px-prac-opts{ grid-template-columns:1fr; }
  .px-seg button{ padding:10px 8px; font-size:14px; gap:5px; min-width:0; } .px-seg-x{ display:none; }
  .px-prac-score{ top:0; }
}

/* =====================================================================
   ল্যান্ডিং পেজ — রসায়ন স্পেশাল সেকশন
   ===================================================================== */
.pl-chemtools{ padding:38px var(--px, 16px) 6px; max-width:none; }
.pl-ct-wrap{ max-width:1500px; margin:0 auto; padding:26px clamp(16px,3vw,34px) 28px; border-radius:24px; position:relative; overflow:hidden;
  background:radial-gradient(900px 340px at 100% -10%, rgba(45,212,191,.22), transparent 60%), radial-gradient(700px 300px at -10% 110%, rgba(124,58,237,.14), transparent 60%), linear-gradient(135deg,#f2fbf9,#eef4ff);
  border:1px solid #d6ebe7; box-shadow:0 12px 34px rgba(15,29,51,.09); }
.pl-ct-head{ max-width:760px; }
.pl-ct-sub{ margin:10px 0 0; font-size:17px; line-height:1.8; color:#33425a; }
.pl-ct-grid{ display:grid; gap:14px; margin-top:22px; grid-template-columns:1fr; }
.pl-ct-card{ background:#fff; border:1px solid #e1e8f2; border-radius:18px; padding:14px 14px 16px; box-shadow:0 8px 22px rgba(15,29,51,.07); transition:transform .18s, box-shadow .18s; }
.pl-ct-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(15,29,51,.12); }
.pl-ct-viz{ height:104px; border-radius:13px; display:grid; place-items:center; margin-bottom:12px; overflow:hidden; }
.pl-ct-c1 .pl-ct-viz{ background:linear-gradient(135deg,#0f766e,#0b4f5c); }
.pl-ct-c2 .pl-ct-viz{ background:linear-gradient(135deg,#7c3aed,#3b1d8f); }
.pl-ct-c3 .pl-ct-viz{ background:linear-gradient(135deg,#0ea5e9,#1d4ed8); }
.pl-ct-c4 .pl-ct-viz{ background:linear-gradient(135deg,#f59e0b,#c2410c); }
.pl-ct-t{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:17px; color:#0f1d33; }
.pl-ct-t i{ font-size:21px; color:#0f766e; }
.pl-ct-d{ margin-top:6px; font-size:15px; line-height:1.7; color:#56657c; }
.pl-ct-formula{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); border-radius:12px; padding:10px 14px; color:#fff; text-align:left; display:grid; gap:3px; }
.pl-ct-formula b{ font-size:19px; letter-spacing:.2px; } .pl-ct-formula small{ opacity:.85; font-size:13px; }
.pl-ct-badge{ justify-self:start; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:99px; background:#fde68a; color:#7c2d12; }
.pl-ct-pt{ display:grid; grid-template-columns:repeat(9,1fr); gap:3px; padding:0 10px; width:100%; max-width:300px; }
.pl-ct-pt i{ font-style:normal; font-weight:800; font-size:12px; text-align:center; padding:5px 0; border-radius:5px; color:#1a1d29; background:#e5e8ed; }
.pl-ct-pt .c-n{ background:#c8f0e6; } .pl-ct-pt .c-g{ background:#e0d8fb; } .pl-ct-pt .c-a{ background:#ffd9d4; } .pl-ct-pt .c-b{ background:#ffe7c2; }
.pl-ct-pt .c-m{ background:#e9f3b8; } .pl-ct-pt .c-h{ background:#f6d6f2; } .pl-ct-pt .c-p{ background:#d8efe3; }
.pl-ct-calc{ display:flex; align-items:center; gap:10px; color:#fff; font-size:15px; }
.pl-ct-calc span{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); border-radius:10px; padding:9px 12px; } .pl-ct-calc b{ margin-left:4px; font-size:18px; } .pl-ct-calc em{ font-style:normal; font-size:22px; }
.pl-ct-mcq{ display:grid; grid-template-columns:1fr 1fr; gap:6px; width:min(240px,86%); }
.pl-ct-mcq span{ background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:9px; padding:8px 0; text-align:center; font-weight:700; }
.pl-ct-mcq .ok{ background:#16a34a; border-color:#bbf7d0; }
.pl-ct-cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; }
.pl-ct-note{ font-size:14.5px; color:#56657c; display:inline-flex; gap:6px; align-items:center; }
@media (min-width:640px){ .pl-ct-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .pl-ct-grid{ grid-template-columns:repeat(4,1fr); } }
@media (prefers-reduced-motion:reduce){ .pl-ct-card, .px-prac-meter i{ transition:none; } .pl-ct-card:hover{ transform:none; } }

/* ল্যান্ডিং পেজের পর্যায় সারণী (#pl-pt-host) */
.pl-pt-host{ margin-top:18px; text-align:left; }
.pl-pt-host .px-hero{ display:none; }
.pl-pt-host .px-toolbar{ margin-top:0; }

/* পর্যায় সারণী ল্যান্ডিং কার্ডে পুরো প্রস্থ নেয় — পোস্টারের (১৫০০px) সমান */
.pl-pt-host .px-pt{ min-width:0; width:100%; }
@media (max-width:900px){ .pl-pt-host .px-pt{ min-width:900px; } }
@media (min-width:1100px){
  .pl-pt-host .px-pt{ grid-template-rows:22px repeat(8,minmax(66px,auto)) 12px repeat(3,minmax(66px,auto)); gap:4px; }
  .pl-pt-host .px-ptmark, .pl-pt-host .px-ptlbl{ font-size:12px; }
}

/* পর্যায় সারণী ডিটেইল — সেকশন ও টেক্সট ব্লক */
.px-ptd-sec{ margin:16px 0 6px; font-size:14px; font-weight:800; color:var(--px-pt, #0f766e); border-bottom:1px solid var(--border, #dde3ec); padding-bottom:4px; }
.px-ptd-txt{ margin:8px 0; padding:10px 12px; border-radius:10px; background:var(--px-cell-empty, #eef1f5); }
.px-ptd-txt span{ display:block; font-size:12px; color:var(--px-muted, #6b7280); margin-bottom:2px; }
.px-ptd-txt p{ margin:0; font-size:15px; line-height:1.55; }