.ds-root{display:flex;flex-direction:column;gap:15px;padding-bottom:25px;min-height:75vh;color:#E6E6E6;font-family:Inter,Segoe UI,system-ui,sans-serif}
.ds-top{display:flex;gap:18px;align-items:end;justify-content:space-between;padding:22px 24px;background:linear-gradient(120deg,#1E1E1E,#181818);border:1px solid #393939;border-radius:16px}
.ds-eyebrow{font-size:10px;letter-spacing:1.7px;text-transform:uppercase;color:#FF0026;font-weight:850}
.ds-top h2{font-size:clamp(25px,2.6vw,36px);letter-spacing:-1px;font-weight:860;margin:5px 0 7px}
.ds-top p{font-size:12px;color:#A6A6A6;margin:0;line-height:1.6;max-width:650px}
.ds-top-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.ds-select,.ds-input{border-radius:9px;border:1px solid #414141;background:#242424;color:#EBEBEB;font-size:12px;padding:10px 12px;outline:0;max-width:100%;font-family:inherit}
.ds-select:focus,.ds-input:focus{border-color:#FF0026;box-shadow:0 0 0 2px #E0001830}
.ds-top-actions .ds-select{max-width:295px}
.ds-toolbar{display:flex;align-items:center;gap:8px;padding:13px 15px;background:#191919;border:1px solid #2D2D2D;border-radius:12px;flex-wrap:wrap}
.ds-btn{cursor:pointer;border:1px solid #4B4B4B;border-radius:9px;padding:10px 12px;font-size:11px;font-weight:740;background:#2A2A2A;color:#EAEAEA;transition:background .15s ease,border-color .15s ease;white-space:nowrap}
.ds-btn:hover{background:#383838;border-color:#C90019}
.ds-btn:focus-visible{outline:2px solid #FF0026;outline-offset:2px}
.ds-btn.primary{background:linear-gradient(115deg,#E00018,#C90019);color:#fff;border-color:#E00018}
.ds-btn.secondary{background:#262626;color:#D8D8D8}
.ds-btn.small{padding:8px 10px;font-size:10px}
.ds-btn:disabled{opacity:.4;cursor:not-allowed}
.ds-toolbar-spacer{flex:1}
.ds-unsaved{font-size:11px;color:#9E9E9E;margin-right:6px;white-space:nowrap}
.ds-unsaved[data-dirty=true]{color:#FF0026}
.ds-layout{display:grid;grid-template-columns:175px minmax(215px,.84fr) minmax(360px,1.7fr);min-height:650px;align-items:stretch;border:1px solid #313131;border-radius:17px;background:#191919;overflow:hidden}
.ds-tabs{padding:17px 9px;background:linear-gradient(155deg,#1B1B1B,#161616);border-right:1px solid #313131;display:flex;flex-direction:column;gap:5px}
.ds-tab{display:block;white-space:normal;width:100%;text-align:left;padding:12px 11px;border:1px solid transparent;background:transparent;color:#9E9E9E;font-size:11px;font-weight:700}
.ds-tab.active{border-color:#494949;background:#303030;color:#E5E5E5;box-shadow:inset 3px 0 #FF0026}
.ds-tab:hover{background:#272727;color:#E4E4E4}
.ds-form{padding:23px 20px 30px;background:#1A1A1A;border-right:1px solid #333333;min-width:0;overflow:auto;max-height:790px}
.ds-panel-title{margin-bottom:20px}
.ds-panel-title h3{font-size:20px;line-height:1.23;letter-spacing:-.5px;margin:10px 0}
.ds-panel-title p{font-size:11px;line-height:1.7;color:#949494;margin:0}
.ds-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:16px}
.ds-field{display:flex;min-width:0;flex-direction:column;gap:9px}
.ds-field-title{font-size:11px;color:#BCBCBC;font-weight:700;line-height:1.4}
.ds-input{width:100%;min-width:0;padding:10px}
.ds-input[type=color]{height:44px;padding:5px;cursor:pointer;background:#2B2B2B}
.ds-input[type=checkbox]{width:19px;height:19px;accent-color:#E00018}
.ds-range-row{display:flex;gap:8px;align-items:center}
.ds-range-row .ds-input{flex:1;min-width:0;accent-color:#E00018;border:0;background:transparent;padding:5px 0}
.ds-value{font:10px ui-monospace,Consolas,monospace;min-width:44px;text-align:right;color:#FF0026}
.ds-toggle-line{display:flex;align-items:center;gap:12px;cursor:pointer;padding:7px 0}
.ds-switch{width:28px;height:17px;display:inline-block;border:1px solid #5A5A5A;border-radius:9px;position:relative;background:#2B2B2B}
.ds-switch:before{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ACACAC;transition:transform .2s}
.ds-toggle-line input:checked+.ds-switch{background:#474747}
.ds-toggle-line input:checked+.ds-switch:before{transform:translateX(11px);background:#EBEBEB}
.ds-note{color:#9F9F9F;font-size:11px;line-height:1.7;margin-top:18px}
.ds-presets{display:grid;grid-template-columns:1fr;gap:10px}
.ds-preset{display:flex;flex-direction:column;gap:6px;align-items:start;text-align:left;border:1px solid #464646;background:#222222;padding:13px;white-space:normal}
.ds-preset.selected{border-color:#E00018;box-shadow:inset 3px 0 #FF0026;background:#2B2B2B}
.ds-preset strong{font-size:13px;color:#E9E9E9}
.ds-preset>span:last-child{font-size:10px;font-weight:500;color:#9B9B9B}
.ds-preset-colors{display:flex;gap:5px;margin-bottom:3px}
.ds-sw{height:20px;width:27px;display:inline-block;border-radius:6px;border:1px solid #ffffff28}
.ds-preview{background:radial-gradient(ellipse at 48% 8%,#3333332F,transparent 45%),#131313;min-width:0;display:flex;flex-direction:column;padding:0}
.ds-preview-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #343434;background:#1E1E1E}
.ds-preview-bar strong{font-size:12px;display:block}
.ds-preview-bar small{font-size:10px;color:#949494;display:block;margin-top:4px}
.ds-devices{display:flex;gap:5px;flex-wrap:wrap}
.ds-devices .ds-btn.selected{background:#404040;border-color:#C90019;color:#E2E2E2}
.ds-preview-container{display:flex;justify-content:center;align-items:start;flex:1;min-height:560px;padding:20px;overflow:auto;transition:background .2s}
.ds-preview-container[data-viewport=desktop] .ds-preview-iframe{width:100%}
.ds-preview-container[data-viewport=tablet] .ds-preview-iframe{width:min(768px,100%)}
.ds-preview-container[data-viewport=mobile] .ds-preview-iframe{width:min(390px,100%)}
.ds-preview-iframe{height:580px;min-height:480px;display:block;background:#111111;border:1px solid #5C5C5C;border-radius:10px;box-shadow:0 18px 40px #000a;transition:width .2s}
.ds-plugin-list{display:flex;flex-direction:column;gap:9px}
.ds-plugin{border:1px solid #454545;background:#252525;border-radius:12px;padding:13px;display:flex;align-items:start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ds-plugin strong{display:block;font-size:12px;color:#E2E2E2}
.ds-plugin small{display:block;font-size:10px;color:#9D9D9D;line-height:1.6;margin-top:5px}
.ds-plugin-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ds-status-mini{border:1px solid #565656;border-radius:7px;padding:5px 7px;font-size:9px;color:#B9B9B9}
.ds-status-mini.ready{color:#D1D1D1;border-color:#C90019;background:#2C2C2C}
.ds-version-panel{display:flex;flex-direction:column;gap:14px}
.ds-version-panel>p{font-size:12px;color:#C9C9C9;line-height:1.6}
.ds-history{display:flex;flex-direction:column;gap:9px}
.ds-history-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;border:1px solid #484848;border-radius:10px;padding:10px 12px;font-size:11px;color:#CACACA}
.ds-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px;padding:12px 15px;background:#191919;border:1px solid #323232;border-radius:12px;font-size:11px;color:#B9B9B9;line-height:1.5}
.ds-status-text[data-bad=true]{color:#FF0026}
.ds-footer-note{color:#848484}
@media(max-width:1530px){
 .ds-layout{grid-template-columns:150px minmax(220px,.9fr) minmax(300px,1.5fr)}
 .ds-form{padding:19px 15px}
 .ds-preview-container{padding:12px}
 .ds-fields{grid-template-columns:1fr 1fr;gap:12px}
}
@media(max-width:1120px){
 .ds-layout{grid-template-columns:160px 1fr}
 .ds-preview{grid-column:1/-1;min-height:400px}
 .ds-preview-container{min-height:460px}
 .ds-preview-iframe{height:460px}
}
@media(max-width:720px){
 .ds-top{padding:16px;align-items:stretch;flex-direction:column}
 .ds-top-actions .ds-select{max-width:none;flex:1}
 .ds-toolbar{padding:10px;gap:6px}
 .ds-layout{display:flex;flex-direction:column}
 .ds-tabs{flex-direction:row;overflow-x:auto;padding:9px;gap:6px;border-right:0;border-bottom:1px solid #313131}
 .ds-tab{width:auto;min-width:120px;flex:none;white-space:nowrap}
 .ds-form{max-height:none;border-right:0;padding:17px}
 .ds-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ds-preview-container{min-height:470px}
 .ds-preview-iframe{height:470px}
}
@media(max-width:410px){
 .ds-fields{grid-template-columns:1fr}
 .ds-preview-bar{flex-direction:column;align-items:start}
 .ds-preview-container{padding:9px}
 .ds-toolbar .ds-btn{padding:8px}
}
@media(prefers-reduced-motion:reduce){.ds-root *{transition:none!important}}

.ds-shadow-host{display:block;overflow:auto;container-type:inline-size;background:#0F0F0F;}
.ds-shadow-host .ds-demo-body{min-height:100%;}