/* ==========================================================================
   AURAA — fixed 3-panel, dual center view
   ========================================================================== */
:root {
  --bg:      #101014;
  --panel:   #17171d;
  --panel-2: #1e1e26;
  --line:    #2b2b36;
  --text:    #eceaf2;
  --muted:   #8f8da0;
  --accent:  #4c9df0;
  --warn:    #ffb24d;
  --danger:  #ff6470;
  --radius:  20px;
  --left-w:  290px;
  --right-w: 290px;
  --header-h:50px;
}

/* ── Light mode override ── */
[data-theme="light"] {
  --bg:      #f4f4f7;
  --panel:   #ffffff;
  --panel-2: #eeeef2;
  --line:    #dcdce3;
  --text:    #17171d;
  --muted:   #6b6a78;
}
[data-theme="light"] .cam-modal { background: rgba(244,244,247,.97); }
[data-theme="light"] .lightbox  { background: rgba(244,244,247,.94); }
[data-theme="light"] .toast     { box-shadow: 0 8px 30px rgba(0,0,0,.15); }
[data-theme="light"] .btn.ghost { color: var(--text); }
[data-theme="light"] .countdown { text-shadow: 0 0 40px rgba(70,130,240,.25); }

/* ── Theme toggle button ── */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: .85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.theme-toggle:hover { border-color: var(--muted); }

