/* Shared header, footer and auth styling for every page of the site.
   Theme is one decision for the whole site: `data-theme` on <html> is always
   present (site.js writes it before first paint), so a page never has to guess.
   The tokens are namespaced with --site-* so a page can keep its own palette
   underneath — the workbench stays a workbench, the blog stays a blog. */
:root, :root[data-theme="light"] {
  --site-bg:#FFFFFF;
  --site-ink:#172033;
  --site-ink-2:#64748B;
  --site-border:#E2E8F0;
  --site-brand:#2563EB;
  --site-brand-ink:#FFFFFF;
  --site-soft:#F1F5F9;
  --site-footer:#F8FBFC;
  --site-footer-ink:#526B79;
}
:root[data-theme="dark"] {
  --site-bg:#0E1718;
  --site-ink:#E6F1F2;
  --site-ink-2:#93A7A9;
  --site-border:#253031;
  --site-brand:#29E3E3;
  --site-brand-ink:#04201F;
  --site-soft:#141F20;
  --site-footer:#070B12;
  --site-footer-ink:#8B95A5;
}

/* The chrome sits on top of pages with their own link and text rules (the
   workbench underlines every anchor), so it restates the basics itself. */
.site-head, .site-foot {
  font-family:'Vazirmatn','IRANSans',Tahoma,sans-serif;
  direction:rtl; text-align:right; box-sizing:border-box;
}
:root[lang="en"] .site-head, :root[lang="en"] .site-foot { direction:ltr; text-align:left; }
.site-head *, .site-foot * { box-sizing:border-box; }
.site-head a, .site-foot a { text-decoration:none; }
.site-head a:hover, .site-foot a:hover { text-decoration:none; }

.site-head {
  position:sticky; top:0; z-index:60; background:var(--site-bg);
  border-bottom:1px solid var(--site-border);
}
.site-trial {
  width:100%; padding:6px 16px; text-align:center;
  color:var(--site-brand); background:color-mix(in srgb, var(--site-brand) 14%, var(--site-bg));
  border-bottom:1px solid color-mix(in srgb, var(--site-brand) 22%, transparent);
  font-size:12px; font-weight:800;
}
.site-head .row {
  display:flex; align-items:center; gap:24px; height:64px;
  max-width:1200px; margin:0 auto; padding:0 24px;
}
@media (max-width:640px) { .site-head .row { height:56px; padding:0 16px; gap:12px; } }
.site-logo { display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px; color:var(--site-ink); flex:none; }
.site-logo img { height:24px; }
.site-nav { display:flex; gap:20px; }
.site-nav a { font-size:14.5px; color:var(--site-ink-2); position:relative; padding:4px 2px; white-space:nowrap; transition:color .16s; }
.site-nav a:hover { color:var(--site-ink); }
.site-nav a[aria-current="page"] { color:var(--site-brand); font-weight:700; }
.site-nav a[aria-current="page"]::after {
  content:''; position:absolute; inset:auto 0 -2px 0; height:2px;
  background:var(--site-brand); border-radius:2px;
}
.site-head .sp { flex:1; }
.site-tools { display:flex; align-items:center; gap:8px; flex:none; }

/* The two switches and the login button share one shape. */
.site-icon {
  width:38px; height:38px; border-radius:10px; flex:none; padding:0;
  border:1px solid var(--site-border); background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--site-ink);
}
.site-icon:hover { border-color:var(--site-brand); color:var(--site-brand); }
.site-icon svg { width:18px; height:18px; }
.site-icon.wide { width:auto; gap:6px; padding:0 11px; font-size:13px; font-weight:700; }
.site-cta {
  height:38px; padding:0 18px; border-radius:10px; border:none; cursor:pointer;
  background:var(--site-brand); color:var(--site-brand-ink);
  font-size:14px; font-weight:700; font-family:inherit;
  display:flex; align-items:center;
}
.site-cta:hover { filter:brightness(.94); }
.site-signup {
  min-height:38px; padding:0 14px; border-radius:10px;
  border:1px solid var(--site-border); background:transparent;
  color:var(--site-ink); cursor:pointer;
  font-size:12px; font-weight:700; display:flex; align-items:center; white-space:nowrap;
  font-family:inherit;
}
.site-signup:hover { border-color:var(--site-brand); color:var(--site-brand); }
.site-burger { display:none; }
/* A long account name must not push the header wider than the page. */
.site-head .row .site-cta { max-width:220px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block; line-height:38px; }
@media (max-width:1180px) {
  /* Only the button in the top row goes away; the drawer keeps its own. */
  .site-nav, .site-head .row .site-cta, .site-head .row .site-signup { display:none; }
  .site-burger { display:flex; }
}

