:root{
  --bg:#0b0d12;
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.12);
  --text:#e9edf6;
  --muted:#9aa4b2;
  --brand:#ff6a00;
  --brand-2:#ff9a3c;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(255,106,0,.18), transparent 60%),
    radial-gradient(900px 700px at -15% 110%, rgba(255,154,60,.16), transparent 60%),
    var(--bg);
  color:var(--text);
}

a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}

.card{
  background:var(--surface);
  backdrop-filter: blur(12px);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.button{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.1rem;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; border:0; border-radius:14px; font-weight:700;
  box-shadow:var(--shadow);
  cursor:pointer; transition:transform .18s ease, filter .18s ease;
}
.button:active{ transform: translateY(1px) }
.button.ghost{ background:transparent; border:1px solid var(--stroke); color:var(--text) }

.input{ width:100%; padding:1rem 1.05rem; border-radius:14px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.06); color:var(--text); outline:none;
  transition: border-color .2s, background .2s;
}
.input:focus{ border-color: rgba(255,106,0,.6); background:rgba(255,255,255,.1) }
.label{ display:block; color:#c6d0df; font-size:.92rem; margin:.5rem 0 .45rem }

.auth-wrap{ min-height:100%; display:grid; grid-template-columns:1.25fr 1fr }
@media(max-width:980px){ .auth-wrap{grid-template-columns:1fr} .splash{display:none} }
.splash{ display:flex; align-items:center; justify-content:center; padding:6vw;
  background:
    radial-gradient(700px 600px at 70% 30%, rgba(255,106,0,.22), transparent 60%),
    radial-gradient(700px 600px at 30% 70%, rgba(255,154,60,.18), transparent 60%);
}
.logo-xl{ font-weight:900; font-size:2.6rem; letter-spacing:.3px; display:flex; gap:.6rem; align-items:center }
.brand-dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 0 14px rgba(255,106,0,.7)
}
.badge{ display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .6rem; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--stroke); font-size:.82rem; color:#e6ebf5;
}

.form-panel{ display:flex; align-items:center; justify-content:center; padding:5vw }
.form-box{ width:100%; max-width:520px; padding:clamp(18px,3.6vw,44px) }
.form-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px }
.title{ font-size:1.6rem; font-weight:900 }
.subtitle{ color:var(--muted) }
.helper{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.6rem }
.checkbox{ display:flex; align-items:center; gap:.5rem; opacity:.9 }
.hr{ height:1px; background:var(--stroke); margin:1rem 0 }

.password-toggle{ position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; opacity:.9 }

/* App shell */
.app-shell{ display:grid; min-height:100vh; grid-template-columns:280px 1fr }
@media(max-width:980px){ .app-shell{ grid-template-columns:86px 1fr } .nav .label{display:none} }
.sidebar{
  position:sticky; top:0; height:100vh; padding:16px;
  background: linear-gradient(160deg, rgba(255,106,0,.14), rgba(255,154,60,.07) 35%, transparent 60%), var(--bg);
  border-right:1px solid var(--stroke);
}
.topbar{
  height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 20px;
  background:linear-gradient(180deg, rgba(0,0,0,.22), transparent 60%);
  border-bottom:1px solid var(--stroke); position:sticky; top:0; z-index:10;
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:900 }
.nav{ display:flex; flex-direction:column; gap:8px; margin-top:14px }
.nav h6{ color:#cbd5e1; font-weight:800; margin:18px 10px 6px; text-transform:uppercase; font-size:.78rem; letter-spacing:.12rem }
.nav a{ display:flex; align-items:center; gap:.8rem; padding:.85rem .95rem; border-radius:12px; color:#e8edf7; border:1px solid transparent }
.nav a:hover{ background:rgba(255,255,255,.06); border-color:var(--stroke) }
.nav a.active{ background:linear-gradient(135deg, rgba(255,106,0,.22), rgba(255,154,60,.12)); border-color:rgba(255,106,0,.25) }

.user-pic{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:1px solid var(--stroke) }
.org-select{ background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--stroke); border-radius:10px; padding:.55rem .8rem }
.content{ padding:26px }