.publish-workspace{--publish-cyan:#5ce3eb;--publish-pink:#ff62bd;--publish-yellow:#ffd76d;--publish-green:#6ee7a8;display:grid;gap:10px;min-width:0;color:#edf5fb}
.publish-workspace *{box-sizing:border-box}.publish-workspace :where(button,input,select,textarea){font:inherit}.publish-workspace button,.publish-workspace label{cursor:pointer}
.publish-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:116px;padding:20px 22px;overflow:hidden;border:1px solid #334657;border-radius:8px;background:linear-gradient(118deg,#101c2a,#24132d 44%,#24161e 72%,#0b2730);box-shadow:0 18px 48px #02050a5c}
.publish-head:before{position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(120deg,transparent 40%,#ff62bd14 40% 41%,transparent 41% 65%,#5ce3eb15 65% 66%,transparent 66%);background-size:28px 28px,28px 28px,100% 100%;content:"";pointer-events:none}.publish-head>div{position:relative;z-index:1}.publish-head small{color:var(--publish-cyan);font-size:8px;font-weight:900}.publish-head h3{margin:5px 0 3px;font-size:27px;letter-spacing:0}.publish-head p{max-width:720px;margin:0;color:#9dadbc;font-size:10px;line-height:1.6}.publish-head__status{display:grid;grid-template-columns:10px auto;align-items:center;gap:3px 7px;min-width:160px;padding:13px;border:1px solid #ffffff1b;border-radius:7px;background:#050b12a8}.publish-head__status i{width:7px;height:7px;border-radius:50%;background:var(--publish-green);box-shadow:0 0 12px var(--publish-green)}.publish-head__status span{font-size:9px;font-weight:800}.publish-head__status b{grid-column:2;color:var(--publish-cyan);font-size:8px}
.publish-capabilities{display:flex;gap:6px;padding:7px;border:1px solid #293b49;border-radius:7px;background:linear-gradient(90deg,#0a141e,#11121c);overflow-x:auto}.publish-capabilities span{min-width:max-content;padding:6px 9px;border:1px solid #354757;border-radius:4px;color:#9fb0be;font-size:8px;font-weight:750}.publish-capabilities span:nth-child(4n+1){border-color:#5ce3eb55;color:#77e8ee}.publish-capabilities span:nth-child(4n+2){border-color:#ff62bd55;color:#ff8bce}.publish-capabilities span:nth-child(4n+3){border-color:#ffd76d55;color:#ffe396}.publish-capabilities span:nth-child(4n+4){border-color:#6ee7a855;color:#88edb7}
.publish-status{min-height:30px;padding:8px 11px;border-left:3px solid var(--publish-cyan);background:#0b151e;color:#8699aa;font-size:8px}.publish-status[data-state="success"]{border-color:var(--publish-green);color:#82eab3}.publish-status[data-state="error"]{border-color:#ff6b86;color:#ff91a3}
.publish-layout{display:grid;grid-template-columns:minmax(270px,340px) minmax(0,1fr);min-height:670px;border:1px solid #2b3c4a;border-radius:8px;background:#080f17;box-shadow:0 24px 64px #02050a55;overflow:hidden}.publish-panel{display:grid;align-content:start;gap:1px;border-right:1px solid #2b3c4a;background:#0b131c}.publish-panel section{display:grid;gap:10px;padding:16px;border-bottom:1px solid #263744}.publish-panel h4{margin:0;color:#f1f6f9;font-size:11px}.publish-field{display:grid;gap:5px;color:#8194a5;font-size:8px;font-weight:750}.publish-field :where(input,select,textarea){width:100%;min-height:34px;padding:7px 9px;border:1px solid #354755;border-radius:5px;outline:0;background:#071019;color:#dce7ee;font-size:9px}.publish-field textarea{resize:vertical}.publish-field :where(input,select,textarea):focus{border-color:var(--publish-cyan);box-shadow:0 0 0 2px #5ce3eb16}.publish-field input[type="color"]{padding:3px}.publish-field input[type="range"]{padding:0;border:0;accent-color:var(--publish-pink)}
.publish-color-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.publish-color-row .publish-field{min-width:0}.publish-brand-colors{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.publish-brand-colors input{width:100%;height:42px;padding:3px;border:1px solid #3c4d5b;border-radius:6px;background:#071019}.publish-upload{display:grid;place-items:center;min-height:54px;padding:10px;border:1px dashed #4d6676;border-radius:7px;background:linear-gradient(110deg,#0b1822,#16121e);color:#a9bac7;font-size:9px;font-weight:800;text-align:center}.publish-upload:hover{border-color:var(--publish-pink);color:#fff;box-shadow:inset 0 0 32px #ff62bd0d}.publish-upload--large{min-height:110px}.publish-upload input{position:absolute;width:1px;height:1px;opacity:0}.publish-check{display:flex;align-items:center;gap:7px;color:#acbbc7;font-size:9px}.publish-check input{accent-color:var(--publish-pink)}
.publish-button{min-height:34px;padding:0 12px;border:1px solid #3b4e5c;border-radius:6px;background:#111c26;color:#aebcc8;font-size:9px;font-weight:800}.publish-button:hover{border-color:var(--publish-cyan);background:#122632;color:#fff;transform:translateY(-1px)}.publish-button--primary{border-color:#5ce3eb;background:linear-gradient(100deg,#63e8eb,#a4ed8c 52%,#ffe36f);color:#071016;box-shadow:0 8px 24px #5ce3eb1f}.publish-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.publish-preview{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:28px 28px;background-color:#060c12}.publish-preview>header{display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:0 14px;border-bottom:1px solid #2a3b49;background:linear-gradient(90deg,#0e1923,#11121b)}.publish-preview>header div{display:grid;gap:2px}.publish-preview>header span{color:var(--publish-cyan);font-size:7px;font-weight:900}.publish-preview>header strong{font-size:10px}.publish-preview>header small{color:#7f91a2;font-size:8px}.publish-canvas-stage{display:grid;place-items:center;min-height:500px;padding:24px;overflow:auto}.publish-canvas-stage canvas{display:block;width:auto;max-width:100%;max-height:600px;border:1px solid #ffffff28;border-radius:4px;background:#111827;box-shadow:0 24px 70px #0009}.publish-export{display:flex;align-items:end;justify-content:flex-end;gap:9px;min-height:64px;padding:10px 14px;border-top:1px solid #293a48;background:#0b141d}.publish-export .publish-field{min-width:120px}.publish-export .publish-button{min-height:36px}
.publish-icon-grid{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));align-content:start;gap:10px;padding:18px;overflow:auto}.publish-icon-grid button{display:grid;place-items:center;gap:8px;min-height:150px;padding:14px;border:1px solid #2f4250;border-radius:7px;background:linear-gradient(145deg,#0d1822,#0a1118);color:#90a3b3}.publish-icon-grid button:hover{border-color:var(--publish-pink);background:linear-gradient(145deg,#1c1522,#0b1e25);color:#fff;transform:translateY(-2px)}.publish-icon-grid canvas{width:80px;height:80px;border:0;border-radius:6px;image-rendering:auto}.publish-icon-grid button:last-child canvas{width:96px;height:96px}
.app-sidebar__studio[data-studio-kind="media-design"] section{--media-side:#ff62bd;margin:5px 0 10px}.app-sidebar__studio[data-studio-kind="media-design"] section[data-studio-category="1"]{--media-side:#5ce3eb}.app-sidebar__studio[data-studio-kind="media-design"] section[data-studio-category="2"]{--media-side:#ffd76d}.app-sidebar__studio[data-studio-kind="media-design"] section[data-studio-category="3"]{--media-side:#a88bff}.app-sidebar__studio[data-studio-kind="media-design"] section[data-studio-category="4"]{--media-side:#6ee7a8}.app-sidebar__studio[data-studio-kind="media-design"] section[data-studio-category="5"]{--media-side:#ff936b}.app-sidebar__studio[data-studio-kind="media-design"] section>small{display:flex;align-items:center;justify-content:space-between;padding:0 7px;color:var(--media-side);font-size:7px;font-weight:900}.app-sidebar__studio[data-studio-kind="media-design"] section>small b{display:grid;place-items:center;min-width:18px;height:17px;padding:0 4px;border:1px solid color-mix(in srgb,var(--media-side) 45%,transparent);border-radius:4px;background:color-mix(in srgb,var(--media-side) 9%,transparent);font-size:7px}.app-sidebar__studio[data-studio-kind="media-design"] .app-sidebar__studio-item{min-height:35px;border:1px solid transparent;border-radius:5px}.app-sidebar__studio[data-studio-kind="media-design"] .app-sidebar__studio-item>span{display:grid;place-items:center;min-width:25px;height:24px;border:1px solid color-mix(in srgb,var(--media-side) 40%,transparent);border-radius:5px;background:color-mix(in srgb,var(--media-side) 8%,transparent);color:var(--media-side)}.app-sidebar__studio[data-studio-kind="media-design"] .app-sidebar__studio-item:hover,.app-sidebar__studio[data-studio-kind="media-design"] .app-sidebar__studio-item.is-active{border-color:color-mix(in srgb,var(--media-side) 45%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--media-side) 15%,transparent),transparent);color:#eff8fb;box-shadow:inset 3px 0 var(--media-side)}
@media(max-width:980px){.publish-layout{grid-template-columns:1fr}.publish-panel{grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid #2b3c4a}.publish-canvas-stage{min-height:420px}.publish-icon-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.publish-head{display:grid;padding:17px}.publish-head h3{font-size:22px}.publish-head__status{display:none}.publish-layout{min-height:0}.publish-panel{grid-template-columns:1fr}.publish-panel section{padding:13px}.publish-canvas-stage{min-height:330px;padding:12px}.publish-export{align-items:stretch;flex-wrap:wrap}.publish-export .publish-field{flex:1 1 100px}.publish-export .publish-button{width:100%}.publish-icon-grid{grid-template-columns:repeat(2,1fr);padding:10px}.publish-icon-grid button{min-height:125px}.publish-color-row{grid-template-columns:1fr 1fr}.publish-workspace{gap:7px}}
@media(prefers-reduced-motion:reduce){.publish-workspace *{transition:none!important}}