/* Оболочка конструктора (светлая, как в примере заказчика); макет сайта живёт в iframe и стилей оболочки не видит. */
[hidden]{display:none!important}
:root{--bg:#F3F3F5;--surf:#FFFFFF;--surf2:#F7F7F9;--line:#E4E4EA;--line2:#D3D3DC;--ink:#17171C;--ink2:#55555F;--ink3:#8A8A96;--acc:#5B47E0;--acc-soft:#EEEBFD;--acc-ink:#3E2DB8;--ok:#1F9D63;--warn:#B76E00;--r:12px;--sans:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font:14px/1.45 var(--sans);color:var(--ink);background:var(--bg);overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* верхняя панель */
.top{height:58px;display:flex;align-items:center;gap:16px;padding:0 16px;background:var(--surf);border-bottom:1px solid var(--line);position:relative;z-index:5}
.top-l{display:flex;align-items:center;gap:12px;min-width:250px}
.logo{width:32px;height:32px;border-radius:9px;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:700}
.top-name small{display:block;font-size:11px;color:var(--ink3);line-height:1}
.top-name input{border:1px solid transparent;border-radius:7px;padding:2px 6px;margin-left:-6px;font-weight:600;font-size:15px;background:transparent;width:190px}
.top-name input:hover{border-color:var(--line)}.top-name input:focus{border-color:var(--acc);outline:none;background:#fff}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--surf2);border:1px solid var(--line)}
.seg button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;padding:6px 12px;border-radius:7px;color:var(--ink2);font-weight:500;font-size:13px}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg.small button{padding:5px 9px}
#devices{margin:0 auto}
.top-r{display:flex;align-items:center;gap:8px}
.sep{width:1px;height:24px;background:var(--line);margin:0 4px}
.ico{width:34px;height:34px;border-radius:8px;border:0;background:transparent;color:var(--ink2);display:grid;place-items:center}
.ico:hover:not(:disabled){background:var(--surf2);color:var(--ink)}.ico:disabled{opacity:.35;cursor:default}
.btn{display:inline-flex;align-items:center;gap:7px;height:36px;white-space:nowrap;padding:0 14px;border-radius:9px;border:1px solid var(--line2);background:#fff;font-weight:600;font-size:13px}
.btn:hover{border-color:var(--ink3)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}.btn.primary:hover{background:var(--acc-ink)}
.btn.sm{height:30px;padding:0 10px;font-size:12px}

/* рабочая область */
.shell{display:grid;grid-template-columns:76px 330px 1fr;height:calc(100% - 58px)}
.shell.preview{grid-template-columns:0 0 1fr}.shell.preview .rail,.shell.preview .panel{display:none}
.rail{background:var(--surf);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;padding:10px 8px;overflow-y:auto}
.rail button{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;padding:9px 2px;border-radius:10px;color:var(--ink2);font-size:11px;font-weight:500}
.rail button svg{width:20px;height:20px}
.rail button:hover{background:var(--surf2);color:var(--ink)}
.rail button[aria-current="true"]{background:var(--acc-soft);color:var(--acc-ink)}
.panel{background:var(--surf);border-right:1px solid var(--line);overflow-y:auto;padding:16px 16px 40px}
.panel h2{font-size:16px;margin-bottom:2px}
.panel .sub{color:var(--ink3);font-size:12.5px;margin-bottom:14px}
.grp{margin-top:20px}
.grp>h3{font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.grp>h3 span{font:400 11px var(--mono);letter-spacing:0;text-transform:none}
.hint{font-size:12px;color:var(--ink3);margin-top:6px}
.warn{font-size:12px;color:var(--warn);margin-top:8px;display:grid;gap:3px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line2);background:#fff;border-radius:999px;padding:5px 11px;font-size:12.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--ink3);color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--acc);background:var(--acc-soft);color:var(--acc-ink);font-weight:600}
.chip i{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.12)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cards.one{grid-template-columns:1fr}.cards.three{grid-template-columns:1fr 1fr 1fr}
.card{position:relative;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:var(--r);padding:9px;display:flex;flex-direction:column;gap:6px;min-width:0}
.card:hover{border-color:var(--line2)}
.card[aria-pressed="true"]{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-soft)}
.card[aria-pressed="true"]::after{content:"✓";position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--acc);color:#fff;font-size:11px;display:grid;place-items:center}
.card b{font-size:12.5px;line-height:1.25;font-weight:600}
.card small{font-size:11px;color:var(--ink3);line-height:1.3}
.sw{display:flex;gap:4px}.sw i{flex:1;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.08)}
.pal .mini{height:40px;border-radius:8px;position:relative;overflow:hidden;display:flex;align-items:center;gap:6px;padding:0 9px}
.pal .mini span{height:12px;border-radius:4px}
.font{flex-direction:row;align-items:center;gap:10px}
.font .aa{font-size:26px;line-height:1;width:40px;text-align:center;flex:none}
.font div{min-width:0}.font b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obj img{width:100%;height:78px;object-fit:contain;border-radius:8px;background:#20242B}
.fxt{padding:0;overflow:hidden}
.fxt .cx-tile{height:64px;position:relative;overflow:hidden;border-radius:10px 10px 0 0}
.fxt b{padding:0 9px}.fxt small{padding:0 9px 8px}
.row{display:flex;align-items:center;gap:10px;margin-top:10px}
.row label{flex:1;font-size:12.5px;color:var(--ink2)}
.row output{font:12px var(--mono);color:var(--ink3);min-width:44px;text-align:right}
input[type="range"]{width:150px;accent-color:var(--acc)}
.colour{display:flex;align-items:center;gap:8px;margin-top:8px}
.colour input[type="color"]{width:36px;height:30px;border:1px solid var(--line2);border-radius:7px;padding:2px;background:#fff}
.colour input[type="text"]{width:96px;font:12.5px var(--mono);border:1px solid var(--line2);border-radius:7px;padding:5px 7px}
.colour label{flex:1;font-size:12.5px;color:var(--ink2)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:12.5px;color:var(--ink2)}
.switch input{width:36px;height:20px;accent-color:var(--acc)}
textarea.ask{width:100%;min-height:74px;resize:vertical;border:1.5px solid var(--line2);border-radius:10px;padding:9px 10px;font-size:13px;background:#fff}
textarea.ask:focus{border-color:var(--acc);outline:none}
.ask-box{background:linear-gradient(180deg,var(--acc-soft),#fff);border:1px solid #DCD6FB;border-radius:14px;padding:12px}
.ask-box p{font-size:12px;color:var(--ink2);margin-bottom:8px}
.ask-box .btn{margin-top:8px;width:100%;justify-content:center}
.examples{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.examples button{border:0;background:#fff;border:1px dashed var(--line2);border-radius:999px;padding:3px 9px;font-size:11.5px;color:var(--ink2)}
.sect{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:6px}
.sect.off{opacity:.55}
.sect select{border:1px solid var(--line2);border-radius:7px;padding:4px 6px;font-size:12.5px;background:#fff;max-width:100%}
.sect .nm{font-size:12.5px;font-weight:600}
.sect .mv{display:flex;gap:2px}.sect .mv button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:#fff;font-size:12px;color:var(--ink2)}
.sect .mv button:disabled{opacity:.3}
.txt{width:100%;border:1px solid var(--line2);border-radius:8px;padding:7px 9px;font-size:13px;background:#fff;margin-top:6px}

/* холст */
.canvas{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 0%,#FBFBFD,var(--bg) 70%)}
.stage{position:absolute;inset:0;display:flex;justify-content:center;padding:22px 26px 26px;overflow:hidden}
.device{background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 50px rgba(20,20,40,.14);overflow:hidden;display:flex;flex-direction:column;transition:width .25s}
.chrome{height:34px;flex:none;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--line);background:#fff}
.chrome i{width:10px;height:10px;border-radius:50%;background:#FF5F57}.chrome i:nth-child(2){background:#FEBC2E}.chrome i:nth-child(3){background:#28C840}
.chrome span{margin-left:12px;font:11.5px var(--sans);color:var(--ink3);background:var(--surf2);border-radius:6px;padding:3px 10px;min-width:220px}
.viewport{position:relative;flex:1;overflow:hidden;background:#111}
.viewport iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#111}
.device.phone{border-radius:34px;padding:0 0 12px;border:10px solid #16161B;background:#16161B}
.device.phone .chrome{background:#16161B;border:0;justify-content:center}.device.phone .chrome i{display:none}.device.phone .chrome span{background:#26262E;color:#9A9AA6;min-width:150px;text-align:center}
.device.phone .viewport{border-radius:22px}
.shell.preview .stage{padding:16px}

/* подсказки фона */
.tray{position:absolute;left:24px;right:24px;bottom:18px;z-index:4;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(20,20,40,.18);padding:12px 14px}
.tray-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tray-head b{font-size:13.5px}.tray-head span{flex:1;font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sug{text-align:left;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:0;overflow:hidden}
.sug:hover{border-color:var(--acc)}.sug[aria-pressed="true"]{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-soft)}
.sug .cx-tile{height:92px;position:relative;overflow:hidden}
.sug .cx-tile em{position:absolute;left:10px;bottom:8px;z-index:1;font:600 12px var(--sans);font-style:normal;padding:3px 8px;border-radius:6px}
.sug p{font-size:12px;padding:7px 10px 9px;color:var(--ink2)}

/* окно сохранения */
.modal{position:fixed;inset:0;z-index:20;background:rgba(15,15,25,.45);display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.mbox{width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:18px;padding:22px 24px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.mbox h2{font-size:19px}.mbox .sub{color:var(--ink3);margin:4px 0 14px}
.sum{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13px;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.sum dt{color:var(--ink3)}.sum dd{font-weight:500}
.mbox pre{margin-top:10px;max-height:220px;overflow:auto;background:var(--surf2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:11.5px/1.5 var(--mono);white-space:pre-wrap;word-break:break-word}
.mbox details{margin-top:14px}.mbox summary{cursor:pointer;font-weight:600;font-size:13px}
.mact{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;background:#17171C;color:#fff;border-radius:10px;padding:9px 16px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
@media (max-width:1100px){.shell{grid-template-columns:64px 290px 1fr}.top-l{min-width:0}.btn#random{display:none}}
/* телефон заказчика: макет на весь экран, разделы внизу, панель выезжает снизу по нажатию на раздел */
@media (max-width:760px){
  .top{height:52px;gap:8px;padding:0 10px}.top-l{gap:8px}.top-name small{display:none}.top-name input{width:120px;font-size:14px}
  #devices,.sep,#undo,#redo,#preview,#langs{display:none}
  .btn{height:32px;padding:0 10px}
  .shell{display:block;height:calc(100% - 52px);position:relative}
  .canvas{position:absolute;inset:0 0 62px 0}
  .stage{padding:10px}
  .rail{position:absolute;left:0;right:0;bottom:0;height:62px;flex-direction:row;justify-content:space-around;padding:4px 6px;border-right:0;border-top:1px solid var(--line);z-index:6}
  .rail button{flex:1;padding:6px 0}
  .panel{position:absolute;left:0;right:0;bottom:62px;max-height:58vh;border-right:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(20,20,40,.18);z-index:5;transform:translateY(105%);transition:transform .25s}
  .shell.sheet .panel{transform:none}
  .tray{left:8px;right:8px;bottom:70px}.tray-list{grid-template-columns:1fr 1fr}
  .shell.preview .rail{display:flex}
}

/* ---------- живые примеры в панелях ---------- */
.cards.two{grid-template-columns:1fr 1fr}
.tcard{padding:6px 6px 8px;gap:6px}.tcard .th{border-radius:8px;display:block;height:64px;width:100%;overflow:hidden}
.tcard.static{cursor:default}
.th-html{display:block;height:64px;border-radius:8px;overflow:hidden;box-sizing:border-box}
.th-count b{animation:thCount 2.4s ease-in-out infinite}.th-reveal i{animation:thReveal 2.4s ease-in-out infinite}.th-reveal i+i{animation-delay:.3s}
@keyframes thCount{0%,40%{opacity:.25}60%,100%{opacity:1}}@keyframes thReveal{0%,30%{opacity:0;transform:translateY(6px)}60%,100%{opacity:1;transform:none}}
.sect{display:block;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-top:8px}
.sect-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}.sect-h b{flex:1;font-size:13px}
.sect .mv{display:flex;gap:3px}.sect .mv button{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--ink2)}.sect .mv button:disabled{opacity:.3}
.tok{display:grid;grid-template-columns:18px 1fr 34px 64px auto;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line)}
.tok:first-of-type{border-top:0}.tok .tsw{width:18px;height:18px;border-radius:5px;border:1px solid rgba(0,0,0,.15)}
.tok label{font-size:12.5px;color:var(--ink2);line-height:1.2}.tok label small{display:block;font:10.5px var(--mono);color:var(--ink3)}
.tok input[type="color"]{width:34px;height:26px;border:1px solid var(--line2);border-radius:6px;padding:1px;background:#fff}.tok input[type="range"]{width:64px}
.tok.changed label{color:var(--acc-ink);font-weight:600}
.ico.sm{width:24px;height:24px}
details.tokg{border:1px solid var(--line);border-radius:10px;padding:2px 10px;margin-top:6px;background:#fff}details.tokg summary{cursor:pointer;font-weight:600;font-size:12.5px;padding:7px 0}
.hint.ok{color:var(--ok)}.lbl{display:block;font-size:12px;color:var(--ink3);margin-top:10px}
.num-in{width:120px;border:1px solid var(--line2);border-radius:7px;padding:5px 7px;font:12.5px var(--mono)}
.otile{position:relative;height:118px;overflow:hidden;border-radius:10px 10px 0 0;color:var(--ink)}
.otile .oscale{position:absolute;left:50%;top:50%;width:440px;translate:-50% -50%;scale:.36;display:grid}
.otile.mini{height:78px;border-radius:8px}.otile.mini .oscale{scale:.24}
.sug .otile{height:150px}.sug .otile .oscale{scale:.42}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--acc);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- подсветка изменённого места ---------- */
.flash{position:absolute;z-index:8;pointer-events:none;border:2px solid var(--acc);border-radius:10px;box-shadow:0 0 0 4px rgba(91,71,224,.25),0 0 30px rgba(91,71,224,.45);animation:flash 1.3s ease-out forwards}
@keyframes flash{0%{opacity:0;transform:scale(1.02)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}

/* ---------- кнопки шапки ---------- */
.deep-btn[aria-pressed="true"]{background:#17171C;color:#fff;border-color:#17171C}
.mact.center{justify-content:center}.hint.center{text-align:center;margin-top:12px}
.bigcode{margin:18px auto 6px;text-align:center;font:600 34px/1.2 var(--mono);letter-spacing:.12em;padding:18px 16px;border-radius:14px;background:var(--acc-soft);color:var(--acc-ink);user-select:all;word-break:break-all}

/* ---------- Deep edit: тёмная оболочка ---------- */
body.deep{--bg:#0E1014;--surf:#15181E;--surf2:#1C2028;--line:#272C36;--line2:#343B48;--ink:#E9EBF1;--ink2:#A9AFBE;--ink3:#767E90;--acc:#8B7CFF;--acc-soft:#262046;--acc-ink:#C7BEFF}
body.deep .top,body.deep .rail,body.deep .panel{background:var(--surf)}
body.deep .btn,body.deep .chip,body.deep .card,body.deep .sect,body.deep details.tokg,body.deep .sect .mv button,body.deep .tok input[type="color"],body.deep .txt,body.deep textarea.ask,body.deep .colour input,body.deep .num-in,body.deep .seg button[aria-pressed="true"],body.deep select{background:var(--surf2);color:var(--ink);border-color:var(--line2)}
body.deep .btn.primary{background:var(--acc);border-color:var(--acc);color:#0E0B22}
body.deep .deep-btn[aria-pressed="true"]{background:var(--acc);color:#0E0B22;border-color:var(--acc)}
body.deep .ask-box{background:linear-gradient(180deg,#1E1A3A,var(--surf2));border-color:#3A3270}.body.deep .examples button{background:var(--surf2)}
body.deep .canvas{background:radial-gradient(circle at 50% 0%,#191C24,#0B0C10 70%)}
body.deep .device{background:#1A1D24}body.deep .chrome{background:#1A1D24;border-color:#2A2F3A}body.deep .chrome span{background:#252A34;color:#8E95A6}
body.deep .tray,body.deep .mbox{background:rgba(21,24,30,.97);color:var(--ink);border-color:var(--line2)}body.deep .sug{background:var(--surf2);border-color:var(--line2)}
body.deep .top-name input{color:var(--ink)}body.deep .top-name input:focus{background:var(--surf2)}
.dv-hover,.dv-sel{position:absolute;z-index:9;pointer-events:none;border-radius:4px}
.dv-hover{outline:1.5px dashed rgba(139,124,255,.9);outline-offset:1px}
.dv-hover::after{content:attr(data-label);position:absolute;left:0;top:-20px;font:600 10.5px var(--sans);background:rgba(139,124,255,.95);color:#0E0B22;padding:2px 6px;border-radius:4px;white-space:nowrap}
.dv-sel{outline:2px solid #8B7CFF;outline-offset:2px;box-shadow:0 0 0 6px rgba(139,124,255,.18)}
.dv-tag{position:absolute;left:-2px;top:-24px;font:700 11px var(--sans);background:#8B7CFF;color:#0E0B22;padding:3px 8px;border-radius:5px;white-space:nowrap}
.dv-move{position:absolute;right:-14px;top:-14px;width:26px;height:26px;border-radius:50%;border:0;background:#8B7CFF;color:#0E0B22;font-size:14px;cursor:grab;pointer-events:auto;box-shadow:0 4px 12px rgba(0,0,0,.4)}
body.dv-dragging,body.dv-dragging *{cursor:grabbing!important;user-select:none}
body.dv-dragging .dv-insp{pointer-events:none;opacity:.35;transition:opacity .15s}
.dv-hint{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;border-radius:12px;background:rgba(21,24,30,.95);color:#E9EBF1;border:1px solid #343B48;font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);white-space:nowrap}
.dv-hint b{color:#C7BEFF}.dv-hint span{color:#A9AFBE}
.dv-insp{position:absolute;z-index:12;width:320px;max-height:calc(100% - 16px);display:flex;flex-direction:column;border-radius:14px;background:#15181E;color:#E9EBF1;border:1px solid #343B48;box-shadow:0 24px 60px rgba(0,0,0,.55);font-size:12.5px}
.dv-head{display:flex;align-items:center;gap:8px;padding:10px 10px 8px 14px;border-bottom:1px solid #272C36}.dv-head b{font-size:13.5px}
.dv-id{flex:1;font:10.5px var(--mono);color:#767E90;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-x{width:26px;height:26px;border-radius:7px;border:1px solid #343B48;background:#1C2028;color:#E9EBF1}
.dv-tabs{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid #272C36}.dv-tabs button{flex:1;border:0;background:transparent;color:#A9AFBE;padding:6px 4px;border-radius:7px;font-weight:600;font-size:12px}.dv-tabs button[aria-current="true"]{background:#262046;color:#C7BEFF}
.dv-body{padding:10px 14px;overflow-y:auto}
.dv-foot{padding:8px 14px 12px;border-top:1px solid #272C36}.dv-foot .btn,.dv-body .btn{background:#1C2028;color:#E9EBF1;border-color:#343B48}
.dv-g{border-top:1px solid #272C36;margin-top:10px;padding-top:8px}.dv-g:first-child{border-top:0;margin-top:0;padding-top:0}.dv-g>b{display:block;font:600 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#767E90;margin-bottom:4px}
.dv-row{display:flex;align-items:center;gap:8px;margin-top:7px}.dv-row label{flex:1;color:#A9AFBE}.dv-row output{font:11px var(--mono);color:#767E90;min-width:46px;text-align:right}.dv-row input[type="range"]{width:120px;accent-color:#8B7CFF}
.dv-row select,.dv-row input[type="number"]{width:150px;background:#1C2028;color:#E9EBF1;border:1px solid #343B48;border-radius:7px;padding:4px 6px}
.dv-l{display:block;margin-top:9px;color:#A9AFBE}
.dv-ta{width:100%;margin-top:5px;background:#1C2028;color:#E9EBF1;border:1px solid #343B48;border-radius:8px;padding:7px 9px;font:13px var(--sans);resize:vertical}
.dv-hint2{color:#767E90;font-size:11.5px;margin-top:6px}
.dv-sw{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;align-items:center}.dv-sw button{width:20px;height:20px;border-radius:5px;border:1px solid rgba(255,255,255,.18);padding:0}.dv-sw input{width:30px;height:22px;border:1px solid #343B48;border-radius:5px;background:#1C2028;padding:1px}
.dv-chips{display:flex;gap:3px}.dv-chips.wrap{flex-wrap:wrap;justify-content:flex-end}.dv-chips button{border:1px solid #343B48;background:#1C2028;color:#A9AFBE;border-radius:6px;padding:3px 7px;font-size:11.5px}.dv-chips button[aria-pressed="true"]{border-color:#8B7CFF;color:#E9EBF1;background:#262046}
.dv-sw2{display:flex;align-items:center;justify-content:space-between;margin-top:10px;color:#A9AFBE}.dv-sw2 input{accent-color:#8B7CFF;width:16px;height:16px}
.dv-fx{display:grid;grid-template-columns:1fr 1fr;gap:5px}.dv-fx button{display:flex;align-items:center;gap:7px;border:1px solid #343B48;background:#1C2028;color:#A9AFBE;border-radius:8px;padding:6px 8px;font-size:11.5px;text-align:left}.dv-fx button[aria-pressed="true"]{border-color:#8B7CFF;color:#E9EBF1;background:#262046}
.dv-fxi{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#8B7CFF,#C7BEFF);flex:none}
.dv-nudge{display:grid;justify-items:center;gap:4px;margin:10px 0}.dv-nudge div{display:flex;gap:30px}.dv-nudge button{width:30px;height:30px;border-radius:8px;border:1px solid #343B48;background:#1C2028;color:#E9EBF1}

/* шапка на средних экранах: у устройств и «Surprise me» только значки */
@media (max-width:1440px){#devices .tl,#random .tl{display:none}#devices button{padding:6px 10px}.top{gap:10px}.top-l{min-width:0}.top-name input{width:150px}}
@media (max-width:1100px){.btn#random{display:inline-flex}#langs{display:none}}
@media (max-width:760px){#deep,#save,#random{display:none!important}.top-l .logo{flex:none}#want{padding:0 12px}}