*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f7f7f9;color:#111;font-size:14px}
.hidden{display:none!important}
html[data-auth="out"] .topbar{display:none!important}
html[data-auth="in"] #login{display:none!important}
.topbar{display:flex;align-items:center;gap:24px;padding:12px 24px;background:#0f766e;color:#fff}
.brand{font-weight:700;font-size:16px}
.tag{font-size:11px;background:rgba(255,255,255,.2);padding:2px 6px;border-radius:4px;margin-left:6px}
.topbar nav{display:flex;gap:16px;flex:1}
.topbar nav a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:4px;cursor:pointer}
.topbar nav a.active{background:rgba(255,255,255,.18)}
.me{font-size:12px;opacity:.9}
/* Topbar user menu */
.user-menu{position:relative}
.user-btn{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-weight:500}
.user-btn:hover{background:rgba(255,255,255,.22)}
.user-btn .chev{font-size:10px;opacity:.75}
.user-dropdown{position:absolute;top:100%;right:0;margin-top:6px;background:#fff;color:#111;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.18);min-width:220px;z-index:40;overflow:hidden}
.user-dropdown-header{padding:10px 14px;font-size:12px;color:#6b7280;background:#f9fafb;border-bottom:1px solid #eee;word-break:break-all}
.user-dropdown button{display:block;width:100%;text-align:left;background:transparent;color:#111;border:none;padding:10px 14px;font-size:13px;font-weight:500;cursor:pointer;min-height:auto}
.user-dropdown button:hover{background:#f3f4f6}
.user-dropdown button[data-user-action="logout"]{border-top:1px solid #eee;color:#b91c1c}
main{padding:24px;max-width:1100px;margin:0 auto}
.view{background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card{background:#fff;border-radius:8px;padding:24px;max-width:420px;margin:60px auto;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.row{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
h2{font-size:18px;font-weight:600}
h3{font-size:16px;margin-bottom:16px}
.muted{color:#666;font-size:13px}
label{display:block;margin-bottom:12px;font-size:13px;color:#333}
input,select{width:100%;padding:8px 10px;border:1px solid #d4d4d8;border-radius:6px;font-size:14px;margin-top:4px}
button{background:#0f766e;color:#fff;border:none;padding:9px 16px;border-radius:6px;font-weight:600;cursor:pointer;font-size:13px}
button.ghost{background:transparent;color:#666;border:1px solid #d4d4d8}
button:hover{opacity:.9}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #eee;font-size:13px}
th{background:#fafafa;font-weight:600;color:#555}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:10}
form{display:flex;flex-direction:column;gap:8px}
.pill{display:inline-block;background:#eef2ff;color:#3730a3;font-size:11px;padding:2px 8px;border-radius:10px;margin:1px 2px}
.status{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600}
.status.s-active{background:#dcfce7;color:#166534}
.status.s-invited{background:#fef3c7;color:#92400e}
.status.s-disabled{background:#fee2e2;color:#991b1b}
/* Membership tick-list */
.mem-list{border:1px solid #e5e5e5;border-radius:6px;max-height:340px;overflow-y:auto;background:#fff}
.mem-row{padding:10px 12px;border-bottom:1px solid #eee;background:#fff;transition:background .15s}
.mem-row:last-child{border-bottom:none}
.mem-row.enabled{background:#f0fdfa}
.mem-check{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;color:#111;cursor:pointer;margin:0;padding:0}
.mem-check .muted{font-weight:400}
.mem-roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-left:26px}
.mem-roles .role-pick{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:400;color:#555;cursor:pointer;margin:0;padding:5px 10px;border-radius:14px;border:1px solid #e5e5e5;background:#fff;transition:all .1s;line-height:1}
.mem-roles .role-pick:hover{background:#f5f5f5;border-color:#d4d4d4}
.mem-roles .role-pick:has(input:checked){background:#ccfbf1;color:#0f766e;font-weight:600;border-color:#5eead4}
.mem-roles .role-pick:has(input:disabled){opacity:.4;cursor:not-allowed;background:#fafafa}

/* Native checkbox reset — the global "input,select{width:100%;padding:8px 10px}"
   was making these boxes stretch and misalign. High-specificity override keeps
   them a fixed 15×15 tick that flex-centers cleanly with the label text. */
#modal-user .mem-check input[type=checkbox],
#modal-user .mem-roles .role-pick input[type=checkbox]{
  width:15px;height:15px;
  padding:0;margin:0;border:none;box-shadow:none;background:transparent;
  flex:none;appearance:auto;-webkit-appearance:auto;
  accent-color:#0f766e;cursor:pointer;vertical-align:middle;
}
#login-form,#otp-form{flex-direction:row;gap:8px;margin-top:12px}
#login-form input,#otp-form input{flex:1}

/* Responsive rules for the admin panel. */
main table{width:100%}
.view{overflow-x:auto}
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
  .topbar nav { order: 10; width: 100%; overflow-x: auto; gap: 4px; -webkit-overflow-scrolling: touch; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  main { padding: 14px 10px; }
}
@media (max-width: 640px) {
  h2 { font-size: 15px; }
  .row { flex-direction: column; align-items: stretch; }
  .modal { padding: 0; align-items: stretch; }
  .modal .card { max-width: 100%; border-radius: 0; margin: 0; min-height: 100vh; overflow-y: auto; }
  .grid2 { grid-template-columns: 1fr; }
  #login-form, #otp-form { flex-direction: column; }
  #users-table, #companies-table, #secrets-table { font-size: 12px; min-width: 640px; }
  #users-table th, #users-table td { padding: 6px 4px; }
  .mem-roles { flex-direction: column; align-items: stretch; padding-left: 24px; }
  .mem-roles .role-pick { justify-content: flex-start; }
  button { min-height: 40px; padding: 10px 14px; }
}