:root{color-scheme:dark;--bg:#101122;--card:#1a1b31;--edge:#383752;--pink:#ff79bd;--cyan:#7be4ee;--muted:#aaa8c5}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top right,#3b2149,transparent 50%),var(--bg);color:#f9f5ff;font:15px system-ui,Segoe UI,sans-serif}header{padding:20px 5%;border-bottom:1px solid var(--edge);display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}h1{font-size:23px;letter-spacing:2px;color:var(--pink);margin:0}h1 small{font-size:12px;letter-spacing:5px;color:var(--cyan)}h2{margin:0 0 15px;font-size:19px}main{max-width:1150px;margin:auto;padding:25px 18px}.card{background:var(--card);border:1px solid var(--edge);padding:22px;border-radius:16px;margin-bottom:18px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.grow{flex:1}.muted,small{color:var(--muted)}label{display:block;color:#d4cbe5;font-size:13px;margin:14px 0 6px}input,textarea,select,button{font:inherit}input:not([type=color]),textarea,select{background:#111326;color:white;border:1px solid #53516b;border-radius:9px;padding:10px;width:100%;min-width:0}textarea{min-height:210px;resize:vertical}input[type=color]{width:60px;height:36px;border:0;background:transparent;vertical-align:middle}input[type=range]{accent-color:var(--pink)}button{background:#302c4e;color:white;border:1px solid #575173;border-radius:9px;padding:10px 14px;cursor:pointer}button:hover{border-color:var(--pink)}button.primary{background:linear-gradient(105deg,#ba418d,#6254b9);border:0}button.danger{background:#652940}button:disabled{opacity:.5;cursor:not-allowed}.hidden{display:none!important}.pill{display:inline-block;border:1px solid var(--edge);padding:6px 9px;border-radius:12px}.list{display:flex;gap:8px;flex-wrap:wrap}.list button.selected{border-color:var(--cyan);color:var(--cyan)}.bar-wrap{position:relative;aspect-ratio:3/1;width:100%;max-width:100%;isolation:isolate}.bar-track{position:absolute;z-index:0;overflow:hidden;border-radius:2px}.bar-fill{height:100%;transition:width .25s}.bar-frame{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.demo{display:flex;align-items:flex-end;gap:12px;padding:15px;min-height:230px;border:1px dashed #514969;border-radius:12px;background:#131426}.demo .obs-img{width:125px;height:150px;object-fit:cover}.demo .obs-name{text-align:center;font-weight:bold}.demo .obs-bar{width:285px}.demo .obs-right{padding-bottom:5px}.demo .obs-hp{text-align:center;margin-top:-3px}.demo .obs-left{display:flex;flex-direction:column;align-items:center;gap:5px}.demo .obs-right{display:flex;flex-direction:column;align-items:center}.code{font-family:monospace;color:var(--cyan);overflow-wrap:anywhere}.error{color:#ff99ae;white-space:pre-wrap}.success{color:#8ce9b6}@media(max-width:760px){.grid{grid-template-columns:1fr}.demo{overflow-x:auto}header{padding:15px}}

.portrait-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0}.portrait-tile{display:flex;flex-direction:column;gap:5px;align-items:center;min-width:0;padding:8px;border:1px solid #504565;background:#15152a;border-radius:10px}.portrait-tile.active{border:2px solid #7be4ee}.portrait-tile span{font-size:12px}.portrait-tile small{font-size:10px}.portrait-thumb{width:100%;height:105px;background:#22233b;border-radius:6px;display:grid;place-items:center;overflow:hidden}.portrait-thumb img{width:100%;height:100%;object-fit:cover}.portrait-thumb.empty{color:#aaa8c5;font-size:30px}@media(max-width:550px){.portrait-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Overlay final: barra à direita na altura do nome, HP abaixo da barra. */
.demo{align-items:flex-end;min-width:0;overflow-x:auto}
.demo .obs-left{flex:0 0 125px}
.demo .obs-right{padding-bottom:0;align-self:flex-end;transform:translateY(-3px)}
.demo .obs-bar{width:285px}
.demo .obs-hp{margin-top:-8px}