/* ============================================================
   Account Sync · Shared stylesheet
   - Dark, security-themed UI
   - Per-exchange branding via <html data-brand="...">
   ============================================================ */

:root {
  --bg-page: #0a0d12;
  --bg-panel: #11151c;
  --bg-panel-2: #161b25;
  --bg-card: #1a212c;
  --border: #232b39;
  --border-soft: #1e2530;
  --text-primary: #e6e9ef;
  --text-secondary: #aab2c0;
  --text-muted: #7a8395;

  --accent: #f0b90b;
  --accent-soft: rgba(240, 185, 11, 0.12);
  --accent-strong: #ffce3a;

  --warn: #f5a623;
  --warn-bg: rgba(245, 166, 35, 0.1);
  --danger: #ff6b6b;
  --danger-bg: rgba(255, 107, 107, 0.12);
  --success: #4ade80;
  --success-soft: rgba(74, 222, 128, 0.18);

  --shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.6);

  --font-family: "Inter", "Noto Sans Arabic", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", "Noto Sans Devanagari", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Per-brand accent colors (used on the warning bar + brand text) */
html[data-brand="binance"]   { --accent: #f0b90b; --accent-strong: #ffd34a; }
html[data-brand="bitfinex"]  { --accent: #03ca9b; --accent-strong: #29dfb1; }
html[data-brand="bitget"]    { --accent: #00ffff; --accent-strong: #6cffff; }
html[data-brand="bithumb"]   { --accent: #ff6900; --accent-strong: #ff8c33; }
html[data-brand="blofin"]    { --accent: #ff8800; --accent-strong: #ffa844; }
html[data-brand="btse"]      { --accent: #d8c7a9; --accent-strong: #f1e2c2; }
html[data-brand="coinbase"]  { --accent: #0052ff; --accent-strong: #4f7cff; }
html[data-brand="coincheck"] { --accent: #00d9b1; --accent-strong: #2eecc4; }
html[data-brand="coinone"]   { --accent: #0059f3; --accent-strong: #4f87f7; }
html[data-brand="coinzilla"] { --accent: #ffb800; --accent-strong: #ffce4a; }
html[data-brand="g2a"]       { --accent: #ff4d20; --accent-strong: #ff7a55; }
html[data-brand="generic"]   { --accent: #4285f4; --accent-strong: #6fa1f7; }
html[data-brand="htx"]       { --accent: #1f72f2; --accent-strong: #4f97f5; }
html[data-brand="kucoin"]    { --accent: #00b47d; --accent-strong: #2bd29c; }
html[data-brand="lbank"]     { --accent: #ffdb00; --accent-strong: #ffe848; }
html[data-brand="mexc"]      { --accent: #0046ff; --accent-strong: #4f7cff; }
html[data-brand="okx"]       { --accent: #ffffff; --accent-strong: #ffffff; }
html[data-brand="tapbit"]    { --accent: #ffc107; --accent-strong: #ffd54f; }
html[data-brand="upbit"]     { --accent: #1452b8; --accent-strong: #2e6fd9; }
html[data-brand="windows"]   { --accent: #0078d4; --accent-strong: #2b9cef; }
html[data-brand="security"]  { --accent: #4ade80; --accent-strong: #22c55e; }

/* Security light theme: use darker green for legibility */
html[data-theme="light"][data-brand="security"] {
  --accent: #16a34a;
  --accent-strong: #16a34a;
  --accent-soft: rgba(34, 197, 94, 0.12);
  --success: #16a34a;
  --success-soft: rgba(34, 197, 94, 0.12);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ============================================================
   Top brand bar
   ============================================================ */
.top-bar {
  background: #0d1117;
  border-bottom: 1px solid var(--border-soft);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand { min-width: 0; }
.brand__name { overflow: hidden; text-overflow: ellipsis; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
}

.brand__logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}

.brand__name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
}

html[data-brand="okx"] .brand__name { color: #ffffff; }

/* Wordmark brands (bitget, bitfinex, coinone, kucoin, okx, blofin):
   the logo file already contains the brand name, so we hide the duplicate
   text and let the image grow horizontally. */
.brand--wordmark .brand__logo {
  width: auto;
  height: 26px;
  max-width: 160px;
}

.brand--wordmark .brand__name { display: none; }

.top-bar__right {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.top-bar__lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.top-bar__lock svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
}

/* ============================================================
   Language switcher
   ============================================================ */
.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel-2);
  border-radius: 8px;
  color: var(--text-secondary);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lang-switcher:hover { color: var(--text-primary); border-color: #3a4555; }

.lang-switcher__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: currentColor;
}

.lang-switcher__select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding-right: 14px;
  cursor: pointer;
  outline: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 2px center, right 6px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  max-width: 150px;
}

.lang-switcher__select option {
  background: #11151c;
  color: var(--text-primary);
}

html[data-brand="windows"] .lang-switcher {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .alert-bar::before {
  left: auto;
  right: 0;
}
html[dir="rtl"] .note-bar { border-left: none; border-right: 3px solid var(--warn); }

/* ============================================================
   Critical security banner
   ============================================================ */
.alert-bar {
  position: relative;
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.05), rgba(245, 166, 35, 0.18) 50%, rgba(245, 166, 35, 0.05));
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--warn);
}

.alert-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--warn);
}

.alert-bar svg {
  width: 18px;
  height: 18px;
  stroke: var(--warn);
  fill: none;
  stroke-width: 2.2;
}

.alert-bar__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.6); }
  50%      { opacity: 0.7; transform: scale(1.15); box-shadow: 0 0 0 6px rgba(245, 166, 35, 0); }
}

/* ============================================================
   Main layout
   ============================================================ */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 28px 24px;
}

.page__title {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}

.page__subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 28px 0;
}

.page__subtitle b { color: var(--accent-strong); font-weight: 600; }

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 28px;
  align-items: start;
}

/* ============================================================
   Description card (left)
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 24px;
  box-shadow: var(--shadow-card);
}

.card__text {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 18px 0;
}

.card__text b { color: var(--text-primary); }

/* Email highlight chip (shown when ?email= is present) */
.email-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 18px 0;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-primary);
  max-width: 100%;
  word-break: break-all;
}

.email-chip__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  color: var(--accent);
  font-size: 13px;
  text-transform: uppercase;
}

.email-chip__text { line-height: 1.35; }
.email-chip__text b { color: var(--accent-strong); }

/* Steps list */
.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 22px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.steps__num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* Google button */
.google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  background: #ffffff;
  color: #1f2937;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5);
}

.google-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.6);
  background: #f8f9fb;
}

.google-btn:active { transform: translateY(0); }

.google-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-icon svg { width: 100%; height: 100%; display: block; }

.google-btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* Microsoft / Windows variant */
.ms-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  background: #2f2f2f;
  color: #ffffff;
  border: 1px solid #4a4a4a;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.15s ease, transform 0.15s ease;
  font-family: "Segoe UI", "Inter", sans-serif;
}

.ms-btn:hover { background: #3a3a3a; transform: translateY(-1px); }
.ms-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* NAVER variant (green) */
.naver-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  background: #03C75A;
  color: #ffffff;
  border: 1px solid #03C75A;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  font-family: "Inter", "Noto Sans KR", sans-serif;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.naver-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(3, 199, 90, 0.6);
}
.naver-btn:active   { transform: translateY(0); }
.naver-btn svg      { width: 20px; height: 20px; flex-shrink: 0; }
.naver-btn[disabled]{ opacity: 0.7; cursor: progress; }

/* "or" divider between two stacked sign-in buttons */
.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

html[data-brand="windows"] .or-divider::before,
html[data-brand="windows"] .or-divider::after {
  background: rgba(255, 255, 255, 0.12);
}

html[data-brand="windows"] .or-divider {
  color: rgba(255, 255, 255, 0.55);
}

/* Inline info bar at bottom of card */
.note-bar {
  margin: 18px 0 0 0;
  padding: 12px 14px;
  background: rgba(245, 166, 35, 0.08);
  border-left: 3px solid var(--warn);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.note-bar svg {
  width: 16px;
  height: 16px;
  stroke: var(--warn);
  fill: none;
  stroke-width: 2;
  margin-top: 1px;
  flex-shrink: 0;
}

/* ============================================================
   Side panel (right): shield + status
   ============================================================ */
.side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 4px;
}

.shield {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #2a3140 0%, #1a2030 70%, #11151c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--border);
}

.shield::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.06);
  animation: spin 24s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.shield__icon {
  width: 70px;
  height: 80px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.5;
  position: relative;
  z-index: 1;
}

.shield__check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.shield__check svg {
  width: 36px;
  height: 36px;
  stroke: var(--success);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  text-align: center;
  font-weight: 600;
  line-height: 1.4;
}

.risk-tag {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg-panel-2);
  min-width: 140px;
}

.risk-tag__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.risk-tag__value {
  font-size: 17px;
  font-weight: 800;
  color: var(--warn);
  letter-spacing: 0.04em;
}

/* ============================================================
   Footer
   ============================================================ */
.foot {
  margin-top: 26px;
  padding: 14px 28px;
  border-top: 1px solid var(--border-soft);
  background: #0d1117;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12.5px;
}

.foot svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
}

