/* KYC & Compliance: production app version of the HTML prototype flow. */

const KYC_COUNTRIES = [
  {
    code: "KE",
    name: "Kenya",
    flag: "🇰🇪",
    regulator: "CAK",
    dialing: "+254",
    docs: [
      "Certificate of Incorporation / Registration",
      "CR12 directors & shareholders",
      "KRA PIN certificate",
      "Tax Compliance Certificate",
      "Single Business Permit",
      "Proof of physical address",
      "Directors' National ID / Passport",
      "Authorization letter on company letterhead",
    ],
  },
  { code: "UG", name: "Uganda", flag: "🇺🇬", regulator: "UCC", dialing: "+256", docs: ["URSB Certificate", "URA TIN", "Trading licence", "Directors' ID", "Proof of address"] },
  { code: "TZ", name: "Tanzania", flag: "🇹🇿", regulator: "TCRA", dialing: "+255", docs: ["BRELA Certificate", "TRA TIN", "Business licence", "Directors' ID"] },
  { code: "RW", name: "Rwanda", flag: "🇷🇼", regulator: "RURA", dialing: "+250", docs: ["RDB Registration", "RRA TIN", "Directors register", "Proof of address"] },
  { code: "NG", name: "Nigeria", flag: "🇳🇬", regulator: "NCC", dialing: "+234", docs: ["CAC Certificate", "FIRS TIN", "CAC Form 1.1", "Directors' NIN"] },
  { code: "GH", name: "Ghana", flag: "🇬🇭", regulator: "NCA", dialing: "+233", docs: ["RGD Certificate", "GRA TIN", "Form 3", "Directors' Ghana Card"] },
  { code: "ZA", name: "South Africa", flag: "🇿🇦", regulator: "ICASA", dialing: "+27", docs: ["CIPC Registration", "SARS Tax Pin", "Directors resolution", "Directors' ID"] },
];

const KYC_STEPS = ["Jurisdiction", "Business", "Directors", "Representatives", "Documents", "Compliance", "Review", "Vetting"];

const ENTITY_TYPES = [
  "Private Limited Company",
  "Public Limited Company",
  "Sole Proprietorship",
  "Partnership / LLP",
  "Branch of Foreign Company",
  "NGO / Non-profit / Trust",
  "Government / Parastatal",
];

const SECTORS = [
  "Healthcare",
  "Financial services",
  "Retail & e-commerce",
  "Hospitality",
  "Logistics & transport",
  "Education",
  "Professional services",
  "Technology / SaaS",
  "Other",
];

const KycField = ({ label, hint, children }) => (
  <label className="field">
    <div style={{ display: "flex", gap: 8, alignItems: "baseline", justifyContent: "space-between" }}>
      <span style={{ fontSize: 13, fontWeight: 500, color: "var(--fg)" }}>{label}</span>
      {hint ? <span style={{ fontSize: 11.5, color: "var(--fg-faint)" }}>{hint}</span> : null}
    </div>
    {children}
  </label>
);

const KycStepper = ({ step, onJump }) => (
  <div className="kyc-stepper">
    {KYC_STEPS.map((label, index) => {
      const state = index < step ? "done" : index === step ? "on" : "";
      return (
        <React.Fragment key={label}>
          <button className={`kyc-step ${state}`} onClick={() => index <= step && onJump(index)}>
            <span className="kyc-dot">{index < step ? <Icon name="check" size={11} /> : index + 1}</span>
            <span className="kyc-step-label">{label}</span>
          </button>
          {index < KYC_STEPS.length - 1 ? <div className="kyc-step-bar" data-done={index < step} /> : null}
        </React.Fragment>
      );
    })}
  </div>
);

const SmartFillCard = ({ title, body, onClick }) => (
  <button className="kyc-smart-cta" type="button" onClick={onClick}>
    <span className="kyc-smart-cta-icon"><Icon name="sparkles" /></span>
    <span style={{ flex: 1 }}>
      <span style={{ display: "block", fontWeight: 600, fontSize: 14 }}>{title}</span>
      <span style={{ display: "block", color: "var(--fg-muted)", fontSize: 12.5, marginTop: 3 }}>{body}</span>
    </span>
    <Icon name="arrow-right" className="kyc-smart-cta-arrow" />
  </button>
);

