:root{
  --bg: #0b0b0f;
  --fg: #e6e6e6;
  --muted: rgba(255,255,255,0.65);
  --card: #0f1115;
  --accent: #66aaff;
  --header-bg: rgba(255,255,255,0.03);
  --shadow: rgba(0,0,0,0.6);
  --border: rgba(255,255,255,0.06);
}

/* explicit light override when data-theme="light" on html */
:root[data-theme='light']{
  --bg: #ffffff;
  --fg: #111111;
  --muted: rgba(0,0,0,0.6);
  --card: #ffffff;
  --accent: #0b84ff;
  --header-bg: rgba(0,0,0,0.03);
  --shadow: rgba(16,24,40,0.04);
  --border: rgba(0,0,0,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, Arial, sans-serif;
  margin:0;padding:0;
  transition: background-color 160ms ease, color 160ms ease;
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem;
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
}
.header-actions{display:flex;gap:.5rem;align-items:center}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.files li{
  margin:.5rem 0;
  background:var(--card);
  padding:.5rem;
  border-radius:6px;
  box-shadow:0 1px 2px var(--shadow);
  border:1px solid var(--border);
}

.theme-toggle{
  background:var(--card);
  color:var(--fg);
  border:1px solid var(--border);
  padding:.4rem .6rem;
  border-radius:6px;
  cursor:pointer;
}
.btn{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius:6px;
  text-decoration:none;
}
.btn.secondary{
  background:transparent;
  color:var(--fg);
  border:1px solid var(--border);
}
.small{color:var(--muted);font-size:.9rem}