@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap");

:root {
  color-scheme: light;
  --ink: #152126;
  --muted: #6f7b7e;
  --line: #dce2df;
  --paper: #f4f5f1;
  --card: #ffffff;
  --navy: #102125;
  --navy-2: #193137;
  --mint: #beeeda;
  --mint-strong: #76d3b0;
  --orange: #f6784e;
  --shadow: 0 18px 50px rgba(27, 43, 45, 0.08);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.app-header {
  height: 46px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px;
  color: #f8fbf9;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  font: 700 14px "Manrope", sans-serif;
  letter-spacing: -.025em;
}

.brand-mark {
  width: 21px;
  height: 21px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  padding: 4px;
  background: var(--mint);
  border-radius: 5px 5px 8px 5px;
  transform: skewY(-8deg);
}

.brand-mark i { background: var(--navy); opacity: .86; border-radius: 1px; }

.header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #aec0bd;
  font-size: 10px;
}

.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mint-strong); box-shadow: 0 0 0 3px rgba(118,211,176,.12); }

.button {
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  transition: transform .15s ease, background .15s ease, opacity .15s ease;
}

.button:active:not(:disabled) { transform: translateY(1px); }

.button-quiet {
  justify-self: end;
  padding: 6px 11px;
  color: #d7e1df;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  font-size: 11px;
}
.header-actions { justify-self: end; display: flex; gap: 6px; }
.button-quiet:disabled { cursor: default; opacity: .38; }

