/* ── RESET & ROOT ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --chrome: #13131c;
  --chrome2: #1a1a28;
  --border: rgba(255,255,255,0.08);
  --gold: #c3a164;
  --gold2: rgba(195,161,100,0.4);
  --text: rgba(255,255,255,0.85);
  --text2: rgba(255,255,255,0.4);
  --sel: rgba(195,161,100,0.25);
  --hover: rgba(255,255,255,0.04);
}
body { background:#0a0a0f; font-family:'Montserrat',sans-serif; color:var(--text); display:flex; flex-direction:column; height:100vh; overflow:hidden; user-select:none; }

/* ── TOP TOOLBAR ── */
#toolbar {
  height:46px; background:var(--chrome); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 14px; gap:6px; flex-shrink:0; z-index:100;
}
.tb-brand { font-size:10px; font-weight:500; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-right:10px; }
.tb-sep { width:1px; height:20px; background:var(--border); margin:0 4px; }
.tb-btn {
  padding:5px 10px; font-family:'Montserrat',sans-serif; font-size:9px; font-weight:400;
  letter-spacing:2px; text-transform:uppercase; color:var(--text2); background:none;
  border:1px solid transparent; border-radius:3px; cursor:pointer; transition:all .15s; white-space:nowrap;
}
.tb-btn:hover { color:var(--text); background:var(--hover); border-color:var(--border); }
.tb-btn.active { color:var(--gold); border-color:var(--gold2); background:rgba(195,161,100,0.07); }
.tb-btn.primary { color:var(--gold); border-color:var(--gold2); }
.tb-btn.primary:hover { background:rgba(195,161,100,0.12); }
.tb-mode-group { display:flex; gap:2px; background:rgba(0,0,0,0.3); border:1px solid var(--border); border-radius:4px; padding:2px; }
.tb-mode-group .tb-btn { border:none; border-radius:3px; }
.tb-mode-group .tb-btn.active { background:rgba(195,161,100,0.15); color:var(--gold); }
#toolbar .spacer { flex:1; }

/* ── MAIN LAYOUT ── */
#main { display:flex; flex:1; overflow:hidden; }

/* ── CANVAS AREA ── */
#canvas-wrap {
  flex:1; overflow:auto; display:flex; align-items:flex-start; justify-content:center;
  padding:40px 40px 100px; background:#0a0a0f; position:relative;
  background-image: radial-gradient(rgba(195,161,100,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  scrollbar-width:thin;
  scrollbar-color:rgba(195,161,100,0.15) transparent;
}
#canvas-wrap::-webkit-scrollbar { width:5px; height:5px; }
#canvas-wrap::-webkit-scrollbar-thumb { background:rgba(195,161,100,0.2); border-radius:3px; }
#canvas-wrap::-webkit-scrollbar-track { background:transparent; }

/* ── AI REFINE BAR (fixed bottom strip) ── */
#refine-bar {
  position:fixed; bottom:0; left:0; right:288px; z-index:800;
  background:rgba(10,10,15,0.97); border-top:1px solid rgba(195,161,100,0.25);
  backdrop-filter:blur(12px);
  box-shadow:0 -4px 24px rgba(0,0,0,0.6);
  transition: right .25s ease;
  display:flex; flex-direction:column;
  overflow:hidden;
}
body.panel-collapsed #refine-bar { right:28px; }
/* Drag-to-resize grip at top of bar */
#refine-resize-grip {
  height:10px; flex-shrink:0; cursor:ns-resize;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
#refine-grip-dots {
  display:block; width:32px; height:3px;
  border-top:1px solid rgba(195,161,100,0.3);
  border-bottom:1px solid rgba(195,161,100,0.3);
}
#refine-resize-grip:hover #refine-grip-dots {
  border-color:rgba(195,161,100,0.7);
}
#refine-bar-inner {
  flex:1; display:flex; align-items:stretch; gap:10px;
  max-width:940px; width:100%; margin:0 auto; padding:8px 20px 10px;
  min-height:0;
}
/* Refine loading state */
#refine-bar::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(195,161,100,0.9) 40%,rgba(255,220,120,1) 50%,rgba(195,161,100,0.9) 60%,transparent 100%);
  background-size:200% 100%;
  opacity:0; transition:opacity .2s;
}
#refine-bar.is-refining::before {
  opacity:1; animation:refine-sweep 1.4s linear infinite;
}
@keyframes refine-sweep {
  from { background-position:130% 0 }
  to   { background-position:-30% 0 }
}
#refine-bar.is-refining {
  border-top-color:rgba(195,161,100,0.55);
  box-shadow:0 -4px 32px rgba(195,161,100,0.18), 0 -1px 0 rgba(195,161,100,0.4);
}
/* Canvas AI loading overlay */
#ai-canvas-overlay {
  position:absolute; inset:0; z-index:7999; pointer-events:none;
  background:rgba(10,10,15,0);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
