/* Shared design tokens + components for landing and dashboard */
:root{
  --bg:#08090a; --bg2:#0c0f11; --panel:#101417; --panel2:#151a1e; --line:#1e262b; --line2:#2a343a;
  --text:#eef2f0; --muted:#8a9894; --dim:#5d6a67;
  --amber:#ff8a3d; --amber2:#ffc06b; --cyan:#3ee6d0; --pos:#46f0a5; --neg:#ff5470;
  --r:14px; --r-sm:10px;
  --display:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--display);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block}
.mono{font-family:var(--mono)}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}

/* noise + glow backdrop */
.backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 600px at 78% -10%,rgba(255,138,61,.13),transparent 60%),
    radial-gradient(700px 500px at -10% 30%,rgba(62,230,208,.07),transparent 60%),
    linear-gradient(var(--bg),var(--bg2));}
.backdrop::after{content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%)}

/* brand */
.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.02em}
.brand .mk{width:34px;height:34px;flex:none}
.brand .mk svg{width:100%;height:100%}
.brand .wm{display:flex;flex-direction:column;line-height:1.02;text-transform:uppercase}
.brand .wm b{font-size:15px;letter-spacing:.14em}
.brand .wm span{font-size:10.5px;letter-spacing:.32em;color:var(--amber);font-weight:500}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--text);font:600 14px var(--display);cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s,color .2s}
.btn:hover{border-color:var(--amber);color:var(--amber2)}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,var(--amber2),var(--amber));color:#170b02;border-color:transparent}
.btn.primary:hover{color:#170b02;filter:brightness(1.08)}
.btn svg{width:17px;height:17px}
.btn.icon{width:44px;padding:0}
.btn.inert,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* spinning rotor helpers */
.rotor{transform-origin:50% 50%;transform-box:fill-box}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
.spin-slow{animation:spin 14s linear infinite}
.spin-rev{animation:spinr 40s linear infinite}

/* toast */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;padding:11px 18px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--amber);color:var(--amber2);font:600 13px var(--display);transition:.25s;z-index:200;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* contract box */
.ca{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 14px 12px 22px;border-radius:var(--r);
  border:1px solid var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));cursor:pointer;transition:border-color .2s}
.ca:hover{border-color:var(--amber)}
.ca .ca-k{font:600 10.5px var(--mono);letter-spacing:.18em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.ca .ca-v{flex:1;text-align:center;font:600 clamp(12px,1.55vw,18px) var(--mono);letter-spacing:.02em;overflow-wrap:anywhere}
.ca .ca-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--amber);color:#170b02;font:700 13px var(--display)}
.ca .ca-btn svg{width:16px;height:16px}
.ca.pending{cursor:default}
.ca.pending .ca-v{color:var(--amber2);letter-spacing:.16em}
.ca.pending .ca-btn{background:var(--line2);color:var(--muted)}
.ca.copied{border-color:var(--pos)}
.ca.copied .ca-btn{background:var(--pos)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}