/* global React */

/* ============================================================
   ASSESSMENT DELIVERABLE — Full sample dashboard preview
   Matches the dark "real product UI" feel of the homepage hero,
   but expanded into the full single-page deliverable a client
   would actually receive.
   ============================================================ */

function AssessmentDashboard({ motion = true }) {
  const [slide, setSlide] = React.useState(0);
  React.useEffect(() => {
    if (!motion) return;
    const id = setInterval(() => setSlide(s => (s + 1) % 3), 5000);
    return () => clearInterval(id);
  }, [motion]);
  const tabs = [
    { tn: "01 /", lbl: "Readiness Dashboard" },
    { tn: "02 /", lbl: "Findings & Quick Wins" },
    { tn: "03 /", lbl: "Recommended Path" },
  ];
  return (
    <div className="adash">
      <style>{adashStyles}</style>

      {/* Browser chrome */}
      <div className="adash-chrome">
        <div className="adash-dots">
          <span className="d r" /><span className="d y" /><span className="d g" />
        </div>
        <div className="adash-url">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{opacity:0.5}}>
            <rect x="3" y="11" width="18" height="11" rx="2"/>
            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
          </svg>
          <span>idealstate.co/assessment/westbrook-foundation</span>
        </div>
        <div className="adash-meta">
          <span className="sample-pill">SAMPLE · Westbrook Foundation</span>
        </div>
      </div>

      {/* Topbar */}
      <div className="adash-topbar">
        <div className="adash-logo">
          <div className="adash-mark">IS</div>
          <div className="adash-brand">
            Ideal State
            <span>AI Readiness Assessment</span>
          </div>
        </div>
        <div className="adash-topmeta">
          <span>v1.0</span>
          <span className="dot">·</span>
          <span>May 5, 2026</span>
          <span className="dot">·</span>
          <span>Prepared for Westbrook Foundation</span>
        </div>
      </div>

      {/* Tabs */}
      <div className="adash-tabs">
        {tabs.map((t, i) => (
          <span key={i} className={slide === i ? "active" : ""} onClick={() => setSlide(i)}>
            <span className="tn">{t.tn}</span> {t.lbl}
          </span>
        ))}
      </div>

      {/* Body */}
      <div className="adash-body">

      {slide === 0 && (<>
        {/* SLIDE 1 — Composite snapshot */}
        <div className="adash-section">
          <div className="kicker"><span className="n">01 /</span> Composite snapshot</div>
          <div className="hero-row">
            <div className="hero-text">
              <div className="tier-tag">● Foundational tier · 1.6 / 4.0</div>
              <h2>You have the <em>vision</em>. The foundation needs work before AI can land safely.</h2>
              <p className="hero-summary">
                Westbrook has <strong>strong executive sponsorship</strong> and a clear picture
                of where AI should land. But the M365 environment isn't ready: <strong>no
                sensitivity labels</strong> are published, 47% of SharePoint sites are inactive,
                and sharing defaults are organization-wide.
              </p>
              <div className="path-pill">Recommended path · <strong>Teams Refresh</strong> first, then Copilot Deployment</div>
            </div>
            <div className="ring-wrap">
              <svg viewBox="0 0 200 200">
                <circle cx="100" cy="100" r="78" fill="none" stroke="rgba(184,194,212,0.10)" strokeWidth="6"/>
                <circle cx="100" cy="100" r="78" fill="none" stroke="#FF6B35" strokeWidth="6"
                        strokeLinecap="round" strokeDasharray="490" strokeDashoffset="294"/>
              </svg>
              <div className="ring-center">
                <div className="sc">1.6<span className="dm">/4</span></div>
                <div className="lb">AI Readiness</div>
              </div>
            </div>
          </div>

          <div className="stat-row">
            <div className="stat-card">
              <div className="sl">Findings</div>
              <div className="sv">14</div>
              <div className="sm"><strong>2 critical</strong> · 5 high · 7 medium</div>
            </div>
            <div className="stat-card">
              <div className="sl">Domains scored</div>
              <div className="sv">5</div>
              <div className="sm">25 indicators · evidence-based</div>
            </div>
            <div className="stat-card">
              <div className="sl">Quick wins</div>
              <div className="sv">3</div>
              <div className="sm"><span className="g">Actionable this week · ~75 min total</span></div>
            </div>
            <div className="stat-card">
              <div className="sl">Use cases gated</div>
              <div className="sv">4 / 6</div>
              <div className="sm"><span className="o">Blocked by sensitivity</span></div>
            </div>
          </div>
        </div>

        <div className="adash-section">
          <div className="kicker"><span className="n">02 /</span> Readiness by domain</div>
          <h3 className="adash-h3">Five gates for safe AI adoption.</h3>
          <p className="adash-sub">Each domain answers one question about whether AI can land productively.</p>
          <div className="d-grid">
            <div className="dc lr">
              <div className="dnum">01 · Identity &amp; Access</div>
              <div className="drow"><div className="dname">Who can sign in, with what proofs</div><div className="dscore">2.1<span className="dd"> / 4</span></div></div>
              <div className="dbar"><div className="dbar-fill" style={{width:"52%", background:"#3DD68C"}}/></div>
              <span className="badge lr-b">Strong</span>
              <div className="devid">MFA enforced for <strong>87%</strong> of licensed users. 4 permanent Global Admins to review.</div>
            </div>
            <div className="dc">
              <div className="dnum">02 · Sensitivity &amp; Oversharing</div>
              <div className="drow"><div className="dname">What AI is allowed to read</div><div className="dscore">0.7<span className="dd"> / 4</span></div></div>
              <div className="dbar"><div className="dbar-fill" style={{width:"17%", background:"#FF6B4E"}}/></div>
              <div className="devid"><strong>No sensitivity labels published.</strong> Default sharing org-wide. 184 anonymous links live.</div>
            </div>
            <div className="dc mr">
              <div className="dnum">03 · Sprawl &amp; Lifecycle</div>
              <div className="drow"><div className="dname">What AI will read when you turn it on</div><div className="dscore">1.1<span className="dd"> / 4</span></div></div>
              <div className="dbar"><div className="dbar-fill" style={{width:"27%", background:"#FF6B35"}}/></div>
              <span className="badge mr-b">Needs work</span>
              <div className="devid"><strong>412 sites, 47% inactive.</strong> No retention rules. 38% lack a clear owner.</div>
            </div>
            <div className="dc mr" data-d="ai">
              <div className="dnum">04 · AI Governance</div>
              <div className="drow"><div className="dname">Governed by intent, not accident</div><div className="dscore">1.4<span className="dd"> / 4</span></div></div>
              <div className="dbar"><div className="dbar-fill" style={{width:"35%", background:"#FF6B35"}}/></div>
              <span className="badge mr-b">Needs work</span>
              <div className="devid">12 third-party AI apps ungoverned. <strong>No AI policy.</strong> Audit log on, retention 90 days.</div>
            </div>
            <div className="dc lr">
              <div className="dnum">05 · Adoption &amp; Readiness</div>
              <div className="drow"><div className="dname">Whether your people are ready</div><div className="dscore">2.4<span className="dd"> / 4</span></div></div>
              <div className="dbar"><div className="dbar-fill" style={{width:"60%", background:"#3DD68C"}}/></div>
              <span className="badge lr-b">Strong</span>
              <div className="devid"><strong>Teams adoption 91%.</strong> Named exec sponsor. Three concrete use cases identified.</div>
            </div>
            <div className="dc summary">
              <div className="dnum">Composite</div>
              <div className="drow"><div className="dname">Across 25 indicators</div><div className="dscore" style={{color:"#FF6B35"}}>1.6<span className="dd"> / 4</span></div></div>
              <div className="dbar"><div className="dbar-fill" style={{width:"40%", background:"linear-gradient(90deg,#FF6B4E,#FF6B35)"}}/></div>
              <span className="badge mr-b">Foundational</span>
              <div className="devid">Tiers: Foundational → Emerging → Operating → Leading. <strong>Most orgs land here.</strong></div>
            </div>
          </div>
        </div>

      </>)}
      {slide === 1 && (<>
        {/* SLIDE 2 — Quick wins */}
        <div className="adash-section">
          <div className="kicker"><span className="n">03 /</span> Quick wins · this week</div>
          <h3 className="adash-h3">Three things you can fix today.</h3>
          <p className="adash-sub">Concrete config changes, no consulting engagement needed.</p>
          <div className="qw-list">
            <div className="qw">
              <div className="num">1</div>
              <div>
                <div className="qt">Publish a starter set of three sensitivity labels.</div>
                <div className="qd">Public · Internal · Confidential, via Microsoft Purview. Manual application only, no auto-labeling yet. Closes the largest single gap in the assessment.</div>
              </div>
              <div className="eff">~45 min</div>
            </div>
            <div className="qw">
              <div className="num">2</div>
              <div>
                <div className="qt">Change the default sharing link to "Specific people."</div>
                <div className="qd">SharePoint Admin Center → Policies → Sharing. One setting. Stops new content from being shared org-wide by default.</div>
              </div>
              <div className="eff">~10 min</div>
            </div>
            <div className="qw">
              <div className="num">3</div>
              <div>
                <div className="qt">Create a sensitive-meeting policy with AI features off.</div>
                <div className="qd">Teams Admin Center → Meeting Policies. Assign to board, HR, and donor-strategy groups. Keeps Copilot transcripts out of conversations that shouldn't be summarized.</div>
              </div>
              <div className="eff">~20 min</div>
            </div>
          </div>
        </div>

      </>)}
      {slide === 2 && (<>
        {/* SLIDE 3 — Use case readiness */}
        <div className="adash-section">
          <div className="kicker"><span className="n">04 /</span> Use case readiness</div>
          <h3 className="adash-h3">What AI you can turn on, today.</h3>
          <p className="adash-sub">Each proposed use case mapped to the readiness gates it depends on.</p>
          <div className="uc-list">
            <div className="uc green">
              <div className="uc-l">
                <div className="uc-h">Meeting recap &amp; action items</div>
                <div className="uc-d">Copilot in Teams, internal meetings only</div>
              </div>
              <div className="uc-gates">
                <span className="g-on">Identity</span>
                <span className="g-on">Adoption</span>
              </div>
              <div className="uc-status go">● Ready now</div>
            </div>
            <div className="uc amber">
              <div className="uc-l">
                <div className="uc-h">Internal knowledge search</div>
                <div className="uc-d">Copilot grounded on SharePoint corpus</div>
              </div>
              <div className="uc-gates">
                <span className="g-on">Identity</span>
                <span className="g-off">Sensitivity</span>
                <span className="g-off">Sprawl</span>
              </div>
              <div className="uc-status hold">● Gate after sensitivity labels</div>
            </div>
            <div className="uc red">
              <div className="uc-l">
                <div className="uc-h">Grant proposal first-draft generation</div>
                <div className="uc-d">Copilot on donor-restricted content</div>
              </div>
              <div className="uc-gates">
                <span className="g-on">Identity</span>
                <span className="g-off">Sensitivity</span>
                <span className="g-off">Sprawl</span>
                <span className="g-off">AI Gov</span>
              </div>
              <div className="uc-status block">● Blocked · 3 gates open</div>
            </div>
          </div>
        </div>
      </>)}

        <div className="adash-dots-row">
          {[0,1,2].map(i => (
            <span key={i} className={"sd " + (slide === i ? "active" : "")} onClick={() => setSlide(i)} />
          ))}
        </div>

      </div>

      {/* Footer ribbon */}
      <div className="adash-foot">
        <span>Five domains · 25 indicators · evidence from your tenant</span>
        <span className="dot">·</span>
        <span>Single page · self-contained HTML</span>
        <span className="dot">·</span>
        <span>Walked through live in a 30-min readout</span>
      </div>
    </div>
  );
}

