:root{
  --bg:       #0b0f17;
  --panel:    #0f1624;
  --text:     #e8eefc;
  --muted:    #a9b4d0;
  --line:     #22314d;
  --accent:   #5aa7ff;
  --accent2:  #66f0c0;
  --warn:     #ffcc66;
  --bad:      #ff6b6b;
  --code:     #0a1222;

  --radius:   14px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x: visible; /* fallback */
}

/* Prevent horizontal scroll without breaking sticky */
@supports (overflow: clip){
  html,body{ overflow-x: clip; }
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.wrap{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:clamp(12px, 2.4vw, 24px);
}

/* Header */
.topHeader{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(90,167,255,.18), rgba(90,167,255,0));
  padding:18px;
  height: 100px;
}

.brandRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brandLogo{
  flex:0 0 auto;
  width:60px;
  height:60px;
}

.brandText{
  min-width:0;
}

.brandText h1{
  margin:0;
  font-size:22px;
  line-height:1.15;
}

.sub{
  margin:4px 0 0;
  color:var(--muted);
}

/* Header: price + total burned */
.headerBurnTotals{
  margin-top:6px;
  font-size:14px;
  color: rgba(90,167,255,1);
}

/* Header CRO/USD: plain text (no border, no panel), same tone as subtitle */
.headerMetaRight{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  color:var(--muted);
  line-height:1.15;
}

.headerMetaLabel{
  font-size:12px;
}

/* Hero banner */
.hero{
  margin-top:14px;
  border:1px solid rgba(34,49,77,.75);
  border-radius:var(--radius);
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(102,240,192,.08), transparent 28%),
    linear-gradient(180deg, rgba(90,167,255,.08), rgba(15,22,36,.72));
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-width:0;
}

.heroMedia{
  min-height:150px;
  background-image:
    url("../assets/images/banners/Kapd.app\ Banner.png");
  background-size:cover;
  background-position:center;
}

.heroContent{
  padding:16px;
  min-width:0;
}

.heroContent h2{
  margin:0 0 8px;
  font-size:18px;
}

.muted{ 
  color:var(--muted); 
}

.heroMintedCount{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border:1px solid rgba(34,49,77,.75);
  border-radius:999px;
  background:rgba(11,15,23,.45);
  color:var(--text);
  font-size:13px;
}

.warn{ 
  color:var(--warn); 
  font-size: 11px; 
}

.warnRed{
  color:var(--bad);
  font-size: 16px;
}
.heroCtas{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.btnPrimary,
.btnConnect,
.btnGhost,
.btnBurn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(15,22,36,.65);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}

.btnPrimary{
  border-color:rgba(90,167,255,.7);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset;
  width: 120px;
  height: 36px;
}

.btnConnect{
  border-color:rgba(90,167,255,.7);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset;
  width: 120px;
  height: 51px;
  margin-top: 4px;
}

.btnGhost{
  border-color:rgba(90,167,255,.7);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset;
  height: 36px;
}

.gap {
  margin-top: 10px;
}

.btnBurn{
  border-color:rgba(241, 163, 45, 0.55);
  box-shadow:0 0 0 2px rgba(236, 148, 48, 0.1) inset;
}

.btnPrimary[disabled],
.btnGhost[disabled],
.btnBurn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* Main grid */
.mainGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:16px;
}

.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(15,22,36,.65);
  padding:16px;
  min-width:0;
  background:
    radial-gradient(circle at top right, rgba(102,240,192,.08), transparent 28%),
    linear-gradient(180deg, rgba(90,167,255,.08), rgba(15,22,36,.72));
}

.cardWide{ grid-column: 1 / -1; }

.cardHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.cardHeaderRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.cardHeader h3{
  margin:0;
  font-size:16px;
}

.promoRow{
  display:block;
}

.promoText{
  min-width:0;
  display:flow-root;
}

.promoTitle{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.2;
  min-width:0;
}

.promoCard .muted{
  max-width:none;
}

.promoBtn{
  float:right;
  width:120px;
  min-width:120px;
  margin:0 0 10px 16px;
}

@media (max-width:980px){

  .promoBtn{
    margin-left:12px;
  }

}

@media (max-width:700px){

  .promoBtn{
    float:right;
    width:120px;
    min-width:120px;
    margin:0 0 10px 12px;
  }

}

.pill{
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:rgba(11,15,23,.6);
  white-space:nowrap;
}

.divider{
  height:1px;
  background:rgba(34,49,77,.75);
  margin:14px 0;
}

/* Form elements */
.formGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top:12px;
}

.field{ display:block; min-width:0; }
.label{ display:block; font-weight:600; margin-bottom:6px; }
.hint{ display:block; margin-top:6px; color:var(--muted); font-size:12px; }

.input{
  width:100%;
  height:36px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(11,15,23,.65);
  color:var(--text);
  outline:none;
}
.input:focus{
  border-color:rgba(90,167,255,.7);
  box-shadow:0 0 0 3px rgba(90,167,255,.12);
}

/* Segmented control (no JS) */
/* Visually hidden (screen-reader only) */
.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Used by JS copy fallback (kept off-screen) */
.srCopyTextarea{
  position:fixed;
  left:-9999px;
  top:0;
  width:1px;
  height:1px;
  opacity:0;
}

/* Segmented control (fieldset reset) */
.segmented{
  border:0;
  padding:0;
  margin:12px 0 0;

  display:flex;
  gap:8px;
  min-width:0;
}

.segmented input{ display:none; }

.segmented label{
  flex:1 1 auto;
  text-align:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(11,15,23,.45);
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}

#burnSelf:checked + label,
#burnFor:checked + label{
  border-color:rgba(90,167,255,.6);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset;
}

/* Show/hide beneficiary field based on selected radio */
.fieldBeneficiary{ display:none; }
.fieldBeneficiary.show{ display:block; }

/* Action row */
.actionRow{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.denomToggle{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:12px;          /* match other buttons */
  overflow:hidden;
  background:rgba(11,15,23,.45);
}

.denomBtn{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:8px 10px 9px 10px;
  cursor:pointer;
  font-size:12px;
  line-height:1;

  border-radius:0;             /* keep inner corners straight */
}

/* Outer corners only (rounded-rectangle, not capsule) */
.denomBtn:first-child{
  margin: 0 0 0 2px;
  border-top-left-radius:9px;
  border-bottom-left-radius:9px;
}
.denomBtn:last-child{
  margin: 0 2px 0 0;
  border-top-right-radius:9px;
  border-bottom-right-radius:9px;
}

/* Visible divider between CRO and USD */
.denomBtn + .denomBtn{
  border-left:1px solid var(--line);
}

.denomBtn.isActive{
  color:var(--text);
  background:rgba(90,167,255,.18);
}

/* Preview box */
.previewBox{
  border:1px solid rgba(34,49,77,.75);
  border-radius:12px;
  padding:12px;
  background:rgba(11,15,23,.45);
}

.kv{
  display:grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
  gap:8px 12px;
}

/* Load baskets: keep owner input wide (don't use .kv for this row) */
.ownerLoadRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 120px;
  align-items:center;
  gap:10px;
}

.ownerLoadRow .input{
  width:100%;
  min-width:0;
}

.ownerLoadRow .btnPrimary{
  width:120px;
  justify-self:end;
}

@media (max-width: 520px){
  .ownerLoadRow{
    grid-template-columns:minmax(0, 1fr) 120px;
    gap:8px;
  }

  .ownerLoadRow .btnPrimary{
    width:120px;
    min-width:120px;
  }
}

/* Basket Details: make row height stable (edit controls must not change spacing) */
#kapdViewerDetailsCard .kv{
  gap:8px 12px; /* consistent spacing in both view + edit */
}

#kapdViewerDetailsCard .kv > .k,
#kapdViewerDetailsCard .kv > .v{
  min-height:32px;
  display:flex;
  align-items:center;
}

/* Force dark native form controls in Basket Details (Chrome/Edge) */
#kapdViewerDetailsCard{
  color-scheme: dark;
}

/* Basket Details: compact in-table edit controls (flat + aligned) */
#kapdViewerDetailsCard .kv .select,
#kapdViewerDetailsCard .kv .input{
  margin-left: -3px;
  height:32px;
  padding:0;                 /* align text with plain values */
  border:0;
  background:transparent;     /* no “box” = no perceived gaps */
  box-shadow:none;
  color: var(--text);
}

/* Dark dropdown list (best-effort; native selects are limited, but this fixes most cases) */
#kapdViewerDetailsCard .kv .select option{
  background: rgba(11,15,23,1);
  color: var(--text);
}

#kapdViewerDetailsCard .kv .select:focus,
#kapdViewerDetailsCard .kv .input:focus{
  border:0;
  box-shadow:0 0 0 2px rgba(90,167,255,.14) inset;
}

.k{ color:var(--muted); }
.v{ min-width:0; overflow-wrap:anywhere; word-break:break-word; }

.kvLabel{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 22px;
  align-items:center;
  column-gap:8px;
  width:100%;
  min-width:0;
}

.kvLabel > span:first-child{
  min-width:0;
}

.kvInfoBtn{
  width:22px;
  height:22px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  justify-self:start;
}

.kvInfoBtn:hover{
  color:var(--accent);
}

.kvInfoBtn i{
  font-size:14px;
  line-height:1;
}

#kapdViewerDetailsCard .detailsActions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

#kapdViewMaturity.maturityOk{
  color:var(--accent2);
}

/* My Baskets */
.myBasketsBlock{
  margin-top:12px;
  border-top:1px solid rgba(34,49,77,.55);
  padding-top:12px;
}

.miniTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap;
}

/* Reserve space for "My Baskets" even when hidden (prevents layout jump) */
#kapdMyBasketsBtn{ flex:0 0 auto; }
#kapdMyBasketsBtn.isHidden{
  display:inline-flex !important;  /* override hidden rule */
  visibility:hidden;
  pointer-events:none;
}

.myBasketsList{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  max-height:260px;
  overflow-y:auto;
  padding-right:4px;
}

/* Desktop: 2 columns */
@media (min-width: 900px){
  .myBasketsList{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-height:292px;
    overflow-y:auto;
    align-content:start;
  }
}

.myBasketItem{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:4px;

  border:1px solid rgba(34,49,77,.75);
  border-radius:12px;
  background:rgba(11,15,23,.45);
  padding:10px 12px;

  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}

