:root{--bg:#080810;--panel:#11111d;--panel2:#171728;--text:#faf9ff;--muted:#aaa9bd;--cyan:#10e6e2;--pink:#ff2cce;--gold:#ffd43a;--line:rgba(255,255,255,.14)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 0,rgba(16,230,226,.12),transparent 25%),radial-gradient(circle at 95% 45%,rgba(255,44,206,.1),transparent 30%),var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif}button,input{font:inherit}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:100;background:#fff;color:#000;padding:.8rem 1rem}.skip-link:focus{top:1rem}.editor-header{height:76px;display:grid;grid-template-columns:46px 1fr minmax(180px,330px);align-items:center;gap:16px;padding:9px clamp(12px,3vw,38px);border-bottom:1px solid var(--line);background:#080810e8;backdrop-filter:blur(16px)}.editor-header .back{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:#fff;text-decoration:none;font-size:1.35rem}.editor-title{display:flex;flex-direction:column}.editor-title strong{font-size:1.15rem;letter-spacing:.03em}.editor-title span{color:var(--cyan);font-size:.54rem;font-weight:950;letter-spacing:.12em}.editor-header img{justify-self:end;width:100%;height:54px;object-fit:contain;object-position:right center}
.editor-shell{max-width:1420px;margin:0 auto;padding:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,500px);gap:22px}.workspace,.controls{border:1px solid var(--line);border-radius:22px;background:rgba(16,16,27,.88);box-shadow:0 24px 70px #0008}.workspace{min-width:0;padding:18px}.workspace-top{display:flex;justify-content:space-between;gap:1rem;margin-bottom:14px}.format-switch{display:flex;gap:7px}.format,.reset{min-height:38px;padding:.55rem .75rem;border:1px solid var(--line);border-radius:9px;background:#0b0b13;color:#aeadc1;font-size:.62rem;font-weight:950;letter-spacing:.07em;cursor:pointer}.format.active{border-color:var(--cyan);background:rgba(16,230,226,.12);color:var(--cyan)}.reset{color:#ff8cdc}.canvas-wrap{height:calc(100vh - 190px);min-height:520px;display:grid;place-items:center;overflow:hidden;border-radius:16px;background:repeating-conic-gradient(#171725 0 25%,#11111c 0 50%) 50%/24px 24px}canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;background:#111;box-shadow:0 14px 44px #000}.logo-lock{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:13px 0 0;color:#9f9eb1;font-size:.68rem;font-weight:800}
.controls{display:flex;min-height:calc(100vh - 124px);flex-direction:column;overflow:hidden}.tool-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line);background:#0c0c15}.tool-tab{min-width:0;padding:12px 3px;border:0;border-right:1px solid var(--line);background:transparent;color:#89889c;font-size:.52rem;font-weight:950;cursor:pointer}.tool-tab:last-child{border-right:0}.tool-tab span{display:grid;place-items:center;width:30px;height:30px;margin:0 auto 5px;border:1px solid var(--line);border-radius:9px;font-size:.9rem}.tool-tab.active{background:rgba(16,230,226,.08);color:var(--cyan)}.tool-tab.active span{border-color:var(--cyan);box-shadow:0 0 16px rgba(16,230,226,.25)}.tool-panel{display:none;padding:24px;flex:1;overflow:auto}.tool-panel.active{display:block}.tool-panel h2{margin:0;font-size:1.35rem}.tool-panel>p{margin:.3rem 0 1.25rem;color:var(--muted);font-size:.8rem}.tool-panel label:not(.upload-button){display:flex;flex-direction:column;gap:.4rem;margin:0 0 1rem;color:#c5c4d3;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.tool-panel input[type=text],.tool-panel input:not([type]){width:100%;height:48px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:#080810;color:#fff}.tool-panel input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.upload-button{min-height:62px;display:flex;align-items:center;justify-content:center;gap:.7rem;border:1px dashed var(--cyan);border-radius:13px;background:rgba(16,230,226,.08);color:var(--cyan);font-size:.75rem;font-weight:950;cursor:pointer}.upload-button span{font-size:1.3rem}.photo-tools{display:grid;grid-template-columns:44px 1fr 44px;gap:10px;align-items:center;margin-top:18px}.photo-tools button{height:42px;border:1px solid var(--line);border-radius:10px;background:#080810;color:#fff;font-size:1.2rem}.photo-tools span{text-align:center;color:#a8a7b9;font-size:.6rem;font-weight:950}.range-label input{accent-color:var(--cyan)}.color-list{display:flex;gap:12px}.color{width:38px;height:38px;border:3px solid #fff;border-radius:50%;background:#fff;cursor:pointer}.color.black{background:#111}.color.cyan{background:var(--cyan)}.color.pink{background:var(--pink)}.color.yellow{background:var(--gold)}.color.active{outline:3px solid var(--cyan);outline-offset:3px}.character-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:1.2rem}.character{min-height:138px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:8px;border:1px solid var(--line);border-radius:14px;background:#0b0b13;color:#fff;cursor:pointer}.character img{width:80px;height:82px;object-fit:cover;object-position:top;border-radius:50%}.character b{margin-top:7px;font-size:.66rem}.character .none{width:70px;height:70px;display:grid;place-items:center;border:1px dashed #777;border-radius:50%;font-size:2rem}.character.active{border-color:var(--pink);box-shadow:inset 0 0 0 2px rgba(255,44,206,.24)}.background-list,.effect-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:1.2rem}.background,.effect{min-height:68px;border:1px solid var(--line);border-radius:12px;background:#0b0b13;color:#fff;font-size:.65rem;font-weight:950;cursor:pointer}.background span{display:block;width:42px;height:22px;margin:0 auto 7px;border-radius:99px}.background[data-background=night] span{background:linear-gradient(90deg,#101055,#ff2cce)}.background[data-background=sunset] span{background:linear-gradient(90deg,#ff692c,#ffd43a)}.background[data-background=paper] span{background:#f5f1df}.background[data-background=dark] span{background:#111}.background.active,.effect.active{border-color:var(--cyan);color:var(--cyan)}.editor-actions{display:grid;grid-template-columns:.8fr 1.2fr;gap:10px;padding:16px;border-top:1px solid var(--line)}.editor-actions button{min-height:54px;border-radius:12px;font-size:.68rem;font-weight:950;letter-spacing:.04em;cursor:pointer}.preview{border:1px solid var(--line);background:#0b0b13;color:#fff}.download{border:0;background:linear-gradient(100deg,var(--cyan),var(--pink));color:#080810}.toast{position:fixed;z-index:50;left:50%;bottom:20px;transform:translate(-50%,150%);width:min(460px,calc(100% - 30px));padding:1rem;border:1px solid rgba(16,230,226,.45);border-radius:12px;background:#10101b;color:#fff;text-align:center;font-size:.78rem;font-weight:850;box-shadow:0 18px 60px #000;transition:transform .25s}.toast.show{transform:translate(-50%,0)}
@media(max-width:980px){.editor-shell{grid-template-columns:1fr;padding:12px}.canvas-wrap{height:auto;min-height:0;max-height:none}.canvas-wrap canvas{width:100%;max-height:none}.controls{min-height:0}.tool-panel{min-height:280px}.editor-header{grid-template-columns:42px 1fr 180px}}
@media(max-width:600px){.editor-header{height:62px;grid-template-columns:36px 1fr 86px;gap:8px;padding-inline:9px}.editor-header .back{width:34px;height:34px}.editor-title strong{font-size:.92rem}.editor-title span{font-size:.43rem}.editor-header img{height:36px}.editor-shell{padding:8px;gap:10px}.workspace,.controls{border-radius:16px}.workspace{padding:9px}.workspace-top{align-items:center}.format,.reset{padding:.45rem .5rem;font-size:.5rem}.logo-lock{font-size:.57rem}.tool-tabs{position:sticky;top:0;z-index:4}.tool-tab{font-size:.43rem;padding-block:9px}.tool-tab span{width:27px;height:27px}.tool-panel{padding:18px 14px;min-height:260px}.editor-actions{position:sticky;bottom:0;background:#11111d}.editor-actions button{font-size:.6rem}.character-list{grid-template-columns:repeat(4,1fr)}.character{min-height:95px}.character img{width:48px;height:50px}.character .none{width:46px;height:46px}.character b{font-size:.48rem}.background-list,.effect-list{grid-template-columns:repeat(2,1fr)}}