/* ==========================================================================
   Peptide Reconstitution Calculator – v1.2.0
   Base + 10 advanced design presets
   ========================================================================== */

/* ---------- Base structure ---------- */
.pce-wrap{box-sizing:border-box;width:100%;margin:0 auto;color:var(--pce-text);font-family:inherit;padding:16px;position:relative}
.pce-wrap *,.pce-wrap *::before,.pce-wrap *::after{box-sizing:border-box}
.pce-card{background:var(--pce-card);border:1px solid var(--pce-border);border-radius:40px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.15);transition:transform .35s ease, box-shadow .35s ease}
.pce-card:hover{transform:translateY(-2px)}
.pce-section{padding:48px}
.pce-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;border-bottom:1px solid var(--pce-border)}
@media(max-width:768px){.pce-inputs{grid-template-columns:1fr;gap:32px}.pce-section{padding:24px}}
.pce-field{display:flex;flex-direction:column;gap:14px}
.pce-field-title{font-size:1.15rem;font-weight:800;color:var(--pce-primary-dark);text-align:center;text-transform:uppercase;letter-spacing:.02em;margin:0}
.pce-presets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pce-preset{min-width:60px;padding:7px 14px;border-radius:9999px;font-size:.75rem;font-weight:700;border:1px solid var(--pce-border);background:var(--pce-card);color:var(--pce-btn-text);cursor:pointer;transition:transform .18s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease}
.pce-preset:hover{border-color:var(--pce-primary);transform:translateY(-1px)}
.pce-preset.is-active{background:var(--pce-primary);color:var(--pce-btn-active-text);border-color:var(--pce-primary);box-shadow:0 6px 18px -6px var(--pce-primary)}
.pce-input{width:100%;text-align:center;padding:14px;background:var(--pce-input);border:1px solid var(--pce-border);border-radius:14px;font-weight:700;color:var(--pce-text);font-size:1.05rem;outline:none;transition:border-color .2s ease, box-shadow .2s ease}
.pce-input:focus{border-color:var(--pce-primary);box-shadow:0 0 0 4px color-mix(in srgb, var(--pce-primary) 18%, transparent)}
.pce-results{background:var(--pce-page);text-align:center}
.pce-results-title{font-size:1.875rem;font-weight:800;margin:0 0 8px;letter-spacing:-.01em}
.pce-subtitle{color:var(--pce-primary);font-weight:700;text-transform:uppercase;letter-spacing:.15em;margin:0 0 32px;font-size:.875rem}
.pce-syringe-wrap{max-width:640px;margin:0 auto;padding:24px 0}
.pce-syringe{position:relative;height:96px;display:flex;align-items:center;padding-left:60px}
.pce-plunger-rod{position:absolute;left:0;top:50%;transform:translateY(-50%);width:40px;height:4px;background:#94a3b8}
.pce-plunger-grip{position:absolute;left:36px;top:50%;transform:translateY(-50%);width:24px;height:40px;background:#e2e8f0;border:2px solid #cbd5e1;border-radius:2px;z-index:2}
.pce-barrel{position:relative;width:100%;height:80px;background:#fff;border:4px solid var(--pce-syringe-border);border-radius:0 8px 8px 0;overflow:hidden;display:flex;align-items:center;box-shadow:inset 0 2px 4px rgba(0,0,0,.06)}
.pce-ticks{position:absolute;inset:0;display:flex;justify-content:space-between;padding:6px 8px 6px;pointer-events:none;z-index:5}
.pce-tick{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.pce-tick span{display:block;width:2px;height:14px;background:#475569;margin-bottom:2px;opacity:.85}
.pce-tick em{font-size:12px;font-style:normal;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#0f172a;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.pce-fill{height:100%;background:var(--pce-syringe-fill);width:0;transition:width .55s cubic-bezier(.2,.8,.2,1)}
.pce-plunger{position:absolute;top:0;left:0;height:100%;width:14px;background:var(--pce-plunger);z-index:4;transition:left .55s cubic-bezier(.2,.8,.2,1)}
.pce-volume{margin-top:48px}
.pce-volume-label{font-size:.75rem;font-weight:700;color:var(--pce-muted);text-transform:uppercase;letter-spacing:.15em;margin:0 0 4px}
.pce-draw-label{font-size:1.25rem;font-weight:800;color:var(--pce-primary);text-transform:uppercase}
.pce-units{font-size:2.4rem;color:var(--pce-text);margin:0 8px;font-weight:800}
.pce-extra{margin-top:32px;display:flex;flex-direction:column;gap:8px;font-size:.875rem;font-weight:700;color:var(--pce-muted);text-transform:uppercase;letter-spacing:.15em}

/* ==========================================================================
   STYLE PRESETS — 10 distinctive designs
   ========================================================================== */

/* ---------- 1. Royal Purple (default, refined gradient) ---------- */
.pce-wrap.pce-style-1{--pce-primary:#9333ea;--pce-primary-dark:#6b21a8;--pce-card:#ffffff;--pce-page:#faf5ff;--pce-text:#1e1b4b;--pce-muted:#94a3b8;--pce-border:#ede9fe;--pce-input:#faf5ff;--pce-btn-text:#6d28d9;--pce-btn-active-text:#ffffff;--pce-syringe-fill:linear-gradient(90deg,#a855f7,#7c3aed);--pce-syringe-border:#3b0764;--pce-plunger:#3b0764}
.pce-wrap.pce-style-1 .pce-card{box-shadow:0 30px 60px -20px rgba(124,58,237,.35)}
.pce-wrap.pce-style-1 .pce-fill{background:linear-gradient(90deg,#a855f7,#7c3aed)}
.pce-wrap.pce-style-1 .pce-results{background:linear-gradient(180deg,#faf5ff,#f3e8ff)}

/* ---------- 2. Ocean Blue (deep gradient + reflective barrel) ---------- */
.pce-wrap.pce-style-2{--pce-primary:#2563eb;--pce-primary-dark:#1e3a8a;--pce-card:#ffffff;--pce-page:#eff6ff;--pce-text:#0f172a;--pce-muted:#64748b;--pce-border:#bfdbfe;--pce-input:#f0f9ff;--pce-btn-text:#1d4ed8;--pce-btn-active-text:#ffffff;--pce-syringe-fill:#2563eb;--pce-syringe-border:#1e3a8a;--pce-plunger:#1e3a8a}
.pce-wrap.pce-style-2 .pce-fill{background:linear-gradient(90deg,#60a5fa,#1d4ed8)}
.pce-wrap.pce-style-2 .pce-card{box-shadow:0 30px 60px -20px rgba(29,78,216,.4)}
.pce-wrap.pce-style-2 .pce-results{background:linear-gradient(180deg,#eff6ff,#dbeafe)}

/* ---------- 3. Emerald Green ---------- */
.pce-wrap.pce-style-3{--pce-primary:#059669;--pce-primary-dark:#064e3b;--pce-card:#ffffff;--pce-page:#ecfdf5;--pce-text:#064e3b;--pce-muted:#6b7280;--pce-border:#a7f3d0;--pce-input:#f0fdf4;--pce-btn-text:#047857;--pce-btn-active-text:#ffffff;--pce-syringe-fill:#10b981;--pce-syringe-border:#064e3b;--pce-plunger:#064e3b}
.pce-wrap.pce-style-3 .pce-fill{background:linear-gradient(90deg,#34d399,#047857)}
.pce-wrap.pce-style-3 .pce-card{box-shadow:0 30px 60px -20px rgba(5,150,105,.35)}
.pce-wrap.pce-style-3 .pce-results{background:linear-gradient(180deg,#ecfdf5,#d1fae5)}

/* ---------- 4. Sunset Orange ---------- */
.pce-wrap.pce-style-4{--pce-primary:#ea580c;--pce-primary-dark:#9a3412;--pce-card:#fffaf5;--pce-page:#fff7ed;--pce-text:#431407;--pce-muted:#a8a29e;--pce-border:#fed7aa;--pce-input:#fffbf5;--pce-btn-text:#c2410c;--pce-btn-active-text:#ffffff;--pce-syringe-fill:#f97316;--pce-syringe-border:#9a3412;--pce-plunger:#9a3412}
.pce-wrap.pce-style-4 .pce-fill{background:linear-gradient(90deg,#fbbf24,#ea580c)}
.pce-wrap.pce-style-4 .pce-card{box-shadow:0 30px 60px -20px rgba(234,88,12,.4)}
.pce-wrap.pce-style-4 .pce-results{background:linear-gradient(180deg,#fff7ed,#ffedd5)}

/* ---------- 5. Rose Pink ---------- */
.pce-wrap.pce-style-5{--pce-primary:#e11d48;--pce-primary-dark:#9f1239;--pce-card:#ffffff;--pce-page:#fff1f2;--pce-text:#881337;--pce-muted:#9ca3af;--pce-border:#fecdd3;--pce-input:#fff5f6;--pce-btn-text:#be123c;--pce-btn-active-text:#ffffff;--pce-syringe-fill:#f43f5e;--pce-syringe-border:#9f1239;--pce-plunger:#9f1239}
.pce-wrap.pce-style-5 .pce-fill{background:linear-gradient(90deg,#fb7185,#be123c)}
.pce-wrap.pce-style-5 .pce-card{box-shadow:0 30px 60px -20px rgba(225,29,72,.35)}
.pce-wrap.pce-style-5 .pce-results{background:linear-gradient(180deg,#fff1f2,#ffe4e6)}

/* ---------- 6. Midnight Dark ---------- */
.pce-wrap.pce-style-6{--pce-primary:#a78bfa;--pce-primary-dark:#c4b5fd;--pce-card:#1e293b;--pce-page:#0f172a;--pce-text:#f1f5f9;--pce-muted:#94a3b8;--pce-border:#334155;--pce-input:#0f172a;--pce-btn-text:#cbd5e1;--pce-btn-active-text:#0f172a;--pce-syringe-fill:#a78bfa;--pce-syringe-border:#a78bfa;--pce-plunger:#f1f5f9}
.pce-wrap.pce-style-6 .pce-card{box-shadow:0 30px 60px -20px rgba(167,139,250,.35)}
.pce-wrap.pce-style-6 .pce-fill{background:linear-gradient(90deg,#c4b5fd,#7c3aed)}
.pce-wrap.pce-style-6 .pce-barrel{background:#0f172a}
.pce-wrap.pce-style-6 .pce-tick span{background:#475569}
.pce-wrap.pce-style-6 .pce-tick em{color:#94a3b8}
.pce-wrap.pce-style-6 .pce-plunger-rod{background:#475569}
.pce-wrap.pce-style-6 .pce-plunger-grip{background:#334155;border-color:#475569}
.pce-wrap.pce-style-6 .pce-results{background:linear-gradient(180deg,#0f172a,#1e293b)}

/* ---------- 7. Cyber Neon (glow + grid) ---------- */
.pce-wrap.pce-style-7{--pce-primary:#22d3ee;--pce-primary-dark:#06b6d4;--pce-card:#0a0f1e;--pce-page:#020617;--pce-text:#e0f2fe;--pce-muted:#67e8f9;--pce-border:#155e75;--pce-input:#0c1424;--pce-btn-text:#67e8f9;--pce-btn-active-text:#020617;--pce-syringe-fill:#22d3ee;--pce-syringe-border:#22d3ee;--pce-plunger:#22d3ee}
.pce-wrap.pce-style-7 .pce-card{box-shadow:0 0 60px rgba(34,211,238,.35),0 0 20px rgba(34,211,238,.2);border-color:#155e75}
.pce-wrap.pce-style-7 .pce-fill{background:linear-gradient(90deg,#67e8f9,#22d3ee,#a855f7);box-shadow:0 0 18px #22d3ee}
.pce-wrap.pce-style-7 .pce-barrel{background:#020617;box-shadow:inset 0 0 18px rgba(34,211,238,.25)}
.pce-wrap.pce-style-7 .pce-tick span{background:#155e75}
.pce-wrap.pce-style-7 .pce-tick em{color:#67e8f9}
.pce-wrap.pce-style-7 .pce-draw-label{text-shadow:0 0 14px rgba(34,211,238,.7)}
.pce-wrap.pce-style-7 .pce-units{text-shadow:0 0 18px rgba(34,211,238,.6)}
.pce-wrap.pce-style-7 .pce-plunger-rod{background:#155e75}
.pce-wrap.pce-style-7 .pce-plunger-grip{background:#0c1424;border-color:#22d3ee}
.pce-wrap.pce-style-7 .pce-preset.is-active{box-shadow:0 0 16px rgba(34,211,238,.6)}
.pce-wrap.pce-style-7 .pce-results{background:radial-gradient(ellipse at top,#0c1f3a 0%,#020617 70%)}

/* ---------- 8. Minimal Mono (sharp, editorial) ---------- */
.pce-wrap.pce-style-8{--pce-primary:#111827;--pce-primary-dark:#000000;--pce-card:#ffffff;--pce-page:#fafafa;--pce-text:#111827;--pce-muted:#9ca3af;--pce-border:#e5e7eb;--pce-input:#ffffff;--pce-btn-text:#6b7280;--pce-btn-active-text:#ffffff;--pce-syringe-fill:#111827;--pce-syringe-border:#111827;--pce-plunger:#111827}
.pce-wrap.pce-style-8 .pce-card{border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid #111827}
.pce-wrap.pce-style-8 .pce-preset{border-radius:4px}
.pce-wrap.pce-style-8 .pce-input{border-radius:4px}
.pce-wrap.pce-style-8 .pce-fill{background:#111827}

/* ---------- 9. Warm Gold (luxury) ---------- */
.pce-wrap.pce-style-9{--pce-primary:#ca8a04;--pce-primary-dark:#713f12;--pce-card:#fffdf5;--pce-page:#fefce8;--pce-text:#422006;--pce-muted:#a8a29e;--pce-border:#fef08a;--pce-input:#fffdf0;--pce-btn-text:#a16207;--pce-btn-active-text:#ffffff;--pce-syringe-fill:#eab308;--pce-syringe-border:#713f12;--pce-plunger:#713f12}
.pce-wrap.pce-style-9 .pce-fill{background:linear-gradient(90deg,#fde047,#ca8a04,#a16207)}
.pce-wrap.pce-style-9 .pce-card{box-shadow:0 30px 60px -20px rgba(202,138,4,.4);border:1px solid #facc15}
.pce-wrap.pce-style-9 .pce-results{background:linear-gradient(180deg,#fefce8,#fef9c3)}
.pce-wrap.pce-style-9 .pce-results-title{background:linear-gradient(90deg,#a16207,#ca8a04,#713f12);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 10. Glassmorphism (frosted glass over gradient) ---------- */
.pce-wrap.pce-style-10{--pce-primary:#8b5cf6;--pce-primary-dark:#5b21b6;--pce-card:rgba(255,255,255,.45);--pce-page:rgba(255,255,255,.25);--pce-text:#1e1b4b;--pce-muted:#6d28d9;--pce-border:rgba(255,255,255,.6);--pce-input:rgba(255,255,255,.7);--pce-btn-text:#5b21b6;--pce-btn-active-text:#ffffff;--pce-syringe-fill:rgba(139,92,246,.65);--pce-syringe-border:#5b21b6;--pce-plunger:#5b21b6;background:linear-gradient(135deg,#a5b4fc 0%,#f0abfc 50%,#fbcfe8 100%);border-radius:40px;padding:40px}
.pce-wrap.pce-style-10 .pce-card{backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.7);box-shadow:0 8px 32px rgba(91,33,182,.22)}
.pce-wrap.pce-style-10 .pce-fill{background:linear-gradient(90deg,#c4b5fd,#8b5cf6,#ec4899)}
.pce-wrap.pce-style-10 .pce-barrel{background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pce-wrap.pce-style-10 .pce-results{background:rgba(255,255,255,.25)}