.myBasketLine1{
  display:block;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.myBasketLine2{
  display:block;
  width:100%;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.myBasketGift{
  color:var(--text);
}

.myBasketItem.isSelected{
  border-color:rgba(90,167,255,.75);
  box-shadow:0 0 0 2px rgba(90,167,255,.12) inset;
}

.myBasketItem:hover{
  border-color:rgba(90,167,255,.55);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset;
}

.myBasketItem:focus-visible{
  outline:none;
  border-color:rgba(90,167,255,.75);
  box-shadow:0 0 0 3px rgba(90,167,255,.18);
}

.myBasketLeft{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.myBasketRight{
  flex:0 0 auto;
  color:var(--muted);
  white-space:nowrap;
}

.myBasketMeta{
  color:var(--muted);
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Addresses: never wrap; show ellipsis instead (works on div/span/a) */
.addr{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
  display:block;
}

.explorerLink{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
}

.explorerLink:hover{
  color:var(--text);
}

.addr .explorerLink{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.isHidden{ display:none !important; }

/* Badge area */
.badgeRow{
  margin-top:12px;
  display:grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap:12px;
  align-items:start;
}

.badgeFrame{
  border:1px solid rgba(34,49,77,.75);
  border-radius:12px;
  background:rgba(11,15,23,.45);
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.badgePlaceholder{
  color:var(--muted);
  font-weight:700;
  letter-spacing:.04em;
}

.badgeImg{
  display:none;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
}

.badgeFrame.hasImg .badgeImg{ display:block; }
.badgeFrame.hasImg .badgePlaceholder{ display:none; }

.miniTitle{
  margin:0 0 6px;
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.bullets{
  margin:8px 0 0;
  padding-left:18px;
}
.bullets li{ margin:6px 0; }

.featureGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.feature h4{ margin:0 0 6px; font-size:14px; }
.feature p{ margin:0; }

.callout{
  border-left:4px solid var(--accent2);
  background:rgba(102,240,192,.08);
  padding:10px 12px;
  border-radius:12px;
}
.calloutTitle{
  font-weight:700;
  margin-bottom:4px;
}

/* Footer */
.footer{
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(90,167,255,0), rgba(90,167,255,.18));
  padding:14px 16px;
}
.footerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footerLinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.kapdFooter{
  margin-top:18px;
  padding:18px 16px;
}

.kapdFooterInner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  text-align:center;
}

.kapdFooterLink{
  color:var(--text);
  font-weight:600;
}

.kapdFooterLink:hover{
  text-decoration:none;
  color:var(--accent);
}

.kapdFooterSocials{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.kapdFooterIconLink{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(11,15,23,.45);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:border-color .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}

.kapdFooterIconLink:hover{
  text-decoration:none;
  color:var(--accent);
  border-color:rgba(90,167,255,.6);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset;
  background:rgba(90,167,255,.08);
}

.kapdFooterIconLink i{
  font-size:18px;
  line-height:1;
}

@media (max-width: 520px){
  .kapdFooterInner{
    flex-direction:column;
    gap:12px;
  }
}

#kapdViewerDetailsCard #kapdViewAssetCount + .iconBtn,
#kapdViewerDetailsCard #kapdAssetInfoBtn,
#kapdViewerDetailsCard #kapdAssetAddBtn,
#kapdViewerDetailsCard #kapdAssetDepositBtn{
  display:inline-flex;
  vertical-align:middle;
  margin-left:10px;
}

.kapdAssetInfoCard{
  width:min(860px, 100%);
}

.kapdAssetInfoList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.kapdAssetInfoRow{
  padding:12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}

.kapdAssetInfoTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.kapdAssetInfoTitle{
  font-weight:700;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.kapdAssetInfoBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid rgba(90,167,255,0.35);
  border-radius:999px;
  background:rgba(90,167,255,0.12);
  font-size:12px;
  line-height:1;
}

.kapdAssetInfoGrid{
  display:grid;
  grid-template-columns:minmax(0, 180px) minmax(0, 1fr);
  gap:6px 12px;
}

.kapdAssetInfoGrid .mono{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.kapdPermitBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  padding:3px 8px;
  border:1px solid rgba(102,240,192,0.35);
  border-radius:999px;
  background:rgba(102,240,192,0.12);
  color:var(--accent2);
  font-size:11px;
  line-height:1;
}

.kapdWithdrawConfirmCard{
  width:min(760px, 100%);
}

.kapdLegalCard{
  width:min(920px, 100%);
}

.kapdLegalBody{
  max-height:min(70vh, 760px);
  overflow:auto;
  line-height:1.65;
}

.kapdLegalBody h4{
  margin:0 0 10px;
}

.kapdLegalBody p + h4{
  margin-top:18px;
}

.kapdLegalBody ul{
  margin:8px 0 0 18px;
  padding:0;
}

.kapdFooterLegal{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.kapdFooterTextBtn{
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  padding:0;
  font:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}

.kapdFooterTextBtn:hover{
  color:var(--text);
}

@media (max-width:640px){
  .kapdAssetInfoGrid{
    grid-template-columns:minmax(0, 1fr);
  }

  .kapdFooterInner{
    flex-direction:column;
    gap:10px;
  }
}

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .heroMedia{ display: none; }
  .mainGrid{ grid-template-columns: 1fr; }
  .topNav{ display:none; }
  .navMenu{ display:block; }

  /* Stack hamburger above CRO/USD and right-align both */
  .navWrap{
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
  }

  .docsPage .docsHeaderSections{
    display:none;
  }
}

@media (max-width: 520px){
  .topHeader{ padding:14px; }
  .brandText h1{ font-size:20px; }

  /* Keep the brand + hamburger on one row (top-right) */
  .brandRow{ align-items:flex-start; }
  .brand{ flex:1 1 auto; }
  .brandLogo{ width:52px; height:52px; }

  /* Slightly smaller preview badge on mobile */
  .headerBadgeFrame{
    width:40px;
    height:40px;
  }

  .badgeRow{ grid-template-columns: 1fr; }
  .kv{ grid-template-columns: minmax(0, 140px) minmax(0, 1fr); }

  /* optional: keep labels on one line */
  .kv .k{ white-space:nowrap; }

  /* kv2colMobile becomes redundant, but harmless */
  .kv.kv2colMobile{ grid-template-columns: minmax(0, 160px) minmax(0, 1fr); }  /* Phone: in badgeMeta, keep k/v inline (plenty of width) */

  .badgeMeta .kv{ grid-template-columns: minmax(0, 160px) minmax(0, 1fr); }

  /* Phone: Burn buttons layout — Connect full width, Preview + Burn on one row below */
  #burn .actionRow{ flex-wrap:wrap; }
  #burn #burnConnectBtn{ flex: 1 1 100%; }
  #burn #burnPreviewBtn,
  #burn #burnExecuteBtn{ flex: 1 1 calc(50% - 5px); }

  .featureGrid{ grid-template-columns: 1fr; }

  .docsPage .docsHeaderSections{
    display:none;
  }

  /* Keep badge next to the table on mobile as well */
  .previewWithBadge{
    grid-template-columns: minmax(0, 1fr) 142px;
    grid-template-areas: "kv badge";
    align-items:start;
  }

  .previewBadgeFrame{
    width:136px;
    height:136px;
    justify-self:end;
    align-self:start;
  }

}

/* Page hero (compact header section under brand row) */
.pageHero{
  margin-top:14px;
  border:1px solid rgba(34,49,77,.75);
  border-radius:var(--radius);
  background:rgba(15,22,36,.55);
  padding:14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  min-width:0;
}

.pageHeroText{ min-width:0; max-width:760px; }
.pageHeroText h2{ margin:0 0 6px; font-size:18px; }
.pageHeroActions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Toolbar */
.toolbar{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:nowrap;
}

.toolbarLeft{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  align-items:flex-end;
  min-width:0;
  width:100%;
  flex:0 0 auto;
}

.toolbarField{
  min-width:0;
  flex:1 1 auto;
}

.toolbarFieldSmall{
  min-width:140px;
  flex:0 0 170px;
}

.toolbarActions{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  width:100%;
  justify-content:flex-start;
  align-self:stretch;
}

/* Match input styling for select */
.select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(11,15,23,.65);
  color:var(--text);
  outline:none;
}
.select:focus{
  border-color:rgba(90,167,255,.7);
  box-shadow:0 0 0 3px rgba(90,167,255,.12);
}

/* Tables */
.tableScroll{
  max-width:100%;
  overflow-x:auto;
}

.table{
  width:100%;
  border-collapse:collapse;
  min-width:760px; /* internal scroll only; page never overflows */
}

/* Column sizing (no inline CSS in HTML) */
.table th.colRank{ width:72px; }
.table th.colAddr{ width:auto; }
.table th.colUsd { width:190px; }
.table th.colCro { width:160px; }

.table th.colActions{ width:96px; }

.actionsCell{
  text-align:right;
}

.addrCell{
  line-height:1.2;
}
.knownName{
  font-size:13px;
  color:var(--muted);
  margin-bottom:2px;
}

/* Compact icon button that matches the design language */
.iconBtn{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(11,15,23,.45);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.iconBtn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:rgba(232,238,252,.85);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.iconBtn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* EOA slots table columns */
.table th.colDay    { width:90px; }
.table th.colSlotCro{ width:170px; }
.table th.colSlotUsd{ width:170px; }

/* Spacing helper for notes under tables */
.noteUnderTable{ margin-top:10px; }

/* Tight form grid variant (used where we don't want the default top margin) */
.formGridTight{ margin-top:0; }

.table thead th{
  text-align:left;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
  background:rgba(11,15,23,.55);
  border-bottom:1px solid rgba(34,49,77,.75);
  padding:10px 10px;
}

.table tbody td{
  border-bottom:1px solid rgba(34,49,77,.55);
  padding:10px 10px;
  vertical-align:top;
}

.table tbody tr:hover{
  background:rgba(90,167,255,.06);
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* NEW (end of site.css starting at .smallText) */
.smallText{ font-size:12px; }

/* Toast (used by site.js) */
.toastHost{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  pointer-events:none;
  max-width:min(360px, calc(100vw - 32px));
}

.toast{
  pointer-events:none;
  border:1px solid rgba(34,49,77,.85);
  background:rgba(11,15,23,.92);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 10px 22px rgba(0,0,0,.30);
  color:var(--text);
  font-size:13px;
  line-height:1.35;
  max-width:100%;
}

.toast.toastOk{
  border-color:rgba(90,167,255,.65);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset, 0 10px 22px rgba(0,0,0,.30);
}

.toast.toastBad{
  border-color:rgba(255,107,107,.55);
  box-shadow:0 0 0 2px rgba(255,107,107,.10) inset, 0 10px 22px rgba(0,0,0,.30);
}

/* Transaction modal (centered, used during burn flow) */
.txModalOverlay{
  position:fixed;
  inset:0;
  z-index:10050; /* above toast */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;

  /* Slight dim + subtle blur (background stays visible) */
  background:rgba(0,0,0,0.28);
  -webkit-backdrop-filter:blur(2.5px);
  backdrop-filter:blur(2.5px);
}

.txModal{
  width:min(560px, calc(100vw - 32px));
  border-radius:18px;
  border:1px solid rgba(34,49,77,.85);
  background:rgba(11,15,23,.96);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  color:var(--text);
  padding:16px 16px 14px;
}

.txModalHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.txModalTitle{
  font-weight:650;
  font-size:14px;
  letter-spacing:.02em;
}

.txModalClose{
  border:1px solid var(--line);
  background:rgba(11,15,23,45);
  color:var(--text);
  width:34px;
  height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.txModalBody{
  display:grid;
  grid-template-columns:22px minmax(0, 1fr);
  column-gap:12px;
  align-items:flex-start;
}

.txModalMsg{
  min-width:0;
  font-size:13px;
  line-height:1.45;
  color:rgba(232,238,252,92);
}

.txSpinner{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid rgba(232,238,252,20);
  border-top-color:rgba(90,167,255,85);
  animation:txspin .8s linear infinite;
  margin-top:2px;
  flex:0 0 auto;
}

@keyframes txspin{
  to{ transform:rotate(360deg); }
}

.txModalMsg{
  font-size:13px;
  line-height:1.45;
  color:rgba(232,238,252,92);
}

.txModalMeta{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(34,49,77,55);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

.txModalHash{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  color:rgba(232,238,252,78);
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =========================
   Docs page (docs.html)
   ========================= */
.docsPage .grid{
  display:grid;
  grid-template-columns:minmax(0, 320px) minmax(0, 1fr);
  gap:16px;
  margin-top:18px;
  align-items:start; /* important for consistent sticky behavior in grid */
}

.docsPage .grid > *{ min-width:0; }
.docsPage .grid > header{ grid-column:1 / -1; }

/* Do NOT style all header/nav on docs page (it unintentionally hits the global top header
   and the "Sections" pill nav). Keep docs-specific styling scoped. */

/* "Sections" block inside the top header on docs.html */
.docsPage .docsHeaderSections{
  margin-top:12px;
}

/* On docs.html only: allow the hero text area to use the full hero width,
   so the section pills don't wrap unnecessarily. */
.docsPage .pageHeroText{
  max-width:none;
}

.docsPage .docsSectionNav{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  min-width:0;
  max-width:100%;
  overflow:visible;
}

/* Docs "section pills" should behave like header pills (white text) */
.docsPage .docsSectionNav .navPill{
  color:var(--text);
}

.docsPage .logo-header{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;   /* keep logo + title on one row */
  min-width:0;
}
.docsPage .logo-header img{ flex:0 0 auto; }
.docsPage .logo-header h1{
  margin:0 0 6px;
  font-size:22px;
  min-width:0;        /* allow wrapping inside flex */
}

.docsPage .sub{ color:var(--muted); }

/* TOC column should not interfere with sticky */
.docsPage .side{
    position:sticky; 
    top:16px; 
    align-self:start; 
    border:1px solid var(--line); 
    border-radius:14px; 
    background:rgba(15,22,36,.65); 
    padding:14px;
}

.docsPage .side h3{
  margin:0 0 8px;
  font-size:14px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.docsPage .side ul{ list-style:none; padding:0; margin:0; }
.docsPage .side li{ margin:6px 0; }
.docsPage .side a{
  display:block;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.docsPage .content section{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(15,22,36,.65);
  padding:16px;
  margin-bottom:16px;
}
.docsPage .sig{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Callouts used in docs */
.docsPage .note{
  border-left:4px solid var(--accent2);
  background:rgba(102,240,192,.08);
  padding:10px 12px;
  border-radius:10px;
  margin:10px 0;
}
.docsPage .warn{
  border-left:4px solid var(--warn);
  background:rgba(255,204,102,.10);
  padding:10px 12px;
  border-radius:10px;
  margin:10px 0;
}
.docsPage .bad{
  border-left:4px solid var(--bad);
  background:rgba(255,107,107,.10);
  padding:10px 12px;
  border-radius:10px;
  margin:10px 0;
}

/* Code blocks + tables in docs */
.docsPage pre{
  background:var(--code);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  overflow:auto;
  margin:10px 0;
}
.docsPage table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.docsPage th,
.docsPage td{
  border-bottom:1px solid rgba(34,49,77,.55);
  padding:10px;
  vertical-align:top;
}
.docsPage th{
  background:rgba(11,15,23,.55);
  text-align:left;
  color:var(--muted);
  font-weight:600;
}
.docsPage tr:last-child td{ border-bottom:none; }
.docsPage .k{ color:var(--muted); white-space:nowrap; }
.docsPage .small{ font-size:12px; }

@media (max-width: 980px){
  .docsPage .grid{ grid-template-columns:1fr; }

  /* Disable sticky TOC on narrow screens */
  .docsPage .side{
    position:relative;
    top:auto;
  }

  .docsPage .sideInner{
    max-height:none;
    overflow:visible;
  }
}

@media (max-width: 700px){
  .docsPage header{ padding:14px; }
  .docsPage .logo-header{ flex-wrap:wrap; }
  .docsPage .logo-header h1{ font-size:18px; }
  .docsPage .grid{ gap:12px; margin-top:14px; }

  .docsHeaderSections{ margin-top:12px; }
  .docsSectionNav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }

  .docsPage .sideInner{
    position:relative;
    top:auto;
  }

  .docsPage .sideInner ul{
    max-height:none;
    overflow:visible;
  }
  
  .docsPage .side h3{ font-size:12px; }
  .docsPage .side ul{ display:block; }
  .docsPage .side li{
    margin:6px 0;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .docsPage .side li.small.muted{
    display:block;
    white-space:normal;
    opacity:.9;
  }

  .docsPage .content section{ padding:14px; }
  .docsPage pre{ padding:10px; font-size:12px; }

  .docsPage table{
    display:block;
    max-width:100%;
    overflow-x:auto;
  }

  .docsPage .k{ white-space:normal; }
  .docsPage th,
  .docsPage td{ padding:8px; }
}

@media (max-width: 420px){
  .docsPage header{ padding:12px; }
  .docsPage .topNav .navPill{ font-size:12px; padding:6px 8px; }
  .docsPage .sideInner{ max-height:46vh; }
}

/* Contract page: subtle row highlight when jumping to a rank */
.flashRow {
  animation: burnsomeFlashRow 1.6s ease-out;
}

@keyframes burnsomeFlashRow {
  0%   { background: rgba(90, 167, 255, 0.18); }
  100% { background: transparent; }
}

.X {
  height: 24px;
  width: 24px;
}

.X-footer {
  display:inline-flex;
  margin-left: 5px;
  height: 12px;
  width: 12px;
}
/* --------------------------------------------------------------------- */
/* FAQ page                                                               */
/* --------------------------------------------------------------------- */

.faqList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.faqItem{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(11,15,23,.35);
  overflow:hidden;
}

.faqQ{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  font-weight:800;
  line-height:1.2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--text);
  -webkit-user-select:none;
  user-select:none;
}

.faqQ::-webkit-details-marker{ display:none; }

.faqQ::after{
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid rgba(232,238,252,.75);
  border-bottom:2px solid rgba(232,238,252,.75);
  transform:rotate(45deg);
  transition:transform .14s ease;
  flex:0 0 auto;
  margin-left:10px;
}

.faqItem[open] .faqQ::after{
  transform:rotate(225deg);
}

.faqQ:focus{
  outline:none;
}

.faqQ:focus-visible{
  box-shadow:0 0 0 3px rgba(90,167,255,.18);
}

.faqA{
  padding:0 14px 12px;
  color:rgba(232,238,252,.92);
}

.faqA p{
  margin:0;
  color:rgba(232,238,252,.92);
}

.faqItem:hover{
  background:rgba(90,167,255,.06);
}

/* ------------------------------------------------------------------ */
/* Badge 90-day chart button + modal                                   */
/* ------------------------------------------------------------------ */

.badgeMeta{
  position:relative;
}

.badgeChartBtn{
  position:absolute;
  right:25px;
  top:21px;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(34,49,77,.75);
  background:rgba(11,15,23,.45);
  color:greenyellow;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.badgeChartBtn:hover{
  background:rgba(11,15,23,.62);
  border-color:rgba(90,167,255,.55);
}

.badgeChartBtn:active{
  transform:translateY(-50%) scale(.98);
}

.badgeChartIcon{
  width:18px;
  height:18px;
  fill:var(--text);
  opacity:.9;
}

.badge90dModalOverlay{
  position:fixed;
  inset:0;
  z-index:10055;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.badge90dModal{
  width:min(720px, 92vw);
  max-height:min(82vh, 760px);
  border-radius:16px;
  border:1px solid rgba(34,49,77,.75);
  background:rgba(15,22,36,.92);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.badge90dModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid rgba(34,49,77,.65);
}

.badge90dModalTitle{
  font-weight:800;
  letter-spacing:.02em;
}

.badge90dModalBody{
  padding:14px;
  overflow:auto;
}

.badge90dCanvasWrap{
  border:1px solid rgba(34,49,77,.65);
  border-radius:14px;
  background:rgba(11,15,23,.45);
  padding:10px;
}

#badge90dCanvas{
  width:100%;
  height:220px;
  display:block;
}

.badge90dLegend{
  margin-top:10px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}

.badge90dLegendItem{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.badge90dLegendDot{
  width:10px;
  height:10px;
  border-radius:3px;
  display:inline-block;
  border:1px solid rgba(0,0,0,.25);
}

.badge90dNote{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

@media (max-width: 520px){
  #badge90dCanvas{ height:200px; }
  .badgeChartBtn{ width:38px; height:38px; }
}

.topNotice {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  line-height: 1.35;
}

.topNotice.isError {
  border-color: rgba(255, 80, 80, 0.35);
  background: rgba(255, 80, 80, 0.10);
}

.topNotice.isWarn {
  border-color: rgba(255, 190, 0, 0.35);
  background: rgba(255, 190, 0, 0.10);
}

/* -------------------- Draft Token Set Builder -------------------- */

.builderBox{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}

.builderControls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:8px;
}

.miniTitleTight{
  margin-top:12px;
}

.tokenRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;
  background:rgba(0,0,0,0.18);
  margin-top:8px;
}

.tokenRowLeft{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.tokenRowSym{
  font-weight:600;
}

.tokenRowMeta{
  opacity:0.8;
  font-size:12px;
}

.tokenRowRight{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

/* -------------------- Viewer: KV + NFT Preview -------------------- */

.viewerBasketGrid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap:0px;
  align-items:start;
  margin-top:0px;
}

@media (max-width: 980px){
  .viewerBasketGrid{
    grid-template-columns: 1fr;
  }
}

.nftPreviewBox{
  min-width:0;
}

/* Frameless (as requested) */
.nftPreviewBoxPlain{
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
}

/* Image: larger, no surrounding frame */
.nftPreviewImg{
  width:100%;
  height:auto;
  display:block;
  margin-top:0px;
  border-radius:16px;
  border:none;
  background:transparent;
  cursor:pointer;
}

/* Make it visually “bigger” like your screenshot */
.nftPreviewImgLarge{
  width:100%;
  max-width:240px;
  object-fit:contain; /* keep full image visible */
  justify-self:end;
}

/* Standalone NFT preview card (full-width image inside its own section) */
.nftPreviewCard{
  padding:0;
  overflow:hidden; /* clip image to rounded card corners */
}
.nftPreviewCard .nftPreviewBox{
  padding:0;
}
.nftPreviewCard .hint{
  padding:12px 16px 12px 16px;
}

/* When JS sets hint text to "", remove all height so the image sits flush */
.nftPreviewCard .hint:empty{
  display:none;
  padding:0;
  margin:0;
}

.nftPreviewCard .nftPreviewImg,
.nftPreviewCard .nftPreviewImgLarge{
  max-width:none;
  border-radius:0;
}

/* Enlarged NFT popup */
.nftLightboxOverlay{
  position:fixed;
  inset:0;
  z-index:10020;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,0.82);
  cursor:pointer;
}

.nftLightboxInner{
  width:min(92vw, 900px);
  max-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.nftLightboxImg{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  max-height:92vh;
  object-fit:contain;
  border-radius:18px;
  cursor:pointer;
}

@media (max-width: 520px){
  .nftLightboxOverlay{
    padding:0;
    align-items:center;
    justify-content:center;
  }

  .nftLightboxInner{
    width:100vw;
    max-width:100vw;
    padding:0;
  }

  .nftLightboxImg{
    display:block;
    width:100vw;
    max-width:100vw;
    height:auto;
    max-height:100vh;
    object-fit:contain;
    border-radius:0;
    margin:0 auto;
  }
}

/* -------------------- Modal Wizard -------------------- */

.modalOverlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow:hidden;
  background:rgba(0,0,0,0.65);
  z-index:9999;
}

.modalCard{
  width:min(720px, 100%);
  max-height:calc(100vh - 36px);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  background:rgba(10,14,22,0.98);
  box-shadow:0 20px 80px rgba(0,0,0,0.55);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Tx-step modal must sit above the still-open deposit modal */
#kapdTxStepOverlay{
  z-index:10020;
}

/* Keep notice modal above everything */
#kapdNoticeOverlay{
  z-index:2147483647;
}


.modalCard{
  width:min(720px, 100%);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  background:rgba(10,14,22,0.98);
  box-shadow:0 20px 80px rgba(0,0,0,0.55);
  overflow:hidden;
}

.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 10px;
  min-height:52px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.modalTitle{
  font-weight:700;
  font-size:16px;
}

.modalSub{
  margin-top:4px;
  opacity:0.75;
  font-size:12px;
}

.modalBody{
  padding:10px;
  overflow:auto;
  min-height:0;
}

.modalText{
  line-height:1.55;
  opacity:0.92;
}

#kapdNoticeBody{
  white-space:pre-wrap;
}

/* Notice modal must always be on top of other modals */
#kapdNoticeOverlay{
  z-index:2147483647;
}

.modalSummary{
  margin-top:8px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  white-space:pre-wrap;
}

.modalFooter{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:12px 14px 14px 14px;
  border-top:1px solid rgba(255,255,255,0.08);
}

/* Used by Deposit/Add Token modals */
.modalActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:8px 10px 10px 10px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.kapdStyleCard{
  width:min(860px, 100%);
  max-height:min(92vh, 920px);
  display:flex;
  flex-direction:column;
}

.kapdStyleCard .modalBody{
  overflow:auto;
  padding:8px 10px;
}

.kapdStyleCard .modalActions{
  flex:0 0 auto;
}

.kapdStyleSummary{
  margin-top:2px;
  margin-bottom:6px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  line-height:1.3;
}

.kapdStyleSummary > div{
  margin:0;
}

.kapdStyleSummary .addr,
.kapdStyleSummary .explorerLink{
  display:inline;
  max-width:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kapdStyleGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.kapdStylePreviewWrap{
  grid-column:1 / -1;
  margin-top:6px;
  min-width:0;
}

.kapdStylePreviewLabel{
  display:block;
  grid-column:1;
  text-align:center;
  color:var(--accent2);
}

.kapdStylePreviewDesktopRow{
  margin-top:6px;
  min-width:0;
}

.kapdStylePreview{
  position:relative;
  margin:0;
  width:100%;
  min-width:0;
  max-width:none;
  aspect-ratio:1 / 1;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  overflow:hidden;
}

.kapdStylePreviewImg{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:rgba(11,15,23,0.35);
  z-index:1;
}

.kapdStylePreviewInner{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  width:auto;
  min-width:0;
  padding:10px 10px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(11,15,23,0.58);
  text-align:center;
  z-index:2;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}

.kapdStylePreviewTitle{
  font-size:20px;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kapdStylePreviewSubtitle{
  margin-top:4px;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kapdStylePreviewMeta{
  margin-top:6px;
  font-size:10px;
  color:var(--text);
  opacity:0.88;
  white-space:normal;
  overflow-wrap:anywhere;
}

.kapdStyleBgPager{
  display:none;
  min-width:0;
}

.kapdStyleBackgroundGallery{
  display:grid;
  grid-template-columns:repeat(4, 103px);
  grid-template-rows:repeat(2, 103px);
  gap:12px 12px;
  width:100%;
  min-width:0;
  justify-content:start;
}

.kapdStyleBgThumb{
  width:103px;
  height:103px;
  aspect-ratio:1 / 1;
  border:2px solid rgba(255,255,255,0.48);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
  overflow:hidden;
  cursor:pointer;
  padding:0;
  position:relative;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.kapdStyleBgThumb:hover{
  border-color:rgba(90,167,255,78);
  box-shadow:0 0 0 2px rgba(90,167,255,14) inset;
}

.kapdStyleBgThumb:active{
  transform:scale(.98);
}

.kapdStyleBgThumb.isSelected{
  border-color:rgba(90,167,255,95);
  box-shadow:0 0 0 2px rgba(90,167,255,18) inset;
}

.kapdStyleBgThumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  background:rgba(11,15,23,0.35);
}

.kapdStyleBgThumbLabel{
  position:absolute;
  left:6px;
  right:6px;
  bottom:6px;
  padding:3px 5px;
  border-radius:9px;
  background:rgba(11,15,23,0.72);
  color:var(--text);
  font-size:10px;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kapdStyleBgArrow{
  width:42px;
  min-width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(90,167,255,55);
  background:rgba(5,12,26,86);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 1px rgba(90,167,255,08) inset;
  position:relative;
  z-index:1;
}

.kapdStyleBgArrow:hover:not(:disabled){
  border-color:rgba(90,167,255,85);
  box-shadow:0 0 0 2px rgba(90,167,255,14) inset;
}

.kapdStyleBgArrow:disabled{
  opacity:.35;
  cursor:default;
}

@media (min-width: 981px){
  .kapdStylePreviewWrap{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    align-items:start;
  }

  .kapdStylePreviewLabel{
    grid-column:1;
  }

  .kapdStylePreviewDesktopRow{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    align-items:start;
    width:100%;
    min-width:0;
  }

  .kapdStylePreview{
    grid-column:1;
  }

  .kapdStyleBgPager{
    grid-column:2 / 4;
    display:grid;
    grid-template-columns:42px minmax(0, 1fr) 42px;
    gap:12px;
    align-items:center;
    width:100%;
    min-width:0;
    overflow:hidden;
  }

  .kapdStyleBackgroundGallery{
    width:100%;
    min-width:0;
    justify-content:start;
  }
}

@media (min-width: 1180px){
  .kapdStyleBackgroundGallery{
    grid-template-columns:repeat(4, 103px);
    grid-template-rows:repeat(2, 103px);
  }

  .kapdStyleBgThumb{
    width:103px;
    height:103px;
  }
}

@media (max-width: 980px){
  .kapdStyleBgPager{
    display:none !important;
  }
}

/* Custom font picker */
.kapdStyleFontPickerWrap{
  position:relative;
  min-width:0;
}

.kapdStyleFontNative{
  position:absolute !important;
  inset:0 auto auto 0;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.kapdStyleFontPicker{
  position:relative;
  min-width:0;
}

.kapdStyleFontPickerBtn{
  width:100%;
  min-height:42px;
  padding:10px 38px 10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(11,15,23,.65);
  color:var(--text);
  outline:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  text-align:left;
}

.kapdStyleFontPickerBtn:focus,
.kapdStyleFontPickerBtn:hover{
  border-color:rgba(90,167,255,.7);
  box-shadow:0 0 0 3px rgba(90,167,255,.12);
}

.kapdStyleFontPickerBtnLabel{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
  line-height:1.2;
}

.kapdStyleFontPickerBtnCaret{
  position:absolute;
  top:50%;
  right:12px;
  width:10px;
  height:10px;
  margin-top:-7px;
  border-right:2px solid rgba(232,238,252,.82);
  border-bottom:2px solid rgba(232,238,252,.82);
  transform:rotate(45deg);
  pointer-events:none;
  transition:transform .14s ease;
}

.kapdStyleFontPicker.isOpen .kapdStyleFontPickerBtnCaret{
  transform:rotate(225deg);
  margin-top:-2px;
}

.kapdStyleFontPickerMenu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:40;
  max-height:280px;
  overflow:auto;
  padding:6px;
  border:1px solid rgba(34,49,77,.85);
  border-radius:14px;
  background:rgba(11,15,23,.98);
  box-shadow:0 14px 28px rgba(0,0,0,.35);
}

.kapdStyleFontPickerMenu.isHidden{
  display:none;
}

.kapdStyleFontPickerItem{
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  text-align:left;
}

.kapdStyleFontPickerItem:hover,
.kapdStyleFontPickerItem:focus{
  background:rgba(90,167,255,.10);
  outline:none;
}

.kapdStyleFontPickerItem.isSelected{
  background:rgba(90,167,255,.14);
  box-shadow:0 0 0 1px rgba(90,167,255,.20) inset;
}

.kapdStyleFontPickerItemName{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  line-height:1.2;
}

.kapdStyleFontPickerItemMeta{
  flex:0 0 auto;
  color:var(--muted);
  font-size:11px;
  line-height:1;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Custom font color picker */
.kapdStyleFontColorPickerWrap{
  position:relative;
  min-width:0;
}

.kapdStyleFontColorNative{
  position:absolute !important;
  inset:0 auto auto 0;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.kapdStyleFontColorPicker{
  position:relative;
  min-width:0;
}

.kapdStyleFontColorPickerBtn{
  width:100%;
  min-height:42px;
  padding:10px 38px 10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(11,15,23,.65);
  color:var(--text);
  outline:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  text-align:left;
}

.kapdStyleFontColorPickerBtn:focus,
.kapdStyleFontColorPickerBtn:hover{
  border-color:rgba(90,167,255,.7);
  box-shadow:0 0 0 3px rgba(90,167,255,.12);
}

.kapdStyleFontColorPickerBtnLabel{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
}

.kapdStyleFontColorPickerBtnCaret{
  position:absolute;
  top:50%;
  right:12px;
  width:10px;
  height:10px;
  margin-top:-7px;
  border-right:2px solid rgba(232,238,252,.82);
  border-bottom:2px solid rgba(232,238,252,.82);
  transform:rotate(45deg);
  pointer-events:none;
  transition:transform .14s ease;
}

.kapdStyleFontColorPicker.isOpen .kapdStyleFontColorPickerBtnCaret{
  transform:rotate(225deg);
  margin-top:-2px;
}

.kapdStyleFontColorPickerMenu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:40;
  max-height:280px;
  overflow:auto;
  padding:6px;
  border:1px solid rgba(34,49,77,.85);
  border-radius:14px;
  background:rgba(11,15,23,.98);
  box-shadow:0 14px 28px rgba(0,0,0,.35);
}

.kapdStyleFontColorPickerMenu.isHidden{
  display:none;
}

.kapdStyleFontColorPickerItem{
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  text-align:left;
}

.kapdStyleFontColorPickerItem:hover,
.kapdStyleFontColorPickerItem:focus{
  background:rgba(90,167,255,.10);
  outline:none;
}

.kapdStyleFontColorPickerItem.isSelected{
  background:rgba(90,167,255,.14);
  box-shadow:0 0 0 1px rgba(90,167,255,.20) inset;
}

.kapdStyleFontColorPickerItemName{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  line-height:1.2;
  font-weight:700;
}

.kapdStyleFontColorPickerSwatch{
  flex:0 0 auto;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 1px rgba(0,0,0,.22) inset;
}

@media (max-width: 700px){
  .modalOverlay{
    padding:10px;
  }

  .kapdStyleCard{
    max-height:calc(100vh - 20px);
  }

  .kapdStyleGrid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .kapdStyleGrid .formRow{
    display:grid;
    grid-template-columns:92px minmax(0, 1fr);
    align-items:center;
    gap:10px;
  }

  .kapdStyleGrid .formRow label{
    margin:0;
    white-space:nowrap;
  }

  .kapdStylePreview{
    width:100%;
    max-width:420px;
  }

  .kapdStylePreviewInner{
    left:8px;
    right:8px;
    bottom:8px;
    min-width:0;
    padding:8px 8px;
  }

  .kapdStylePreviewTitle{
    font-size:17px;
  }

  .kapdStylePreviewSubtitle{
    margin-top:3px;
    font-size:10px;
  }

  .kapdStylePreviewMeta{
    margin-top:5px;
    font-size:9px;
  }

  .kapdStyleCard .modalActions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    justify-content:center;
    align-items:center;
    gap:8px;
  }

  .kapdStyleCard .modalActions .btnGhost,
  .kapdStyleCard .modalActions .btnPrimary{
    width:100%;
    min-width:0;
  }

  .kapdStyleFontPickerBtnLabel{
    font-size:14px;
  }

  .kapdStyleFontPickerItemName{
    font-size:15px;
  }

  .kapdStyleFontColorPickerBtnLabel{
    font-size:14px;
  }

  .kapdStyleFontColorPickerItemName{
    font-size:15px;
  }
}

.kapdAddTokenCard{
  width:min(860px, 100%);
}

.kapdAddTokenToolbar{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 190px;
  gap:10px;
  margin-bottom:12px;
}

.kapdAddTokenSelectionInfo{
  margin:0 0 10px 0;
  padding:10px 12px;
  border:1px solid rgba(90,167,255,.22);
  border-radius:12px;
  background:rgba(90,167,255,.08);
  color:var(--text);
}

#kapdAddTokenList{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:min(56vh, 560px);
  overflow:auto;
  padding-right:12px;
}

.kapdAddTokenEmpty{
  padding:10px 0 2px 0;
}

/* Add Token list rows (checkbox + logo + symbol + name + vertically aligned balance column) */
.radioRow{
  display:grid;
  grid-template-columns:18px minmax(0, 1fr);
  align-items:center;
  column-gap:10px;
  padding:8px 0;
  width:100%;
  min-width:0;
}

.radioRow input[type="checkbox"]{
  margin:0;
  align-self:center;
  transform:none;
}

.radioRow input[type="checkbox"][disabled] + .tokenLabel{
  opacity:0.48;
}

.radioRow > .mono,
.radioLabel,
.tokenLabel{
  min-width:0;
  line-height:1.2;
}

.radioRow > .mono,
.radioLabel{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tokenLabel{
  display:grid;
  grid-template-columns:32px 50px 12px minmax(0, 1fr) 190px;
  grid-template-areas:"logo symbol sep name metrics";
  align-items:center;
  column-gap:8px;
  min-width:0;
  width:100%;
}

.tokenLogo{
  grid-area:logo;
  display:block;
  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;
  object-fit:contain;
  border-radius:999px;
}

.tokenLogoFallback{
  visibility:hidden;
}

.tokenSymbol{
  grid-area:symbol;
  display:block;
  white-space:nowrap;
}

.tokenSep{
  grid-area:sep;
  display:block;
  text-align:center;
  opacity:0.9;
}

.tokenName{
  grid-area:name;
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tokenMetrics{
  grid-area:metrics;
  display:grid;
  gap:2px;
  min-width:0;
  width:190px;
  justify-items:end;
}

.tokenMetric{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  width:100%;
  min-width:0;
  max-width:100%;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
}

.tokenMetricWallet{
  opacity:0.96;
}

.tokenMetricDeposited{
  opacity:0.72;
}

.radioSub{
  margin-top:2px;
  font-size:12px;
  opacity:0.75;
}

@media (max-width: 640px){
  .tokenLabel{
    grid-template-columns:28px minmax(0, 1fr);
    grid-template-areas:
      "logo name"
      "logo metrics";
    row-gap:4px;
    column-gap:10px;
    align-items:start;
  }

  .tokenLogo{
    width:28px;
    height:28px;
    min-width:28px;
    min-height:28px;
    margin-top:2px;
  }

  .tokenSymbol,
  .tokenSep{
    display:none;
  }

  .tokenName{
    white-space:normal;
    line-height:1.35;
  }

  .tokenMetrics{
    justify-items:start;
    gap:3px;
  }

  .tokenMetric{
    text-align:left;
    font-size:12px;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.3;
  }

  .kapdAddTokenToolbar{
    grid-template-columns:1fr;
  }
}

/* -------------------- Date/Time Picker Row -------------------- */

.dtPickerRow{
  display:flex;
  align-items:center;
  gap:10px;
}

.dtPickerInput{
  flex:1 1 auto;
  min-width:0;
}

.dtPickBtn{
  flex:0 0 auto;
  padding:10px 12px;
  line-height:1;
}

/* Create Basket (inline fee + button, no extra helper text) */
#kapdCreateCard .createInlineRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

#kapdCreateCard .createFeeLine{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

#kapdCreateCard #kapdCreateHint,
#kapdCreateCard #kapdCreateResult{
  display:none;
}

/* Create Basket: helper text block (fills whitespace, mobile-friendly) */
#kapdCreateCard .createHelp{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(34,49,77,55);
  opacity:0.92;
  font-size:13px;
  line-height:1.5;
}

#kapdCreateCard .createHelp .miniTitle{
  margin-bottom:6px;
}

#kapdCreateCard .createHelp .bullets{
  margin:0;
  padding-left:18px;
}

#kapdCreateCard .createHelp .bullets li{
  margin:6px 0;
}

#kapdDetailsActions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* Optional edit-mode indicator */
#kapdEditModePill{
  border-color: rgba(102,240,192,.55);
  color: var(--accent2);
  background: rgba(102,240,192,.08);
}

/* Keep these compact in the header, but still “primary button style” */
#kapdDetailsActions .btnPrimary{
  width:120px;
  height:36px;
  padding:6px 10px;
  gap:6px;
}

@media (max-width:520px){
  #kapdDetailsActions .btnLabel{
    display:none;
  }

  /* Mobile compact: icon-only square buttons */
  #kapdDetailsActions .btnPrimary{
    width:36px;
    min-width:36px;
    padding:0;
    gap:0;
  }
}

.kapdTransferCard{
  width:min(760px, 100%);
}

.kapdTransferSummary{
  margin-top:14px;
}

#kapdTransferRecipient{
  width:100%;
}

#kapdTransferHint{
  margin-top:10px;
  min-height:18px;
}

@media (max-width:520px){
  #kapdDetailsActions .btnLabel{
    display:none;
  }

  /* Mobile compact: icon-only square buttons */
  #kapdDetailsActions .btnPrimary{
    width:36px;
    min-width:36px;
    padding:0;
    gap:0;
  }
}

/* Only Asset Count value needs inline layout for the + button */
#kapdViewerDetailsCard .v{
  display:block;
}

