:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --border:#e3e8f0;
  --text:#1f2937;
  --muted:#6b7280;
  --accent:#4d7fff;
  --accent-dark:#3b63d9;
  --danger:#e5484d;
  --danger-bg:#fdeceb;
  --success:#1a9c63;
  --success-bg:#e9f9f1;
  --warn:#b45309;
  --warn-bg:#fff7ed;
}
*{box-sizing:border-box;}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.tmail-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:32px;max-width:420px;width:100%;box-shadow:0 4px 24px rgba(20,30,60,0.06);
}
.tmail-card h1{margin:0 0 4px;font-size:1.5em;}
.tmail-card .sub{color:var(--muted);font-size:0.9em;margin-bottom:20px;}
.tmail-card input[type=text],.tmail-card input[type=password]{
  width:100%;padding:12px;margin-top:8px;border-radius:10px;
  border:1px solid var(--border);background:#fbfcfe;color:var(--text);font-size:1em;
}
.tmail-card button.primary{
  width:100%;margin-top:14px;padding:12px;border-radius:10px;border:none;
  background:var(--accent);color:#fff;font-size:1em;font-weight:600;cursor:pointer;
}
.tmail-card button.primary:hover{background:var(--accent-dark);}
.tmail-card button.secondary{
  width:100%;margin-top:10px;padding:12px;border-radius:10px;
  border:1px solid var(--border);background:#fff;color:var(--text);font-size:1em;cursor:pointer;
}
.tmail-card a.link{color:var(--accent);text-decoration:none;font-size:0.9em;}
.tmail-card a.link:hover{text-decoration:underline;}
.msg-error{background:var(--danger-bg);color:var(--danger);padding:10px 14px;border-radius:10px;font-size:0.9em;margin-bottom:10px;}
.msg-success{background:var(--success-bg);color:var(--success);padding:10px 14px;border-radius:10px;font-size:0.9em;margin-bottom:10px;}
.msg-warn{background:var(--warn-bg);color:var(--warn);padding:12px 14px;border-radius:10px;font-size:0.9em;margin-bottom:14px;border:1px solid #fcd9a8;}
.tmail-critical{
  background:var(--danger-bg);border:1px solid #f5b5b8;color:#7a1f22;
  padding:16px;border-radius:12px;margin-bottom:18px;font-size:0.95em;line-height:1.5;
}
.tmail-critical strong{color:#c0272c;}
.backup-codes{background:#fbfcfe;border:1px solid var(--border);padding:14px;border-radius:10px;margin:14px 0;font-family:monospace;font-size:1.05em;line-height:1.8;}
.qr-wrap{background:#fff;border:1px solid var(--border);padding:12px;display:inline-block;border-radius:12px;}
.center{text-align:center;}
details summary{cursor:pointer;color:var(--muted);font-size:0.9em;}