.sb-portrait { background:#0b211e; border:1px solid #456458; border-radius:16px; color:#eef5ef; margin:2rem 0; padding:clamp(1rem,3vw,2rem); font-family:inherit; }
.sb-portrait [hidden] { display:none !important; }
.sb-portrait h2,.sb-portrait h3 { color:#f4ead6; margin-top:.3rem; }
.sb-portrait__eyebrow { color:#9ce7c6; text-transform:uppercase; letter-spacing:.13em; font-size:.8rem; }
.sb-portrait a { color:#a5ead0; text-decoration:underline; }
.sb-portrait form { margin:1.2rem 0; padding:1rem 0; border-top:1px solid #38534b; }
.sb-portrait label { display:grid; gap:.45rem; margin:.8rem 0; min-width:0; }
.sb-portrait input:not([type=checkbox]),.sb-portrait select,.sb-portrait textarea { box-sizing:border-box; width:100%; max-width:100%; padding:.7rem; border:1px solid #57736a; border-radius:6px; background:#071813; color:#f4f7ef; font:inherit; }
.sb-portrait button { cursor:pointer; padding:.7rem 1rem; border:1px solid #b5dfcb; background:#a5e7c7; color:#092319; font:inherit; font-weight:700; border-radius:7px; margin:.4rem .3rem .4rem 0; min-height:44px; }
.sb-portrait button:disabled { opacity:.5; cursor:wait; }
.sb-portrait :focus-visible { outline:3px solid #f2bb61; outline-offset:3px; }
.sb-portrait__fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:.2rem 1rem; }
.sb-portrait .sb-portrait__check { display:flex; align-items:flex-start; gap:.65rem; line-height:1.5; }
.sb-portrait__check input { width:1.15rem; height:1.15rem; flex:none; margin-top:.25rem; }
.sb-portrait__hint { color:#bbccc4; font-size:.9rem; font-weight:400; }
.sb-portrait__gallery { display:flex; flex-wrap:wrap; gap:1.5rem; }
.sb-portrait__gallery figure { flex:1 1 240px; max-width:440px; margin:0; }
.sb-portrait__gallery img { width:100%; height:auto; aspect-ratio:1; border-radius:12px; display:block; }
.sb-portrait figcaption { padding:.6rem 0; }
.sb-portrait summary { cursor:pointer; padding:.6rem 0; font-weight:700; }
.sb-portrait__status { border-left:3px solid #e0b05d; padding:.7rem 1rem; background:#102f27; min-height:1.5em; }
.sb-profile-kit [data-public-portrait] { width:160px; max-width:100%; height:auto; border-radius:12px; margin:1rem 0; }

.sb-portrait__editor { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:2rem; align-items:start; }
.sb-portrait__editor > form { min-width:0; margin-top:.5rem; }
.sb-portrait__fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sb-portrait__step { display:inline-grid; place-items:center; width:1.8rem; height:1.8rem; margin-right:.35rem; border:1px solid #c6a763; border-radius:50%; font-size:1rem; color:#f1ce83; }
.sb-portrait__source { margin:1rem 0; }
.sb-portrait__source img { max-width:100%; max-height:260px; border-radius:10px; object-fit:contain; }
.sb-portrait__source figcaption { overflow-wrap:anywhere; font-size:.85rem; color:#c6d6cd; }
.sb-portrait__create { border-top:1px solid #38534b; margin-top:1.4rem; padding-top:1.2rem; }
.sb-portrait [data-portrait-generate] { width:100%; background:#e0b868; border-color:#e0b868; }
.sb-portrait [data-portrait-surprise] { background:transparent; color:#b8eed4; }
.sb-portrait [data-portrait-surprise-status]:empty { display:none; }
.sb-portrait__visibility { border-top:1px solid #38534b; margin-top:1rem; padding-top:.6rem; }
.sb-portrait__visibility summary span { display:block; color:#bbccc4; font-size:.85rem; font-weight:400; }
.sb-portrait { scroll-margin-top:6rem; }
@media(max-width:700px) { .sb-portrait__editor { grid-template-columns:1fr; gap:0; } .sb-portrait__fields { grid-template-columns:1fr; } }

/* Avoid native light select chrome hiding the light text in Safari/WebKit. */
.sb-portrait select { appearance:none; -webkit-appearance:none; padding-right:2rem; background-color:#071813; background-image:linear-gradient(45deg,transparent 50%,#c4e4d5 50%),linear-gradient(135deg,#c4e4d5 50%,transparent 50%); background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%; background-size:5px 5px; background-repeat:no-repeat; }