#kapdViewerDetailsCard .kv > .v{
  min-width: 0;              /* allow proper shrink inside grid */
  overflow-wrap: anywhere;   /* avoid per-character vertical wrap */
  word-break: break-word;
}

#kapdViewerDetailsCard #kapdViewAssetCount{
  display:inline;
}

#kapdViewerDetailsCard #kapdViewAssetCount + .iconBtn,
#kapdViewerDetailsCard #kapdAssetAddBtn,
#kapdViewerDetailsCard #kapdAssetDepositBtn{
  display:inline-flex;
  vertical-align:middle;
  margin-left:10px; /* a touch more breathing room */
}

/* Deposit icon should look disabled when blocked (still clickable for reason modal) */
#kapdAssetDepositBtn.isBlocked{
  opacity:0.35;
  cursor:not-allowed;
  filter:grayscale(1);
}

/* Capped baskets: token cap UI */
#kapdViewCaps{
  display:block;
}

.kapdCapsInline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.kapdCapsSummary{
  opacity:0.82;
  font-size:12px;
  line-height:1.35;
}

.kapdCapsOpenBtn{
  min-width:120px;
}

.kapdCapsList{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}

.kapdCapRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 160px;
  gap:12px;
  align-items:center;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  background:rgba(255,255,255,0.03);
}