.site-mobile { display:none; background:var(--site-bg); border-top:1px solid var(--site-border); }
.site-mobile.open { display:block; }
.site-mobile a {
  display:block; padding:13px 24px; line-height:1.7; color:var(--site-ink);
  border-bottom:1px solid var(--site-border); font-size:15px;
}
.site-mobile a[aria-current="page"] { color:var(--site-brand); font-weight:700; }
.site-mobile .site-cta { margin:14px 24px 18px; width:calc(100% - 48px); justify-content:center; }
.site-mobile .site-signup { margin:0 24px 18px; width:calc(100% - 48px); justify-content:center; text-align:center; }

/* ---------------- footer ---------------- */
.site-foot {
  background:var(--site-footer); color:var(--site-footer-ink); padding:52px 0 26px;
  line-height:2;
}
.site-foot .inner { max-width:1200px; margin:0 auto; padding:0 24px; }
@media (max-width:640px) { .site-foot .inner { padding:0 16px; } }
.site-foot .cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:32px; }
@media (max-width:860px) { .site-foot .cols { grid-template-columns:1fr; gap:24px; } }
.site-foot h4 { color:var(--site-ink); font-size:14px; margin:0 0 12px; }
.site-foot a, .site-foot p { font-size:13.5px; color:var(--site-footer-ink); }
.site-foot .cols a { display:block; }
.site-foot a:hover { color:var(--site-brand); }
.site-foot .brand { display:flex; align-items:center; gap:8px; color:var(--site-ink); font-weight:800; font-size:17px; margin-bottom:10px; }
.site-foot .brand img { height:22px; }
.site-foot .site-enamad {
  display:inline-flex; width:125px; height:136px; border-radius:12px; margin-top:16px;
  background:url('/assets/assets/home-page/enamad-official.png') center/contain no-repeat;
}
.site-foot .site-enamad img { width:125px; height:136px; object-fit:contain; cursor:pointer; }
.site-about { margin-top:30px; font-size:13px; max-width:900px; }
/* The disclaimer is plain text; only its label carries the warning colour. */
.site-disclaimer { margin-top:12px; font-size:12.5px; line-height:2.05; max-width:900px; }
.site-disclaimer b { color:#F0A0A6; font-weight:700; }
.site-copy {
  margin-top:28px; padding-top:18px; border-top:1px solid var(--site-border);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px;
}

/* ---------------- auth page ---------------- */
.auth-wrap {
  max-width:1060px; margin:0 auto; padding:56px 24px 80px;
  display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch;
}
@media (max-width:860px) { .auth-wrap { grid-template-columns:1fr; padding:32px 16px 56px; } }
.auth-card {
  background:var(--site-bg); border:1px solid var(--site-border);
  border-radius:18px; padding:28px;
}
.auth-card.glow {
  border-color:color-mix(in srgb, var(--site-brand) 45%, var(--site-border));
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--site-brand) 9%, var(--site-bg)), var(--site-bg));
  text-align:center;
}
@media (max-width:860px) { .auth-card.glow { display:none; } }
/* The form card is centred: mark, heading and field labels all sit on the
   same middle line. Only the inputs keep their own direction. */
.auth-card { text-align:center; }
.auth-logo { display:flex; align-items:center; justify-content:center; gap:9px;
  font-weight:800; font-size:20px; color:var(--site-ink); margin-bottom:26px; }
