:root {
  --ink: #08172f;
  --muted: #6b7482;
  --gold: #d5a83e;
  --gold-light: #f0cf78;
  --navy: #07162e;
  --line: #dfe3e9;
  --paper: #f8f9fb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Vazirmatn", Tahoma, sans-serif;
}

button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.page-shell { min-height: 100vh; display: grid; grid-template-columns: 48% 52%; direction: ltr; }

.intro {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 52px clamp(40px, 6vw, 92px);
  color: #f3f6fb;
  background:
    radial-gradient(circle at 8% 10%, rgba(213, 168, 62, .15), transparent 30%),
    radial-gradient(circle at 85% 70%, rgba(26, 68, 131, .24), transparent 35%),
    linear-gradient(150deg, #0a1c3b 0%, #040d1c 74%);
  direction: rtl;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.intro::before, .intro::after { content: ""; position: absolute; border: 1px solid rgba(213, 168, 62, .1); border-radius: 50%; }
.intro::before { width: 520px; height: 520px; left: -240px; bottom: -230px; }
.intro::after { width: 360px; height: 360px; left: -160px; bottom: -150px; }

.terminal-label { direction: ltr; position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: #8e9ab0; font: 600 10px/1 Arial, sans-serif; letter-spacing: 1.8px; }
.terminal-label span { width: 8px; height: 8px; border: 2px solid var(--gold); transform: rotate(45deg); box-shadow: 0 0 12px rgba(213,168,62,.6); }
.brand-logo { display: block; width: 180px; height: 150px; overflow: hidden; margin: -22px 0 18px auto; }
.brand-logo img { display: block; width: 100%; height: auto; transform: translateY(-12px); }

.intro-copy { position: relative; z-index: 1; max-width: 600px; margin: auto 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #9ca7ba; font-size: 13px; font-weight: 500; letter-spacing: .5px; }
.eyebrow span { width: 22px; height: 1px; background: var(--gold); }
.intro h1 { margin: 22px 0 20px; font-size: clamp(40px, 5vw, 68px); line-height: 1.25; letter-spacing: -2.5px; }
.intro h1 em { color: var(--gold-light); font-style: normal; }
.intro-text { max-width: 510px; color: #9ca7ba; font-size: 16px; line-height: 2; }

.market-terminal { position: relative; z-index: 1; width: min(520px, 100%); border: 1px solid rgba(213,168,62,.18); border-radius: 18px; padding: 18px; background: rgba(4,13,28,.74); box-shadow: 0 24px 70px rgba(0,0,0,.28); backdrop-filter: blur(12px); direction: rtl; }
.market-head { display: flex; justify-content: space-between; align-items: flex-start; }
.market-head strong { display: block; direction: ltr; font: 600 12px/1.2 Arial, sans-serif; letter-spacing: .6px; }
.market-head small { display: block; margin-top: 5px; color: #6f7d94; font-size: 9px; }
.market-price { text-align: left; }
.market-price strong { font-size: 15px; }
.market-price span { color: #35d399; font: 600 10px Arial, sans-serif; }
.chart-area { position: relative; height: 112px; margin: 14px 0 12px; direction: ltr; }
.chart-area svg { width: 100%; height: 100%; overflow: visible; }
.chart-area .grid { fill: none; stroke: rgba(150,165,190,.08); stroke-width: 1; }
.chart-area .area { fill: url(#chartFill); }
.chart-area .line { fill: none; stroke: var(--gold); stroke-width: 2; }
.chart-area circle { fill: var(--gold-light); filter: drop-shadow(0 0 5px var(--gold)); }
.candles { position: absolute; inset: 0; opacity: .35; }
.candles i { position: absolute; left: var(--x); top: var(--top); width: 4px; height: var(--h); background: #35d399; box-shadow: 0 -7px 0 -1px #35d399, 0 7px 0 -1px #35d399; }
.candles i.down { background: #e25d68; box-shadow: 0 -7px 0 -1px #e25d68, 0 7px 0 -1px #e25d68; }
.ai-signal { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid rgba(213,168,62,.12); border-radius: 11px; background: rgba(213,168,62,.05); }
.ai-icon { flex: 0 0 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 8px; color: var(--gold-light); font: 700 10px Arial; }
.ai-signal div:nth-child(2) { flex: 1; }
.ai-signal strong, .ai-signal small { display: block; }
.ai-signal strong { font-size: 10px; }
.ai-signal small { margin-top: 3px; color: #738098; font-size: 8px; }
.confidence { text-align: left; }
.confidence strong { color: #35d399; font-size: 14px; }

.login-panel { min-height: 100vh; padding: 44px clamp(28px, 7vw, 110px) 24px; background: #fbfdfc; direction: rtl; display: flex; flex-direction: column; }
.login-wrap { width: min(440px, 100%); margin: auto; }
.form-header { margin-bottom: 34px; }
.status { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: #638176; font-size: 12px; }
.status span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(213, 168, 62, .14); }
.form-header h2 { margin: 0 0 8px; font-size: 32px; letter-spacing: -1px; }
.form-header > p:last-child { margin: 0; color: var(--muted); font-size: 14px; }

.field { margin-bottom: 20px; }
.field label, .label-row { font-size: 13px; font-weight: 600; }
.label-row { display: flex; justify-content: space-between; align-items: center; }
.label-row a { color: #9a7114; font-size: 12px; font-weight: 500; }
.input-wrap { position: relative; margin-top: 8px; }
.input-wrap input { width: 100%; height: 54px; padding: 0 50px 0 16px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: #fff; color: var(--ink); text-align: left; transition: border .2s, box-shadow .2s; }
.input-wrap input::placeholder { color: #a7b2ae; }
.input-wrap input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(213, 168, 62, .12); }
.input-wrap > svg, .password-toggle { position: absolute; top: 50%; right: 17px; transform: translateY(-50%); }
.input-wrap svg { width: 20px; height: 20px; fill: none; stroke: #8a9893; stroke-width: 1.5; }
.password-toggle { border: 0; padding: 0; background: transparent; cursor: pointer; line-height: 0; }
.error { display: block; min-height: 16px; margin-top: 4px; color: #b83e47; font-size: 11px; }
.field.invalid input { border-color: #d86b73; }

.remember { display: flex; align-items: center; gap: 9px; width: fit-content; margin: -2px 0 22px; color: #52625d; font-size: 12px; cursor: pointer; }
.remember input { position: absolute; opacity: 0; }
.checkmark { width: 18px; height: 18px; border: 1px solid #cbd6d2; border-radius: 5px; background: #fff; }
.remember input:checked + .checkmark { background: var(--navy); border-color: var(--navy); box-shadow: inset 0 0 0 4px var(--navy); }
.remember input:checked + .checkmark::after { content: "✓"; display: block; color: var(--gold-light); text-align: center; font: 12px/16px Arial; }

.submit-button, .google-button { width: 100%; height: 54px; border-radius: 12px; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.submit-button { display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; background: var(--navy); color: #f5f7fb; font-weight: 600; box-shadow: 0 10px 25px rgba(7, 22, 46, .17); }
.submit-button:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(7, 22, 46, .24); }
.submit-button svg { width: 18px; fill: none; stroke: var(--gold-light); stroke-width: 1.8; }
.submit-button.loading { opacity: .75; pointer-events: none; }
.form-message { min-height: 18px; margin: 8px 0 0; color: #9a7114; text-align: center; font-size: 12px; }

.divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: #99a49f; font-size: 11px; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.google-button { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); background: #fff; color: #263630; direction: ltr; font-weight: 500; }
.google-button:hover { border-color: #b7c7c1; background: #f9fbfa; }
.google-button svg { width: 19px; }
.signup { margin: 26px 0 0; color: #7c8984; text-align: center; font-size: 12px; }
.signup a { color: #9a7114; font-weight: 600; }

footer { display: flex; justify-content: center; gap: 22px; margin-top: 42px; color: #96a19d; font-size: 10px; }
footer a:hover, .signup a:hover, .label-row a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .page-shell { display: block; }
  .intro { display: none; }
  .login-panel { padding-top: 34px; }
  .brand-logo { width: 150px; height: 125px; margin-bottom: 26px; }
  .brand-logo img { transform: translateY(-10px); }
}

@media (max-width: 480px) {
  .login-panel { padding: 28px 20px 20px; }
  .brand-logo { margin-bottom: 22px; }
  .form-header h2 { font-size: 28px; }
  footer { gap: 12px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}