:root{color:#1f2933;--accent:#2f5f8f;--accent-dark:#24496e;--panel-border:#ccd3dc;--panel-header:#e7ebf0;--soft-fill:#f7f8fa;background:#f4f6f8;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.35}*{box-sizing:border-box}html{background:#f4f6f8}body{background:#f4f6f8;min-width:320px;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.page-shell{grid-template-columns:240px minmax(300px,1fr) minmax(300px,1fr);grid-template-areas:"image image image""formats app preview""ad ad ad";gap:6px;width:min(980px,100% - 24px);margin:6px auto 12px;display:grid}.image-slot,.format-sidebar,.app-card,.preview-card,.ad-slot{border:1px solid var(--panel-border);background:#fff}.image-slot{background:0 0;border:0;grid-area:image;grid-template-columns:1fr 3fr;gap:6px;min-height:34px;display:grid}.image-brand,.image-ribbon{border:1px solid var(--panel-border);background:#fff;width:100%;height:100%}.image-brand{object-fit:contain}.image-ribbon{object-fit:cover;border-style:dashed}.ad-slot{background:repeating-linear-gradient(-45deg,#f8fafc 0 10px,#f1f5f9 10px 20px);border-style:dashed;grid-area:ad;min-height:64px}.format-sidebar{grid-area:formats;overflow:hidden}.format-sidebar h2{border-bottom:1px solid var(--panel-border);background:var(--panel-header);color:#1f2933;margin:0;padding:6px 9px;font-size:.98rem;font-weight:700}.format-group{border-top:1px solid #fff}.format-group h3{color:#344054;background:#f0f2f5;margin:0;padding:5px 9px;font-size:.9rem;font-weight:700}.format-nav-button{color:#243447;text-align:left;background:#f7f8fa;border:0;border-top:1px solid #fff;width:100%;min-height:22px;padding:3px 9px;display:block}.format-nav-button:hover,.format-nav-button:focus-visible{background:#e8eef5}.format-nav-button.is-active{border-left:4px solid var(--accent);color:#172033;background:#dfeaf5;padding-left:5px;font-weight:700}.app-card{grid-area:app;padding:7px}.preview-card{flex-direction:column;grid-area:preview;min-height:268px;padding:7px;display:flex}.header-row,.preview-header{justify-content:space-between;align-items:start;margin-bottom:4px;display:flex}h1,h2,p{margin-top:0}.app-card h2,.preview-card h2{color:#172033;margin:0 0 1px;font-size:1rem;font-weight:700}.subtitle,.status-text,.help-text{color:#667085}.subtitle,.status-text{margin-bottom:0;font-size:.76rem}.form-grid{grid-template-columns:1fr 1fr;gap:5px 7px;display:grid}.field{flex-direction:column;min-width:0;display:flex}.field-full{grid-column:1/-1}label{color:#4b5563;margin-bottom:2px;font-size:.78rem;font-weight:700}input,select,textarea{color:#1d2939;background:#fff;border:1px solid #c7d0da;border-radius:0;width:100%;min-height:28px;padding:4px 7px}textarea{resize:vertical;min-height:56px}input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.input-with-unit{align-items:stretch;display:flex}.input-with-unit input{border-right:0}.input-with-unit span{color:#667085;background:#eef2f6;border:1px solid #c7d0da;border-left:0;align-items:center;padding:0 7px;display:inline-flex}.help-text,.error-text{min-height:12px;margin:2px 0 0;font-size:.7rem}.error-text{color:#9f1f2d}.actions{grid-template-columns:1fr;margin-top:1px;display:grid}.button-primary,.button-secondary{border-radius:0;min-height:32px;font-weight:700}.button-primary{border:1px solid var(--accent-dark);background:var(--accent);color:#fff}.button-primary:hover,.button-primary:focus-visible{background:var(--accent-dark)}.button-secondary{border:1px solid var(--accent-dark);background:var(--accent);color:#fff;width:100%;min-height:34px;font-size:1rem}.button-secondary:hover,.button-secondary:focus-visible{background:var(--accent-dark)}.preview-panel{background:#fff;border:1px solid #d9dfe7;flex:1;justify-content:center;align-items:center;min-height:170px;padding:10px;display:flex;overflow:auto}.preview-actions{padding-top:5px}#barcode-preview{max-width:100%;height:auto;display:none}#barcode-preview.has-barcode{display:block}@media (width<=920px){.page-shell{grid-template-columns:1fr 1fr;grid-template-areas:"image image""formats formats""app preview""ad ad";width:min(720px,100% - 20px)}}@media (width<=680px){.page-shell{grid-template-columns:1fr;grid-template-areas:"image""formats""app""preview""ad"}.form-grid{grid-template-columns:1fr}}