/* ================================================
   LitVM Yield Vault — Design System
   Theme: Warm Stone Dark
   Color strategy: Restrained (tinted neutrals + amber accent)
   ================================================ */

:root {
  /* Palette — OKLCH, warm stone */
  --bg:            oklch(0.13 0.006 65);
  --surface:       oklch(0.17 0.006 65);
  --surface-2:     oklch(0.21 0.007 65);
  --border:        oklch(0.24 0.006 65);
  --border-hover:  oklch(0.32 0.009 65);

  --text:          oklch(0.88 0.008 70);
  --text-2:        oklch(0.56 0.007 70);
  --text-3:        oklch(0.40 0.005 70);

  --accent:        oklch(0.70 0.14 55);
  --accent-hover:  oklch(0.64 0.15 55);
  --accent-muted:  oklch(0.20 0.03 55);
  --accent-subtle: oklch(0.16 0.015 55);

  --success:       oklch(0.62 0.11 155);
  --success-bg:    oklch(0.17 0.02 155);
  --error:         oklch(0.58 0.14 25);
  --error-bg:      oklch(0.17 0.025 25);
  --warning:       oklch(0.66 0.11 80);
  --warning-bg:    oklch(0.17 0.02 80);

  /* Type — Inter, tight product scale */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;

  /* Motion — ease-out-quart */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 150ms;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Layout */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-8); }

/* ================================================
   HEADER
   ================================================ */
header {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 20;
}
.hdr { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }

.logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.logo-mark {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  object-fit: cover;
  display: block;
}
.logo-name {
  font-size: var(--text-md); font-weight: 700; color: var(--text);
  letter-spacing: 0.02em; margin: 0; line-height: 1;
}
.logo-chain { font-size: var(--text-xs); color: var(--text-3); margin-left: var(--sp-1); font-weight: 400; }

.hdr-right { display: flex; align-items: center; gap: var(--sp-3); }

.net-badge {
  display: flex; align-items: center; gap: 6px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--success-bg);
  color: var(--success);
  font-size: var(--text-xs); font-weight: 500;
}
.net-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

/* ================================================
   STATS BAR
   ================================================ */
.stats-bar {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--sp-8);
  font-size: var(--text-sm);
}
.stat-item { display: flex; gap: var(--sp-2); align-items: baseline; }
.stat-label { color: var(--text-3); font-size: var(--text-xs); }
.stat-val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ================================================
   BUTTONS
   ================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md); border: none;
  font-family: var(--font); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.98); }

.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--border-hover); color: var(--text); }

.btn-connect { padding: var(--sp-2) var(--sp-5); }
.btn-connect.on {
  background: var(--accent-muted); color: var(--accent);
  border: 1px solid oklch(0.30 0.035 55);
}

.btn-full { width: 100%; padding: var(--sp-3) var(--sp-4); }
.btn-lg { padding: var(--sp-4) var(--sp-8); font-size: var(--text-base); }

.btn-claim {
  background: var(--surface-2); color: var(--accent);
  border: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs);
}
.btn-claim:hover:not(:disabled) { border-color: var(--accent); }

/* ================================================
   CONNECT PROMPT
   ================================================ */
.prompt {
  text-align: center;
  padding: var(--sp-16) var(--sp-6);
  max-width: 480px;
  margin: 0 auto;
}
.prompt-steps {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.pstep {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); font-weight: 500; color: var(--text-2);
}
.pstep-n {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-muted); color: var(--accent);
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0;
}
.pstep-arrow { color: var(--text-3); font-size: var(--text-sm); }

.prompt-title { font-size: var(--text-lg); font-weight: 700; color: var(--text); margin-bottom: var(--sp-2); }
.prompt-desc { font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--sp-8); max-width: 40ch; margin-inline: auto; line-height: 1.6; }

/* ================================================
   FLOW GUIDE (connected)
   ================================================ */
.flow-guide {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  margin: var(--sp-6) 0 var(--sp-8);
  background: var(--accent-subtle);
  border-radius: var(--r-md);
  font-size: var(--text-sm); color: var(--text-2);
}
.flow-step { display: flex; align-items: center; gap: var(--sp-2); }
.flow-n {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-muted); color: var(--accent);
  font-size: 10px; font-weight: 700;
  display: inline-grid; place-items: center; flex-shrink: 0;
}
.flow-arrow { color: var(--text-3); }

/* ================================================
   DASHBOARD GRID
   ================================================ */
.dash {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-16);
  align-items: start;
}
.col-primary, .col-secondary { display: flex; flex-direction: column; gap: var(--sp-6); }

/* ================================================
   PANELS
   ================================================ */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  transition: border-color var(--dur) var(--ease);
}
.panel:hover { border-color: var(--border-hover); }

