:root {
  color-scheme: light;
  --bg:#f6f7fb; --panel:#fff; --text:#18202f; --muted:#6b7280;
  --line:#e5e7eb; --primary:#1677ff; --danger:#d92d20; --ok:#079455;
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--primary); text-decoration:none; }
.wrap { max-width:1080px; margin:0 auto; padding:28px 18px 44px; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.brand { font-size:22px; font-weight:700; }
.nav-links { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:22px; margin-bottom:18px; box-shadow:0 8px 24px rgba(16,24,40,.04); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
h1 { font-size:24px; margin:0 0 8px; }
h2 { font-size:18px; margin:0 0 14px; }
p { color:var(--muted); line-height:1.6; }
label { display:block; font-size:14px; color:var(--muted); margin:12px 0 6px; }
input,select { width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 12px; font-size:15px; background:#fff; }
button,.btn { border:0; border-radius:8px; padding:10px 14px; background:var(--primary); color:#fff; cursor:pointer; font-size:14px; display:inline-flex; align-items:center; justify-content:center; min-height:38px; }
.btn.secondary { background:#eef4ff; color:#175cd3; }
.btn.danger { background:#fee4e2; color:#b42318; }
.btn.ok { background:#dcfae6; color:#067647; }
.muted { color:var(--muted); }
.metric { font-size:34px; font-weight:800; margin:10px 0 4px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { border-bottom:1px solid var(--line); padding:10px 8px; text-align:left; vertical-align:middle; }
th { color:var(--muted); font-weight:600; }
.pill { border-radius:999px; padding:4px 9px; display:inline-block; background:#f2f4f7; color:#475467; font-size:12px; }
.pill.ok { background:#dcfae6; color:#067647; }
.pill.warn { background:#fff4cc; color:#8a5a00; }
.pill.danger { background:#fee4e2; color:#b42318; }
.flash { background:#ecfdf3; color:#067647; border:1px solid #abefc6; border-radius:8px; padding:10px 12px; margin-bottom:14px; }
.error { background:#fef3f2; color:#b42318; border-color:#fecdca; }
.form-row { display:flex; gap:8px; align-items:end; }
.form-row>* { flex:1; }
.captcha-row { display:grid; grid-template-columns:minmax(0,1fr) 118px; gap:10px; align-items:end; }
.captcha-code { min-height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; background:linear-gradient(135deg,#eef4ff,#f8fafc); color:#102a56; font-size:22px; font-weight:900; letter-spacing:5px; user-select:none; }
@media (max-width:640px) { .nav { align-items:flex-start; flex-direction:column; } .form-row { flex-direction:column; align-items:stretch; } .captcha-row { grid-template-columns:1fr; } }
/* The Android WebView owns the full-screen chrome; keep the website shell content-only there. */
body.app-webview > .wrap { padding-top:0; }
body.app-webview > .wrap > .nav { display:none; }
.app-login-brand { display:none; }

/* Authentication stays inside the app shell and visually matches native screens. */
body.app-webview.auth-page {
  min-height:100vh;
  min-height:100dvh;
  overflow-y:auto;
  color:#f8f7fb;
  background:#08070d;
}
body.app-webview.auth-page > .wrap {
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  max-width:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:max(24px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));
}
body.app-webview.auth-page .panel,
body.app-webview.auth-page .flash {
  width:min(430px,100%);
}
body.app-webview.auth-page .panel {
  margin:0;
  padding:26px 22px;
  border:1px solid rgba(241,72,167,.42);
  border-radius:8px;
  background:rgba(24,15,31,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 48px rgba(0,0,0,.38);
}
body.app-webview.auth-page h1 {
  margin:0 0 20px;
  color:#fff;
  font-size:25px;
  line-height:1.25;
  text-align:center;
}
body.app-webview.auth-page h2 { color:#fff; }
body.app-webview.auth-page p,
body.app-webview.auth-page label,
body.app-webview.auth-page .muted { color:#bdb2c5; }
body.app-webview.auth-page label { margin-top:14px; font-size:13px; }
body.app-webview.auth-page input,
body.app-webview.auth-page select {
  min-height:48px;
  border-color:rgba(255,255,255,.16);
  background:rgba(8,7,13,.62);
  color:#fff;
  caret-color:#64dce4;
  outline:none;
}
body.app-webview.auth-page input:focus,
body.app-webview.auth-page select:focus {
  border-color:#64dce4;
  box-shadow:0 0 0 3px rgba(100,220,228,.12);
}
body.app-webview.auth-page button,
body.app-webview.auth-page .btn {
  min-height:46px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:8px;
  background:#ed45a1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px rgba(237,69,161,.20);
  font-size:15px;
  font-weight:700;
}
body.app-webview.auth-page .btn.secondary { background:#163c46; color:#9af5f8; }
body.app-webview.auth-page a { color:#71e5eb; font-weight:650; }
body.app-webview.auth-page .captcha-row { grid-template-columns:minmax(0,1fr) 112px; gap:10px; }
body.app-webview.auth-page .captcha-code {
  min-height:48px;
  border-color:rgba(100,220,228,.32);
  background:#14232c;
  color:#b6fbff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
body.app-webview.auth-page .flash {
  margin:0;
  border-color:rgba(100,220,228,.30);
  background:rgba(18,55,60,.92);
  color:#b6fbff;
}
@media (max-height:720px) {
  body.app-webview.auth-page > .wrap { justify-content:flex-start; }
}

/* Explicit native marker wins over stale generic account styles in WebView caches. */
html.xingling-native-app body.account-page.app-webview.auth-page {
  min-height:100vh !important;
  min-height:100dvh !important;
  background:#08070d !important;
  color:#f8f7fb !important;
}
html.xingling-native-app body.account-page.app-webview.auth-page > .wrap {
  width:100% !important;
  min-height:100vh !important;
  min-height:100dvh !important;
  max-width:none !important;
  padding:max(24px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom)) !important;
}
html.xingling-native-app body.account-page.app-webview.auth-page .app-login-brand {
  width:min(430px,100%);
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:12px;
  align-items:center;
  color:#fff;
}
html.xingling-native-app body.account-page.app-webview.auth-page .app-login-mark {
  grid-row:1/3;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(113,229,235,.38);
  border-radius:8px;
  background:#201329;
  color:#71e5eb;
  font-size:24px;
  font-weight:800;
}
html.xingling-native-app body.account-page.app-webview.auth-page .app-login-mark::before {
  content:"";
  width:22px;
  height:22px;
  border:2px solid #71e5eb;
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(241,72,167,.16),0 0 18px rgba(113,229,235,.42);
}
html.xingling-native-app body.account-page.app-webview.auth-page .app-login-brand strong { font-size:21px; }
html.xingling-native-app body.account-page.app-webview.auth-page .app-login-brand small { color:#bdb2c5; }
html.xingling-native-app body.account-page.app-webview.auth-page .app-login-panel {
  width:min(430px,100%) !important;
  margin:0 !important;
  background:rgba(24,15,31,.96) !important;
  border-color:rgba(241,72,167,.42) !important;
}
html.xingling-native-app body.account-page.app-webview.auth-page .app-login-panel input {
  background:rgba(8,7,13,.72) !important;
  color:#fff !important;
}