#ai-canvas-overlay.visible { opacity:1; pointer-events:auto; }
#ai-canvas-overlay-inner {
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.ai-overlay-spinner {
  width:44px; height:44px; border-radius:50%;
  border:2px solid rgba(195,161,100,0.15);
  border-top-color:rgba(195,161,100,0.9);
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg) } }
.ai-overlay-text {
  font-size:9px; letter-spacing:3px; text-transform:uppercase;
  color:rgba(195,161,100,0.7); animation:pulse-text 1.6s ease-in-out infinite;
}
@keyframes pulse-text { 0%,100%{opacity:.5} 50%{opacity:1} }
/* Canvas shimmer during refine */
#canvas-wrap.is-refining #stage {
  animation:canvas-pulse 2s ease-in-out infinite;
}
@keyframes canvas-pulse {
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.04) drop-shadow(0 0 18px rgba(195,161,100,0.25))}
}
#refine-label {
  font-size:9px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(195,161,100,0.8); white-space:nowrap; flex-shrink:0; align-self:center;
}
#refine-input {
  flex:1; resize:none; overflow-y:auto; align-self:stretch; min-height:28px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  color:#e8e8e8; font-size:11px; font-weight:300; letter-spacing:.3px;
  border-radius:6px; padding:8px 12px; outline:none; font-family:inherit;
  transition:border-color .15s; line-height:1.5;
}
#refine-input:focus { border-color:rgba(195,161,100,0.5); }
#refine-bar-actions { display:flex; flex-direction:column; gap:5px; flex-shrink:0; align-self:center; }
.refine-btn-apply {
  background:rgba(195,161,100,0.15); border:1px solid rgba(195,161,100,0.5);
  color:rgba(195,161,100,1); font-size:10px; letter-spacing:1px; text-transform:uppercase;
  padding:7px 16px; border-radius:4px; cursor:pointer; white-space:nowrap;
  transition:background .12s;
}
.refine-btn-apply:hover { background:rgba(195,161,100,0.28); }
.refine-btn-apply:disabled { opacity:.4; cursor:default; }
.refine-btn-new {
  background:none; border:none; color:rgba(255,255,255,0.25); font-size:9px;
  letter-spacing:.5px; cursor:pointer; text-align:center; padding:2px 0;
  transition:color .12s;
}
.refine-btn-new:hover { color:rgba(255,255,255,0.55); }

/* ── RIGHT-CLICK HOVER HINT ── */
#ed-ctx-hint {
  position:fixed; z-index:99999; pointer-events:none; display:none;
  font-size:8px; letter-spacing:1.2px; text-transform:uppercase;
  color:rgba(195,161,100,0.95); background:rgba(10,10,15,0.88);
  border:1px solid rgba(195,161,100,0.35); padding:3px 7px;
  border-radius:3px; white-space:nowrap; backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(0,0,0,0.5);
  transition:opacity .1s;
}
#ed-ctx-hint.visible { display:block; }

