:root{--bs-primary:#6366f1;--bs-primary-rgb:99,102,241;--bs-link-color:#4f46e5;--bs-link-hover-color:#4338ca;--bs-body-font-family:'Prompt',system-ui,sans-serif;--bs-body-bg:#f5f6fb;--cp-ink:#1e1b4b}
body{font-family:'Prompt',system-ui,sans-serif;background:var(--bs-body-bg);color:#1f2937}
.btn-primary{--bs-btn-bg:#6366f1;--bs-btn-border-color:#6366f1;--bs-btn-hover-bg:#4f46e5;--bs-btn-hover-border-color:#4f46e5;--bs-btn-active-bg:#4338ca;--bs-btn-active-border-color:#4338ca}
.btn-outline-primary{--bs-btn-color:#4f46e5;--bs-btn-border-color:#6366f1;--bs-btn-hover-bg:#6366f1;--bs-btn-hover-border-color:#6366f1}
.btn{border-radius:10px;font-weight:500}
.cp-nav{background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid #e5e7f3}
.cp-logo{display:inline-block;filter:drop-shadow(0 2px 4px rgba(99,102,241,.4))}
.cp-foot{margin-top:40px;padding:22px 0;text-align:center;color:#6b7280;font-size:.9rem;border-top:1px solid #e5e7f3;background:#fff}
.card{border:1px solid #e8eaf5;border-radius:16px;padding:1rem;margin-bottom:1rem;box-shadow:0 1px 3px rgba(30,27,75,.05)}
label{display:block;margin:.7rem 0 .25rem;font-weight:500;font-size:.92rem}
.form-control,.form-select{border-radius:10px}
.frow{display:flex;gap:.75rem;flex-wrap:wrap;align-items:end}.frow>*{flex:1 1 180px}
form.inline{display:inline}
.table{border-radius:12px;overflow:hidden}
.chip{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.76rem;background:#eef0ff;color:#4338ca;text-decoration:none}
.chip.ACTIVE{background:#bbf7d0;color:#14532d}.chip.INACTIVE{background:#fde68a;color:#78350f}.chip.REPLACED{background:#e5e7eb;color:#374151}.chip.UNREGISTERED{background:#bfdbfe;color:#1e3a8a}
code{background:#eef0ff;color:#3730a3;padding:1px 6px;border-radius:6px;word-break:break-all}
/* grid + pin cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pcard{padding:0;overflow:hidden;color:inherit;text-decoration:none;margin:0;transition:transform .15s,box-shadow .15s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(79,70,229,.15)}
.pc-body{padding:12px 14px 14px}.pc-body b{display:block;margin-bottom:6px;font-weight:600}
.thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.thumb.ph{display:flex;align-items:center;justify-content:center;font-size:3rem;background:linear-gradient(135deg,#e0e7ff,#fce7f3)}
/* hero */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:56px 32px;margin-bottom:28px;color:#fff;
 background:radial-gradient(circle at 85% 20%,rgba(244,114,182,.55),transparent 45%),radial-gradient(circle at 10% 90%,rgba(56,189,248,.45),transparent 45%),linear-gradient(135deg,#4f46e5,#7c3aed)}
.hero.has-img{background-size:cover;background-position:center}
.hero.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(49,46,129,.82),rgba(124,58,237,.55))}
.hero>*{position:relative}.hero h1{font-weight:700;font-size:clamp(2rem,5vw,3.2rem);margin-bottom:.4rem}.hero p{font-size:1.1rem;opacity:.92;max-width:560px}
.hero .pin-art{position:absolute;right:4%;top:50%;transform:translateY(-50%);font-size:clamp(5rem,16vw,11rem);opacity:.9;filter:drop-shadow(0 12px 24px rgba(0,0,0,.25));animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-58%)}}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px}
.feat .card{text-align:center;padding:22px 16px;margin:0}.feat .ic{font-size:2.2rem}
.sec-title{font-weight:600;margin:28px 0 14px;font-size:1.25rem}
/* pin page */
.pin img{max-width:100%;border-radius:14px}
.video{position:relative;padding-top:56.25%}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:14px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.sec{border-top:1px solid #e8eaf5;padding-top:12px;margin-top:14px}.sec h3{margin:0 0 4px;font-size:1.1rem;font-weight:600}
.secrow{border:1px dashed #c7cbe6;border-radius:12px;padding:10px;margin-bottom:8px}
@media(max-width:575px){.hero{padding:36px 20px}.hero .pin-art{opacity:.25}}