/* ═══════════════════════════════════
   MURMURES TCG — layout.css
   ═══════════════════════════════════ */
#app { display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }

/* ── TOPBAR ── */
#topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; height:54px; flex-shrink:0;
  background:rgba(6,4,2,.98);
  border-bottom:1px solid rgba(201,168,76,.12);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  z-index:100; gap:14px;
}

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

/* ── CENTER ── */
#center {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse at 35% 35%, rgba(201,168,76,.05) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 65%, rgba(180,80,40,.03) 0%, transparent 50%),
    linear-gradient(160deg, #110c08 0%, #080604 100%);
}
.center-grid {
  position:absolute; inset:0; opacity:.03; pointer-events:none;
  background-image:
    linear-gradient(rgba(201,168,76,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,1) 1px, transparent 1px);
  background-size:40px 40px;
}
#preview-wrap { position:relative; z-index:2; }
#preview-meta {
  display:flex; align-items:center; gap:12px; margin-top:18px; z-index:2;
  background:rgba(255,255,255,.025); border:1px solid rgba(201,168,76,.1);
  border-radius:8px; padding:7px 20px; flex-wrap:wrap;
}

/* ── SIDEBARS ── */
#sidebar-left {
  width:212px; min-width:212px; flex-shrink:0;
  background:var(--sidebar-bg); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
#sidebar-right {
  width:280px; min-width:280px; flex-shrink:0;
  background:var(--sidebar-bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
#rside-content { overflow-y:auto; flex:1; padding:14px 18px; }
#card-list     { overflow-y:auto; flex:1; padding:6px; }

/* ── STRIP ── */
#bottom-strip {
  height:100px; flex-shrink:0;
  background:rgba(4,3,2,.98); border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px; padding:0 22px;
  overflow-x:auto; overflow-y:hidden;
}
#strip-cards { display:flex; align-items:center; gap:9px; }

/* ── EXPORT OVERLAY ── */
#export-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; backdrop-filter:blur(8px);
}
.export-modal {
  display:flex; flex-direction:column; align-items:center; gap:16px;
  background:rgba(13,10,8,.95); border:1px solid rgba(201,168,76,.3);
  border-radius:16px; padding:40px 50px;
  box-shadow:0 0 60px rgba(201,168,76,.2);
}
.export-spinner {
  width:40px; height:40px; border-radius:50%;
  border:2px solid rgba(201,168,76,.2);
  border-top-color:#c9a84c;
  animation:spin 1s linear infinite;
}
.export-label { font-family:var(--font-cinzel); font-size:13px; letter-spacing:.15em; color:#fde68a; }
.export-sub   { font-family:var(--font-cinzel); font-size:9px;  letter-spacing:.12em; color:rgba(201,168,76,.45); }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:115px; left:50%;
  transform:translateX(-50%) translateY(16px);
  background:rgba(16,185,129,.9); color:#ecfdf5;
  font-family:var(--font-cinzel); font-size:10px; letter-spacing:.15em;
  padding:10px 24px; border-radius:8px;
  opacity:0; pointer-events:none; z-index:9998;
  transition:all .3s ease; white-space:nowrap; backdrop-filter:blur(8px);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── RESPONSIVE ── */
@media (max-width:1000px) { .filter-row { display:none !important; } }
@media (max-width:720px)  { #sidebar-left { display:none !important; } }