/* ── ELEMENT LAYER-PICKER (shown when multiple [data-ed] overlap at click point) ── */
#ed-picker {
  position:absolute; display:none; flex-wrap:wrap; gap:4px; padding:5px 6px;
  z-index:10500; pointer-events:auto;
  background:rgba(10,10,15,0.92); border:1px solid rgba(195,161,100,0.3);
  border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,0.6);
  backdrop-filter:blur(8px); max-width:340px;
}
.ed-picker-chip {
  background:transparent; color:#aaa; border:1px solid #555;
  border-radius:10px; padding:2px 10px; font-size:11px; cursor:pointer;
  white-space:nowrap; font-family:inherit; transition:border-color .12s, color .12s;
}
.ed-picker-chip:hover { border-color:#c3a164; color:#c3a164; }
.ed-picker-chip.active { background:#c3a164; color:#1a1a1a; border-color:#c3a164; font-weight:600; }
.ed-picker-chip.active:hover { color:#1a1a1a; }

/* ── Preset pills (inside AI modal) ── */
.preset-group-label {
  font-size:7px; letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(255,255,255,0.3); padding:0 2px; white-space:nowrap;
}
.preset-sep {
  width:1px; height:14px; background:rgba(255,255,255,0.12); flex-shrink:0; margin:0 3px;
}
.preset-pill {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.6); font-size:9px; letter-spacing:.4px;
  padding:3px 9px; border-radius:20px; cursor:pointer; white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s;
}
.preset-pill:hover { background:rgba(195,161,100,0.15); border-color:rgba(195,161,100,0.5); color:rgba(195,161,100,1); }
.preset-pill.active { background:rgba(195,161,100,0.2); border-color:rgba(195,161,100,0.8); color:rgb(195,161,100); }

/* ── AI DESIGN MODE ── */
.mode-seg {
  display:flex; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.07);
  border-radius:8px; padding:3px; gap:2px;
}
.mode-pill {
  flex:1; padding:5px 6px; border-radius:5px; cursor:pointer; border:none;
  background:transparent; color:rgba(255,255,255,0.4);
  font-size:9px; font-weight:400; letter-spacing:.4px; text-transform:uppercase;
  transition:background .12s, color .15s; white-space:nowrap; text-align:center;
}
.mode-pill:hover  { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.75); }
.mode-pill.active { background:rgba(195,161,100,0.22); color:rgb(195,161,100); font-weight:600; }

/* ── THE FLYER STAGE ── */
#stage {
  position:relative; flex-shrink:0;
  box-shadow: 0 20px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
}

/* ── EDITOR OVERLAYS on hover/select ── */
.ed-hover-ring {
  outline: 1px dashed rgba(195,161,100,0.5);
  outline-offset: 2px;
  cursor: pointer;
}
.ed-selected-ring {
  outline: 2px solid rgba(195,161,100,0.9) !important;
  outline-offset: 2px;
}

/* ── DRAG HANDLE (legacy \/ bbox overlay label) ── */
.drag-handle {
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#000; font-size:8px; font-weight:600; letter-spacing:1px;
  padding:2px 8px; border-radius:2px; cursor:grab; white-space:nowrap;
  pointer-events:auto; z-index:9999; display:none;
}
.drag-handle:active { cursor:grabbing; }
.drag-handle.visible { display:block; }

/* ── FULL-COVERAGE DRAG OVERLAY (abs-el selected state) ── */
.ed-drag-cover {
  position:absolute; inset:0; z-index:9990; cursor:move; pointer-events:auto;
  background:rgba(195,161,100,0.045);
  box-shadow:inset 0 0 0 2px rgba(195,161,100,0.85);
  border-radius:inherit;
}
/* Subtle crosshair icon at centre to cue draggability */
.ed-drag-cover::after {
  content:'\2725';      /* ✥  four-pointed star / move cue */
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:22px; color:rgba(195,161,100,0.28); pointer-events:none; user-select:none;
  line-height:1;
}
/* Small label tag at top-left */
.ed-drag-cover-label {
  position:absolute; top:-1px; left:-1px;
  background:var(--gold); color:#000; font-size:8px; font-weight:700; letter-spacing:1px;
  padding:2px 7px; border-radius:2px 0 4px 0;
  pointer-events:none; user-select:none; white-space:nowrap;
}

/* ── RESIZE HANDLE ── */
.resize-handle {
  position:absolute; bottom:-5px; right:-5px;
  width:10px; height:10px; background:var(--gold); border-radius:50%;
  cursor:se-resize; z-index:9999; display:none;
}
.resize-handle.visible { display:block; }

/* ── BBOX OVERLAY (SVG + non-abs elements) ── */
#ed-bbox-overlay {
  border-radius: 1px;
  transition: none;
}
#ed-bbox-overlay .drag-handle {
  top: -22px; left: 50%; transform: translateX(-50%);
  pointer-events: none;
}

