body.zia-banner-page { margin:0; background:#0b0b0c; }
.zia-banner-app { --ink:#f4f4f5; --muted:#b6b7bc; --line:#393a3e; --orange:#f47b20; --surface:#1c1d20; --control-border:#5a5c62; color:var(--ink); background:#111113; max-width:1440px; margin:0 auto; padding:28px 36px 48px; font-family:Arial,Helvetica,sans-serif; font-size:15px; line-height:1.5; letter-spacing:0; color-scheme:dark; }
.zia-banner-app *, .zia-banner-app *::before, .zia-banner-app *::after { box-sizing:border-box; letter-spacing:0; }
.zia-banner-app [hidden], .zia-banner-app .honeypot { display:none!important; }
.zia-banner-app h1, .zia-banner-app h2, .zia-banner-app p { margin:0; }
.zia-banner-app h1 { font-size:30px; line-height:1.2; font-weight:750; }
.zia-banner-app h2 { font-size:19px; line-height:1.35; font-weight:700; color:var(--ink); }
.zia-banner-app .builder-heading { display:flex; align-items:center; gap:16px; padding-bottom:25px; border-bottom:2px solid var(--orange); }
.zia-banner-app .builder-heading img { width:72px; height:72px; object-fit:contain; background:#080808; border-radius:6px; }
.zia-banner-app .brand-name { font-size:12px; font-weight:700; color:var(--orange); margin-bottom:4px; }
.zia-banner-app .heading-status { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.zia-banner-app .heading-status span { width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none; }
.zia-banner-app .design-grid { display:grid; grid-template-columns:340px minmax(0,1fr); gap:36px; align-items:start; }
.zia-banner-app .design-controls { border-right:1px solid var(--line); padding:24px 28px 0 0; min-width:0; }
.zia-banner-app .section { margin:0 0 24px; padding:0 0 24px; border:0; border-bottom:1px solid var(--line); min-width:0; }
.zia-banner-app .section:last-child { border:0; margin-bottom:0; }
.zia-banner-app legend { float:none; display:block; width:100%; padding:0 0 12px; font-size:16px; font-weight:700; }
.zia-banner-app .step { display:inline-flex; width:24px; height:24px; margin-right:7px; align-items:center; justify-content:center; background:var(--orange); color:#111113; border-radius:4px; font-size:12px; font-weight:700; flex:none; }
.zia-banner-app .field { display:flex; flex-direction:column; gap:5px; margin:0 0 13px; min-width:0; }
.zia-banner-app label { font-size:12px; font-weight:700; color:var(--ink); }
.zia-banner-app input, .zia-banner-app select, .zia-banner-app textarea, .zia-banner-app button { font:inherit; }
.zia-banner-app input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=range]), .zia-banner-app select, .zia-banner-app textarea { width:100%; min-width:0; border:1px solid var(--control-border); border-radius:5px; background:var(--surface); color:var(--ink); padding:9px 10px; font-size:14px; min-height:40px; box-shadow:none; }
.zia-banner-app textarea { resize:vertical; min-height:62px; }
.zia-banner-app input::placeholder, .zia-banner-app textarea::placeholder { color:#a9abb2; opacity:1; }
.zia-banner-app :focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.zia-banner-app :disabled { opacity:.48; cursor:not-allowed!important; }
.zia-banner-app input[type=color] { padding:4px!important; cursor:pointer; height:40px; }
.zia-banner-app .two-col { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.zia-banner-app .segmented { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--control-border); border-radius:6px; overflow:hidden; background:var(--surface); }
.zia-banner-app .segmented label { position:relative; cursor:pointer; text-align:center; display:flex; }
.zia-banner-app .segmented input { position:absolute; opacity:0; width:1px; height:1px; }
.zia-banner-app .segmented span { padding:10px 7px; width:100%; display:flex; align-items:center; justify-content:center; min-height:44px; font-size:12px; }
.zia-banner-app .segmented label+label { border-left:1px solid var(--control-border); }
.zia-banner-app .segmented input:checked+span { background:var(--orange); color:#111113; }
.zia-banner-app .segmented input:focus-visible+span { box-shadow:inset 0 0 0 3px var(--ink); }
.zia-banner-app .upload-box { position:relative; border:1px dashed #878990; border-radius:6px; display:flex; align-items:center; gap:12px; padding:16px; background:var(--surface); min-width:0; }
.zia-banner-app .upload-box svg { width:20px; height:20px; color:var(--orange); flex:none; }
.zia-banner-app .upload-box input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.zia-banner-app .upload-box:focus-within { outline:3px solid var(--orange); outline-offset:3px; }
.zia-banner-app .file-list { list-style:none; margin:10px 0 0; padding:0; font-size:12px; overflow-wrap:anywhere; }
.zia-banner-app .file-list li { padding:3px 0; }
.zia-banner-app .field-status { font-size:12px; color:var(--muted); margin:8px 0 12px; overflow-wrap:anywhere; }
.zia-banner-app .image-settings { margin-top:12px; }
.zia-banner-app .zoom-row { display:grid; grid-template-columns:40px minmax(0,1fr) 42px; align-items:center; gap:8px; font-size:12px; margin-bottom:12px; }
.zia-banner-app input[type=range] { width:100%; accent-color:var(--orange); }
.zia-banner-app output { text-align:right; font-variant-numeric:tabular-nums; }
.zia-banner-app .tool-row { display:flex; gap:7px; }
.zia-banner-app button { border-radius:5px; cursor:pointer; border:1px solid var(--control-border); box-shadow:none; }
.zia-banner-app .icon-btn { width:38px; height:38px; padding:9px; background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center; }
.zia-banner-app .icon-btn:hover:not(:disabled) { background:#303136; border-color:var(--orange); }
.zia-banner-app .icon-btn svg { width:18px; height:18px; }
.zia-banner-app .remove-tool { margin-left:auto; }
.zia-banner-app .check { display:flex; align-items:center; gap:9px; margin:0 0 12px; font-size:13px; font-weight:400; }
.zia-banner-app .check input { width:16px; height:16px; margin:0; accent-color:var(--orange); }
.zia-banner-app .preview-panel { position:sticky; top:18px; padding-top:26px; min-width:0; }
.zia-banner-app .preview-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.zia-banner-app .eyebrow { font-size:10px; font-weight:700; color:var(--muted); display:block; margin-bottom:4px; }
.zia-banner-app .secondary-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 12px; min-height:40px; font-size:12px; font-weight:700; background:var(--surface); color:var(--ink); }
.zia-banner-app .secondary-btn:hover:not(:disabled) { border-color:var(--orange); background:#303136; }
.zia-banner-app .secondary-btn svg { width:16px; height:16px; flex:none; }
.zia-banner-app .preview-stage { display:flex; align-items:center; justify-content:center; padding:28px; background:#212225; border:1px solid var(--line); border-radius:6px; min-height:300px; }
.zia-banner-app .canvas-frame { position:relative; width:100%; max-width:100%; box-shadow:0 3px 14px #00000066; background:#fff; }
.zia-banner-app canvas { display:block; width:100%; height:auto; touch-action:none; border:0; border-radius:0; background:white; }
.zia-banner-app .empty-preview { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; font-size:13px; color:#64767d; pointer-events:none; padding:12px; }
.zia-banner-app .empty-preview svg { width:30px; height:30px; stroke-width:1.3; }
.zia-banner-app .preview-meta { display:flex; justify-content:space-between; gap:12px; padding:12px 0; font-size:12px; border-bottom:1px solid var(--line); }
.zia-banner-app .preview-meta span { color:var(--orange); }
.zia-banner-app .preview-note { color:var(--muted); font-size:12px; margin-top:12px; }
.zia-banner-app .contact-jump { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ink); font-size:13px; font-weight:700; padding:14px 0; margin-top:8px; text-decoration:none; border-bottom:1px solid var(--line); }
.zia-banner-app .contact-jump svg { width:17px; height:17px; color:var(--orange); }
.zia-banner-app .contact-jump:hover { color:var(--orange); }
.zia-banner-app .customer-section { border-top:1px solid var(--line); padding:28px 0 0; margin-top:12px; scroll-margin-top:24px; }
.zia-banner-app .section-heading { display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.zia-banner-app .required-key { margin-left:auto; font-size:12px; color:var(--muted); }
.zia-banner-app .customer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 20px; }
.zia-banner-app .notes-field { margin:12px 0 24px; }
.zia-banner-app .submit-strip { border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.zia-banner-app .human-field { width:160px; margin:0; flex-shrink:0; }
.zia-banner-app .submit-action { display:flex; align-items:center; gap:20px; }
.zia-banner-app .submit-action span { color:var(--muted); font-size:12px; }
.zia-banner-app .primary-btn { background:var(--orange); color:#111113; display:flex; align-items:center; justify-content:center; gap:14px; padding:13px 20px; font-size:14px; font-weight:700; border:1px solid var(--orange); }
.zia-banner-app .primary-btn:hover:not(:disabled) { background:#ff994a; }
.zia-banner-app .primary-btn svg { width:18px; height:18px; flex:none; }
.zia-banner-app .notice { background:#262218; color:#f2d393; border:1px solid #8c743c; border-radius:5px; padding:12px; margin:12px 0; font-size:13px; white-space:pre-line; }
.zia-banner-app .notice.error { color:#ffb1b5; background:#2c1b20; border-color:#97575e; }
@media (max-width:1000px) { .zia-banner-app { padding:24px; } .zia-banner-app .design-grid { grid-template-columns:300px minmax(0,1fr); gap:24px; } .zia-banner-app .design-controls { padding-right:20px; } .zia-banner-app .heading-status { display:none; } .zia-banner-app .preview-stage { padding:16px; min-height:240px; } .zia-banner-app .submit-action { flex-direction:column; align-items:flex-end; gap:8px; } }
@media (max-width:760px) { .zia-banner-app { padding:18px 16px 30px; } .zia-banner-app h1 { font-size:25px; } .zia-banner-app .builder-heading img { width:58px; height:58px; } .zia-banner-app .builder-heading { padding-bottom:18px; } .zia-banner-app .design-grid { grid-template-columns:minmax(0,1fr); gap:0; } .zia-banner-app .preview-panel { position:static; grid-row:1; padding-top:20px; } .zia-banner-app .preview-stage { min-height:200px; padding:18px; } .zia-banner-app .design-controls { border-right:0; padding:24px 0 0; } .zia-banner-app .preview-heading { gap:8px; } .zia-banner-app .preview-heading h2 { font-size:17px; } .zia-banner-app .customer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; } .zia-banner-app .submit-strip { align-items:stretch; flex-direction:column; gap:18px; } .zia-banner-app .submit-action { align-items:stretch; } .zia-banner-app .human-field { width:100%; max-width:180px; } .zia-banner-app .submit-action span { order:1; text-align:center; } }
@media (max-width:380px) { .zia-banner-app .customer-grid { grid-template-columns:minmax(0,1fr); } .zia-banner-app .secondary-btn { padding:8px; font-size:11px; } .zia-banner-app .preview-stage { padding:10px; min-height:170px; } }