.widget-editor{display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:18px}.widget-tabs{display:flex;flex-wrap:wrap;gap:5px;padding:5px;margin:20px 0 16px;border:1px solid var(--line);border-radius:12px;background:#1d1b22}.widget-tab{flex:1;min-width:130px;border:1px solid transparent;border-radius:8px;padding:11px 14px;background:transparent;color:var(--muted);font:600 12px 'Segoe UI',sans-serif;cursor:pointer}.widget-tab.active{background:#393044;color:#eadcf4;border-color:#b895cc35}.widget-tab:hover{color:#eee6f4}.design-preview-card{min-width:0;padding:20px;align-self:start;position:sticky;top:18px}.design-preview-card .card-head{margin-bottom:15px}.design-stage{height:380px;position:relative;overflow:hidden;border:1px solid #ffffff08;border-radius:10px;background-color:#19171e;background-image:linear-gradient(45deg,#ffffff03 25%,transparent 25%),linear-gradient(-45deg,#ffffff03 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ffffff03 75%),linear-gradient(-45deg,transparent 75%,#ffffff03 75%);background-size:28px 28px;background-position:0 0,0 14px,14px -14px,-14px 0}.design-stage iframe{position:absolute;left:50%;top:50%;border:0;max-width:none;transform-origin:center}.design-stage-label{position:absolute;top:12px;left:14px;color:#8e8199;font-size:10px;letter-spacing:1px;pointer-events:none}.design-output{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 0}.design-output strong{font-size:20px;font-weight:600;color:#e6dced;display:block;font-variant-numeric:tabular-nums}.design-output small{display:block;color:var(--muted);margin-top:4px;font-size:11px}.design-output label{color:var(--muted);font-size:11px}.design-output select{margin-top:5px;width:105px}.design-preview-card .hint{margin-top:12px}.design-settings{padding:0;overflow:hidden}.design-settings-header{padding:18px 18px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.design-settings-header h3{font-size:14px;margin:0}.design-fields{max-height:540px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#54445e transparent;padding:4px 18px}.design-group{margin:0;padding:16px 0;border:0;border-bottom:1px solid #ffffff07;min-width:0}.design-group legend{float:left;width:100%;margin-bottom:12px;color:#af9abb;font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase}.design-field{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,118px);align-items:center;gap:9px;margin:10px 0;clear:both}.design-field label{font-size:11px;color:#c4b9cc;margin:0;line-height:1.4}.design-field input,.design-field select{min-width:0;margin:0;padding:7px 8px;font-size:11px;width:100%;border-radius:7px}.design-field input[type=range]{padding:0;accent-color:#b895cc;grid-column:2;min-width:0;height:22px}.design-field output{grid-column:2;font-size:10px;text-align:right;margin-top:-8px;color:#bfa4d0}.design-field input[type=color]{height:30px;width:50px;justify-self:end;padding:3px;cursor:pointer}.design-check input{width:17px;height:17px;justify-self:end;accent-color:#b895cc}.design-actions{padding:16px 18px;border-top:1px solid var(--line);background:#211e27}.design-status{font-size:11px;color:#8fa992;line-height:1.45;margin:0 0 10px}.design-status.unsaved{color:#d3aa86}.design-conflict{padding:12px;border:1px solid #d3aa8640;background:#d3aa8609;border-radius:8px;font-size:11px;line-height:1.5;margin:0 0 12px}.design-conflict .button{margin-top:7px;width:100%;font-size:11px;min-height:32px}.design-settings .text-button{font-size:11px}.design-note{font-size:11px;color:var(--muted);line-height:1.65;margin:17px 0 0}.design-note strong{color:#c3b4ce;font-weight:500}.design-replay{font-size:11px;white-space:nowrap}.widget-create-row button[hidden]{display:none!important}
@media(max-width:1150px){.widget-editor{grid-template-columns:minmax(0,1fr) 300px}.design-preview-card{padding:16px}.design-stage{height:340px}}
@media(max-width:980px){.widget-editor{grid-template-columns:1fr}.design-preview-card{position:static}.design-fields{max-height:430px;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.design-group{align-self:start}.design-stage{height:340px}}
@media(max-width:560px){.widget-tabs{gap:3px;margin-top:16px}.widget-tab{flex-basis:45%;padding:10px 8px;font-size:11px}.design-preview-card{padding:14px}.design-stage{height:270px}.design-fields{display:block;max-height:390px}.design-output strong{font-size:18px}.design-output small{font-size:10px}.design-output{align-items:start}.design-settings-header{padding:15px}.design-field{grid-template-columns:minmax(0,1fr) 130px}.design-preview-card .card-head h2{font-size:16px}}
.design-field select,.design-output select,.widget-content-controls select{background:#19171f;border:1px solid #493b54;color:#e3d8eb;border-radius:7px;padding:7px 8px;font:11px 'Segoe UI',sans-serif;min-width:0;max-width:100%}.widget-content-controls{margin:18px 0}.widget-content-controls .card-head{margin-bottom:14px}.widget-content-controls p{line-height:1.6}.content-toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:15px 0}.content-toolbar .button{font-size:12px}.content-entry{display:grid;grid-template-columns:130px 1fr 1.6fr 115px auto;align-items:end;gap:9px;border:1px solid #ffffff09;border-radius:10px;padding:12px;margin:10px 0;background:#17151c55}.content-entry label{font-size:10px;margin-bottom:5px}.content-entry input,.content-entry select{width:100%;min-width:0;font-size:12px}.content-entry .entry-options{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.content-entry .entry-options button{min-height:29px;padding:4px 8px;font-size:11px}.content-entry .entry-options label{display:flex;gap:5px;align-items:center;margin:0}.content-entry input[type=checkbox],.roulette-config input[type=checkbox]{width:16px;height:16px;accent-color:#b895cc}.content-empty{padding:24px;border:1px dashed #51415e;border-radius:10px;color:var(--muted);font-size:12px}.content-status{font-size:12px;color:#d3aa86;min-height:20px}.roulette-config{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}.roulette-config label{font-size:11px;color:#c4b7ce}.roulette-config input,.roulette-config select{display:block;width:100%;margin-top:6px}.roulette-config label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px}.roulette-items .content-entry{grid-template-columns:1fr 120px auto}.roulette-presets{display:flex;flex-wrap:wrap;gap:6px}.roulette-live{padding:12px 14px;border:1px solid #b895cc30;background:#b895cc09;border-radius:9px;color:#d7c3e5;font-size:12px}.roulette-items small{font-size:10px;color:var(--muted)}.widget-content-controls .button[hidden]{display:none!important}@media(max-width:1000px){.content-entry{grid-template-columns:1fr 1fr}.content-entry .entry-options{grid-column:1/-1}.roulette-config{grid-template-columns:1fr 1fr}}@media(max-width:560px){.content-entry{grid-template-columns:1fr}.content-entry .entry-options{grid-column:1}.roulette-config{grid-template-columns:1fr 1fr;gap:12px}.roulette-items .content-entry{grid-template-columns:1fr 80px}.roulette-items .entry-options{grid-column:1/-1}.widget-content-controls{padding:15px}.roulette-config input,.roulette-config select{font-size:12px;padding:8px}.content-toolbar .button{flex-grow:1}}