.kapdCapMeta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.kapdCapTitle{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.kapdCapSub{
  opacity:0.78;
  font-size:12px;
  line-height:1.35;
}

.kapdCapInputWrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.kapdCapInput{
  width:100%;
  max-width:160px;
  text-align:right;
}

.kapdCapsHint{
  margin-top:8px;
  opacity:0.82;
  font-size:12px;
  line-height:1.4;
}

#kapdCapsOverlay .modalCard{
  width:min(760px, 100%);
}

#kapdCapsModalBody{
  min-width:0;
}

#kapdCapsModalBody .kapdCapsList{
  margin-top:0;
}

@media (max-width:700px){
  .kapdCapsInline{
    align-items:flex-start;
  }

  .kapdCapsOpenBtn{
    min-width:0;
  }

  .kapdCapRow{
    grid-template-columns:1fr;
  }

  .kapdCapInput{
    max-width:100%;
  }
}

/* Deposit modal: Amount label + input inline, smaller input */
#kapdDepositOverlay .formRow.kapdAmountRow{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  margin-top:10px;
}

#kapdDepositOverlay .formRow.kapdAmountRow label{
  margin:0;
  width:90px;
  flex:0 0 auto;
}

#kapdDepositOverlay .kapdAmountControls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

#kapdDepositOverlay .formRow.kapdAmountRow #kapdDepositAmount{
  width:160px;
  flex:0 0 auto;
  max-width:160px;
}

