:root{--bg:#fff;--bg-soft:#f6f7f9;--bg-sunken:#eef0f4;--line:#e2e6ec;--line-strong:#c9d0da;--text:#10131a;--text-muted:#6b7382;--text-faint:#98a0ad;--accent:#c2d715;--accent-ink:#2c3406;--accent-soft:#f3ff94;--primary:#063730;--primary-hover:#0a4f45;--secondary:#bf1be4;--secondary-hover:#a812c9;--secondary-soft:#faf0fe;--danger:#d93a3a;--danger-soft:#fdeceb;--success:#0f917e;--warning:#d98324;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;--shadow-sm:0 1px 2px rgba(16,19,26,.06);--shadow-md:0 4px 16px rgba(16,19,26,.08);--shadow-lg:0 12px 40px rgba(16,19,26,.16);--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}:root[data-brand=coldbet]{--accent:#2196f3;--accent-ink:#fff;--accent-soft:#dcefff;--primary:#0b3c6b;--primary-hover:#14508b;--secondary:#f5851f;--secondary-hover:#dc7212;--secondary-soft:#fff2e2}*{box-sizing:border-box}body{color:var(--text);margin:0;-webkit-font-smoothing:antialiased}.btn,body{font-family:var(--font)}.btn{align-items:center;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:var(--sp-2);height:40px;justify-content:center;line-height:1;padding:0 var(--sp-4);text-decoration:none;transition:background .15s,border-color .15s,color .15s,opacity .15s;white-space:nowrap}.btn:disabled{cursor:not-allowed;opacity:.45}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-secondary{background:var(--secondary);color:#fff}.btn-secondary:hover:not(:disabled){background:var(--secondary-hover)}.btn-accent{background:var(--accent);color:var(--accent-ink)}.btn-accent:hover:not(:disabled){filter:brightness(.95)}.btn-ghost{background:var(--bg);border-color:var(--line-strong);color:var(--text)}.btn-ghost:hover:not(:disabled){background:var(--bg-soft)}.btn-quiet{background:var(--bg-sunken);color:var(--text)}.btn-quiet:hover:not(:disabled){background:var(--line)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){filter:brightness(.93)}.btn-sm{font-size:13px;height:32px;padding:0 var(--sp-3)}.btn-block{width:100%}.field-label,.field>label{color:var(--text-muted);font-size:13px;font-weight:500}.field input[type=number],.field input[type=text],.field select,.input{background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:14px;height:40px;outline:none;padding:0 var(--sp-3);transition:border-color .15s,box-shadow .15s;width:100%}.field input:focus,.field select:focus,.input:focus{border-color:var(--secondary);box-shadow:0 0 0 3px var(--secondary-soft)}.input::placeholder{color:var(--text-faint)}.check{align-items:center;color:var(--text-muted);cursor:pointer;display:inline-flex;font-size:13px;gap:var(--sp-2);user-select:none}.check input{accent-color:var(--secondary);cursor:pointer;height:16px;width:16px}.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}.section-label{color:var(--text-faint);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.modal-overlay{align-items:center;backdrop-filter:blur(2px);background:rgba(16,19,26,.5);display:flex;inset:0;justify-content:center;padding:var(--sp-4);position:fixed;z-index:1000}.modal-content{background:var(--bg);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);max-width:420px;padding:var(--sp-5);text-align:center;width:100%}.modal-content p{font-size:15px;line-height:1.5;margin:0 0 var(--sp-5)}.modal-actions{display:flex;gap:var(--sp-3);justify-content:center}.modal-cancel,.modal-confirm{border:none;border-radius:var(--r-sm);cursor:pointer;font-family:var(--font);font-size:14px;font-weight:600;height:40px;min-width:110px}.modal-confirm{background:var(--danger);color:#fff}.modal-cancel{color:var(--text)}.modal-cancel,.pill{background:var(--bg-sunken)}.pill{align-items:center;border-radius:var(--r-pill);color:var(--text-muted);display:inline-flex;font-size:12px;font-weight:600;height:20px;justify-content:center;min-width:24px;padding:0 7px}.pill-accent{background:var(--accent);color:var(--accent-ink)}.scroll-y{overflow-y:auto;scrollbar-color:var(--line-strong) transparent;scrollbar-width:thin}.scroll-y::-webkit-scrollbar{width:6px}.scroll-y::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill)}.scroll-y::-webkit-scrollbar-track{background:transparent}body{background:var(--bg)}.page{margin:0 auto;max-width:1180px;padding:0 var(--sp-5) var(--sp-6)}.topbar{gap:var(--sp-4);justify-content:space-between;padding:var(--sp-5) 0}.topbar,.topbar-left{align-items:center;display:flex;flex-wrap:wrap}.topbar-left{gap:var(--sp-5)}.page-title{font-size:20px;font-weight:700;line-height:1.4;margin:0;white-space:nowrap}.constructor-tabs{background:var(--bg-soft);border-radius:var(--r-sm);display:flex;gap:var(--sp-1);padding:var(--sp-1)}.constructor-tab{align-items:center;border-radius:6px;color:var(--text-muted);display:flex;font-size:14px;font-weight:600;padding:8px 18px;text-decoration:none;transition:background .15s,color .15s}.constructor-tab:hover{color:var(--text)}.constructor-tab.active{background:var(--accent);color:var(--accent-ink)}.topbar-right{align-items:center;display:flex;gap:var(--sp-2)}.btn-login{background:var(--secondary);border:none;border-radius:var(--r-sm);color:#fff;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:600;height:40px;padding:0 var(--sp-4)}.btn-login:hover{background:var(--secondary-hover)}.btn-lang{background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--text-muted);cursor:pointer;font-family:var(--font);font-size:14px;font-weight:600;height:40px;min-width:56px}.btn-lang:hover{background:var(--bg-soft)}.layout{align-items:start;display:grid;gap:var(--sp-5);grid-template-columns:minmax(280px,380px) minmax(0,1fr)}.panel{background:var(--bg-soft);border-radius:var(--r-lg);padding:var(--sp-5)}.form-panel{gap:var(--sp-4);position:sticky;top:var(--sp-4)}.field,.form-panel{display:flex;flex-direction:column}.field{gap:6px}.field label{color:var(--text);font-size:14px;font-weight:500}.select-wrap{position:relative}.select-wrap:after{border-bottom:2px solid var(--text-muted);border-right:2px solid var(--text-muted);content:"";height:8px;pointer-events:none;position:absolute;right:16px;top:50%;transform:translateY(-70%) rotate(45deg);width:8px}.field input,.field select{appearance:none;-webkit-appearance:none;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:15px;font-weight:500;height:44px;outline:none;padding:0 var(--sp-4);transition:border-color .15s,box-shadow .15s;width:100%}.field input:focus,.field select:focus{border-color:var(--secondary);box-shadow:0 0 0 3px var(--secondary-soft)}.field input::placeholder{color:var(--text-faint)}.right-col{min-width:0}.gallery-panel,.right-col{display:flex;flex-direction:column;gap:var(--sp-4)}.gallery-toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;min-height:42px}.size-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.size-tag{background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--text-muted);cursor:pointer;font-family:var(--font);font-size:13px;font-weight:600;height:36px;padding:0 14px;transition:background .15s,color .15s,border-color .15s}.size-tag:hover{border-color:var(--accent);color:var(--text)}.size-tag.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.mode-group{align-items:center;display:flex;gap:var(--sp-3)}.mode-label{color:var(--text-muted);font-size:13px;white-space:nowrap}.mode-btn{align-items:center;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r-sm);cursor:pointer;display:flex;height:40px;justify-content:center;padding:0;transition:border-color .15s,box-shadow .15s;width:40px}.mode-btn.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.mode-btn.selected .icon-rect{fill:var(--accent)}.mode-btn:not(.selected) .icon-rect{fill:var(--line-strong)}.mode-btn:disabled{cursor:not-allowed;opacity:.4}.canvas-container{align-items:center;background:var(--bg);border-radius:var(--r-md);display:flex;justify-content:center;min-height:320px;padding:var(--sp-4);position:relative}.canvas-container canvas{border-radius:var(--r-md);height:auto;max-width:460px;width:100%}.spinner{animation:spin .8s linear infinite;border:3px solid var(--line);border-radius:50%;border-top-color:var(--secondary);height:40px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:40px;z-index:3}@keyframes spin{to{transform:translate(-50%,-50%) rotate(1turn)}}.gallery-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:640px;overflow-y:auto;padding:4px 10px 4px 4px;scrollbar-color:var(--line-strong) transparent;scrollbar-width:thin}.gallery-grid::-webkit-scrollbar{width:5px}.gallery-grid::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill)}.gallery-grid::-webkit-scrollbar-track{background:transparent}.gallery-item-wrapper{aspect-ratio:1/1;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;padding:var(--sp-2);position:relative;transition:border-color .15s,box-shadow .15s,transform .15s}.gallery-item-wrapper.size-9x16{aspect-ratio:9/16}.gallery-item-wrapper:hover{border-color:var(--secondary);box-shadow:var(--shadow-md)}.gallery-item-wrapper.selected{border-color:var(--secondary);box-shadow:inset 0 0 0 2px var(--secondary)}.gallery-item-wrapper.selected:after{background:var(--secondary);border-radius:var(--r-md);content:"";inset:0;opacity:.1;pointer-events:none;position:absolute}.gallery-item-wrapper img{border-radius:var(--r-sm);display:block;height:100%;object-fit:cover;width:100%}.select-circle{align-items:center;background:hsla(0,0%,100%,.95);border:2px solid rgba(56,68,91,.3);border-radius:50%;box-shadow:var(--shadow-sm);cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;position:absolute;right:8px;top:8px;transition:background .12s,border-color .12s,transform .12s;width:32px;z-index:3}.select-circle:hover{border-color:var(--secondary);transform:scale(1.1)}.select-circle:after{border-bottom:3px solid rgba(56,68,91,.22);border-left:3px solid rgba(56,68,91,.22);content:"";height:8px;transform:rotate(-45deg) translate(1px,-1px);width:14px}.select-circle:hover:after{border-color:var(--secondary)}.gallery-item-wrapper.selected .select-circle{background:var(--secondary);border-color:var(--secondary)}.gallery-item-wrapper.selected .select-circle:after{border-color:#fff}.gallery-item-wrapper .card-caption{background:rgba(16,19,26,.78);border-radius:0 0 var(--r-sm) var(--r-sm);bottom:var(--sp-2);color:#fff;font-size:11px;font-weight:600;left:var(--sp-2);line-height:1.3;overflow:hidden;padding:5px 8px;pointer-events:none;position:absolute;right:var(--sp-2);text-align:center;text-overflow:ellipsis;white-space:nowrap}.gallery-separator{align-items:center;color:var(--text-faint);display:flex;font-size:12px;font-weight:700;gap:var(--sp-3);grid-column:1/-1;letter-spacing:.06em;margin-top:var(--sp-2);text-transform:uppercase}.gallery-separator:after{background:var(--line);content:"";flex:1;height:1px}.gallery-empty{color:var(--text-muted);font-size:14px;grid-column:1/-1;line-height:1.6;padding:var(--sp-6) var(--sp-4);text-align:center}.actions-row{flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between}.actions-row,.select-all-group{align-items:center;display:flex}.select-all-group{gap:var(--sp-2)}.select-all-btn{background:none;border:none;cursor:pointer;display:flex;padding:0}.select-all-btn img{height:24px;width:24px}.select-all-label{color:var(--text);font-size:14px}.count-pill{align-items:center;background:var(--bg-sunken);border-radius:var(--r-pill);color:var(--text-muted);display:inline-flex;font-size:12px;font-weight:700;height:22px;justify-content:center;min-width:28px;padding:0 8px}.count-pill.has-selection{background:var(--secondary);color:#fff}.btn-download{align-items:center;background:var(--primary);border:none;border-radius:var(--r-sm);color:#fff;cursor:pointer;display:inline-flex;font-family:var(--font);font-size:15px;font-weight:600;gap:var(--sp-2);height:44px;padding:0 var(--sp-5);transition:background .15s}.btn-download:hover:not(:disabled){background:var(--primary-hover)}.btn-download:disabled{cursor:not-allowed;opacity:.4}.btn-download img{height:20px;width:20px}.hint-line{color:var(--text-faint);font-size:13px;line-height:1.5}.play-btn{align-items:center;background:hsla(0,0%,100%,.92);border:none;border-radius:50%;bottom:var(--sp-4);box-shadow:var(--shadow-md);cursor:pointer;display:flex;height:48px;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:48px;z-index:2}.play-btn:hover{transform:translateX(-50%) scale(1.06)}.play-btn img{height:26px;width:26px}@media (max-width:900px){.layout{grid-template-columns:1fr}.form-panel{position:static}.page{padding:0 var(--sp-4) var(--sp-5)}}@media (max-width:620px){.page{padding:0 var(--sp-3) var(--sp-5)}.topbar{gap:var(--sp-3);padding:var(--sp-4) 0 var(--sp-3)}.topbar-left{gap:var(--sp-3);justify-content:space-between;width:100%}.page-title{font-size:17px}.constructor-tab{font-size:13px;padding:8px 14px}.topbar-right{width:100%}.btn-login{flex:1}.panel{border-radius:var(--r-md);padding:var(--sp-4)}.gallery-toolbar{gap:var(--sp-2)}.mode-label{display:none}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));max-height:none;padding-right:0}.canvas-container{min-height:0;padding:var(--sp-2)}.actions-row{background:var(--bg);border-top:1px solid var(--line);bottom:0;box-shadow:0 -4px 16px rgba(16,19,26,.06);margin:0 calc(var(--sp-3)*-1);padding:var(--sp-3);position:sticky;z-index:20}.btn-download{flex:1;justify-content:center}}@media (max-width:380px){.gallery-grid{grid-template-columns:repeat(2,1fr)}.select-all-label{display:none}}.login-corner{align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:50%;bottom:14px;color:var(--text-faint);cursor:pointer;display:flex;height:34px;justify-content:center;opacity:.35;position:fixed;right:14px;transition:opacity .15s,color .15s,border-color .15s;width:34px;z-index:60}.login-corner:hover{border-color:var(--secondary);color:var(--secondary);opacity:1}.login-corner svg{height:16px;width:16px}@media (max-width:620px){.login-corner{bottom:78px;opacity:.25;right:10px}}