:root{
  --brand-primary:#a9d001;
  --brand-dark:#1d2939;
  --brand-bg:#f9fafb;
  --kyc-accent:#c0f334;
  --text-title:#101828;
  --text-body:#667085;
  --success:#22c55e;
  --warning:#f59e0b;
  --error:#ef4444;
  --card:#ffffff;
  --muted:#f2f4f7;
  --radius:12px;
  --shadow:0 6px 24px rgba(0,0,0,0.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('./assets/inter/Inter-VariableFont_slnt,wght.woff2') format('woff2');}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--brand-bg);
  color:var(--text-body);
}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}

.header{position:sticky;top:0;z-index:10;background:#ffffffcc;backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid var(--muted);box-shadow:0 6px 16px rgba(16,24,40,.06)}
.header__content{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--brand-dark);font-weight:800;font-size:18px;text-decoration:none}
.brand__logo{display:block;height:28px}
.brand__divider{width:2px;height:24px;background:var(--muted);border-radius:1px;margin:0 4px}
.brand__badge{display:block;width:24px;height:24px}
.brand__tag{margin-left:4px;color:var(--text-title);font-weight:800}
.header__nav{display:flex;gap:16px}
.nav__link{color:var(--text-title);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px}
.nav__link:hover{background:var(--muted)}
.nav__link:focus-visible{outline:3px solid rgba(169,208,1,.35)}

.main{padding:24px 0 48px}

[id]{scroll-margin-top:80px}

.steps.card{margin-bottom:16px}
.steps__list{margin:0 0 8px 20px;padding:0}
.steps__list li{margin:10px 0;display:flex;align-items:flex-start;gap:10px}
.step__icon{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--brand-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;box-shadow:0 4px 14px rgba(169,208,1,.35)}
.step__text{line-height:1.4}
.steps__note{font-size:12px;color:var(--text-body)}

.grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media (min-width: 960px){
  .grid{grid-template-columns: 360px 1fr 1fr}
}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card__title{margin:0 0 12px;color:var(--text-title);font-size:18px}
.card__header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card__header-row .actions{align-self:flex-start}

.field{display:flex;flex-direction:column;margin-bottom:12px}
.field label{font-weight:600;color:var(--text-title);margin-bottom:6px}
.field input,.field select{border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;font-size:14px;background:#fff;color:var(--text-title);box-shadow:inset 0 1px 1px rgba(16,24,40,.04)}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 4px rgba(169,208,1,.20), inset 0 1px 1px rgba(16,24,40,.04)}
.help{font-size:12px;margin:6px 0 0}
.error{font-size:13px;color:var(--error);margin:6px 0 0}

.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{appearance:none;border:0;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer;transition:transform .04s ease, background-color .2s ease, color .2s ease, opacity .2s ease}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn--primary{background:var(--brand-primary);color:#0a0a0a}
.btn--primary:hover{background:#9ac100}
.btn--primary:focus-visible{outline:3px solid rgba(169,208,1,.4)}
.btn--muted{background:var(--muted);color:var(--text-title)}
.btn--muted:hover{background:#e6e9ef}
.btn--muted:focus-visible{outline:3px solid rgba(16,24,40,.1)}

.status{min-height:22px;margin-top:8px;font-weight:600}
.status--success{color:var(--success)}
.status--warning{color:var(--warning)}
.status--error{color:var(--error)}

.device{position:relative;background:#000;border-radius:28px;border:8px solid #111;aspect-ratio: 9/19.5;display:flex;align-items:center;justify-content:center;overflow:hidden;width:88dvw;max-width:320px;margin:0 auto}
@media (min-width:768px){.device{width:320px}}
.device iframe{width:100%;height:100%;border:0;display:block}
.placeholder{color:#bbb;text-align:center}

.console{background:#0b1220;color:#e2e8f0;border-radius:10px;padding:14px;height:360px;overflow:auto;border:1px solid #0f172a}
.console__empty{color:#94a3b8;font-style:italic}
.log{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:12px;line-height:1.4;padding:6px 8px;border-radius:6px;background:#0b132a;margin:6px 0;border:1px solid #111c3a}
.log__meta{color:#93c5fd}
.log--completed{border-color:var(--success)}
.log--error{border-color:var(--error)}
.log--step{border-color:var(--brand-primary)}

.footer{border-top:1px solid var(--muted);background:#fff;padding:16px 0;position:sticky;bottom:0}
.footer__content{display:flex;align-items:center;justify-content:space-between}
.footer__note{font-size:12px;color:var(--text-body)}

/* Utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}