.workspace {
  height: calc(100vh - 46px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(450px, 1fr) minmax(300px, 380px);
  overflow: hidden;
}

.sidebar {
  padding: 38px 28px 26px;
  background: #fafbf8;
  border-right: 1px solid var(--line);
  overflow: auto;
}

.eyebrow {
  margin-bottom: 12px;
  color: #4d766b;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

h1 {
  margin: 0;
  font: 700 29px/1.16 "Manrope", sans-serif;
  letter-spacing: -.04em;
}

.lede { margin: 14px 0 28px; color: var(--muted); font-size: 13px; line-height: 1.55; }

.form-section { padding: 22px 0; border-top: 1px solid var(--line); }
.form-section + .form-section { padding-top: 21px; }
.field-wide { margin-bottom: 15px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.field { display: block; }
.field > span, .select-field > span {
  display: block;
  margin-bottom: 7px;
  color: #526064;
  font-size: 11px;
  font-weight: 600;
}
.field small { margin-left: 3px; color: #96a09e; font-size: 9px; text-transform: uppercase; }

input, select {
  width: 100%;
  height: 39px;
  padding: 0 11px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d4dcda;
  border-radius: 7px;
  outline: none;
}

input:focus, select:focus { border-color: #6bb99d; box-shadow: 0 0 0 3px rgba(107,185,157,.13); }

.ratio-readout {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  color: #87918f;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ratio-readout strong { color: #4f605f; font-size: 10px; }

.section-title { display: flex; justify-content: space-between; margin-bottom: 10px; color: #596767; font-size: 11px; font-weight: 700; }
.section-title span:last-child { color: #7c8986; font-size: 9px; letter-spacing: .08em; }

.export-row {
  display: grid;
  grid-template-columns: 30px 1fr 67px;
  align-items: center;
  gap: 9px;
  padding: 9px;
  margin-bottom: 7px;
  background: #fff;
  border: 1px solid #dce3e0;
  border-radius: 8px;
}

.export-icon { display: grid; place-items: center; width: 29px; height: 29px; color: #205248; background: #dff4eb; border-radius: 6px; font-size: 10px; font-weight: 700; }
.export-icon.alt { color: #7c432f; background: #ffeadf; }
.export-row > span:nth-child(2) { min-width: 0; }
.export-row strong, .export-row small { display: block; }
.export-row strong { font-size: 11px; }
.export-row small { margin-top: 2px; color: #8a9492; font-size: 9px; }
.pixel-input input { height: 26px; padding: 0 7px; text-align: right; font-size: 11px; }
.pixel-input small { text-align: right; font-size: 8px; }
.select-field { display: block; margin-top: 13px; }
.select-field select { height: 36px; font-size: 11px; }
.format-lock { display: grid; grid-template-columns: 32px 1fr 20px; align-items: center; gap: 9px; margin-top: 13px; padding: 9px; background: #edf2ef; border-radius: 8px; }
.format-lock > span { display: grid; place-items: center; width: 32px; height: 28px; color: #fff; background: #29443e; border-radius: 5px; font-size: 9px; font-weight: 700; }
.format-lock strong, .format-lock small { display: block; }
.format-lock strong { color: #495a57; font-size: 10px; }
.format-lock small { margin-top: 2px; color: #88928f; font-size: 8px; }
.format-lock b { display: grid; place-items: center; width: 18px; height: 18px; color: #21614e; background: #cce8dc; border-radius: 50%; font-size: 9px; }

.sidebar-note { margin-top: 3px; padding: 12px; color: #667472; background: #eef2ed; border-radius: 8px; font-size: 10px; line-height: 1.45; }
.sidebar-note span { margin-right: 5px; color: #355e55; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }

.editor-column { display: flex; flex-direction: column; min-width: 0; padding: 32px clamp(22px, 3vw, 48px) 26px; }
.preview-column { min-height: 0; display: flex; flex-direction: column; padding: 26px 27px 18px; overflow: hidden; background: #eef1ec; border-left: 1px solid var(--line); }

.panel-heading { min-height: 45px; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.panel-heading > div { display: flex; align-items: center; gap: 10px; }
.panel-heading h2 { margin: 0; font: 700 16px "Manrope", sans-serif; letter-spacing: -.02em; }
.panel-heading p { margin: 3px 0 0; color: #899391; font-size: 10px; }
.step-number { display: grid; place-items: center; width: 29px; height: 29px; color: #1d6253; background: #d5eee4; border-radius: 50%; font-size: 9px; font-weight: 700; }
.panel-heading.compact { display: block; }
.preview-column .panel-heading.compact { min-height: 29px; margin-bottom: 10px; }

.editor-card {
  position: relative;
  flex: 1;
  min-height: 490px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e6e9e5;
  border: 1px solid #d6ddda;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.editor-card.dragover { border-color: var(--mint-strong); box-shadow: inset 0 0 0 3px rgba(118,211,176,.23); }

.empty-state { text-align: center; }
.empty-state h3 { margin: 23px 0 7px; font: 700 15px "Manrope", sans-serif; }
.empty-state p { margin: 0 0 18px; color: #85908e; font-size: 10px; }
.button-primary { padding: 10px 18px; color: #102722; background: var(--mint-strong); }
.button-primary:hover { background: #89dcbd; }

.url-divider { display: flex; align-items: center; gap: 9px; width: 310px; max-width: calc(100vw - 70px); margin: 18px auto 10px; color: #98a19f; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.url-divider::before, .url-divider::after { content: ""; flex: 1; height: 1px; background: #cfd6d3; }
.url-loader { display: flex; width: 360px; max-width: calc(100vw - 70px); margin: auto; padding: 4px; background: #fff; border: 1px solid #cfd8d5; border-radius: 8px; box-shadow: 0 6px 20px rgba(24,43,42,.05); }
.url-loader:focus-within { border-color: #6bb99d; box-shadow: 0 0 0 3px rgba(107,185,157,.13); }
.url-loader input { min-width: 0; height: 32px; padding-left: 8px; border: 0; box-shadow: none; font-size: 10px; }
.url-loader input:focus { border: 0; box-shadow: none; }
.url-loader button { flex: 0 0 auto; min-width: 57px; color: #fff; background: var(--navy); border: 0; border-radius: 6px; font-size: 10px; font-weight: 700; }
.url-loader button:disabled { cursor: wait; opacity: .6; }
.url-hint { display: block; margin-top: 7px; color: #929d9a; font-size: 8px; }

.upload-illustration { position: relative; width: 118px; height: 143px; margin: auto; }
.mini-panel {
  position: absolute;
  inset: 10px 21px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 5px;
  gap: 2px;
  background: #1c292e;
  border: 3px solid #435156;
  box-shadow: 8px 12px 0 rgba(27,52,52,.08);
  transform: perspective(300px) rotateY(-10deg) rotateZ(3deg);
}
.mini-panel i { background: repeating-linear-gradient(0deg, #243a42 0 7px, #5b6c6d 8px); }
.corner { position: absolute; width: 13px; height: 13px; border: 2px solid var(--orange); border-radius: 50%; background: #fff; }
.corner:after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--orange); }
.c1 { left: 13px; top: 3px; }.c2 { right: 12px; top: 9px; }.c3 { right: 16px; bottom: 2px; }.c4 { left: 7px; bottom: 10px; }

.canvas-shell { position: relative; width: 100%; height: 100%; min-height: 490px; }
#sourceCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.corner-help { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 7px 11px; color: #e7eeeb; background: rgba(13,28,31,.78); border-radius: 20px; font-size: 9px; white-space: nowrap; pointer-events: none; }
.magnifier { position: absolute; z-index: 4; width: 136px; height: 136px; overflow: visible; background: #fff; border: 3px solid var(--orange); border-radius: 50%; box-shadow: 0 14px 35px rgba(8,22,24,.32), 0 0 0 4px rgba(255,255,255,.8); pointer-events: none; }
.magnifier canvas { display: block; width: 130px; height: 130px; border-radius: 50%; }
.magnifier > span { position: absolute; right: -3px; bottom: 4px; display: grid; place-items: center; width: 27px; height: 27px; color: #fff; background: var(--orange); border: 3px solid #fff; border-radius: 50%; font-size: 10px; font-weight: 700; }

.editor-toolbar { display: flex; justify-content: space-between; margin-top: 13px; }
.toolbar-group { display: flex; gap: 6px; }
.pdf-pages { display: flex; align-items: center; gap: 6px; height: 34px; padding: 3px 5px; color: #687572; background: #fff; border: 1px solid #d5ddda; border-radius: 7px; font-size: 9px; }
.pdf-pages button { width: 27px; height: 26px; padding: 0; color: #355e55; background: #edf4f0; border: 0; border-radius: 5px; font-size: 17px; line-height: 1; }
.pdf-pages button:disabled { cursor: default; opacity: .35; }
.pdf-pages label { display: flex; align-items: center; gap: 4px; }
.pdf-pages select { width: auto; min-width: 42px; height: 25px; padding: 0 4px; border-radius: 4px; font-size: 9px; }
.pdf-pages > span { white-space: nowrap; }
.zoom-controls { display: flex; align-items: center; gap: 3px; height: 34px; padding: 3px; color: #61706d; background: #fff; border: 1px solid #d5ddda; border-radius: 7px; }
.zoom-controls button { height: 26px; min-width: 27px; padding: 0 6px; color: #355e55; background: #edf4f0; border: 0; border-radius: 5px; font-size: 14px; font-weight: 700; }
.zoom-controls button:hover:not(:disabled) { background: #dcece5; }
.zoom-controls button:disabled { cursor: default; opacity: .35; }
.zoom-controls .zoom-text { font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }
.zoom-controls span { min-width: 39px; text-align: center; font-size: 9px; font-variant-numeric: tabular-nums; }
.tool-button, .icon-button {
  height: 34px;
  padding: 0 11px;
  color: #52605f;
  background: #fff;
  border: 1px solid #d5ddda;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 600;
}
.tool-button span { margin-right: 4px; color: #4e9b83; }
.tool-button:hover, .icon-button:hover { border-color: #a9bab5; }
.tool-button.active { color: #225c4e; background: #e3f2ec; border-color: #b8dbce; }
.icon-button { width: 34px; padding: 0; font-size: 15px; }

.preview-toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 8px; }
.preview-toolbar[hidden] { display: none; }
.preview-card { flex: 1 1 auto; min-height: 230px; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #dbe2df; border-radius: 11px; box-shadow: 0 12px 30px rgba(38,52,51,.06); }
.preview-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px 19px 20px; overflow: hidden; background: #dfe4e0; user-select: none; }
.checkerboard { background-color: #e7ece8; background-image: linear-gradient(45deg,rgba(195,207,201,.36) 25%,transparent 25%),linear-gradient(-45deg,rgba(195,207,201,.36) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(195,207,201,.36) 75%),linear-gradient(-45deg,transparent 75%,rgba(195,207,201,.36) 75%); background-size: 14px 14px; background-position: 0 0,0 7px,7px -7px,-7px 0; }
.preview-surface { position: relative; flex: 0 0 auto; touch-action: none; transform-origin: center; will-change: transform; cursor: crosshair; }
#previewCanvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 9px rgba(21,32,32,.17)); }
.preview-output-toggle { display: flex; gap: 3px; padding: 3px; background: #fff; border: 1px solid #d2dbd7; border-radius: 7px; }
.preview-output-toggle button { min-width: 53px; min-height: 31px; padding: 4px 6px; color: #61706d; background: transparent; border: 0; border-radius: 4px; line-height: 1.05; }
.preview-output-toggle button span, .preview-output-toggle button small { display: block; }
.preview-output-toggle button span { font-size: 8px; font-weight: 700; }
.preview-output-toggle button small { margin-top: 2px; font-size: 7px; opacity: .72; }
.preview-output-toggle button.active { color: #fff; background: #315f54; }
.preview-zoom-controls { display: flex; align-items: center; gap: 3px; height: 39px; padding: 3px; color: #52625e; background: #fff; border: 1px solid #d2dbd7; border-radius: 7px; }
.preview-zoom-controls button { min-width: 25px; height: 23px; padding: 0 6px; color: #315f54; background: #e5f1ec; border: 0; border-radius: 4px; font-size: 14px; font-weight: 700; }
.preview-zoom-controls button:hover:not(:disabled) { background: #d5e9e1; }
.preview-zoom-controls button:disabled { cursor: default; opacity: .35; }
.preview-zoom-controls output { min-width: 38px; text-align: center; font-size: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.preview-zoom-controls .preview-fit { font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }
.bright-marker { position: absolute; z-index: 3; width: 30px; height: 30px; padding: 0; transform: translate(-50%, -50%); background: rgba(246,120,78,.18); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--orange), 0 4px 14px rgba(16,33,37,.3); cursor: grab; touch-action: none; }
.bright-marker:active { cursor: grabbing; }
.bright-marker::before, .bright-marker::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%); }
.bright-marker::before { width: 12px; height: 2px; }
.bright-marker::after { width: 2px; height: 12px; }
.reflection-overlay { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.reflection-overlay[hidden] { display: none; }
.reflection-overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.reflection-overlay polygon { fill: none; stroke: rgba(69,151,126,.82); stroke-width: .85; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.reflection-handle { position: absolute; z-index: 5; width: 24px; height: 24px; padding: 0; transform: translate(-50%, -50%); background: #fff; border: 2px solid #55a78d; border-radius: 50%; box-shadow: 0 3px 9px rgba(16,33,37,.25); font-size: 8px; font-weight: 700; cursor: move; pointer-events: auto; touch-action: none; }
.reflection-handle { color: #235f50; }
.preview-placeholder { color: #9ba4a1; text-align: center; font-size: 10px; line-height: 1.5; }
.preview-placeholder span { display: block; width: 46px; height: 84px; margin: 0 auto 13px; border: 1px dashed #b8c1be; border-radius: 2px; }
.preview-meta { display: grid; grid-template-columns: 1fr 1fr; padding: 13px 16px; border-top: 1px solid #e6ebe8; }
.preview-meta div + div { padding-left: 15px; border-left: 1px solid #e6ebe8; }
.preview-meta span, .preview-meta strong { display: block; }
.preview-meta span { color: #909a97; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.preview-meta strong { margin-top: 4px; font-size: 10px; }

.lighting-card { position: relative; flex: 0 0 auto; margin-top: 9px; padding: 11px 12px; overflow: visible; background: rgba(255,255,255,.72); border: 1px solid #dde4e0; border-radius: 9px; }
.correction-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 10px; padding: 3px; background: #edf1ee; border-radius: 7px; }
.correction-mode-toggle button { min-height: 27px; padding: 4px 7px; color: #66736f; background: transparent; border: 0; border-radius: 5px; font-size: 8px; font-weight: 700; }
.correction-mode-toggle button.active { color: #fff; background: #315f54; }
.lighting-heading, .lighting-heading > div, .lighting-footer { display: flex; align-items: center; }
.lighting-heading { justify-content: space-between; margin-bottom: 9px; }
.lighting-heading > div { gap: 7px; }
.lighting-heading strong { font-size: 10px; }
.lighting-heading output { min-width: 36px; padding: 4px 6px; color: #235f50; background: #d9ede5; border-radius: 12px; text-align: center; font-size: 9px; font-weight: 700; }
.lighting-icon, .detail-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; }
.lighting-icon { color: #9c562e; background: #ffeadf; }
.detail-icon { color: #235f50; background: #d9ede5; }
.lighting-card input[type="range"] { width: 100%; height: 18px; padding: 0; accent-color: #ef754c; border: 0; box-shadow: none; }
.lighting-footer { justify-content: space-between; gap: 8px; margin-top: 6px; }
.lighting-footer small { color: #7b8784; font-size: 8px; line-height: 1.35; }
.lighting-footer button { flex: 0 0 auto; padding: 5px 8px; color: #315f54; background: #e2f0ea; border: 0; border-radius: 5px; font-size: 8px; font-weight: 700; }
.reflection-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.reflection-actions #toggleAutoSeam { color: #687572; background: #edf1ef; }
.reflection-actions #toggleAutoSeam.active { color: #fff; background: #315f54; }
.reflection-controls[hidden] { display: none; }
.band-settings-popover { position: absolute; z-index: 12; top: 103px; right: 10px; width: min(235px, calc(100% - 20px)); padding: 12px; background: #fff; border: 1px solid #ccd8d3; border-radius: 9px; box-shadow: 0 16px 38px rgba(20,39,38,.2); }
.band-settings-popover[hidden] { display: none; }
.band-settings-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.band-settings-title strong { font-size: 10px; }
.band-settings-title button { width: 23px; height: 23px; padding: 0; color: #6d7976; background: #edf2ef; border: 0; border-radius: 50%; font-size: 14px; line-height: 1; }
.reflection-actions .auto-tune { color: #fff; background: #315f54; }
.reflection-actions .auto-tune:disabled { opacity: .55; }
.band-settings-popover input[type="range"] { accent-color: #ef754c; }
.band-settings-popover > small { display: block; margin-top: 7px; color: #778380; font-size: 8px; line-height: 1.35; }
.reflection-feather-heading { display: flex; align-items: center; justify-content: space-between; color: #65716e; }
.reflection-feather-heading + input + .reflection-feather-heading { margin-top: 8px; }
.reflection-feather-heading strong { font-size: 8px; }
.reflection-feather-heading output { font-size: 8px; font-weight: 700; }
.lighting-detail-control { margin-top: 11px; padding-top: 11px; border-top: 1px solid #e2e8e5; }
.lighting-detail-control .lighting-heading { margin-bottom: 7px; }
.lighting-detail-control input[type="range"] { accent-color: #2b8068; }
.lighting-detail-control > small { display: block; margin-top: 4px; color: #7b8784; font-size: 8px; line-height: 1.35; }

.button-export { position: relative; flex: 0 0 auto; width: 100%; min-height: 52px; margin-top: 9px; padding: 10px 48px 10px 15px; color: #fff; background: var(--navy); text-align: left; }
.button-export:hover:not(:disabled) { background: var(--navy-2); }
.button-export:disabled { cursor: not-allowed; opacity: .4; }
.button-export span, .button-export small { display: block; }
.button-export span { font-size: 12px; }
.button-export small { margin-top: 2px; color: #a9bbb7; font-size: 9px; font-weight: 400; }
.button-export b { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 27px; height: 27px; color: #18352d; background: var(--mint); border-radius: 50%; }
.single-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.single-actions button { padding: 8px 4px; color: #64716e; background: transparent; border: 0; font-size: 9px; }
.single-actions button:disabled { cursor: not-allowed; opacity: .4; }
.single-actions button:hover:not(:disabled) { color: #245c4f; text-decoration: underline; }

.toast { position: fixed; left: 50%; bottom: 22px; z-index: 20; transform: translate(-50%, 20px); padding: 10px 14px; color: white; background: #172a2e; border-radius: 7px; box-shadow: 0 10px 30px rgba(0,0,0,.2); font-size: 11px; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.url-dialog { width: min(430px, calc(100vw - 32px)); padding: 0; color: var(--ink); background: #fff; border: 0; border-radius: 13px; box-shadow: 0 30px 80px rgba(8,22,24,.28); }
.url-dialog::backdrop { background: rgba(10,25,28,.58); backdrop-filter: blur(3px); }
.url-dialog form { position: relative; padding: 28px; }
.url-dialog h3 { margin: 6px 0 7px; font: 700 20px "Manrope", sans-serif; }
.url-dialog p { margin: 0 0 18px; color: var(--muted); font-size: 11px; }
.url-dialog input { margin-bottom: 10px; }
.url-dialog .button-primary { width: 100%; }
.dialog-eyebrow { color: #4d766b; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.dialog-close { position: absolute; right: 16px; top: 14px; width: 30px; height: 30px; color: #788380; background: #eff2ef; border: 0; border-radius: 50%; font-size: 18px; }

@media (max-width: 1100px) {
  .workspace { height: auto; min-height: calc(100vh - 46px); grid-template-columns: 265px minmax(430px, 1fr); overflow: visible; }
  .preview-column { grid-column: 2; border-left: 0; border-top: 1px solid var(--line); }
  .preview-card { flex: none; }
  .preview-stage { height: 440px; min-height: 340px; }
}

@media (max-width: 760px) {
  .app-header { height: 46px; grid-template-columns: 1fr auto; padding: 0 14px; }
  .header-status { display: none; }
  .workspace { display: block; }
  .sidebar, .editor-column, .preview-column { padding: 25px 18px; border: 0; border-bottom: 1px solid var(--line); }
  .editor-card, .canvas-shell { min-height: 430px; }
  .panel-heading p { display: none; }
  .editor-toolbar { flex-wrap: wrap; gap: 7px; }
  .zoom-controls { order: 3; width: 100%; justify-content: center; }
  .preview-stage { height: 430px; }
  .preview-toolbar { flex-wrap: wrap; }
}