/* ===== base theme ===== */
:root{
  --bg:#0f1115;
  --ink:#e7eaf0;
  --card:#151922;
  --ring:#263043;

  /* unified sizing */
  --section-max-w: 95%;   /* header, app, footer, media share this width cap */
  --media-max-h: 75vh;    /* snaps/vids height cap */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding:16px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}
a{color:inherit}
img,video{display:block;max-width:100%}

/* ===== global section caps (no HTML changes needed) ===== */
header,
.app,
footer,
.media-wrap{
  max-width: var(--section-max-w);
  margin-inline: auto;     /* center all capped sections */
}

/* app shell */
.app{width:100%}
.panel{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:12px;
  padding:12px;
}

/* toolbar + buttons */
.toolbar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.toolbar .spacer{display:none}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.4rem .7rem;
  border:1px solid #3b4763;
  border-radius:8px;
  background:#1a2030;
  cursor:pointer;
  text-decoration:none;
  user-select:none;
  min-width:90px;
}
.btn:active{transform:none}
.btn.active{
  background:#0b5ed7;
  border-color:#0b5ed7;
  color:#fff;
  font-weight:600;
}
.badge{
  background:#22314f;
  border:1px solid #3b4763;
  border-radius:999px;
  padding:.2rem .5rem;
  font-size:.9rem;
}

/* viewer */
.viewer{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  align-items:center;
}
.controls{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;
}

/* snaps & videos container */
.media-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  max-height: var(--media-max-h); /* vertical cap */
}

/* keep media inside container */
.viewer img,
.viewer video,
.viewer canvas{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:8px;
  background:#000;
}

/* canvas-mode: show canvas; hide native video */
.canvas-mode [data-video]{display:none !important}
.canvas-mode [data-canvas]{display:block !important}

/* lists */
.list{list-style:none;margin:0;padding:0}
.list li{
  padding:.25rem .2rem;
  border-bottom:1px solid #2a344b;
}
.list li.active{background:#1b2335}
.list.columns{column-width:260px;column-gap:14px}
.list.columns li{break-inside:avoid}

/* small screens */
@media (max-width:800px){
  .btn{min-width:72px}
  .list.columns{column-width:200px}
}

/* fixed-width buttons to avoid layout shift */
.toolbar{justify-content:center;gap:.5rem;flex-wrap:wrap}
.toolbar .btn{flex:0 0 140px;text-align:center;font-weight:600}
.toolbar .btn.active{background:#0b5ed7;border-color:#0b5ed7;color:#fff}