*  { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body {
  background:var(--bg); color:var(--text);
  font-family:"Outfit",system-ui,sans-serif;
  font-weight:300; font-size:13px;
}

/* ── topbar ── */
.topbar {
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; border-bottom:1px solid var(--line); flex-shrink:0;
}
/* Import the font */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&display=swap');

.brand{
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
}
.brand-dot { color:var(--accent); }
.topbar-right { display:flex; align-items:center; gap:12px; }

/* ── 3-column ── */
.app-layout {
  display:grid;
  grid-template-columns:var(--left-w) minmax(0,1fr) var(--right-w);
  height:calc(100vh - var(--header-h));
  overflow:hidden;
}

/* ══════════════════ LEFT PANEL ══════════════════ */
.panel-left {
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.input-section { padding:10px 12px 8px; flex-shrink:0; }
.section-label {
  font-family:"Syne",sans-serif; font-size:.63rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px;
}
.divider { height:1px; background:var(--line); flex-shrink:0; }

.input-row { display:flex; gap:8px; margin-bottom:7px; }
.thumb-wrap {
  position:relative; width:130px; height:140px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.thumb-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumb-empty { font-size:.62rem; color:var(--muted); pointer-events:none; }
.garment-thumb { cursor:pointer; }
.garment-thumb:hover { border-color:var(--accent); }
.garment-thumb .garment-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.garment-thumb .drop { position:absolute; inset:0; cursor:pointer; z-index:2; }
.garment-thumb .garment-actions {
  position:absolute; bottom:3px; right:3px;
  display:flex; gap:3px; z-index:3;
}
.icon-btn {
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  width:20px; height:20px; border-radius:4px; font-size:.62rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.icon-btn.danger { color:var(--danger); }
.input-btns { display:flex; gap:6px; flex-wrap:wrap; }
.garment-status { font-size:.7rem; color:var(--muted); margin-top:4px; min-height:1em; }
.garment-status.ok  { color:var(--accent); }
.garment-status.err { color:var(--danger); }
.warn-hint { color:var(--warn); font-size:.7rem; margin-top:4px; }

.fld { display:block; margin-bottom:6px; }
.fld select,.fld input {
  display:block; width:100%;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:6px; color:var(--text);
  font-family:"Outfit",sans-serif; font-size:.78rem; padding:6px 8px;
}
.fld select:focus,.fld input:focus { outline:1px solid var(--accent); }

.gen-section {
  margin-top:auto; padding:10px 12px 12px;
  border-top:1px solid var(--line); flex-shrink:0;
}
.btn.full { width:100%; margin-bottom:6px; }
.gen-validate { font-size:.7rem; margin-top:4px; }
.gen-validate.ok   { color:var(--accent); }
.gen-validate.warn { color:var(--warn); }

/* ══════════════════ CENTER PANEL ══════════════════ */
.panel-center {
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg);
}

.center-loading {
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(var(--header-h) + 8px);
  background:rgba(23,23,29,.92); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 20px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  z-index:10; pointer-events:none;
}
.center-loading[hidden] { display:none; }

/* dual view: two equal halves side by side */
.dual-view {
  flex:1; display:grid; grid-template-columns:1fr 1fr;
  gap:0; overflow:hidden;
  border-top:1px solid var(--line);
}
.dual-pane {
  display:flex; flex-direction:column; overflow:hidden;
  border-right:1px solid var(--line);
}
.dual-pane:last-child { border-right:none; }

.pane-label {
  height:38px; flex-shrink:0;
  display:flex; align-items:center; gap:8px;
  padding:0 12px;
  border-bottom:1px solid var(--line);
  font-family:"Syne",sans-serif; font-size:.75rem; font-weight:600;
  color:var(--text);
}

/* placeholder when no image */
.pane-empty {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  color:var(--muted); text-align:center; padding:20px;
}
.empty-icon { font-size:2.2rem; opacity:.12; }
.pane-empty p { font-family:"Syne",sans-serif; font-size:.9rem; font-weight:600; color:var(--text); }
.pane-empty span { font-size:.75rem; }
.pane-empty[hidden] { display: none !important; }   /* fix: [hidden] must win over display:flex */

/* ── Before/After reveal ── */
.reveal {
  flex:1; position:relative;
  background:var(--panel-2); overflow:hidden;
  cursor:ew-resize; touch-action:none; user-select:none;
  display:flex; /* so pane-empty centres */
}
.reveal img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; pointer-events:none;
}
.reveal-top {
  position:absolute; inset:0; overflow:hidden; width:50%;
  border-right:2px solid var(--accent);
}
.reveal-top img { width:100%; height:100%; max-width:none; }
.reveal-handle {
  position:absolute; top:0; bottom:0; left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; pointer-events:none;
}
.reveal-knob {
  background:var(--accent); color:#10140a;
  width:34px; height:34px; border-radius:50%;
  font-size:.82rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.reveal-tag {
  position:absolute; top:10px;
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(16,16,20,.78); border:1px solid var(--line);
  padding:3px 8px; border-radius:999px; pointer-events:none;
}
.tag-left { left:10px; }
.tag-right { right:10px; }

/* ── Turntable ── */
.turntable {
  flex:1; position:relative;
  background:radial-gradient(ellipse at 50% 88%,#23232d 0%,var(--panel-2) 60%);
  cursor:grab; touch-action:none; user-select:none; overflow:hidden;
  display:flex;
}
.turntable:active { cursor:grabbing; }
.tt-stage { position:absolute; inset:0; }
.tt-stage img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; pointer-events:none; will-change:opacity,transform;
}
.tt-shadow {
  position:absolute; left:50%; bottom:4%; width:46%; height:4%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.5) 0%,transparent 70%);
  border-radius:50%; pointer-events:none;
}
.tt-hint {
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font-size:.68rem; color:var(--muted);
  background:rgba(16,16,20,.72); padding:3px 10px; border-radius:999px;
  pointer-events:none; white-space:nowrap;
}

/* result footer */
.result-footer{
    display:flex;
    align-items:center;
    gap:10px;
    padding:4px 12px;
    min-height:42px;
    border-top:1px solid var(--line);
}

/* src toggle buttons */
.src-btns { display:flex; gap:4px; margin-left:auto; }
.src-btn {
  background:transparent; border:1px solid var(--line); color:var(--muted);
  font-family:"Outfit",sans-serif; font-size:.7rem;
  padding:3px 9px; border-radius:999px; cursor:pointer;
}
.src-btn.is-active { border-color:var(--accent); color:var(--accent); }
.src-btn:disabled  { opacity:.35; cursor:not-allowed; }

/* ══════════════════ RIGHT PANEL ══════════════════ */
.panel-right {
  background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.ai-card {
  padding:10px 12px; border-bottom:1px solid var(--line); flex-shrink:0;
  background:linear-gradient(135deg,var(--panel),var(--panel-2));
  border-left:3px solid var(--accent);
}
.ai-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ai-label { font-family:"Syne",sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.ai-text { font-size:.76rem; line-height:1.5; color:var(--muted); margin-bottom:6px; }
.style-mode { font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:999px; }
.style-mode.ai       { background:rgba(76,157,240,.14); color:var(--accent); }
.style-mode.fallback { background:rgba(143,141,160,.16); color:var(--muted); }
.style-cats { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:5px; }
.style-cat { font-size:.66rem; padding:3px 9px; border-radius:999px; border:1px dotted var(--accent); color:var(--accent); }
.style-colours { margin-top:4px; }
.colour-chips { display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.colour-chip { font-size:.66rem; padding:3px 9px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line); color:var(--text); }

.lib-header { padding:8px 12px 6px; border-bottom:1px solid var(--line); flex-shrink:0; }
.lib-chips { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.lib-chip { background:transparent; border:1px solid var(--line); color:var(--muted); font-family:"Outfit",sans-serif; font-size:.7rem; padding:4px 9px; border-radius:999px; cursor:pointer; }
.lib-chip.is-active { color:var(--text); border-color:var(--accent); }
.lib-scroll { flex:1; overflow-y:auto; padding:10px; }
.lib-scroll::-webkit-scrollbar { width:4px; }
.lib-scroll::-webkit-scrollbar-thumb { background:var(--line); border-radius:4px; }
.lib-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lib-item {
  position:relative; background:var(--panel-2); border:1px solid var(--line);
  border-radius:8px; padding:6px 6px 8px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; gap:4px; color:var(--text);
  font-family:"Outfit",sans-serif; transition:border-color .15s;
}
.lib-item:hover { border-color:var(--muted); }
.lib-item.suggested { border-color:rgba(76,157,240,.5); }
.lib-item.busy { opacity:.5; pointer-events:none; }
.lib-item img { width:100%; aspect-ratio:2/3; object-fit:contain; border-radius:5px; background:var(--panel); }
.lib-badge { position:absolute; top:5px; left:5px; background:var(--accent); color:#10140a; font-size:.55rem; font-weight:600; padding:2px 5px; border-radius:999px; }
.lib-name { font-size:.68rem; font-weight:500; }
.lib-cat  { font-size:.6rem; color:var(--muted); }

/* ══════════════════ BUTTONS ══════════════════ */
.btn {
  font-family:"Outfit",sans-serif; font-weight:500; font-size:.78rem;
  background:var(--accent); color:#10140a;
  border:none; border-radius:999px; padding:7px 14px;
  cursor:pointer; transition:filter .15s,opacity .15s; white-space:nowrap;
}
.btn:hover { filter:brightness(1.08); }
.btn:disabled { opacity:.35; cursor:not-allowed; }
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
.btn.ghost:hover { border-color:var(--muted); }
.btn.danger { color:var(--danger); border-color:rgba(255,100,112,.4); }
.btn.small { padding:5px 11px; font-size:.74rem; }
.file-btn { display:inline-flex; align-items:center; }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ══════════════════ CAMERA MODAL ══════════════════ */
.cam-modal {
  position:fixed; inset:0; background:rgba(10,10,13,.97);
  z-index:90; display:none;
}
.cam-modal:not([hidden]) { display:flex; align-items:center; justify-content:center; }
.cam-modal-inner {
  display:grid; grid-template-columns:minmax(0,1fr) 210px;
  gap:14px; width:min(96vw,1020px); height:min(92vh,800px); padding:12px;
}
.cam-stage {
  position:relative; background:#000;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.cam-stage video,.cam-stage canvas,.cam-stage img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}
.cam-stage canvas { pointer-events:none; }
.cam-side {
  display:flex; flex-direction:column; gap:12px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; overflow-y:auto;
}
.cam-side h3 { font-family:"Syne",sans-serif; font-size:.88rem; }
.cam-checklist { list-style:none; display:grid; gap:7px; padding:0; }
.cam-checklist li { font-size:.76rem; color:var(--muted); padding-left:20px; position:relative; }
.cam-checklist li::before { content:""; position:absolute; left:0; top:3px; width:10px; height:10px; border:2px dotted var(--muted); border-radius:50%; transition:all .2s; }
.cam-checklist li.pass { color:var(--text); }
.cam-checklist li.pass::before { border-style:solid; border-color:var(--accent); background:var(--accent); }
.cam-controls { display:flex; gap:6px; flex-wrap:wrap; }
.guide-banner {
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(16,16,20,.82); border:1px solid var(--line);
  backdrop-filter:blur(6px); padding:7px 14px; border-radius:999px;
  font-size:.85rem; white-space:nowrap; max-width:92%;
}
.guide-dot { width:8px; height:8px; border-radius:50%; background:var(--warn); animation:pulse 1.2s infinite; }
.guide-banner.is-ready .guide-dot { background:var(--accent); }
@keyframes pulse { 50%{opacity:.35;} }
.countdown {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Syne",sans-serif; font-size:7rem; font-weight:800;
  color:var(--accent); text-shadow:0 0 40px rgba(76,157,240,.4);
  background:rgba(16,16,20,.25);
}

/* ══════════════════ TOAST + LIGHTBOX + SPINNER ══════════════════ */
.toast {
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:9px 16px; border-radius:9px; font-size:.8rem; max-width:90%;
  z-index:50; box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.toast.err { border-color:var(--danger); }
.lightbox {
  position:fixed; inset:0; background:rgba(10,10,13,.94);
  display:none; align-items:center; justify-content:center; z-index:100;
}
.lightbox:not([hidden]) { display:flex; }
.lightbox img { max-width:92vw; max-height:92vh; object-fit:contain; border-radius:8px; }
.lightbox-close {
  position:absolute; top:18px; right:22px;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  width:36px; height:36px; border-radius:50%; font-size:.88rem; cursor:pointer;
}
.spinner { width:30px; height:30px; border:3px dotted var(--accent); border-radius:50%; animation:spin 1.4s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }
.tiny { font-size:.7rem; color:var(--muted); }
.server-status { display:flex; align-items:center; gap:7px; font-size:.76rem; color:var(--muted); }
.server-dot { width:8px; height:8px; border-radius:50%; }
.server-dot.on  { background:var(--accent); }
.server-dot.off { background:var(--danger); }
.req,.opt { font-size:.6rem; font-weight:500; padding:2px 6px; border-radius:999px; margin-left:4px; text-transform:uppercase; letter-spacing:.04em; }
.req { background:rgba(76,157,240,.12); color:var(--accent); }
.opt { background:rgba(143,141,160,.15); color:var(--muted); }

@media(max-width:900px){
  html,body{overflow:auto;}
  .app-layout{grid-template-columns:1fr;height:auto;}
  .panel-left,.panel-right{height:auto;overflow:visible;}
  .dual-view{grid-template-columns:1fr;height:auto;}
  .dual-pane{min-height:50vh;}
  .lib-scroll{max-height:40vh;}
}

/* placeholder overlay — semi-transparent so sample image shows through */
.turntable .pane-empty {
  position: absolute; inset: 0;
  background: rgba(16, 16, 20, 0.55);
  z-index: 5;
}
.reveal .pane-empty {
  position: absolute; inset: 0;
  background: rgba(16, 16, 20, 0.0);  /* fully transparent — image IS the placeholder */
  z-index: 5; pointer-events: none;
}
/* Keep overlay text white in Light Mode */
[data-theme="light"] .reveal-tag,
[data-theme="light"] .pane-empty p {
    color: #fff;
}

[data-theme="light"] .pane-empty span {
    color: rgba(255, 255, 255, 0.75);
}