/* Alpha 6.9.0 — Editor Visual Prototype
   Layout inspired by the approved dark/gold editor concept while preserving existing IDs and behavior. */
:root{--proto-rail:250px;--proto-side:330px}
#editorApp.app{grid-template-columns:var(--proto-rail) minmax(520px,1fr) var(--proto-side);grid-template-areas:"rail workspace side";background:#090c11}
#editorApp .rail{grid-area:rail;width:auto;align-items:stretch;padding:20px 18px;gap:10px;background:linear-gradient(180deg,#0e131b,#090c11);border-right:1px solid rgba(213,170,96,.16)}
#editorApp .side{grid-area:side;border-right:0;border-left:1px solid rgba(213,170,96,.16);background:linear-gradient(180deg,#121823,#0d1118);padding:18px;overflow:auto}
#editorApp .workspace{grid-area:workspace;grid-template-rows:74px 42px 1fr;background:radial-gradient(circle at 50% 15%,#252b34 0,#11161d 48%,#090c11 100%)}
#editorApp .brandmark{width:100%;height:auto;min-height:86px;display:flex;align-items:center;justify-content:flex-start;gap:13px;margin:0 0 18px;padding:10px 12px;border:0;background:transparent;box-shadow:none}
#editorApp .brandmark img{width:60px;height:60px;object-fit:contain;border:1px solid rgba(213,170,96,.46);border-radius:15px;background:#0b0f15;box-shadow:0 8px 20px #0008}
#editorApp .brandmark:after{content:"CIGAR CARD\A STUDIO";white-space:pre;font:700 15px/1.16 Georgia,serif;letter-spacing:.04em;color:#f5f0e7;text-align:left}
#editorApp .rail .nav{width:100%;height:60px;min-height:60px;display:grid;grid-template-columns:44px 1fr;grid-template-rows:1fr;align-items:center;justify-content:start;gap:12px;padding:8px 12px;border-radius:12px;color:#d8dde7;text-align:left}
#editorApp .rail .nav:hover,#editorApp .rail .nav.active{background:linear-gradient(90deg,rgba(213,170,96,.14),rgba(213,170,96,.05));box-shadow:inset 2px 0 #d5aa60;border:1px solid rgba(213,170,96,.14)}
#editorApp .rail .nav>svg,#editorApp .rail .nav>.navArt{width:40px!important;height:40px!important;grid-column:1;padding:7px!important;margin:0!important}
#editorApp .rail .nav>.navArt{padding:3px!important}
#editorApp .rail .navLabel{grid-column:2;justify-content:flex-start!important;font-size:14px!important;line-height:1.2!important;white-space:nowrap;color:inherit}
#editorApp .spacer{min-height:18px}
#editorApp .side>h1{font:700 22px Georgia,serif;letter-spacing:.02em;margin-bottom:3px}
#editorApp .side>.sub{margin-bottom:14px}
#editorApp .primaryTabs{margin:12px 0 10px}
#editorApp .tab{min-height:46px;border-radius:12px}
#editorApp .editorUtilityRow{border:1px solid var(--line);border-radius:13px;padding:10px 11px;background:#0c1118}
#editorApp .pane.active{animation:protoFade .18s ease}
@keyframes protoFade{from{opacity:.55;transform:translateY(2px)}to{opacity:1;transform:none}}
#editorApp .top.editorToolbar{padding:10px 18px;gap:12px;border-bottom:1px solid rgba(213,170,96,.14);background:rgba(10,14,20,.94)}
#editorApp .contextTools{width:100%;display:flex;align-items:center;gap:8px;overflow-x:auto;padding-bottom:2px}
#editorApp .toolContext{display:none}
#editorApp .toolGroup{display:flex;gap:7px;align-items:center}
#editorApp .toolBtn,#editorApp .readyCardBtn,#editorApp .top .iconBtn,#editorApp .fitBtn{min-width:48px;height:48px;border-radius:12px;background:linear-gradient(180deg,#1a212c,#111720);border:1px solid rgba(255,255,255,.06);color:#e5b969;box-shadow:inset 0 1px rgba(255,255,255,.025)}
#editorApp .toolBtn:hover,#editorApp .readyCardBtn:hover,#editorApp .top .iconBtn:hover{border-color:rgba(213,170,96,.45);background:#1c222c}
#editorApp .readyCardLabel{display:none}
#editorApp .readyCardTools{margin-left:auto}
#editorApp .readyCardBtn.primary{background:linear-gradient(180deg,#c79b54,#8f652d);color:#171008}
#editorApp .selectionBar{display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.06);background:#0c1016}
#editorApp .stageWrap{padding:22px 26px 18px;overflow:auto}
#editorApp .stageGrid{place-items:center;min-height:100%}
#editorApp .stage{box-shadow:0 22px 55px #000b,0 0 0 1px rgba(213,170,96,.12);border-radius:2px}
#editorApp .side .section,#editorApp .side .templateDetails,#editorApp .side .editorUtilityRow{background:#0c1118}
#editorApp .side .section{border:1px solid rgba(255,255,255,.06);border-radius:13px;padding:13px;margin-top:12px}
#editorApp .side .section h3{color:#e7ebf3;font-size:13px;letter-spacing:.04em}
#editorApp .control,#editorApp .btn{border-radius:11px}
#editorApp .layers .layer{min-height:46px;border-color:rgba(213,170,96,.2);background:#0d1219}
#editorApp .layers .layer.active{border-color:#d5aa60;background:rgba(213,170,96,.08)}
/* Optical icon consistency: all 3D artwork gets the exact same square and baseline. */
.modeGrid{align-items:stretch}
.modeCard{display:grid!important;grid-template-rows:96px auto 1fr auto;align-content:start}
.modeIcon.modeIcon3d{justify-self:start!important;align-self:start!important;width:92px!important;height:92px!important;padding:7px!important;margin:0!important}
.modeIcon3d picture,.modeIcon3d img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:50% 50%!important}
.modeCopy{margin-top:18px!important;align-self:start}
.modeCopy b{min-height:48px;display:flex;align-items:flex-start}
.modeCopy small{min-height:40px;display:block}
.modeArrow{align-self:end}
/* Compact editor/mobile navigation uses one optical box. */
#editorApp .navArt img{object-fit:contain!important;object-position:center!important}
@media(max-width:1180px){:root{--proto-rail:190px;--proto-side:300px}#editorApp .brandmark:after{font-size:12px}#editorApp .rail{padding-inline:12px}}
@media(max-width:900px){#editorApp.app{grid-template-columns:78px minmax(0,1fr);grid-template-areas:"rail workspace"}.side{position:fixed!important;right:0;top:0;bottom:0;width:min(360px,88vw);z-index:30;transform:translateX(100%);transition:transform .2s}.side:has(.pane.active){transform:translateX(0)}#editorApp .brandmark:after{display:none}#editorApp .brandmark{padding:0;justify-content:center}#editorApp .brandmark img{width:52px;height:52px}#editorApp .rail .nav{grid-template-columns:1fr;height:66px;padding:5px}#editorApp .rail .navLabel{display:none!important}#editorApp .rail .nav>svg,#editorApp .rail .nav>.navArt{grid-column:1;margin:auto!important}}
@media(max-width:720px){#editorApp.app{display:block}.modeCard{grid-template-rows:82px auto 1fr auto}.modeIcon.modeIcon3d{width:78px!important;height:78px!important}.modeCopy b,.modeCopy small{min-height:0}.side{position:static!important;width:auto;transform:none!important}.workspace{padding-bottom:86px}.rail{position:fixed!important;left:0;right:0;bottom:0;top:auto;width:100%!important;height:82px!important;display:flex!important;flex-direction:row!important;padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important;z-index:40}.rail .brandmark,.rail .spacer{display:none!important}#editorApp .rail .nav{flex:1 0 76px!important;width:76px!important;min-width:76px!important;display:flex!important;flex-direction:column!important;gap:2px!important}#editorApp .rail .navLabel{display:flex!important;font-size:9px!important;justify-content:center!important}.top.editorToolbar{overflow-x:auto}.readyCardTools{margin-left:0}}

/* Alpha 6.9.3 — UI Cleanup */
#editorApp .top.editorToolbar{min-height:76px;padding:10px 16px;gap:12px;background:linear-gradient(180deg,rgba(19,24,33,.98),rgba(13,17,24,.98));border-bottom:1px solid rgba(202,151,77,.18)}
#editorApp .contextTools{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
#editorApp .readyCardTools{margin-left:auto;display:flex;align-items:center;gap:8px;padding-left:10px;border-left:1px solid rgba(202,151,77,.18)}
#editorApp .readyCardLabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
#editorApp .canvasToggleGroup{display:flex;gap:6px;align-items:center}
#editorApp .canvasToggle{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:#111722;cursor:pointer;transition:.18s ease;position:relative}
#editorApp .canvasToggle:hover{border-color:rgba(213,170,96,.5);transform:translateY(-1px)}
#editorApp .canvasToggle input{position:absolute;opacity:0;pointer-events:none}
#editorApp .canvasToggle svg{width:21px;height:21px;fill:none;stroke:#9aa4b5;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#editorApp .canvasToggle:has(input:checked){background:linear-gradient(180deg,#3a2c17,#241c10);border-color:#b9863e;box-shadow:inset 0 0 0 1px rgba(255,214,143,.08)}
#editorApp .canvasToggle:has(input:checked) svg{stroke:#e0b36c}
#editorApp .readyCardBtn{height:42px;padding:0 18px;border-radius:12px;white-space:nowrap}
#editorApp .toolbar.compact{display:flex;align-items:center;gap:6px}
#editorApp .stageWrap{background:radial-gradient(circle at 50% 35%,rgba(185,133,63,.07),transparent 38%),#0b0f15}
#editorApp .side,#editorApp .top,#editorApp .selectionBar,#editorApp .actionDrawer{backdrop-filter:none}
@media(max-width:1180px){#editorApp .readyCardLabel{display:none}#editorApp .readyCardTools{gap:5px;padding-left:6px}.editorToolbar .toolContext{display:none}}
@media(max-width:900px){#editorApp .top.editorToolbar{padding:8px 10px}.readyCardBtn{padding:0 12px!important}.canvasToggle{width:38px!important;height:38px!important}}

/* Alpha 7.4.3 — home artwork fitted to the icon frame.
   Existing artwork is enlarged inside the fixed rounded frame; no image files are replaced. */
#homeEditor .modeIcon3d,
#homeCatalog .modeIcon3d{
  overflow:hidden!important;
}
#homeEditor .modeIcon3d picture,
#homeCatalog .modeIcon3d picture{
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  border-radius:inherit!important;
}
#homeEditor .modeIcon3d img,
#homeCatalog .modeIcon3d img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
  transform:scale(1.13)!important;
  transform-origin:center!important;
}
#homeEditor .modeIcon3d img{object-position:51% 49%!important}
#homeCatalog .modeIcon3d img{object-position:49% 51%!important}
@media(max-width:720px){
  #homeEditor .modeIcon3d img,
  #homeCatalog .modeIcon3d img{transform:scale(1.13)!important}
}