:root{--bg:#090909;--panel:#121212;--line:#2b2b2b;--text:#fff;--muted:#aaa;--red:#e21d2f}*{box-sizing:border-box}html,body{min-height:100%;overflow-x:hidden;overflow-y:auto}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,sans-serif;-webkit-overflow-scrolling:touch}.wrap{width:min(1100px,92vw);margin:40px auto}.top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}h1{margin:0;font-size:clamp(2rem,5vw,4rem)}a{color:#fff}.card{background:var(--panel);border:1px solid var(--line);padding:24px;margin:16px 0;border-radius:12px}label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin:18px 0 8px;color:#ddd}input,textarea,select{width:100%;background:#0c0c0c;border:1px solid #383838;color:#fff;padding:13px;border-radius:8px}textarea{min-height:110px;resize:vertical}button{border:0;border-radius:8px;background:var(--red);color:#fff;padding:13px 18px;font-weight:700;cursor:pointer}.secondary{background:#252525}.hidden{display:none!important}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.image-row{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;border-top:1px solid var(--line);padding:16px 0}.image-row img{width:120px;height:100px;object-fit:cover;border-radius:8px;background:#222}.status{padding:12px 0;min-height:42px;color:#ddd}.hint{color:var(--muted);line-height:1.5;font-size:.92rem}.danger{color:#ff8c96}@media(max-width:700px){.grid{grid-template-columns:1fr}.image-row{grid-template-columns:80px 1fr}.image-row img{width:80px;height:80px}.top{align-items:flex-start;flex-direction:column}}

#panel{padding-bottom:120px}.save-card{position:relative;z-index:1}.save-card #saveBtn{width:100%;min-height:52px;font-size:1rem}.save-card .status{overflow-wrap:anywhere}@media(max-width:700px){.wrap{margin:20px auto 80px}.card{padding:18px}.save-card{margin-bottom:40px}}

/* Nome e estilo editáveis no portfólio */
.image-row input[type="text"], .image-row select{width:100%;box-sizing:border-box;margin:.35rem 0 .75rem;padding:.75rem;border:1px solid #333;border-radius:8px;background:#111;color:#fff}
.image-row select{cursor:pointer}
html,body{min-height:100%;overflow-y:auto}

.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:10px 0 18px}
.color-field label{display:block;margin-bottom:7px}
.color-control{display:flex;align-items:center;gap:10px;background:#0d0d0d;border:1px solid #333;border-radius:10px;padding:8px}
.color-control input[type=color]{-webkit-appearance:none;appearance:none;width:64px;height:46px;min-width:64px;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer;overflow:hidden}
.color-control input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.color-control input[type=color]::-webkit-color-swatch{border:1px solid #555;border-radius:8px}
.color-control input[type=color]::-moz-color-swatch{border:1px solid #555;border-radius:8px}
.color-hex{font-family:monospace;font-size:14px;color:#eee}
@media(max-width:700px){.color-grid{grid-template-columns:1fr}}

.danger{margin-top:10px;background:#321015!important;border:1px solid #7b2831!important;color:#ffc0c5!important}.new-preview{width:96px;height:96px;border:1px dashed #555;border-radius:10px;display:grid;place-items:center;color:#888;font-weight:700}#newTattoos{margin-top:14px}@media(max-width:700px){#addTattooBtn{width:100%;margin-top:10px}.top{flex-wrap:wrap}}