window.AssessmentDashboard = AssessmentDashboard;

/* ─────────────────── STYLES ─────────────────── */
const adashStyles = `
.adash {
  width: 100%;
  background: #040B14;
  border-radius: 14px;
  overflow: hidden;
  color: #B8C2D4;
  font-family: 'Segoe UI', 'Selawik', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 30px 80px -20px rgba(4,11,20,0.6), 0 8px 24px -8px rgba(4,11,20,0.4);
  border: 1px solid rgba(184,194,212,0.10);
}
.adash * { box-sizing: border-box; }

/* Chrome */
.adash-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: #081828;
  border-bottom: 1px solid rgba(184,194,212,0.08);
}
.adash-dots { display: flex; gap: 6px; }
.adash-dots .d { width: 10px; height: 10px; border-radius: 50%; }
.adash-dots .r { background: #ff5f57; }
.adash-dots .y { background: #febc2e; }
.adash-dots .g { background: #28c840; }
.adash-url {
  flex: 1;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(4,11,20,0.6);
  border: 1px solid rgba(184,194,212,0.1);
  padding: 5px 12px; border-radius: 6px;
  font-size: 11px; color: #6E7A92;
  max-width: 460px; margin: 0 auto;
}
.adash-meta .sample-pill {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #FF6B35; border: 1px solid rgba(255,107,53,0.4);
  padding: 4px 10px; border-radius: 9999px;
  background: rgba(255,107,53,0.06);
}

/* Topbar */
.adash-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  background: rgba(4,11,20,0.85);
  border-bottom: 1px solid rgba(184,194,212,0.10);
}
.adash-logo { display: flex; align-items: center; gap: 12px; }
.adash-mark {
  width: 32px; height: 32px; border-radius: 7px;
  background: #FF6B35; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.04em;
}
.adash-brand {
  font-size: 11px; color: #6E7A92; letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1.2;
}
.adash-brand span {
  display: block; color: #F4F6FA; font-size: 14px; font-weight: 500;
  letter-spacing: -0.01em; text-transform: none; margin-top: 2px;
}
.adash-topmeta {
  font-size: 11px; color: #6E7A92; letter-spacing: 0.04em;
  display: flex; gap: 8px; align-items: center;
}
.adash-topmeta .dot { color: #3A4558; }

/* Tabs */
.adash-tabs span { cursor: pointer; }
.adash-dots-row { display: flex; justify-content: center; gap: 8px; padding: 14px 0 18px; }
.adash-dots-row .sd { width: 8px; height: 8px; border-radius: 50%; background: rgba(184,194,212,0.18); cursor: pointer; transition: background 240ms; }
.adash-dots-row .sd.active { background: #FF6B35; }
.adash-tabs {
  display: flex; gap: 0;
  background: rgba(8,24,40,0.92);
  border-bottom: 1px solid rgba(184,194,212,0.10);
  padding: 0 18px;
  overflow-x: hidden;
}
.adash-tabs span {
  font-size: 12px; color: #6E7A92;
  padding: 12px 16px; position: relative;
  letter-spacing: -0.01em; white-space: nowrap;
}
.adash-tabs span.active { color: #F4F6FA; }
.adash-tabs span.active::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 0;
  height: 2px; background: #FF6B35; border-radius: 2px;
}
.adash-tabs .tn { color: #FF6B35; font-size: 10px; margin-right: 5px; letter-spacing: 0.04em; }

/* Body */
.adash-body { padding: 4px 0; height: 760px; overflow: hidden; position: relative; }
.adash-body::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, rgba(8,24,40,0) 0%, rgba(8,24,40,0.85) 60%, rgba(8,24,40,1) 100%);
  pointer-events: none;
}
.adash-section {
  padding: 24px 24px 28px;
  border-bottom: 1px solid rgba(184,194,212,0.07);
}
.adash-section:last-child { border-bottom: none; }

.kicker {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: #FF6B35; display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.kicker::before { content: ''; width: 18px; height: 1px; background: #FF6B35; }
.kicker .n { color: #6E7A92; }
.adash-h3 {
  font-size: 22px; font-weight: 300; color: #F4F6FA;
  margin: 0 0 6px; letter-spacing: -0.02em; line-height: 1.2;
}
.adash-h3 em { font-style: normal; color: #FF6B35; font-weight: 400; }
.adash-sub { font-size: 12px; color: #6E7A92; margin: 0 0 18px; }

/* Hero row */
.hero-row { display: flex; gap: 36px; align-items: center; }
.hero-text { flex: 1; min-width: 0; }
.tier-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(255,107,78,0.1); color: #FF8A73;
  border: 1px solid rgba(255,107,78,0.28);
  border-left: 3px solid #FF6B4E;
  margin-bottom: 12px;
}
.hero-text h2 {
  font-size: 26px; font-weight: 300; color: #F4F6FA;
  line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero-text h2 em { font-style: normal; color: #FF6B35; font-weight: 400; }
.hero-summary {
  font-size: 13px; line-height: 1.65; color: #B8C2D4; margin: 0 0 14px;
  max-width: 460px;
}
.hero-summary strong { color: #F4F6FA; font-weight: 500; }
.path-pill {
  display: inline-flex; gap: 6px;
  font-size: 11px; color: #B8C2D4;
  background: rgba(179,146,240,0.08);
  border: 1px solid rgba(179,146,240,0.3);
  padding: 6px 12px; border-radius: 9999px;
}
.path-pill strong { color: #B392F0; font-weight: 600; }

/* Ring */
.ring-wrap { width: 180px; height: 180px; position: relative; flex-shrink: 0; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-center .sc {
  font-size: 44px; font-weight: 300; color: #F4F6FA; line-height: 1;
}
.ring-center .sc .dm { font-size: 18px; color: #6E7A92; }
.ring-center .lb {
  font-size: 9px; color: #6E7A92; letter-spacing: 0.12em; text-transform: uppercase;
  margin-top: 6px;
}

/* Stat row */
.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px;
}
.stat-card {
  background: #0E2841; border: 1px solid rgba(184,194,212,0.12);
  border-radius: 8px; padding: 14px 16px;
}
.stat-card .sl {
  font-size: 9px; color: #6E7A92; letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.stat-card .sl::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%; background: #FF6B35;
}
.stat-card .sv { font-size: 24px; font-weight: 400; color: #F4F6FA; margin-top: 4px; line-height: 1; }
.stat-card .sm { font-size: 10px; color: #B8C2D4; margin-top: 6px; }
.stat-card .sm strong { color: #FF6B4E; font-weight: 500; }
.stat-card .sm .g { color: #3DD68C; font-weight: 500; }
.stat-card .sm .o { color: #FFB899; font-weight: 500; }

/* Domain grid */
.d-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.dc {
  background: #0E2841; border: 1px solid rgba(184,194,212,0.12);
  border-radius: 8px; padding: 14px 16px; position: relative; overflow: hidden;
}
.dc::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.dc.hr::before { background: #FF6B4E; }
.dc.mr::before { background: #FF6B35; }
.dc.lr::before { background: #3DD68C; }
.dc.summary { background: linear-gradient(180deg, rgba(255,107,53,0.06), #0E2841); }
.dc.summary::before { background: #FF6B35; }
.dc[data-d="ai"] { background: linear-gradient(180deg, rgba(179,146,240,0.05), #0E2841); }
.dc[data-d="ai"] .dnum { color: #B392F0; }

.dc .dnum {
  font-size: 9px; color: #6E7A92; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 4px;
}
.dc .drow { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.dc .dname { font-size: 13px; font-weight: 500; color: #F4F6FA; flex: 1; min-width: 0; line-height: 1.3; }
.dc .dscore {
  font-size: 18px; font-weight: 400; color: #F4F6FA; flex-shrink: 0; white-space: nowrap;
}
.dc .dscore .dd { font-size: 11px; color: #6E7A92; }
.dc .dbar {
  height: 3px; background: #081828; border-radius: 2px; margin: 10px 0 8px; overflow: hidden;
}
.dc .dbar-fill { height: 100%; border-radius: 2px; }
.dc .badge {
  display: inline-block; font-size: 9px; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 3px; text-transform: uppercase; font-weight: 500;
}
.dc .badge.hr-b { background: rgba(255,107,78,0.10); color: #FF8A73; }
.dc .badge.mr-b { background: rgba(255,107,53,0.10); color: #FFB899; }
.dc .badge.lr-b { background: rgba(61,214,140,0.10); color: #3DD68C; }
.dc .devid {
  font-size: 11px; line-height: 1.55; color: #B8C2D4; margin-top: 8px;
}
.dc .devid strong { color: #F4F6FA; font-weight: 500; }

/* Quick wins */
.qw-list { display: flex; flex-direction: column; gap: 8px; }
.qw {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  background: #0E2841; border: 1px solid rgba(184,194,212,0.12);
  border-radius: 8px; padding: 14px 18px;
}
.qw .num {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,107,53,0.45);
  display: flex; align-items: center; justify-content: center;
  color: #FF6B35; font-size: 16px; font-weight: 400; flex-shrink: 0;
}
.qw .qt { font-size: 13px; font-weight: 500; color: #F4F6FA; }
.qw .qd { font-size: 11px; color: #6E7A92; margin-top: 3px; line-height: 1.5; }
.qw .eff {
  font-size: 9px; color: #6E7A92; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; padding: 6px 10px; border: 1px solid rgba(184,194,212,0.15);
  border-radius: 4px;
}

/* Use cases */
.uc-list { display: flex; flex-direction: column; gap: 8px; }
.uc {
  display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 18px; align-items: center;
  background: #0E2841; border: 1px solid rgba(184,194,212,0.12);
  border-radius: 8px; padding: 14px 18px;
  border-left-width: 3px; border-left-style: solid;
}
.uc.green { border-left-color: #3DD68C; }
.uc.amber { border-left-color: #FFB899; }
.uc.red { border-left-color: #FF6B4E; }
.uc-l .uc-h { font-size: 13px; font-weight: 500; color: #F4F6FA; }
.uc-l .uc-d { font-size: 11px; color: #6E7A92; margin-top: 2px; }
.uc-gates { display: flex; flex-wrap: wrap; gap: 4px; }
.uc-gates span {
  font-size: 9px; padding: 3px 8px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
}
.g-on { background: rgba(61,214,140,0.10); color: #3DD68C; }
.g-off { background: rgba(255,107,78,0.10); color: #FF8A73; }
.uc-status {
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.uc-status.go { color: #3DD68C; }
.uc-status.hold { color: #FFB899; }
.uc-status.block { color: #FF6B4E; }

/* Foot */
.adash-foot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px;
  background: #081828;
  border-top: 1px solid rgba(184,194,212,0.08);
  font-size: 10px; color: #6E7A92; letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.adash-foot .dot { color: #3A4558; }

/* Responsive */
@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .d-grid { grid-template-columns: repeat(2, 1fr); }
  .uc { grid-template-columns: 1fr; gap: 8px; }
  .uc-status { justify-self: start; }
  .hero-row { flex-direction: column; align-items: flex-start; }
  .ring-wrap { width: 140px; height: 140px; align-self: center; }
}
@media (max-width: 600px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .d-grid { grid-template-columns: 1fr; }
  .adash-tabs span { padding: 12px 10px; }
  .adash-topmeta { display: none; }
}
`;