/* Photo editor: a dark glass workspace over the page. Uses the viewer's dark glass look (files.css / glass.css). */
.cb-pe { z-index: 210; }
.cb-pe-loading { align-items: center; justify-content: center; }
.cb-pe-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr) 312px; gap: 12px; padding: 0 12px 12px; }
.cb-pe-rail, .cb-pe-panel {
  border-radius: 24px; background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 40px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
}
.cb-pe-rail { display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; overflow-y: auto; }
.cb-pe-tool { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid transparent; border-radius: 16px; background: none; color: #d6dae4; font: 600 11.5px var(--font-sans, system-ui); cursor: pointer; transition: background .2s, color .2s, transform .25s var(--spring, ease); }
.cb-pe-tool:hover { background: rgba(255,255,255,.1); color: #fff; }
.cb-pe-tool.on { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 86%, #fff) 0%, var(--primary) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px color-mix(in srgb, var(--primary) 40%, transparent); }
.cb-pe-tool:active { transform: scale(.94); }
.cb-pe-tool:focus-visible, .cb-pe button:focus-visible { outline: 2px solid #9db8ff; outline-offset: 2px; }

.cb-pe-stage { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 8px; overflow: hidden; border-radius: 24px;
  background: repeating-conic-gradient(rgba(255,255,255,.05) 0 25%, transparent 0 50%) 0 0 / 22px 22px, rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); }
.cb-pe-frame { position: relative; display: inline-block; max-width: 100%; overflow: hidden; line-height: 0; border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.cb-pe-canvas { display: block; max-width: 100%; max-height: calc(100dvh - 128px); width: auto; height: auto; touch-action: none; }
[data-tool="draw"] .cb-pe-canvas { cursor: crosshair; }
[data-tool="text"] .cb-pe-canvas { cursor: text; }
.cb-pe-overlay { position: absolute; inset: 0; pointer-events: none; }
.cb-pe-crop { position: absolute; border: 1.5px solid #fff; box-shadow: 0 0 0 9999px rgba(4,6,12,.58); cursor: move; pointer-events: auto; touch-action: none;
  background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 33.333% 33.333%; background-position: -1px -1px; }
.cb-pe-handle { position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.5); touch-action: none; }
.cb-pe-handle::after { content: ''; position: absolute; inset: -9px; }
.cb-pe-handle.h-nw { left: -7px; top: -7px; cursor: nwse-resize; } .cb-pe-handle.h-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.cb-pe-handle.h-sw { left: -7px; bottom: -7px; cursor: nesw-resize; } .cb-pe-handle.h-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.cb-pe-handle.h-n { left: calc(50% - 7px); top: -7px; cursor: ns-resize; } .cb-pe-handle.h-s { left: calc(50% - 7px); bottom: -7px; cursor: ns-resize; }
.cb-pe-handle.h-w { top: calc(50% - 7px); left: -7px; cursor: ew-resize; } .cb-pe-handle.h-e { top: calc(50% - 7px); right: -7px; cursor: ew-resize; }
.cb-pe-cropsize { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; font: 600 11px/1.5 var(--font-sans, system-ui); color: #fff; background: rgba(0,0,0,.6); pointer-events: none; white-space: nowrap; }
.cb-pe-textin { position: absolute; z-index: 3; min-width: 90px; padding: 0; margin: 0; border: 1px dashed rgba(255,255,255,.85); outline: none; background: rgba(0,0,0,.18); line-height: 1.1; text-shadow: 0 0 3px rgba(0,0,0,.8); pointer-events: auto; }

.cb-pe-panel { display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; color: #e8ebf3; }
.cb-pe-ph { display: flex; flex-direction: column; gap: 3px; }
.cb-pe-ph b { font-size: 15px; color: #fff; }
.cb-pe-ph span { font-size: 12.5px; color: rgba(255,255,255,.62); line-height: 1.45; }
.cb-pe-panel .cb-hint, .cb-pe-save .cb-hint { color: rgba(255,255,255,.6); }
.cb-pe-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cb-pe-panel .btn, .cb-pe-bar .btn { color: #e8ebf3; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.cb-pe-panel .btn:hover { background: rgba(255,255,255,.18); }
.cb-pe-panel .btn-primary { align-self: flex-start; }
.cb-pe-panel .btn:disabled, .cb-pe-panel .btn-primary:disabled, .cb-pe .icon-btn:disabled { opacity: .4; pointer-events: none; }
.cb-pe .cb-viewer-actions { gap: 6px; }
.cb-pe .cb-pe-reset { color: #e8ebf3; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.cb-pe-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-pe-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #e8ebf3; font: 600 12.5px var(--font-sans, system-ui); cursor: pointer; }
.cb-pe-seg button:hover { background: rgba(255,255,255,.16); }
.cb-pe-seg button.on { background: var(--primary); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.cb-pe-range { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cb-pe-range > span { display: flex; justify-content: space-between; color: rgba(255,255,255,.78); font-weight: 600; }
.cb-pe-range output { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.58); font-weight: 500; }
.cb-pe-range input[type=range] { width: 100%; accent-color: var(--primary); }
.cb-pe-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cb-pe-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); cursor: pointer; box-shadow: inset 0 1px 2px rgba(255,255,255,.4); }
.cb-pe-sw.on { border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 70%, transparent); }
.cb-pe-colorin { width: 30px; height: 30px; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; }
.cb-pe-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cb-pe-filter { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 5px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #e8ebf3; font: 600 11.5px var(--font-sans, system-ui); cursor: pointer; }
.cb-pe-filter canvas { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 9px; display: block; }
.cb-pe-filter.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 26%, transparent); }
.cb-pe-dims { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.cb-pe-dims label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: rgba(255,255,255,.7); }
.cb-pe-dims .cb-input { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.cb-pe .cb-check { color: #e8ebf3; font-size: 13px; }

/* the Save dialog is an ordinary glass modal */
.cb-pe-save { display: flex; flex-direction: column; gap: 10px; }
.cb-pe-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--glass-line); background: var(--glass-bg-soft); cursor: pointer; }
.cb-pe-opt.off { opacity: .5; cursor: not-allowed; }
.cb-pe-opt:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 50%, var(--glass-line)); background: color-mix(in srgb, var(--primary) 10%, var(--glass-bg-soft)); }
.cb-pe-opt span { display: flex; flex-direction: column; gap: 2px; }
.cb-pe-opt em { font-style: normal; font-size: 12.5px; color: var(--text-soft); }
.cb-pe-save .cb-pe-range { color: var(--text); }
.cb-pe-save .cb-pe-range > span { color: var(--text); }
.cb-pe-save .cb-pe-range output { color: var(--muted); }

/* Edit in Canva (toolbar button + dialog; the dialog is an ordinary glass modal) */
.cb-pe .cb-pe-canva { color: #e8ebf3; background: linear-gradient(135deg, rgba(0,196,204,.28), rgba(125,42,232,.28)); border: 1px solid rgba(255,255,255,.22); }
.cb-pe .cb-pe-canva[hidden] { display: none; }
.cb-canva { display: flex; flex-direction: column; gap: 12px; }
.cb-canva-consent { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--glass-line); background: var(--glass-bg-soft); }
.cb-canva-consent p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.cb-canva-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-canva-actions .btn, .cb-canva-actions .btn-primary { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.cb-canva-wait { display: flex; align-items: center; gap: 12px; padding: 6px 2px; }
.cb-canva-error { color: var(--danger, #c0392b); }
.cb-canva .btn, .cb-canva .btn-primary { align-self: flex-start; }

@media (max-width: 860px) {
  .cb-pe-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; gap: 8px; padding: 0 8px 8px; }
  .cb-pe-rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 6px; order: 2; }
  .cb-pe-tool { flex: 1 0 64px; padding: 8px 4px; }
  .cb-pe-panel { order: 3; max-height: 34dvh; padding: 12px; }
  .cb-pe-canvas { max-height: calc(66dvh - 190px); }
  .cb-pe .cb-pe-reset span, .cb-pe-bar .hide-sm { display: none; }
  .cb-pe .cb-viewer-actions .cb-pe-reset { display: none; }
  .cb-pe-save-label { display: none; }
}