const KycPage = ({ onGo }) => {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    country: "KE",
    legalName: "Acme Dental Care Limited",
    tradingName: "Acme Dentistry",
    entityType: "Private Limited Company",
    regNumber: "PVT-A2B5K9D",
    incDate: "2019-03-14",
    taxId: "P051234567X",
    sector: "Healthcare",
    address: "4th Floor, Westside Tower, Lower Kabete Road",
    city: "Nairobi",
    primary: "Ayo Mwangi",
    email: "ayo@acme.co.ke",
    phone: "+254 722 444 001",
    useCase: "Inbound AI receptionist",
    volume: "500 - 5,000 calls / month",
  });
  const [directorCount, setDirectorCount] = useState(2);
  const [attestations, setAttestations] = useState({
    truth: false,
    authority: false,
    sanctions: false,
    dpa: false,
    consent: false,
  });

  const country = KYC_COUNTRIES.find((c) => c.code === data.country) || KYC_COUNTRIES[0];
  const set = (key, value) => setData((current) => ({ ...current, [key]: value }));
  const next = () => setStep((current) => Math.min(current + 1, KYC_STEPS.length - 1));
  const prev = () => setStep((current) => Math.max(current - 1, 0));
  const jump = (index) => setStep(index);

  const extractBusiness = () => {
    setData((current) => ({
      ...current,
      legalName: country.code === "KE" ? "Acme Dental Care Limited" : `Acme Dental Care ${country.name} Ltd`,
      tradingName: "Acme Dentistry",
      regNumber: country.code === "NG" ? "RC 1839742" : "PVT-A2B5K9D",
      taxId: country.code === "KE" ? "P051234567X" : "104432109",
      sector: "Healthcare",
      address: country.code === "KE" ? "4th Floor, Westside Tower, Lower Kabete Road" : "Central business district",
    }));
  };

  const renderStep = () => {
    if (step === 0) {
      return (
        <>
          <p className="eyebrow">Jurisdiction</p>
          <h1 className="kyc-h">Where should Mikaka issue your number?</h1>
          <p className="kyc-sub">Choose the country where your business is registered. We will tailor required telecom, tax, and ownership checks to that regulator.</p>
          <div className="kyc-country-grid" style={{ marginTop: 24 }}>
            {KYC_COUNTRIES.map((item) => (
              <button key={item.code} className={`kyc-country ${data.country === item.code ? "on" : ""}`} onClick={() => set("country", item.code)}>
                <span className="kyc-country-flag">{item.flag}</span>
                <span style={{ flex: 1 }}>
                  <strong style={{ display: "block", fontSize: 14 }}>{item.name}</strong>
                  <span style={{ display: "block", marginTop: 3, color: "var(--fg-muted)", fontSize: 12.5 }}>{item.regulator} · {item.dialing}</span>
                </span>
                <span className="kyc-radio">{data.country === item.code ? <Icon name="check" size={11} /> : null}</span>
              </button>
            ))}
          </div>
          <div className="kyc-callout" style={{ marginTop: 24 }}>
            <Icon name="shield" style={{ color: "var(--mk-orange)", flexShrink: 0 }} />
            <div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{country.regulator} ready checklist</div>
              <div style={{ color: "var(--fg-muted)", fontSize: 13, lineHeight: 1.6, marginTop: 4 }}>The document list and declarations will update for {country.name} before number assignment.</div>
            </div>
          </div>
        </>
      );
    }

    if (step === 1) {
      return (
        <>
          <p className="eyebrow">Business details</p>
          <h1 className="kyc-h">Confirm registered company information</h1>
          <p className="kyc-sub">Start from incorporation and tax documents, then confirm the fields we will submit for compliance review.</p>
          <div style={{ margin: "22px 0" }}>
            <SmartFillCard title="Smart fill from company documents" body="Upload certificate, tax PIN, or permit and let Mikaka prefill the business profile." onClick={extractBusiness} />
          </div>
          <div className="grid grid-2">
            <KycField label="Legal business name"><input value={data.legalName} onChange={(e) => set("legalName", e.target.value)} /></KycField>
            <KycField label="Trading name"><input value={data.tradingName} onChange={(e) => set("tradingName", e.target.value)} /></KycField>
            <KycField label="Entity type"><select value={data.entityType} onChange={(e) => set("entityType", e.target.value)}>{ENTITY_TYPES.map((x) => <option key={x}>{x}</option>)}</select></KycField>
            <KycField label="Registration number"><input value={data.regNumber} onChange={(e) => set("regNumber", e.target.value)} /></KycField>
            <KycField label="Incorporation date"><input type="date" value={data.incDate} onChange={(e) => set("incDate", e.target.value)} /></KycField>
            <KycField label="Tax identifier"><input value={data.taxId} onChange={(e) => set("taxId", e.target.value)} /></KycField>
            <KycField label="Sector"><select value={data.sector} onChange={(e) => set("sector", e.target.value)}>{SECTORS.map((x) => <option key={x}>{x}</option>)}</select></KycField>
            <KycField label="City"><input value={data.city} onChange={(e) => set("city", e.target.value)} /></KycField>
          </div>
          <div style={{ marginTop: 16 }}>
            <KycField label="Registered physical address"><input value={data.address} onChange={(e) => set("address", e.target.value)} /></KycField>
          </div>
        </>
      );
    }

    if (step === 2) {
      return (
        <>
          <p className="eyebrow">Directors & ownership</p>
          <h1 className="kyc-h">Declare directors and beneficial owners</h1>
          <p className="kyc-sub">Capture the people behind the business for telecom compliance, ownership checks, sanctions screening, and AML review.</p>
          <div style={{ margin: "22px 0" }}>
            <SmartFillCard title="Extract directors from CR12 or registry forms" body="Mikaka can pick names, ID numbers, roles, and ownership percentages from uploaded documents." onClick={() => setDirectorCount(3)} />
          </div>
          {Array.from({ length: directorCount }).map((_, index) => (
            <div className="kyc-person kyc-smart-card" key={index} style={{ marginTop: index ? 14 : 0 }}>
              <div className="row gap-3" style={{ marginBottom: 16 }}>
                <span className="kyc-person-num">{index + 1}</span>
                <div>
                  <div style={{ fontWeight: 600 }}>Director {index + 1}</div>
                  <div style={{ color: "var(--fg-muted)", fontSize: 12.5 }}>Identity and ownership declaration</div>
                </div>
              </div>
              <div className="grid grid-2">
                <KycField label="Full legal name"><input defaultValue={index === 0 ? "Ayo Mwangi" : index === 1 ? "Achieng Otieno" : ""} placeholder="Full name" /></KycField>
                <KycField label="Role"><input defaultValue={index === 0 ? "Director & shareholder" : "Director"} /></KycField>
                <KycField label="ID / Passport number"><input defaultValue={index === 0 ? "29487120" : index === 1 ? "31204987" : ""} /></KycField>
                <KycField label="Ownership %"><input defaultValue={index === 0 ? "55" : index === 1 ? "45" : ""} /></KycField>
              </div>
              <label className="kyc-attest" style={{ marginTop: 14 }}>
                <span className="kyc-check" />
                <span><strong style={{ display: "block", fontSize: 13.5 }}>Politically exposed person?</strong><span style={{ color: "var(--fg-muted)", fontSize: 12.5 }}>Tick only if applicable.</span></span>
              </label>
            </div>
          ))}
        </>
      );
    }

    if (step === 3) {
      return (
        <>
          <p className="eyebrow">Representatives</p>
          <h1 className="kyc-h">Add operational and compliance contacts</h1>
          <p className="kyc-sub">These contacts receive verification updates, number assignment notices, and follow-up requests from the Mikaka compliance team.</p>
          <div className="grid grid-2" style={{ marginTop: 24 }}>
            <KycField label="Primary contact"><input value={data.primary} onChange={(e) => set("primary", e.target.value)} /></KycField>
            <KycField label="Email address"><input type="email" value={data.email} onChange={(e) => set("email", e.target.value)} /></KycField>
            <KycField label="Phone number"><input value={data.phone} onChange={(e) => set("phone", e.target.value)} /></KycField>
            <KycField label="Title"><input defaultValue="Managing Director" /></KycField>
            <KycField label="Technical contact"><input defaultValue="Sam Karanja" /></KycField>
            <KycField label="Compliance contact"><input defaultValue="Achieng Otieno" /></KycField>
          </div>
        </>
      );
    }

    if (step === 4) {
      const complete = Math.round((4 / country.docs.length) * 100);
      return (
        <>
          <p className="eyebrow">Documents</p>
          <h1 className="kyc-h">Upload regulator-ready documents</h1>
          <p className="kyc-sub">Accepted formats are PDF, PNG, and JPG. Keep every upload legible and current to avoid review delays.</p>
          <div className="kyc-doc-progress" style={{ margin: "24px 0 10px" }}><div className="kyc-doc-progress-fill" style={{ width: `${complete}%` }} /></div>
          <div style={{ color: "var(--fg-muted)", fontSize: 12.5, marginBottom: 16 }}>{complete}% document pack complete</div>
          <div className="stack gap-2">
            {country.docs.map((doc, index) => (
              <label className={`kyc-doc ${index < 4 ? "done" : ""}`} key={doc}>
                <span className="kyc-doc-icon">{index < 4 ? <Icon name="check" /> : <Icon name="file" />}</span>
                <span style={{ flex: 1 }}>
                  <strong style={{ display: "block", fontSize: 13.5 }}>{doc}</strong>
                  <span style={{ color: "var(--fg-muted)", fontSize: 12.5 }}>{index < 4 ? "Uploaded and readable" : "Required before submission"}</span>
                </span>
                <input type="file" style={{ display: "none" }} />
                <button className="btn btn-outline btn-sm" type="button">{index < 4 ? "Replace" : "Upload"}</button>
              </label>
            ))}
          </div>
        </>
      );
    }

    if (step === 5) {
      const items = [
        ["truth", "All information provided is accurate and complete."],
        ["authority", "I am authorized to submit this application for the business."],
        ["sanctions", "The business and directors are not under sanctions or restricted-party lists."],
        ["dpa", "The business will comply with applicable data protection obligations."],
        ["consent", "I consent to Mikaka processing this information for KYC and number assignment."],
      ];
      return (
        <>
          <p className="eyebrow">Compliance declarations</p>
          <h1 className="kyc-h">Confirm legal authority and permitted use</h1>
          <p className="kyc-sub">These declarations are required before Mikaka can submit your number allocation request.</p>
          <div className="stack gap-2" style={{ marginTop: 24 }}>
            {items.map(([key, label]) => (
              <button key={key} className={`kyc-attest ${attestations[key] ? "on" : ""}`} type="button" onClick={() => setAttestations((x) => ({ ...x, [key]: !x[key] }))}>
                <span className={`kyc-check ${attestations[key] ? "on" : ""}`}>{attestations[key] ? <Icon name="check" size={12} /> : null}</span>
                <span style={{ textAlign: "left", fontSize: 13.5, lineHeight: 1.45 }}>{label}</span>
              </button>
            ))}
          </div>
          <div style={{ marginTop: 20 }}>
            <KycField label="Authorized signature"><input placeholder="Type your full name" /></KycField>
          </div>
        </>
      );
    }

    if (step === 6) {
      const rows = [
        ["Jurisdiction", `${country.name} (${country.regulator})`],
        ["Business", data.legalName],
        ["Registration", data.regNumber],
        ["Tax ID", data.taxId],
        ["Primary contact", `${data.primary} · ${data.email}`],
        ["Use case", data.useCase],
        ["Expected volume", data.volume],
      ];
      return (
        <>
          <p className="eyebrow">Review</p>
          <h1 className="kyc-h">Ready for compliance review</h1>
          <p className="kyc-sub">Review the application summary. You can jump back to any section before submitting.</p>
          <div className="kyc-review" style={{ marginTop: 24 }}>
            <div className="kyc-review-head"><strong>Application summary</strong><button className="btn btn-ghost btn-sm" onClick={() => jump(1)}>Edit</button></div>
            <div className="kyc-review-body">
              {rows.map(([key, value]) => (
                <div className="kyc-review-row" key={key}><div className="kyc-review-k">{key}</div><div className="kyc-review-v">{value}</div></div>
              ))}
            </div>
          </div>
          <div className="kyc-submit" style={{ marginTop: 20 }}>
            <div>
              <div style={{ fontWeight: 600 }}>Submit application to Mikaka compliance</div>
              <div style={{ color: "var(--fg-muted)", fontSize: 13, marginTop: 4 }}>Review usually completes within one business day after documents are verified.</div>
            </div>
            <button className="btn btn-accent" onClick={() => setStep(7)}>Submit for vetting <Icon name="arrow-right" /></button>
          </div>
        </>
      );
    }

    return (
      <div className="kyc-vetting-stage">
        <div className="kyc-vetting-orbit">
          <span className="kyc-vetting-pulse" />
          <Icon name="shield" size={34} style={{ color: "var(--mk-orange)" }} />
        </div>
        <div style={{ textAlign: "center" }}>
          <p className="eyebrow">Vetting in progress</p>
          <h1 className="kyc-h" style={{ marginTop: 8 }}>Mikaka is checking your application</h1>
          <p className="kyc-sub" style={{ margin: "0 auto" }}>We are validating documents, ownership, sanctions, and number assignment requirements.</p>
        </div>
        <div className="kyc-checks">
          {["Business registry match", "Tax certificate check", "Director identity screening", "Telecom use-case approval"].map((label, index) => (
            <div key={label} className={`kyc-check-row ${index < 2 ? "done" : index === 2 ? "active" : ""}`}>
              <span className="kyc-check-dot">{index < 2 ? <Icon name="check" size={13} /> : index === 2 ? <span className="kyc-check-spin" /> : index + 1}</span>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13.5 }}>{label}</div>
                <div style={{ color: "var(--fg-muted)", fontSize: 12.5, marginTop: 3 }}>{index < 2 ? "Completed" : index === 2 ? "Running now" : "Queued"}</div>
              </div>
            </div>
          ))}
        </div>
        <button className="btn btn-outline" onClick={() => onGo("tenant-dashboard")}>Return to dashboard</button>
      </div>
    );
  };

  return (
    <div className="kyc-page">
      <style dangerouslySetInnerHTML={{ __html: kycStyles }} />
      <div className="kyc-banner">
        <div className="row gap-3" style={{ flex: 1 }}>
          <Icon name="shield" style={{ color: "var(--mk-orange)" }} />
          <div>
            <div style={{ fontWeight: 500, fontSize: 14 }}>KYC & compliance vetting</div>
            <div style={{ fontSize: 12.5, color: "var(--fg-muted)" }}>Required before we issue your Mikaka number. Your data is encrypted in transit and at rest.</div>
          </div>
        </div>
        <div className="row gap-2 hide-sm">
          <span className="chip live"><span className="dot" />Encrypted</span>
          <span className="chip">ISO 27001</span>
        </div>
      </div>

      <div className="kyc-layout">
        <div className="kyc-main">
          {step < 7 ? <KycStepper step={step} onJump={jump} /> : null}
          <div className="kyc-card page-mount" key={step}>{renderStep()}</div>
          {step < 6 ? (
            <div className="kyc-foot">
              <button className="btn btn-ghost" onClick={prev} disabled={step === 0}><Icon name="chevron-left" /> Back</button>
              <div className="row gap-2">
                <button className="btn btn-outline" onClick={() => onGo("tenant-dashboard")}>Save & exit</button>
                <button className="btn btn-accent" onClick={next}>Continue <Icon name="arrow-right" /></button>
              </div>
            </div>
          ) : null}
        </div>

        {step < 7 ? (
          <aside className="kyc-aside">
            <div className="kyc-aside-card">
              <div style={{ fontWeight: 600, marginBottom: 12 }}>Application progress</div>
              {KYC_STEPS.slice(0, 7).map((label, index) => (
                <button key={label} className={`kyc-aside-item ${index === step ? "on" : ""}`} onClick={() => index <= step && jump(index)}>
                  <span className={`kyc-aside-dot ${index < step ? "done" : ""}`}>{index < step ? <Icon name="check" size={11} /> : index + 1}</span>
                  {label}
                </button>
              ))}
            </div>
            <div className="kyc-aside-card">
              <div style={{ fontWeight: 600 }}>{country.flag} {country.name} checklist</div>
              <ul className="kyc-aside-list">
                {country.docs.slice(0, 6).map((doc) => <li key={doc}>{doc}</li>)}
              </ul>
            </div>
            <div className="kyc-aside-card kyc-aside-help">
              <div className="row gap-3">
                <Icon name="book" style={{ color: "var(--mk-orange)" }} />
                <div>
                  <div style={{ fontWeight: 500, fontSize: 13.5 }}>Stuck on a document?</div>
                  <div style={{ fontSize: 12.5, color: "var(--fg-muted)", marginTop: 4, lineHeight: 1.5 }}>Email kyc@mikaka.io and our compliance team will help unblock the review.</div>
                </div>
              </div>
            </div>
          </aside>
        ) : null}
      </div>
    </div>
  );
};

