@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');
:root {
  color-scheme: dark;
  --bg: #161226;
  --surface: #221b3a;
  --border: rgba(216,190,255,0.16);
  --text: #ece6f7;
  --muted: #9d90bd;
  --accent: #4caf82;
  --danger: #e05252;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 15px/1.5 'DM Sans', system-ui, sans-serif; }
button, input { font: inherit; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card, .metadata-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.card { width: min(420px, 100%); padding: 28px; }
.eyebrow { color: var(--accent); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; }
h1, h2 { margin: 0 0 12px; }
h2 { font-size: 17px; }
.muted { color: var(--muted); }
.error { color: var(--danger); }
label { display: block; margin: 16px 0 6px; }
input { width: 100%; background: #2c2450; color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 10px; }
button { margin-top: 20px; border: 0; border-radius: 7px; padding: 9px 14px; background: var(--accent); color: #07150f; cursor: pointer; }
button.secondary { margin: 0; background: transparent; border: 1px solid var(--border); color: var(--text); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--surface); }
.actor, .actor form { display: flex; align-items: center; gap: 12px; }
.main { max-width: 1000px; margin: 0 auto; padding: 36px 24px; }
.metadata-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 24px; }
.metadata-card { padding: 18px; }
.fingerprint { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.small { font-size: 13px; }
.rotate-link { display: inline-block; margin-top: 14px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 7px; color: var(--accent); text-decoration: none; }
.rotate-link:hover { border-color: var(--accent); }
.button-link { display: inline-block; margin-top: 20px; padding: 9px 14px; border-radius: 7px; background: var(--accent); color: #07150f; text-decoration: none; }
.button-link.secondary-link { margin-top: 10px; background: transparent; border: 1px solid var(--border); color: var(--text); }