/* sign-in gate and the signed-in user menu (hosted version only) */
:root { --g-navy: #1C2033; --g-blue: #185FA5; --g-bg: #F4F6F9; --g-line: #DCE1E8; --g-fg: #1C2033; --g-fg2: #4A5568; --g-card: #fff; }
@media (prefers-color-scheme: dark) { :root { --g-bg: #11141C; --g-line: #2B3242; --g-fg: #E6EAF2; --g-fg2: #B3BCCB; --g-card: #181C27; --g-blue: #6AA9E8; } }
body:not(.db-ok) > :not(#db-gate):not(script):not(style):not(link) { display: none !important; }
#db-gate { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: var(--g-bg); color: var(--g-fg); font: 15px/1.5 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; overflow: auto; z-index: 10; }
.g-card { width: min(440px, 100%); display: grid; gap: 16px; justify-items: center; text-align: center; }
.g-brand { font-weight: 600; font-size: 22px; color: var(--g-fg); }
.g-brand small { display: block; font-weight: 400; font-size: 13px; color: var(--g-fg2); }
#g-msg { color: var(--g-fg2); }
#g-msg b { color: var(--g-fg); }
.g-row { margin-top: 14px; }
.g-btn { font: inherit; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--g-line); background: var(--g-card); color: var(--g-fg); cursor: pointer; }
.g-btn:hover { border-color: var(--g-blue); }
.db-user { display: flex; align-items: center; gap: 12px; margin-left: 12px; font-size: 13px; white-space: nowrap; }
.db-user a { color: inherit; }
.db-user button { font: inherit; background: none; border: 1px solid currentColor; border-radius: 6px; color: inherit; padding: 3px 10px; cursor: pointer; opacity: .85; }
.db-user button:hover { opacity: 1; }
@media (max-width: 700px) { .db-user span { display: none; } }

/* Users page */
body.users-page { margin: 0; background: var(--g-bg); color: var(--g-fg); font: 14px/1.5 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.u-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #1C2033; color: #E8EEF7; }
.u-brand { font-weight: 600; font-size: 16px; } .u-brand small { font-weight: 400; opacity: .7; margin-left: 6px; }
.u-spacer { flex: 1; }
.u-main { max-width: 1100px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
.u-card { background: var(--g-card); border: 1px solid var(--g-line); border-radius: 8px; padding: 16px; min-width: 0; }
.u-card h1 { font-size: 20px; margin: 0 0 6px; } .u-card h2 { font-size: 16px; margin: 0 0 6px; }
.u-note { color: var(--g-fg2); margin: 0 0 12px; }
.u-filters { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.u-tablewrap { overflow-x: auto; }
.u-table { width: 100%; border-collapse: collapse; }
.u-table th, .u-table td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--g-line); vertical-align: middle; white-space: nowrap; }
.u-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--g-fg2); font-weight: 600; }
.u-table td.u-wrap { white-space: normal; min-width: 160px; }
.u-table tr.pending td { background: rgba(250, 238, 218, .5); }
.u-table select, .u-table input, .u-add input, .u-add select { font: inherit; padding: 5px 8px; border: 1px solid var(--g-line); border-radius: 6px; background: var(--g-card); color: var(--g-fg); }
.u-table input { width: 100%; box-sizing: border-box; }
.u-add { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.u-add label { display: grid; gap: 4px; font-size: 12px; color: var(--g-fg2); }
.u-add label.u-check { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.u-btn { font: inherit; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--g-line); background: var(--g-card); color: var(--g-fg); cursor: pointer; }
.u-btn.primary { background: var(--g-blue); border-color: var(--g-blue); color: #fff; }
.u-btn.sm { padding: 3px 10px; font-size: 13px; }
.u-msg { color: var(--g-fg2); margin: 6px 0; min-height: 1em; }
.u-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: var(--g-bg); border: 1px solid var(--g-line); }