[hidden] { display: none !important; }
:root{font-family:Inter,system-ui,Arial,sans-serif;color:#33475a;background:#eaf6f7}*{box-sizing:border-box}body{margin:0}header{height:64px;background:white;border-bottom:1px solid #d9ebef;display:flex;align-items:center;justify-content:space-between;padding:0 28px}header strong{font-size:22px;color:#21a8bd}header span{color:#8b80b9;font-weight:500}nav{display:flex;align-items:center;gap:16px}main{max-width:1450px;margin:26px auto;padding:0 18px}.card{background:#fff;border:1px solid #d5e9eb;border-radius:18px;box-shadow:0 10px 30px #3687a00b}.login{max-width:420px;margin:12vh auto;padding:30px}.login h1{font-size:23px}label{display:block;font-size:13px;font-weight:650;margin:16px 0 7px}input{display:block;width:100%;border:1px solid #c8dde1;border-radius:9px;padding:11px;font:inherit;margin-top:6px;background:white}button{border:0;background:#34afc0;color:white;border-radius:9px;padding:10px 15px;cursor:pointer;font-weight:650}button:hover{filter:brightness(.95)}button.secondary{background:#e9f3f4;color:#426575}.buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}#workspace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px}aside{padding:20px;max-height:calc(100vh - 110px);overflow:auto}h2{margin:0 0 16px;font-size:21px}h3{font-size:15px;margin:28px 0 12px}.hint{font-size:12px;color:#78909b;line-height:1.5}.preview{overflow:hidden}.toolbar{padding:12px 20px;display:flex;align-items:center;justify-content:space-between}.toolbar .buttons{margin:0}.gender{background:#dceff1;color:#4e7d86}.gender.active{background:#35afc1;color:white}.poses{display:flex;flex-wrap:wrap;gap:7px;padding:12px 20px;border-block:1px solid #e1eff1}.poses button{background:#e8f2f5;color:#62818a;font-size:12px}.poses button.active{background:#30b3c5;color:white}.stage{min-height:520px;background:#8cdae1;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;background-image:linear-gradient(180deg,#8bd9e0,#b6e9e8)}.stage:before{content:"";position:absolute;inset:0;background:url('/clouds.png') center/cover no-repeat;opacity:.3}.canvas{position:relative;width:360px;height:460px;transform-origin:center;display:flex;align-items:center;justify-content:center}.canvas img{position:absolute;max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto}#outfit{width:auto;height:auto}.stageCaption{position:absolute;bottom:12px;background:#ffffffcf;border-radius:8px;padding:7px 12px;font-size:12px;color:#50717a}.preview>.hint{padding:0 20px 12px}.project,.user{border:1px solid #e0ecef;border-radius:10px;padding:10px;margin:8px 0;font-size:13px}.project .buttons,.user .buttons{margin:7px 0 0}.project button,.user button{padding:6px 10px;font-size:12px}#message{color:#b94b62;font-size:13px}#ownerPanel{border-top:1px solid #e1eff1;margin-top:24px}@media(max-width:850px){#workspace{grid-template-columns:1fr}aside{max-height:none}.stage{min-height:440px}header{padding:0 15px}}

.template-card{display:flex;gap:12px;align-items:center;background:#f4f9fa;border:1px solid #d3e6e9;border-radius:12px;padding:12px;margin-top:12px;overflow-wrap:anywhere}.template-card[hidden]{display:none}.template-thumb{display:grid;place-items:center;flex:0 0 50px;height:50px;border-radius:10px;background:#d8ebee;color:#388a99;font-weight:700}.template-card strong{font-size:13px}.template-card p{margin:5px 0 0}

.template-thumb img{max-width:100%;max-height:100%;object-fit:contain}.previewModes{padding:0 20px 12px;margin-top:0}.previewModes button{font-size:12px}.template-card .template-thumb{overflow:hidden}

.poses button:disabled{opacity:.45;cursor:not-allowed;filter:none}

/* Reference backgrounds are presentation-only: they never modify uploaded PNGs. */
.background-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 20px;border-bottom:1px solid #e1eff1}
.background-controls label{margin:0;font-size:12px}
.background-controls select{border:1px solid #c8dde1;border-radius:7px;background:white;padding:6px;font:inherit;font-size:12px;max-width:100%}
.stage[data-background="dots"]{background-color:#60c0cc;background-image:radial-gradient(circle,rgba(177,246,247,.7) 0 5px,transparent 6px);background-size:34px 34px}
.stage[data-background="dots"]:before,.stage[data-background="plain"]:before,.stage[data-background="pattern"]:before{display:none}
.stage[data-background="plain"]{background:#68cbd3}
.stage[data-background="pattern"]{background:#f5e5e0 url('/pattern_commercial.png') repeat}

.avatar-slot{display:block;padding:8px 10px;border:1px solid #dbeaed;border-radius:8px;margin:7px 0;font-size:12px}.avatar-slot input{padding:6px;margin-top:5px;font-size:11px}

.direction-controls{padding:8px 20px;border-bottom:1px solid #e1eff1}.direction-controls label{display:flex;align-items:center;gap:8px;margin:0;font-size:12px}.direction-controls input{width:auto;margin:0}.direction-controls input[type=checkbox]{accent-color:#34afc0}#avatarAdvanced{margin-top:12px;border:1px solid #e0ecef;border-radius:9px;padding:10px}#avatarAdvanced summary{cursor:pointer;font-size:12px;font-weight:650}#avatarAdvanced[hidden]{display:none}

/* Solid preview backgrounds. Backgrounds do not alter the saved item PNG. */
.stage::before{display:none}
.stage[data-background="white"]{background:#fff}
.stage[data-background="black"]{background:#000}
.stage[data-background="light-gray"]{background:#e6e6e6}
.stage[data-background="dark-gray"]{background:#303030}
.stage[data-background="transparent"]{background-color:#fff;background-image:linear-gradient(45deg,#e3e3e3 25%,transparent 25%),linear-gradient(-45deg,#e3e3e3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e3e3 75%),linear-gradient(-45deg,transparent 75%,#e3e3e3 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}

.stage[data-background="clouds"]{background:#8cdae1;background-image:linear-gradient(180deg,#8bd9e0,#b6e9e8)}
.stage[data-background="clouds"]:before{display:block;opacity:.3;background-image:url("/clouds.png");background-position:center;background-size:cover;background-repeat:no-repeat}
.stage[data-background="white"]:before,.stage[data-background="black"]:before,.stage[data-background="light-gray"]:before,.stage[data-background="dark-gray"]:before,.stage[data-background="transparent"]:before{display:none}