/* ============================================================
   Loading overlay (Google flow simulation)
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 12, 0.85);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.overlay.is-open { display: flex; }

.overlay__box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 360px;
  text-align: center;
}

.spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent-strong);
  animation: spin 0.9s linear infinite;
}

.overlay__title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; }
.overlay__text  { font-size: 13px; color: var(--text-secondary); margin: 0; }

/* ============================================================
   Windows-only theme overrides
   ============================================================ */
html[data-brand="windows"] body {
  background: linear-gradient(135deg, #0078d4 0%, #002050 100%);
  font-family: "Segoe UI", "Inter", sans-serif;
}

html[data-brand="windows"] .top-bar {
  background: rgba(0, 0, 0, 0.35);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-brand="windows"] .brand__name {
  color: #ffffff;
  font-weight: 400;
}

html[data-brand="windows"] .alert-bar {
  background: rgba(0, 0, 0, 0.25);
}

html[data-brand="windows"] .card {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

html[data-brand="windows"] .shield {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-brand="windows"] .risk-tag {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-brand="windows"] .foot {
  background: rgba(0, 0, 0, 0.35);
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   LIGHT THEME (?theme=light)

   Activated by an inline script in <head> that reads the query
   param and sets <html data-theme="light">. Inherits everything
   from the dark theme and overrides the colour palette.
   ============================================================ */
html[data-theme="light"] {
  --bg-page: #f3f5f9;
  --bg-panel: #ffffff;
  --bg-panel-2: #ffffff;
  --bg-card: #ffffff;
  --border: #e3e7ef;
  --border-soft: #eef1f6;
  --text-primary: #15181f;
  --text-secondary: #4d5462;
  --text-muted: #8a93a4;
  --accent-soft: rgba(240, 185, 11, 0.18);
  --shadow-card: 0 22px 50px -28px rgba(15, 22, 40, 0.22);
  color-scheme: light;
}

/* Surfaces that used hard-coded hex colours */
html[data-theme="light"] .top-bar {
  background: #ffffff;
  border-bottom-color: var(--border-soft);
}

html[data-theme="light"] .foot {
  background: #ffffff;
  border-top-color: var(--border-soft);
  color: var(--text-muted);
}

html[data-theme="light"] .alert-bar {
  background: linear-gradient(
    90deg,
    rgba(245, 166, 35, 0.04),
    rgba(245, 166, 35, 0.18) 50%,
    rgba(245, 166, 35, 0.04)
  );
  border-bottom-color: rgba(245, 166, 35, 0.3);
}

html[data-theme="light"] .lang-switcher {
  background: #ffffff;
  border-color: var(--border);
}
html[data-theme="light"] .lang-switcher__select option {
  background: #ffffff;
  color: var(--text-primary);
}

/* Description card + steps */
html[data-theme="light"] .card {
  background: #ffffff;
  border-color: var(--border);
}
html[data-theme="light"] .card__text b { color: var(--text-primary); }

html[data-theme="light"] .email-chip {
  background: rgba(240, 185, 11, 0.12);
  color: var(--text-primary);
}
html[data-theme="light"] .email-chip__avatar {
  background: var(--accent);
  color: #ffffff;
}

/* Sign-in buttons */
html[data-theme="light"] .google-btn {
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #dadce0;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1);
}
html[data-theme="light"] .google-btn:hover {
  background: #f8f9fb;
  box-shadow: 0 4px 12px -4px rgba(60, 64, 67, 0.2);
}

html[data-theme="light"] .ms-btn {
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #8c8c8c;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1);
}
html[data-theme="light"] .ms-btn:hover {
  background: #f3f4f6;
}

html[data-theme="light"] .or-divider::before,
html[data-theme="light"] .or-divider::after {
  background: var(--border);
}

/* Note bar */
html[data-theme="light"] .note-bar {
  background: rgba(245, 166, 35, 0.1);
}

/* Side panel (shield + risk-tag) */
html[data-theme="light"] .shield {
  background: radial-gradient(ellipse at center, #ffffff 0%, #eef1f6 60%, #dde2ec 100%);
  border-color: var(--border);
}
html[data-theme="light"] .shield::before { border-color: rgba(15, 22, 40, 0.06); }
html[data-theme="light"] .shield__icon { stroke: rgba(15, 22, 40, 0.55); }

html[data-theme="light"] .risk-tag {
  background: #ffffff;
  border-color: var(--border);
}

/* Loading overlay */
html[data-theme="light"] .overlay {
  background: rgba(243, 245, 249, 0.92);
  backdrop-filter: blur(8px);
}
html[data-theme="light"] .overlay__box {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 30px 60px -20px rgba(15, 22, 40, 0.25);
}
html[data-theme="light"] .spinner {
  border-color: rgba(15, 22, 40, 0.1);
  border-top-color: var(--accent-strong);
}

/* OKX uses pure white as its accent (legible on dark, invisible on light).
   Override the accent variables so step numbers, bold names and the email
   chip stay legible against the light surface. */
html[data-theme="light"][data-brand="okx"] {
  --accent: #1a1d24;
  --accent-strong: #1a1d24;
  --accent-soft: rgba(15, 22, 40, 0.1);
}
html[data-theme="light"][data-brand="okx"] .brand__name { color: var(--text-primary); }
/* OKX logo is a white wordmark PNG; invert it so it renders dark in light theme. */
html[data-theme="light"][data-brand="okx"] .brand__logo { filter: invert(1); }

/* Windows: in light theme we soften the navy gradient and use a glass card */
html[data-theme="light"][data-brand="windows"] body {
  background: linear-gradient(135deg, #5eb7f5 0%, #0078d4 100%);
}
html[data-theme="light"][data-brand="windows"] .top-bar {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"][data-brand="windows"] .brand__name { color: #15181f; }
html[data-theme="light"][data-brand="windows"] .alert-bar {
  background: rgba(255, 255, 255, 0.85);
}
html[data-theme="light"][data-brand="windows"] .card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.5);
}
html[data-theme="light"][data-brand="windows"] .shield {
  background: radial-gradient(ellipse at center, #ffffff 0%, #e1ecf8 70%, #c4d8ee 100%);
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"][data-brand="windows"] .risk-tag {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"][data-brand="windows"] .foot {
  background: rgba(255, 255, 255, 0.85);
  border-top-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"][data-brand="windows"] .lang-switcher {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
}
html[data-theme="light"][data-brand="windows"] .page__subtitle b {
  color: #0078d4;
}
html[data-theme="light"][data-brand="windows"] .or-divider {
  color: rgba(15, 22, 40, 0.55);
}
html[data-theme="light"][data-brand="windows"] .or-divider::before,
html[data-theme="light"][data-brand="windows"] .or-divider::after {
  background: rgba(15, 22, 40, 0.18);
}

/* ============================================================
   Responsive · tablet (<= 960px)
   Sidebar drops below the card; spacing tightens slightly.
   ============================================================ */
@media (max-width: 960px) {
  .top-bar  { padding: 16px 22px; }
  .alert-bar { padding: 12px 22px; font-size: 12.5px; }
  .page     { padding: 28px 22px 20px; }

  .grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* Sidebar shrinks into a compact horizontal row */
  .side {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 26px;
  }

  .shield  { width: 120px; height: 120px; }
  .shield__icon { width: 56px; height: 64px; }
  .shield__check svg { width: 28px; height: 28px; }
  .risk-tag { min-width: 130px; }
}

/* ============================================================
   Responsive · mobile (<= 640px)
   ============================================================ */
@media (max-width: 640px) {
  html, body { font-size: 13.5px; }

  .top-bar {
    padding: 14px 16px;
    gap: 10px;
  }
  .brand__logo  { width: 26px; height: 26px; }
  .brand__name  { font-size: 18px; }
  .brand--wordmark .brand__logo { height: 22px; max-width: 130px; }

  .top-bar__right { gap: 8px; font-size: 11px; flex-shrink: 0; min-width: 0; }
  .top-bar__lock  { display: none; } /* keep the bar compact */

  .lang-switcher        { padding: 5px 8px; max-width: 100%; }
  .lang-switcher__icon  { display: none; } /* save horizontal space */
  .lang-switcher__select {
    font-size: 11.5px;
    max-width: 92px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .alert-bar {
    padding: 11px 14px;
    font-size: 11px;
    letter-spacing: 0.04em;
    gap: 8px;
    text-align: center;
  }
  .alert-bar svg { width: 16px; height: 16px; }
  .alert-bar__pulse { width: 7px; height: 7px; }

  .page {
    padding: 22px 16px 16px;
  }
  .page__title    { font-size: 22px; line-height: 1.25; }
  .page__subtitle { font-size: 13px; margin: 0 0 20px 0; }

  .grid { gap: 18px; }

  .card {
    padding: 18px 16px 20px;
    border-radius: 12px;
  }
  .card__text { font-size: 13px; line-height: 1.6; margin: 0 0 14px 0; }

  .email-chip {
    display: flex;            /* full width on phones */
    padding: 9px 12px;
    font-size: 12.5px;
    margin: 0 0 14px 0;
  }
  .email-chip__avatar { width: 26px; height: 26px; font-size: 12px; }

  .steps    { gap: 8px; margin: 0 0 18px 0; }
  .steps li { font-size: 13px; gap: 10px; }
  .steps__num { width: 20px; height: 20px; font-size: 11px; }

  .google-btn,
  .ms-btn,
  .naver-btn {
    padding: 13px 14px;
    font-size: 14.5px;
    gap: 10px;
  }
  .google-btn svg,
  .ms-btn svg,
  .naver-btn svg { width: 18px; height: 18px; }

  .or-divider { margin: 12px 0; font-size: 10px; }

  .note-bar {
    padding: 10px 12px;
    font-size: 11.5px;
    line-height: 1.45;
  }
  .note-bar svg { width: 14px; height: 14px; }

  /* Sidebar in tight mobile mode */
  .side {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px 18px;
    justify-content: center;
  }
  .shield        { width: 96px; height: 96px; }
  .shield__icon  { width: 42px; height: 50px; }
  .shield__check svg { width: 22px; height: 22px; }
  .status-label  { font-size: 10px; letter-spacing: 0.12em; }
  .risk-tag      { padding: 8px 14px; min-width: 120px; }
  .risk-tag__value { font-size: 15px; }

  .foot {
    padding: 12px 16px;
    font-size: 11.5px;
    text-align: center;
  }

  .overlay__box {
    padding: 24px 22px;
    max-width: 88%;
  }
  .overlay__title { font-size: 14px; }
  .overlay__text  { font-size: 12px; }
}

/* ============================================================
   Responsive · small phones (<= 380px)
   ============================================================ */
@media (max-width: 380px) {
  .brand__name { font-size: 16px; }
  .top-bar     { padding: 12px 12px; }

  .alert-bar   { padding: 10px 12px; font-size: 10.5px; }
  .alert-bar svg { width: 14px; height: 14px; }

  .page        { padding: 18px 12px 14px; }
  .page__title { font-size: 19px; }

  .card        { padding: 16px 14px 18px; }

  .google-btn,
  .ms-btn,
  .naver-btn {
    padding: 12px 12px;
    font-size: 13.5px;
  }

  /* Stack the side panel vertically again when even row layout
     becomes too cramped */
  .side {
    flex-direction: column;
    gap: 12px;
  }
}

/* ============================================================
   Responsive · short viewports (overlay fits in landscape)
   ============================================================ */
@media (max-height: 520px) {
  .overlay__box { padding: 22px 26px; gap: 12px; }
  .spinner      { width: 36px; height: 36px; }
}