/* Photo Editor — left controls, sticky right preview (matches Text Editor). */
.photo-workspace{
  display:grid;
  grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  gap:20px;
  align-items:start;
  max-width:1800px;
  margin:0 auto;
  padding:24px 3% 40px;
}
.photo-controls{
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 1px 2px #18284c0a,0 10px 28px #18284c0a;
  background:var(--panel,#fff);
  overflow:hidden;
  min-width:0;
}
.photo-controls .panel-drawer{margin:0;padding:0;border-top:1px solid var(--line)}
.photo-controls .panel-drawer:first-child{border-top:0}
.photo-controls .panel-drawer>summary{
  display:list-item;
  list-style:disclosure-closed inside;
  cursor:pointer;
  user-select:none;
  margin:0;
  padding:13px 16px;
  font-size:.84rem;
  font-weight:600;
  color:#516078;
  background:#f6f8fc;
  border-bottom:1px solid transparent;
}
.photo-controls .panel-drawer[open]>summary{
  list-style:disclosure-open inside;
  border-bottom-color:var(--line);
}
.photo-controls .pane{padding:12px 16px 16px}
.photo-drop{
  border:1.5px dashed #c5d0e4;
  border-radius:12px;
  padding:20px 14px;
  text-align:center;
  background:#f8fafd;
  transition:border-color .15s ease,background .15s ease;
}
.photo-drop.drop-active,
.photo-stage.drop-active{
  outline:3px dashed var(--blue);
  outline-offset:-4px;
  background:#335cff14;
}
.photo-drop .primary{min-height:36px;border-radius:8px}
.photo-drop p{margin:12px 0 4px;font-size:.8125rem;color:#556479}
.photo-drop small{color:var(--muted);font-size:.72rem;line-height:1.5}
.photo-controls .compact-note,
.photo-controls .hint{margin:10px 0 0;line-height:1.45}
#photo-notice:empty{display:none}
.photo-controls fieldset{
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}
.photo-controls fieldset:disabled{opacity:.55}
.control-block{margin:0 0 14px}
.control-block:last-child{margin-bottom:0}
.control-label{
  display:block;
  margin:0 0 8px;
  font-size:.72rem;
  font-weight:650;
  letter-spacing:.01em;
  color:#6a788e;
  text-transform:uppercase;
}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.chip{
  border:1px solid #d9e0ec;
  background:#fff;
  color:#4c5870;
  border-radius:999px;
  padding:7px 12px;
  font-size:.72rem;
  font-weight:600;
  min-height:32px;
  box-shadow:0 1px 0 #18284c08;
}
.chip:hover{border-color:#9eb6f3;background:#f5f8ff}
.chip.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none}
.button-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.button-row .quiet{
  height:34px;
  min-height:34px;
  padding:0 12px;
  border-radius:8px;
  font-size:.75rem;
}
.button-row.wrap{gap:6px}
.adjust-fields label{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:4px 10px;
  margin:0 0 12px;
  font-size:.78rem;
  font-weight:600;
  color:#4e5d73;
}
.adjust-fields label input[type=range]{
  grid-column:1 / -1;
  width:100%;
  margin:0;
  accent-color:var(--blue);
}
.adjust-fields output{
  float:none;
  color:var(--muted);
  font-size:.72rem;
  font-weight:650;
}
.adjust-fields .control-block{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}

.photo-preview-stack{
  position:sticky;
  top:14px;
  align-self:start;
  max-height:calc(100vh - 28px);
  overflow:auto;
  overscroll-behavior:contain;
  min-width:0;
}
.photo-preview-drawer{
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 1px 2px #18284c0a,0 10px 28px #18284c0a;
  background:var(--panel,#fff);
  overflow:hidden;
}
.photo-preview-drawer>summary{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  padding:13px 16px;
  background:#f6f8fc;
  border-bottom:1px solid var(--line);
  min-height:52px;
}
.photo-preview-drawer>summary::-webkit-details-marker{display:none}
.photo-preview-drawer .drawer-title{
  font-size:1rem;
  font-weight:650;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.photo-preview-drawer .drawer-title::before{content:'▾';font-size:.7rem;color:var(--muted)}
.photo-preview-drawer:not([open]) .drawer-title::before{content:'▸'}
.photo-preview-drawer .pill{
  margin-left:auto;
  border:1px solid var(--line);
  background:#eef2f8;
  color:#5d6b82;
}
.photo-stage{
  background:#0e1522;
  min-height:min(58vh,560px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  position:relative;
  background-image:
    linear-gradient(45deg,#1a2230 25%,transparent 25%),
    linear-gradient(-45deg,#1a2230 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#1a2230 75%),
    linear-gradient(-45deg,transparent 75%,#1a2230 75%);
  background-size:20px 20px;
  background-position:0 0,0 10px,10px -10px,-10px 0;
}
.photo-stage #photo-empty{color:#b8c5d9;text-align:center;max-width:28ch;line-height:1.5;margin:0}
.crop-wrap{position:relative;display:inline-block;max-width:100%;max-height:min(62vh,640px);line-height:0}
.crop-wrap canvas{display:block;max-width:100%;max-height:min(62vh,640px);width:auto;height:auto;box-shadow:0 6px 25px #1a254a3d}
.crop-overlay{position:absolute;inset:0;cursor:move}
.crop-box{position:absolute;border:1.5px dashed #fff;box-shadow:0 0 0 2000px #0009;background:transparent}
.crop-box:before{
  content:'';
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(#fff6 1px,transparent 1px) 0 33.33% / 100% 33.33% repeat-y,
    linear-gradient(90deg,#fff6 1px,transparent 1px) 33.33% 0 / 33.33% 100% repeat-x;
}
.crop-handle{
  position:absolute;width:16px;height:16px;background:#fff;border:2px solid var(--blue);
  border-radius:50%;transform:translate(-50%,-50%);touch-action:none;
}
.crop-handle[data-corner=nw]{top:0;left:0;cursor:nwse-resize}
.crop-handle[data-corner=ne]{top:0;left:100%;cursor:nesw-resize}
.crop-handle[data-corner=sw]{top:100%;left:0;cursor:nesw-resize}
.crop-handle[data-corner=se]{top:100%;left:100%;cursor:nwse-resize}
.photo-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 16px 14px;
  border-top:1px solid var(--line);
  background:#f7f9fc;
}
.photo-actions .compact-note{margin:0;color:#7a879b;font-size:.72rem;line-height:1.4}
.photo-action-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}
.photo-action-buttons button{
  height:36px;
  min-height:36px;
  padding:0 12px;
  border-radius:8px;
  font-size:.75rem;
}

html[data-theme=dark] .photo-controls,
html[data-theme=dark] .photo-preview-drawer{box-shadow:0 1px 2px #0006,0 10px 28px #0004}
html[data-theme=dark] .photo-controls .panel-drawer>summary,
html[data-theme=dark] .photo-preview-drawer>summary,
html[data-theme=dark] .photo-actions{background:#182234;border-color:var(--line)}
html[data-theme=dark] .photo-drop{background:#152033;border-color:#40506b}
html[data-theme=dark] .chip{background:#1c2535;border-color:#40506b;color:#dce6fa}
html[data-theme=dark] .chip:hover{background:#243247;border-color:#7395ed}
html[data-theme=dark] .chip.active{background:var(--blue);border-color:var(--blue);color:#fff}
html[data-theme=dark] .photo-preview-drawer .pill{background:#2b384d;color:#bfcee8;border-color:#40506b}
html[data-theme=dark] .adjust-fields .control-block{border-top-color:var(--line)}

html[data-theme=red] .photo-controls,
html[data-theme=red] .photo-preview-drawer{
  background:linear-gradient(180deg,#3d1822 0%,#2a1018 100%);
  border-color:#6e303a;
  box-shadow:0 1px 2px #0008,0 10px 28px #5a142455;
}
html[data-theme=red] .photo-controls .panel-drawer>summary,
html[data-theme=red] .photo-preview-drawer>summary,
html[data-theme=red] .photo-actions{
  background:linear-gradient(180deg,#3a1520 0%,#2a1018 100%);
  border-color:#6e303a;
  color:#f0c4cb;
}
html[data-theme=red] .photo-drop{background:#1c0a10;border-color:#6e303a}
html[data-theme=red] .chip{background:#2a1218;border-color:#6e303a;color:#ffe8ec}
html[data-theme=red] .chip:hover{background:#4a1c28;border-color:#ff6b7a}
html[data-theme=red] .chip.active{background:linear-gradient(180deg,#e23b4f 0%,#b81f35 100%);border-color:#ff6b7a;color:#fff}
html[data-theme=red] .photo-preview-drawer .pill{background:#4a1c28;color:#ffc4cc;border-color:#6e303a}
html[data-theme=red] .adjust-fields .control-block{border-top-color:#6e303a}
html[data-theme=red] .photo-preview-drawer .drawer-title{color:#ffe8ec}

@media(max-width:900px){
  .photo-workspace{grid-template-columns:1fr;padding:18px 5% 32px}
  .photo-preview-stack{position:static;max-height:none;overflow:visible}
  .photo-stage{min-height:280px}
  .crop-wrap,.crop-wrap canvas{max-height:55vh}
}