/* Creative proofing: shared by the command center and the client portal */
.proof { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; min-height: 620px; box-shadow: var(--shadow-1); }
.pf-stage { position: relative; display: grid; grid-template-rows: auto 1fr; background:
  radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 0) 0 0 / 18px 18px, #E9EFF0; min-width: 0; }
:root[data-theme="dark"] .pf-stage { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0) 0 0 / 18px 18px, #04161B; }
.pf-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); z-index: 3; }
.pf-tools .grp { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden; }
.pf-tools .grp button { border: 0; background: none; min-width: 36px; height: 34px; padding: 0 10px; cursor: pointer; font-weight: 700; color: var(--ink); }
.pf-tools .grp button:hover { background: var(--surface-2); }
.pf-tools .grp button[aria-pressed="true"] { background: var(--teal-800); color: #fff; }
.pf-tools .zoom-v { min-width: 52px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.pf-tools .spacer { flex: 1; }
.pf-hint { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.pf-view { position: relative; overflow: hidden; cursor: grab; touch-action: none; min-height: 420px; }
.pf-view.dragging { cursor: grabbing; }
.pf-view.pinning { cursor: crosshair; }
.pf-canvas { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; will-change: transform; transition: transform .35s var(--ease); }
.pf-view.dragging .pf-canvas, .pf-view.wheeling .pf-canvas { transition: none; }
.pf-art { position: relative; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); background: #fff; }
.pf-art img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.pf-pin { position: absolute; width: 30px; height: 30px; margin: -30px 0 0 -2px; border-radius: 50% 50% 50% 2px; background: var(--ember); color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center;
  border: 2px solid #fff; box-shadow: 0 6px 14px -4px rgba(0,0,0,.45); cursor: pointer; transform-origin: 0 100%; transform: scale(var(--inv, 1)); padding: 0; }
.pf-pin.staff { background: var(--teal-500); }
.pf-pin.resolved { background: #8AA3A8; }
.pf-pin.pending { background: var(--teal-950); animation: pinIn .35s var(--ease); }
.pf-pin.hl { outline: 3px solid var(--amber); }
@keyframes pinIn { from { transform: scale(0); } }
.pf-split { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.pf-split figure { margin: 0; display: grid; grid-template-rows: auto 1fr; gap: 6px; min-height: 0; align-items: center; }
.pf-split figcaption { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.pf-split img { width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.45); min-height: 0; align-self: center; }
.pf-wipe { position: absolute; inset: 12px; --w: 50%; border-radius: 12px; overflow: hidden; }
.pf-wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pf-wipe .top { clip-path: inset(0 calc(100% - var(--w)) 0 0); }
.pf-wipe input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.pf-wipe .line { position: absolute; top: 0; bottom: 0; left: var(--w); width: 3px; background: var(--ember); transform: translateX(-50%); pointer-events: none; }
.pf-wipe .lab { position: absolute; top: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 11.5px; font-weight: 700; }

.pf-side { border-left: 1px solid var(--line); display: grid; grid-template-rows: auto auto 1fr auto; min-height: 0; max-height: 82dvh; }
.pf-head { padding: 16px 18px 10px; }
.pf-head h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; }
.pf-vers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pf-vers button { border: 1.5px solid var(--line); background: var(--surface); border-radius: 10px; padding: 5px 10px; font-weight: 700; font-size: 12.5px; cursor: pointer; color: var(--ink); }
.pf-vers button[aria-current="true"] { border-color: var(--teal-800); background: var(--teal-800); color: #fff; }
.pf-vers button small { display: block; font-size: 10.5px; font-weight: 600; opacity: .75; }
.pf-meter { margin: 0 18px 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; }
.pf-meter b { font-size: 18px; letter-spacing: -.02em; }
.pf-meter .dots { display: flex; gap: 4px; margin: 8px 0 4px; flex-wrap: wrap; }
.pf-meter .dots i { width: 22px; height: 8px; border-radius: 4px; background: var(--line-strong); }
.pf-meter .dots i.u { background: var(--ember); }
.pf-meter .dots i.x { background: var(--danger); }
.pf-meter p { margin: 4px 0 0; color: var(--ink-soft); font-size: 12px; }
.pf-comments { overflow: auto; padding: 0 18px; display: grid; gap: 8px; align-content: start; min-height: 120px; }
.pf-c { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; cursor: default; }
.pf-c.has-pin { cursor: pointer; }
.pf-c.has-pin:hover, .pf-c.hl { border-color: var(--ember); }
.pf-c .n { width: 24px; height: 24px; border-radius: 50%; background: var(--ember); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.pf-c .n.gen { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.pf-c .n.staff { background: var(--teal-500); }
.pf-c small { display: block; color: var(--ink-faint); font-size: 11.5px; }
.pf-c.resolved { opacity: .6; }
.pf-c .res { font-size: 11px; font-weight: 700; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 0; margin-top: 4px; }
.pf-foot { border-top: 1px solid var(--line); padding: 12px 18px 16px; display: grid; gap: 10px; background: var(--surface); }
.pf-foot textarea { width: 100%; min-height: 64px; border-radius: 12px; border: 1.5px solid var(--line); padding: 10px 12px; resize: vertical; background: var(--surface); }
.pf-foot .pin-note { font-size: 12px; color: var(--ember-600); font-weight: 700; }
.pf-foot .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-foot .btns .btn { flex: 1; }
.pf-state { padding: 12px 14px; border-radius: 12px; font-weight: 700; font-size: 13px; }
.pf-state.ok { background: var(--ok-bg); color: var(--ok); }
.pf-state.wait { background: var(--info-bg); color: var(--teal-700); }
.pf-state.warn { background: var(--warn-bg); color: var(--warn); }
.approved-burst { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 5; }
.approved-burst span { padding: 14px 26px; border-radius: 999px; background: var(--ok); color: #fff; font-weight: 800; font-size: 20px; box-shadow: var(--shadow-2); animation: burst 1.6s var(--ease) forwards; }
@keyframes burst { 0% { transform: scale(.6); opacity: 0; } 20% { transform: scale(1.05); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

@media (max-width: 980px) {
  .proof { grid-template-columns: 1fr; }
  .pf-side { border-left: 0; border-top: 1px solid var(--line); max-height: none; }
  .pf-view { min-height: 360px; height: 56dvh; }
}