.panel-hdr {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.panel-title { font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; }
.panel-tag {
  font-size: var(--text-xs); color: var(--text-3); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.panel-desc {
  font-size: var(--text-sm); color: var(--text-2);
  margin-bottom: var(--sp-5); max-width: 55ch; line-height: 1.55;
}

/* ================================================
   FIELDS
   ================================================ */
.field { margin-bottom: var(--sp-3); }
.field-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.field-lbl {
  font-size: var(--text-xs); font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.fills { display: flex; gap: var(--sp-1); }
.fill {
  padding: 3px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-3); font-family: var(--font); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.fill:hover { border-color: var(--accent); color: var(--accent); }

.inp-w { position: relative; }
.inp-w input {
  width: 100%; padding: var(--sp-3) var(--sp-4); padding-right: 72px;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease);
}
.inp-w input:focus { border-color: var(--accent); }
.inp-w input.err { border-color: var(--error); }
.inp-w input::placeholder { color: var(--text-3); }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.inp-sfx {
  position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%);
  font-size: var(--text-sm); color: var(--text-3); font-weight: 500; pointer-events: none;
}

/* ================================================
   INFO ROWS (flat balance display)
   ================================================ */
.info-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0;
  font-size: var(--text-sm);
}
.info-k { color: var(--text-2); }
.info-v { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.info-v.accent { color: var(--accent); font-weight: 600; }

/* ================================================
   INFO GRID (vault metrics, 2x2)
   ================================================ */
.info-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
  background: var(--bg);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.info-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) 0;
}
.info-label { font-size: var(--text-xs); color: var(--text-3); }
.info-value { font-size: var(--text-sm); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* ================================================
   SEPARATORS
   ================================================ */
.sep {
  border: none; height: 1px;
  background: var(--border);
  margin: var(--sp-5) 0;
}

/* ================================================
   TRANSACTION STATUS
   ================================================ */
.tx {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  margin-top: var(--sp-4);
  display: none;
  line-height: 1.4;
}
.tx.show { display: block; }
.tx.ok { background: var(--success-bg); color: var(--success); }
.tx.no { background: var(--error-bg); color: var(--error); }
.tx.wait { background: var(--warning-bg); color: var(--warning); }
.tx-link {
  color: inherit; font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; margin-left: var(--sp-1);
  transition: opacity var(--dur) var(--ease);
}
.tx-link:hover { opacity: 0.7; }

/* ================================================
   PENDING UNSTAKES
   ================================================ */
.pending-section { margin-top: var(--sp-1); }
.pending-hdr {
  font-size: var(--text-xs); font-weight: 600; color: var(--text-3);
  margin-bottom: var(--sp-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.unstake-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-3);
  background: var(--bg); border-radius: var(--r-sm);
  margin-bottom: var(--sp-2); border: 1px solid var(--border);
}
.unstake-info { display: flex; flex-direction: column; gap: 2px; }
.unstake-amt { font-weight: 600; font-size: var(--text-sm); color: var(--text); font-variant-numeric: tabular-nums; }
.unstake-time { font-size: var(--text-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.unstake-actions { flex-shrink: 0; }
.btn-compact {
  padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs);
  min-width: auto;
}

/* ================================================
   TOOLTIPS
   ================================================ */
[data-tip] {
  position: relative; cursor: help;
  border-bottom: 1px dashed var(--text-3);
  -webkit-tap-highlight-color: transparent;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--text-xs); color: var(--text);
  pointer-events: none; opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: 10; width: max-content; max-width: 260px;
}
[data-tip]:hover::after,
[data-tip]:focus::after,
[data-tip]:active::after { opacity: 1; }

/* ================================================
   FOOTER
   ================================================ */
footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-8) 0;
  font-size: var(--text-xs);
  color: var(--text-3);
}
.ftr-grid { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: space-between; align-items: flex-start; }
.ftr-links { display: flex; gap: var(--sp-5); }
.ftr-links a { color: var(--text-2); text-decoration: none; transition: color var(--dur) var(--ease); }
.ftr-links a:hover { color: var(--accent); }
.ftr-contracts { display: flex; flex-direction: column; gap: 3px; text-align: right; }
.ftr-contracts a { color: var(--text-3); text-decoration: none; font-variant-numeric: tabular-nums; transition: color var(--dur) var(--ease); }
.ftr-contracts a:hover { color: var(--accent); }

/* ================================================
   RESPONSIVE: Tablet (768px)
   ================================================ */
@media (max-width: 768px) {
  .wrap { padding: 0 var(--sp-5); }
  .dash { grid-template-columns: 1fr; gap: var(--sp-5); }
  .flow-guide { flex-wrap: wrap; }
  .hdr { flex-wrap: wrap; }
  .stats-bar { gap: var(--sp-4); }
  .ftr-grid { flex-direction: column; gap: var(--sp-3); }
  .ftr-contracts { text-align: left; }

  .fill {
    padding: 8px 14px;
    min-height: 44px; min-width: 44px;
    font-size: var(--text-xs);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-compact {
    padding: var(--sp-2) var(--sp-4);
    min-height: 44px; min-width: 44px;
  }
  .inp-w input { font-size: 16px; }
  header { position: static; }
}

/* ================================================
   RESPONSIVE: Mobile (480px)
   ================================================ */
@media (max-width: 480px) {
  .wrap { padding: 0 var(--sp-4); }
  .panel { padding: var(--sp-4); }

  .stats-bar { gap: var(--sp-2) var(--sp-5); padding: var(--sp-3) 0; }
  .stat-item { flex-direction: column; gap: 2px; }
  .stat-label { font-size: 10px; }
  .stat-val { font-size: var(--text-sm); }

  [data-tip]::after { left: -8px; max-width: calc(100vw - 48px); }

  .btn-compact { width: 100%; justify-content: center; }
  .unstake-row {
    flex-direction: column; gap: var(--sp-2); align-items: stretch;
  }
  .unstake-actions { width: 100%; }
  .info-grid { grid-template-columns: 1fr; }

  .prompt-steps { flex-direction: column; gap: var(--sp-2); }
  .pstep-arrow { display: none; }
  .flow-guide { flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
  .flow-arrow { display: none; }
}

/* ================================================
   RESPONSIVE: Tiny (360px)
   ================================================ */
@media (max-width: 360px) {
  .stats-bar { gap: var(--sp-2) var(--sp-4); }
  .stat-val { font-size: var(--text-xs); }
  .hdr-right { gap: var(--sp-2); }
  .btn-connect { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); }
  .fills { gap: 2px; }
}