*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
body{background:#111;color:#d4d4d4;font-family:system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5}
a{color:#60a5fa;text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none !important}

.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;padding:2rem;width:100%;max-width:380px}

h1{font-size:1.2rem;font-weight:600;color:#f0f0f0;margin-bottom:1.5rem}
h2{font-size:1rem;font-weight:600;color:#f0f0f0;margin-bottom:.75rem}
.hint{color:#666;font-size:.875rem;margin-bottom:.75rem}

.field{margin-bottom:1rem}
label{display:block;font-size:.8125rem;color:#888;margin-bottom:.3rem}
input[type=text],input[type=password],select{width:100%;background:#222;border:1px solid #333;border-radius:5px;padding:.5rem .75rem;color:#e0e0e0;font-size:.9375rem;outline:none;transition:border-color .15s}
input:focus,select:focus{border-color:#555}

.btn{display:block;width:100%;padding:.5625rem 1rem;border:none;border-radius:5px;font-size:.9375rem;font-weight:500;cursor:pointer;text-align:center;transition:background .15s}
.btn-primary{background:#2563eb;color:#fff}
.btn-primary:hover{background:#1d4ed8}
.btn-ghost{background:#1e1e1e;color:#bbb;border:1px solid #333}
.btn-ghost:hover{background:#252525;border-color:#444}
.btn-inline{display:inline-block;width:auto;padding:.5rem 1.25rem}
.btn-small{background:transparent;border:1px solid #333;color:#bbb;border-radius:4px;padding:.25rem .625rem;font-size:.8125rem;cursor:pointer}
.btn-small:hover{background:#252525}
.btn-del{border-color:#3d1515;color:#f87171}
.btn-del:hover{background:#1c0d0d}

.divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0;color:#444;font-size:.8125rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:#2a2a2a}

.error{background:#1c0d0d;border:1px solid #4a1515;border-radius:5px;padding:.5rem .75rem;color:#f87171;font-size:.875rem;margin-bottom:1rem}
.error.below{margin-top:.75rem;margin-bottom:0}

.page{max-width:600px;margin:2rem auto;padding:0 1.25rem}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.topbar h1{margin-bottom:0}
.topbar a{color:#666;font-size:.875rem}
.topbar a:hover{color:#999}
.section{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;padding:1.25rem;margin-bottom:1rem}
.row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;padding:.625rem 0;border-bottom:1px solid #222}
.row:last-child{border-bottom:none}
.row form{display:flex;gap:.5rem;align-items:center;min-width:0;max-width:100%}
.row select{width:auto;min-width:0;flex:1 1 auto;padding:.25rem .5rem;font-size:.8125rem}
.row-name{font-weight:500;color:#e0e0e0}
.row-meta{font-size:.8125rem;color:#555;margin-top:.125rem}
.empty{color:#555;text-align:center;padding:1.5rem 0;font-size:.875rem}
#pk-name{max-width:280px}

.persona{display:block;width:100%;text-align:left;background:#222;border:1px solid #333;border-radius:6px;padding:.75rem 1rem;color:#e0e0e0;cursor:pointer;margin-bottom:.5rem;transition:background .15s,border-color .15s}
.persona:hover{background:#2a2a2a;border-color:#555}
.persona-name{display:block;font-weight:500;color:#f0f0f0}
.persona-email{display:block;font-size:.8125rem;color:#888;margin-top:.125rem}
.lock{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;margin-bottom:0;font-size:.8125rem;color:#888;cursor:pointer}
.lock input{accent-color:#2563eb}