:root {
  --navy: #123b73;
  --navy-2: #08264b;
  --blue: #1c4d8f;
  --orange: #f58220;
  --orange-soft: #fff3e8;
  --ink: #152033;
  --muted: #647087;
  --line: #e6eaf0;
  --surface: #ffffff;
  --canvas: #f5f7fa;
  --success: #14805e;
  --warning: #b66a08;
  --danger: #c33b4a;
  --shadow: 0 10px 28px rgba(13, 38, 71, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid rgba(245,130,32,.45); outline-offset: 2px; }

.app { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20; width: 248px;
  background: var(--navy-2); color: #dce7f7; display: flex; flex-direction: column;
  transition: transform .25s ease;
}
.brand { height: 82px; display: flex; align-items: center; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand img { width: 42px; height: 42px; object-fit: contain; object-position: center; }
.brand-copy { margin-left: 10px; }
.brand-copy strong { display:block; color:#fff; font-size: 14px; letter-spacing:.01em; }
.brand-copy span { font-size: 10px; color:#9fb2cb; letter-spacing:.08em; text-transform:uppercase; }
.nav { padding: 18px 12px; display: grid; gap: 5px; }
.nav-label { padding: 15px 12px 6px; color:#7991ae; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.nav a { display:flex; align-items:center; gap:12px; min-height:44px; border-radius:9px; padding:10px 12px; color:#afc0d7; font-weight:600; transition:.18s; }
.nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav a.active { background:var(--orange); color:white; box-shadow:0 8px 18px rgba(245,130,32,.2); }
.nav svg { width:18px; height:18px; flex:0 0 auto; }
.sidebar-foot { margin-top:auto; padding:14px 16px 20px; }
.nav-signout { display:flex; align-items:center; gap:10px; min-height:42px; margin-bottom:10px; padding:9px 11px; border-radius:9px; color:#afc0d7; font-weight:700; }
.nav-signout:hover { background:rgba(255,255,255,.06); color:white; }
.nav-signout svg { width:17px; height:17px; }
.support-card { border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:14px; background:rgba(255,255,255,.04); }
.support-card strong { display:block; color:#fff; margin-bottom:4px; }
.support-card span { color:#8fa5c0; font-size:12px; }

.main { grid-column:2; min-width:0; }
.topbar { height:82px; position:sticky; top:0; z-index:15; display:flex; align-items:center; justify-content:space-between; padding:0 30px; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.top-left, .top-actions, .profile { display:flex; align-items:center; }
.top-left { gap:14px; }
.menu-btn { display:none; width:38px; height:38px; border-radius:9px; background:#edf2f7; color:var(--navy); align-items:center; justify-content:center; }
.breadcrumb { color:var(--muted); font-size:12px; }
.breadcrumb strong { color:var(--ink); font-size:14px; }
.top-actions { gap:10px; }
.icon-btn { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:white; color:var(--navy); position:relative; }
.icon-btn .dot { position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--orange); border:2px solid #fff; }
.profile { gap:10px; padding-left:10px; }
.avatar { width:39px; height:39px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:#fff; font-weight:800; }
.profile-copy strong,.profile-copy span { display:block; }
.profile-copy span { color:var(--muted); font-size:11px; }

.content { padding:28px 30px 44px; max-width:1600px; margin:0 auto; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.page-head h1 { margin:0 0 6px; font-size:25px; line-height:1.2; letter-spacing:-.02em; color:var(--navy-2); }
.page-head p { margin:0; color:var(--muted); }
.head-actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:9px; padding:9px 14px; font-weight:700; background:white; color:var(--navy); border:1px solid #dce2ea; }
.btn:hover { border-color:#b7c1cf; }
.btn.primary { background:var(--orange); color:white; border-color:var(--orange); }
.btn.secondary { background:var(--navy); color:white; border-color:var(--navy); }
.btn.small { min-height:34px; padding:7px 10px; font-size:12px; }
.btn.danger { background:#fff0f1; color:var(--danger); border-color:#f3c5cb; }
.btn.danger:hover { border-color:var(--danger); }
.btn:disabled, .field:disabled { opacity:.55; cursor:not-allowed; }

.notice { margin-bottom:20px; background:#fff8f1; border:1px solid #ffd8b5; border-left:4px solid var(--orange); border-radius:10px; padding:13px 15px; display:flex; gap:12px; align-items:center; }
.notice strong { color:#8c470d; }
.notice p { margin:2px 0 0; color:#8d653f; font-size:12px; }
.notice .btn { margin-left:auto; flex:0 0 auto; }
.notice-quiet { background:#f3f7fb; border-color:#d7e2ee; border-left-color:var(--navy); }
.notice-quiet strong { color:var(--navy-2); }
.notice-quiet p { color:var(--muted); }
.crumb { margin:0 0 8px; color:var(--muted); font-size:12px; }
.crumb a { color:var(--navy); font-weight:700; }
.crumb a:hover { color:var(--orange); }
h3 { margin:18px 0 10px; color:var(--navy-2); font-size:13px; }
.chip-list { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border-radius:999px; background:#eef3f8; color:var(--navy); font-size:11px; font-weight:700; }
.check-list { display:grid; gap:10px; }
.check-item { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fbfcfe; }
.check-inline { display:flex; gap:8px; align-items:center; margin:14px 0 4px; color:var(--muted); font-size:12px; }
.row-link { cursor:pointer; }
.denied, .empty { min-height:280px; display:grid; place-items:center; text-align:center; padding:30px; }
.denied { background:white; border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); }
.denied h2 { margin:0 0 8px; color:var(--navy-2); }
.denied p { margin:0 0 18px; color:var(--muted); max-width:420px; }

.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.stat, .card { background:var(--surface); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); }
.stat { padding:18px; position:relative; overflow:hidden; }
.stat::after { content:""; position:absolute; width:78px; height:78px; right:-35px; top:-30px; border-radius:50%; background:var(--orange-soft); }
.stat-top { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; font-weight:700; }
.stat-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:#eef4fb; color:var(--navy); }
.stat strong { display:block; margin:13px 0 6px; font-size:23px; color:var(--navy-2); letter-spacing:-.02em; }
.trend { display:inline-flex; gap:4px; align-items:center; font-size:11px; color:var(--success); font-weight:700; }
.trend.down { color:var(--danger); }
.muted { color:var(--muted); }

.grid-2 { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,.85fr); gap:20px; margin-bottom:20px; }
.grid-equal { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
.card { min-width:0; }
.card-head { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; border-bottom:1px solid var(--line); }
.card-head h2 { margin:0; color:var(--navy-2); font-size:15px; }
.card-head p { margin:3px 0 0; font-size:11px; color:var(--muted); }
.card-body { padding:18px; }

.chart { height:250px; position:relative; display:flex; align-items:flex-end; padding:25px 4px 26px; gap:13px; background:repeating-linear-gradient(to top, transparent 0, transparent 49px, #edf0f4 50px); }
.bar-group { height:100%; flex:1; display:flex; align-items:flex-end; justify-content:center; gap:5px; position:relative; }
.bar { width:15px; max-width:24px; border-radius:5px 5px 1px 1px; background:var(--navy); min-height:6px; }
.bar.alt { background:var(--orange); }
.bar-group label { position:absolute; bottom:-23px; color:var(--muted); font-size:10px; }
.legend { display:flex; gap:16px; font-size:11px; color:var(--muted); }
.legend span::before { content:""; display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--navy); margin-right:5px; }
.legend span:last-child::before { background:var(--orange); }

.donut-wrap { display:grid; place-items:center; min-height:185px; position:relative; }
.donut { width:150px; aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--navy) 0 43%, var(--orange) 43% 76%, #33a37c 76% 91%, #e1e6ed 91% 100%); position:relative; }
.donut::after { content:""; position:absolute; inset:27px; border-radius:50%; background:white; }
.donut-centre { position:absolute; z-index:2; text-align:center; }
.donut-centre strong { display:block; font-size:22px; color:var(--navy-2); }
.donut-centre span { color:var(--muted); font-size:10px; }
.key-list { display:grid; gap:9px; margin-top:6px; }
.key-item { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.key-item i { width:8px; height:8px; display:inline-block; border-radius:50%; margin-right:7px; }

.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:720px; }
th { text-align:left; padding:12px 16px; color:#788399; font-size:10px; letter-spacing:.07em; text-transform:uppercase; background:#fafbfc; border-bottom:1px solid var(--line); }
td { padding:13px 16px; border-bottom:1px solid #edf0f4; white-space:nowrap; }
tbody tr:hover { background:#fbfcfe; }
tbody tr:last-child td { border-bottom:0; }
.entity { display:flex; align-items:center; gap:10px; }
a.entity:hover strong { color:var(--orange); }
.entity-mark { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:#eef3f8; color:var(--navy); font-weight:800; font-size:11px; }
.entity strong,.entity span { display:block; }
.entity span { color:var(--muted); font-size:11px; }
.status { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px; font-size:10px; font-weight:800; background:#e9f6f1; color:var(--success); }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status.warning { background:#fff4df; color:var(--warning); }
.status.danger { background:#fff0f1; color:var(--danger); }
.status.info { background:#edf3fb; color:var(--blue); }
.amount { font-weight:800; color:var(--navy-2); }

.filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.search { flex:1 1 250px; position:relative; }
.search input,.field { width:100%; min-height:40px; padding:9px 12px; border:1px solid #dce2ea; background:white; border-radius:9px; color:var(--ink); outline:none; }
.search input { padding-left:38px; }
.search svg { position:absolute; left:13px; top:11px; color:#8a96a8; }
.field:focus,.search input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(245,130,32,.1); }
select.field { width:auto; min-width:140px; }
.form-grid select.field { width:100%; min-width:0; }

.split-panel { display:grid; grid-template-columns:280px 1fr; min-height:520px; }
.list-panel { border-right:1px solid var(--line); }
.list-item { padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
.list-item:hover,.list-item.active { background:#fff7ef; }
.list-item.active { border-left:3px solid var(--orange); padding-left:13px; }
.list-item-top { display:flex; justify-content:space-between; gap:10px; }
.list-item p { margin:5px 0; color:var(--muted); font-size:11px; }
.detail-panel { padding:22px; }
.detail-title { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid var(--line); }
.detail-title h2 { margin:0 0 4px; color:var(--navy-2); }
.detail-title p { margin:0; color:var(--muted); }
.detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }
.mini { padding:14px; background:#f8fafc; border-radius:10px; }
.mini span,.mini strong { display:block; }
.mini span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.mini strong { margin-top:5px; color:var(--navy-2); }
.timeline { position:relative; display:grid; gap:18px; margin-top:18px; }
.timeline::before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:#dbe2eb; }
.timeline-item { position:relative; padding-left:26px; }
.timeline-item::before { content:""; position:absolute; left:1px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--orange); border:3px solid #fff4ea; }
.timeline-item strong,.timeline-item span { display:block; }
.timeline-item span { color:var(--muted); font-size:11px; }

.progress-row { margin-bottom:16px; }
.progress-label { display:flex; justify-content:space-between; margin-bottom:7px; font-size:11px; }
.progress { height:8px; background:#edf0f4; border-radius:10px; overflow:hidden; }
.progress i { display:block; height:100%; background:var(--navy); border-radius:10px; }
.progress.orange i { background:var(--orange); }
.risk-score { display:flex; align-items:center; justify-content:center; flex-direction:column; width:122px; height:122px; margin:10px auto 16px; border-radius:50%; border:10px solid #ffdfc5; color:var(--navy-2); }
.risk-score strong { font-size:30px; line-height:1; }
.risk-score span { font-size:10px; color:var(--muted); }

.empty { min-height:280px; display:grid; place-items:center; text-align:center; padding:30px; }
.empty-mark { width:52px; height:52px; margin:0 auto 12px; display:grid; place-items:center; border-radius:14px; background:var(--orange-soft); color:var(--orange); }
.empty h3 { margin:0 0 4px; color:var(--navy-2); }
.empty p { margin:0; color:var(--muted); }
.no-results { min-height:0; padding:28px 16px; }

.modal-backdrop { display:none; position:fixed; inset:0; z-index:40; background:rgba(5,20,40,.55); padding:20px; align-items:center; justify-content:center; }
.modal-backdrop.open { display:flex; }
.modal { width:min(480px,100%); background:white; border-radius:15px; box-shadow:0 24px 70px rgba(0,0,0,.25); overflow:hidden; }
.modal-head { display:flex; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; color:var(--navy-2); font-size:17px; }
.modal-body { padding:20px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; background:#f8fafc; border-top:1px solid var(--line); }
.form-grid { display:grid; gap:14px; }
.form-group label { display:block; margin-bottom:6px; color:#526078; font-size:11px; font-weight:700; }
.toast { position:fixed; z-index:60; right:24px; bottom:24px; min-width:260px; padding:13px 16px; border-radius:10px; background:var(--navy-2); color:white; box-shadow:0 14px 38px rgba(0,0,0,.2); transform:translateY(30px); opacity:0; pointer-events:none; transition:.22s; }
.toast.show { transform:none; opacity:1; }

.login-page { min-height:100vh; background:#f4f7fb; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.05fr) minmax(480px,.95fr); }
.login-story { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:100vh; padding:42px clamp(38px,5vw,76px); background:linear-gradient(145deg,#061c38 0%,#0a315f 58%,#164f89 100%); color:white; }
.login-story::before { content:""; position:absolute; width:520px; height:520px; right:-250px; top:-160px; border:1px solid rgba(255,255,255,.12); transform:rotate(45deg); }
.login-story::after { content:""; position:absolute; width:360px; height:360px; left:-230px; bottom:-110px; border:80px solid rgba(245,130,32,.12); transform:rotate(45deg); }
.login-brand { position:relative; z-index:1; display:flex; align-items:center; gap:13px; }
.login-brand img { width:48px; height:48px; object-fit:contain; }
.login-brand strong,.login-brand span { display:block; }
.login-brand strong { font-size:18px; }
.login-brand span { margin-top:1px; color:#b7c9dd; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.login-visual { position:relative; z-index:1; display:grid; justify-items:center; align-content:center; text-align:center; }
.login-visual-mark { width:clamp(180px,24vw,310px); aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,255,255,.11); border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.015) 62%,transparent 63%); box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 68px rgba(255,255,255,.018); }
.login-visual-mark img { width:62%; height:62%; object-fit:contain; filter:drop-shadow(0 18px 35px rgba(0,0,0,.18)); }
.login-visual > strong { margin-top:38px; font-size:clamp(28px,3vw,44px); letter-spacing:-.035em; }
.login-visual > span { margin-top:5px; color:#9fb6cf; font-size:10px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; }
.secure-label { display:inline-block; color:var(--orange); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.story-foot { position:relative; z-index:1; margin:0; color:#7793b2; font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.login-panel { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px clamp(26px,5vw,74px); }
.login-card { width:min(440px,100%); }
.login-wordmark { width:172px; height:65px; margin-bottom:42px; object-fit:contain; object-position:left center; }
.login-heading h2 { margin:10px 0 7px; color:var(--navy-2); font-size:31px; letter-spacing:-.03em; }
.login-heading p { margin:0; color:var(--muted); }
.demo-credentials { margin-top:22px; padding:11px 13px; border-left:3px solid var(--orange); border-radius:7px; background:var(--orange-soft); }
.demo-credentials span,.demo-credentials strong { display:block; }
.demo-credentials span { color:#9b5c22; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.demo-credentials strong { margin-top:3px; color:var(--navy-2); font-size:11px; }
.login-form { display:grid; gap:19px; margin-top:32px; }
.login-form .field { min-height:49px; padding:12px 14px; }
.label-row { display:flex; justify-content:space-between; gap:15px; }
.label-row a { color:var(--blue); font-size:11px; font-weight:700; }
.password-field { position:relative; }
.password-field .field { padding-right:64px; }
.password-field button { position:absolute; right:7px; top:7px; min-width:48px; height:35px; background:transparent; color:var(--blue); font-size:11px; font-weight:800; }
.field-error { display:none; margin-top:5px; color:var(--danger); font-size:11px; }
.form-group.invalid .field { border-color:var(--danger); box-shadow:0 0 0 3px rgba(195,59,74,.08); }
.form-group.invalid .field-error { display:block; }
.login-error { display:none; margin-top:-5px; padding:10px 12px; border-radius:8px; background:#fff0f1; color:var(--danger); font-size:11px; font-weight:700; }
.login-form.credentials-invalid .login-error { display:block; }
.login-options { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:11px; }
.check { display:flex; align-items:center; gap:6px; cursor:pointer; }
.check input { accent-color:var(--orange); }
.login-submit { width:100%; min-height:50px; justify-content:space-between; padding:12px 18px; font-size:13px; }
.login-submit:disabled { opacity:.72; cursor:wait; }
.login-help { margin-top:30px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:white; }
.login-help span,.login-help strong { display:block; }
.login-help span { color:var(--muted); font-size:10px; }
.login-help strong { margin-top:3px; color:var(--navy); font-size:12px; }
.login-notice { margin:18px 0 0; color:#8994a5; font-size:10px; line-height:1.5; }
.login-legal { width:min(440px,100%); margin:34px 0 0; color:#929cab; font-size:10px; }

@media (max-width: 1100px) {
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-2 { grid-template-columns:1fr; }
  .detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .app { grid-template-columns:1fr; }
  .main { grid-column:1; }
  .sidebar { transform:translateX(-100%); box-shadow:20px 0 50px rgba(0,0,0,.16); }
  .sidebar.open { transform:none; }
  .menu-btn { display:flex; }
  .topbar { padding:0 18px; }
  .content { padding:22px 18px 38px; }
  .profile-copy { display:none; }
  .split-panel { grid-template-columns:1fr; }
  .list-panel { border-right:0; border-bottom:1px solid var(--line); max-height:300px; overflow:auto; }
  .login-shell { grid-template-columns:1fr; }
  .login-story { min-height:auto; padding:28px; }
  .login-visual { display:none; }
  .story-foot { display:none; }
  .login-panel { min-height:auto; padding:44px 24px; }
  .login-wordmark { display:none; }
}
@media (max-width: 620px) {
  .stats,.grid-equal { grid-template-columns:1fr; }
  .page-head { flex-direction:column; }
  .head-actions { width:100%; }
  .head-actions .btn { flex:1; }
  .notice { align-items:flex-start; }
  .notice .btn { display:none; }
  .detail-grid { grid-template-columns:1fr; }
  .top-actions .icon-btn:first-child { display:none; }
  .auth-hero { padding:36px 22px 28px; }
  .auth-panel { padding:0 18px 36px; }
  .otp-row { gap:6px; }
}

.auth-body { min-height:100vh; background:var(--navy-2); }
.auth-wrap { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); }
.auth-hero { padding:56px 56px 48px; color:#dce7f7; }
.auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:48px; }
.auth-brand img { width:48px; height:48px; object-fit:contain; }
.auth-brand strong, .auth-brand span { display:block; }
.auth-brand strong { color:#fff; }
.auth-brand span { color:#9fb2cb; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.auth-hero h1 { margin:0 0 14px; max-width:16ch; color:#fff; font-size:36px; line-height:1.15; letter-spacing:-.03em; }
.auth-hero p { margin:0 0 28px; max-width:46ch; color:#b7c7db; }
.auth-points { margin:0; padding:0; list-style:none; display:grid; gap:12px; color:#c5d3e4; }
.auth-points li { padding-left:18px; position:relative; }
.auth-points li::before { content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--orange); }
.auth-panel { display:flex; align-items:center; justify-content:center; padding:40px; background:var(--canvas); }
.auth-card { width:min(440px,100%); background:white; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:28px; }
.auth-kicker { margin:0 0 6px; color:var(--orange); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.auth-card h2 { margin:0 0 8px; color:var(--navy-2); font-size:24px; }
.auth-notice { margin:16px 0; }
.auth-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.auth-actions .btn.primary { flex:1; }
.auth-help { margin:18px 0 0; font-size:12px; }
.auth-help a { color:var(--navy); font-weight:700; }
.otp-row { display:flex; gap:8px; margin:16px 0 4px; }
.otp { width:48px; min-width:0; text-align:center; font-size:20px; font-weight:800; padding:10px 0; }
@media (max-width: 900px) {
  .auth-wrap { grid-template-columns:1fr; }
  .auth-hero { padding:36px 28px 24px; }
  .auth-hero h1 { font-size:28px; max-width:none; }
}