:root{
  --bg:#0f1115; --bg-soft:#161922; --panel:#1c2030; --panel-2:#232838;
  --line:#2c3346; --text:#e7eaf2; --muted:#9aa3b8; --accent:#5b8cff;
  --accent-2:#7c5bff; --danger:#ff5b6e; --ok:#37d399; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 70% -10%, #1b2236 0%, var(--bg) 55%);
  color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.hint{color:var(--muted); font-size:.82rem; margin:.4rem 0 0}
em{font-style:normal; color:var(--text)}

/* top bar */
.topbar{display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.4rem; border-bottom:1px solid var(--line); background:rgba(15,17,21,.6);
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:10}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--text)}
.brand:hover{text-decoration:none}
.brand-mark{display:grid; place-items:center; width:32px; height:32px; border-radius:9px;
  font-weight:800; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 14px rgba(91,140,255,.35)}
.brand-mark.big{width:54px; height:54px; font-size:1.6rem; border-radius:14px; margin:0 auto}
.brand-name{font-weight:500; letter-spacing:.2px}
.topnav{display:flex; align-items:center; gap:1.1rem}
.topnav .who{color:var(--muted); font-size:.9rem}
.btn-ghost{border:1px solid var(--line); padding:.4rem .8rem; border-radius:9px; color:var(--text)}
.btn-ghost:hover{border-color:var(--accent); text-decoration:none}

.wrap{max-width:1040px; margin:0 auto; padding:2rem 1.4rem 4rem}

/* auth */
.auth-page{display:flex}
.auth-wrap{flex:1; display:grid; place-items:center; padding:2rem}
.auth-card{width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:2rem 1.8rem; box-shadow:0 20px 60px rgba(0,0,0,.4)}
.auth-head{text-align:center; margin-bottom:1.4rem}
.auth-head h1{font-size:1.25rem; margin:.9rem 0 .2rem}
.auth-form{display:flex; flex-direction:column; gap:.9rem}
.auth-form label,.row-form label{display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; color:var(--muted)}
.auth-form input,.row-form input[type=text],.row-form input[type=email],.row-form input[type=password]{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:.7rem .8rem;
  color:var(--text); font-size:.95rem; width:100%}
input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,140,255,.18)}
.auth-foot{text-align:center; margin-top:1.1rem; font-size:.9rem}
.hint{font-weight:400}

.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:0;
  padding:.7rem 1.1rem; border-radius:10px; font-weight:600; font-size:.95rem; cursor:pointer}
.btn-primary:hover{filter:brightness(1.07)}
.alert{background:rgba(255,91,110,.12); border:1px solid rgba(255,91,110,.4); color:#ffb3bd;
  padding:.7rem .9rem; border-radius:10px; font-size:.9rem; margin-bottom:1rem}

/* dashboard */
.dash-head{margin-bottom:1.6rem}
.dash-head h1{font-size:1.6rem; margin:0 0 .3rem}
.tile-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem}
.tile{display:flex; gap:.9rem; align-items:center; padding:1.1rem; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); color:var(--text); transition:.15s}
.tile:hover{text-decoration:none; transform:translateY(-2px); border-color:var(--accent);
  box-shadow:0 12px 30px rgba(0,0,0,.35)}
.tile-pending{opacity:.6}
.tile-pending:hover{transform:none; border-color:var(--line); cursor:default}
.tile-icon{font-size:1.7rem; width:46px; height:46px; display:grid; place-items:center;
  background:var(--panel-2); border-radius:11px; flex:none}
.tile-body{display:flex; flex-direction:column; gap:.2rem}
.tile-name{font-weight:600; display:flex; align-items:center; gap:.5rem}
.tile-tag{color:var(--muted); font-size:.85rem}
.chip{font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; font-weight:700;
  background:rgba(91,140,255,.18); color:#bcd0ff; padding:.12rem .42rem; border-radius:999px}
.chip-muted{background:var(--panel-2); color:var(--muted)}
.empty{text-align:center; padding:4rem 1rem; color:var(--muted)}

/* panels + forms */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; margin-bottom:1.4rem}
.panel h2{margin:0 0 .3rem; font-size:1.05rem}
.row-form{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-top:.9rem}
.row-form input{min-width:170px}
.inline-check{display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.9rem}

/* users table */
.users-table{width:100%; border-collapse:collapse; font-size:.9rem}
.users-table th{text-align:left; color:var(--muted); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.4px; padding:.6rem .6rem; border-bottom:1px solid var(--line)}
.users-table td{padding:.7rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle}
.u-name{font-weight:600}
.u-email{color:var(--muted); font-size:.82rem}
.appchips{display:flex; flex-wrap:wrap; gap:.35rem; max-width:360px}
.appchip{font-size:.74rem; padding:.25rem .55rem; border-radius:999px; cursor:pointer;
  background:transparent; border:1px dashed var(--line); color:var(--muted)}
.appchip.on{background:rgba(91,140,255,.18); border:1px solid var(--accent); color:#cfe0ff}
.appchip.admin{background:rgba(124,91,255,.22); border-color:var(--accent-2); color:#dcd2ff}
.actions{white-space:nowrap; display:flex; gap:.4rem}
.btn-mini{background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:.35rem .6rem; border-radius:8px; font-size:.78rem; cursor:pointer}
.btn-mini:hover{border-color:var(--accent)}
.btn-mini.danger:hover{border-color:var(--danger); color:#ffb3bd}

/* toggle switch */
.switch{position:relative; display:inline-block; width:38px; height:22px}
.switch input{opacity:0; width:0; height:0}
.switch span{position:absolute; inset:0; background:var(--panel-2); border:1px solid var(--line);
  border-radius:999px; transition:.15s; cursor:pointer}
.switch span:before{content:""; position:absolute; width:16px; height:16px; left:2px; top:2px;
  background:var(--muted); border-radius:50%; transition:.15s}
.switch input:checked+span{background:rgba(55,211,153,.25); border-color:var(--ok)}
.switch input:checked+span:before{transform:translateX(16px); background:var(--ok)}
.switch input:disabled+span{opacity:.5; cursor:not-allowed}

/* Show/hide password toggle */
.pw-field{position:relative; display:block}
.pw-field input{padding-right:3.6rem}
.pw-toggle{position:absolute; top:0; right:.5rem; height:100%; display:flex; align-items:center;
  background:none; border:0; padding:0 .25rem; cursor:pointer; color:var(--muted);
  font-size:.78rem; font-weight:600}
.pw-toggle:hover{color:var(--text)}
.pw-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* magic-link: "or" divider + full-width ghost button */
.or-sep{display:flex; align-items:center; text-align:center; color:var(--muted);
  font-size:.78rem; margin:.5rem 0}
.or-sep::before,.or-sep::after{content:""; flex:1; height:1px; background:var(--line)}
.or-sep span{padding:0 .7rem}
.btn-block{width:100%; justify-content:center; text-align:center; background:transparent;
  cursor:pointer; font:inherit; font-weight:600}