@font-face {
  font-family: "Vazirmatn";
  src: url("../landing/Vazirmatn-full.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

:root {
  color-scheme: light;
  --auth-page: #f8fafc;
  --auth-surface: #fff;
  --auth-surface-soft: #fbfcff;
  --auth-text: #111827;
  --auth-muted: #6b7280;
  --auth-line: #e8edf5;
  --auth-line-soft: #f1f4f9;
  --auth-blue: #3159d4;
  --auth-blue-dark: #284fc6;
  --auth-blue-soft: #eef2ff;
  --auth-blue-line: #cbd7ff;
  --auth-active: #f1efff;
  --auth-focus: rgb(49 89 212 / 18%);
  --auth-shadow: 0 10px 30px rgb(17 24 39 / 3.5%);
  --auth-radius-card: 12px;
  --auth-radius-control: 9px;
  --auth-font: "Vazirmatn", "IRANSans", Tahoma, "Segoe UI", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  background: var(--auth-page);
}

body {
  margin: 0;
  min-width: 0;
  color: var(--auth-text);
  font-family: var(--auth-font);
}

button,
a,
input,
select { -webkit-tap-highlight-color: transparent; }

button,
input,
select {
  min-width: 0;
  font: inherit;
}

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

.magnetis-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: var(--auth-text);
  direction: ltr;
  text-decoration: none;
}

.brand-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
  color: var(--auth-text);
  direction: rtl;
  line-height: 1.45;
  text-align: right;
}

.brand-copy strong {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 900;
}

.brand-copy small {
  color: #525b6c;
  font-size: clamp(7px, .58vw, 9px);
  font-weight: 650;
  white-space: nowrap;
}

.magnet-mark {
  position: relative;
  width: clamp(32px, 2.7vw, 38px);
  aspect-ratio: .92;
  flex: 0 0 clamp(32px, 2.7vw, 38px);
  transform: rotate(13deg);
  border: 3px solid var(--auth-blue);
  border-top: 0;
  border-radius: 0 0 17px 17px;
}

.magnet-mark::before {
  content: "";
  position: absolute;
  inset: 4px 5px 5px;
  border: 2px solid #8fa6ee;
  border-top: 0;
  border-radius: 0 0 11px 11px;
}

.magnet-dot {
  position: absolute;
  top: -5px;
  width: 6px;
  height: 6px;
  border: 2px solid var(--auth-blue);
  border-radius: 50%;
  background: var(--auth-surface);
}

.magnet-dot-right { right: -5px; }
.magnet-dot-left { left: -5px; }

@media (max-width: 420px) {
  .brand-copy small { white-space: normal; }
}