.auth-logo img { height:26px; }
.auth-card h1 { font-size:27px; font-weight:800; margin:0 0 24px; color:var(--site-ink); }
.auth-card h1:not(:last-child) { margin-bottom:8px; }
.auth-card .sub { color:var(--site-ink-2); font-size:14.5px; margin:0 0 24px; }
.auth-card form { text-align:center; }
/* The mode swap is a fade-and-slide, like the AnimatedSwitcher in Dart. */
.auth-swap { animation:authIn .28s cubic-bezier(.22,.9,.3,1); }
@keyframes authIn { from { opacity:0; transform:translateX(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .auth-swap { animation:none; } }

.auth-field { margin-bottom:14px; }
.auth-field label { display:block; font-size:13px; color:var(--site-ink-2); margin-bottom:6px; text-align:center; }
.auth-input { position:relative; display:flex; align-items:center; }
.auth-input svg { position:absolute; inset-inline-start:13px; width:18px; height:18px; color:var(--site-ink-2); pointer-events:none; }
.auth-input input {
  width:100%; height:52px; padding-inline:42px 14px; border-radius:12px;
  border:1px solid var(--site-border); background:var(--site-soft); color:var(--site-ink);
  font-family:inherit; font-size:15px;
}
.auth-input input:focus { outline:none; border-color:var(--site-brand); }
.auth-input input.ltr { direction:ltr; text-align:start; letter-spacing:.04em; }
.auth-error { color:#E5484D; font-size:13.5px; margin:0 0 4px; min-height:20px; }
.auth-submit {
  width:100%; height:52px; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(120deg, var(--site-brand), color-mix(in srgb, var(--site-brand) 55%, #7C5CFF));
  color:var(--site-brand-ink); font-family:inherit; font-size:15.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.auth-submit:hover { filter:brightness(1.06); }
.auth-submit[disabled] { cursor:default; filter:none; opacity:.75; }
.auth-spin {
  width:18px; height:18px; border-radius:50%; border:2px solid currentColor;
  border-top-color:transparent; animation:authSpin .8s linear infinite;
}
@keyframes authSpin { to { transform:rotate(360deg); } }
.auth-modes { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.auth-modes button {
  background:none; border:none; cursor:pointer; font-family:inherit; font-size:13.5px;
  color:var(--site-brand); padding:7px 10px; border-radius:8px;
}
.auth-modes button:hover { background:var(--site-soft); }
.auth-note { margin-top:14px; font-size:12.5px; color:var(--site-ink-2); text-align:center; }
/* The mark leads the panel, so it is deliberately larger than the one on the
   form card next to it. */
.auth-brand { display:flex; justify-content:center; }
.auth-brand img { height:130px; width:auto; }
@media (max-width:1000px) { .auth-brand img { height:104px; } }
.auth-card.glow h2 { font-size:26px; font-weight:900; margin:26px 0 10px; color:var(--site-ink); }
.auth-card.glow p { color:var(--site-ink-2); line-height:1.9; font-size:14px; margin:0; }
.auth-crowd { font-size:17px !important; font-weight:700; color:var(--site-brand) !important; }
.auth-spark { margin-top:24px; width:100%; height:56px; }

/* ---------------- page information ----------------
   Plain text in each page's own HTML: what the page is, how its numbers are
   made, a few questions and the risk note, readable before (and without)
   JavaScript. It sits under the page's app, above the footer. Persian
   always: the section carries its own lang and dir, so the EN toggle (which
   flips the chrome only) leaves it as it is. The methodology and risk pages
   are made of the same pieces (.site-doc). */
.site-info {
  font-family:'Vazirmatn','IRANSans',Tahoma,sans-serif; direction:rtl; text-align:right;
  background:var(--site-bg); color:var(--site-ink); border-top:1px solid var(--site-border);
  line-height:2; -webkit-font-smoothing:antialiased;
}
.site-info *, .site-info *::before, .site-info *::after { box-sizing:border-box; }
/* The whole page's width (the owner, 27 October 2026: «اینارو اندازه کل صفحه بکن، در هر صفحه‌ای که وجود داره»):
   no 1200 px frame and no 860 px text column any more, only the page gutter. */
.site-info .inner { max-width:none; margin:0; padding:40px 24px 44px; }
@media (max-width:640px) { .site-info .inner { padding:28px 16px 32px; } }
.site-info .site-info-body { max-width:none; }
.site-info .site-eyebrow { display:block; margin:0 0 4px; color:var(--site-brand); font-size:13px; font-weight:700; }
.site-info h1 { margin:0 0 12px; color:var(--site-ink); font-size:24px; line-height:1.65; font-weight:800; }
.site-info h2 { margin:30px 0 12px; color:var(--site-ink); font-size:18px; line-height:1.7; font-weight:800; }
.site-info h3 { margin:20px 0 6px; color:var(--site-ink); font-size:15.5px; line-height:1.8; font-weight:800; }
@media (max-width:640px) { .site-info h1 { font-size:20px; } .site-info h2 { font-size:17px; } }
.site-info p, .site-info li, .site-info dd { margin:0 0 12px; color:var(--site-ink-2); font-size:15px; line-height:2.05; }
.site-info ul, .site-info ol { margin:0 0 14px; padding-inline-start:22px; }
.site-info li { margin-bottom:6px; }
.site-info b, .site-info strong { color:var(--site-ink); }
.site-info a { color:var(--site-brand); text-decoration:underline; text-underline-offset:3px; }
.site-info a:hover { text-decoration-thickness:2px; }
.site-info a:focus-visible, .site-info summary:focus-visible {
  outline:2px solid var(--site-brand); outline-offset:2px; border-radius:6px;
}
.site-info .site-latin { direction:ltr; unicode-bidi:isolate; }
/* A link to a heading here (methodology.html#copytrade, …) lands below the
   sticky header (65 px, 57 on phones), not under it. */
.site-info [id] { scroll-margin-top:80px; }
.site-info .site-info-links { display:flex; flex-wrap:wrap; gap:6px 20px; margin:2px 0 0; font-size:14px; font-weight:700; }
.site-info .site-info-links a { text-decoration:none; }
.site-info .site-info-links a:hover { text-decoration:underline; }
.site-info details {
  margin:0 0 10px; border:1px solid var(--site-border); border-radius:12px; background:var(--site-soft);
}
.site-info summary {
  position:relative; display:block; cursor:pointer; list-style:none;
  padding:12px 16px; padding-inline-start:42px;
  color:var(--site-ink); font-size:15px; font-weight:700; line-height:1.8;
}
.site-info summary::-webkit-details-marker { display:none; }
.site-info summary::before {
  content:'+'; position:absolute; inset-inline-start:14px; top:12px; width:18px; text-align:center;
  color:var(--site-brand); font-size:18px; font-weight:700; line-height:1.5;
}
.site-info details[open] > summary::before { content:'−'; }
.site-info details > p { margin:0; padding:0 16px 14px; }
.site-info .site-risk {
  margin:26px 0 0; padding:14px 16px; border-radius:12px;
  border:1px solid color-mix(in srgb, #D97706 40%, var(--site-border)); border-inline-start:4px solid #D97706;
  background:color-mix(in srgb, #D97706 7%, var(--site-bg));
}
.site-info .site-risk p { margin:0 0 6px; color:var(--site-ink); font-size:14px; }
.site-info .site-risk p:last-child { margin-bottom:0; }
.site-info .site-risk b { color:#B45309; }
:root[data-theme="dark"] .site-info .site-risk b { color:#F5B85A; }
.site-info .site-updated { margin:0 0 18px; color:var(--site-ink-2); font-size:13px; }
.site-info dl { margin:0 0 16px; border:1px solid var(--site-border); border-radius:12px; overflow:hidden; }
.site-info dl > div { padding:12px 16px; border-top:1px solid var(--site-border); }
.site-info dl > div:first-child { border-top:0; }
.site-info dt { margin:0 0 2px; color:var(--site-ink); font-size:14.5px; font-weight:800; }
.site-info dd { margin:0; font-size:14.5px; }
/* A whole page of it (methodology.html, risk.html): the page's own ground. */
body.site-doc { margin:0; background:var(--site-bg); color:var(--site-ink); }
body.site-doc .site-info { border-top:0; }
body.site-doc .site-info .inner { padding-top:32px; }
/* Until a tab's app has drawn itself (its container still empty), it keeps
   the first screen, so the page information under it does not show at the
   top for a moment and then jump down. Scripting only: without JavaScript
   the information is what the page has to show. */
@media (scripting: enabled) {
  .ct-page:empty, .g-page > .g-content:empty { min-height:calc(100vh - 64px); }
}
@media (scripting: enabled) and (max-width:640px) {
  .ct-page:empty, .g-page > .g-content:empty { min-height:calc(100vh - 56px); }
}