/* "Create a design" v3 (2026-10-13, owner: "lighter, prettier, in our style, convenient and clear: every tab,
   switch, text field, frame / effect / text picker; proper icons"). Loaded after builder-studio.css and before
   ui-polish.css. Only looks: ids and the JS structure (builder-layout.js) are unchanged. Icons come from
   js/builder-ui.js. Also: Process and Design use the whole browser width. */

/* ---------------------------------------------------------------- full width work area */
html body.site-v2.page-tools[data-workspace-tool=builder] .main,
html body.site-v2.page-tools[data-workspace-tool=process] .main{width:auto!important;max-width:none!important;margin-left:clamp(12px,1.4vw,28px)!important;margin-right:clamp(12px,1.4vw,28px)!important}
html body.site-v2.page-tools[data-workspace-tool=process] #tab-process.active.has-files{max-width:none!important}

/* ---------------------------------------------------------------- tokens and frame */
#showcaseBuilder.bx{
  --bx-glass:linear-gradient(180deg,rgba(18,30,66,.78),rgba(7,12,30,.86));--bx-field:rgba(3,8,22,.72);--bx-line:rgba(130,180,255,.14);--bx-line-hi:rgba(111,227,255,.5);
  --bx-grad:linear-gradient(135deg,#1fc9f1,#8a7dff);--bx-ink:#eaf3ff;--bx-muted:rgba(206,222,246,.66);--bx-r:16px;--bx-r-s:11px;
  --bx-h:max(660px,calc(100vh - 168px));
  grid-template-columns:78px minmax(320px,370px) minmax(0,1fr) minmax(250px,290px)!important;gap:14px!important
}
#showcaseBuilder.bx>.card,#showcaseBuilder.bx .bx-rail{border:1px solid var(--bx-line)!important;border-radius:var(--bx-r)!important;background:var(--bx-glass)!important;
  -webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px rgba(0,0,0,.25)!important}

/* ---------------------------------------------------------------- rail */
#showcaseBuilder.bx .bx-rail{gap:4px;padding:10px 7px}
#showcaseBuilder.bx .bx-rail__tool{gap:6px;padding:9px 2px 8px;border-radius:13px;font:700 10.5px/1.15 Montserrat,system-ui,sans-serif}
#showcaseBuilder.bx .bx-rail__icon{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background .18s,box-shadow .18s,transform .18s}
#showcaseBuilder.bx .bx-rail__icon .editor-icon,#showcaseBuilder.bx .bx-rail__icon svg{width:20px;height:20px}
#showcaseBuilder.bx .bx-rail__tool:hover .bx-rail__icon{background:rgba(31,201,241,.12);transform:translateY(-1px)}
#showcaseBuilder.bx .bx-rail__tool.is-active{border-color:transparent!important;background:none!important;box-shadow:none!important;color:#fff}
#showcaseBuilder.bx .bx-rail__tool.is-active .bx-rail__icon{background:var(--bx-grad);color:#041019;box-shadow:0 8px 22px rgba(31,201,241,.32)}
#showcaseBuilder.bx .bx-rail__count{top:3px;right:6px;border:2px solid #0b1430;background:#fff;color:#041019}

/* ---------------------------------------------------------------- panel */
#showcaseBuilder.bx .bx-panel__head{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:16px 18px 14px}
#showcaseBuilder.bx .bx-panel__head .bxu-icon{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(31,201,241,.12);color:#7fe9ff}
#showcaseBuilder.bx .bx-panel__title{font:800 18px/1.2 Montserrat,system-ui,sans-serif}
#showcaseBuilder.bx .bx-panel__hint{margin:3px 0 0;font-size:12px}
#showcaseBuilder.bx .bx-panel__scroll{gap:12px;padding:14px 16px 22px}
/* Add buttons */
#showcaseBuilder.bx .bx-add{border:1px solid rgba(111,227,255,.32)!important;border-radius:14px!important;background:linear-gradient(135deg,rgba(31,201,241,.12),rgba(138,125,255,.08))!important;transition:transform .15s,border-color .15s,box-shadow .15s}
#showcaseBuilder.bx .bx-add:hover{transform:translateY(-1px);border-color:var(--bx-line-hi)!important;box-shadow:0 10px 26px rgba(31,201,241,.14)}
#showcaseBuilder.bx .bx-add>b{border-radius:12px;background:var(--bx-grad);color:#041019}
#showcaseBuilder.bx .bx-add.is-secondary{border-color:var(--bx-line)!important;background:rgba(255,255,255,.03)!important}
#showcaseBuilder.bx .bx-add.is-secondary>b{background:rgba(31,201,241,.14);color:#7fe9ff}

/* Groups: cards with an icon */
#showcaseBuilder.bx .bx-group{border:1px solid var(--bx-line);border-radius:14px;background:rgba(255,255,255,.025)}
#showcaseBuilder.bx .bx-group[open]{background:rgba(255,255,255,.035)}
#showcaseBuilder.bx .bx-group>summary{gap:10px;padding:12px 14px;font:700 13.5px/1.2 Montserrat,system-ui,sans-serif}
#showcaseBuilder.bx .bx-group>summary .bxu-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;background:rgba(31,201,241,.1);color:#7fe9ff}
#showcaseBuilder.bx .bx-group>summary .bx-group__title{flex:1;min-width:0}
#showcaseBuilder.bx .bx-group>summary>i{width:20px;height:20px;border-radius:50%;background:transparent}
#showcaseBuilder.bx .bx-group>summary>i::before,#showcaseBuilder.bx .bx-group>summary>i::after{content:"";position:absolute;left:6px;top:6px;width:7px;height:7px;border:solid #9fb6d3;border-width:0 1.8px 1.8px 0;background:none;border-radius:0;transform:rotate(45deg);transition:transform .2s}
#showcaseBuilder.bx .bx-group>summary>i::after{display:none}
#showcaseBuilder.bx .bx-group[open]>summary>i::before{transform:translateY(3px) rotate(225deg)}
#showcaseBuilder.bx .bx-group__body{gap:12px;padding:2px 14px 16px}

/* ---------------------------------------------------------------- fields */
#showcaseBuilder.bx :is(#builderInspector,.bx-panel) label{font:600 12px/1.3 Montserrat,system-ui,sans-serif;color:var(--bx-muted)}
#showcaseBuilder.bx :is(select,textarea,input:not([type=range]):not([type=checkbox]):not([type=color]):not([type=file])){min-height:40px;padding:9px 12px!important;border:1px solid var(--bx-line)!important;border-radius:var(--bx-r-s)!important;
  background:var(--bx-field)!important;color:var(--bx-ink)!important;font:600 13px/1.35 Montserrat,system-ui,sans-serif!important;box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
#showcaseBuilder.bx :is(select,textarea,input):focus-visible{outline:none;border-color:var(--bx-line-hi)!important;box-shadow:0 0 0 3px rgba(31,201,241,.16)!important}
#showcaseBuilder.bx textarea{min-height:70px;resize:vertical}
#showcaseBuilder.bx select{appearance:none;-webkit-appearance:none;padding-right:34px!important;background-image:linear-gradient(45deg,transparent 50%,#9fb6d3 50%),linear-gradient(135deg,#9fb6d3 50%,transparent 50%)!important;
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%!important;background-size:5px 5px!important;background-repeat:no-repeat!important}
#showcaseBuilder.bx input[type=color]{width:44px!important;height:34px!important;padding:3px!important;border:1px solid var(--bx-line)!important;border-radius:10px!important;background:var(--bx-field)!important;cursor:pointer}
#showcaseBuilder.bx input[type=color]::-webkit-color-swatch-wrapper{padding:0}
#showcaseBuilder.bx input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}
/* Slider rows: label + value pill on one line, the slider below (value pills come from builder-ui.js) */
#showcaseBuilder.bx label.bxu-range{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px!important}
#showcaseBuilder.bx label.bxu-range>input[type=range]{grid-column:1/-1}
#showcaseBuilder.bx .bxu-val{min-width:46px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.07);color:#fff;font:800 11.5px/1 Montserrat,system-ui,sans-serif;text-align:center}
/* Switch rows */
#showcaseBuilder.bx .builder-toggle{display:flex!important;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border:1px solid var(--bx-line);border-radius:12px;background:rgba(255,255,255,.025);color:var(--bx-ink)!important;font:600 12.5px/1.35 Montserrat,system-ui,sans-serif!important;cursor:pointer}
/* Buttons inside panels */
#showcaseBuilder.bx .bx-panel .btn,#showcaseBuilder.bx .builder-layers .btn{min-height:40px;border-radius:12px!important;font:700 12.5px/1.2 Montserrat,system-ui,sans-serif!important}
#showcaseBuilder.bx .bx-panel .btn.ghost{border:1px solid var(--bx-line)!important;background:rgba(255,255,255,.04)!important;color:var(--bx-ink)!important}
#showcaseBuilder.bx .bx-panel .btn.ghost:hover{border-color:var(--bx-line-hi)!important;background:rgba(31,201,241,.1)!important}
#showcaseBuilder.bx .btn .bxu-icon{display:inline-grid;vertical-align:-4px;margin-right:7px}
/* Segmented controls (text direction, frame target...) */
#showcaseBuilder.bx .bx-textdir [role=group]{padding:4px;border-radius:12px;background:var(--bx-field)}
#showcaseBuilder.bx .bx-textdir button{min-height:34px;border-radius:9px}
#showcaseBuilder.bx .bx-textdir button[aria-pressed=true]{background:var(--bx-grad);color:#041019;box-shadow:none}
#showcaseBuilder.bx .bx-textdir button[aria-pressed=true] b{color:#041019}

/* ---------------------------------------------------------------- picture tiles (effects, text fx, frames) */
#showcaseBuilder.bx :is(.bx-effects,.bx-textfx__grid){gap:8px}
#showcaseBuilder.bx :is(.bx-effect,.bx-textfx__tile){position:relative;gap:6px;padding:5px 5px 8px;border:1px solid var(--bx-line);border-radius:13px;background:rgba(255,255,255,.03);transition:transform .15s,border-color .15s,box-shadow .15s}
#showcaseBuilder.bx :is(.bx-effect,.bx-textfx__tile):hover{transform:translateY(-2px);border-color:rgba(111,227,255,.4);box-shadow:0 10px 22px rgba(0,0,0,.3)}
#showcaseBuilder.bx :is(.bx-effect,.bx-textfx__tile)[aria-checked=true]{border-color:transparent;background:linear-gradient(rgba(10,20,46,.95),rgba(10,20,46,.95)) padding-box,var(--bx-grad) border-box;border:1.5px solid transparent;box-shadow:0 10px 26px rgba(31,201,241,.18)}
#showcaseBuilder.bx :is(.bx-effect,.bx-textfx__tile)[aria-checked=true]::after{content:"";position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.4);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041019' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat,linear-gradient(135deg,#1fc9f1,#8a7dff)}
#showcaseBuilder.bx :is(.bx-effect,.bx-textfx__tile) canvas{border-radius:9px}
#showcaseBuilder.bx :is(.bx-effect,.bx-textfx__tile) span{font:700 11px/1.2 Montserrat,system-ui,sans-serif;color:var(--bx-ink)}
#showcaseBuilder.bx .builder-frame-picker :is(button,[role=radio]){border-radius:12px!important}