const kycStyles = `
  .kyc-page { min-height: 100vh; background: var(--bg); }
  .kyc-banner { display: flex; align-items: center; gap: 16px; padding: 14px 32px; border-bottom: 1px solid var(--border); background: var(--bg-elev); }
  .kyc-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; padding: 32px; max-width: 1320px; margin: 0 auto; }
  @media (max-width: 1100px) { .kyc-layout { grid-template-columns: 1fr; } .kyc-aside { order: -1; } }
  .kyc-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .kyc-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px; min-height: 480px; }
  @media (max-width: 700px) { .kyc-card { padding: 24px; } .kyc-layout { padding: 16px; } .kyc-banner { padding: 14px 16px; } }
  .kyc-h { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.025em; margin: 12px 0 8px; line-height: 1.1; }
  .kyc-sub { color: var(--fg-muted); font-size: 14.5px; margin: 0 0 8px; line-height: 1.55; max-width: 640px; }
  .kyc-stepper { display: flex; align-items: center; padding: 14px 20px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); overflow-x: auto; }
  .kyc-step { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 4px 6px; cursor: pointer; color: var(--fg-faint); font-family: inherit; flex-shrink: 0; }
  .kyc-step.on { color: var(--fg); }
  .kyc-step.done { color: var(--fg-muted); }
  .kyc-step-label { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
  .kyc-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
  .kyc-step.on .kyc-dot { background: var(--mk-ink); color: #fff; border-color: var(--mk-ink); }
  .kyc-step.done .kyc-dot { background: var(--mk-orange); color: #fff; border-color: var(--mk-orange); }
  .kyc-step-bar { flex: 1; min-width: 12px; height: 1px; background: var(--border); margin: 0 8px; }
  .kyc-step-bar[data-done="true"] { background: var(--mk-orange); }
  .kyc-country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .kyc-country { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; background: var(--bg); transition: all .14s var(--ease); }
  .kyc-country:hover { border-color: color-mix(in srgb, var(--mk-orange) 40%, var(--border)); }
  .kyc-country.on { border-color: var(--mk-orange); background: color-mix(in srgb, var(--mk-orange) 5%, var(--bg)); }
  .kyc-country-flag { font-size: 28px; line-height: 1; }
  .kyc-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
  .kyc-country.on .kyc-radio { background: var(--mk-orange); border-color: var(--mk-orange); }
  .kyc-callout { display: flex; gap: 14px; padding: 16px 18px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r-md); border-left: 3px solid var(--mk-orange); }
  .kyc-person { position: relative; }
  .kyc-person-num { width: 28px; height: 28px; border-radius: 50%; background: var(--mk-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
  .kyc-doc-progress { height: 4px; background: var(--bg-sunken); border-radius: 2px; overflow: hidden; }
  .kyc-doc-progress-fill { height: 100%; background: var(--mk-orange); transition: width .4s var(--ease); }
  .kyc-doc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
  .kyc-doc.done { background: color-mix(in srgb, var(--mk-success) 4%, var(--bg)); border-color: color-mix(in srgb, var(--mk-success) 30%, var(--border)); }
  .kyc-doc-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-sunken); display: flex; align-items: center; justify-content: center; color: var(--fg-muted); flex-shrink: 0; }
  .kyc-doc.done .kyc-doc-icon { background: var(--mk-success); color: #fff; }
  .kyc-attest { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: all .14s var(--ease); background: var(--bg); }
  .kyc-attest:hover { border-color: var(--border-strong); }
  .kyc-attest.on { border-color: var(--mk-orange); background: color-mix(in srgb, var(--mk-orange) 3%, var(--bg)); }
  .kyc-check { width: 20px; height: 20px; border: 1.5px solid var(--border-strong); border-radius: 5px; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; color: #fff; }
  .kyc-check.on { background: var(--mk-orange); border-color: var(--mk-orange); }
  .kyc-review { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
  .kyc-review-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg-sunken); }
  .kyc-review-body { padding: 8px 18px; }
  .kyc-review-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
  .kyc-review-row:last-child { border-bottom: 0; }
  .kyc-review-k { color: var(--fg-muted); }
  .kyc-review-v { color: var(--fg); font-weight: 500; }
  @media (max-width: 600px) { .kyc-review-row { grid-template-columns: 1fr; gap: 4px; } }
  .kyc-submit { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; background: color-mix(in srgb, var(--mk-orange) 5%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--mk-orange) 20%, var(--border)); border-radius: var(--r-lg); gap: 20px; flex-wrap: wrap; }
  .kyc-foot { display: flex; justify-content: space-between; padding: 16px 20px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); gap: 12px; flex-wrap: wrap; }
  .kyc-aside { display: flex; flex-direction: column; gap: 16px; }
  .kyc-aside-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
  .kyc-aside-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; font: inherit; font-size: 13px; color: var(--fg-muted); text-align: left; cursor: pointer; }
  .kyc-aside-item.on { background: var(--bg-sunken); color: var(--fg); font-weight: 500; }
  .kyc-aside-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--fg-muted); flex-shrink: 0; }
  .kyc-aside-dot.done { background: var(--mk-success); color: #fff; border-color: var(--mk-success); }
  .kyc-aside-list { padding-left: 18px; margin: 12px 0 0; font-size: 13px; color: var(--fg-muted); line-height: 1.7; }
  .kyc-aside-help { background: var(--bg-sunken); }
  .kyc-vetting-stage { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 20px; }
  .kyc-vetting-orbit { width: 96px; height: 96px; border-radius: 50%; background: color-mix(in srgb, var(--mk-orange) 8%, var(--bg-sunken)); display: flex; align-items: center; justify-content: center; position: relative; }
  .kyc-vetting-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mk-orange); animation: kycPulse 1.8s var(--ease) infinite; }
  @keyframes kycPulse { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }
  .kyc-checks { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
  .kyc-check-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
  .kyc-check-row.done { background: color-mix(in srgb, var(--mk-success) 4%, var(--bg)); border-color: color-mix(in srgb, var(--mk-success) 25%, var(--border)); }
  .kyc-check-row.active { border-color: var(--mk-orange); }
  .kyc-check-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-sunken); display: flex; align-items: center; justify-content: center; color: var(--fg-muted); flex-shrink: 0; margin-top: 1px; }
  .kyc-check-row.done .kyc-check-dot { background: var(--mk-success); color: #fff; }
  .kyc-check-row.active .kyc-check-dot { background: var(--mk-orange); }
  .kyc-check-spin { width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: kycSpin .9s linear infinite; }
  @keyframes kycSpin { to { transform: rotate(360deg); } }
  .kyc-smart-cta { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 14px 18px; width: 100%; border: 1.5px dashed color-mix(in srgb, var(--mk-orange) 45%, var(--border)); background: color-mix(in srgb, var(--mk-orange) 4%, var(--bg)); border-radius: var(--r-md); cursor: pointer; transition: all .14s var(--ease); }
  .kyc-smart-cta:hover { border-color: var(--mk-orange); background: color-mix(in srgb, var(--mk-orange) 7%, var(--bg)); }
  .kyc-smart-cta-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--mk-orange); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .kyc-smart-cta-arrow { color: var(--mk-orange); }
  .kyc-smart-card { background: color-mix(in srgb, var(--mk-orange) 3%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--mk-orange) 25%, var(--border)); border-radius: var(--r-md); padding: 18px; }
`;

window.KycPage = KycPage;