/* Kraftera shared styles: dark premium shell, Kraftera gold accent, colourful artwork. */
:root{
  --bg:#07080C; --bg2:#0B0D12; --card:#111319; --card2:#181B23; --card3:#1F232D;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --text:#F3F4F6; --muted:#979CAB; --dim:#6B7080;
  --gold:#F5C543; --gold-2:#FFD86B; --gold-soft:rgba(245,197,67,.12); --gold-line:rgba(245,197,67,.38);
  --lime:#C6F45A; --cream:#EEECE4; --ink:#0B0C10;
  --red:#FF6B6B; --green:#45D483;
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --body:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --pop:var(--display);
  --wrap:1240px;
  /* legacy names used by older inline styles */
  --ink-soft:var(--muted); --mist:var(--card2); --white:#FFFFFF; --blue:#5B7CFF; --coral:#FF6B4A;
  --electric:#3B4BFF; --pink:#FF5FA2; --sun:#FFE14D; --purple:#8B5CFF; --cyan:#29D3FF; --orange:#FF8A1F;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:var(--body);font-size:16px;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
img,svg{display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- small shared pieces ---------- */
.pill-mono{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);color:var(--muted);background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:8px 12px}
.pill-mono i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.hl{color:var(--gold)}
.mark-hl{background:var(--gold);color:var(--ink);border-radius:6px;padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 15px/1 var(--body);padding:13px 20px;border-radius:12px;border:1px solid var(--line2);text-decoration:none;cursor:pointer;background:var(--card);color:var(--text);transition:background .15s, border-color .15s, transform .15s}
.btn:hover:not(:disabled){border-color:rgba(255,255,255,.3);background:var(--card2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn svg{width:16px;height:16px}
.btn-ink,.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-ink:hover:not(:disabled),.btn-gold:hover:not(:disabled){background:var(--gold-2);border-color:var(--gold-2)}
.btn-lime{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.btn-lime:hover:not(:disabled){background:#D6FF79;border-color:#D6FF79}
.btn-line,.btn-white{background:transparent;color:var(--text)}
.full{width:100%}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(7,8,12,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:22px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font:700 20px var(--display);text-decoration:none;letter-spacing:-.01em;flex-shrink:0;color:var(--text)}
.mark{width:34px;height:34px;border-radius:10px;background:var(--gold);color:var(--ink);display:grid;place-items:center;font:800 18px var(--display);box-shadow:0 0 22px rgba(245,197,67,.35)}
.search{flex:1;max-width:440px;position:relative}
.search input{width:100%;font:500 15px var(--body);padding:11px 16px 11px 40px;border:1px solid var(--line2);border-radius:12px;background:var(--card);color:var(--text)}
.search input::placeholder{color:var(--dim)}
.search input:focus{border-color:var(--gold-line);outline:none;box-shadow:0 0 0 4px var(--gold-soft)}
.search svg{position:absolute;left:14px;top:50%;translate:0 -50%;width:16px;height:16px;color:var(--dim)}
.top-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.top-links a:not(.btn){text-decoration:none;font-weight:500;font-size:15px;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent}
.top-links a:not(.btn):hover{color:var(--text)}
.top-links a[aria-current="page"]{color:var(--text);border-bottom-color:var(--gold)}
#walletBtn{padding:11px 16px}
#walletBtn.connected{background:var(--card);color:var(--text);border-color:var(--line2);font-variant-numeric:tabular-nums}
#walletBtn.connected::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}

.demo-note{background:#0E0F14;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px;text-align:center;padding:7px 16px}
.demo-note b{color:var(--gold);font-weight:600}

/* ---------- artwork ---------- */
.cover{aspect-ratio:1;position:relative;display:block;overflow:hidden;background:var(--card2)}
.cover svg{width:100%;height:100%;display:block}
.hue-blue{background:linear-gradient(135deg,#2433FF,#6B78FF)}
.hue-coral{background:linear-gradient(135deg,#FF5FA2,#FF9A3D)}
.hue-gold{background:linear-gradient(135deg,#FF8A1F,#FFD23F)}
.hue-mist{background:linear-gradient(135deg,#00C2A8,#29D3FF)}
.hue-ink{background:linear-gradient(135deg,#141633,#2433FF)}

/* ---------- listing card ---------- */
.kcard{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
.kcard:hover{transform:translateY(-4px);border-color:var(--gold-line);box-shadow:0 22px 44px -22px rgba(245,197,67,.45)}
.kc-art{position:relative}
.kc-art .cover{transition:transform .35s ease}
.kcard:hover .kc-art .cover{transform:scale(1.04)}
.kc-art{overflow:hidden}
.kc-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:8px;min-width:0}
.kcard h3{font:600 16px/1.25 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.who{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);min-width:0}
.who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{width:22px;height:22px;border-radius:50%;overflow:hidden;border:1.5px solid var(--line2);flex-shrink:0;display:block;background:var(--card2)}
.av svg{width:100%;height:100%;display:block}
.kc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.price-pill{background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line);border-radius:8px;padding:4px 9px;font:700 13px/1.2 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.likes{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.likes svg{width:14px;height:14px}
.likes svg path{stroke:none}
.cat-tag,.chainb{position:absolute;display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--body);color:#fff;background:rgba(7,8,12,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 9px}
.cat-tag{bottom:10px;left:10px}
.chainb{top:10px;right:10px}
.cat-tag::before,.chainb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot,#fff)}
.chain-eth{--dot:#A78BFA}.chain-base{--dot:#5B7CFF}.chain-sol{--dot:#14F195}.chain-xrpl{--dot:#E5E7EB}
.cat-Art{--dot:#29D3FF}.cat-Music{--dot:#FF5FA2}.cat-Ebooks{--dot:#FFE14D}.cat-Templates{--dot:#B9A2FF}.cat-NFTs{--dot:var(--lime)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-box{position:relative;width:100%;max-width:420px;background:var(--card);border:1px solid var(--line2);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6);padding:28px}
.modal-x{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--card2);cursor:pointer;font-size:19px;line-height:1;color:var(--text)}
.modal h2{font:700 24px var(--display);letter-spacing:-.02em}
.m-sub{color:var(--muted);margin:6px 0 20px;font-size:15px}
.wallet-list{list-style:none;display:grid;gap:8px}
.wallet-opt{width:100%;display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line2);border-radius:14px;background:var(--card2);cursor:pointer;text-align:left;color:var(--text)}
.wallet-opt:hover:not(:disabled){border-color:var(--gold-line);background:var(--card3)}
.wallet-opt b{display:block;font-weight:600}
.wallet-opt small{color:var(--muted);font-size:13px}
a.wallet-opt{text-decoration:none}
a.wallet-opt small{color:var(--gold);font-weight:600}
.wallet-opt:disabled{opacity:.6;cursor:default}
.w-dot{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font:800 17px var(--display);color:#fff;flex-shrink:0}
.w-metamask{background:#E8821E}.w-walletconnect{background:#3B99FC}.w-phantom{background:#7C5CF5}.w-coinbase{background:#0052FF}
.m-foot{margin-top:18px;font-size:13px;color:var(--dim);text-align:center}
.addr{font:500 13px/1.5 var(--mono);word-break:break-all;background:var(--card2);padding:12px 14px;border-radius:10px;margin-bottom:16px}
.w-err{color:var(--red);font-size:14px;font-weight:500;margin-top:12px}
.w-err:empty{display:none}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:24px;translate:-50% 20px;background:var(--card2);border:1px solid var(--line2);color:var(--text);padding:12px 20px;border-radius:12px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s, translate .2s;z-index:60;box-shadow:0 18px 40px rgba(0,0,0,.5)}
#toast.show{opacity:1;translate:-50% 0}

/* ---------- footer ---------- */
footer.foot{border-top:1px solid var(--line);padding:28px 0;margin-top:100px;font-size:14px;color:var(--dim);background:var(--bg)}
footer.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer.foot a{text-decoration:none;color:var(--muted)}
footer.foot a:hover{color:var(--text)}

/* ---------- auth pages ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.auth-side{position:relative;overflow:hidden;background:radial-gradient(circle at 20% 85%,rgba(245,197,67,.22),transparent 55%),var(--bg2);border-right:1px solid var(--line);padding:36px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.auth-side h2{font:700 clamp(38px,4.4vw,62px)/1 var(--display);letter-spacing:-.035em;max-width:12ch}
.auth-side p{font-size:18px;max-width:34ch;margin-top:18px;color:var(--muted)}
.auth-side ul{list-style:none;display:grid;gap:12px;font-weight:500;color:var(--muted)}
.auth-side li{display:flex;gap:10px;align-items:center}
.auth-side li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);flex-shrink:0}
.auth-main{display:grid;place-items:center;padding:48px 24px}
.auth-box{width:100%;max-width:400px}
.auth-box h1{font:700 40px/1 var(--display);letter-spacing:-.03em}
.auth-box .sub{color:var(--muted);margin:12px 0 28px}
.auth-box .sub a{color:var(--gold);font-weight:600}
.f{margin-bottom:16px}
.f label{display:flex;justify-content:space-between;font-weight:600;margin-bottom:7px;font-size:15px}
.f label a{font-weight:500;font-size:14px;color:var(--muted)}
.f input{width:100%;font:500 16px var(--body);padding:13px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--card);color:var(--text)}
.f input::placeholder{color:var(--dim)}
.f input:focus{border-color:var(--gold-line);outline:none;box-shadow:0 0 0 4px var(--gold-soft)}
.f.bad input{border-color:var(--red)}
.f .hint{font-size:13px;color:var(--dim);margin-top:6px}
.f .e{font-size:14px;color:var(--red);font-weight:500;margin-top:6px}
.f .e:empty{display:none}
.pw{position:relative}
.pw input{padding-right:64px}
.pw button{position:absolute;right:8px;top:50%;translate:0 -50%;border:1px solid var(--line);background:var(--card2);border-radius:8px;padding:6px 9px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text)}
.check{display:flex;gap:10px;align-items:center;margin:4px 0 22px;font-size:15px;color:var(--muted)}
.check input{width:18px;height:18px;accent-color:var(--gold)}
.form-err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.45);color:#FFB3B3;border-radius:12px;padding:12px 14px;font-size:15px;font-weight:500;margin-bottom:18px}
.form-ok{background:rgba(69,212,131,.1);border:1px solid rgba(69,212,131,.45);color:#9EEBC0;border-radius:12px;padding:12px 14px;font-size:15px;font-weight:500;margin-bottom:18px}
.form-err:empty,.form-ok:empty{display:none}
.setup{background:var(--card2);border:1px solid var(--line2);color:var(--muted);border-radius:12px;padding:14px 16px;font-size:14px;margin-bottom:22px}
.setup b{color:var(--gold)}
.setup code{color:var(--text);font-family:var(--mono)}
.legal{font-size:13px;color:var(--dim);margin-top:18px}
.legal a{color:var(--muted)}

@media (max-width:860px){
  .auth{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .auth-side{border-right:0;border-bottom:1px solid var(--line);padding:22px 24px}
  .auth-side .pitch{display:none}
  .auth-main{place-items:start center;padding:32px 20px 60px}
}
@media (max-width:760px){
  .topbar .wrap{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;gap:12px}
  .search{order:3;max-width:none;flex-basis:100%}
  .top-links a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){
  .kcard,.kc-art .cover,#toast,.btn{transition:none}
  .kcard:hover{transform:none}
  .kcard:hover .kc-art .cover{transform:none}
}

/* artwork fan on sign-in / sign-up */
.auth-art{position:relative;height:250px;margin:10px 0}
.auth-art .cover{position:absolute;width:150px;border-radius:20px;border:1px solid var(--line2);box-shadow:0 30px 50px -20px rgba(0,0,0,.8)}
.auth-art .cover:nth-child(1){left:0;top:40px;rotate:-10deg}
.auth-art .cover:nth-child(2){left:120px;top:0;rotate:2deg;z-index:1;box-shadow:0 30px 60px -20px rgba(245,197,67,.45)}
.auth-art .cover:nth-child(3){left:240px;top:46px;rotate:12deg}
@media (max-width:860px){.auth-art{display:none}}

/* live NFT images + external cards */
.cover.has-img{background:linear-gradient(135deg,#1A1D26,#232838)}
.cover.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.cat-tag.mk::before{background:var(--gold)}
.kcard .go{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.kcard:hover .go{color:var(--gold)}
.credit{font:500 12px var(--mono);color:var(--dim)}
.credit a{color:var(--muted)}
.credit a:hover{color:var(--gold)}
.skel{border-radius:18px;background:linear-gradient(100deg,var(--card) 30%,var(--card2) 50%,var(--card) 70%);background-size:300% 100%;border:1px solid var(--line);aspect-ratio:.78}
@media (prefers-reduced-motion:no-preference){.skel{animation:skel 1.4s ease infinite}@keyframes skel{from{background-position:100% 0}to{background-position:0 0}}}
.empty-cat{grid-column:1/-1;display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:var(--card);border:1px dashed var(--line2);border-radius:20px;padding:26px}
.empty-cat .cover{width:96px;border-radius:16px;flex-shrink:0}
.empty-cat h3{font:700 22px var(--display);letter-spacing:-.02em}
.empty-cat p{color:var(--muted);margin:6px 0 14px}