:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:#18243a;
background:#f3f6fa;
font-size:14px;
--blue:#185bd8;
--line:#dce3ed;
--muted:#5c6b80}
*{box-sizing:border-box}
body{margin:0}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:wait;
opacity:.55}
button,input,textarea,select{border:1px solid var(--line);
border-radius:8px}
button{background:white;
color:#26344a;
padding:9px 13px;
font-weight:600}
button:hover{background:#edf3ff}
button.primary{background:var(--blue);
border-color:var(--blue);
color:white}
button.danger{color:#a82735}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #84b4ff;
outline-offset:3px}
input,textarea,select{background:white;
color:#18243a;
padding:10px 12px;
width:100%}
input[type=checkbox]{width:auto;
accent-color:var(--blue)}
textarea{resize:vertical;
min-height:100px}
[hidden]{display:none!important}
.app{max-width:1660px;
margin:auto;
padding:32px}
.eyebrow{font-size:11px;
letter-spacing:.16em;
font-weight:800;
color:#54729a;
text-transform:uppercase}
.topbar{display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:26px}
h1{font-size:29px;
letter-spacing:-1px;
margin:7px 0}
h2{font-size:17px;
letter-spacing:-.3px;
margin:0}
h3{font-size:14px;
margin:0 0 15px}
.muted,.help{color:var(--muted);
line-height:1.55}
.help{font-size:12px;
margin:7px 0 0}
.top-actions,.actions,.row{display:flex;
align-items:center;
gap:9px}
.session{font-size:12px;
padding:7px 11px;
border-radius:30px;
background:#e6edf8;
color:#385477}
.summary{display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
margin-bottom:23px}
.metric{background:white;
border:1px solid var(--line);
border-radius:12px;
padding:17px 20px;
display:flex;
justify-content:space-between;
align-items:center}
.metric strong{font-size:26px;
letter-spacing:-1px}
.metric span{font-size:12px;
color:var(--muted)}
.workspace{display:grid;
grid-template-columns:290px minmax(0,1fr);
gap:20px;
align-items:start}
.panel{background:white;
border:1px solid var(--line);
border-radius:13px;
box-shadow:0 3px 10px #192d4d03;
overflow:hidden}
.panel-head{padding:20px;
border-bottom:1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center;
gap:10px}
.panel-head p{margin-bottom:0}
.filters{padding:16px;
border-bottom:1px solid var(--line);
display:grid;
gap:10px}
.filter-row{display:grid;
grid-template-columns:1fr 1fr;
gap:8px}
.field-list{padding:8px;
max-height:680px;
overflow:auto}
.field-row{border:1px solid transparent;
border-radius:9px;
margin:3px 0;
display:flex;
align-items:center}
.field-row.active{background:#edf4ff;
border-color:#c4d8ff}
.field-select{background:transparent!important;
border:0;
text-align:left;
min-width:0;
flex:1;
padding:13px 10px}
.field-select strong{display:block;
overflow-wrap:anywhere;
font-size:13px;
margin-bottom:8px}
.field-meta{display:flex;
gap:5px;
flex-wrap:wrap}
.badge{font-size:10px;
font-weight:600;
display:inline-flex;
padding:4px 7px;
border-radius:5px;
background:#edf0f5;
color:#53627a;
line-height:1.2}
.badge.on{background:#e1f3eb;
color:#216749}
.badge.off{background:#eceff4;
color:#59677b}
.badge.type{background:#e8effd;
color:#365b94}
.list-foot{padding:14px 18px;
border-top:1px solid var(--line);
font-size:11px;
color:var(--muted)}
.editor-header{padding:21px 24px;
display:flex;
justify-content:space-between;
align-items:start;
gap:14px;
border-bottom:1px solid var(--line)}
.editor-header p{margin:7px 0 0;
font-size:12px;
color:var(--muted)}
.editor-grid{display:grid;
grid-template-columns:minmax(0,1fr) 310px;
align-items:start}
.form-column{padding:24px;
min-width:0}
.section{padding-bottom:23px;
margin-bottom:24px;
border-bottom:1px solid var(--line)}
.section:last-child{border:0;
margin-bottom:0}
.section-kicker{color:#6f7f96;
font-size:10px;
font-weight:800;
letter-spacing:.1em;
margin-bottom:8px}
.form-grid{display:grid;
grid-template-columns:1fr 1fr;
gap:16px}
.control{display:block;
margin:0 0 17px}
.control>span{display:block;
font-size:12px;
font-weight:600;
margin-bottom:7px}
.control:last-child{margin-bottom:0}
.check{display:flex;
align-items:center;
gap:9px;
font-size:13px}
.preview-column{padding:24px 20px;
border-left:1px solid var(--line);
background:#fafbfd;
position:sticky;
top:12px;
min-width:0}
.preview-label{font-size:10px;
font-weight:800;
letter-spacing:.13em;
color:#697d9c}
.preview-card{background:white;
border:1px solid var(--line);
border-radius:11px;
margin-top:16px;
padding:21px 17px;
box-shadow:0 5px 16px #213b6010}
.product-illustration{height:100px;
border-radius:7px;
background:linear-gradient(135deg,#edf2f9,#dce6f4);
display:grid;
place-items:center;
margin-bottom:19px;
color:#657c9d;
font-size:12px}
.preview-card h3{font-size:14px;
margin-bottom:7px}
.preview-card label{font-size:12px;
font-weight:600;
display:block;
margin:20px 0 8px}
.preview-card input,.preview-card textarea{font-size:12px}
.preview-card small{display:block;
color:var(--muted);
font-size:11px;
line-height:1.5;
margin-top:9px}
.preview-note{font-size:11px;
color:var(--muted);
line-height:1.6;
margin:15px 0}
.target-summary{font-size:12px;
background:#eef4ff;
color:#345e99;
border-radius:8px;
padding:11px;
margin-top:12px;
overflow-wrap:anywhere}
.chip-list{display:flex;
gap:7px;
flex-wrap:wrap;
margin-top:12px}
.chip{display:inline-flex;
align-items:center;
gap:6px;
background:#eff3f9;
border:1px solid #dbe4f0;
border-radius:7px;
padding:5px 8px;
font-size:11px;
max-width:100%;
overflow-wrap:anywhere}
.chip button{border:0;
background:transparent;
padding:2px 4px}
.chip img{width:24px;
height:24px;
object-fit:cover;
border-radius:4px}
details{border:1px solid var(--line);
border-radius:9px;
padding:15px;
margin-top:19px}
summary{cursor:pointer;
font-weight:600;
font-size:12px}
details[open] summary{margin-bottom:18px}
.notice{padding:12px 16px;
font-size:12px;
border-radius:8px;
background:#edf4ff;
color:#315a92;
line-height:1.6;
margin-bottom:20px}
.notice.error{background:#fff0f0;
color:#a02e39}
.notice.success{background:#e8f5ed;
color:#276746}
.empty{padding:45px 20px;
text-align:center;
color:var(--muted);
line-height:1.7}
.savebar{position:sticky;
bottom:15px;
margin:20px 0 0 auto;
background:#162740;
color:white;
padding:13px 18px;
border-radius:11px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
box-shadow:0 8px 30px #10274733;
z-index:5;
max-width:100%}
.savebar small{display:block;
color:#bed0e9;
font-size:11px;
margin-top:3px}
.savebar .primary{background:#4282f5}
.savebar button{white-space:nowrap}
.footer{text-align:center;
color:#697c96;
font-size:11px;
margin:26px 0 0}
dialog{border:1px solid var(--line);
border-radius:15px;
max-width:640px;
width:calc(100% - 32px);
padding:0;
color:#18243a;
box-shadow:0 20px 80px #162a4840}
dialog::backdrop{background:#14263d70}
.dialog-header{padding:23px;
border-bottom:1px solid var(--line)}
.dialog-header h2{margin-bottom:8px}
.dialog-body{padding:20px 23px}
.dialog-footer{padding:16px 23px;
border-top:1px solid var(--line);
display:flex;
justify-content:flex-end;
gap:10px}
.product-results{height:310px;
overflow:auto;
margin-top:15px}
.product-result{display:flex;
gap:12px;
align-items:center;
padding:13px 4px;
border-bottom:1px solid #e7edf5;
font-size:13px}
.product-result input{width:auto}
.product-result img{width:40px;
height:40px;
border-radius:6px;
object-fit:cover}
.product-result span{flex:1}
.product-result small{display:block;
color:var(--muted);
margin-top:5px}
.visually-hidden{position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%)}
@media(min-width:1500px){.workspace{grid-template-columns:310px minmax(0,1fr)}
.editor-grid{grid-template-columns:minmax(0,1fr) 350px}
}
@media(max-width:1180px){.app{padding:22px}
.workspace{grid-template-columns:250px minmax(0,1fr)}
.editor-grid{grid-template-columns:minmax(0,1fr)}
.preview-column{position:static;
border-left:0;
border-top:1px solid var(--line)}
.preview-card{max-width:500px}
.top-actions .session{display:none}
}
@media(max-width:720px){.app{padding:17px 12px}
.topbar{align-items:flex-start;
gap:10px}
h1{font-size:24px}
.topbar .muted{font-size:12px}
.summary{gap:7px}
.metric{padding:13px 10px;
display:block}
.metric strong{display:block;
margin-top:6px}
.workspace{grid-template-columns:minmax(0,1fr)}
.field-list{max-height:260px}
.form-column,.editor-header{padding:18px}
.form-grid{grid-template-columns:minmax(0,1fr);
gap:0}
.editor-header{flex-wrap:wrap}
.savebar{bottom:8px;
flex-wrap:wrap}
.savebar .actions{margin-left:auto}
.top-actions{margin-top:24px}
.top-actions button{font-size:12px;
white-space:nowrap}
.footer{line-height:1.7}
.product-result{overflow-wrap:anywhere}
}