:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --panel: rgba(255,255,255,.78);
  --solid: #fff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --hairline: rgba(0,0,0,.08);
  --blue: #0071e3;
  --green: #2f9e44;
  --shadow: 0 16px 45px rgba(0,0,0,.07);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg:#101012; --panel:rgba(30,30,32,.82); --solid:#1c1c1e; --text:#f5f5f7; --muted:#a1a1a6; --hairline:rgba(255,255,255,.1); --shadow:0 20px 50px rgba(0,0,0,.32); }
}
* { box-sizing: border-box; }
body { margin:0; background:radial-gradient(circle at 65% -10%, rgba(0,113,227,.11), transparent 35%),var(--bg); color:var(--text); min-height:100vh; }
button,a { font:inherit; }
button { color:inherit; }
.shell { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh; }
.sidebar { display:flex; flex-direction:column; padding:28px 16px 20px; border-right:1px solid var(--hairline); background:rgba(255,255,255,.32); backdrop-filter:blur(24px); }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; padding:0 12px 28px; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:#fff; background:linear-gradient(145deg,#111,#515154); box-shadow:0 6px 16px rgba(0,0,0,.18); }
.tenant-switch { display:flex; align-items:center; justify-content:space-between; text-align:left; border:1px solid var(--hairline); background:var(--panel); border-radius:14px; padding:11px 12px; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.tenant-switch:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.tenant-switch small { display:block; color:var(--muted); font-size:11px; margin-bottom:3px; }
.tenant-switch strong { font-size:13px; }
.chevron { color:var(--muted); font-size:18px; }
.nav { display:grid; gap:4px; margin-top:28px; }
.nav-item { display:block; text-decoration:none; color:var(--muted); border-radius:10px; padding:10px 12px; font-size:14px; transition:background .18s ease,color .18s ease,transform .18s ease; }
.nav-item:hover { color:var(--text); background:rgba(127,127,127,.1); transform:translateX(2px); }
.nav-item.active { color:var(--text); background:var(--solid); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.sidebar-bottom { margin-top:auto; display:grid; gap:10px; }
.version { padding:0 12px; color:var(--muted); font-size:11px; }
.main { min-width:0; max-width:1440px; width:100%; margin:auto; padding:42px clamp(24px,5vw,72px); }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; }
.eyebrow { color:var(--muted); font-size:11px; letter-spacing:.14em; }
h1 { margin:6px 0 0; font-size:34px; letter-spacing:-.045em; line-height:1; }
.top-actions { display:flex; align-items:center; gap:12px; }
.icon-button,.avatar { border:0; background:var(--solid); width:36px; height:36px; border-radius:50%; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.07); }
.avatar { background:#1d1d1f; color:#fff; font-size:13px; }
.view { animation:viewIn .34s cubic-bezier(.2,.8,.2,1); }
@keyframes viewIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.grid { display:grid; gap:16px; }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card { background:var(--panel); border:1px solid var(--hairline); border-radius:20px; padding:22px; box-shadow:var(--shadow); backdrop-filter:blur(20px); }
.metric-label { color:var(--muted); font-size:13px; }
.metric-value { margin-top:12px; font-size:29px; letter-spacing:-.05em; }
.metric-foot { margin-top:10px; color:var(--green); font-size:12px; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.section-head h2 { margin:0; font-size:19px; letter-spacing:-.03em; }
.button { border:0; border-radius:999px; background:var(--blue); color:white; padding:10px 17px; cursor:pointer; font-size:13px; transition:transform .2s ease,filter .2s ease; }
.button:hover { transform:translateY(-1px); filter:brightness(1.08); }
.button.secondary { background:rgba(127,127,127,.12); color:var(--text); }
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table th,.table td { text-align:left; padding:14px 0; border-bottom:1px solid var(--hairline); }
.table th { color:var(--muted); font-weight:500; font-size:12px; }
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; background:rgba(47,158,68,.12); color:var(--green); padding:5px 9px; font-size:11px; }
.empty { padding:44px 0; text-align:center; color:var(--muted); }
.toast { position:fixed; left:50%; bottom:26px; translate:-50% 20px; opacity:0; pointer-events:none; background:#1d1d1f; color:#fff; border-radius:999px; padding:11px 16px; font-size:13px; transition:opacity .2s ease,translate .2s ease; }
.toast.show { opacity:1; translate:-50% 0; }
.muted-copy { color:var(--muted); line-height:1.7; font-size:14px; }
.pill-error { background:rgba(214,55,55,.12); color:#d63737; }
.small-button { padding:6px 11px; font-size:12px; text-decoration:none; display:inline-flex; }
.form-stack { display:grid; gap:15px; max-width:460px; }
.form-stack label { display:grid; gap:7px; color:var(--muted); font-size:13px; }
.form-stack input,.form-stack select { width:100%; border:1px solid var(--hairline); border-radius:11px; background:var(--solid); color:var(--text); padding:11px 12px; outline:none; }
.form-stack input:focus,.form-stack select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,113,227,.14); }
.form-stack button:disabled { opacity:.55; cursor:wait; }
.form-error { color:#d63737; font-size:13px; }
.invite-result { margin-top:16px; padding:12px; border-radius:12px; background:rgba(47,158,68,.1); color:var(--green); font-size:12px; line-height:1.6; word-break:break-all; }
.invite-result code { display:block; margin-top:6px; color:var(--text); }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% -10%,rgba(0,113,227,.16),transparent 42%),var(--bg); }
.login-card { width:min(100%,420px); padding:38px; border:1px solid var(--hairline); border-radius:26px; background:var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(24px); animation:viewIn .45s cubic-bezier(.2,.8,.2,1); }
.login-card .brand { padding:0 0 38px; }
.login-card h1 { margin-top:10px; font-size:36px; }
.login-subtitle { color:var(--muted); margin:12px 0 28px; font-size:14px; }
.login-hint { margin:22px 0 0; color:var(--muted); font-size:12px; text-align:center; }
@media(max-width:900px){.shell{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:4;display:block;padding:14px 16px;border-right:0;border-bottom:1px solid var(--hairline)}.brand{padding:0 0 12px}.tenant-switch{max-width:280px}.nav{display:flex;overflow:auto;margin-top:12px}.nav-item{white-space:nowrap}.sidebar-bottom{display:none}.main{padding:28px 18px}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2{grid-template-columns:1fr}}
@media(max-width:520px){.grid-4{grid-template-columns:1fr}.topbar{align-items:center}h1{font-size:29px}.card{padding:18px;border-radius:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}