.tokenator-page{padding:20px 0 80px;background:radial-gradient(circle at 78% 4%,rgba(224,170,72,.12),transparent 28%),var(--bg)}
.tokenator-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:18px;padding:34px 38px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:linear-gradient(110deg,rgba(30,30,39,.98),rgba(25,25,32,.82));box-shadow:0 20px 55px rgba(0,0,0,.2)}.tokenator-hero h1{margin:8px 0 0;color:#f5efe7;font:800 clamp(2.3rem,5vw,4rem)/1 Manrope,sans-serif;letter-spacing:-.05em}.tokenator-hero p{margin:13px 0 0;color:#bcb6ae;font-size:1rem}.tokenator-hero-mark{display:grid;width:106px;height:106px;place-items:center;border:1px solid rgba(239,161,58,.4);border-radius:50%;color:#efb65c;background:rgba(239,161,58,.08);font:3.8rem Georgia,serif;box-shadow:0 0 0 12px rgba(239,161,58,.035)}
.tokenator-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start;margin-top:18px}.tokenator-preview-card,.tokenator-panel{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.04);box-shadow:0 14px 38px rgba(0,0,0,.16)}.tokenator-preview-card{padding:22px}.tokenator-card-head{display:flex;justify-content:space-between;align-items:start;gap:16px}.tokenator-kicker,.tokenator-panel-title small{display:block;color:#99928a;font-size:.63rem;font-weight:900;letter-spacing:.12em}.tokenator-card-head h2{margin:7px 0 0;color:#f5efe7;font:800 1.4rem Manrope,sans-serif}.tokenator-status{padding:7px 9px;border:1px solid rgba(16,185,129,.25);border-radius:6px;color:#91dbbf;background:rgba(16,185,129,.08);font-size:.62rem;font-weight:900}.tokenator-stage{position:relative;display:grid;place-items:center;min-height:560px;margin-top:18px;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:10px;background-color:#16171e;background-image:linear-gradient(45deg,#1d1e26 25%,transparent 25%),linear-gradient(-45deg,#1d1e26 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1d1e26 75%),linear-gradient(-45deg,transparent 75%,#1d1e26 75%);background-size:34px 34px;background-position:0 0,0 17px,17px -17px,-17px 0}.tokenator-stage canvas{width:min(100%,512px);height:auto;cursor:grab;filter:drop-shadow(0 20px 32px rgba(0,0,0,.42))}.tokenator-stage canvas:active{cursor:grabbing}.tokenator-empty{position:absolute;display:grid;place-items:center;gap:6px;color:#aaa5a0;text-align:center;pointer-events:none}.tokenator-empty span{display:grid;width:54px;height:54px;place-items:center;border:1px solid rgba(239,161,58,.25);border-radius:50%;color:#efb65c;font-size:1.6rem}.tokenator-empty strong{color:#e5ded5;font-size:.88rem}.tokenator-empty small{color:#8e8982;font-size:.7rem}.tokenator-empty[hidden]{display:none}.tokenator-hint{margin:14px 0 0;color:#8f8981;font-size:.69rem;text-align:center}.tokenator-hint span{display:inline-grid;width:18px;height:18px;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:4px;color:#d5c8b4;font-size:.6rem}
.tokenator-controls{display:grid;gap:12px}.tokenator-panel{padding:18px}.tokenator-panel-title{display:flex;gap:11px;align-items:center;margin-bottom:16px}.tokenator-panel-title .step{display:grid;width:28px;height:28px;place-items:center;border-radius:7px;color:#f0bb65;background:rgba(239,161,58,.12);font-size:.65rem;font-weight:900}.tokenator-panel-title strong{display:block;color:#f1ebe3;font:800 .88rem Manrope,sans-serif}.tokenator-panel-title small{margin-top:3px;font-size:.59rem;letter-spacing:0}.tokenator-upload{display:grid;width:100%;min-height:74px;place-items:center;padding:12px;border:1px solid rgba(239,161,58,.28);border-radius:9px;color:#f0bb65;background:rgba(239,161,58,.08);cursor:pointer}.tokenator-upload span{font-size:1.1rem}.tokenator-upload b{font-size:.76rem}.tokenator-upload small{margin-top:3px;color:#9e8e76;font-size:.62rem}.tokenator-upload:hover{background:rgba(239,161,58,.14)}.tokenator-drop{margin-top:8px;padding:9px;border:1px dashed rgba(255,255,255,.13);border-radius:7px;color:#8f8981;font-size:.67rem;text-align:center}.tokenator-drop.is-over{border-color:#efb65c;color:#efb65c;background:rgba(239,161,58,.08)}.tokenator-field,.tokenator-select{display:grid;gap:6px;margin-top:14px}.tokenator-field span,.tokenator-select span,.tokenator-range-line span{color:#9c958d;font-size:.66rem;font-weight:800}.tokenator-field input,.tokenator-select select{width:100%;height:38px;padding:0 10px;border:1px solid rgba(255,255,255,.11);border-radius:7px;outline:0;color:#eee;background:rgba(0,0,0,.17);font:inherit;font-size:.76rem}.tokenator-field input:focus,.tokenator-select select:focus{border-color:rgba(239,161,58,.7)}.tokenator-swatches{display:flex;gap:10px}.tokenator-swatch{width:34px;height:34px;border:3px solid transparent;border-radius:50%;background:linear-gradient(135deg,var(--frame-a),var(--frame-b));cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.28)}.tokenator-swatch.is-active{outline:2px solid #f1bd6b;outline-offset:3px}.tokenator-range-line{display:flex;justify-content:space-between;gap:10px;margin-top:16px}.tokenator-range-line output{color:#e8c78c;font-size:.66rem;font-weight:900}input[type=range]{width:100%;accent-color:#e5a347}.tokenator-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.tokenator-buttons button{height:34px;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#aaa39b;background:rgba(255,255,255,.035);cursor:pointer;font-size:.68rem;font-weight:800}.tokenator-buttons button:hover,.tokenator-buttons button.is-active{border-color:rgba(239,161,58,.42);color:#f0c070;background:rgba(239,161,58,.1)}.tokenator-download{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:49px;border:0;border-radius:9px;color:#20170d;background:linear-gradient(135deg,#f2c16c,#d98c2d);box-shadow:0 10px 22px rgba(210,135,39,.2);cursor:pointer;font:800 .82rem Manrope,sans-serif}.tokenator-download:hover{filter:brightness(1.08);transform:translateY(-1px)}.tokenator-download span{font-size:1.2rem}.tokenator-note{margin:0;color:#8d8780;font-size:.64rem;line-height:1.5;text-align:center}
@media(max-width:900px){.tokenator-layout{grid-template-columns:1fr}.tokenator-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.tokenator-download,.tokenator-note{grid-column:1/-1}.tokenator-stage{min-height:420px}}
@media(max-width:600px){.tokenator-page{padding-top:12px}.tokenator-hero{padding:24px 20px}.tokenator-hero-mark{display:none}.tokenator-hero h1{font-size:2.35rem}.tokenator-hero p{font-size:.88rem}.tokenator-preview-card{padding:14px}.tokenator-stage{min-height:330px}.tokenator-card-head{display:block}.tokenator-status{display:inline-block;margin-top:10px}.tokenator-controls{grid-template-columns:1fr}.tokenator-download,.tokenator-note{grid-column:auto}}

/* Aternia-inspired frame workshop */
.tokenator-stage{min-height:620px;border-color:rgba(239,161,58,.18);transition:border-color .2s,box-shadow .2s,background .2s}.tokenator-page.is-drag-target .tokenator-stage{border-color:#efb65c;box-shadow:inset 0 0 0 2px rgba(239,182,92,.45),0 0 0 6px rgba(239,161,58,.08);background-color:#222029}.tokenator-drag-overlay{position:absolute;inset:18px;display:grid;place-items:center;align-content:center;gap:7px;border:1px dashed rgba(239,182,92,.72);border-radius:12px;color:#f5d08c;background:rgba(17,15,22,.72);backdrop-filter:blur(4px);pointer-events:none;text-align:center}.tokenator-drag-overlay span{display:grid;width:52px;height:52px;place-items:center;border:1px solid rgba(239,182,92,.55);border-radius:50%;font-size:1.65rem}.tokenator-drag-overlay strong{font-size:.9rem}.tokenator-drag-overlay small{color:#c0a87d;font-size:.68rem}.tokenator-drag-overlay[hidden]{display:none}.tokenator-panel-frames{padding-bottom:16px}.tokenator-frame-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;max-height:230px;overflow-y:auto;padding:4px 3px 6px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(0,0,0,.16);scrollbar-color:rgba(239,161,58,.45) transparent}.tokenator-frame{position:relative;display:grid;aspect-ratio:1;place-items:center;min-width:0;padding:2px;border:1px solid rgba(255,255,255,.12);border-radius:5px;background:rgba(255,255,255,.06);cursor:pointer;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}.tokenator-frame img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}.tokenator-frame:hover{border-color:rgba(239,182,92,.7);background:rgba(239,161,58,.13);transform:translateY(-1px)}.tokenator-frame.is-active{border-color:#efb65c;background:rgba(239,161,58,.16);box-shadow:0 0 0 2px rgba(239,182,92,.22)}.tokenator-material-title{display:flex;justify-content:space-between;gap:8px;margin:16px 0 8px;color:#d7cec2;font-size:.69rem;font-weight:800}.tokenator-material-title small{color:#908981;font-size:.6rem;font-weight:600}.tokenator-materials{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.tokenator-material{display:grid;gap:5px;min-width:0;padding:4px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:rgba(255,255,255,.035);color:#a6a098;cursor:pointer;font-size:.54rem;transition:border-color .18s,color .18s,background .18s}.tokenator-material img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;opacity:.82}.tokenator-material span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenator-material:hover,.tokenator-material.is-active{border-color:#efb65c;color:#f0c070;background:rgba(239,161,58,.1)}.tokenator-material.is-active img{opacity:1}.tokenator-panel-image{position:relative}.tokenator-panel-image:after{content:'или бросьте изображение в любое место страницы';display:block;margin-top:11px;color:#80786f;font-size:.59rem;font-style:italic;text-align:center}
@media(max-width:900px){.tokenator-stage{min-height:500px}.tokenator-frame-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:600px){.tokenator-stage{min-height:350px}.tokenator-frame-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-height:210px}.tokenator-materials{gap:4px}.tokenator-material{font-size:.5rem}}
.tokenator-color-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:15px;color:#d7cec2;font-size:.69rem;font-weight:800}.tokenator-color-title button{padding:4px 7px;border:1px solid rgba(239,161,58,.28);border-radius:5px;color:#efc47d;background:rgba(239,161,58,.08);cursor:pointer;font-size:.58rem;font-weight:800}.tokenator-color-title button:hover{background:rgba(239,161,58,.16)}.tokenator-colors{display:flex;align-items:center;gap:8px;margin-top:8px}.tokenator-colors input{width:100%;height:34px;padding:2px;border:1px solid rgba(255,255,255,.13);border-radius:6px;background:rgba(0,0,0,.2);cursor:pointer}.tokenator-colors button{display:grid;width:31px;height:31px;flex:none;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:6px;color:#c7b59b;background:rgba(255,255,255,.05);cursor:pointer}.tokenator-colors button:hover{border-color:#efb65c;color:#efb65c}.tokenator-panel-frames>.tokenator-select{margin-top:11px}.tokenator-panel-frames>.tokenator-select span{font-size:.61rem}
.tokenator-select select{color-scheme:dark}.tokenator-select select option{color:#f5efe7;background:#1a1b22}.tokenator-select select option:checked{color:#17120b;background:#8fc0f1}.tokenator-select select option:hover{color:#17120b;background:#efb65c}