/* ── RIGHT PANEL ── */
#panel-toggle {
  width:28px; flex-shrink:0; background:var(--chrome); border-left:1px solid var(--border);
  border-right:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:rgba(195,161,100,0.75); font-size:18px; transition:color .15s, background .15s;
  position:relative; z-index:1;
}
#panel-toggle:hover { color:rgba(195,161,100,1); background:rgba(195,161,100,0.1); }
#panel-toggle-icon { transition:transform .25s ease; display:block; line-height:1; }
body.panel-collapsed #panel-toggle-icon { transform:scaleX(-1); }
#panel {
  width:260px; min-width:260px; background:var(--chrome); border-left:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
  transition:width .25s ease, min-width .25s ease;
}
#panel.collapsed { width:0; min-width:0; border-left-color:transparent; }
#panel-header {
  padding:14px 16px 12px; border-bottom:1px solid var(--border); flex-shrink:0;
}
#panel-header h2 { font-size:9px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--gold); }
#panel-header p { font-size:10px; font-weight:200; color:var(--text2); margin-top:3px; }
#panel-body { flex:1; overflow-y:auto; padding:12px 14px; scrollbar-width:thin; scrollbar-color:rgba(195,161,100,0.2) transparent; }
#panel-body::-webkit-scrollbar{width:3px} #panel-body::-webkit-scrollbar-thumb{background:rgba(195,161,100,0.2);border-radius:2px}

#no-selection { text-align:center; padding:30px 14px; }
#no-selection .icon { font-size:28px; opacity:.3; margin-bottom:10px; }
#no-selection p { font-size:10px; font-weight:200; color:var(--text2); line-height:1.7; letter-spacing:.5px; }

/* ── PANEL SECTIONS ── */
.ps-label {
  font-size:8px; font-weight:500; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold2); margin:14px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--border);
}
.ps-label:first-child { margin-top:0; }
.ps-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ps-row label { font-size:9px; font-weight:300; letter-spacing:1.5px; text-transform:uppercase; color:var(--text2); min-width:54px; flex-shrink:0; }
.ps-row input[type=text], .ps-row select, .ps-row input[type=number], .ps-row input[type=password] {
  flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  border-radius:3px; padding:5px 7px; font-family:'Montserrat',sans-serif; font-size:11px;
  font-weight:300; color:var(--text); outline:none; transition:border-color .2s;
  -webkit-appearance:none; min-width:0;
}
.ps-row input:focus, .ps-row select:focus { border-color:rgba(195,161,100,0.4); }
.ps-row select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(195,161,100,0.5)'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 7px center; padding-right:20px; }
.ps-row select option { background:#1a1a24; }
.ps-row input[type=color] { width:32px; height:26px; border:1px solid rgba(255,255,255,0.1); border-radius:3px; background:none; cursor:pointer; padding:1px; flex-shrink:0; }
.ps-row input[type=range] { flex:1; -webkit-appearance:none; height:2px; background:rgba(195,161,100,0.2); border-radius:1px; outline:none; }
.ps-row input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:11px; height:11px; border-radius:50%; background:var(--gold); cursor:pointer; }
.ps-val { font-size:10px; color:var(--gold); min-width:30px; text-align:right; }
.ps-btn-row { display:flex; gap:5px; margin-bottom:8px; }
.ps-btn {
  flex:1; padding:6px 4px; font-family:'Montserrat',sans-serif; font-size:8px; font-weight:400;
  letter-spacing:2px; text-transform:uppercase; color:var(--text2); background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1); border-radius:3px; cursor:pointer; transition:all .15s;
}
.ps-btn:hover { color:var(--text); border-color:rgba(255,255,255,0.2); }
.ps-btn.danger:hover { color:#ff6b6b; border-color:rgba(255,80,80,.3); }
.ps-btn.gold { color:var(--gold); border-color:var(--gold2); }
.ps-btn.gold:hover { background:rgba(195,161,100,0.1); }

/* ── LAYERS PANEL (bottom) ── */
#layers-wrap { border-top:1px solid var(--border); flex-shrink:0; max-height:280px; overflow:hidden; }
#layers-header { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; cursor:pointer; }
#layers-header span { font-size:8px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--text2); }
#layers-list { overflow-y:auto; max-height:210px; padding:0 8px 8px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent; }
.layer-item {
  display:flex; align-items:center; gap:6px; padding:5px 7px; border-radius:3px;
  cursor:pointer; font-size:10px; font-weight:300; color:var(--text2); margin-bottom:1px;
  transition:all .1s;
}
.layer-item:hover { background:var(--hover); color:var(--text); }
.layer-item.active { background:rgba(195,161,100,0.1); color:var(--gold); }
.layer-dot { width:8px; height:8px; border-radius:50%; background:var(--gold2); flex-shrink:0; }
.layer-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#layers-hint { font-size:9px; color:rgba(255,255,255,0.2); padding:4px 14px 10px; letter-spacing:.4px; line-height:1.4; }

/* ── IMAGE UPLOAD ZONE ── */
#img-drop {
  border:1px dashed rgba(195,161,100,0.3); border-radius:4px; padding:14px;
  text-align:center; cursor:pointer; transition:all .2s; margin-bottom:8px;
}
#img-drop:hover { border-color:var(--gold); background:rgba(195,161,100,0.04); }
#img-drop p { font-size:9px; font-weight:200; color:var(--text2); letter-spacing:1px; line-height:1.6; }
#img-drop .plus { font-size:20px; color:var(--gold2); margin-bottom:4px; }
#img-upload { display:none; }