#kapdDepositOverlay .kapdDepositMaxBtn{
  min-width:72px;
  height:36px;
  padding:0 12px;
}

#kapdDepositOverlay .modalCard{
  padding:14px 16px;
}

#kapdDepositOverlay .kapdDepositLoading{
  margin-top:6px;
  margin-bottom:10px;
  border:1px solid rgba(90,167,255,.18);
  border-radius:14px;
  background:rgba(90,167,255,.06);
}

#kapdDepositOverlay .kapdDepositLoadingInner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
}

#kapdDepositOverlay .kapdDepositLoadingRing{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.20);
  border-top-color:var(--accent);
  animation:kapdDepositSpin .8s linear infinite;
  flex:0 0 auto;
}

#kapdDepositOverlay .kapdDepositLoadingTextWrap{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

#kapdDepositOverlay .kapdDepositLoadingText{
  font-weight:600;
  color:var(--text);
}

#kapdDepositOverlay .kapdDepositLoadingSub{
  opacity:0.75;
  font-size:12px;
}

@keyframes kapdDepositSpin{
  to{ transform:rotate(360deg); }
}

#kapdDepositOverlay .modalCard{
  max-height:calc(100vh - 24px);
  display:flex;
  flex-direction:column;
}

#kapdDepositOverlay .modalBody{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

#kapdDepositOverlay .depositTable{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
  min-height:0;
  overflow:auto;
  padding-right:4px;
}

#kapdDepositOverlay .depositHead{
  display:none;
}

#kapdDepositOverlay .depositRow{
  display:grid;
  grid-template-columns:18px 220px minmax(0, 1fr);
  gap:10px;
  align-items:start;
  padding:8px 8px;
  border-radius:10px;
  flex:0 0 auto;
}

#kapdDepositOverlay .depositRow:hover{
  background: rgba(255,255,255,0.03);
}

#kapdDepositOverlay .depositBal{
  text-align:left;
  opacity:0.95;
  min-width:0;
}

#kapdDepositOverlay .depositBalLine{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  width:100%;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#kapdDepositOverlay .depositBalMain,
#kapdDepositOverlay .depositBalSym,
#kapdDepositOverlay .depositBalSep,
#kapdDepositOverlay .depositBalUsd{
  display:inline;
  min-width:0;
  white-space:nowrap;
}

#kapdDepositOverlay .depositBalUsd{
  opacity:0.72;
}

#kapdDepositOverlay .depositSym{
  display:none;
}

#kapdDepositOverlay .depositName{
  opacity:0.9;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#kapdDepositOverlay .depositNameWrap{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

#kapdDepositOverlay .depositMeta{
  opacity:0.78;
  font-size:12px;
  line-height:1.35;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#kapdDepositOverlay .depositMetaWarn{
  color:var(--warn);
}

#kapdDepositNetHint{
  margin-top:6px;
  opacity: 0.85;
  line-height:1.45;
  white-space:pre-line;
  flex:0 0 auto;
}

#kapdDepositOverlay .formRow.kapdAmountRow{
  flex:0 0 auto;
}

#kapdDepositOverlay .modalActions{
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  z-index:2;
  background:rgba(10,14,22,0.98);
}

@media (max-width:700px){
  #kapdDepositOverlay .modalCard{
    max-height:calc(100vh - 12px);
  }

  #kapdDepositOverlay .modalBody{
    padding-bottom:6px;
  }

  #kapdDepositOverlay .depositHead{
    display:none;
  }

  #kapdDepositOverlay .depositTable{
    max-height:42vh;
    overflow:auto;
    padding-right:2px;
  }

  #kapdDepositOverlay .depositRow{
    grid-template-columns:18px minmax(0, 1fr);
    grid-template-areas:
      "pick name"
      "pick balance";
    gap:4px 10px;
    padding:12px 10px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.02);
    align-items:start;
  }

  #kapdDepositOverlay .depositRow > input[type="radio"]{
    grid-area:pick;
    margin-top:3px;
  }

  #kapdDepositOverlay .depositNameWrap{
    grid-area:name;
    min-width:0;
  }

  #kapdDepositOverlay .depositSym{
    display:none;
  }

  #kapdDepositOverlay .depositBal{
    grid-area:balance;
    display:block;
    text-align:left;
    min-width:0;
  }

  #kapdDepositOverlay .depositBalLine{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    min-width:0;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #kapdDepositOverlay .depositBalMain,
  #kapdDepositOverlay .depositBalSym,
  #kapdDepositOverlay .depositBalSep,
  #kapdDepositOverlay .depositBalUsd{
    display:inline;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #kapdDepositOverlay .depositBalMain{
    font-size:13px;
  }

  #kapdDepositOverlay .depositBalSym{
    opacity:0.95;
  }

  #kapdDepositOverlay .depositBalSep{
    opacity:0.72;
  }

  #kapdDepositOverlay .depositBalUsd{
    opacity:0.72;
    font-size:12px;
    line-height:1.25;
  }

  #kapdDepositOverlay .depositName{
    white-space:normal;
    line-height:1.35;
  }

  #kapdDepositOverlay .depositMeta{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }

  #kapdDepositOverlay .formRow.kapdAmountRow{
    flex-wrap:wrap;
    align-items:flex-start;
    margin-top:10px;
  }

  #kapdDepositOverlay .formRow.kapdAmountRow label{
    width:100%;
  }

  #kapdDepositOverlay .kapdAmountControls{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 84px;
    gap:10px;
    align-items:center;
  }

  #kapdDepositOverlay .formRow.kapdAmountRow #kapdDepositAmount{
    width:100%;
    max-width:100%;
    min-width:0;
    flex:1 1 auto;
  }

  #kapdDepositOverlay .kapdDepositMaxBtn{
    width:84px;
    min-width:84px;
    justify-self:end;
    flex:0 0 auto;
  }

  #kapdDepositOverlay .modalActions{
    padding:10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px;
  }

  #kapdDepositOverlay .modalActions .btnPrimary{
    width:100%;
  }
}

/* Asset "+" should use the same icon button style */
#kapdViewerDetailsCard #kapdAssetAddBtn{
  color:var(--accent2);
  border-color:rgba(102,240,192,.45);
  box-shadow:0 0 0 2px rgba(102,240,192,.10) inset;
  background:rgba(102,240,192,.08);
}

#kapdViewerDetailsCard #kapdAssetAddBtn:hover{
  border-color:rgba(102,240,192,.70);
  box-shadow:0 0 0 2px rgba(102,240,192,.16) inset;
  background:rgba(102,240,192,.14);
}

#kapdViewerDetailsCard #kapdAssetMaxHint{
  margin-left:8px;
  color:var(--muted);
  font-size:12px;
}

/* Basket Details: datetime-local picker icon should be readable on dark bg */
#kapdViewerDetailsCard input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: 0.9;
}

/* ------------------------------------------------------------------ */
/* Home FAQ section                                                    */
/* ------------------------------------------------------------------ */

.faqHomeCard{
  margin-top:18px;
  padding:18px;
}

.faqHomeHeader{
  align-items:flex-start;
  margin-bottom:14px;
}

.faqToggleBtn{
  flex:0 0 auto;
  min-width:170px;
  align-self:flex-start;
}

.faqHomeIntro{
  margin-top:6px;
  max-width:760px;
}

.faqHomeList{
  gap:12px;
}

.faqHomeList .faqItem{
  border:1px solid rgba(90,167,255,.18);
  background:linear-gradient(180deg, rgba(11,15,23,.70), rgba(11,15,23,.46));
  border-radius:16px;
  transition:
    border-color .16s ease,
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.faqHomeList .faqItem:hover{
  border-color:rgba(90,167,255,.38);
  box-shadow:0 10px 24px rgba(0,0,0,.20);
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(18,25,39,.86), rgba(11,15,23,.56));
}

.faqHomeList .faqItem[open]{
  border-color:rgba(102,240,192,.34);
  box-shadow:0 0 0 1px rgba(102,240,192,.08) inset, 0 14px 30px rgba(0,0,0,.24);
  background:linear-gradient(180deg, rgba(18,25,39,.96), rgba(11,15,23,.70));
}

.faqQ{
  padding:15px 16px;
}

.faqQLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.faqIconWrap{
  width:34px;
  height:34px;
  border-radius:12px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent2);
  border:1px solid rgba(102,240,192,.22);
  background:linear-gradient(180deg, rgba(102,240,192,.14), rgba(90,167,255,.10));
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}

.faqQLeft span:last-child{
  min-width:0;
}

.faqHomeList .faqQ::after{
  width:11px;
  height:11px;
  border-right:2px solid rgba(232,238,252,.82);
  border-bottom:2px solid rgba(232,238,252,.82);
}

.faqHomeList .faqA{
  padding:0 16px 16px 62px;
}

.faqHomeList .faqA p{
  color:rgba(232,238,252,90);
  line-height:1.6;
}

.faqInlineActions{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.faqActionBtn{
  width:auto;
  min-width:0;
}

@media (max-width: 520px){
  .faqHomeCard{
    padding:14px;
  }

  .faqHomeHeader{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .faqHomeHeader > div:first-child{
    width:100%;
    min-width:0;
  }

  .faqHomeHeader h3{
    margin:0;
    line-height:1.2;
  }

  .faqHomeIntro{
    max-width:none;
    width:100%;
    line-height:1.5;
    overflow-wrap:break-word;
    word-break:normal;
  }

  .faqToggleBtn{
    width:100%;
    min-width:0;
    justify-content:center;
  }

  .faqQ{
    padding:14px;
    align-items:flex-start;
  }

  .faqQLeft{
    align-items:flex-start;
    gap:10px;
  }

  .faqQLeft span:last-child{
    display:block;
    line-height:1.4;
  }

  .faqIconWrap{
    width:32px;
    height:32px;
    border-radius:10px;
    margin-top:1px;
  }

  .faqHomeList .faqA{
    padding:0 14px 14px 14px;
  }

  .faqHomeList .faqA p{
    line-height:1.55;
  }
}

.faqGroup{
  border:1px solid rgba(102,240,192,0.16);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(10,14,22,0.78), rgba(11,15,23,0.58));
  overflow:hidden;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    transform .16s ease;
}

.faqGroup:hover{
  border-color:rgba(102,240,192,0.28);
  box-shadow:0 10px 24px rgba(0,0,0,0.18);
}

.faqGroup[open]{
  border-color:rgba(102,240,192,0.34);
  box-shadow:0 0 0 1px rgba(102,240,192,0.08) inset, 0 14px 30px rgba(0,0,0,0.24);
  background:linear-gradient(180deg, rgba(16,22,34,0.92), rgba(11,15,23,0.72));
}

.faqGroupQ{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--text);
  font-weight:800;
  line-height:1.2;
  -webkit-user-select:none;
  user-select:none;
}

.faqGroupQ::-webkit-details-marker{
  display:none;
}

.faqGroupQ::after{
  content:"";
  width:12px;
  height:12px;
  border-right:2px solid rgba(232,238,252,0.82);
  border-bottom:2px solid rgba(232,238,252,0.82);
  transform:rotate(45deg);
  transition:transform .14s ease;
  flex:0 0 auto;
  margin-left:12px;
}

.faqGroup[open] .faqGroupQ::after{
  transform:rotate(225deg);
}

.faqGroupLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.faqGroupIconWrap{
  width:38px;
  height:38px;
  border-radius:13px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  border:1px solid rgba(90,167,255,0.24);
  background:linear-gradient(180deg, rgba(90,167,255,0.16), rgba(102,240,192,0.10));
  box-shadow:0 0 0 1px rgba(255,255,255,0.03) inset;
}

.faqGroupBody{
  padding:0 12px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.faqGroupBody .faqItem{
  border-color:rgba(90,167,255,0.14);
  background:linear-gradient(180deg, rgba(11,15,23,0.86), rgba(11,15,23,0.60));
}

.faqGroupBody .faqItem[open]{
  border-color:rgba(102,240,192,0.26);
}

@media (max-width: 520px){
  .faqGroupQ{
    padding:14px;
    align-items:flex-start;
  }

  .faqGroupLeft{
    align-items:flex-start;
    gap:10px;
  }

  .faqGroupIconWrap{
    width:34px;
    height:34px;
    border-radius:11px;
    margin-top:1px;
  }

  .faqGroupBody{
    padding:0 10px 10px;
  }
}


/* ------------------------------------------------------------------ */
/* Marketplace                                                         */
/* ------------------------------------------------------------------ */

.marketplacePage .topHeader{
  height:auto;
  min-height:100px;
}

.marketplacePage .brandLogo{
  width:60px;
  height:60px;
  aspect-ratio:1 / 1;
  object-fit:contain;
}

.marketplaceHeaderActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-left:auto;
}

.marketplaceIntroGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:18px;
}

.marketplacePage .hero + .cardWide,
.marketplaceIntroGrid + .cardWide,
.marketplacePage .cardWide + .cardWide{
  margin-top:18px;
}

.marketplaceStat{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.marketplaceStatLabel{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.marketplaceStatValue{
  font-size:24px;
  font-weight:800;
  line-height:1.1;
}

.marketplaceStatSub{
  color:var(--muted);
  font-size:12px;
}

.marketplaceToolbar{
  align-items:stretch;
}

.marketplaceToolbar .toolbarLeft{
  align-items:stretch;
}

.marketSearchWrap{
  position:relative;
  width:100%;
  min-width:0;
}

.marketSearchInput{
  padding-right:40px;
}

.marketSearchClear{
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:1;
}

.marketSearchClear:hover{
  color:var(--text);
}

.marketSearchClear i{
  font-size:14px;
  line-height:1;
}

.marketplaceToggleGroup{
  display:inline-flex;
  gap:8px;
  flex-wrap:nowrap;
}

.marketplaceToggleBtn{
  min-width:120px;
}

.marketRefreshBtn{
  width:36px;
  min-width:36px;
  padding:0;
}

.marketRefreshBtn i{
  font-size:14px;
  line-height:1;
}

.marketplaceToggleBtn.isActive{
  border-color:rgba(90,167,255,.7);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset;
  background:rgba(90,167,255,.12);
}

.marketplaceHint{
  margin-top:10px;
}

.marketQuickFilters{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.marketQuickFilterBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(34,49,77,.75);
  background:rgba(11,15,23,.45);
  color:var(--muted);
  cursor:pointer;
  line-height:1;
  white-space:nowrap;
}

.marketQuickFilterBtn:hover{
  color:var(--text);
  border-color:rgba(90,167,255,.55);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset;
}

.marketQuickFilterBtn.isActive{
  color:var(--text);
  border-color:rgba(90,167,255,.7);
  background:rgba(90,167,255,.12);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset;
}

.marketplaceResultsHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.marketplaceResultsMeta{
  color:var(--muted);
  font-size:13px;
}

.marketCollapseBtn{
  min-width:140px;
}

.marketCollapseBtn i{
  font-size:14px;
  line-height:1;
}

.marketResultsViewport{
  position:relative;
}

.marketResultsViewport.isCollapsed{
  max-height:888px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,.16) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,.16) 100%);
}

.marketResultsViewport.isExpanded{
  max-height:none;
  overflow:visible;
  -webkit-mask-image:none;
  mask-image:none;
}

.marketResultsViewport.isCollapsed::after{
  content:"";
  position:sticky;
  left:0;
  right:0;
  bottom:0;
  display:block;
  height:28px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(11,15,23,0), rgba(11,15,23,.92));
}

.marketplaceGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.marketCard{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}

.marketCardMedia img {
  opacity: 0;
  transition: opacity 120ms ease;
}

.marketCardMedia img.loaded {
  opacity: 1;
}

.marketCardMedia{
  position:relative;
  aspect-ratio:1 / 1;
  border:1px solid rgba(34,49,77,.75);
  border-radius:16px;
  overflow:hidden;
  background:rgba(11,15,23,.45);
  cursor:pointer;
}

.marketCardMedia:focus-visible{
  outline:none;
  border-color:rgba(90,167,255,.75);
  box-shadow:0 0 0 3px rgba(90,167,255,.18);
}

.marketCardMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.marketCardMediaFallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.06em;
}

.marketCardOverlayBadges{
  position:absolute;
  left:10px;
  right:10px;
  top:10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  pointer-events:none;
}

.marketBadgeStack{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.marketBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(34,49,77,.75);
  background:rgba(11,15,23,.78);
  color:var(--text);
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}

.marketBadge.isGood{
  border-color:rgba(102,240,192,.32);
  background:rgba(102,240,192,.12);
  color:var(--accent2);
}

.marketBadge.isWarn{
  border-color:rgba(255,204,102,.30);
  background:rgba(255,204,102,.12);
  color:var(--warn);
}

.marketBadge.isBad{
  border-color:rgba(255,107,107,.30);
  background:rgba(255,107,107,.12);
  color:var(--bad);
}

.marketCardBody{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.marketCardTitleRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.marketCardTitle{
  min-width:0;
  flex:1 1 auto;
}

.marketCardTitlePillWrap{
  margin-left:auto;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-end;
  gap:8px;
}

.marketCardShareBtn{
  width:32px;
  min-width:32px;
  height:24px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.marketCardShareBtn i{
  font-size:13px;
  line-height:1;
}

.marketCardTitle h3{
  margin:0;
  font-size:18px;
  line-height:1.2;
}

.marketCardSubtitle{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}

.marketCallout{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(90,167,255,.20);
  background:rgba(90,167,255,.08);
  color:var(--text);
  font-size:13px;
  line-height:1.4;
  min-height:56px;
  display:flex;
  align-items:center;
}

.marketCallout.isGood{
  border-color:rgba(102,240,192,.24);
  background:rgba(102,240,192,.10);
}

.marketCallout.isWarn{
  border-color:rgba(255,204,102,.22);
  background:rgba(255,204,102,.10);
}

.marketCallout.isBad{
  border-color:rgba(255,107,107,.32);
  background:rgba(255,107,107,.16);
}

.marketCallout.isMuted{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
}

.marketMetrics{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.marketMetric{
  padding:10px 12px;
  border:1px solid rgba(34,49,77,.75);
  border-radius:14px;
  background:rgba(11,15,23,.38);
  min-width:0;
}

.marketMetricLabel{
  color:var(--muted);
  font-size:12px;
}

.marketMetricValue{
  margin-top:4px;
  font-size:18px;
  font-weight:800;
  line-height:1.15;
}

.marketMetricSub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}

.marketMetricSkeleton,
.marketHoldingSkeleton{
  position:relative;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}

.marketMetricSkeleton::after,
.marketHoldingSkeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  animation:marketSkeletonShimmer 1.15s ease-in-out infinite;
}

.marketMetricSkeletonMain{
  margin-top:6px;
  height:20px;
  width:112px;
}

.marketMetricSkeletonSub{
  margin-top:6px;
  height:12px;
  width:64px;
}

.marketHoldingRowSkeleton{
  align-items:center;
}

.marketHoldingSkeletonSymbol{
  height:14px;
  width:42px;
}

.marketHoldingSkeletonBar{
  height:10px;
  width:100%;
}

.marketHoldingSkeletonWeight{
  margin-left:auto;
  height:12px;
  width:34px;
}

@keyframes marketSkeletonShimmer{
  100%{
    transform:translateX(100%);
  }
}

.marketAllocation{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.marketAllocationHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.marketAllocationTitle{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.marketInfoHead{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.marketInfoBtn{
  width:18px;
  height:18px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:1;
}

.marketInfoBtn:hover{
  color:var(--accent);
}

.marketInfoBtn i{
  font-size:13px;
  line-height:1;
}

.marketAllocationHint{
  color:var(--muted);
  font-size:12px;
}

.marketAllocationBody{
  min-height:78px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
}

.marketHoldingRow{
  display:grid;
  grid-template-columns:70px minmax(0, 1fr) 56px;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:20px;
}

.marketHoldingRow.isPlaceholder{
  opacity:0;
  pointer-events:none;
}

.marketHoldingSymbol{
  font-weight:700;
  white-space:nowrap;
}

.marketHoldingBar{
  position:relative;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}

.marketHoldingBarFill{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(90,167,255,.85), rgba(102,240,192,.75));
}

.marketHoldingWeight{
  text-align:right;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

.marketMetaRow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.marketMetaPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid rgba(34,49,77,.65);
  border-radius:999px;
  background:rgba(11,15,23,.45);
  color:var(--muted);
  font-size:12px;
  line-height:1;
}

.marketStatusBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(34,49,77,.75);
  background:rgba(11,15,23,.78);
  color:var(--text);
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  line-height:1;
  white-space:nowrap;
  text-transform:uppercase;
}

.marketStatusBadge.isGood{
  border-color:rgba(102,240,192,.32);
  background:rgba(102,240,192,.12);
  color:var(--accent2);
}

.marketStatusBadge.isWarn{
  border-color:rgba(255,204,102,.30);
  background:rgba(255,204,102,.12);
  color:var(--warn);
}

.marketStatusBadge.isBad{
  border-color:rgba(255,107,107,.30);
  background:rgba(255,107,107,.12);
  color:var(--bad);
}

.marketStatusBadgeSmall{
  margin-top:6px;
  font-size:10px;
  padding:4px 8px;
}

.marketCardActions{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.marketCardActions .btnPrimary,
.marketCardActions .btnGhost{
  width:100%;
  min-width:0;
}

.marketEmpty{
  padding:20px;
  border:1px solid rgba(34,49,77,.75);
  border-radius:16px;
  background:rgba(11,15,23,.38);
  color:var(--muted);
}

.marketListWrap{
  margin-top:16px;
  min-width:0;
}

.marketTable{
  width:100%;
  min-width:1000px;
}

.marketTable .colAssetCount{ width:70px; }
.marketTable .colStatus{ width:88px; }
.marketTable .colValue{ width:90px; }
.marketTable .colAsk{ width:110px; }
.marketTable .colPremium{ width:112px; }
.marketTable .colContract{ width:118px; }
.marketTable .colMaturity{ width:110px; }
.marketTable .colHoldings{ width:200px; }
.marketTable .colFactsheet{ width:80px; }

.marketTable thead th,
.marketTable tbody td{
  padding:10px 7px;
}

.marketFactsheetBtn{
  width:100%;
  min-width:0;
}

.marketBasketRefreshBtn{
  width:100%;
  min-width:0;
}

.marketBasketRefreshBtn i,
.marketTableRefreshBtn i,
.marketFactsheetRefreshBtn i{
  font-size:13px;
  line-height:1;
}

.marketTableActions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  flex-wrap:nowrap;
}

.marketTableActions .btnPrimary,
.marketTableActions .btnGhost{
  width:36px;
  min-width:36px;
  height:36px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.marketTableRefreshBtn{
  width:36px;
  min-width:36px;
  height:36px;
  padding:0;
}

.marketIconActionBtn i{
  font-size:13px;
  line-height:1;
}

.marketFactsheetTitleRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.marketFactsheetRefreshBtn{
  min-width:140px;
}

.marketListingState{
  margin-top:6px;
}

.marketPremium{
  font-weight:800;
}

.marketPremium.isGood{
  color:var(--accent2);
}

.marketPremium.isWarn{
  color:var(--warn);
}

.marketPremium.isBad{
  color:var(--bad);
}

.marketFactsheetCard{
  width:min(1040px, 100%);
  max-height:min(92vh, 940px);
  display:flex;
  flex-direction:column;
}

.marketFactsheetCard .modalBody{
  overflow:auto;
  padding:14px;
}

.marketFactsheetHero{
  display:grid;
  grid-template-columns:300px minmax(0, 1fr);
  gap:16px;
  align-items:start;
}

.marketFactsheetMedia{
  border:1px solid rgba(34,49,77,.75);
  border-radius:18px;
  overflow:hidden;
  background:rgba(11,15,23,.45);
  aspect-ratio:1 / 1;
}

.marketFactsheetMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.marketFactsheetHeader h3{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.1;
}

.marketFactsheetSubtitle{
  color:var(--muted);
  margin-bottom:12px;
}

.marketFactsheetMetrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.marketFactsheetSection{
  margin-top:16px;
}

.marketFactsheetSection h4{
  margin:0 0 10px;
  font-size:15px;
}

.marketFactsheetHoldings{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.marketFactsheetHolding{
  padding:10px 12px;
  border:1px solid rgba(34,49,77,.65);
  border-radius:14px;
  background:rgba(11,15,23,.38);
}

.marketFactsheetHoldingMain{
  min-width:0;
}

.marketFactsheetHoldingTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.marketFactsheetHoldingSymbol{
  font-weight:700;
  min-width:0;
}

.marketFactsheetHoldingStats{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
  flex:0 0 auto;
  white-space:nowrap;
  text-align:right;
}

.marketFactsheetHoldingName{
  color:var(--muted);
  font-size:12px;
  margin-top:2px;
}

.marketFactsheetHoldingBar{
  margin-top:8px;
  width:100%;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.marketFactsheetHoldingBarFill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #4ea8ff 0%, #6fe3c1 100%);
}

.marketFactsheetHoldingValue,
.marketFactsheetHoldingWeight{
  white-space:nowrap;
}

.marketFactsheetRules{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.marketFactsheetInline{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.marketFactsheetLinkRow{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}

.marketFactsheetLink{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.marketCopyBtn{
  width:28px;
  min-width:28px;
  height:28px;
  padding:0;
  flex:0 0 auto;
}

.marketCopyBtn i{
  font-size:13px;
  line-height:1;
}

.marketFactsheetNote{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.marketFactsheetSubtitleActions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:6px;
}

.marketFactsheetAddr{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}

.marketLoadingState{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px;
  border:1px solid rgba(34,49,77,.75);
  border-radius:16px;
  background:rgba(11,15,23,.38);
}

.marketLoadingRing{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.20);
  border-top-color:var(--accent);
  animation:kapdDepositSpin .8s linear infinite;
  flex:0 0 auto;
}

.marketCardMedia.isMine,
.marketFactsheetMedia.isMine{
  border-color:rgba(102,240,192,.75);
  box-shadow:0 0 0 2px rgba(102,240,192,.18) inset, 0 0 0 1px rgba(102,240,192,.12);
}

.marketBadge.isMine{
  border-color:rgba(102,240,192,.34);
  background:rgba(102,240,192,.12);
  color:var(--accent2);
}

.marketBasketIdPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(34,49,77,.75);
  background:rgba(11,15,23,.45);
}

.marketBasketIdPill.isMine{
  border-color:rgba(102,240,192,.70);
  box-shadow:0 0 0 2px rgba(102,240,192,.12) inset;
  background:rgba(102,240,192,.10);
  color:var(--accent2);
}

.marketSellCard{
  width:min(760px, 100%);
}

.marketSellBody{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.marketSellSummaryBox{
  padding:12px 14px;
  border:1px solid rgba(34,49,77,.75);
  border-radius:16px;
  background:rgba(11,15,23,.38);
}

.marketSellSummaryHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.marketSellBasketName{
  font-size:18px;
  font-weight:800;
  line-height:1.2;
}

.marketSellBasketContract{
  color:var(--muted);
  font-size:12px;
}

.marketSellBasketMeta{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.marketSellGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.marketSellGrid3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.marketSellContinueBtn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

@media (max-width: 900px){
  .marketSellGrid3{
    grid-template-columns:1fr;
  }
}

@media (max-width: 700px){
  .marketSellGrid{
    grid-template-columns:1fr;
  }

  .marketCollapseBtn{
    min-width:132px;
  }

  .marketResultsViewport.isCollapsed{
    max-height:560px;
  }
}

@media (max-width: 1100px){
  .marketCollapseBtn{
    min-width:136px;
  }

  .marketResultsViewport.isCollapsed{
    max-height:700px;
  }

  .marketplaceGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .marketplaceIntroGrid{
    grid-template-columns:1fr;
  }

  .marketFactsheetHero{
    grid-template-columns:1fr;
  }

  .marketFactsheetMetrics{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px){
  .marketplacePage .brandRow{
    align-items:center;
  }

  .marketplacePage .brand{
    flex:1 1 auto;
    min-width:0;
  }

  .marketplacePage .brandLogo{
    width:48px;
    height:48px;
    aspect-ratio:1 / 1;
    object-fit:contain;
  }

  .marketplaceHeaderActions{
    width:auto;
    margin-left:auto;
    justify-content:flex-end;
    flex-wrap:nowrap;
  }

  .marketplaceHeaderActions .btnConnect{
    margin-top:0;
  }

  .marketplaceToolbar{
    align-items:stretch;
  }

  .marketplaceToolbar .toolbarLeft{
    flex-wrap:wrap;
    gap:12px;
  }

  .toolbarField{
    min-width:min(280px, 100%);
    flex:1 1 100%;
  }

  .toolbarFieldSmall{
    min-width:min(160px, 100%);
    flex:1 1 calc(50% - 6px);
  }

  .toolbarActions{
    width:100%;
    justify-content:center;
    flex-wrap:nowrap;
  }

  .marketplaceToggleGroup{
    flex-wrap:nowrap;
  }

  .marketplaceGrid{
    grid-template-columns:1fr;
  }

  .marketQuickFilters{
    gap:6px;
  }

  .marketQuickFilterBtn{
    flex:0 0 auto;
  }

  .marketMetrics{
    grid-template-columns:1fr;
  }

  .marketFactsheetMetrics,
  .marketFactsheetRules{
    grid-template-columns:1fr;
  }

  .marketFactsheetHoldingTop{
    gap:10px;
  }

  .marketFactsheetHoldingStats{
    gap:16px;
  }

  .marketFactsheetLinkRow{
    align-items:stretch;
  }

  .marketFactsheetLink{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .marketCardActions{
    grid-template-columns:1fr;
  }

  .marketFactsheetRefreshBtn{
    width:100%;
    min-width:0;
  }
}

.kapdAssetInfoTopRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.kapdAssetRemoveBtn{
  color:var(--bad);
  border-color:rgba(255,107,107,.45);
  box-shadow:0 0 0 2px rgba(255,107,107,.10) inset;
  background:rgba(255,107,107,.08);
}

.kapdAssetRemoveBtn:hover{
  border-color:rgba(255,107,107,.72);
  box-shadow:0 0 0 2px rgba(255,107,107,.16) inset;
  background:rgba(255,107,107,.14);
}

.kapdAssetRemoveBtn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}