:root{
  --bg:#0b0b12;
  --fg:#e9ecf1;
  --muted:#a8b0bd;
  --acc1:#64ffda;
  --acc2:#4ea8de;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}

.app-bg{
  position:fixed; inset:0;
  background:linear-gradient(180deg,#0b0b12 0%, #12121a 100%);
  z-index:-1;
}

.wrap{
  max-width:780px;
  margin:0 auto;
  padding:24px 20px;
}

.app-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo-dot{ width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg,var(--acc1),var(--acc2));
  box-shadow:0 0 6px var(--acc1);
}
.brand-title{ font-weight:700; font-size:24px; margin:0; }
.live-pill{ background:linear-gradient(135deg,var(--acc1),var(--acc2)); color:#fff; font-size:12px; padding:5px 10px; border-radius:999px; font-weight:600; text-transform:uppercase; }
.status-dot{ width:8px; height:8px; border-radius:50%; background:#3ddc84; box-shadow:0 0 8px #3ddc84aa; }

.artwork-card{
  display:flex; justify-content:center;
  background:#131624;
  border-radius:20px;
  padding:20px;
}
.artwork-card img{
  width:min(80vw,520px);
  height:min(80vw,520px);
  object-fit:cover;
  border-radius:16px;
}

.meta-block{ text-align:center; margin-top:16px; }
.title{ font-weight:700; font-size:22px; margin-bottom:4px; }
.byline{ color:var(--muted); font-size:14px; }
.byline .dot{ margin:0 6px; opacity:.5; }
.rating-line{ color:var(--muted); font-size:14px; margin-top:8px; }

/* -------------------------------------------------
   BUTTONS — centered, rectangular (no rounding),
   equal size, 5% side padding on the row container
-------------------------------------------------- */
.controls{ margin-top:24px; }

/* The row itself is centered with margin:auto and has 5% side padding */
.button-row{
  width:100%;
  max-width:600px;       /* keeps a nice width on desktop */
  margin:0 auto;         /* centers the row */
  padding:0 5%;          /* exactly 5% space on each side */
  display:grid;
  grid-template-columns: 1fr 1fr;  /* two equal columns */
  gap:14px;
}

/* Rectangular buttons that fill their grid cell equally */
.rect-btn{
  width:100%;
  height:56px;           /* fixed height => rectangle */
  border:none;
  border-radius:0;       /* square corners */
  background:#1b1e2a;
  color:var(--fg);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, transform .06s ease;
}
.rect-btn:hover{ background:#23273a; }
.rect-btn:active{ transform: scale(.985); }