/* ---------------------------------------------------------------- character effects (builder-char-fx.js) */
#showcaseBuilder.bx .cfx[hidden]{display:none!important}
#showcaseBuilder.bx .cfx-sub{display:flex;align-items:center;gap:8px;margin:2px 0 -2px;font:800 10.5px/1 Montserrat,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--bx-muted)}
#showcaseBuilder.bx .cfx-new{padding:3px 7px;border-radius:999px;background:var(--bx-grad);color:#041019;font:800 9px/1 Montserrat,system-ui,sans-serif;letter-spacing:.06em}
#showcaseBuilder.bx .cfx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:5px;border-radius:14px;background:rgba(3,8,22,.55);box-shadow:inset 0 0 0 1px var(--bx-line)}
#showcaseBuilder.bx .cfx-tile{display:grid;justify-items:center;gap:5px;min-width:0;padding:10px 4px 9px;border:0;border-radius:10px;background:transparent;color:var(--bx-muted);font:700 11.5px/1.15 Montserrat,system-ui,sans-serif;cursor:pointer;transition:background .15s,color .15s}
#showcaseBuilder.bx .cfx-tile span{max-width:100%;overflow-wrap:anywhere;hyphens:auto;line-height:1.15;text-align:center}
#showcaseBuilder.bx .cfx-tile:hover{background:rgba(255,255,255,.06);color:#fff}
#showcaseBuilder.bx .cfx-tile[aria-checked=true]{background:#fff;color:#081022;box-shadow:0 6px 18px rgba(0,0,0,.35)}
#showcaseBuilder.bx .cfx-tile[aria-checked=true] svg{color:#1aa8d6}
#showcaseBuilder.bx .cfx-opts{display:grid;gap:12px}
#showcaseBuilder.bx .cfx-opts[hidden]{display:none!important}
#showcaseBuilder.bx .cfx-label{margin:0;font:600 12px/1 Montserrat,system-ui,sans-serif;color:var(--bx-muted)}
#showcaseBuilder.bx .cfx-colors{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
#showcaseBuilder.bx .cfx-auto{height:26px;padding:0 10px;margin-right:3px;border:1px solid var(--bx-line);border-radius:999px;background:rgba(255,255,255,.04);color:var(--bx-muted);font:700 11.5px/1 Montserrat,system-ui,sans-serif;cursor:pointer}
#showcaseBuilder.bx .cfx-auto[aria-pressed=true]{border-color:transparent;background:var(--bx-grad);color:#041019}
#showcaseBuilder.bx .cfx-sw{position:relative;width:21px;height:21px;padding:0;border:0;border-radius:50%;background:var(--c,#fff);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .15s}
#showcaseBuilder.bx .cfx-sw:hover{transform:scale(1.12)}
#showcaseBuilder.bx .cfx-sw[aria-pressed=true],#showcaseBuilder.bx .cfx-sw--custom.is-on{box-shadow:0 0 0 2px #0b1430,0 0 0 4px #fff}
#showcaseBuilder.bx .cfx-sw--rainbow{background:conic-gradient(#ff4d5e,#ffb020,#2ee6a0,#1fc9f1,#8a7dff,#ff5fc8,#ff4d5e)}
#showcaseBuilder.bx .cfx-sw--custom{display:grid;place-items:center;overflow:hidden;background:var(--c,rgba(255,255,255,.06));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
#showcaseBuilder.bx .cfx-sw--custom::before{content:"+";color:#fff;font:800 15px/1 Montserrat,system-ui,sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.6)}
#showcaseBuilder.bx .cfx-sw--custom input{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;cursor:pointer;padding:0!important;border:0!important}
#showcaseBuilder.bx .cfx-strength{display:grid!important;gap:8px}
#showcaseBuilder.bx .cfx-strength>span{display:flex;align-items:center;justify-content:space-between}
#showcaseBuilder.bx .cfx-strength b{font:700 13px/1 Montserrat,system-ui,sans-serif;color:var(--bx-ink)}
#showcaseBuilder.bx .cfx-strength output{min-width:46px;padding:5px 9px;border-radius:9px;background:rgba(255,255,255,.08);color:#fff;font:800 12px/1 Montserrat,system-ui,sans-serif;text-align:center}
#showcaseBuilder.bx .cfx-hint{margin:0;font-size:11.5px;line-height:1.45;color:var(--bx-muted)}

/* ---------------------------------------------------------------- stage */
#showcaseBuilder.bx .builder-stage{gap:10px;padding:12px!important}
#showcaseBuilder.bx .builder-mode-switch{border-radius:13px!important;background:var(--bx-field)!important}
#showcaseBuilder.bx .builder-mode-switch>button{min-height:42px!important;border-radius:10px!important}
#showcaseBuilder.bx .builder-mode-switch>button.active{background:var(--bx-grad)!important;color:#041019!important}
#showcaseBuilder.bx .bx-toolbar{padding:6px;border-radius:13px;background:var(--bx-field)}
#showcaseBuilder.bx .bx-toolbar .builder-history>button,#showcaseBuilder.bx .bx-toolbar .editor-canvas-options>summary{gap:7px;border-radius:9px!important;background:rgba(255,255,255,.04)!important;border-color:transparent!important}
#showcaseBuilder.bx .bx-toolbar .builder-history>button:hover:not(:disabled),#showcaseBuilder.bx .bx-toolbar .editor-canvas-options>summary:hover{background:rgba(31,201,241,.12)!important;color:#fff!important}
#showcaseBuilder.bx .builder-canvas-wrap{border-radius:14px!important;border-color:var(--bx-line)!important;
  background:radial-gradient(circle at 50% 40%,rgba(31,201,241,.07),transparent 60%),radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px) 0 0/18px 18px,#040a16!important}
