/* =====================================================================
   PRISM LAB — ভার্চুয়াল রসায়ন ল্যাবের স্টাইল (assets/prism-lab.css)
   অ্যাপের থিম ভেরিয়েবল ব্যবহার করে; লাইট ও ডার্ক দুই মোডেই মানিয়ে যায়।
   ===================================================================== */
.px-modal-overlay.pl-ov .px-modal{ max-width:1020px; max-height:96vh; }
.px-modal-overlay.pl-ov .px-modal-body{ padding:4px 16px 16px; }
.pl-root{
  --pl-ink:#334155; --pl-mut:#64748b; --pl-card:#ffffff; --pl-base:#cbd5e1; --pl-stand:#94a3b8; --pl-clamp:#64748b;
  --pl-soft:rgba(20,125,235,.07); --pl-line:var(--border,#dbe8f0); --pl-ok:#15803d; --pl-warn:#b45309;
  color:var(--text);
}
[data-theme="dark"] .pl-root{ --pl-ink:#cbd5e1; --pl-mut:#94a3b8; --pl-card:#1b1f28; --pl-base:#334155; --pl-stand:#64748b; --pl-clamp:#94a3b8; --pl-soft:rgba(94,234,212,.08); --pl-ok:#4ade80; --pl-warn:#fbbf24; }
.pl-root h4{ margin:16px 0 8px; font-size:15px; }
.pl-muted{ color:var(--pl-mut); font-size:13.5px; } .pl-muted.center,.center{ text-align:center; }

/* ───────── হাব ───────── */
.px-hero-lab{ background:linear-gradient(120deg,#0e7490,#1e3a8a 60%,#6d28d9); position:relative; overflow:hidden; }
.px-hero-lab::after{ content:""; position:absolute; right:-40px; top:-50px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%); }
.pl-safety{ display:flex; gap:10px; align-items:center; padding:10px 14px; border-radius:12px; background:var(--px-soft,rgba(15,118,110,.08)); border:1px dashed var(--border); font-size:14px; margin-bottom:14px; }
.pl-safety i{ font-size:20px; color:var(--px-chem,#0f766e); flex:none; }
.pl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.pl-card{ text-align:left !important; align-items:flex-start !important; --g1:#0ea5e9; --g2:#2563eb; position:relative; text-align:left; display:flex; flex-direction:column; gap:6px; padding:16px 16px 14px; border-radius:18px; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; overflow:hidden; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; font-family:inherit; }
.pl-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,var(--g1),var(--g2)); }
.pl-card:hover,.pl-card:focus-visible{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.16); border-color:var(--g1); outline:none; }
.pl-card.tone-a{ --g1:#06b6d4; --g2:#2563eb; } .pl-card.tone-b{ --g1:#8b5cf6; --g2:#d946ef; } .pl-card.tone-c{ --g1:#f97316; --g2:#ef4444; }
.pl-card.tone-d{ --g1:#22c55e; --g2:#0ea5e9; } .pl-card.tone-e{ --g1:#eab308; --g2:#f97316; } .pl-card.tone-f{ --g1:#3b82f6; --g2:#6366f1; } .pl-card.tone-g{ --g1:#14b8a6; --g2:#84cc16; }
.pl-card-em{ font-size:34px; line-height:1; width:56px; height:56px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 22%,transparent),color-mix(in srgb,var(--g2) 22%,transparent)); }
.pl-card-tag{ font-size:12px; color:var(--text-sec,#607080); letter-spacing:.2px; } .pl-card-tag b{ color:var(--pl-ok,#15803d); }
.pl-card strong{ font-size:17px; }
.pl-card small{ font-size:13.5px; color:var(--text-sec,#607080); line-height:1.5; }
.pl-card-go{ margin-top:auto; padding-top:8px; font-size:14px; font-weight:700; color:var(--g2); display:flex; align-items:center; gap:6px; }

/* ───────── সাধারণ কম্পোনেন্ট ───────── */
.pl-setup{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:10px 0; }
.pl-setup.two{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } .pl-setup.three{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.pl-setup label{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--pl-mut); }
.pl-setup label b{ color:var(--text); font-weight:700; margin-left:4px; }
.pl-root select,.pl-root input[type="text"]{ width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--pl-line); background:var(--card); color:var(--text); font-size:15px; font-family:inherit; }
.pl-root input[type="range"]{ width:100%; accent-color:#147DEB; }
.pl-kv{ background:var(--pl-soft); border:1px solid var(--pl-line); border-radius:12px; padding:8px 12px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.pl-kv span{ font-size:12.5px; color:var(--pl-mut); } .pl-kv b{ font-size:16px; overflow-wrap:anywhere; }
.pl-kv.big b{ font-size:24px; font-variant-numeric:tabular-nums; } .pl-kv.big b small{ font-size:13px; font-weight:500; color:var(--pl-mut); }
.pl-kv.wide{ grid-column:1/-1; }
.pl-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin:10px 0; }
.pl-note{ padding:9px 12px; border-radius:12px; font-size:14px; line-height:1.55; background:var(--pl-soft); border:1px solid var(--pl-line); margin:8px 0; }
.pl-note.ok{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.4); } .pl-note.warn{ background:rgba(245,158,11,.13); border-color:rgba(245,158,11,.45); }
.pl-b{ border:1px solid var(--pl-line); background:var(--card); color:var(--text); border-radius:12px; padding:10px 14px; font-size:15px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:inherit; transition:transform .1s ease,box-shadow .15s ease; min-height:44px; }
.pl-b small{ font-size:11.5px; font-weight:400; color:var(--pl-mut); } .pl-b:active{ transform:scale(.96); }
.pl-b.main{ background:linear-gradient(135deg,#147DEB,#0b5ed7); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(20,125,235,.35); }
.pl-b.ghost{ background:transparent; } .pl-b:hover{ box-shadow:0 4px 14px rgba(15,23,42,.14); }
.pl-btns{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 0; } .pl-btns.two{ grid-template-columns:1fr 1fr; }
.pl-seg{ display:inline-flex; gap:3px; padding:3px; border-radius:12px; background:var(--pl-soft); max-width:100%; overflow-x:auto; margin-bottom:10px; } .pl-seg.wrap{ flex-wrap:wrap; }
.pl-seg button{ border:none; background:transparent; color:var(--text); padding:7px 13px; border-radius:9px; font-size:14px; cursor:pointer; white-space:nowrap; font-family:inherit; }
.pl-seg button.on{ background:var(--card); font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.15); color:#147DEB; }
.pl-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.pl-chip{ border:1px solid var(--pl-line); background:var(--card); color:var(--text); border-radius:20px; padding:7px 12px; font-size:14px; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:6px; }
.pl-chip.used{ background:var(--pl-soft); border-style:dashed; } .pl-chip.on{ background:#147DEB; color:#fff; border-color:#147DEB; } .pl-chip small{ color:var(--pl-mut); } .pl-chip.on small{ color:#e0f0ff; }
.pl-dot{ width:12px; height:12px; border-radius:50%; display:inline-block; box-shadow:0 0 8px currentColor; }
.pl-table{ width:100%; border-collapse:collapse; font-size:14px; margin:8px 0; }
.pl-table th,.pl-table td{ border-bottom:1px solid var(--pl-line); padding:7px 6px; text-align:center; } .pl-table th{ font-size:12.5px; color:var(--pl-mut); font-weight:600; }
.pl-x{ border:none; background:transparent; color:var(--pl-mut); cursor:pointer; font-size:14px; padding:4px 8px; }
.pl-log{ margin:6px 0 12px; padding-left:22px; font-size:14px; line-height:1.7; }
.pl-theory{ margin:12px 0 4px; border:1px solid var(--pl-line); border-radius:12px; padding:8px 12px; background:var(--pl-soft); font-size:14px; line-height:1.7; } .pl-theory summary{ cursor:pointer; font-weight:700; }
.pl-check{ display:flex; gap:8px; align-items:center; font-size:14.5px; margin:6px 0; }
.pl-root canvas{ width:100%; height:auto; border:1px solid var(--pl-line); border-radius:14px; background:var(--card); display:block; margin:8px 0; }

/* ───────── টাইট্রেশন ───────── */
.pl-tit{ display:grid; grid-template-columns:minmax(230px,300px) 1fr; gap:18px; align-items:start; }
.pl-tit-left{ position:sticky; top:0; max-height:calc(96vh - 90px); overflow:auto; padding-bottom:4px; }
.pl-apparatus{ border-radius:20px; padding:10px 6px 6px; background:linear-gradient(180deg,rgba(20,125,235,.07),rgba(20,125,235,.02)); border:1px solid var(--pl-line); }
.pl-tit-svg{ width:100%; height:auto; max-height:44vh; display:block; margin:0 auto; }
.pl-burette-fill{ height:6px; border-radius:6px; background:var(--pl-soft); margin:6px 10px 4px; overflow:hidden; } .pl-burette-fill span{ display:block; height:100%; width:0; background:linear-gradient(90deg,#38bdf8,#2563eb); transition:width .3s; }
.pl-dash{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.pl-colname{ display:flex; align-items:center; gap:10px; } .pl-colname i{ width:26px; height:26px; border-radius:50%; border:2px solid var(--pl-ink); display:inline-block; box-shadow:inset 0 0 6px rgba(0,0,0,.18); transition:background .35s; }
.pl-drop{ fill:rgba(90,150,215,.85); animation:pl-fall .5s cubic-bezier(.4,0,1,1) forwards; }
@keyframes pl-fall{ from{ transform:translateY(0); opacity:1; } 85%{ opacity:1; } to{ transform:translateY(64px); opacity:0; } }
.pl-ripple{ animation:pl-ripple .5s ease; } @keyframes pl-ripple{ 0%{ transform:translateY(0);} 30%{ transform:translateY(2px);} 100%{ transform:translateY(0);} }
.pl-swirl{ animation:pl-swirl .9s ease-in-out; } @keyframes pl-swirl{ 0%,100%{ transform:rotate(0);} 20%{ transform:rotate(5deg) translateX(3px);} 40%{ transform:rotate(-5deg) translateX(-3px);} 60%{ transform:rotate(4deg);} 80%{ transform:rotate(-3deg);} }
.pl-flash{ animation:pl-flash 1.1s ease 2; } @keyframes pl-flash{ 50%{ filter:drop-shadow(0 0 14px rgba(236,72,153,.9)); } }
.pl-formula{ border:1px solid var(--pl-line); background:var(--pl-soft); border-radius:14px; padding:12px; margin:10px 0; overflow-x:auto; }
.pl-eq{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; font-size:16px; margin:4px 0; } .pl-eq.sm{ font-size:15px; }
.pl-fr{ display:inline-flex; flex-direction:column; align-items:center; } .pl-fr i{ font-style:normal; padding:2px 8px; } .pl-fr i:first-child{ border-bottom:1.5px solid currentColor; }
.pl-big{ font-size:20px; color:#147DEB; }
@media (max-width:760px){
  .pl-tit{ grid-template-columns:1fr; } .pl-tit-left{ position:relative; }
  .pl-tit-svg{ max-height:340px; } .pl-tit-left{ max-height:none; overflow:visible; } .pl-btns{ grid-template-columns:1fr 1fr; }
}

/* ───────── লবণ বিশ্লেষণ ───────── */
.pl-salt{ display:grid; grid-template-columns:200px 1fr; gap:18px; } .pl-salt-l{ text-align:center; }
.pl-tubebox{ width:150px; margin:0 auto; border-radius:18px; background:linear-gradient(180deg,rgba(20,125,235,.06),transparent); padding:8px; } .pl-tube-svg{ width:100%; height:auto; display:block; }
.pl-pour{ animation:pl-pour .55s ease; } @keyframes pl-pour{ 0%{ transform:rotate(-8deg);} 50%{ transform:rotate(6deg) scale(1.03);} 100%{ transform:none;} }
.pl-liqfill{ transition:fill .4s; }
.pl-bub{ fill:rgba(255,255,255,.85); stroke:rgba(0,0,0,.25); stroke-width:.6; animation:pl-bub 1.6s ease-in infinite; } @keyframes pl-bub{ from{ transform:translateY(0); opacity:.95;} to{ transform:translateY(-90px); opacity:0;} }
.pl-guessrow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0; } .pl-guessrow select{ flex:1 1 180px; }
@media (max-width:640px){ .pl-salt{ grid-template-columns:1fr; } }

/* ───────── শিখা ───────── */
.pl-flame{ display:grid; grid-template-columns:minmax(200px,280px) 1fr; gap:18px; align-items:start; }
.pl-flbox{ background:radial-gradient(circle at 50% 30%,#1e293b,#0b1220); border-radius:20px; padding:8px; } .pl-flame-svg{ width:100%; height:auto; display:block; }
.pl-flame-path,.pl-flame{ } .pl-flame-svg .pl-flame{ transform-origin:120px 232px; animation:pl-flick .45s ease-in-out infinite alternate; }
@keyframes pl-flick{ from{ transform:scale(1,1) skewX(-1.5deg);} to{ transform:scale(.97,1.05) skewX(1.5deg);} }
.pl-wire{ transition:transform .5s; transform:translate(30px,-30px); } .pl-wire.dip{ transform:none; }
.pl-glow{ transition:fill .4s; }
@media (max-width:640px){ .pl-flame{ grid-template-columns:1fr; } }

/* ───────── pH ───────── */
.pl-beaker{ position:relative; width:150px; height:150px; margin:6px auto 10px; border:3px solid var(--pl-ink); border-top:none; border-radius:0 0 22px 22px; overflow:hidden; background:var(--card); }
.pl-beaker-liq{ position:absolute; inset:34px 0 0 0; transition:background .35s; } .pl-beaker span{ position:absolute; inset:34px 0 0 0; display:grid; place-items:center; font-size:34px; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45); }
.pl-phmeta{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pl-swatches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin:10px 0; } .pl-swatches div{ display:flex; align-items:center; gap:8px; font-size:13.5px; } .pl-swatches i{ width:26px; height:26px; border-radius:8px; border:1px solid var(--pl-line); flex:none; }
.pl-uni{ position:relative; margin:14px 0 4px; }
.pl-unibar{ height:20px; border-radius:10px; background:linear-gradient(90deg,#dc1c24 0%,#f56e24 21%,#fac528 36%,#e1e434 43%,#48aa54 50%,#209696 57%,#286ccd 64%,#4e48b2 71%,#8232a5 86%,#581c80 100%); }
.pl-mark{ position:absolute; top:-6px; width:6px; height:32px; margin-left:-3px; border-radius:3px; background:var(--text); box-shadow:0 0 0 2px var(--card); transition:left .2s; }
.pl-uniticks{ display:flex; justify-content:space-between; font-size:12px; color:var(--pl-mut); padding:4px 2px 0; }

/* ───────── কোষ / গ্যাস / হার ───────── */
.pl-cell-svg{ width:100%; max-width:560px; margin:0 auto; display:block; } .pl-needle{ transition:all .5s; }
.pl-flow{ animation:pl-dash .8s linear infinite; } @keyframes pl-dash{ to{ stroke-dashoffset:-22; } }
.pl-run{ display:inline-flex; align-items:center; gap:4px; border:2px solid; border-radius:20px; padding:3px 6px 3px 12px; font-size:13px; margin:0 6px 6px 0; } .pl-run button{ border:none; background:transparent; color:var(--pl-mut); cursor:pointer; }
@media (prefers-reduced-motion:reduce){ .pl-root *,.pl-flame-svg *{ animation:none !important; transition:none !important; } }

/* অ্যাপের গ্লোবাল button:hover/active স্টাইল ওভাররাইড */
.pl-root .pl-b,.pl-root .pl-chip,.pl-root .pl-seg button{ -webkit-tap-highlight-color:transparent; }
.pl-root .pl-b:hover,.pl-root .pl-b:focus-visible{ background:var(--card); color:var(--text); }
.pl-root .pl-b.main,.pl-root .pl-b.main:hover,.pl-root .pl-b.main:focus-visible,.pl-root .pl-b.main:active{ background:linear-gradient(135deg,#147DEB,#0b5ed7); color:#fff; }
.pl-root .pl-b.main:hover{ filter:brightness(1.07); }
.pl-root .pl-b.ghost:hover{ background:var(--pl-soft); }
.pl-root .pl-chip:hover{ background:var(--pl-soft); } .pl-root .pl-chip.on,.pl-root .pl-chip.on:hover{ background:#147DEB; color:#fff; }
.pl-root .pl-seg button:hover{ background:transparent; } .pl-root .pl-seg button.on,.pl-root .pl-seg button.on:hover{ background:var(--card); color:#147DEB; }
.pl-dash{ grid-template-columns:1fr 1fr; } .pl-tit-left .pl-btns{ margin:8px 0 2px; } .pl-tit-left .pl-kv.big b{ font-size:21px; }

.pl-root h4{ color:var(--text) !important; background:none !important; -webkit-text-fill-color:currentColor; }
.pl-check{ display:flex !important; flex-direction:row; justify-content:flex-start; } .pl-check input{ width:auto !important; flex:none; margin:0; }
.pl-tit-left .pl-btns{ grid-template-columns:1fr 1fr; }
.pl-tit-left .pl-b{ min-height:46px; }

/* prism-lab2 */
.pl-eqrow{display:grid;grid-template-columns:54px 1fr 92px;gap:8px;align-items:center;margin:6px 0;font-size:13px}
.pl-eqbar{position:relative;height:14px;border-radius:7px;background:var(--pl-soft)}
.pl-eqbar i{display:block;height:100%;border-radius:7px;transition:width .5s}
.pl-eqbar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:#64748b;text-decoration:none}