.draft-banner {
  margin-bottom: 18px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid #ddc589;
  background: var(--gold-soft);
  font-size: 12px;
}
.draft-banner span { flex: 1; }
.login-shell{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:30px}.login-card{width:min(420px,100%);padding:34px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}.login-card h1{margin:0 0 8px;font-size:32px;font-weight:400}.login-card>p:not(.eyebrow){margin:0 0 25px;color:var(--muted);font-size:13px}.login-card .field{margin-bottom:16px}.login-card .button{width:100%;margin-top:4px}.login-error{min-height:18px;margin-top:14px;color:var(--red);font-size:12px}

.dropzone {
  width: 100%;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.photo-picker {
  min-height: 190px;
  padding: 28px;
  border: 1px dashed #8f8c83;
  background: #faf9f5;
  color: var(--ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.photo-picker:hover,.photo-picker.drag { border-color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.photo-picker:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.photo-picker-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; }
.photo-picker-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.photo-picker-copy { display: grid; gap: 4px; text-align: center; }
.photo-picker-copy b { font-size: 14px; font-weight: 500; }
.photo-picker-copy small,.photo-picker-meta { color: var(--muted); font-size: 10px; line-height: 1.4; }
.photo-picker-action { margin: 4px 0 2px; padding: 10px 16px; background: var(--ink); color: #fff; font-size: 11px; }
.photo-picker:hover .photo-picker-action { background: var(--gold); }

.location-editor-head {
  margin: 30px 0 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.location-editor-head h3 { margin: 0; font-size: 24px; font-weight: 400; }

.logo-presentation {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr);
  gap: 22px;
}
.logo-preview-column { display: grid; align-content: start; gap: 10px; }
.logo-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.logo-preview-head b { font-size: 12px; font-weight: 500; }
.logo-preview-head span,.logo-preview-note { color: var(--muted); font-size: 10px; line-height: 1.4; }
.field label.logo-uploader {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: clamp(20px,5vw,52px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  text-transform: none;
  letter-spacing: 0;
}
.field label.logo-uploader.is-wide { aspect-ratio: 16/9; }
.field label.logo-uploader.is-standard { aspect-ratio: 4/3; }
.field label.logo-uploader img { display: block; object-fit: contain; }
.field label.logo-uploader.is-empty { border: 1px dashed #9e9b91; cursor: pointer; }
.field label.logo-uploader.is-empty:hover { box-shadow: inset 0 0 0 2px var(--gold); }
.field label.logo-uploader:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.logo-empty-state { display: grid; justify-items: center; gap: 7px; color: var(--ink); text-align: center; }
.logo-empty-state svg { width: 42px; height: 42px; padding: 8px; border: 1px solid currentColor; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.logo-empty-state b { font-size: 13px; font-weight: 500; }
.logo-empty-state small { color: var(--muted); font-size: 10px; }
.field label.logo-change-button {
  width: max-content;
  min-height: 42px;
  margin: 2px 0 0;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.field label.logo-change-button:hover { border-color: var(--gold); background: var(--gold); color: #fff; }
.logo-controls { display: grid; align-content: start; gap: 18px; }
.toggle { display: flex!important; gap: 10px; align-items: center; color: var(--ink)!important; font-size: 12px!important; text-transform: none!important; letter-spacing: 0!important; }
.toggle input { width: 18px; min-height: 18px; }
.color-control { display: grid; grid-template-columns: 48px 1fr; gap: 8px; }
.color-control input[type="color"] { padding: 3px; }
.size-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.is-disabled { opacity: .42; }

.stage { max-width: 1180px; }
.location-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.location-master {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 230px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: #fff;
}
.location-master .location-list { overflow: auto; gap: 0; }
.location-master .add-location { margin: 12px; flex: none; }
.location-row {
  position: relative;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.location-row.selected { background: var(--gold-soft); box-shadow: inset 3px 0 var(--gold); }
.location-select {
  width: 100%;
  padding: 14px 38px 14px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.location-select strong,.location-select small { display: block; }
.location-select strong { margin-bottom: 4px; font-size: 12px; }
.location-select small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.location-remove {
  position: absolute;
  top: 12px;
  right: 9px;
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.location-remove:hover { background: #f5dfdc; color: var(--red); }
.location-detail { min-width: 0; }
.location-detail .location-editor-head { margin-top: 0; }
.location-detail .panel { padding: 22px; }
.empty-state.compact { padding: 30px 12px; border: 0; }

.review-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.preview-device { display: inline-flex; padding: 3px; border: 1px solid var(--line); background: #fff; }
.preview-device button { min-width: 74px; padding: 8px 11px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; }
.preview-device button.active { background: var(--ink); color: #fff; }
.publish-preview { width: 100%; margin: 0 auto 16px; overflow: hidden; border: 1px solid #252525; background: #0c0c0c; box-shadow: 0 18px 45px rgba(0,0,0,.12); transition: width .3s ease; }
.publish-preview.is-mobile { width: min(390px,100%); }
.preview-browser-bar { height: 34px; padding: 0 13px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #333; background: #191919; color: rgba(255,255,255,.58); }
.preview-browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: #555; }
.preview-browser-bar b { margin-left: 7px; font-size: 9px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.preview-site { min-height: 520px; padding: clamp(18px,3vw,34px); background: #f7f7f7; color: #2e2e2e; }
.preview-site-head { display: flex; align-items: center; justify-content: center; padding: 12px 0 30px; color: #2e2e2e; }
.preview-site-head span { display: none; }
.preview-site-head::after { content: 'PROJECTS'; font-size: clamp(34px,5vw,64px); font-weight: 400; line-height: 1; letter-spacing: -.06em; }
.preview-content { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(350px,1.35fr); gap: clamp(18px,3vw,38px); }
.preview-brand>p,.preview-project-head span { margin: 0 0 9px; color: #77746e; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.preview-brand-tile { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.preview-brand-tile img { display: block; width: auto; height: auto; object-fit: contain; }
.preview-brand-tile>span { color: #777; font-size: 12px; }
.preview-brand-copy { display: none; }
.preview-brand-copy>span { color: rgba(255,255,255,.48); font-size: 9px; }
.preview-brand-copy h3 { margin: 5px 0 8px; font-size: clamp(22px,3vw,38px); font-weight: 400; letter-spacing: -.035em; }
.preview-brand-copy p { max-width: 40em; margin: 0; color: rgba(255,255,255,.58); font-size: 10px; line-height: 1.5; }
.preview-project { min-width: 0; padding: 24px; background: #fff; color: #2e2e2e; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.preview-project-head { min-height: 62px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.preview-project-head h3 { margin: 0 0 4px; font-size: 23px; font-weight: 400; letter-spacing: -.03em; }
.preview-project-head p { margin: 0; color: #777; font-size: 9px; }
.preview-project-head>b { color: #777; font-size: 9px; font-weight: 400; }
.preview-location-tabs { margin: 0 -18px 13px; padding: 0 18px 10px; display: flex; gap: 6px; overflow: auto; border-bottom: 1px solid #ddd; }
.preview-location-tabs button { flex: none; padding: 7px 9px; border: 1px solid #d2d0c8; background: #fff; cursor: pointer; color: #555; font-size: 8px; }
.preview-location-tabs button.active { border-color: #171717; background: #171717; color: #fff; }
.preview-photo-stage { position: relative; aspect-ratio: 1; overflow: hidden; background: #ddd; }
.preview-photo-stage img { width: 100%; height: 100%; object-fit: cover; }
.preview-photo-stage span { position: absolute; right: 8px; bottom: 8px; padding: 5px 7px; background: rgba(0,0,0,.72); color: #fff; font-size: 8px; }
.preview-photo-stage::after { content: 'View gallery'; position: absolute; left: 0; bottom: 0; padding: 10px 12px; background: #fff; color: #2e2e2e; font-size: 10px; }
.preview-thumbs { margin-top: 8px; display: flex; gap: 6px; overflow: auto; }
.preview-thumbs button { flex: 0 0 54px; aspect-ratio: 1; padding: 2px; border: 1px solid transparent; background: transparent; cursor: pointer; }
.preview-thumbs button.active { border-color: #171717; }
.preview-thumbs img { width: 100%; height: 100%; display: block; object-fit: cover; }
.preview-photo-empty { aspect-ratio: 16/9; display: grid; place-items: center; background: #e7e5de; color: #777; font-size: 10px; }
.publish-summary { padding: 15px 17px; display: flex; align-items: center; gap: 15px; border: 1px solid #b9d4c1; background: #eef7f0; color: #245c38; }
.publish-summary>div { flex: 1; display: grid; gap: 4px; }
.publish-summary b { font-size: 12px; }
.publish-summary span { font-size: 10px; line-height: 1.4; }
.publish-summary.has-errors { display: block; border-color: #dfbbb5; background: #fbefed; color: var(--red); }
.publish-summary ul { margin: 8px 0 0; padding-left: 18px; font-size: 10px; line-height: 1.6; }
.ready-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #2f7950; color: #fff; }
.publish-preview.is-mobile .preview-site { min-height: 600px; padding: 18px; }
.publish-preview.is-mobile .preview-content { grid-template-columns: 1fr; }
.publish-preview.is-mobile .preview-brand-tile { aspect-ratio: 1; }
.publish-preview.is-mobile .preview-brand-copy h3 { font-size: 28px; }
.publish-preview.is-mobile .preview-project { padding: 13px; }
.publish-preview.is-mobile .preview-location-tabs { margin-left: -13px; margin-right: -13px; padding-left: 13px; }

@media (max-width: 800px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .logo-presentation { grid-template-columns: 1fr; }
  .field label.logo-uploader.is-wide,.field label.logo-uploader.is-standard { aspect-ratio: 1; }
  .location-workspace { grid-template-columns: 1fr; }
  .location-master { position: static; max-height: 300px; }
  .review-heading { align-items: flex-start; flex-direction: column; }
  .preview-content { grid-template-columns: 1fr; }
  .publish-preview:not(.is-mobile) .preview-brand-tile { aspect-ratio: 4/3; }
}