:root{
  --bg:#f4f6f9; --panel:#ffffff; --ink:#12161c; --ink-2:#4a5462; --ink-3:#8792a3;
  --line:#e2e7ee; --line-2:#eef1f5;
  --accent:#3a4fd8; --accent-soft:#ecefff;
  --danger:#b3261e; --danger-soft:#fdecea;
  --ok:#15803d; --ok-soft:#e9f6ee;
  --radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.05);
}

/* ------------------------------------------------ standalone auth screens */
body.auth{
  margin:0; min-height:100vh; overflow:auto; display:block;
  background:var(--bg); color:var(--ink);
  font:14px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 460px at 50% -180px, #e7ebff 0%, rgba(231,235,255,0) 70%);
}
body.auth *{box-sizing:border-box}

.auth-wrap{
  max-width:404px; margin:0 auto; padding:60px 20px 72px;
  display:flex; flex-direction:column; align-items:center;
}

.auth-brand{
  display:flex; align-items:center; gap:10px; margin-bottom:26px;
  font-weight:680; font-size:17px; letter-spacing:-.3px;
  color:var(--ink); text-decoration:none;
}
.auth-brand .w2{font-weight:450; letter-spacing:.4px}

.auth-card{
  width:100%; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:30px 28px 28px;
}
.auth-card h1{margin:0 0 6px; font-size:20px; font-weight:700; letter-spacing:-.4px}
.auth-sub{margin:0 0 20px; color:var(--ink-2); font-size:13.4px}
.auth-sub b{color:var(--ink); font-weight:600}
.auth-card h1 + .auth-form,
.auth-card h1 + .gbtn{margin-top:20px}

.auth-msg{
  border-radius:10px; padding:10px 12px; font-size:13px; font-weight:520;
  margin:0 0 18px; border:1px solid transparent;
}
.auth-msg.err{background:var(--danger-soft); border-color:#f2bcb7; color:var(--danger)}
.auth-msg.ok{background:var(--ok-soft); border-color:#b9e0c8; color:var(--ok)}

/* ------------------------------------------------------------------ form */
.auth-form{display:flex; flex-direction:column; gap:15px}
.auth-form label{
  display:flex; flex-direction:column; gap:6px;
  font-size:12.6px; font-weight:640; color:var(--ink-2); letter-spacing:.1px;
}
.auth-form input[type=text],
.auth-form input[type=email],
.auth-form input[type=password]{
  width:100%; padding:10px 12px; border:1px solid #cfd7e2; border-radius:10px;
  background:#fff; font:inherit; font-size:14px; color:var(--ink); outline:none;
  box-shadow:0 1px 2px rgba(16,24,40,.04); transition:border-color .12s, box-shadow .12s;
}
.auth-form input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.auth-form input:disabled{background:var(--line-2); color:var(--ink-3); cursor:not-allowed}
.auth-form input::placeholder{color:#a9b3c2}
.auth-form .hint{font-size:12px; font-weight:450; color:var(--ink-3); line-height:1.45}
.auth-form hr{border:0; border-top:1px solid var(--line-2); margin:5px 0}

.auth-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; font-size:12.8px; margin-top:-3px;
}
.auth-row a{color:var(--accent); text-decoration:none; font-weight:600}
.auth-row a:hover{text-decoration:underline}
.chk{
  flex-direction:row !important; align-items:center; gap:7px !important;
  font-weight:500 !important; color:var(--ink-2); cursor:pointer;
}
.chk input{accent-color:var(--accent); width:15px; height:15px; margin:0}

.auth-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; margin-top:6px; padding:11px 16px;
  border:1px solid var(--accent); border-radius:10px;
  background:var(--accent); color:#fff; font:inherit; font-size:14px; font-weight:640;
  cursor:pointer; text-decoration:none; transition:background .12s;
}
.auth-btn:hover{background:#2f42bb}
.auth-btn:active{background:#293aa4}

/* --------------------------------------------------------------- google */
.gbtn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:10px 16px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  font-size:14px; font-weight:600; color:var(--ink); text-decoration:none;
  transition:background .12s, border-color .12s;
}
.gbtn:hover{background:#f7f9fb; border-color:#cfd7e2}
.gbtn svg{flex:none}

.auth-or{
  display:flex; align-items:center; gap:12px;
  margin:18px 0; color:var(--ink-3); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.6px;
}
.auth-or::before,.auth-or::after{content:""; flex:1; height:1px; background:var(--line)}

.auth-foot{
  margin:20px 0 0; text-align:center; font-size:13px; color:var(--ink-2);
}
.auth-foot a{color:var(--accent); text-decoration:none; font-weight:600}
.auth-foot a:hover{text-decoration:underline}

@media (max-width:460px){
  .auth-wrap{padding:34px 16px 48px}
  .auth-card{padding:24px 20px 22px; border-radius:14px}
}

/* ================================================================= in-app */
/* Account chip in the app header, plus the sample-data banner. */

.acct{position:relative; flex:none}
.acct-btn{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; border-radius:999px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  transition:border-color .12s, box-shadow .12s;
}
.acct-btn:hover{border-color:#cfd7e2; box-shadow:0 0 0 3px var(--line-2)}
.acct-av{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:999px;
  background:linear-gradient(135deg,#3a4fd8,#6b3fd0); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.2px;
}

.acct-menu{
  display:none; position:absolute; right:0; top:calc(100% + 9px); z-index:60;
  min-width:224px; padding:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 8px 28px rgba(16,24,40,.13), 0 1px 2px rgba(16,24,40,.06);
}
.acct-menu.open{display:block}
.acct-who{
  padding:9px 10px 10px; margin-bottom:4px;
  border-bottom:1px solid var(--line-2); line-height:1.4;
}
.acct-who b{display:block; font-size:13.4px; font-weight:650; color:var(--ink)}
.acct-who span{
  display:block; font-size:12px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acct-menu a{
  display:block; padding:8px 10px; border-radius:8px;
  font-size:13.2px; font-weight:560; color:var(--ink-2); text-decoration:none;
}
.acct-menu a:hover{background:var(--line-2); color:var(--ink)}
.acct-menu a.danger{color:var(--danger)}
.acct-menu a.danger:hover{background:var(--danger-soft); color:var(--danger)}

/* The demo CTA is an anchor wearing .btn — strip the link underline. */
a.btn{text-decoration:none}

.demo-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px;
  background:var(--accent-soft); border:1px solid #ccd4ff; color:#2f42bb;
  font-size:12px; font-weight:640; white-space:nowrap;
}
@media (max-width:760px){ .demo-tag{display:none} }