:root{
  --bg:#f3f6fa;--surface:#fff;--surface-2:#f7f9fc;--line:#e2e9f2;--line-strong:#cdd7e3;
  --text:#19283d;--muted:#62758b;--brand:#175bc9;--brand-hover:#124ba8;--brand-soft:#e7f0ff;
  --nav:#132338;--nav-text:#b9c7d8;--nav-hover:#1d3150;
  --warn-bg:#fff3d7;--warn-line:#eddab0;--warn-text:#785717;--ok-bg:#e6f4ec;--ok-line:#b9dcc7;--ok-text:#1f5a3a;--danger:#9c3d3d;
  --radius:10px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);font-size:15px;line-height:1.5
}
*{box-sizing:border-box}
[hidden]{display:none!important}  /* class rules such as .app{display:grid} must not override it */
body{margin:0;background:var(--bg)}
button,input,select{font:inherit;color:inherit}
h1{font-size:26px;letter-spacing:-.02em;margin:0 0 6px;line-height:1.2}
h2{font-size:19px;margin:0}
p{color:var(--muted)}
code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px;overflow-wrap:anywhere}
.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:800;color:#51708f;margin-bottom:8px}
.hint{font-size:13px;color:var(--muted)}
.notice{background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-line);border-radius:var(--radius);padding:12px 16px;margin:14px 0;font-size:14px}
.notice.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
.btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:8px 14px;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--surface-2)}
.btn.primary,button.primary{background:var(--brand);border:1px solid var(--brand);color:#fff;border-radius:8px;padding:9px 15px;font-weight:600;cursor:pointer}
.btn.primary:hover,button.primary:hover{background:var(--brand-hover)}
.btn.danger{color:var(--danger)}
.btn.wide{width:100%;padding:11px}
.btn.icon{padding:6px 10px}
.btn:disabled,button:disabled{opacity:.5;cursor:not-allowed}
.link-button{border:0;background:none;color:var(--brand);cursor:pointer;padding:0;font-size:13px}
input,select{width:100%;border:1px solid var(--line-strong);border-radius:8px;padding:9px 11px;background:var(--surface)}
input:focus,select:focus{outline:2px solid #699fea;outline-offset:1px}
label{display:block;font-size:13px;font-weight:650}
label input,label select{margin-top:5px}
.stack{display:grid;gap:14px;margin-top:14px}
.row-end{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:16px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;margin:14px 0;padding:14px;background:var(--surface-2);border-radius:8px}
.facts dt{color:var(--muted)}.facts dd{margin:0;overflow-wrap:anywhere}
.recovery-key,.secret{display:block;font:600 16px ui-monospace,monospace;letter-spacing:.04em;background:var(--surface);border:1px dashed #9fb3cc;border-radius:8px;padding:12px;margin:10px 0;user-select:all;overflow-wrap:anywhere}
.secret{font-size:14px;font-weight:500}
.tag{display:inline-block;border-radius:20px;padding:1px 9px;font-size:12px;font-weight:600;background:#e6edf6;color:#3c526b;white-space:nowrap}
.tag.new{background:var(--warn-bg);color:var(--warn-text)}
.tag.ok{background:var(--ok-bg);color:var(--ok-text)}
.tag.off{background:#f2e3e3;color:var(--danger)}
.mono{font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px}
.muted{color:var(--muted)}

/* Public views (login, invitation, recovery, approval, key setup) and the PRF check page */
.public{max-width:500px;margin:7vh auto;padding:0 16px}
.public-brand{font-weight:800;letter-spacing:.1em;color:#1d3452;margin:0 0 18px 4px}
.public-brand span{font-size:12px;color:#6a7c91}
.panel-card,.login{background:var(--surface);border-radius:18px;padding:32px;box-shadow:0 15px 45px #1d34520d}
#view-login h1{margin-bottom:22px}
#view-login .fallback .hint{margin:14px 0 0}
.fallback{margin-top:16px;font-size:14px}.fallback summary{cursor:pointer;color:var(--muted)}
header .brand{display:block;max-width:1060px;margin:auto;padding:24px 28px;font-weight:800;letter-spacing:.1em;text-decoration:none;color:#1d3452}
header .brand span{font-size:12px;color:#6a7c91}
.login{max-width:500px;margin:4vh auto}
footer{text-align:center;padding:20px;color:#8190a1;font-size:12px}

/* Application shell */
.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
.sidebar{background:var(--nav);color:var(--nav-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:22px 22px 14px;font-weight:800;letter-spacing:.1em;color:#fff;font-size:15px}
.brand small{display:block;font-weight:600;letter-spacing:.08em;color:var(--nav-text);font-size:11px;margin-top:3px}
.nav{list-style:none;margin:0;padding:6px 10px;flex:1;overflow:auto}
.nav-section{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7f93ab;padding:16px 12px 6px}
.nav button{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;color:var(--nav-text);padding:8px 12px;border-radius:8px;cursor:pointer;text-align:left}
.nav button:hover{background:var(--nav-hover);color:#fff}
.nav button[aria-current=page]{background:var(--brand);color:#fff}
.nav svg{width:18px;height:18px;flex-shrink:0}
.nav .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.count{background:#f0b429;color:#3b2a00;font-size:12px;font-weight:700;border-radius:20px;padding:0 8px}
.book-count{font-size:12px;color:#8ea3bc}
.nav button[aria-current=page] .book-count{color:#dce8ff}
.nav .hint{font-size:12px;color:#7f93ab;padding:2px 12px 8px}
.account{border-top:1px solid #22385a;padding:14px 16px;display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:#2a4670;color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}
.account .who{flex:1;min-width:0}.account strong{display:block;color:#fff;font-size:14px;overflow:hidden;text-overflow:ellipsis}.account span{font-size:12px}
.role{display:inline-block;font-size:11px;font-weight:700;background:#f0b429;color:#3b2a00;border-radius:4px;padding:0 6px;margin-left:4px}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:none;align-items:center;gap:12px;padding:10px 16px;background:var(--nav);color:#fff;position:sticky;top:0;z-index:5}
.topbar #topbar-title{color:var(--nav-text)}
.burger{border:0;background:none;color:#fff;cursor:pointer;font-size:22px;padding:2px 6px}
.content{padding:28px 32px 60px;max-width:1280px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head p{margin:4px 0 0}
/* Tables */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:22px}
.toolbar{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.toolbar input[type=search]{flex:1;min-width:200px;max-width:380px}
.toolbar select{width:auto}
.toolbar .spacer,.bulk .spacer{flex:1}
.bulk{display:none;align-items:center;gap:10px;padding:10px 14px;background:var(--brand-soft);border-bottom:1px solid #c9dafa;flex-wrap:wrap}
.bulk.show{display:flex}
.bulk select{width:auto}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{position:sticky;top:0;background:var(--surface-2);text-align:left;font-weight:650;color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
th.nosort{cursor:default}
th .arrow{opacity:.5;margin-left:4px}
td{padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr{cursor:pointer}
tbody tr:hover{background:#f5f9ff}
tbody tr.selected{background:var(--brand-soft)}
tbody tr:last-child td{border-bottom:0}
td.check,th.check{width:38px;padding-right:0;cursor:default}
td.check input,th.check input{width:auto}
.table-foot{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);flex-wrap:wrap}
.empty{padding:40px;text-align:center;color:var(--muted);cursor:default}
/* Drag & drop */
tbody tr[draggable=true]{cursor:grab}
tbody tr.dragging{opacity:.45}
body.dragging .nav button.drop{outline:1px dashed #5d7ba3;outline-offset:-1px}
.nav button.drop.over{background:#2f6fd8;color:#fff;outline:2px solid #9cc0ff}
.drag-ghost{position:fixed;top:-100px;left:-100px;background:var(--brand);color:#fff;font-weight:700;font-size:13px;padding:6px 12px;border-radius:20px}
/* Drawer */
.scrim{position:fixed;inset:0;background:#19283d55;opacity:0;pointer-events:none;transition:opacity .15s;z-index:20}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(460px,100%);background:var(--surface);box-shadow:-10px 0 40px #19283d26;transform:translateX(100%);visibility:hidden;transition:transform .2s,visibility .2s;z-index:21;display:flex;flex-direction:column}
.drawer.open{transform:none;visibility:visible}
.drawer header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer header p{margin:3px 0 0;font-size:13px}
.drawer .body{padding:18px 22px;overflow:auto;flex:1;display:grid;gap:14px;align-content:start}
.drawer footer{display:flex;gap:8px;justify-content:space-between;padding:14px 22px;border-top:1px solid var(--line);text-align:left;color:inherit;font-size:inherit}
.close{border:0;background:none;font-size:24px;cursor:pointer;color:var(--muted);line-height:1}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:#fff;padding:10px 18px;border-radius:8px;opacity:0;transition:all .2s;z-index:30;font-size:14px;max-width:calc(100% - 32px);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.error{background:var(--danger)}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:272px;z-index:22;transform:translateX(-100%);transition:transform .2s}
  .sidebar.open{transform:none}
  .topbar{display:flex}
  .content{padding:18px 16px 50px}
  td.hide-m,th.hide-m{display:none}
  .panel-card,.login{padding:24px}
}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}.chip-x{border:0;background:none;color:inherit;cursor:pointer;padding:0 0 0 4px;font-size:13px}
.inline{display:flex;gap:8px}.inline select{flex:1}
.check-label{display:flex;gap:10px;align-items:flex-start;font-weight:500}.check-label input{width:auto;margin-top:3px}
.admin-left{float:right;letter-spacing:0;text-transform:none;color:#f0b429;font-weight:600}
.notice .secret{margin:10px 0}
/* Online state and connect */
.presence{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);white-space:nowrap}
.presence i{width:10px;height:10px;border-radius:50%;background:#b8c3d1;flex-shrink:0}
.presence.on i{background:#22a35a;box-shadow:0 0 0 3px #22a35a26}.presence.on{color:var(--ok-text);font-weight:600}
.presence.recent i{background:#f0b429}
.presence.unknown i{background:transparent;border:1.5px solid #b8c3d1}
.btn.small{padding:4px 11px;font-size:13px}
td.actions{text-align:right;width:1%}
.connect-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
a.btn.primary{color:#fff;text-decoration:none}
@media (max-width:1400px){td.hide-l,th.hide-l{display:none}}
.logout{border:1px solid #2c4468;background:transparent;color:var(--nav-text);border-radius:8px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.logout:hover{background:var(--nav-hover);color:#fff}.logout svg{width:18px;height:18px}
.row-start{display:flex;gap:8px;flex-wrap:wrap}.stack>label{margin:0}