:root {
  --ring: 0 0 0 3px rgba(99,102,241,.35);
  --bg: #f8fafc;
  --text: #0f172a;
  --border: #e2e8f0;
  --card-bg: #fff;
  --input-bg: #fff;
  --input-text: #0f172a;
  --accent: #0f172a;
  --accent-text: #fff;
  --result-bg1: #f8fafc;
  --result-bg2: #eef2f7;
  --tag-bg: #f1f5f9;
  --tag-text: #334155;
  --base-font-size: 16px;
}

html { font-size: var(--base-font-size); background: var(--bg); }
body { background: var(--bg); color: var(--text); }

[data-theme='dark'] {
  --bg: #0f172a;
  --text: #f8fafc;
  --card-bg: #1e293b;
  --border: #334155;
  --input-bg: #1e293b;
  --input-text: #f8fafc;
  --result-bg1: #1e293b;
  --result-bg2: #0f172a;
  --tag-bg: #334155;
  --tag-text: #f1f5f9;
}

[data-accent='slate'] { --accent: #0f172a; --accent-text: #fff; }
[data-accent='emerald'] { --accent: #047857; --accent-text: #fff; }
[data-accent='amber'] { --accent: #b45309; --accent-text: #fff; }

[data-font='small'] { --base-font-size: 14px; }
[data-font='large'] { --base-font-size: 18px; }

.card { border:1px solid var(--border); background: var(--card-bg); border-radius:.75rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }

.field {
  width:100%;
  border:1px solid var(--border);
  border-radius:.625rem;
  padding:.6rem .75rem;
  background: var(--input-bg);
  line-height:1.25;
  font-size:.925rem;
  color: var(--input-text);
}
.field:focus { outline:none; border-color:#6366f1; box-shadow: var(--ring); }

.kbd {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .75rem;border-radius:.6rem;border:1px solid var(--border);
  background:var(--accent);color:var(--accent-text);font-weight:600;font-size:.85rem;
  transition:filter .15s ease, transform .06s ease;
}
.kbd:hover{filter:brightness(1.05)} .kbd:active{transform:translateY(1px)}

.tab-btn { box-shadow:0 1px 0 rgba(0,0,0,.03); }
.tabs-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.tabs-scroll::-webkit-scrollbar { height:8px; }
.tabs-scroll::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:999px; }

.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }
.hover\\:shadow-card:hover { box-shadow: var(--card, 0 10px 30px rgba(2,6,23,.10), 0 2px 8px rgba(2,6,23,.06)); }

.icon-btn { width:1.8rem; height:1.8rem; display:grid; place-items:center; border-radius:.5rem; border:1px solid var(--border); background: var(--input-bg); color:#64748b; }
[data-theme='dark'] .icon-btn { color:#cbd5e1; }

.social-icon { transition:filter .2s ease; }
[data-theme='dark'] .social-icon { filter:invert(1); }

.tooltip-panel { border:1px solid var(--border); border-radius:.75rem; background:var(--input-bg); box-shadow:0 10px 30px rgba(2,6,23,.12),0 2px 8px rgba(2,6,23,.08); }
.animate-fadeUp { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* result tiles: subtle gradient gray */
.result {
  background: linear-gradient(180deg, var(--result-bg1) 0%, var(--result-bg2) 100%);
  border:1px solid var(--border);
  border-radius:.75rem;
  padding:.75rem;
}

/* balance sheet table (net worth) */
.bs-table { width:100%; border-collapse:separate; border-spacing:0 6px; }
.bs-table th { text-align:left; font-size:.8rem; color:#64748b; padding:0 .5rem .25rem; }
.bs-row { background:var(--input-bg); border:1px solid var(--border); border-radius:.75rem; overflow:hidden; }
.bs-cell { padding:.65rem .75rem; }
.bs-dot { width:.85rem; height:.85rem; border-radius:999px; display:inline-block; margin-right:.5rem; }

/* tiny color tags used across sections */
.tag { display:inline-block; padding:.15rem .45rem; font-size:.7rem; border-radius:.4rem; background:var(--tag-bg); border:1px solid var(--border); color:var(--tag-text); }

/* helper for (i) info badges */
.info-btn { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; font-size:12px; font-weight:700; border-radius:999px; border:1px solid var(--border); color:#475569; background:var(--tag-bg); margin-left:.35rem; }
.info-pop { position:absolute; z-index:30; inset:auto auto auto 0; transform:translateY(4px); min-width:14rem; }
