:root{font-family:'Inter',Arial,sans-serif;--bg:#f3f4f6;--panel:#fff;--text:#0f213b;--muted:#667085;--line:#dfe4ea;--black:#101010;--gold:#ce8d22;--gold2:#a96f10;--teal:#50b6d1;--green:#20a464;--yellow:#e5a500;--red:#d64545}*{box-sizing:border-box}html,body,button,input,select,textarea{font-family:'Inter',Arial,sans-serif}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}.site-header{background:var(--black);border-bottom:3px solid var(--gold);color:#fff}.header-inner{max-width:1440px;margin:auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;font-size:20px}.brand img{width:44px;height:44px;object-fit:cover;border-radius:6px}.page-shell{max-width:1440px;margin:18px auto;padding:0 20px 40px}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px rgba(15,33,59,.06);margin-bottom:18px;overflow:visible}.panel-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.panel-head h1,.panel-head h2{margin:0 0 5px}.panel-head p{margin:0;color:var(--muted)}form{padding:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:13px}.field input,.select-button{height:44px;border:1px solid #cfd7e3;border-radius:8px;padding:0 12px;background:#fff;text-align:left}.select-button{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.client-field{position:relative}.client-menu{position:absolute;z-index:15;top:72px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);padding:7px;max-height:320px;overflow:auto}.client-option,.new-client-option{display:block;width:100%;border:0;background:#fff;text-align:left;padding:10px;border-radius:7px;cursor:pointer}.client-option:hover{background:#f2f5f8}.new-client-option{background:#fff0cf;color:#7c4d00;font-weight:800;border:1px solid #efcf88;margin-top:6px}.drop-zone{margin-top:18px;border:2px dashed #c9d4e2;border-radius:12px;padding:28px;text-align:center;background:#fafcff}.drop-zone.dragging{border-color:var(--teal);background:#effbfe}.upload-icon{width:48px;height:48px;border-radius:50%;background:#e5f8fd;color:#2a9fbd;display:grid;place-items:center;margin:0 auto 10px;font-size:26px}.drop-zone h2{margin:6px 0}.drop-zone p{color:var(--muted)}.btn{border:0;border-radius:8px;padding:10px 14px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.btn-gold{background:var(--gold);color:#fff}.btn-gold:hover{background:var(--gold2)}.btn-teal{background:var(--teal);color:#fff}.btn-light{background:#fff;border:1px solid #d5dce5;color:var(--text)}.btn-danger{background:var(--red);color:#fff}.btn-small{padding:7px 10px;font-size:12px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.file-list{display:grid;gap:9px;margin-top:12px}.file-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}.zip-badge{background:#fff3d8;color:#a66c00;font-weight:800;border-radius:8px;padding:10px}.file-meta{min-width:0}.file-meta strong,.file-meta small{display:block}.file-meta strong{overflow-wrap:anywhere}.file-meta small{color:var(--muted);margin-top:3px}.ready{color:var(--green);font-weight:800}.remove-file{border:1px solid #f1b4b4;background:#fff;color:var(--red);border-radius:7px;padding:7px 9px;cursor:pointer}.form-error{margin-top:12px;padding:11px;border-radius:8px;background:#fff0f0;border:1px solid #f2b5b5;color:#a82222}.table-wrap{width:100%}.project-table-wrap{overflow:hidden}.projects-panel table,.modal table{width:100%;border-collapse:collapse}.projects-table{table-layout:fixed}.projects-table .col-project{width:31%}.projects-table .col-client{width:12%}.projects-table .col-sizes{width:9%}.projects-table .col-status{width:15%}.projects-table .col-updated{width:10%}.projects-table .col-link{width:10%}.projects-table .col-actions{width:13%}.projects-panel th,.projects-panel td,.modal th,.modal td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.projects-panel td{white-space:normal;overflow-wrap:anywhere}.projects-panel th,.modal th{font-size:11px;color:#60708a;text-transform:uppercase;letter-spacing:.02em}.click-link{border:0;background:none;color:#0c5897;text-decoration:underline;cursor:pointer;padding:0;font-weight:700;text-align:left}.status-select{max-width:100%;border:0;border-radius:999px;padding:7px 28px 7px 10px;font-weight:800;font-size:12px}.status-sent{background:#fff3cc;color:#8a6200}.status-revisions{background:#ffe3e3;color:#aa2929}.status-approved{background:#dff8e9;color:#167a47}.action-group{display:flex;gap:6px;flex-wrap:wrap}.action-group .btn{padding:7px 10px;font-size:12px}.empty-state{text-align:center;padding:26px;color:var(--muted)}.modal-backdrop{position:fixed;inset:0;background:rgba(12,18,28,.66);z-index:50}.modal{position:fixed;z-index:60;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 30px));max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:24px;box-shadow:0 25px 70px rgba(0,0,0,.3)}.modal-wide{width:min(1180px,calc(100% - 30px))}.modal h2{margin-top:0}.modal p{color:var(--muted)}.modal-x{position:absolute;right:14px;top:10px;border:0;background:none;font-size:28px;cursor:pointer}.success-check{width:82px;height:82px;margin:0 auto 14px;border-radius:50%;border:6px solid #dff8e9;display:grid;place-items:center;animation:pop .45s ease}.success-check span{width:58px;height:58px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:34px}@keyframes pop{0%{transform:scale(.5);opacity:0}75%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}#successModal{text-align:center}.link-box{display:flex;gap:8px;margin:16px 0}.link-box input{flex:1;min-width:0;height:43px;border:1px solid var(--line);border-radius:8px;padding:0 10px}.inline-link{margin-top:4px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.warning-box{padding:12px;border-radius:9px;background:#fff1f1;border:1px solid #efb5b5;color:#9b2525;font-weight:700}.hidden{display:none!important}.client-manager-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:16px}.client-manager-head h2{margin-bottom:5px}.client-manager-head p{margin:0}.client-add-row{display:flex;gap:8px;align-items:center}.client-add-row input{height:42px;min-width:280px;border:1px solid #cfd7e3;border-radius:8px;padding:0 12px}.client-table{table-layout:fixed}.client-table th:nth-child(1){width:58%}.client-table th:nth-child(2){width:18%}.client-table th:nth-child(3){width:24%}.modal-table td{white-space:normal;overflow-wrap:anywhere}.preview-heading{margin-bottom:15px}.preview-heading h1{margin-bottom:5px}.preview-heading p{margin:0;color:var(--muted)}.preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.creative-card{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden}.creative-head{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid var(--line)}.creative-head h2{margin:0;font-size:15px}.creative-stage{min-height:120px;padding:12px;display:flex;align-items:center;justify-content:center;overflow:auto;background-image:linear-gradient(45deg,#f1f2f4 25%,transparent 25%),linear-gradient(-45deg,#f1f2f4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f1f2f4 75%),linear-gradient(-45deg,transparent 75%,#f1f2f4 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.creative-stage iframe{border:0;box-shadow:0 2px 10px rgba(0,0,0,.15);flex:0 0 auto}.preview-error{padding:20px;background:#fff0f0;border:1px solid #f0b6b6;border-radius:10px;color:#a12424}.modal-zoom{width:min(1200px,calc(100% - 26px));height:min(90vh,880px);padding:0;overflow:hidden}.zoom-head{padding:13px 15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.zoom-head h2,.zoom-head p{margin:0}.zoom-head p{color:var(--muted);margin-top:3px}.zoom-controls{display:flex;align-items:center;gap:8px}.zoom-stage{height:calc(100% - 74px);overflow:auto;background:#e9edf2;display:flex;align-items:center;justify-content:center;padding:22px}#zoomCanvas{transform-origin:center;line-height:0;box-shadow:0 8px 25px rgba(0,0,0,.2)}#zoomCanvas iframe{border:0}.wide-card{grid-column:1/-1}@media(max-width:1100px){.page-shell,.header-inner{max-width:100%}.projects-panel th,.projects-panel td{padding:10px 8px}.status-select{font-size:11px}.action-group .btn{padding:6px 8px}}@media(max-width:820px){.form-grid,.preview-grid{grid-template-columns:1fr}.wide-card{grid-column:auto}.header-inner{align-items:flex-start}.brand{font-size:16px}.file-row{grid-template-columns:auto 1fr auto}.ready{display:none}.zoom-head{align-items:flex-start;flex-direction:column;gap:10px}.project-table-wrap{overflow-x:auto}.projects-table{min-width:900px}.client-manager-head{align-items:stretch;flex-direction:column}.client-add-row input{min-width:0;flex:1}}@media(max-width:560px){.page-shell{padding:0 10px 30px}.link-box,.client-add-row{flex-direction:column}.client-add-row .btn,.client-add-row input{width:100%}.modal{padding:20px}.zoom-controls{flex-wrap:wrap}.form-actions{flex-direction:column-reverse}.form-actions .btn{width:100%}}


/* v3 refinements */
:root{--ui-size:14px}
body,input,button,select,textarea,.field,.projects-panel td,.modal td,.click-link,.btn,.status-trigger,.status-option{font-size:var(--ui-size)}
.field{font-size:var(--ui-size)}
.projects-panel th,.modal th{font-size:12px}
.btn-small,.action-group .btn{font-size:var(--ui-size)}
.status-select{font-size:var(--ui-size)}

.global-drop-overlay{position:fixed;inset:0;z-index:9999;background:rgba(5,8,13,.84);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);pointer-events:none;opacity:1;transition:opacity .15s ease}
.global-drop-overlay.hidden{display:none!important}
.drop-hot{color:#fff;font-size:clamp(34px,6vw,78px);font-weight:800;letter-spacing:-.04em;text-align:center;padding:28px 36px;border:3px dashed rgba(255,255,255,.8);border-radius:22px;box-shadow:0 0 0 8px rgba(206,141,34,.18);animation:dropPulse .8s ease-in-out infinite alternate}
@keyframes dropPulse{from{transform:scale(.98);opacity:.82}to{transform:scale(1.02);opacity:1}}

.status-picker{position:relative;display:inline-block;max-width:100%}
.status-trigger{border:0;border-radius:999px;padding:8px 32px 8px 12px;font-weight:800;cursor:pointer;position:relative;white-space:nowrap;min-width:150px;text-align:left}
.status-trigger:after{content:'⌄';position:absolute;right:11px;top:50%;transform:translateY(-52%);font-weight:800}
.status-menu{position:absolute;z-index:45;left:0;top:calc(100% + 5px);min-width:180px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 14px 32px rgba(0,0,0,.18)}
.status-option{display:block;width:100%;border:0;border-radius:7px;padding:9px 11px;text-align:left;font-weight:800;cursor:pointer;margin:3px 0}
.status-option.status-sent{background:#fff3cc;color:#8a6200}
.status-option.status-revisions{background:#ffe3e3;color:#aa2929}
.status-option.status-approved{background:#dff8e9;color:#167a47}

@media(max-width:1100px){body,input,button,select,textarea,.field,.projects-panel td,.modal td,.click-link,.btn,.status-trigger,.status-option{font-size:var(--ui-size)}.action-group .btn{font-size:var(--ui-size)}}

/* v4 approval dropdown fix */
.project-table-wrap{
  overflow:visible;
}
.projects-panel,
.projects-panel table,
.projects-panel tbody,
.projects-panel tr,
.projects-panel td{
  overflow:visible;
}
.projects-panel{
  position:relative;
  z-index:1;
}
.status-picker{
  position:relative;
  z-index:20;
}
.status-picker:has(.status-menu:not(.hidden)){
  z-index:100;
}
.status-menu{
  z-index:1000;
  top:calc(100% + 6px);
}
.projects-table tbody tr:last-child td{
  border-bottom:0;
}
@media(max-width:820px){
  .project-table-wrap{overflow-x:auto;overflow-y:visible}
}

/* v5 checklist, file limit, and modal editing */
.status-trigger{padding-right:12px}
.status-trigger:after{content:none!important}
.ready-button{border:0;background:none;padding:7px 8px;border-radius:7px;color:var(--green);font-weight:800;cursor:pointer}
.ready-button:hover{background:#eaf8ef;text-decoration:underline}
.checklist-head{padding-right:36px;margin-bottom:14px}
.checklist-head h2{margin-bottom:5px}
.checklist-head p{margin:0}
.checklist-body{display:grid;gap:14px}
.checklist-group{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.checklist-group h3{margin:0;padding:11px 14px;background:#f7f9fc;border-bottom:1px solid var(--line);font-size:14px}
.check-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid #edf0f4}
.check-row:last-child{border-bottom:0}
.check-row strong,.check-row small{display:block}
.check-row small{margin-top:3px;color:var(--muted);line-height:1.35}
.check-icon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:900}
.check-state{border-radius:999px;padding:6px 9px;font-size:12px;font-weight:800;white-space:nowrap}
.check-pass{background:#dff8e9;color:#167a47}
.check-fail{background:#ffe3e3;color:#aa2929}
.check-warn{background:#fff3cc;color:#8a6200}
.check-manual{background:#e8eef8;color:#3d5f91}
.checklist-note{margin-top:14px;padding:12px 14px;border:1px solid #edd59b;border-radius:10px;background:#fffaf0;color:#6f5612;line-height:1.45}
.edit-project-modal{width:min(1120px,calc(100% - 30px))}
.edit-modal-head{padding:0 38px 16px 0;margin-bottom:16px;border-bottom:1px solid var(--line)}
.edit-modal-head h2{margin:0 0 5px}
.edit-modal-head p{margin:0}
.compact-drop{min-height:190px;margin-top:16px;padding:24px}
.field select{width:100%;height:42px;border:1px solid #cfd7e3;border-radius:8px;padding:0 12px;background:#fff;color:var(--text);font-family:Inter,sans-serif;font-size:var(--ui-size)}
@media(max-width:700px){.check-row{grid-template-columns:28px minmax(0,1fr)}.check-state{grid-column:2;justify-self:start}.edit-project-modal{padding:18px}}

/* v6 preview click-through field */
.field-full{grid-column:1/-1}
.field small{font-weight:500;color:var(--muted);line-height:1.4}
.field input[type="url"]{width:100%;height:44px;border:1px solid #cfd7e3;border-radius:8px;padding:0 12px;background:#fff;color:var(--text);font-family:Inter,sans-serif;font-size:var(--ui-size)}

/* v7 bulk file actions, upload feedback, and compact live thumbnails */
.drop-hot{font-size:clamp(26px,4.2vw,54px);padding:22px 30px;border-radius:18px}
.drop-zone{position:relative;overflow:hidden}
.upload-success{animation:uploadZoneFlash 1.35s ease}
.upload-success-message{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(236,250,242,.96);color:#167a47;font-size:18px;font-weight:800;animation:uploadMessageIn .35s ease both}
.upload-success-message span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#1fa463;color:#fff;font-size:22px;animation:successPop .5s ease both}
@keyframes uploadZoneFlash{0%,100%{box-shadow:none}35%{box-shadow:0 0 0 5px rgba(80,180,208,.22),0 0 24px rgba(80,180,208,.3)}}
@keyframes uploadMessageIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes successPop{0%{transform:scale(.3) rotate(-25deg)}75%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.file-bulk-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 8px;padding:9px 12px;border:1px solid #d8e0ea;border-radius:10px;background:#f7f9fc;animation:bulkIn .2s ease}
.file-bulk-bar label{display:flex;align-items:center;gap:8px;font-weight:700}.file-bulk-bar>div{display:flex;gap:7px;flex-wrap:wrap}.file-bulk-bar>span{color:var(--muted);margin-left:auto}
@keyframes bulkIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.file-row{grid-template-columns:28px 66px 44px minmax(0,1fr) auto auto!important;min-height:68px}
.file-row.just-added{animation:fileArrive .72s cubic-bezier(.2,.8,.2,1)}
@keyframes fileArrive{0%{opacity:0;transform:translateY(-12px) scale(.98);background:#eaf9ff}55%{opacity:1;transform:translateY(2px) scale(1.005);background:#eaf9ff}100%{transform:none;background:#fff}}
.file-check{display:grid;place-items:center;cursor:pointer}.file-check input{position:absolute;opacity:0;pointer-events:none}.file-check span{width:18px;height:18px;border:1.5px solid #b8c3d1;border-radius:5px;background:#fff;display:grid;place-items:center}.file-check input:checked+span{background:var(--teal);border-color:var(--teal)}.file-check input:checked+span:after{content:'✓';color:#fff;font-size:12px;font-weight:900}
.tiny-preview{width:62px;height:42px;overflow:hidden;border:1px solid #d8dee7;border-radius:6px;background:#fff;position:relative;pointer-events:none;display:grid;place-items:center}
.tiny-preview-frame{position:absolute;left:0;top:0;border:0;transform-origin:top left;width:300px;height:250px;transform:scale(.17);pointer-events:none;background:#fff}
.tiny-preview-fallback{font-size:10px;font-weight:800;color:var(--gold)}
@media(max-width:760px){.file-row{grid-template-columns:28px 52px minmax(0,1fr) auto!important}.tiny-preview{width:48px;height:34px}.tiny-preview-frame{transform:scale(.14)}.zip-badge{display:none}.ready-button{display:none}.file-bulk-bar{align-items:flex-start;flex-wrap:wrap}.file-bulk-bar>span{order:3;width:100%;margin-left:0}}


/* v8 approved-row and success-preview refinements */
.projects-table tbody tr.project-row-approved td{background:#f1fcf5}
.projects-table tbody tr.project-row-approved:hover td{background:#eaf9f0}
.projects-table tbody tr td{transition:background-color .2s ease}
.success-actions{display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.success-actions .inline-link{margin-top:0}
@media(max-width:560px){.success-actions{flex-direction:column}.success-actions .btn{width:100%}}


/* Project bulk selection */
.project-bulk-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 14px 0;padding:9px 12px;border:1px solid #d8e0ea;border-radius:10px;background:#f7f9fc;animation:bulkIn .2s ease}
.project-bulk-bar label{display:flex;align-items:center;gap:8px;font-weight:700}
.project-bulk-bar span{margin-left:auto;color:var(--muted);font-weight:600}
.projects-table .col-check{width:3.5%}
.projects-table .col-project{width:27.5%}
.projects-table .col-client{width:12%}
.projects-table .col-sizes{width:9%}
.projects-table .col-status{width:15%}
.projects-table .col-updated{width:10%}
.projects-table .col-link{width:10%}
.projects-table .col-actions{width:13%}
.project-check-cell,.check-heading{text-align:center!important;padding-left:10px!important;padding-right:6px!important}
.project-check{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.project-check input{width:16px;height:16px;accent-color:var(--teal);cursor:pointer}
@media(max-width:820px){.project-bulk-bar{margin:10px 10px 0}.projects-table{min-width:960px}}

/* v10 unified selection controls and client-project bulk actions */
.project-check input,
.bulk-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.project-check span,
.bulk-check span{
  width:18px;
  height:18px;
  border:1.5px solid #b8c3d1;
  border-radius:5px;
  background:#fff;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
}
.project-check input:checked + span,
.bulk-check input:checked + span{
  background:var(--teal);
  border-color:var(--teal);
}
.project-check input:checked + span:after,
.bulk-check input:checked + span:after{
  content:'✓';
  color:#fff;
  font-size:12px;
  font-weight:900;
}
.project-check input:indeterminate + span,
.bulk-check input:indeterminate + span{
  background:var(--teal);
  border-color:var(--teal);
}
.project-check input:indeterminate + span:after,
.bulk-check input:indeterminate + span:after{
  content:'−';
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.bulk-check{display:inline-flex!important;align-items:center;gap:8px;cursor:pointer;font-weight:700}
.client-project-bulk-bar{margin:12px 0}
.client-project-table th:first-child,.client-project-table td:first-child{width:42px;text-align:center}
.client-project-table tbody tr.project-row-approved td{background:#f1fcf5}
.brand img{object-fit:contain;background:transparent;border-radius:0}

/* v11 client preview modes and placement simulator */
.preview-shell-v11{max-width:1440px}
.preview-project-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px;padding:2px 0}
.preview-project-copy h1{margin:0 0 6px;font-size:28px;line-height:1.18}
.preview-project-copy p{margin:0;color:var(--muted);font-weight:500}
.preview-mode-switch{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.preview-mode-btn{border:0;border-radius:10px;padding:11px 15px;color:#fff;font-weight:800;display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 4px 12px rgba(15,33,59,.12);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.preview-mode-btn:hover{transform:translateY(-1px);filter:brightness(.98)}
.preview-mode-btn.active{box-shadow:0 0 0 3px #fff,0 0 0 5px currentColor,0 7px 18px rgba(15,33,59,.18)}
.mode-red{background:#ef5a62;color:#fff}
.mode-yellow{background:#f3c900;color:#231b00}
.mode-icon{font-size:18px;line-height:1}
.preview-mode-view{animation:modeFade .22s ease}
@keyframes modeFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.creative-head .btn{gap:7px}
.zoom-button-icon{font-size:15px;line-height:1}

.placement-panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(15,33,59,.06);overflow:hidden}
.placement-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:18px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#fff 0%,#fff9ed 100%)}
.placement-header h2{margin:3px 0 0;font-size:22px}.placement-header p{margin:7px 0 0;color:var(--muted);font-size:13px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--gold2)}
.simulation-badge{background:#fff3cd;color:#72580d;border:1px solid #ecd48d;border-radius:999px;padding:8px 11px;font-size:11px;font-weight:900;white-space:nowrap}
.placement-controls{display:grid;grid-template-columns:1.3fr .8fr 1fr 1.1fr auto;gap:10px;align-items:end;padding:14px 18px;border-bottom:1px solid var(--line);background:#fbfcfd}
.control-group{display:flex;flex-direction:column;gap:6px}.control-group label{font-size:12px;font-weight:800}.control-group select{height:40px;border:1px solid #cfd7e3;border-radius:8px;padding:0 10px;background:#fff;color:var(--text);font-size:13px}
.placement-replay{height:40px;gap:7px}
.simulator-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 18px;border-bottom:1px solid var(--line);background:#fff}
.simulator-toolbar strong{display:block;font-size:14px}.simulator-toolbar span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.scale-controls{display:flex;align-items:center;gap:7px}.scale-controls #scaleValue{min-width:50px;text-align:center;margin:0;color:var(--text);font-weight:700}
.simulation-viewport{min-height:620px;padding:18px;overflow:auto;background:#e9edf2;display:flex;align-items:flex-start;justify-content:center}
.device-frame{position:relative;transform-origin:top center;transition:transform .18s ease,width .18s ease;box-shadow:0 12px 35px rgba(15,33,59,.18);background:#fff;overflow:hidden}
.device-frame.desktop{width:1180px;min-height:720px}.device-frame.tablet{width:820px;min-height:720px;border-radius:18px;border:10px solid #23262d}.device-frame.mobile{width:390px;min-height:720px;border-radius:24px;border:10px solid #23262d}
.site-mockup{width:100%;min-height:720px;background:#fff;color:#1f2937;font-family:'Inter',Arial,sans-serif;position:relative;overflow:hidden}
.mock-topbar{height:52px;background:#131921;color:#fff;display:flex;align-items:center;padding:0 18px;gap:18px;font-size:13px}.mock-brand{font-weight:800;font-size:18px}.mock-search{height:34px;border-radius:6px;background:#fff;flex:1;max-width:620px}.mock-nav{height:34px;background:#232f3e;color:#fff;display:flex;align-items:center;gap:22px;padding:0 18px;font-size:12px}
.mock-content{padding:18px}.mock-hero{height:130px;border-radius:10px;background:linear-gradient(135deg,#edf4fb,#fff4df);display:flex;align-items:center;padding:24px;margin-bottom:18px}.mock-hero h3{font-size:26px;margin:0}.mock-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.mock-main,.mock-side{min-width:0}.mock-card{border:1px solid #e0e4e9;border-radius:10px;padding:14px;background:#fff;margin-bottom:14px}.mock-products{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.mock-product{border:1px solid #e1e5ea;border-radius:8px;padding:10px}.mock-product-img{height:100px;background:#f0f2f4;border-radius:6px;margin-bottom:8px}.mock-lines i{display:block;height:8px;background:#e7eaee;border-radius:999px;margin:7px 0}.mock-lines i:nth-child(2){width:72%}.mock-lines i:nth-child(3){width:46%}
.mock-walmart .mock-topbar{background:#0071dc}.mock-walmart .mock-nav{background:#004f9a}.mock-target .mock-topbar{background:#cc0000}.mock-target .mock-nav{background:#fff;color:#333;border-bottom:1px solid #ddd}.mock-publisher .mock-topbar,.mock-lifestyle .mock-topbar{background:#172132}.mock-publisher .mock-nav,.mock-lifestyle .mock-nav{background:#fff;color:#333;border-bottom:1px solid #ddd}
.sim-ad-wrap{display:flex;justify-content:center;align-items:center;padding:10px;min-height:72px;background:repeating-conic-gradient(#f5f5f5 0 25%,#fff 0 50%) 50%/16px 16px;border:1px dashed #cfd7e3;border-radius:8px;overflow:auto}.sim-ad-wrap iframe{border:0;display:block;flex:0 0 auto;box-shadow:0 2px 9px rgba(0,0,0,.14)}
.sim-ad-top{margin-bottom:16px}.sim-ad-right{position:sticky;top:14px}.sim-ad-inline{margin:16px 0}.sim-ad-sticky{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.placement-disclaimer{padding:12px 18px;background:#fff8e7;border-top:1px solid #f0d99a;color:#72580d;font-size:12px;line-height:1.5}

.zoom-modal-v11{height:min(92vh,920px)}
.zoom-head-v11{min-height:70px;padding-right:70px;position:relative}.zoom-close-icon{position:absolute;right:18px;top:16px;width:38px;height:38px;border:1px solid #d8dee7;border-radius:50%;background:#fff;color:var(--text);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center}.zoom-close-icon:hover{background:#f3f5f7}
.zoom-stage-v11{height:calc(100% - 142px);padding-bottom:28px}
.zoom-bottom-controls{height:72px;border-top:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px}
.zoom-scale-group{display:flex;align-items:center;gap:8px}.zoom-scale-group #zoomPercent{min-width:58px;text-align:center;font-weight:700}
.zoom-bottom-controls .btn{gap:7px}

@media(max-width:1000px){.preview-project-header{align-items:flex-start;flex-direction:column}.preview-mode-switch{width:100%}.preview-mode-btn{flex:1}.placement-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.placement-replay{width:100%}.mock-layout{grid-template-columns:1fr}.mock-side{display:none}}
@media(max-width:650px){.preview-mode-switch{flex-direction:column}.preview-mode-btn{width:100%}.placement-header,.simulator-toolbar{align-items:flex-start;flex-direction:column}.placement-controls{grid-template-columns:1fr}.simulation-viewport{min-height:520px;padding:10px;justify-content:flex-start}.zoom-bottom-controls{height:auto;min-height:84px;flex-direction:column}.zoom-stage-v11{height:calc(100% - 175px)}.preview-project-copy h1{font-size:23px}}


/* v12 neutral preview mode tabs */
.preview-mode-btn{border:1px solid #d7dde6!important;background:#fff!important;color:#172132!important;box-shadow:0 3px 10px rgba(15,33,59,.07)!important;transition:transform .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease!important}
.preview-mode-btn:hover{transform:translateY(-1px);border-color:#ef5862!important;box-shadow:0 5px 14px rgba(239,88,98,.16)!important;filter:none!important}
.preview-mode-btn.active{background:#ef5862!important;color:#fff!important;border-color:#ef5862!important;box-shadow:0 6px 16px rgba(239,88,98,.24)!important}
.mode-red,.mode-yellow{background:#fff!important;color:#172132!important}
.preview-mode-btn.active .mode-icon{color:#fff}
/* v12 stable placement simulator templates */
.retail-top { height: 62px; display: flex; align-items: center; gap: 18px; padding: 0 22px; color: #fff; }
.retail-top.dark { background: #172334; }
.retail-top.blue { background: #0875ce; }
.retail-top.red { background: #cc0000; }
.retail-logo { font-size: 19px; font-weight: 900; white-space: nowrap; display:flex; align-items:center; }
.retail-logo.amazon-brand img { display:block; width:112px; height:34px; object-fit:contain; object-position:left center; }
.round-logo { letter-spacing: -.02em; }
.retail-search { flex: 1; height: 38px; border-radius: 7px; background: #fff; color: #8a94a5; display: flex; align-items: center; padding: 0 13px; font-size: 12px; }
.retail-search.light { background: #fff; }
.retail-account { font-size: 12px; font-weight: 700; white-space: nowrap; }
.retail-nav { min-height: 34px; display: flex; align-items: center; gap: 22px; padding: 0 22px; background: #243247; color: #fff; font-size: 11px; }
.retail-nav.rounded { background: #fff; color: #183b64; border-bottom: 1px solid #e2e8f0; }
.retail-nav.centered { background: #fff; color: #333; justify-content: center; border-bottom: 1px solid #e5e7eb; }
.retail-content { display: grid; grid-template-columns: 155px minmax(0,1fr) 330px; gap: 18px; padding: 20px; }
.retail-content.wide-content { grid-template-columns: minmax(0,1fr) 330px; }
.filter-column { border-right: 1px solid #e5e7eb; padding-right: 15px; }
.mock-filter { width: 86%; height: 11px; border-radius: 6px; background: #e8edf3; margin: 13px 0; }
.mock-breadcrumb { font-size: 10px; color: #64748b; margin-bottom: 10px; }
.results-column h3 { margin: 8px 0 13px; font-size: 19px; }
.product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.product-grid.compact { margin-top: 12px; }
.walmart-site .product-grid, .target-site .product-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.mock-product { min-width: 0; padding: 9px; border: 1px solid #edf0f4; border-radius: 8px; background: #fff; }
.mock-product-image { width: 100%; aspect-ratio: 1; border-radius: 6px; background: #eef2f6; margin-bottom: 10px; }
.tone-1 { background: linear-gradient(135deg,#f8e9c8,#f2c66d); }
.tone-2 { background: linear-gradient(135deg,#dceff6,#7bc0d6); }
.tone-3 { background: linear-gradient(135deg,#f7d8dc,#ed8994); }
.tone-4 { background: linear-gradient(135deg,#e5efd8,#9fc17a); }
.mock-line { height: 8px; border-radius: 6px; background: #e5e9ef; margin: 7px 0; }
.w-90 { width: 90%; }.w-80 { width: 80%; }.w-70 { width: 70%; }
.mock-rating { color: #d59c1a; font-size: 10px; letter-spacing: 1px; margin-top: 7px; }
.mock-price { margin-top: 5px; font-size: 12px; font-weight: 900; }
.retail-rail { min-width: 0; }
.rail-card, .news-card { border: 1px solid #e5e7eb; border-radius: 9px; padding: 12px; background: #fff; }
.rail-card .mock-product-image { margin-top: 12px; }
.promo-strip { background: #e8f3ff; color: #0d4f8b; text-align: center; padding: 10px; font-weight: 900; font-size: 13px; }
.hero-shelf { display: flex; align-items: center; justify-content: space-between; padding: 18px; border-radius: 10px; background: #eef6ff; margin-bottom: 16px; overflow: hidden; }
.hero-shelf h3 { margin: 3px 0 5px; }
.hero-shelf p { margin: 0; color: #5f6b7a; font-size: 12px; }
.hero-shape { width: 150px; height: 85px; border-radius: 50% 20% 45% 30%; background: linear-gradient(135deg,#5ab3ff,#0c78cf); }
.category-circles { display: flex; gap: 18px; justify-content: center; margin: 10px 0 18px; }
.category-circles div { text-align: center; font-size: 10px; color: #666; }
.category-circles .circle { display: block; width: 70px; height: 70px; border-radius: 50%; margin-bottom: 6px; }
.feature-band { min-height: 150px; margin-top: 16px; border-radius: 10px; background: linear-gradient(120deg,#f9dede,#fff2f2); display: flex; align-items: center; padding: 22px; }
.feature-band h3 { font-size: 24px; margin: 3px 0; }
.ad-slot { position: relative; display: flex; align-items: center; justify-content: center; background: #f4f5f7; border: 1px dashed #cdd4de; overflow: auto; padding: 17px 10px 10px; }
.ad-slot iframe { border: 0; flex: 0 0 auto; background: #fff; box-shadow: 0 2px 9px rgba(0,0,0,.16); }
.ad-label { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); color: #7c8797; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.ad-top { margin: 14px auto 0; max-width: 980px; min-height: 120px; }
.ad-right { width: 100%; min-height: 310px; }
.ad-inline { margin: 20px 0; min-height: 290px; }
.ad-sticky { position: sticky; bottom: 0; z-index: 5; min-height: 76px; border-left: 0; border-right: 0; border-bottom: 0; background: rgba(244,245,247,.96); }
.publisher-header { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; border-bottom: 1px solid #e5e7eb; }
.publisher-logo { font-family: Georgia,serif; font-size: 25px; font-weight: 900; }
.publisher-nav { display: flex; gap: 18px; color: #4b5563; font-size: 12px; }
.publisher-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 26px; padding: 28px 50px; }
.article-column { max-width: 720px; }
.mock-kicker { color: #aa7a12; font-weight: 900; font-size: 10px; letter-spacing: .1em; }
.article-column h1 { font-family: Georgia,serif; font-size: 38px; line-height: 1.12; margin: 9px 0 10px; }
.article-deck { color: #5f6b7a; font-size: 16px; line-height: 1.55; }
.article-hero { height: 320px; border-radius: 4px; background: linear-gradient(135deg,#d9e7ef,#87aabd); margin: 20px 0; }
.lifestyle-site .article-hero { background: linear-gradient(135deg,#f3dfc9,#ca9f75); }
.article-copy { color: #374151; font-family: Georgia,serif; font-size: 16px; line-height: 1.75; }
.news-thumb { height: 160px; background: linear-gradient(135deg,#e6e9ed,#aeb7c3); margin-bottom: 12px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin: 22px 2px 10px; }
.placement-disclaimer { padding: 12px 18px; background: #fff8e7; border-top: 1px solid #f0d99a; color: #72580d; font-size: 12px; line-height: 1.5; }
.device-frame.mobile .retail-content, .device-frame.mobile .retail-content.wide-content, .device-frame.mobile .publisher-layout { grid-template-columns: 1fr; padding: 12px; }
.device-frame.mobile .filter-column, .device-frame.mobile .retail-rail, .device-frame.mobile .publisher-rail, .device-frame.mobile .retail-account { display: none; }
.device-frame.mobile .retail-top { height: 54px; padding: 0 12px; gap: 9px; }
.device-frame.mobile .retail-logo { font-size: 14px; }
.device-frame.mobile .retail-logo.amazon-brand img { width:88px; height:28px; }
.device-frame.mobile .retail-nav { overflow: hidden; gap: 13px; padding: 0 12px; white-space: nowrap; }
.device-frame.mobile .product-grid, .device-frame.mobile .walmart-site .product-grid, .device-frame.mobile .target-site .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.device-frame.mobile .category-circles { overflow: hidden; justify-content: flex-start; }
.device-frame.mobile .category-circles .circle { width: 50px; height: 50px; }
.device-frame.mobile .article-column h1 { font-size: 28px; }
.device-frame.mobile .article-hero { height: 210px; }
.device-frame.mobile .publisher-header { padding: 0 14px; }
.device-frame.mobile .publisher-nav { display: none; }
.device-frame.mobile .ad-slot { max-width: 100%; overflow: auto; justify-content: flex-start; }
.device-frame.tablet .retail-content { grid-template-columns: 120px minmax(0,1fr); }
.device-frame.tablet .retail-content.wide-content, .device-frame.tablet .publisher-layout { grid-template-columns: minmax(0,1fr) 280px; }
.device-frame.tablet .retail-rail { display: none; }
.device-frame.tablet .product-grid, .device-frame.tablet .walmart-site .product-grid, .device-frame.tablet .target-site .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }


.site-mockup,.site-mockup *{font-family:'Inter',Arial,sans-serif}

/* v13 preview refinements */
.btn,.preview-mode-btn,.control-group select{font-family:'Inter',Arial,sans-serif;font-weight:600}
.preview-replay-btn{margin-top:12px;display:inline-flex;align-items:center;gap:7px}
.preview-project-copy p{margin-bottom:0}
.creative-head>div{min-width:0}
.creative-head h2{margin:0;font-size:16px;font-weight:700;line-height:1.2}
.creative-size-sub{display:block;margin-top:4px;font-size:12px;color:var(--muted);font-weight:500}
.placement-panel{padding-top:0}
.device-stage{position:relative;display:flex;justify-content:center;align-items:flex-start;min-width:max-content}
.device-frame.desktop{width:1180px;min-height:720px;overflow:visible}
.device-frame.tablet{width:768px;height:900px;min-height:0;overflow-y:auto;overflow-x:hidden;border-radius:20px;border:10px solid #23262d}
.device-frame.mobile{width:390px;height:760px;min-height:0;overflow-y:auto;overflow-x:hidden;border-radius:26px;border:10px solid #23262d}
.device-frame.tablet .site-mockup,.device-frame.mobile .site-mockup{min-height:1250px;overflow:visible}
.device-frame.tablet::-webkit-scrollbar,.device-frame.mobile::-webkit-scrollbar{width:10px}
.device-frame.tablet::-webkit-scrollbar-thumb,.device-frame.mobile::-webkit-scrollbar-thumb{background:#aeb7c3;border-radius:10px;border:2px solid #fff}
.device-frame.tablet::-webkit-scrollbar-track,.device-frame.mobile::-webkit-scrollbar-track{background:#eef1f5}

/* v15 authentication and admin */
.brand small{display:block;color:#b9c1cd;font-size:12px;font-weight:500;margin-top:2px}.auth-header-actions{display:flex;align-items:center;gap:8px}.auth-nav-btn{color:#fff;text-decoration:none;border:1px solid #4a4d52;border-radius:8px;padding:8px 11px;font-weight:600}.user-chip{display:flex;align-items:center;gap:9px;border:1px solid #444;border-radius:999px;padding:5px 7px 5px 6px;background:#222;color:#fff}.user-chip img,.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--gold);color:#fff;display:grid;place-items:center;font-weight:800}.user-chip div{display:flex;flex-direction:column;line-height:1.1}.user-chip strong{font-size:12px}.user-chip small{font-size:10px;color:#c9c9c9;margin-top:3px;text-transform:capitalize}.user-chip button{border:0;background:#111;color:#fff;border-radius:999px;padding:7px 10px;font:600 11px Inter;cursor:pointer}
.login-page{min-height:100vh;background:#f4f6f8;display:grid;place-items:center;font-family:Inter}.login-wrap{width:min(440px,calc(100% - 28px))}.login-card{background:#fff;border:1px solid #dfe3e8;border-top:4px solid var(--gold);border-radius:16px;padding:28px;box-shadow:0 18px 45px rgba(18,29,45,.1)}.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:28px}.login-brand img{width:52px;height:52px;object-fit:contain}.login-brand h1{font-size:20px;margin:0;color:var(--text)}.login-brand p{font-size:12px;color:var(--muted);margin:4px 0 0}.google-button{display:flex;justify-content:center;min-height:44px}.sso-note{padding:13px;border:1px solid #efd291;background:#fff9e9;border-radius:10px;color:#725000;font-size:12px;line-height:1.5}.sso-note span{display:block;margin-top:4px}.login-divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:#6c7481;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.08em}.login-divider:before,.login-divider:after{content:'';height:1px;background:#dce1e7;flex:1}.demo-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.login-footnote{text-align:center;color:var(--muted);font-size:12px;line-height:1.5;margin:18px 10px 0}.login-error{padding:10px 12px;background:#fff0f0;border:1px solid #ffc4c4;color:#a51e27;border-radius:9px;font-size:12px;margin-bottom:14px}
.admin-shell{width:min(1440px,calc(100% - 40px));margin:20px auto 50px}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.admin-stats article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);min-height:94px;display:flex;flex-direction:column;justify-content:center}.admin-stats strong{font-size:28px}.admin-stats span{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:800;letter-spacing:.06em;margin-top:8px}.admin-panel{margin-top:18px}.admin-user-table{width:100%;border-collapse:collapse}.admin-user-table th,.admin-user-table td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}.admin-user-table th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.admin-user-cell{display:flex;align-items:center;gap:10px}.admin-user-cell div{display:flex;flex-direction:column}.admin-user-cell small{color:var(--muted);margin-top:3px}.admin-user-cell em{font-style:normal;background:#dff4ff;color:#1683a5;border-radius:999px;padding:2px 6px;font-size:9px;text-transform:uppercase}.admin-user-table select{font:500 13px Inter;padding:8px 28px 8px 10px;border:1px solid var(--line);border-radius:8px}.auth-pill{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800;text-transform:capitalize}.auth-pill-on{background:#e9f8df;color:#247a21;border:1px solid #bfe4aa}.auth-pill-wait{background:#fff2c9;color:#886000}.auth-pill-off{background:#f0f2f5;color:#68707e}.admin-policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px}.admin-policy-grid article{padding:14px;border:1px solid var(--line);border-radius:11px;background:#fafbfd}.admin-policy-grid p{font-size:12px;color:var(--muted);line-height:1.5;margin:7px 0 0}.prototype-note{margin:0 18px 18px;padding:10px 12px;border:1px dashed #e7c878;background:#fff9e8;color:#7d5b0a;border-radius:9px;font-size:11px}.form-grid.single{grid-template-columns:1fr}.form-grid.single .field{grid-column:auto}
@media(max-width:850px){.admin-stats{grid-template-columns:repeat(2,1fr)}.admin-policy-grid{grid-template-columns:1fr}.auth-nav-btn{display:none}}@media(max-width:560px){.demo-buttons{grid-template-columns:1fr}.admin-stats{grid-template-columns:1fr}.user-chip div{display:none}}

/* v16 password login form */
.password-form{display:flex;flex-direction:column;gap:14px;margin-bottom:4px}
.password-form .field input{width:100%}
.login-submit{width:100%;height:44px}