/* Minimal dark/gray theme */
:root{
  --bg: #121212;
  --panel: #1e1e1e;
  --muted: #2a2a2a;
  --text: #e5e5e5;
  --subtext: #bdbdbd;
  --accent: #9e9e9e;
  --ok: #4caf50;
  --warn: #f44336;
}
*{ box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
.container { max-width: 920px; margin: 40px auto; padding: 0 16px; }
.card { background: var(--panel); border: 1px solid var(--muted); border-radius: 16px; padding: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
h1, h2, h3 { margin: 0 0 12px; }
.row { display:flex; gap:16px; flex-wrap:wrap; }
label { display:block; margin: 12px 0 6px; color: var(--subtext); font-size: 14px; }
input[type="text"], input[type="password"], input[type="url"], input[type="search"] , textarea, select{
  width:100%; padding:12px; border-radius:12px; border:1px solid var(--muted); background:#161616; color:var(--text);
}
.checkbox { display:flex; align-items:center; gap:10px; margin: 10px 0; }
.btn { display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid var(--muted); background:#181818; color:var(--text); cursor:pointer; font-weight:600; }
.btn:hover { background:#222; }
.btn.primary { background:#2b2b2b; }
.btn.success { background:#203a25; border-color:#2e7d32; }
.btn.warn { background:#3a2020; border-color:#d32f2f; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; background:#222; border:1px solid var(--muted); color: var(--subtext); font-size:12px; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:10px 8px; border-bottom:1px solid var(--muted); font-size:14px;}
.table th { text-align:left; color: var(--subtext); font-weight:600; }
.cover { width: 220px; height: 220px; object-fit: cover; border-radius: 14px; border:1px solid var(--muted); }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.notice { padding:10px 12px; border:1px dashed var(--muted); border-radius:12px; background:#141414; color:var(--subtext); }
.footer { margin-top: 18px; color: var(--subtext); font-size: 12px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
hr { border:none; border-top:1px solid var(--muted); margin:16px 0; }
.center { text-align:center; }

/* Audio player styling */
.audio {
  width: 100%;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid var(--muted);
  background: #121212;
  outline: none;
  height: 40px;
}
audio::-webkit-media-controls-panel { background: #1e1e1e; }
audio::-webkit-media-controls-enclosure { border-radius: 12px; }