:root {
  --so-primary: #34495e;
  --so-primary-700: #273942;
  --so-slate-100: #f1f5f9;
  --so-slate-200: #e2e8f0;
  --so-slate-400: #94a3b8;
  --so-slate-500: #64748b;
  --so-slate-600: #475569;
  --so-slate-800: #1e293b;
  --so-slate-900: #0f172a;
  --so-danger: #f1595c;
  --so-radius: 4px;
  --so-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.so-body {
  font-family: var(--so-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--so-slate-600);
  background: var(--so-slate-100);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--so-slate-800); }

/* ---------- top bar (fixed, full width) ---------- */
.so-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid var(--so-slate-200);
}
.so-logo img { display: block; width: 215px; height: 30px; object-fit: contain; }

/* language dropdown (portal: flag + label, menu on the right) */
.so-lang { position: relative; }
.so-lang summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--so-slate-800);
}
.so-lang summary::-webkit-details-marker { display: none; }
.so-lang summary img, .so-lang li img { width: 16px; height: 16px; border-radius: 50%; }
.so-chevron { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--so-slate-500); }
.so-lang ul {
  position: absolute; right: 0; margin: 8px 0 0; padding: 4px 0; list-style: none; min-width: 160px;
  background: #fff; border: 1px solid var(--so-slate-100); border-radius: var(--so-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); z-index: 9999;
}
.so-lang li a, .so-lang li option { display: flex; align-items: center; gap: 8px; padding: 8px 16px; text-decoration: none; color: var(--so-slate-600); }
.so-lang li a:hover, .so-lang li a.is-active { background: var(--so-slate-100); color: var(--so-slate-900); }

/* ---------- split layout ---------- */
.so-auth-wrapper { display: flex; min-height: 100vh; width: 100%; }
.so-left { display: none; flex: 1; background: var(--so-slate-100); overflow: hidden; }
.so-left img { width: 100%; height: 100%; object-fit: cover; display: block; }
.so-right { flex: 1; display: flex; flex-direction: column; background: #fff; min-height: 100vh; }
@media (min-width: 1024px) { .so-left { display: block; } }

.so-auth-box {
  width: 100%; max-width: 524px; margin: auto; padding: 28px;
  padding-top: 120px;
}
@media (min-width: 768px) { .so-auth-box { padding: 120px 42px 44px; } }

.so-heading { text-align: center; margin-bottom: 40px; }
.so-heading h1 { font-size: 24px; line-height: 32px; font-weight: 500; color: var(--so-slate-900); margin: 0 0 12px; }
.so-subtitle { color: var(--so-slate-500); font-size: 16px; margin: 0; }

.so-footer { text-align: center; font-size: 14px; color: var(--so-primary); padding: 24px 0 40px; }

/* ---------- forms ---------- */
.so-form { display: flex; flex-direction: column; gap: 16px; }
.so-field { position: relative; }
.so-label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 24px; font-weight: 500; color: var(--so-slate-600); cursor: pointer; }
.so-input {
  display: block; width: 100%; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--so-slate-900);
  background: #fff; border: 1px solid var(--so-slate-200); border-radius: var(--so-radius);
  transition: box-shadow .3s ease-in-out, border-color .3s ease-in-out;
}
.so-input::placeholder { color: var(--so-slate-400); }
.so-input:focus { outline: none; box-shadow: 0 0 0 1px var(--so-slate-600); }
.so-input[aria-invalid="true"], .has-error .so-input { border-color: var(--so-danger); }
.so-input-code { font-size: 22px; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.so-input-group { position: relative; }
.so-input-group .so-input { padding-right: 44px; }
.so-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; color: var(--so-slate-500);
}
.so-eye::before {
  content: ""; display: block; width: 20px; height: 20px; margin: auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/></svg>") center / contain no-repeat;
}
.so-eye.is-visible::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/></svg>");
}

.so-help { margin: 0; color: var(--so-slate-500); }
.so-muted { color: var(--so-slate-500); }
.so-sep { color: var(--so-slate-400); padding: 0 4px; }

/* ---------- buttons ---------- */
.so-btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-weight: 500; font-size: 14px; line-height: 24px;
  padding: 10px 16px; border-radius: var(--so-radius); border: 0; cursor: pointer;
  transition: all .15s; text-decoration: none;
}
@media (min-width: 768px) { .so-btn { padding: 12px 24px; } }
.so-btn-primary { background: var(--so-primary); color: #fff; }
.so-btn-primary:hover { box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(52, 73, 94, 0.8); }
.so-btn-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; font-size: 14px; color: var(--so-slate-800); text-decoration: underline; cursor: pointer; }
.so-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: center; font-size: 14px; }

/* ---------- alerts ---------- */
.so-alert { padding: 10px 14px; border-radius: var(--so-radius); font-size: 14px; border: 1px solid transparent; }
.so-alert-danger { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.so-alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.so-alert-warning { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.so-alert-info { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; }
.so-dev { display: flex; flex-direction: column; gap: 6px; }
.so-dev code { font-size: 16px; font-weight: 600; letter-spacing: .05em; }

/* ---------- misc ---------- */
.so-info p { margin-top: 0; }
.so-links { padding-left: 18px; }