:root{
  --bg:#000;
  --fg:#fff;
  --muted: #000000;
  --card-bg: rgba(255,255,255,0.00
                 );
  --accent: #fff;
}

*{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,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* Centered single-card layout that fits a single viewport height */
#app{
  width:100%;
  max-width:720px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 48px);
}

.card{
  width:100%;
  padding:20px;
  border-radius:12px;
  background:var(--card-bg);
  box-shadow:0 6px 18px rgba(0,0,0,0.6);
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Typography */
.line{font-size:18px; margin:0}
.muted{color:var(--muted); margin:0; font-size:13px}

/* Actions */
.actions{
  display:flex;
  gap:10px;
  margin-top:6px;
}
button{
  background:transparent;
  border:1px solid rgba(255,255,255,0.12);
  color:var(--fg);
  padding:10px 12px;
  border-radius:8px;
  min-height:44px;
  min-width:88px;
  font-size:14px;
  cursor:pointer;
}
button:active{transform:translateY(1px)}
button[aria-pressed="true"]{
  background:var(--accent);
  color:var(--bg);
  border-color:transparent;
}

/* Inverted theme (only toggled by JS) */
.inverted{
  --bg: #fff;
  --fg: #000;
  --muted: #333;
  --card-bg: rgba(0,0,0,0.03);
  --accent: #000;
}