/* ── CONTEXT MENU ── */
#ctx-menu {
  position:fixed; background:var(--chrome2); border:1px solid rgba(195,161,100,0.2);
  border-radius:5px; padding:4px; min-width:160px; z-index:99999; display:none;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
}
#ctx-menu.visible { display:block; }
.ctx-item {
  padding:7px 12px; font-size:10px; font-weight:300; letter-spacing:1px;
  color:var(--text2); cursor:pointer; border-radius:3px; display:flex; align-items:center; gap:8px;
}
.ctx-item:hover { background:rgba(195,161,100,0.1); color:var(--text); }
.ctx-item.danger:hover { background:rgba(255,80,80,0.1); color:#ff6b6b; }
.ctx-sep { height:1px; background:var(--border); margin:3px 0; }

/* ── CANVAS WRAPPER — resizes to fit whatever design is loaded ── */
#flyer {
  position:relative;
  width:460px; min-height:700px;
  background:#0d0d14; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
  border:1px solid rgba(195,161,100,0.3);
}
#flyer.imported {
  width:auto !important; min-height:unset !important; height:auto !important;
  background:transparent !important; border:none !important;
  display:block !important; overflow:visible !important;
}
#flyer::before { content:''; position:absolute; inset:8px; border:1px solid rgba(195,161,100,0.1); pointer-events:none; z-index:0; }
#flyer.imported::before { display:none; }
.glow-top { position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:320px;height:320px;background:radial-gradient(ellipse at center,rgba(195,161,100,0.18) 0%,transparent 70%);pointer-events:none; }
.glow-bot { position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);width:260px;height:260px;background:radial-gradient(ellipse at center,rgba(195,161,100,0.10) 0%,transparent 70%);pointer-events:none; }
.f-corner { position:absolute;width:50px;height:50px;z-index:5;pointer-events:none; }
.f-corner svg{width:100%;height:100%}
.f-corner.tl{top:13px;left:13px} .f-corner.tr{top:13px;right:13px;transform:scaleX(-1)} .f-corner.bl{bottom:13px;left:13px;transform:scaleY(-1)} .f-corner.br{bottom:13px;right:13px;transform:scale(-1)}
.f-particles{position:absolute;inset:0;pointer-events:none;z-index:1;}
.f-particle{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(195,161,100,.6);animation:twinkle var(--d,3s) ease-in-out infinite var(--dl,0s)}
@keyframes twinkle{0%,100%{opacity:.1;transform:scale(1)}50%{opacity:.9;transform:scale(1.6)}}
.f-body{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;padding:48px 52px 44px;}
.f-toptag{font-family:'Montserrat',sans-serif;font-weight:200;font-size:8px;letter-spacing:5px;text-transform:uppercase;color:rgba(195,161,100,.7);margin-bottom:18px;}
.f-div{display:flex;align-items:center;width:100%;gap:8px;margin-bottom:18px;}
.f-div-line{flex:1;height:1px;}
.f-div-line.l{background:linear-gradient(to left,transparent,rgba(195,161,100,.5),rgba(195,161,100,.2))}
.f-div-line.r{background:linear-gradient(to right,transparent,rgba(195,161,100,.5),rgba(195,161,100,.2))}
.f-div-dia{width:6px;height:6px;background:rgba(195,161,100,.7);transform:rotate(45deg);flex-shrink:0}
.f-intro{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:14px;letter-spacing:2px;color:rgba(195,161,100,.75);margin-bottom:12px;}
.f-name{font-family:'Cinzel',serif;font-weight:600;font-size:46px;letter-spacing:7px;text-align:center;color:#c3a164;line-height:1.1;margin-bottom:4px;}
.f-mile{font-family:'Cinzel',serif;font-weight:300;font-style:italic;font-size:96px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(195,161,100,.35);letter-spacing:4px;margin-bottom:4px}
.f-bday{font-family:'Cinzel',serif;font-weight:400;font-size:10px;letter-spacing:9px;text-transform:uppercase;color:rgba(195,161,100,.6);margin-bottom:24px;}
.f-sep{width:180px;height:1px;background:linear-gradient(to right,transparent,rgba(195,161,100,.5),transparent);margin-bottom:24px;}
.f-details{width:100%;display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
.f-dr{display:flex;align-items:flex-start;gap:12px}
.f-di{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}
.f-dt{display:flex;flex-direction:column;gap:1px}
.f-dl{font-family:'Montserrat',sans-serif;font-weight:300;font-size:7px;letter-spacing:3px;text-transform:uppercase;color:rgba(195,161,100,.5)}
.f-dv{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:15px;color:rgba(230,210,170,.92);line-height:1.3}
.f-badge{display:inline-block;border:1px solid rgba(195,161,100,.3);padding:3px 12px;font-family:'Montserrat',sans-serif;font-weight:200;font-size:7px;letter-spacing:4px;text-transform:uppercase;color:rgba(195,161,100,.6);margin-top:3px}
.f-rsvp-wrap{width:100%;border:1px solid rgba(195,161,100,.2);padding:14px 20px;display:flex;flex-direction:column;align-items:center;gap:6px;margin:22px 0}
.f-rsvp-lbl{font-family:'Montserrat',sans-serif;font-weight:300;font-size:7px;letter-spacing:4px;text-transform:uppercase;color:rgba(195,161,100,.5)}
.f-rsvp-val{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:16px;color:rgba(195,161,100,.85);letter-spacing:1px}
.f-rsvp-dead{font-family:'Montserrat',sans-serif;font-weight:200;font-size:7px;letter-spacing:2px;text-transform:uppercase;color:rgba(195,161,100,.4)}
.f-stars{display:flex;align-items:center;gap:10px;opacity:.5}
.f-stars span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:11px;letter-spacing:1.5px;color:rgba(195,161,100,.35)}

/* ── INLINE EDITING ── */
[contenteditable="true"] { outline:none; cursor:text; }
[contenteditable="true"]:empty::before { content:attr(data-placeholder); opacity:.3; }

/* ── ABSOLUTELY POSITIONED ELEMENTS ── */
.abs-el { position:absolute; }
.abs-el img { display:block; }

/* ── MODAL OVERLAY ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.82); z-index:200000;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .2s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-box {
  background:#16161f; border:1px solid rgba(195,161,100,0.25);
  border-radius:8px; width:680px; max-width:96vw; max-height:90vh;
  display:flex; flex-direction:column; box-shadow:0 24px 80px rgba(0,0,0,0.8);
}
.modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.07);
}
.modal-head h3 { font-size:10px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--gold); }
.modal-close {
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,0.1);
  background:none; cursor:pointer; color:var(--text2); font-size:14px;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.modal-close:hover { border-color:rgba(255,80,80,.4); color:#ff6b6b; background:rgba(255,80,80,.07); }
.modal-body { flex:1; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
.modal-body p { font-size:11px; font-weight:200; color:var(--text2); line-height:1.7; letter-spacing:.3px; }
.modal-textarea {
  width:100%; height:300px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.1);
  border-radius:5px; padding:12px 14px; font-family:'Courier New',monospace; font-size:12px;
  color:rgba(255,255,255,0.8); resize:vertical; outline:none; transition:border-color .2s;
  line-height:1.5;
}
.modal-textarea:focus { border-color:rgba(195,161,100,0.4); }
.modal-textarea::placeholder { color:rgba(255,255,255,0.2); }
.modal-hint { font-size:10px; font-weight:200; color:rgba(195,161,100,0.5); letter-spacing:.5px; line-height:1.6; }
.modal-foot {
  display:flex; gap:8px; padding:14px 20px; border-top:1px solid rgba(255,255,255,0.07);
  justify-content:flex-end; align-items:center;
}
.modal-btn {
  padding:8px 18px; font-family:'Montserrat',sans-serif; font-size:9px; font-weight:400;
  letter-spacing:3px; text-transform:uppercase; border-radius:3px; cursor:pointer; transition:all .15s;
}
.modal-btn.cancel { color:var(--text2); background:none; border:1px solid rgba(255,255,255,0.1); }
.modal-btn.cancel:hover { color:var(--text); border-color:rgba(255,255,255,0.2); }
.modal-btn.confirm { color:#000; background:var(--gold); border:1px solid var(--gold); }
.modal-btn.confirm:hover { background:#d4b070; }
.modal-btn:disabled { opacity:0.4; cursor:not-allowed; }

/* ── PNG EXPORT PROGRESS ── */
#export-toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(calc(100% + 96px));
  background:#16161f; border:1px solid rgba(195,161,100,0.3); border-radius:6px;
  padding:12px 22px; display:flex; align-items:center; gap:12px; z-index:300000;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s; pointer-events:none;
  opacity:0;
}
#export-toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
#export-toast .toast-icon { width:16px; height:16px; border:2px solid var(--gold); border-top-color:transparent; border-radius:50%; }
#export-toast.show .toast-icon { animation:spin .7s linear infinite; }
#export-toast .toast-text { font-size:10px; font-weight:300; letter-spacing:2px; text-transform:uppercase; color:var(--gold); }
@keyframes spin { to { transform:rotate(360deg); } }

