/* ════════ CogMap Flagship — shell + backdrop ════════
   توکن‌ها و انیمیشن‌ها از cogmap-tokens.css + cogmap-3d.css (در index.html لینک می‌شوند) می‌آیند؛
   استایلِ مؤلفه‌ها/صحنهٔ بازی از engine/assets/app.css؛ نماها CSSِ خودشان را دارند/تزریق می‌کنند.
   این فایل فقط «شِلِ» سراسری است: بدنه، پس‌زمینهٔ عصبی، نوارِ بالا، و ناحیهٔ نمایش. */

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--cm-bg,#05060d); color:var(--cm-text,#e9edf8);
  font-family:'Vazirmatn',Tahoma,'Segoe UI',sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
*{ box-sizing:border-box; }

/* ── پس‌زمینهٔ ثابتِ سینمایی (مش + گرید + اوربِ شناور) ── */
.cm-backdrop{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.cm-backdrop .cm-mesh{ position:absolute; inset:-20%;
  background:
    radial-gradient(40% 40% at 18% 22%, rgba(45,212,191,.12), transparent 70%),
    radial-gradient(42% 42% at 82% 30%, rgba(99,102,241,.13), transparent 72%),
    radial-gradient(46% 46% at 50% 92%, rgba(245,179,1,.08), transparent 72%); }
.cm-backdrop .cm-grid{ position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 35%, #000, transparent 100%);
          mask-image:radial-gradient(75% 65% at 50% 35%, #000, transparent 100%); }
.cm-orb{ position:absolute; border-radius:50%; filter:blur(110px); opacity:.5; animation:cmFloat 13s ease-in-out infinite; }
.cm-orb.a{ width:420px; height:420px; background:var(--cm-teal,#2dd4bf); top:-90px; right:-60px; }
.cm-orb.b{ width:480px; height:480px; background:var(--cm-indigo,#6366f1); bottom:-140px; left:-80px; animation-delay:-4s; }
.cm-orb.c{ width:300px; height:300px; background:var(--cm-gold,#f5b301); top:42%; left:46%; opacity:.3; animation-delay:-8s; }
@keyframes cmFloat{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(2.4%,-3%) scale(1.07);} }

/* ── نوارِ بالای اپ (در نماهای داخلی؛ صفحهٔ فرود نوارِ خودش را دارد) ── */
#cm-app{ position:relative; z-index:1; min-height:100vh; }
.cm-topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:12px; height:62px; padding:0 clamp(14px,4vw,30px);
  background:rgba(5,6,13,.66); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.07); }
.cm-topbar .brand{ display:flex; align-items:baseline; gap:7px; cursor:pointer; font-weight:800; font-size:20px; letter-spacing:-.02em; }
.cm-topbar .brand b{ background:var(--cm-grad-brand,linear-gradient(135deg,#2dd4bf,#6366f1 52%,#f5b301)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cm-topbar .brand small{ font-family:'Michroma',sans-serif; font-size:9px; letter-spacing:3px; color:var(--cm-text-mute,rgba(233,237,248,.42)); }
.cm-topbar .right{ display:flex; align-items:center; gap:10px; }
.cm-guest-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:rgba(45,212,191,.10); border:1px solid rgba(45,212,191,.30); font-size:12.5px; color:var(--cm-text-soft,rgba(233,237,248,.82)); }
.cm-guest-chip .av{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:11px; color:#04140f;
  background:var(--cm-grad-teal,linear-gradient(135deg,#2dd4bf,#22d3ee)); }
.cm-topbar .navlink{ background:none; border:0; color:var(--cm-text-soft,rgba(233,237,248,.82)); font:inherit; font-size:13.5px; cursor:pointer; padding:8px 10px; border-radius:10px; }
.cm-topbar .navlink:hover{ color:var(--cm-text,#e9edf8); background:rgba(255,255,255,.05); }

/* ناحیهٔ نمایشِ نما */
#cm-view{ position:relative; z-index:1; }

/* لودر اولیه */
.cm-boot{ display:grid; place-items:center; min-height:70vh; gap:14px; color:var(--cm-text-dim,rgba(233,237,248,.6)); }
.cm-boot .ring{ width:42px; height:42px; border-radius:50%; border:3px solid rgba(255,255,255,.12);
  border-top-color:var(--cm-teal,#2dd4bf); animation:cmSpin 1s linear infinite; }
@keyframes cmSpin{ to{ transform:rotate(360deg);} }

/* ── نوارِ «نمونهٔ نمایشی» (روی داشبورد/گزارشِ حالتِ نمونه) ── */
.cm-sample-banner{ position:sticky; top:62px; z-index:25; display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px;
  padding:10px clamp(14px,4vw,30px); background:linear-gradient(90deg,rgba(245,179,1,.14),rgba(99,102,241,.12));
  border-bottom:1px solid rgba(245,179,1,.28); backdrop-filter:blur(14px); }
.cm-sample-tag{ flex-shrink:0; display:inline-flex; align-items:center; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:800;
  color:#04140f; background:var(--cm-gold,#f5b301); }
.cm-sample-txt{ flex:1 1 280px; min-width:0; font-size:12.8px; line-height:1.7; color:var(--cm-text-soft,rgba(233,237,248,.82)); }
.cm-sample-cta{ flex-shrink:0; margin-inline-start:auto; padding:9px 18px; border-radius:999px; font:inherit; font-size:13px; font-weight:800; cursor:pointer;
  color:#04140f; border:0; background:var(--cm-grad-teal,linear-gradient(135deg,#2dd4bf,#22d3ee)); box-shadow:0 14px 34px -14px rgba(45,212,191,.55); }
.cm-sample-cta:hover{ transform:translateY(-1px); }
@media (max-width:560px){ .cm-sample-cta{ width:100%; margin-inline-start:0; } }

/* دسترس‌پذیری */
*:focus-visible{ outline:2px solid var(--cm-teal,#2dd4bf); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){ .cm-orb{ animation:none; } .cm-boot .ring{ animation-duration:2.4s; } }
.cm-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }