/* =============================================================================
   lending.css — gift lending UI (lending.js). Themed via vars; money-green accent
   to set it apart from the blue offer/holder surfaces. Reduced-motion safe.
   ========================================================================== */

/* item-page "Borrow against this gift" block (mirrors .iv-holder, green accent) */
.iv-borrow{
  margin:14px 0 4px; padding:13px 14px; border-radius:14px;
  background:color-mix(in srgb, #12b5a8 9%, var(--well, rgba(128,128,128,.06)));
  border:1px solid color-mix(in srgb, #12b5a8 30%, transparent);
}
.iv-borrow-head{ display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.iv-borrow-t{ font-weight:900; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-hi,#2A2140); }
.iv-borrow-via{ margin-left:auto; font-size:10.5px; font-weight:800; color:#12b5a8; }
.iv-borrow-line{ font-size:14px; color:var(--ink-mid,#4A4166); margin-bottom:10px; }
.iv-borrow-line b{ color:var(--ink-hi,#2A2140); font-weight:900; }
.iv-borrow-cta{
  display:block; width:100%; padding:11px; border-radius:11px; border:none; cursor:pointer;
  font-weight:900; font-size:13.5px; color:#04231f;
  background:linear-gradient(180deg,#2fe0c4,#12b5a8);
  box-shadow:0 6px 16px rgba(18,181,168,.34); transition:transform .15s ease;
}
.iv-borrow-cta:hover{ transform:translateY(-2px); }

/* overlay ------------------------------------------------------------------- */
.lend-back{
  position:fixed; inset:0; z-index:2100; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(20,14,32,.55); backdrop-filter:blur(4px);
  animation:lendFade .18s ease both;
}
.lend-card{
  position:relative; width:min(94vw,460px); max-height:88vh; overflow:auto;
  padding:22px 20px 20px; border-radius:20px;
  background:var(--panel,#FCFAFF); color:var(--ink-hi,#2A2140);
  border:1px solid var(--hairline,rgba(42,33,64,.14));
  box-shadow:0 24px 64px rgba(20,14,32,.42), 0 0 0 1px rgba(255,255,255,.5) inset;
  animation:lendPop .26s cubic-bezier(.2,1.2,.35,1) both;
}
.lend-x{
  position:absolute; top:9px; right:11px; width:30px; height:30px; border-radius:8px;
  font-size:21px; line-height:1; border:none; cursor:pointer;
  color:var(--ink-lo,#7B7299); background:none;
}
.lend-x:hover{ background:var(--hover,#F3EDFC); color:var(--ink-hi,#2A2140); }
.lend-title{ font:900 21px/1.1 var(--font-ui, system-ui, sans-serif); letter-spacing:-.02em; }
.lend-sub{ margin-top:6px; font:600 13px/1.45 var(--font-ui, system-ui, sans-serif); color:var(--ink-mid,#4A4166); }
.lend-body{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.lend-loading, .lend-note{ font:600 13px/1.5 var(--font-ui, system-ui, sans-serif); color:var(--ink-mid,#4A4166); }
.lend-note{ padding:10px 12px; border-radius:11px; background:var(--well, rgba(128,128,128,.06)); font-size:12px; }

/* value row + key/value */
.lend-vrow{ display:flex; flex-wrap:wrap; gap:10px; }
.lend-kv{ flex:1 1 30%; min-width:120px; display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; border-radius:12px; background:var(--well, rgba(128,128,128,.06));
  border:1px solid var(--hairline,rgba(42,33,64,.12)); }
.lend-k{ font:800 10px/1 var(--font-ui, system-ui, sans-serif); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-lo,#7B7299); }
.lend-v{ font:900 15px/1.15 var(--font-ui, system-ui, sans-serif); color:var(--ink-hi,#2A2140); }

/* form */
.lend-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lend-field{ display:flex; flex-direction:column; gap:5px; }
.lend-field:nth-child(4){ grid-column:1 / -1; }
.lend-flabel{ font:800 11px/1 var(--font-ui, system-ui, sans-serif); color:var(--ink-mid,#4A4166); }
.lend-in{
  width:100%; padding:10px 11px; border-radius:10px; font:700 14px/1 var(--font-ui, system-ui, sans-serif);
  color:var(--ink-hi,#2A2140); background:var(--raised,#fff);
  border:1px solid var(--hairline,rgba(42,33,64,.2)); box-sizing:border-box;
}
.lend-in:focus{ outline:2px solid #12b5a8; outline-offset:1px; }
.lend-summary{ font:700 13px/1.45 var(--font-ui, system-ui, sans-serif); color:#0e8a80; }
.lend-cta{
  margin-top:2px; width:100%; padding:13px; border-radius:12px; border:none; cursor:pointer;
  font:900 14.5px/1 var(--font-ui, system-ui, sans-serif); color:#04231f;
  background:linear-gradient(180deg,#2fe0c4,#12b5a8); box-shadow:0 8px 22px rgba(18,181,168,.4);
  transition:transform .15s ease, filter .15s ease;
}
.lend-cta:hover{ transform:translateY(-2px); }
.lend-cta:disabled{ filter:grayscale(.4) opacity(.7); cursor:default; transform:none; }
.lend-ctas{ display:flex; gap:10px; }
.lend-ctas .lend-cta{ flex:1 1 0; margin-top:0; }
.lend-cta-alt{ background:var(--raised,#fff); color:var(--ink-hi,#2A2140);
  border:1px solid color-mix(in srgb,#12b5a8 42%, var(--hairline,rgba(42,33,64,.2))); box-shadow:none; }
.lend-cta-alt:hover{ background:color-mix(in srgb,#12b5a8 9%, var(--raised,#fff)); transform:translateY(-2px); }
:root[data-theme="dark"] .lend-cta-alt{ background:#221a38; color:#F6F1FA; }
.lend-sep{ text-align:center; font:800 10.5px/1 var(--font-ui, system-ui, sans-serif); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-lo,#7B7299); margin:4px 0; }
.lend-status{ font:700 12.5px/1.4 var(--font-ui, system-ui, sans-serif); color:var(--ink-mid,#4A4166); min-height:16px; }
.lend-status.is-err{ color:#e0392b; }
.lend-status.is-ok{ color:#0e8a80; }

/* result */
.lend-ok-h{ font:900 17px/1.2 var(--font-ui, system-ui, sans-serif); color:#0e8a80; }
.lend-recap{ display:flex; flex-wrap:wrap; gap:8px; }
.lend-recap .lend-kv{ flex:1 1 28%; }
.lend-wallet{ padding:12px; border-radius:12px; background:var(--well, rgba(128,128,128,.06)); border:1px dashed color-mix(in srgb,#12b5a8 40%, transparent); }
.lend-wallet-l{ font:800 11px/1 var(--font-ui, system-ui, sans-serif); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-lo,#7B7299); margin-bottom:6px; }
.lend-wallet-a{ font:800 13px/1.3 ui-monospace, Menlo, Consolas, monospace; color:var(--ink-hi,#2A2140); word-break:break-all; }

/* lend book rows */
.lend-row{ padding:12px 13px; border-radius:13px; background:var(--raised,#fff);
  border:1px solid var(--hairline,rgba(42,33,64,.12)); display:flex; flex-direction:column; gap:6px; }
.lend-row-top{ display:flex; align-items:baseline; gap:10px; }
.lend-row-amt{ font:900 17px/1 var(--font-ui, system-ui, sans-serif); color:var(--ink-hi,#2A2140); }
.lend-row-apr{ margin-left:auto; font:900 13px/1 var(--font-ui, system-ui, sans-serif); color:#0e8a80; }
.lend-row-meta{ font:600 11.5px/1.4 var(--font-ui, system-ui, sans-serif); color:var(--ink-mid,#4A4166); }
.lend-row-act{ display:flex; gap:8px; margin-top:2px; }
.lend-row-act .lend-in{ flex:1 1 auto; }
.lend-row-fund{ flex:0 0 auto; padding:10px 18px; border-radius:10px; border:none; cursor:pointer;
  font:900 13px/1 var(--font-ui, system-ui, sans-serif); color:#04231f;
  background:linear-gradient(180deg,#2fe0c4,#12b5a8); box-shadow:0 6px 14px rgba(18,181,168,.34); }
.lend-row-fund:hover{ transform:translateY(-1px); }
.lend-row-fund:disabled{ filter:grayscale(.4) opacity(.7); cursor:default; }

@keyframes lendFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes lendPop{ 0%{ transform:translateY(10px) scale(.96); opacity:0; } 100%{ transform:none; opacity:1; } }

/* dark theme */
:root[data-theme="dark"] .lend-card{ background:#171226; color:#F6F1FA; border-color:rgba(255,255,255,.12); }
:root[data-theme="dark"] .lend-title{ color:#F6F1FA; }
:root[data-theme="dark"] .lend-v, :root[data-theme="dark"] .lend-row-amt, :root[data-theme="dark"] .lend-wallet-a{ color:#F6F1FA; }
:root[data-theme="dark"] .lend-in{ background:#221a38; color:#F6F1FA; border-color:rgba(255,255,255,.14); }
:root[data-theme="dark"] .lend-row{ background:#1B1530; border-color:rgba(255,255,255,.1); }
:root[data-theme="dark"] .iv-borrow-t{ color:#F6F1FA; }

/* P2P board */
.lend-kind{ padding:3px 8px; border-radius:999px; font:900 9.5px/1 var(--font-ui, system-ui, sans-serif); letter-spacing:.08em; color:#fff; }
.lend-kind.k-gift{ background:linear-gradient(180deg,#8B5CF6,#6D28D9); }
.lend-kind.k-cap{ background:linear-gradient(180deg,#12b5a8,#0e8a80); }
.lend-segwrap{ display:flex; gap:6px; }
.lend-seg{ flex:1 1 0; padding:9px 8px; border-radius:10px; cursor:pointer; text-align:center;
  font:800 11.5px/1.15 var(--font-ui, system-ui, sans-serif); color:var(--ink-mid,#4A4166);
  background:var(--well, rgba(128,128,128,.06)); border:1px solid var(--hairline,rgba(42,33,64,.14)); }
.lend-seg.is-on{ color:#04231f; background:linear-gradient(180deg,#2fe0c4,#12b5a8); border-color:transparent; }
.lend-postform{ padding:12px; border-radius:13px; background:var(--well, rgba(128,128,128,.06));
  border:1px solid var(--hairline,rgba(42,33,64,.14)); display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
.lend-counter{ margin-top:8px; display:flex; flex-direction:column; gap:8px; }
:root[data-theme="dark"] .lend-seg{ background:#1B1530; color:#E8E0F5; border-color:rgba(255,255,255,.1); }

/* coming-soon splash rows */
.lend-cs-row{ display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--hairline,rgba(42,33,64,.1)); }
.lend-cs-ic{ font-size:22px; line-height:1.1; flex:0 0 auto; }
.lend-cs-t{ font:900 14px/1.2 var(--font-ui, system-ui, sans-serif); color:var(--ink-hi,#2A2140); }
.lend-cs-d{ margin-top:2px; font:600 12.5px/1.4 var(--font-ui, system-ui, sans-serif); color:var(--ink-mid,#4A4166); }
:root[data-theme="dark"] .lend-cs-t{ color:#F6F1FA; }

@media (max-width:640px){ .lend-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  .lend-back, .lend-card{ animation:none !important; }
  .lend-cta, .lend-row-fund, .iv-borrow-cta{ transition:none !important; }
}