/* export scale picker */
.scale-pills { display:flex; gap:6px; }
.scale-pill {
  padding:5px 12px; font-size:9px; font-weight:400; letter-spacing:2px; text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.1); border-radius:20px; cursor:pointer; color:var(--text2);
  transition:all .15s; background:none;
}
.scale-pill:hover { border-color:var(--gold2); color:var(--gold); }
.scale-pill.active { border-color:var(--gold); color:var(--gold); background:rgba(195,161,100,0.1); }

/* ── AI GENERATOR ── */
.ai-prompt-textarea {
  width:100%; height:120px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.1);
  border-radius:5px; padding:12px 14px; font-family:'Montserrat',sans-serif; font-size:11px;
  font-weight:300; color:rgba(255,255,255,0.85); resize:vertical; outline:none;
  transition:border-color .2s; line-height:1.6;
}
.ai-prompt-textarea:focus { border-color:rgba(195,161,100,0.4); }
.ai-prompt-textarea::placeholder { color:rgba(255,255,255,0.18); font-style:italic; }
.ai-status {
  display:flex; flex-direction:column; gap:10px; padding:10px 14px;
  background:rgba(195,161,100,0.05); border:1px solid rgba(195,161,100,0.15);
  border-radius:4px;
}
.ai-status-top { display:flex; align-items:center; gap:10px; }
.ai-status .spinner {
  width:14px; height:14px; border:2px solid rgba(195,161,100,0.3);
  border-top-color:var(--gold); border-radius:50%; flex-shrink:0;
  animation:spin .7s linear infinite;
}
#ai-status-text { font-size:10px; font-weight:300; letter-spacing:1.5px; color:var(--gold); }
#ai-live-preview-wrap {
  width:100%; height:320px; border-radius:5px; overflow:hidden;
  border:1px solid rgba(195,161,100,0.15); background:#fff; position:relative;
}
#ai-live-preview {
  width:1280px; height:640px; border:none; pointer-events:none; user-select:none;
  transform:scale(0.5); transform-origin:top left;
}
.ai-settings-toggle {
  background:none; border:none; font-family:'Montserrat',sans-serif;
  font-size:9px; font-weight:300; letter-spacing:2px; text-transform:uppercase;
  color:var(--text2); cursor:pointer; padding:3px 0; transition:color .15s;
}
.ai-settings-toggle:hover { color:var(--gold); }
#ai-settings-panel { border-top:1px solid var(--border); padding-top:14px; margin-top:4px; }
.ai-example-pills { display:flex; flex-wrap:wrap; gap:5px; }
.ai-example-pill {
  padding:4px 10px; font-size:9px; letter-spacing:1px; font-weight:300; cursor:pointer;
  border:1px solid rgba(195,161,100,0.2); border-radius:20px; color:var(--text2);
  transition:all .15s; background:none; font-family:'Montserrat',sans-serif;
}
.ai-example-pill:hover { border-color:var(--gold); color:var(--gold); background:rgba(195,161,100,0.05); }
.ai-error {
  padding:10px 14px; background:rgba(255,80,80,0.07); border:1px solid rgba(255,80,80,0.2);
  border-radius:4px; font-size:10px; font-weight:300; color:#ff8888; letter-spacing:.5px; line-height:1.6;
}

