:root {
  color-scheme: light dark;
  --bg: #f6f6f6; --fg: #222; --muted: #666; --card: #fff; --border: #ddd; --button: #fff; --button-border: #888;
  --badge: #eee; --mounted: #d6f5d6; --locked: #fde2c8; --absent: #f5d6d6; --warn: #a40000;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a; --fg: #e4e6e9; --muted: #9aa0a6; --card: #1f2226; --border: #34383d; --button: #2a2e33; --button-border: #5a6068;
    --badge: #34383d; --mounted: #1f4d2a; --locked: #5a3a14; --absent: #5c2323; --warn: #ff8a80;
  }
}
body { font-family: system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--fg); }
main { max-width: 46rem; margin: 0 auto; padding: 1rem; }
header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
header form span { margin-right: .5rem; color: var(--muted); font-size: .9rem; }
section.disk { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: .75rem 1rem; margin: 1rem 0; }
section.disk h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.state { font-size: .8rem; padding: .1rem .4rem; border-radius: 4px; background: var(--badge); }
.state-mounted .state { background: var(--mounted); }
.state-locked .state { background: var(--locked); }
.state-absent .state { background: var(--absent); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; margin: 0 0 .5rem; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
label { display: block; margin: .5rem 0 .2rem; }
input[type=email], input[type=password] { width: 100%; max-width: 22rem; padding: .4rem; box-sizing: border-box; }
button, a.button { display: inline-block; margin-top: .5rem; padding: .4rem .9rem; border: 1px solid var(--button-border); border-radius: 4px; background: var(--button); color: inherit; text-decoration: none; cursor: pointer; font: inherit; }
a { color: inherit; }
.warn { color: var(--warn); }