/* Oriel – v1.3.1 (mobile-first responsive) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
:root{--ink:#0f172a;--muted:#64748b;--line:#e5e7eb;--bg:#fff;}
.is-hidden{display:none !important}
.pd-oriel-app{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;max-width:980px;margin:0 auto;padding:16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.pd-oriel-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.pd-oriel-title h3{margin:0 0 2px 0;font-size:clamp(20px,4vw,28px)}
.pd-sub{margin:0;opacity:.9}
.pd-oriel-stats{display:flex;gap:10px;font-weight:600}
.pd-card{border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:8px;background:#fff}
.pd-qmeta{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.pill{background:var(--ink);color:#fff;border-radius:9999px;padding:4px 10px;font-size:12px}
.pill.alt{background:#334155}
.pd-vignette{background:#f9fafb;border:1px solid var(--line);border-radius:10px;padding:10px;margin:6px 0;font-size:clamp(14px,3.5vw,16px);line-height:1.6}
.pd-stem{font-size:clamp(15px,3.8vw,17px);line-height:1.6;margin:10px 0}
.pd-ui{margin:8px 0 12px 0}
.pd-actions{display:flex;gap:10px;flex-wrap:wrap}
.pd-btn{background:var(--ink);color:#fff;border:none;border-radius:9999px;padding:10px 16px;cursor:pointer;transition:opacity .15s,transform .06s}
.pd-btn:hover{opacity:.95}
.pd-btn:active{transform:translateY(1px)}
.pd-btn-secondary{background:#334155}
.pd-btn-ghost{background:transparent;color:#0f172a;border:1px solid #0f172a}
.pd-btn:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:600px){
  .pd-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,0) 0%, #fff 30%);padding-bottom:12px;z-index:5}
}
.pd-info-banner,.pd-limit-banner{display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:10px;padding:10px;margin:10px 0}
.pd-info-banner{background:#eff6ff;border:1px solid #bfdbfe}
.pd-limit-banner{background:#fff7ed;border:1px solid #fed7aa}
.num-wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.num-input{padding:12px 14px;border:1px solid var(--line);border-radius:10px;max-width:320px;font-size:16px}
.num-units{opacity:.9}
.pick3-list{list-style:none;margin:0;padding:0}
.pick3-item{margin:10px 0}
.pick-row{display:flex;align-items:flex-start;gap:12px}
.pick-row input{transform:scale(1.2);margin-top:3px}
.pick-row span{line-height:1.6;font-size:clamp(14px,3.6vw,16px)}
@media (max-width:520px){ .pick-row input{transform:scale(1.35)} }
.rank5-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rank5-source{list-style:none;margin:0;padding:0;display:grid;gap:8px;border:1px dashed var(--line);border-radius:10px;padding:10px;background:#f9fafb;min-height:220px;max-height:360px;overflow:auto;-webkit-overflow-scrolling:touch}
.rank5-source li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff}
.rank5-source li.selected{outline:2px solid #60a5fa}
.rank5-slots{display:grid;grid-template-columns:1fr;gap:8px}
.rank5-slot{border:1px solid var(--line);border-radius:10px;padding:6px;background:#fff;display:grid;grid-template-columns:36px 1fr;align-items:center}
.slot-label{width:30px;height:30px;border-radius:9999px;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.slot-drop{min-height:48px;border:1px dashed #cbd5e1;border-radius:8px;padding:6px}
.slot-drop li{margin:0}
.pd-feedback{margin-top:10px}
.fb-grid{display:grid;gap:10px}
.dim{opacity:.85}
.exp{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px}
.rank-feedback{border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:8px;background:#f8fafc}
.rf-head{font-weight:600;margin:6px 0}
.rf-row{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:8px}
.rf-row.ok{background:#ecfdf5}
.rf-row.good{background:#ecfdf5}
.rf-row.warn{background:#fff7ed}
.rf-row.bad{background:#fef2f2}
.rf-pos{opacity:.85;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.chip{display:inline-block;background:#eef2ff;border:1px solid #c7d2fe;color:#1e293b;border-radius:9999px;padding:4px 8px;margin:2px 6px 0 0}
.chip.you{background:#dcfce7;border-color:#bbf7d0}
.chip.correct{background:#e0f2fe;border-color:#bae6fd}
.badge{display:inline-block;border-radius:9999px;padding:2px 8px;font-size:12px;border:1px solid #cbd5e1;background:#fff}
.badge.you{background:#dcfce7;border-color:#86efac}
.badge.correct{background:#e0f2fe;border-color:#93c5fd}
.mt8{margin-top:8px}
.sum-stats{display:flex;gap:16px;justify-content:center;margin:12px 0;flex-wrap:wrap}
.sum-box{border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:110px}
.big{font-size:28px;font-weight:700}
.lab{opacity:.85}
.pd-disclaimer{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px;margin-bottom:10px}
.pd-ack{display:flex;align-items:center;gap:8px;margin-top:6px}
@media (max-width:900px){ .rank5-wrap{grid-template-columns:1fr} }
@media (max-width:520px){
  .pd-oriel-app{padding:12px;border-radius:12px}
  .pd-btn{padding:10px 14px}
  .slot-label{width:28px;height:28px}
  .rf-row{flex-direction:column;align-items:flex-start}
}