/* ── Settings modal — model list ─────────────────── */
.cfg-model-list {
  display:flex; flex-direction:column; gap:3px;
  max-height:280px; overflow-y:auto;
  border:1px solid var(--border); border-radius:6px;
  padding:6px;
}
.cfg-model-provider {
  font-size:7px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold);
  padding:6px 6px 3px; font-weight:500;
}
.cfg-model-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:4px; cursor:pointer;
  transition:background .12s; border:1px solid transparent;
  font-size:11px; color:var(--text);
}
.cfg-model-row:hover { background:rgba(255,255,255,0.04); }
.cfg-model-row.selected {
  background:rgba(195,161,100,0.08);
  border-color:rgba(195,161,100,0.25);
}
.cfg-model-row input[type="radio"] { display:none; }
.cfg-model-name {
  font-family:'Montserrat',sans-serif; font-size:11px; font-weight:400;
  color:var(--text); flex:0 0 auto;
}
.cfg-model-desc {
  font-family:'Montserrat',sans-serif; font-size:9px; font-weight:300;
  color:var(--text2); letter-spacing:.3px; margin-left:auto;
}

/* ── Output / file saving modal ─────────────────── */
.tpl-path-row {
  display:flex; align-items:baseline; gap:10px;
  padding:8px 12px; border-radius:5px;
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
}
.tpl-path-label {
  font-family:'Montserrat',sans-serif; font-size:9px; font-weight:400;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--text2);
  flex:0 0 110px;
}
.tpl-path-value {
  font-family:'Courier New',monospace; font-size:10px; color:var(--gold);
  word-break:break-all;
}
.modal-body code {
  font-family:'Courier New',monospace; font-size:9px; color:var(--text2);
  background:rgba(255,255,255,0.05); padding:2px 5px; border-radius:3px;
}

/* ── Load Design gallery modal ───────────────────── */
#load-design-modal .modal { width:860px; max-width:96vw; max-height:90vh; display:flex; flex-direction:column; }
#load-design-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:14px;
  overflow-y:auto;
  padding:4px 2px 8px;
  flex:1;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.1) transparent;
}
.design-card {
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  background:var(--chrome2);
  transition:border-color .18s, transform .18s;
}
.design-card:hover {
  border-color:rgba(195,161,100,0.45);
  transform:translateY(-2px);
}
.design-card-thumb {
  width:100%;
  height:130px;
  overflow:hidden;
  background:#0b0b0e;
  position:relative;
}
.design-card-thumb iframe {
  width:800px;
  height:520px;
  border:none;
  transform:scale(0.25);
  transform-origin:top left;
  pointer-events:none;
  user-select:none;
}
.design-card-info {
  padding:8px 10px 10px;
  border-top:1px solid var(--border);
}
.design-card-title {
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:3px;
}
.design-card-meta {
  font-family:'Montserrat',sans-serif;
  font-size:8.5px;
  font-weight:300;
  color:var(--text2);
  letter-spacing:.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}