:root{--bg:#0b0f17;--line:#1f2a3d;--text:#e6edf7;--muted:#9fb0c8;--acc:#6ea8ff;--danger:#ff6e6e;--ok:#45d483;}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:radial-gradient(1200px 600px at 30% -10%, #14213a, transparent), var(--bg);}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:18px auto;padding:0 14px}
.ribbon{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:rgba(10,14,22,.9);backdrop-filter: blur(10px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.3px}
.muted{color:var(--muted)} .small{font-size:12px}
.tabs{display:flex;gap:8px;margin-left:14px}
.tab{padding:8px 10px;border-radius:10px;border:1px solid transparent}
.tab:hover{border-color:var(--line);background:rgba(255,255,255,.03)}
.ribbon-left{display:flex;align-items:center;gap:8px}
.ribbon-right{display:flex;align-items:center;gap:10px}
.userpill{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}
.row{display:flex;align-items:center;gap:10px}
.inline{display:inline}
.grid{display:grid;gap:12px}
.cols-2{grid-template-columns:1fr 1fr}
@media (max-width: 920px){.cols-2{grid-template-columns:1fr}}
.cards{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:920px){.cards{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.kpi{font-size:34px;font-weight:800}
label{display:block;margin-bottom:6px;color:var(--muted);font-size:12px}
input,select,button,textarea{font:inherit}
input,select,textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:rgba(110,168,255,.7)}
.btn{padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer}
.btn:hover{background:rgba(255,255,255,.06)}
.btn-primary{border-color:rgba(110,168,255,.6);background:rgba(110,168,255,.15)}
.btn-ghost{background:transparent}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px}
.badge.err{border-color:rgba(255,110,110,.6);background:rgba(255,110,110,.08)}
.badge.ok{border-color:rgba(69,212,131,.6);background:rgba(69,212,131,.08)}
.badge.queued{border-color:rgba(255,255,255,.2)}
.badge.sent{border-color:rgba(69,212,131,.6);background:rgba(69,212,131,.08)}
.badge.error{border-color:rgba(255,110,110,.6);background:rgba(255,110,110,.08)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
.table th{color:var(--muted);font-size:12px}
.table .right{text-align:right}
.table-wrap{overflow:auto}
.kbd{display:inline-block;padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.25);font-size:12px}
.footer{padding:16px 14px;border-top:1px solid var(--line);margin-top:20px}
#toast-root{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:10px;z-index:99}
.toast{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(10,14,22,.9);backdrop-filter: blur(10px);min-width:240px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.toast.ok{border-color:rgba(69,212,131,.6)} .toast.err{border-color:rgba(255,110,110,.6)}
/* designer */
.designer{display:grid;grid-template-columns:260px 1fr 300px;gap:12px}
@media (max-width:1100px){.designer{grid-template-columns:1fr}.panel.left,.panel.right{order:2}}
.panel{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--line);border-radius:16px;padding:12px}
.panel-title{font-weight:700;margin-bottom:10px}
.toolbox{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.canvas-wrap{background:rgba(0,0,0,.25);border:1px dashed rgba(255,255,255,.15);border-radius:14px;padding:10px;overflow:auto}
.picklist{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.18)}
.pick{display:flex;gap:10px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06);align-items:center}
.pick:last-child{border-bottom:none}
.pick input{width:auto}


/* --- Editor layout similar ao exemplo (BarTender-like) --- */
.editor-shell{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
@media (max-width: 980px){.editor-shell{grid-template-columns:1fr}}
.editor-stage{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:16px;padding:14px;min-height:520px;position:relative}
.stage-title{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;gap:10px}
.stage-title .hint{font-size:12px;color:var(--muted)}
.stage-scroll{overflow:auto;max-height:72vh;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.16);padding:12px}
.stage-pad{min-width:max-content;min-height:max-content;display:flex;align-items:flex-start;justify-content:flex-start}
.stage-canvas{background:rgba(255,255,255,.03);border-radius:12px;border:2px dashed rgba(255,255,255,.18);padding:12px}
.editor-side{position:sticky;top:70px}
@media (max-width: 980px){.editor-side{position:static}}
.side-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--line);border-radius:16px;padding:12px}
.side-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.accord{border:1px solid rgba(255,255,255,.10);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.14)}
.acc-item{border-bottom:1px solid rgba(255,255,255,.06)}
.acc-item:last-child{border-bottom:none}
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:12px;cursor:pointer;user-select:none}
.acc-head.active{background:rgba(90,160,255,.12)}
.acc-head .left{display:flex;gap:10px;align-items:center}
.acc-head .icon{width:28px;height:28px;border:1px solid rgba(255,255,255,.14);border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);color:var(--muted);font-size:14px}
.acc-head.active .icon{color:var(--acc);border-color:rgba(90,160,255,.35)}
.acc-head .title{font-weight:800}
.acc-head .chev{color:var(--muted)}
.acc-body{display:none;padding:12px}
.acc-item.open .acc-body{display:block}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-grid .full{grid-column:1/-1}
.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.data-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);cursor:pointer;color:var(--acc);font-weight:700}
.data-btn:hover{background:rgba(255,255,255,.06)}
.zoom-box{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:6px}
.zoom-btn{width:42px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);cursor:pointer;color:var(--text)}
.zoom-btn:hover{background:rgba(255,255,255,.06)}
.zoom-pill{min-width:86px;text-align:center;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22);color:var(--muted)}
/* bottom save bar */
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(7,18,42,.92);backdrop-filter: blur(12px);border-top:1px solid var(--line);padding:10px 14px}
.savebar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:10px;justify-content:space-between}
.savebar-msg{color:rgba(255,255,255,.82);font-size:13px}
.savebar-actions{display:flex;gap:10px;align-items:center}
body{padding-bottom:64px}