:root{--bg:#f4f5f7;--surface:#fff;--ink:#15171a;--muted:#6e737b;--line:#e3e6ea;--accent:#d52424;--accent-dark:#b41818;--shadow:0 12px 34px rgba(20,24,30,.08);--radius:18px;--topbar:62px;--rail:86px;--inspector:320px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.site-header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,60px);background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.site-header .brand{font-weight:800;letter-spacing:-.03em;font-size:1.18rem}.site-header nav{display:flex;align-items:center;gap:20px}.site-header nav a{font-weight:650;color:#3f444b}.btn-primary,.color-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff!important;border:0;border-radius:11px;padding:11px 16px;font-weight:800;box-shadow:0 8px 18px rgba(213,36,36,.18)}.btn-primary:hover,.color-btn:hover{background:var(--accent-dark)}.page-shell{width:min(1500px,calc(100% - 36px));margin:0 auto;padding:34px 0 70px}.site-footer{text-align:center;color:var(--muted);font-size:.9rem;padding:25px;border-top:1px solid var(--line);background:#fff}.hero{background:linear-gradient(135deg,#17191d,#292d34);color:#fff;border-radius:26px;padding:clamp(34px,6vw,78px);margin-bottom:24px;box-shadow:var(--shadow)}.hero h1{font-size:clamp(2.1rem,5vw,4.6rem);line-height:.98;max-width:900px;letter-spacing:-.055em;margin:9px 0 18px}.hero p{font-size:1.1rem;color:#d6d8dc;margin:0;max-width:700px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:900;color:#ef7d7d}.filters{display:grid;grid-template-columns:minmax(250px,1.8fr) repeat(3,minmax(150px,.7fr)) auto;gap:10px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:16px;margin:0 0 24px}.filters input,.filters select,.auth-card input,.auth-card select,.panel input,.panel select,.panel textarea{width:100%;border:1px solid #d7dbe0;background:#fff;border-radius:10px;padding:11px 12px;outline:none}.filters input:focus,.filters select:focus,.auth-card input:focus,.panel input:focus,.panel select:focus,.panel textarea:focus{border-color:#9da4ad;box-shadow:0 0 0 3px rgba(80,90,100,.08)}.filters button{border:0;border-radius:10px;padding:0 18px;font-weight:800;background:#1d2024;color:#fff}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.coloring-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 8px 26px rgba(20,24,30,.055);transition:transform .2s ease,box-shadow .2s ease}.coloring-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(20,24,30,.1)}.card-image{aspect-ratio:4/5;background:#f7f7f7;display:flex;align-items:center;justify-content:center;padding:14px}.card-image img{width:100%;height:100%;object-fit:contain}.card-body{padding:17px}.card-meta{display:flex;gap:7px;flex-wrap:wrap}.card-meta span{background:#f1f2f4;color:#666b72;border-radius:999px;padding:5px 8px;font-size:.75rem;font-weight:750}.card-body h2{font-size:1.08rem;margin:12px 0 15px}.card-actions{display:flex;gap:10px}.card-actions .color-btn{flex:1}.fav-btn{width:45px;border-radius:11px;border:1px solid var(--line);background:#fff;color:#aaa;font-size:1.3rem}.fav-btn.active{color:var(--accent);background:#fff2f2;border-color:#f0c5c5}.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:30px}.pagination a{min-width:38px;height:38px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:9px}.pagination a.active{background:#1c1f23;color:#fff;border-color:#1c1f23}.empty{grid-column:1/-1;background:#fff;border:1px dashed #ccd1d7;border-radius:18px;padding:50px;text-align:center;color:var(--muted)}.auth-card{max-width:520px;margin:45px auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)}.auth-card h1{margin-top:0}.auth-card form,.form-stack{display:flex;flex-direction:column;gap:16px}.auth-card label,.panel label{display:grid;gap:7px;font-weight:700;color:#383c42}.check{grid-template-columns:auto 1fr!important;align-items:center!important}.check input{width:auto!important}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.alert{background:#fff0f0;border:1px solid #f1c4c4;color:#981c1c;padding:12px 14px;border-radius:10px;margin-bottom:15px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:10px 0 24px}.section-head h1{margin:3px 0 0;font-size:2.1rem;letter-spacing:-.04em}.creation-grid{display:grid;grid-template-columns:1fr;gap:14px}.creation-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center}.creation-card img{width:130px;height:150px;object-fit:contain;background:#f6f6f6;border-radius:10px}.creation-card h2{margin:0 0 6px}.creation-card p{color:var(--muted)}.row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.row-actions form{display:flex;gap:8px}.ghost-btn,.danger-btn{border:1px solid #d7dbe0;background:#fff;border-radius:9px;padding:9px 12px;font-weight:750}.danger-btn{color:#a62020;border-color:#edcaca;background:#fffafa}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}.stat strong{display:block;font-size:2rem}.stat span{color:var(--muted)}.admin-grid{display:grid;grid-template-columns:1fr 2fr;gap:18px}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}.panel h2{margin-top:0}.panel>a{display:block;padding:10px 0;border-bottom:1px solid #f0f1f2;font-weight:700}.metric-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid #f0f1f2}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #edf0f2;white-space:nowrap}th{background:#fafbfc;font-size:.8rem;color:#686e76}.mini{width:54px;height:66px;object-fit:contain;background:#f7f7f7}.upload-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.dropzone{min-height:240px;border:2px dashed #c9ced4!important;border-radius:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;text-align:center;background:#fafbfc;transition:.15s}.dropzone.drag{border-color:var(--accent)!important;background:#fff6f6}.dropzone input{position:absolute;opacity:0;pointer-events:none}.drop-icon{font-size:3rem;font-weight:300;color:#9299a2}.dropzone strong{font-size:1.1rem}.dropzone small{font-weight:500;color:var(--muted)}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.preview-grid h3{font-size:.88rem;color:var(--muted)}.preview-grid canvas{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px}.checker{background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;border-radius:10px}.hint{color:var(--muted);font-size:.88rem}

/* Studio */
.studio-body{overflow:hidden;background:#202328}.studio-app{width:100vw;height:100dvh;display:grid;grid-template-columns:var(--rail) minmax(0,1fr) var(--inspector);grid-template-rows:var(--topbar) minmax(0,1fr);grid-template-areas:"top top top" "rail stage inspector";background:#24272c;color:#e9eaec}.studio-topbar{grid-area:top;height:var(--topbar);display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr);align-items:center;background:#15171a;border-bottom:1px solid #30343a;padding:0 12px;z-index:30}.studio-brand{display:flex;align-items:center;gap:11px;min-width:0}.studio-brand>a{width:38px;height:38px;border:1px solid #33373e;border-radius:10px;display:grid;place-items:center;font-size:1.2rem}.studio-brand>div{min-width:0}.studio-brand strong,.studio-brand small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studio-brand small{font-size:.74rem;color:#8f969f;margin-top:2px}.history-actions{display:flex;align-items:center;gap:6px}.history-actions button,.top-actions button,.zoom-bar button,.icon-btn{border:1px solid #363a41;background:#22252a;color:#eef0f2;border-radius:9px;height:36px;min-width:36px;font-weight:750}.history-actions button:disabled,.top-actions button:disabled{opacity:.35;cursor:not-allowed}.save-state{font-size:.74rem;color:#9ca3ad;margin-left:6px;min-width:120px}.save-state.dirty{color:#ffc56b}.save-state.ok{color:#83d39b}.save-state.error{color:#ff8d8d}.save-state.saving{color:#8fc2ff}.top-actions{justify-self:end;display:flex;gap:6px}.top-actions button{padding:0 11px}.stay-inside-top{display:flex;align-items:center;gap:6px;color:#c8cdd3!important}.stay-inside-top.active{background:#25382d!important;border-color:#3f6b4e!important;color:#9be2af!important;box-shadow:inset 0 0 0 1px rgba(115,205,140,.08)}.stay-inside-top.guard-blocked{animation:guardBlocked .35s ease}@keyframes guardBlocked{50%{background:#5a2424;border-color:#b15151;color:#ffd1d1}}.tool-rail{grid-area:rail;background:#191b1f;border-right:1px solid #30343a;padding:8px 6px;display:flex;flex-direction:column;gap:5px;overflow:auto}.tool{min-height:60px;border:1px solid transparent;background:transparent;color:#aab0b8;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.tool span{font-size:1.25rem;line-height:1}.tool small{font-size:.65rem}.tool:hover{background:#22252a;color:#fff}.tool.active{background:#3a1f22;color:#ff9d9d;border-color:#663239}.mobile-guard-tool{display:none}.mobile-guard-tool.active{background:#25382d;color:#9be2af;border-color:#3f6b4e}.canvas-stage{grid-area:stage;min-width:0;min-height:0;position:relative;background:#2a2e34}.canvas-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none}.canvas-stack{position:absolute;transform-origin:0 0;box-shadow:0 15px 50px rgba(0,0,0,.45);background:#fff;will-change:transform}.canvas-stack canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.canvas-stack #uiCanvas{pointer-events:none}.zoom-bar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:6px;background:rgba(21,23,26,.9);border:1px solid #393d44;border-radius:12px;backdrop-filter:blur(12px);z-index:15}.zoom-bar span{font-size:.72rem;color:#b9bec5;min-width:54px;text-align:center}.zoom-bar button{height:32px;min-width:32px;padding:0 10px}.inspector{grid-area:inspector;background:#191b1f;border-left:1px solid #30343a;overflow:auto;transition:width .2s,transform .2s}.inspector-section{padding:15px;border-bottom:1px solid #2b2f34}.inspector h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:#a7adb5;margin:0 0 10px}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title h3{margin:0}.icon-btn{border:0;background:transparent}.color-editor{display:grid;grid-template-columns:48px 1fr 40px;gap:7px}.color-editor input[type=color]{width:48px;height:40px;padding:2px;border:1px solid #3d4249;background:#22252a;border-radius:9px}.color-editor input[type=text],.inspector select{width:100%;background:#22252a;border:1px solid #3b4047;color:#fff;border-radius:9px;padding:9px}.color-editor button{border:1px solid #3d4249;border-radius:9px;background:#22252a;color:#fff}.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:10px}.swatch{aspect-ratio:1;border-radius:8px;border:2px solid #2f3338;background:var(--swatch);min-width:0}.swatch:hover{outline:2px solid #fff;outline-offset:1px}.settings label{display:grid;grid-template-columns:1fr auto;gap:6px 10px;margin:12px 0;font-size:.78rem;color:#b9bec5}.settings label input[type=range],.settings label select{grid-column:1/-1}.settings input[type=range]{width:100%;accent-color:var(--accent)}.brush-preview canvas{width:100%;height:74px;border-radius:10px}.assist-section{background:linear-gradient(180deg,rgba(72,119,86,.09),rgba(72,119,86,.03))}.mode-toggle{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px;align-items:center;cursor:pointer}.mode-toggle>input{position:absolute;opacity:0;pointer-events:none}.mode-toggle-ui{width:42px;height:24px;border-radius:999px;background:#34383e;border:1px solid #484d55;position:relative;transition:.18s}.mode-toggle-ui:after{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;border-radius:50%;background:#aeb4bc;transition:.18s}.mode-toggle>input:checked+.mode-toggle-ui{background:#315d3d;border-color:#4f845e}.mode-toggle>input:checked+.mode-toggle-ui:after{transform:translateX(18px);background:#b9f0c8}.mode-toggle>input:focus-visible+.mode-toggle-ui{outline:2px solid #fff;outline-offset:2px}.mode-toggle-copy{display:grid;gap:3px}.mode-toggle-copy strong{font-size:.82rem;color:#edf0f2}.mode-toggle-copy small{font-size:.7rem;line-height:1.35;color:#9299a2}.danger-zone button{width:100%;background:#2b2021;color:#ffaaaa;border:1px solid #553237;border-radius:10px;padding:10px}.inspector-collapsed{grid-template-columns:var(--rail) minmax(0,1fr) 46px}.inspector-collapsed .inspector-section:not(:first-child),.inspector-collapsed .inspector-section:first-child>*:not(.section-title),.inspector-collapsed .inspector h3{display:none}.inspector-collapsed #collapseInspector{transform:rotate(180deg)}.mobile-tools{display:none}

@media(max-width:1100px){.stay-inside-top{font-size:0;width:38px;padding:0!important;justify-content:center}.stay-inside-top:before{content:"◇";font-size:1rem}.stay-inside-top.active:before{content:"◆"}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filters{grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}.upload-layout{grid-template-columns:1fr}.studio-app{--inspector:290px}.studio-topbar{grid-template-columns:1fr auto}.history-actions{display:none}.top-actions #downloadBtn,.top-actions #printBtn{display:none}.save-state{min-width:0}}
@media(max-width:760px){.site-header{padding:0 14px}.site-header nav a:not(.btn-primary){display:none}.page-shell{width:min(100% - 22px,1500px);padding-top:18px}.hero{border-radius:18px;padding:32px 22px}.hero h1{font-size:2.5rem}.filters{grid-template-columns:1fr}.filters input{grid-column:auto}.catalog-grid{grid-template-columns:1fr 1fr;gap:10px}.card-body{padding:12px}.card-body h2{font-size:.92rem}.card-meta{display:none}.color-btn{padding:10px 11px}.fav-btn{width:42px}.stat-grid{grid-template-columns:1fr 1fr}.admin-grid{grid-template-columns:1fr}.creation-card{grid-template-columns:90px 1fr}.creation-card img{width:90px;height:110px}.split{grid-template-columns:1fr}.preview-grid{grid-template-columns:1fr}
  :root{--topbar:56px}.studio-app{grid-template-columns:1fr;grid-template-rows:var(--topbar) minmax(0,1fr) 68px;grid-template-areas:"top" "stage" "mobile"}.studio-topbar{grid-template-columns:minmax(0,1fr) auto;padding:0 8px}.studio-brand small{display:none}.studio-brand>a{width:34px;height:34px}.top-actions #saveBtn{font-size:0;width:38px;padding:0}.top-actions #saveBtn:after{content:'✓';font-size:1rem}.top-actions #fullscreenBtn,.top-actions .stay-inside-top{display:none}.tool-rail{position:fixed;z-index:45;left:8px;right:8px;bottom:76px;height:auto;max-height:210px;display:none;grid-template-columns:repeat(5,1fr);border:1px solid #393d44;border-radius:14px;padding:7px;background:#17191c;box-shadow:0 15px 45px rgba(0,0,0,.4)}.mobile-tools-expanded .tool-rail{display:grid}.mobile-guard-tool{display:flex}.tool{min-height:58px}.inspector{position:fixed;z-index:50;left:8px;right:8px;bottom:76px;top:auto;max-height:72dvh;border:1px solid #393d44;border-radius:16px;background:#17191c;transform:translateY(calc(100% + 100px));box-shadow:0 15px 50px rgba(0,0,0,.5)}.mobile-inspector .inspector{transform:translateY(0)}.inspector-collapsed{grid-template-columns:1fr}.inspector-collapsed .inspector-section:not(:first-child),.inspector-collapsed .inspector-section:first-child>*:not(.section-title),.inspector-collapsed .inspector h3{display:initial}.inspector #collapseInspector{display:none}.canvas-stage{grid-area:stage}.mobile-tools{grid-area:mobile;display:grid;grid-template-columns:repeat(6,1fr);background:#15171a;border-top:1px solid #30343a;z-index:40;padding:5px max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))}.mobile-tools button{border:0;background:transparent;color:#9ea5ae;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.15rem;gap:1px}.mobile-tools button small{font-size:.58rem}.mobile-tools button.active{color:#ff8d8d;background:#2d1e20}.zoom-bar{bottom:10px}.swatches{grid-template-columns:repeat(10,1fr)}}
@media(max-width:520px){.catalog-grid{grid-template-columns:1fr}.card-image{aspect-ratio:5/4}.section-head{align-items:flex-start;flex-direction:column}.stat-grid{grid-template-columns:1fr 1fr}.creation-card{grid-template-columns:1fr}.creation-card img{width:100%;height:210px}.top-actions button:not(#saveBtn){display:none}.studio-brand strong{font-size:.86rem}.zoom-bar button:nth-child(3){display:none}.swatches{grid-template-columns:repeat(8,1fr)}}
@media print{.site-header,.site-footer,.filters,.studio-topbar,.tool-rail,.inspector,.mobile-tools,.zoom-bar{display:none!important}.page-shell{width:100%;margin:0;padding:0}}

.processing-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.processing-metrics span{background:#f6f7f8;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:.78rem;color:var(--muted)}.processing-metrics strong{display:block;color:var(--ink);font-size:1rem;margin-top:3px}.difficulty-row{display:grid;grid-template-columns:1.4fr 90px 100px 100px auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #eef0f2}.difficulty-row input{min-width:0}@media(max-width:760px){.difficulty-row{grid-template-columns:1fr 80px}.difficulty-row>*:nth-child(n+4){grid-column:span 1}.processing-metrics{grid-template-columns:1fr}}

.check-list{display:grid}.check-row{display:grid;grid-template-columns:18px minmax(180px,1fr) 1fr;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #eef0f2}.check-dot{width:10px;height:10px;border-radius:50%;background:#bbb}.check-dot.ok{background:#2da65a}.check-dot.bad{background:#d52424}@media(max-width:600px){.check-row{grid-template-columns:18px 1fr}.check-row>span:last-child{grid-column:2;color:var(--muted)}}

.auto-processing-note{margin:14px 0 10px;padding:14px 16px;border:1px solid #d9e8dd;background:linear-gradient(180deg,#f7fcf8,#f2f8f4);border-radius:14px}.auto-processing-note strong{display:block;margin-bottom:6px}.auto-processing-note p{margin:0 0 10px;color:#45515a;line-height:1.45}.advanced-processing{margin:14px 0 0;padding:14px 16px;border:1px solid var(--line);background:#fafbfc;border-radius:14px}.threshold-row{display:grid;gap:8px}.threshold-row span{justify-self:end;font-weight:800}.advanced-processing .hint{margin:.35rem 0 0}.dropzone.drag strong{color:var(--accent)}@media(max-width:760px){.auto-processing-note .row-actions{flex-direction:column;align-items:stretch}}