/* Grok Agent: Binance-yellow canvas, ivory surfaces, black-and-white character.
   Geometry and transaction controls come from the existing SENSEI layout. */
:root {
  --bg:#fcd535; --surface:#fffbed; --inset:#fff4c8; --raise:#f4e5a2; --deep:#eac22c;
  --text:#181a20; --text-2:#3d3c32; --muted:#625b3a; --line:#c9b04d; --line-strong:#272820;
  --hair:rgba(24,26,32,.15); --ink:#181a20; --cream:#fffdf5;
  --yellow:#f0b90b; --yellow-2:#ffe995; --yellow-deep:#88701c; --yellow-soft:rgba(240,185,11,.13);
  --orange:#181a20; --peach:#ffeb9b; --mint:#fffdf5;
  --green:#397344; --green-soft:rgba(57,115,68,.10); --green-text:#255d31;
  --red:#aa3030; --red-soft:rgba(170,48,48,.08); --red-text:#922424;
  --shadow-sm:3px 3px 0 #181a20; --shadow:5px 5px 0 #181a20; --shadow-lg:9px 9px 0 #181a20;
  color-scheme:light;
}
body { background:var(--bg); }
::selection { background:var(--ink); color:var(--bg); }
.topbar { background:rgba(252,213,53,.96); }
.brand-mark.grok-logo,.agent-avatar.avatar-frame { background:transparent; border:0; overflow:visible; border-radius:0; }
.brand-mark.grok-logo img,.agent-avatar.avatar-frame img { object-fit:contain; }
.brand-name { letter-spacing:-.035em; }
.brand-name small { letter-spacing:.08em; }
.nav { background:var(--surface); }
.nav a.active { background:var(--ink); color:var(--bg); }
.primary,.connect,.back,.button.primary {
  background:var(--ink); color:var(--bg); border-color:var(--ink); box-shadow:3px 3px 0 var(--yellow-deep);
}
.primary:hover:not(:disabled),.connect:hover,.back:hover,.button.primary:hover:not(:disabled) {
  background:#2b2d32; box-shadow:5px 5px 0 var(--yellow-deep);
}
.connect.connected,.button.ghost { background:var(--surface); color:var(--text); border-color:var(--line-strong); }
.button:disabled { background:var(--raise); color:var(--muted); box-shadow:none; }
h1 em { color:var(--ink); font-style:italic; }
.hero-copy .eyebrow { background:rgba(255,253,245,.7); }
.hero-copy .lead { max-width:520px; }
.hero-copy h1 { text-wrap:normal; }
.hero-copy h1 em { display:block; }
.hero-note { color:#4d482d; }
.pulse { background:var(--ink); animation:none; }
.mascot,.paper-mascot { object-fit:contain; filter:none; }
.mint-wrap:before,.mint-wrap:after,.sparkle { display:none; }
.card-head { background:var(--yellow-2); }
.agent-badge b { font-size:17px; letter-spacing:-.035em; }
.network { background:var(--ink); color:var(--cream); }
.network i { background:var(--bg); }
.progress { background:#e6dba9; }
.progress i { background:repeating-linear-gradient(-45deg,#181a20 0 8px,#45463d 8px 16px); box-shadow:none; }
.pct { background:var(--ink); color:var(--bg); }
.price-box { display:flex; flex-direction:column; gap:10px; justify-content:center; padding:14px; border:1.5px solid var(--line); border-radius:18px; background:var(--inset); }
.price-box>strong { font-size:28px; line-height:1.25; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.price-box>strong small { font-size:13px; }
.price-box>[data-i18n="mint.total"] { font-size:12px; color:var(--muted); }
.stepper .unit-input { padding:0; }
.stepper button:hover:not(:disabled) { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.quick button.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.receive { justify-content:space-between; padding:12px 14px; border:1.5px dashed var(--line); border-radius:14px; font-size:14px; }
.receive strong { text-align:right; font-variant-numeric:tabular-nums; }
.marquee-band { background:var(--ink); }
.marquee span,.marquee-track>b { color:var(--bg); }
.marquee-track { align-items:center; gap:22px; }
.marquee span { padding-right:0; }
.marquee-track>b { font-weight:400; }
.feature-icon { width:52px; height:52px; border-radius:14px; box-shadow:none; background:var(--yellow-2); }
.feature-icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.feature:nth-child(2) .feature-icon,.feature:nth-child(3) .feature-icon { background:var(--yellow-2); }
.feature-top>span { color:var(--muted); font:500 12px var(--mono); }
.step-num { -webkit-text-stroke-color:rgba(24,26,32,.13); }
.tier-row.active { background:var(--yellow-2); }
.status-chip { border:1px solid var(--line); padding:6px 10px; border-radius:999px; font-size:12px; color:var(--text-2); }
.rank-tabs button.active,.rank-tabs button[aria-selected=true] { background:var(--ink); color:var(--bg); }
.chart-tag,.paper-card h3,.contract-chip>span { color:var(--ink)!important; }
.paper-card h3 { border-color:var(--line); }
.chart { background-image:linear-gradient(rgba(24,26,32,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(24,26,32,.07) 1px,transparent 1px); }
.paper-card p+p { margin-top:14px; }
.footer { background:#edc52e; }
.footer-word { -webkit-text-stroke:2px rgba(24,26,32,.18); }
.x-link { display:grid; place-items:center; width:42px; height:42px; border:1.5px solid var(--ink); border-radius:12px; background:var(--ink); color:var(--bg); }
.x-link svg { width:20px; height:20px; }
.mint-transaction-status a,.wallet-option strong,.aw-pairing strong,.aw-pairing a,.agent-wallet-pairing strong { color:var(--ink); }
.wallet-status-error { border-color:var(--red); }
.modal-head { gap:14px; }
.modal-head h2 { min-width:0; margin:0; font-size:22px; line-height:1.25; overflow-wrap:anywhere; }
.modal-head .close { flex:0 0 auto; }
.aw-actions button,.aw-recovery button { border-color:var(--line-strong); color:var(--ink); background:var(--yellow-2); min-height:42px; }
.aw-status { color:var(--text-2); }
.aw-risk,.aw-wallet-notices p { color:#735211; }
.aw-wallet-notices p { border-color:#ac7c23; background:#fff0c6; }
.aw-recovery,.aw-recovery input { border-color:var(--line); }
.aw-recovery input { background:var(--cream); color:var(--ink); }
.aw-success-card { background:var(--bg); }
.aw-success-card img { filter:none; }
.aw-success-burst { opacity:.55; }
@media(max-width:650px) {
  .brand-name { font-size:15px; }
  .agent-badge b { font-size:15px; }
  .card-head { gap:9px; flex-wrap:wrap; }
  .network { padding:6px 9px; font-size:10px; }
  .price-box { min-height:100px; }
  .hero-copy h1 { max-width:580px; }
}
@media(max-width:380px) {
  .brand-name { font-size:14px; }
  .brand { gap:6px; }
  .top-actions { gap:6px; }
  .top-actions .connect { padding:0 8px; font-size:11px; }
}