body{margin:0;padding:20px;background:#fff}#whoopla-flow{max-width:1200px;margin:0 auto}

#whoopla-flow{font:14px Arial,sans-serif;color-scheme:light dark;color:light-dark(#252722,#eee);background:light-dark(#f7f7f2,#252622);padding:20px;border-radius:12px}#whoopla-flow *{box-sizing:border-box}#whoopla-flow [hidden]{display:none!important}#whoopla-flow h2{font-size:20px;font-weight:500;margin:0 0 8px}#whoopla-flow h3{font-size:16px;font-weight:500}#whoopla-flow .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}#whoopla-flow .steps{display:flex;gap:18px;margin:18px 0;color:light-dark(#62675d,#b9bdb4)}#whoopla-flow .steps strong{color:light-dark(#222,#fff);font-weight:500}#whoopla-flow button,#whoopla-flow select,#whoopla-flow input{font:inherit;color:inherit;background:light-dark(#fff,#363832);border:1px solid light-dark(#cbd0c2,#606858);border-radius:6px;padding:9px;max-width:100%}#whoopla-flow button{cursor:pointer;min-height:40px}#whoopla-flow button:disabled{opacity:.5;cursor:default}#whoopla-flow .primary{color:light-dark(#fff,#202820);background:light-dark(#354738,#cbddc7)}#whoopla-flow label{display:flex;flex-direction:column;gap:5px}#whoopla-flow .check{flex-direction:row;align-items:center}#whoopla-flow .note{color:light-dark(#5a6055,#c1c6ba);line-height:1.5;margin:10px 0}#whoopla-flow .files{display:grid;gap:8px}#whoopla-flow .file{display:grid;grid-template-columns:52px minmax(80px,1fr) minmax(100px,155px);align-items:center;gap:10px;border-bottom:1px solid light-dark(#ddd,#555);padding:9px 0}#whoopla-flow .file img{width:50px;height:50px;object-fit:contain;background:#fff}#whoopla-flow .filename{overflow-wrap:anywhere}#whoopla-flow .work{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,280px);gap:18px}#whoopla-flow canvas{width:100%;height:auto;background:white;border-radius:6px}#whoopla-flow input[type=number]{width:85px}#whoopla-flow input[type=range]{width:100%;accent-color:light-dark(#354738,#cbddc7)}#whoopla-flow input[type=color]{height:42px;width:60px;padding:3px}#whoopla-flow .placement{padding:12px 0;border-bottom:1px solid light-dark(#ddd,#555)}#whoopla-flow .error{color:light-dark(#923520,#ffb5a5)}#whoopla-flow .chips{display:flex;flex-wrap:wrap;gap:8px}#whoopla-flow .chips button[aria-pressed=true]{outline:2px solid light-dark(#354738,#cbddc7)}@media(max-width:620px){#whoopla-flow .work{grid-template-columns:1fr}#whoopla-flow{padding:12px}#whoopla-flow .file{grid-template-columns:40px minmax(60px,1fr) minmax(95px,130px)}}
#whoopla-flow .review-toolbar{align-items:flex-end}
#whoopla-flow .review-toolbar label{min-width:0;max-width:100%}
#whoopla-flow .review-toolbar select,#whoopla-flow .review-toolbar button{height:40px}
#whoopla-flow .intake-settings{column-gap:40px;row-gap:16px;align-items:flex-end}
#whoopla-flow .intake-settings label{min-width:190px}
#whoopla-flow .product-settings{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--hairline)}
#whoopla-flow .intake-heading{font:800 17px/1.3 Nunito,system-ui,sans-serif;margin:0}
#whoopla-flow .product-settings>.intake-heading{margin-bottom:10px}
#whoopla-flow .intake-settings{background:#faf8f4;border-radius:10px;padding:14px 18px;margin:0;gap:18px 32px}
#whoopla-flow .intake-settings label{flex:0 1 290px;font-weight:700;min-width:0;width:100%}
#whoopla-flow .intake-settings select{font-weight:400;width:100%}
#whoopla-flow .intake-sources{display:grid;gap:12px}
#whoopla-flow .intake-source{display:flex;align-items:center;gap:16px;padding:12px 18px;border-radius:10px}
#whoopla-flow .library-source{background:#fff5cb}
#whoopla-flow .upload-source{background:#e4ebe1}
#whoopla-flow .intake-icon{width:30px;height:30px;flex:0 0 30px}
#whoopla-flow .intake-copy{flex:0 1 auto;min-width:0}
#whoopla-flow .intake-copy p{font-size:14px;line-height:1.45;margin:3px 0 0;color:#414b3d}
#whoopla-flow #open-logos{background:var(--marigold);border-color:transparent;font-weight:800;padding:10px 18px;flex-shrink:0}
#whoopla-flow #open-logos:hover{background:#e9bb49}
#whoopla-flow #files{border:0;background:transparent;padding:0;flex:0 1 340px;min-width:0;width:100%;font-size:14px}
#whoopla-flow #files::file-selector-button{font:800 15px Nunito,system-ui,sans-serif;color:var(--ink);background:#bbccb2;border:0;border-radius:8px;padding:11px 16px;margin-right:12px;cursor:pointer;min-height:40px}
#whoopla-flow #files::file-selector-button:hover{background:#adbfA3}
@media(max-width:760px){#whoopla-flow .intake-source{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px 12px;padding:14px}#whoopla-flow .intake-source>button,#whoopla-flow .intake-source>input{grid-column:2;justify-self:start}#whoopla-flow .intake-settings{padding:14px}#whoopla-flow .intake-settings label{flex:1 1 200px}#whoopla-flow .product-settings{padding-bottom:18px;margin-bottom:18px}}
#whoopla-flow .file-preview{display:block;max-width:100%;max-height:500px;object-fit:contain;background:white;margin:12px auto}
#whoopla-flow .file-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
#whoopla-flow .reference-text{white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto}
#whoopla-flow textarea{font:inherit;color:inherit;background:light-dark(#fff,#363832);border:1px solid light-dark(#cbd0c2,#606858);border-radius:6px;padding:12px;width:100%;resize:vertical;min-height:90px}
#whoopla-flow .request-copy{white-space:pre-wrap;overflow-wrap:anywhere}
#whoopla-flow .source-list{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
#whoopla-flow .source-list button{max-width:240px;text-align:left;overflow-wrap:anywhere}
#whoopla-flow .source-list img{display:block;width:90px;height:80px;object-fit:contain;background:white;margin-bottom:7px}
#whoopla-flow .project-save{align-items:flex-end}#whoopla-flow .saved-project{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid light-dark(#ddd,#555)}#whoopla-flow .saved-project img{width:100px;height:100px;object-fit:contain;background:white}#whoopla-flow .saved-project strong{overflow-wrap:anywhere;font-weight:500}#whoopla-flow #project-label{overflow-wrap:anywhere}#whoopla-flow #project-confirm{padding:12px;border:1px solid light-dark(#923520,#ffb5a5);border-radius:6px}@media(max-width:420px){#whoopla-flow .saved-project{grid-template-columns:1fr}}

[hidden]{display:none!important}.auth-panel{font:16px Arial,sans-serif;max-width:440px;margin:50px auto;padding:24px;background:#f7f7f2;color:#252722;border-radius:12px}.auth-panel label{display:block;margin:16px 0}.auth-panel input{display:block;width:100%;box-sizing:border-box;padding:12px;margin-top:6px}.auth-panel button,#cloud-account button{font:inherit;padding:10px;margin:6px 4px 6px 0}#cloud-account{max-width:1200px;margin:0 auto 16px;font:14px Arial,sans-serif}
/* Whoopla portal brand, shared with build 17. */
:root{color-scheme:light;--cream:#FFFEFB;--ink:#1A1A1A;--forest:#5C7E51;--marigold:#F2C75C;--driftwood:#EFE3D0;--hairline:#E7DCCB}
[hidden]{display:none!important}body{background:var(--cream);color:var(--ink);font-family:Nunito,system-ui,sans-serif;padding:28px}
.auth-panel{box-sizing:border-box;max-width:480px;margin:7vh auto;background:white;border:1px solid var(--hairline);border-radius:20px;padding:40px;box-shadow:0 14px 45px #1a1a1a08;font-family:Nunito,system-ui,sans-serif}
.brand-logo{width:148px;height:auto}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;margin-top:26px}.brand-dot{color:var(--forest)}
.auth-panel h1{font-family:'DM Serif Display',Georgia,serif;font-size:40px;font-weight:400;margin:10px 0}.auth-panel p{line-height:1.6}
.auth-panel label{display:grid;gap:8px;font-weight:700;margin:20px 0 12px}.auth-panel input{box-sizing:border-box;width:100%;font:inherit;border:1px solid var(--hairline);border-radius:9px;padding:13px;background:var(--cream)}
.auth-panel button{font:inherit;cursor:pointer;border:0;border-radius:9px;padding:13px;background:var(--forest);color:white;font-weight:800;width:100%}.auth-panel button:disabled{opacity:.5;cursor:default}.auth-actions{display:flex;gap:10px;margin-top:12px}.auth-actions button{background:var(--driftwood);color:var(--ink);font-size:13px}
#auth-message{font-size:14px;color:#54594f;min-height:24px}#cloud-account{max-width:1200px;margin:0 auto 18px;text-align:right;font:14px Nunito,sans-serif}#cloud-account button{font:inherit;border:1px solid var(--hairline);padding:8px 14px;border-radius:8px;background:white}
#whoopla-flow{font:15px Nunito,system-ui,sans-serif;color-scheme:light;background:white;color:var(--ink);border:1px solid var(--hairline);padding:28px;border-radius:18px}
#whoopla-flow h2,#whoopla-flow h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400}#whoopla-flow h2{font-size:30px}#whoopla-flow h3{font-size:22px}
#whoopla-flow .primary,#whoopla-flow #save-project{background:var(--forest);color:white;border-color:var(--forest)}#whoopla-flow button,#whoopla-flow input,#whoopla-flow select,#whoopla-flow textarea{border-color:var(--hairline);border-radius:8px}#whoopla-flow input[type=range]{accent-color:var(--forest)}#whoopla-flow .steps{padding:16px;background:var(--driftwood);border-radius:10px}#whoopla-flow .steps strong{color:var(--forest);font-weight:800}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}
@media(max-width:600px){body{padding:14px}.auth-panel{padding:26px;margin:4vh auto}#whoopla-flow{padding:16px}.auth-panel h1{font-size:34px}}

#whoopla-flow .area-map-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}#whoopla-flow .area-map-grid img{width:100%;height:auto}#whoopla-flow #area-canvas{width:100%;touch-action:none;cursor:crosshair}#whoopla-flow #area-mapper{border:1px solid var(--hairline);padding:18px;border-radius:12px}@media(max-width:600px){#whoopla-flow .area-map-grid{grid-template-columns:1fr}}


#logo-dialog{width:min(1080px,94vw);max-height:90vh;overflow:auto;border:1px solid #deddd4;border-radius:18px;padding:28px;background:#fffefa;color:#171717}
#logo-dialog::backdrop{background:rgba(0,0,0,.38)}
#whoopla-flow #refresh-logos{align-self:flex-end}
.logo-columns{display:grid;grid-template-columns:minmax(240px,1fr) minmax(260px,1fr);gap:24px;margin:20px 0}
#logo-results{max-height:430px;overflow:auto}.logo-result{display:block;width:100%;text-align:left;padding:14px;margin-bottom:8px;border:1px solid #ddd;border-radius:10px;background:#fff}
#logo-detail{border:1px solid #ddd;border-radius:12px;padding:18px}#logo-preview{width:100%;height:190px;object-fit:contain;background:repeating-conic-gradient(#ddd 0% 25%,#f3f3f3 0% 50%) 0 0/20px 20px}
#logo-detail-notes{white-space:pre-wrap}#logo-manager{border-top:1px solid #ddd;padding-top:15px}#logo-dialog input:not([type=checkbox]),#logo-dialog textarea,#logo-dialog select{max-width:100%}
@media(max-width:650px){.logo-columns{grid-template-columns:1fr}#logo-dialog{padding:16px}#logo-results{max-height:230px}}

/* Keep library navigation and uploads visible while results/details scroll. */
#logo-dialog{height:min(760px,90dvh);max-height:90dvh;overflow:hidden;box-sizing:border-box}
#logo-dialog[open]{display:flex;flex-direction:column}
#logo-dialog>.row,#logo-dialog>p{flex-shrink:0}
#logo-dialog>p{margin:6px 0;line-height:1.4}
#logo-dialog .logo-columns{flex:1 1 auto;min-height:0;overflow:auto;align-items:start;margin:12px 0;scrollbar-gutter:stable}
#logo-dialog #logo-results{max-height:none;overflow:visible;min-width:0}
#logo-dialog #logo-detail{min-width:0;overflow-wrap:anywhere}
#logo-dialog #logo-detail[aria-busy=true]{opacity:.55}
#logo-dialog #logo-manager{flex:0 0 auto;max-height:45%;overflow:auto;margin-top:0;background:#fffefa}
#logo-dialog #logo-manager summary{position:sticky;top:0;background:#fffefa;padding:8px 0;cursor:pointer;font-weight:700;z-index:1}
#logo-dialog .logo-result{overflow-wrap:anywhere}
@media(max-width:650px){#logo-dialog{height:90dvh}#logo-dialog .logo-columns{grid-template-columns:1fr}#logo-dialog #logo-preview{height:150px}}

#logo-dialog #logo-selection-actions{flex:0 0 auto;border-bottom:1px solid var(--hairline);padding-bottom:12px;margin:8px 0 0;align-items:center}
#logo-dialog #use-logo{font-weight:800;padding:10px 20px}
#logo-dialog #logo-action-name{flex:1 1 160px;min-width:0;overflow-wrap:anywhere;font-size:13px}
#logo-dialog #logo-edit-details{margin:14px 0;border-top:1px solid var(--hairline);padding-top:12px}
#logo-dialog #logo-edit-details summary{cursor:pointer;font-weight:700;padding:6px 0}
#logo-dialog #logo-edit-form{margin-top:10px}