#showcaseBuilder.bx .builder-shortcuts{opacity:.75}
#showcaseBuilder.bx #builderProjectName{border-radius:12px!important}
#showcaseBuilder.bx #builderSave,#showcaseBuilder.bx #builderExport{border-radius:12px!important;border:1px solid var(--bx-line)!important;background:rgba(255,255,255,.05)!important;color:#fff!important}
#showcaseBuilder.bx #builderSave:hover,#showcaseBuilder.bx #builderExport:hover{border-color:var(--bx-line-hi)!important;background:rgba(31,201,241,.12)!important}
#showcaseBuilder.bx #builderDownloadSteam{border-radius:12px!important;background:var(--bx-grad)!important;color:#041019!important;font-weight:800!important;box-shadow:0 10px 26px rgba(31,201,241,.22)}
#showcaseBuilder.bx #builderDownloadSteam:hover{filter:brightness(1.07)}
#showcaseBuilder.bx .bx-download__fps select{min-height:42px!important;border-radius:12px!important}

/* ---------------------------------------------------------------- layers */
#showcaseBuilder.bx .builder-layers{gap:10px;padding:14px!important}
#showcaseBuilder.bx .builder-layer{border-radius:13px!important;border-color:var(--bx-line)!important;background:rgba(255,255,255,.03)!important;transition:border-color .15s,background .15s}
#showcaseBuilder.bx .builder-layer.is-selected{background:linear-gradient(135deg,rgba(31,201,241,.14),rgba(138,125,255,.1))!important;border-color:rgba(111,227,255,.55)!important;box-shadow:none}
#showcaseBuilder.bx .builder-layer__icon{border-radius:10px;background:rgba(31,201,241,.12)}
#showcaseBuilder.bx .builder-layer.is-selected .builder-layer__icon{background:var(--bx-grad);color:#041019}
#showcaseBuilder.bx .bx-addmenu__toggle{border:1px solid rgba(111,227,255,.35);border-radius:13px;background:linear-gradient(135deg,rgba(31,201,241,.12),rgba(138,125,255,.08))}
#showcaseBuilder.bx .builder-retention{border-radius:12px!important}

@media (max-width:1320px){#showcaseBuilder.bx{grid-template-columns:78px minmax(300px,350px) minmax(0,1fr)!important}}
@media (max-width:860px){#showcaseBuilder.bx{gap:10px!important}#showcaseBuilder.bx .bx-rail__icon{width:34px;height:34px}}

/* Undo / redo icons drawn by CSS (the buttons' text is rewritten by the app, which would drop injected icons). */
#showcaseBuilder.bx .builder-history>button:nth-of-type(1)::before,#showcaseBuilder.bx .builder-history>button:nth-of-type(2)::before{content:"";width:15px;height:15px;flex:none;background:currentColor;
  -webkit-mask:var(--bxu-m) center/contain no-repeat;mask:var(--bxu-m) center/contain no-repeat}
#showcaseBuilder.bx .builder-history>button:nth-of-type(1){--bxu-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7.5L4.5 12 9 16.5'/%3E%3Cpath d='M5 12h9.5a5 5 0 0 1 0 10H12'/%3E%3C/svg%3E")}
#showcaseBuilder.bx .builder-history>button:nth-of-type(2){--bxu-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 7.5l4.5 4.5-4.5 4.5'/%3E%3Cpath d='M19 12H9.5a5 5 0 0 0 0 10H12'/%3E%3C/svg%3E")}
#showcaseBuilder.bx .builder-history>button{gap:7px}
#showcaseBuilder.bx .builder-history>button .bxu-icon{display:none}
/* Rail labels fit ("Персонаж" was cut) */
#showcaseBuilder.bx .bx-rail__tool{font-size:10px;letter-spacing:-.02em}

@media (max-width:480px){#showcaseBuilder.bx .cfx-tile{font-size:10.5px;padding:9px 2px 8px}}

/* Editor focus: page scrolling stops while the studio fills the window (builder-ui.js focusEditor). */
html.bx-lock{overflow:hidden!important;overscroll-behavior:none}
/* The same colour row everywhere in the studio (the native picker sits inside the "+" circle). */
#showcaseBuilder.bx .bxu-colors{margin-top:6px}
#showcaseBuilder.bx .cfx-sw--custom>input[type=color]{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;cursor:pointer;padding:0!important;border:0!important;min-height:0}
#showcaseBuilder.bx .bx-textfx__color{flex-wrap:wrap}
#showcaseBuilder.bx label:has(> .bxu-colors){display:grid!important;grid-template-columns:1fr;gap:8px;grid-column:1/-1}