/* ===========================
   ZAMA marketing style (light)
   =========================== */

:root{
  --zama-yellow:#ffd400;
  --ink:#0b0f16;
  --muted:#4b5563;
  --page:#f6f7fb;
  --card:#ffffff;
  --line:#e5e7eb;
  --good:#0ea75a;
  --bad:#e11d48;
  --radius:16px;
  --shadow:0 12px 40px rgba(16,24,40,.08);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  background:var(--page); color:var(--ink);
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 18px; background:var(--zama-yellow);
  border-bottom:1px solid rgba(0,0,0,.12);
}
.topbar__right{display:flex; align-items:center; gap:8px}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink)}
.brand__dot{width:14px;height:14px;background:var(--ink);box-shadow:6px 6px 0 rgba(0,0,0,.15)}
.brand__name{font-weight:900; font-size:16px}
.brand__badge{padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;color:#111;background:#ffe867;border:1px solid rgba(0,0,0,.12)}

/* Chips & misc */
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;font-size:12px;background:#f3f4f6;border:1px solid var(--line);color:#111}
.chip--muted{background:#fff;color:#374151}
.chip--ghost{background:transparent;border:1px dashed var(--line);color:#374151}
.hide{display:none!important}
.mono{font-family:"Fira Code",Consolas,monospace}

/* Buttons */
.btn{
  appearance:none;border:1px solid #111;cursor:pointer;padding:11px 16px;border-radius:12px;
  font-weight:800;letter-spacing:.2px;background:var(--zama-yellow);color:#111;
  box-shadow:0 6px 0 rgba(0,0,0,.15);transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 0 rgba(0,0,0,.18)}
.btn:active{transform:translateY(0);box-shadow:0 4px 0 rgba(0,0,0,.12)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn--primary{background:#111;color:#fff;border-color:#111}
.btn--ghost{background:#fff;color:#111;border:1px dashed var(--line);box-shadow:none}
.btn.tiny{padding:6px 10px;border-radius:10px}

/* Wallet dropdown */
.wallet{position:relative}
.dropdown{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:12px;min-width:180px;box-shadow:var(--shadow);overflow:hidden;z-index:5}
.dropdown__item{display:block;width:100%;text-align:left;padding:10px 14px;background:#fff;border:0;color:#111;font-weight:600}
.dropdown__item:hover{background:#f9fafb}

/* Modal / progress */
.modal{position:fixed;inset:0;z-index:60}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.modal__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 24px));background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 10px}
.iconbtn{appearance:none;border:0;background:transparent;color:#111;cursor:pointer;font-size:18px}
.modal__content{display:grid;gap:10px;padding:6px}
.walletopt{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-weight:700}
.walletopt:hover{background:#f9fafb}
.walletopt--link{justify-content:center;border-style:dashed;color:#111}
.walletopt__status{margin-left:auto;font-size:12px;color:#6b7280}

.progress{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0}
.progress li{padding:10px;border:1px dashed var(--line);border-radius:12px;text-align:center;font-weight:700}
.progress li.done{border-color:var(--good);color:var(--good);background:#ecfdf5}
.progress li.active{border-color:#111}

/* Layout */
.wrap{max-width:1200px;margin:0 auto;padding:22px 16px 80px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card--hero{padding:22px}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.card__title{font-weight:900;letter-spacing:.2px;font-size:clamp(18px,2.2vw,22px)}

.grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
@media(min-width:980px){.grid{grid-template-columns:1.05fr .95fr}}

.row{display:flex;align-items:center}
.row.gap{gap:10px}
.row.between{justify-content:space-between}
.row.responsive{flex-wrap:wrap}
.row.tiny{gap:6px}

/* Inputs */
.label{display:block;margin:12px 0 6px;color:var(--muted);font-size:13px;font-weight:600}
input,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#111;outline:none;transition:border-color .15s ease, box-shadow .15s ease}
input:focus,select:focus,textarea:focus{border-color:#111;box-shadow:0 0 0 2px rgba(17,17,17,.10)}
.input{width:100%}
.field{margin-bottom:6px}
.sep{border:none;border-top:1px solid var(--line);margin:14px 0}
.sub{margin-bottom:4px;color:#111;font-size:14px;font-weight:800}

/* KPI tiles */
.kpi{display:grid;gap:14px;margin-top:10px;grid-template-columns:repeat(6,1fr)}
@media(max-width:900px){.kpi{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.kpi{grid-template-columns:repeat(2,1fr)}}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:left;position:relative;box-shadow:var(--shadow);overflow:hidden}
.tile::before{content:"";position:absolute;left:-1px;top:-1px;right:-1px;height:6px;border-radius:12px 12px 0 0;background:var(--zama-yellow)}
.t-label{color:#111;font-size:13px;font-weight:800}
.t-num{font-family:"Fira Code",Consolas,monospace;color:#111;font-size:20px;margin-top:6px}
.delta{margin-top:6px;font-weight:800}
.delta.pos{color:var(--good)} .delta.neg{color:var(--bad)}

/* Charts */
.charts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media(max-width:980px){.charts{grid-template-columns:1fr}}
.chart{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.chart__head{font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:6px}

/* Status & history */
.status{margin:6px 0 12px;padding:12px;border-radius:12px;background:#fff;border:1px dashed var(--line);color:#374151}
.result{margin-top:10px;padding:14px;border-radius:12px;background:#fff;border:1px solid var(--line);text-align:left;color:#111}
.result.small{font-size:13px}
.hint{margin-top:10px;color:#6b7280;font-size:12px}
.history{display:grid;gap:8px;font-size:13px}
.history .item{padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;justify-content:space-between}

/* Toasts */
.toasts{position:fixed;right:14px;top:70px;z-index:70;display:grid;gap:8px}
.toast{background:#111;color:#fff;border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;animation:fadeIn .2s ease}
.toast.good{background:#10b981} .toast.warn{background:#f59e0b} .toast.bad{background:#ef4444}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Skeleton shimmer */
.skeleton{position:relative}
.skeleton::after{
  content:"";position:absolute;inset:0;background:linear-gradient(100deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.06) 50%, rgba(0,0,0,0) 70%);
  animation:shimmer 1.2s infinite;opacity:.35;pointer-events:none
}
.skeleton.done::after{display:none}
@keyframes shimmer{to{background-position:200% 0}}

/* Tooltips */
.tip{display:inline-block;cursor:help}
.tip[data-tip]{position:relative}
.tip[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;left:50%;transform:translateX(-50%);bottom:130%;
  background:#111;color:#fff;padding:6px 8px;border-radius:8px;font-size:12px;white-space:nowrap;box-shadow:var(--shadow)
}

/* Loading spinner on buttons */
.loading{position:relative}
.loading::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:3px solid rgba(0,0,0,.20);border-top-color:#111;animation:spin 1s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(1turn)}}

.history--scrollable {
  max-height: 20rem; /* approximate height for ~5 entries */
  overflow-y: auto;
  border: 1px solid #eee;
  padding: 0.5rem;
  border-radius: 8px;
}

/* Segmented tabs */
.segmented{
  position:relative; display:inline-flex; gap:4px;
  background:#f3f4f6; border:1px solid #e5e7eb; padding:4px;
  border-radius:999px; isolation:isolate;
}
.segmented__btn{
  position:relative; z-index:1; appearance:none; border:0; background:transparent;
  padding:8px 14px; border-radius:999px; font-weight:600; cursor:pointer;
  color:#6b7280; transition:color .2s ease;
}
.segmented__btn .i{ margin-right:6px; opacity:.9; }
.segmented__btn.is-active{ color:#111827; }
.segmented__thumb{
  position:absolute; top:4px; left:4px; height:calc(100% - 8px);
  width:var(--seg-w, 0px); transform:translateX(var(--seg-x, 0px));
  border-radius:999px; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.08);
  transition:transform .25s cubic-bezier(.4,0,.2,1), width .25s;
}

/* Segmented tabs (brand) */
.segmented {
  --seg-bg: #fff;
  --seg-border: #e5e7eb;
  --seg-thumb: #ffd400; /* your yellow accent */
  --seg-text: #111827;
  --seg-muted: #6b7280;

  display: inline-flex;
  position: relative;
  background: var(--seg-bg);
  border: 1px solid var(--seg-border);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}

.segmented__btn {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--seg-muted);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease;
}
.segmented__btn.is-active { color: var(--seg-text); }

.segmented__thumb {
  position: absolute;
  top: 4px;
  left: var(--seg-x, 4px);
  width: var(--seg-w, 0px);
  height: calc(100% - 8px);
  background: var(--seg-thumb);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 4px 20px rgba(0,0,0,.08);
  transition: left .22s cubic-bezier(.22,.61,.36,1), width .22s cubic-bezier(.22,.61,.36,1);
}

/* Plain tabs: active = pill, inactive = text */
.tabs-plain{
  display:flex; align-items:center; gap:16px;
}

.tabbtn{
  appearance:none; border:0; background:transparent;
  font-weight:700; color:#111827; opacity:.7;
  padding:8px 4px; border-radius:999px; cursor:pointer;
  transition:opacity .18s ease, color .18s ease, box-shadow .2s ease, background .2s ease;
}
.tabbtn:hover{ opacity:1; }

.tabbtn.is-active{
  /* “pill” like in the mockup, but in your palette */
  background:#fff;
  color:#4f46e5;             /* your purple text */
  padding:10px 18px;
  box-shadow:
    0 0 0 2px #ffffff,       /* inner white border */
    0 0 0 4px rgba(79,70,229,.25); /* soft purple glow */
  opacity:1;
}
/* Tabs: full-width two columns */
.tabs{
  display:grid;
  grid-template-columns: 1fr 1fr;  /* both buttons take the full row width */
  gap:12px;
  width:100%;
  margin: 8px 0 16px;
}

/* Base tab style */
.tab{
  width:100%;
  padding:12px 18px;
  border-radius: 9999px;
  border: 1.5px solid #e5e7eb;          /* thin outline */
  background: #ffffff;                   /* inactive background — white/transparent */
  color: #6b7280;                        /* gray text */
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s, border-color .15s;
}

.tab:hover{ color:#4f46e5; }

/* Active: yellow “pill” */
.tab.is-active{
  background: #FFD400;                   /* yellow background for active */
  color: #0f172a;                        /* dark text for contrast */
  border-color: transparent;
  box-shadow: 0 2px 0 rgba(0,0,0,.08),   /* soft shadow */
              0 0 0 3px rgba(255,212,0,.35); /* soft yellow outline */
}

/* Keyboard focus */
.tab:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35); /* blue ring like on buttons */
}

/* On narrow screens you can stack in a column (optional) */
/*
@media (max-width: 520px){
  .tabs{ grid-template-columns: 1fr; }
}
*/