/* ==================================================================
   Simption Pay — console design system  ("Ivy & Brass")
   Pine green structure · brass accent · parchment-neutral surfaces
   Fraunces (display) · Hanken Grotesk (UI) · JetBrains Mono (data)
   ================================================================== */

:root{
  /* structure */
  --pine-900:#15231C; --pine-800:#1C3127; --pine-700:#264436; --pine-600:#356048;
  --brass:#C2A04A; --brass-soft:#E8D9B0;
  /* surfaces */
  --app:#F1F3F1; --paper:#FFFFFF;
  --line:#E5E8E5; --line-2:#D9DDD8;
  /* text */
  --ink:#19211C; --ink-2:#48534B; --muted:#7C857C;
  /* sidebar */
  --side-ink:#D7DED6; --side-muted:#8C988C; --side-line:rgba(255,255,255,.08);
  /* status */
  --ok:#2F7A52; --ok-bg:#E6F1EA; --bad:#B23A2E; --bad-bg:#F7E5E2;
  --warn:#946312; --warn-bg:#F6ECD5; --info:#34627F; --info-bg:#E3EDF4;
  /* misc */
  --radius:12px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(20,35,28,.05), 0 4px 16px rgba(20,35,28,.04);
  --ring:0 0 0 3px rgba(194,160,74,.35);
  --side-w:248px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--app); color:var(--ink);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:6px}

.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* ---------- app shell ---------- */
.app{display:flex; min-height:100vh}
.nav-toggle-cb{position:absolute;left:-9999px}

.sidebar{
  width:var(--side-w); flex:0 0 var(--side-w);
  background:linear-gradient(180deg,var(--pine-800),var(--pine-900));
  color:var(--side-ink); position:fixed; inset:0 auto 0 0; height:100vh;
  display:flex; flex-direction:column; z-index:40;
  border-right:1px solid rgba(0,0,0,.2);
}
.brand{display:flex; align-items:center; gap:11px; padding:22px 20px 18px}
.brand-mark{width:34px;height:34px;flex:0 0 34px; border-radius:9px;
  background:radial-gradient(120% 120% at 30% 25%,var(--brass) 0%,#9c7e34 60%,#7d6428 100%);
  display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.brand-mark span{font-family:"Fraunces",serif; font-weight:600; color:#1c1505; font-size:18px; line-height:1}
.brand-name{font-family:"Fraunces",serif; font-weight:600; font-size:17px; letter-spacing:.2px; color:#fff}
.brand-sub{display:block; font-family:"Hanken Grotesk"; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--side-muted); margin-top:1px}

.nav{padding:8px 12px; flex:1 1 auto; overflow-y:auto}
.nav-label{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--side-muted);
  padding:14px 12px 6px}
.nav-item{display:flex; align-items:center; gap:11px; padding:9px 12px; margin:2px 0;
  border-radius:9px; color:var(--side-ink); font-weight:500; font-size:13.5px;
  position:relative; transition:background .12s ease,color .12s ease}
.nav-item svg{width:17px;height:17px; opacity:.85; flex:0 0 17px}
.nav-item:hover{background:rgba(255,255,255,.05)}
.nav-item.active{background:rgba(255,255,255,.07); color:#fff}
.nav-item.active::before{content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:3px;
  border-radius:0 3px 3px 0; background:var(--brass)}
.nav-item.active svg{opacity:1; color:var(--brass-soft)}

.side-foot{padding:14px 16px; border-top:1px solid var(--side-line); display:flex;
  align-items:center; gap:11px}
.avatar{width:32px;height:32px;flex:0 0 32px; border-radius:50%; background:var(--pine-600);
  display:grid; place-items:center; color:#fff; font-weight:600; font-size:13px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.side-foot .who{min-width:0}
.side-foot .who b{display:block; color:#fff; font-size:13px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side-foot .who small{color:var(--side-muted); font-size:11px}
.side-foot a.signout{margin-left:auto; color:var(--side-muted)}
.side-foot a.signout:hover{color:#fff}

/* ---------- main / topbar ---------- */
.main{flex:1 1 auto; margin-left:var(--side-w); min-width:0; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:30; background:rgba(241,243,241,.82);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:16px; padding:16px 28px}
.menu-btn{display:none; cursor:pointer; font-size:20px; line-height:1; color:var(--ink-2);
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:5px 9px}
.page-title{font-family:"Fraunces",serif; font-weight:600; font-size:22px; line-height:1.15; margin:0; letter-spacing:.2px}
.page-sub{margin:2px 0 0; color:var(--muted); font-size:13px}
.top-spacer{flex:1 1 auto}
.top-meta{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12.5px}
.top-meta .pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(47,122,82,.5); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,122,82,.45)}70%{box-shadow:0 0 0 7px rgba(47,122,82,0)}100%{box-shadow:0 0 0 0 rgba(47,122,82,0)}}

.content{padding:24px 28px 48px; max-width:1320px; width:100%}

/* ---------- KPI band ---------- */
.kpi-row{display:grid; grid-template-columns:minmax(300px,1.15fr) 2fr; gap:16px; margin-bottom:22px}
.kpi-hero{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.kpi-hero::after{content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px;
  background:radial-gradient(circle,rgba(194,160,74,.10),transparent 70%)}
.eyebrow{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600}
.kpi-figure{font-family:"Fraunces",serif; font-weight:600; font-size:40px; line-height:1.05;
  letter-spacing:-.5px; margin:8px 0 0; font-variant-numeric:tabular-nums}
.kpi-figure .cur{color:var(--brass); margin-right:3px; font-size:30px; vertical-align:1px}
.rate{margin-top:16px}
.rate-top{display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; color:var(--ink-2)}
.rate-top b{font-weight:600; color:var(--ink)}
.rate-bar{height:7px; border-radius:99px; background:#EAEDEA; margin-top:7px; overflow:hidden}
.rate-bar i{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--pine-600),var(--pine-700))}

.stat-strip{display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden}
.stat{padding:18px 20px; border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat .eyebrow{display:flex; align-items:center; gap:7px}
.stat .v{font-family:"Fraunces",serif; font-weight:600; font-size:26px; margin-top:8px; font-variant-numeric:tabular-nums; line-height:1}
.dot{width:8px;height:8px;border-radius:50%; display:inline-block}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)}
.dot.warn{background:var(--warn)} .dot.info{background:var(--info)}

/* ---------- card ---------- */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:18px}
.card-head{display:flex; align-items:center; justify-content:space-between;
  padding:15px 20px; border-bottom:1px solid var(--line)}
.card-title{font-weight:600; font-size:14.5px; margin:0}
.card-title small{color:var(--muted); font-weight:500; margin-left:6px}
.card-body{padding:18px 20px}
.card-body.flush{padding:0}
.card-note{padding:12px 20px; color:var(--muted); font-size:12.5px; border-top:1px solid var(--line)}
.card-note code{font-family:"JetBrains Mono"; background:#F3F1EA; padding:1px 6px; border-radius:5px;
  color:var(--ink-2); font-size:11.5px}

/* ---------- filters ---------- */
.filters{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.field{display:flex; flex-direction:column; gap:5px; min-width:140px}
.field.grow{flex:1 1 200px}
.field>label{font-size:11.5px; color:var(--ink-2); font-weight:600}

.inp,.sel{font:inherit; font-size:13.5px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-2); border-radius:9px; padding:8px 11px; width:100%; transition:border-color .12s, box-shadow .12s}
.inp::placeholder{color:#A7AEA6}
.inp:focus,.sel:focus{border-color:var(--brass); box-shadow:var(--ring); outline:none}
.sel{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237C857C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:30px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:7px; font:inherit; font-weight:600; font-size:13.5px;
  border-radius:9px; padding:9px 15px; cursor:pointer; border:1px solid transparent; transition:.12s; white-space:nowrap}
.btn--primary{background:var(--pine-700); color:#fff; box-shadow:0 1px 2px rgba(20,35,28,.18)}
.btn--primary:hover{background:var(--pine-800)}
.btn--ghost{background:var(--paper); color:var(--ink-2); border-color:var(--line-2)}
.btn--ghost:hover{border-color:#C4C9C2; color:var(--ink); background:#FBFBF9}
.btn--sm{padding:5px 11px; font-size:12.5px; border-radius:8px}
.btn--block{width:100%; justify-content:center; padding:11px 15px}
.btn svg{width:15px;height:15px}

/* ---------- form (add gateway) ---------- */
.f-grid{display:grid; gap:13px}
.f-row{display:flex; flex-direction:column; gap:5px}
.f-row>label{font-size:12px; color:var(--ink-2); font-weight:600}
.f-row .hint{font-size:11.5px; color:var(--muted)}
.req{color:var(--bad)}
.cols-2{display:grid; grid-template-columns:1.3fr 1fr; gap:13px}
.cred-group{display:none; border:1px dashed var(--line-2); border-radius:10px; padding:14px; background:#FAFAF7}
.cred-group .grp-h{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:10px}
.check{display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ink-2)}
.check input{margin-top:2px; width:16px;height:16px; accent-color:var(--pine-700)}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse}
table.tbl th{text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:11px 16px; background:#FAFAF8; border-bottom:1px solid var(--line); white-space:nowrap}
table.tbl td{padding:13px 16px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr{transition:background .1s}
table.tbl tbody tr:hover{background:#FAFAF6}
.cell-strong{font-weight:600; color:var(--ink)}
.cell-sub{color:var(--muted); font-size:11.5px; margin-top:2px}
.amount{font-family:"JetBrains Mono"; font-variant-numeric:tabular-nums; font-weight:500}
.empty{text-align:center; color:var(--muted); padding:38px 16px; font-size:13.5px}

/* ---------- pills / tags ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:3px 9px 3px 8px; border-radius:99px; line-height:1.4}
.pill .d{width:6px;height:6px;border-radius:50%}
.pill--success{background:var(--ok-bg); color:var(--ok)} .pill--success .d{background:var(--ok)}
.pill--failed{background:var(--bad-bg); color:var(--bad)} .pill--failed .d{background:var(--bad)}
.pill--pending,.pill--initiated{background:var(--warn-bg); color:var(--warn)} .pill--pending .d,.pill--initiated .d{background:var(--warn)}
.pill--refunded{background:#ECECEA; color:#5A615A} .pill--refunded .d{background:#8a918a}

.tag{display:inline-flex; align-items:center; font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; text-transform:capitalize}
.tag--default{background:var(--pine-700); color:#fff; text-transform:none}
.tag--live{background:#23201A; color:#E8D9B0}
.tag--test{background:#EEF0EE; color:#5A615A}
.tag--on{background:var(--ok-bg); color:var(--ok)}
.tag--off{background:#ECECEA; color:#5A615A}

/* ---------- notes / reveal ---------- */
.note{border-radius:10px; padding:12px 15px; font-size:13px; margin-bottom:18px; border:1px solid transparent}
.note--ok{background:var(--ok-bg); color:#1f5538; border-color:#CFE5D8}
.note--err{background:var(--bad-bg); color:#7e271d; border-color:#EAC9C3}
.note ul{margin:4px 0 0; padding-left:18px}

.reveal{background:linear-gradient(180deg,var(--pine-800),var(--pine-900)); color:var(--side-ink);
  border-radius:var(--radius); padding:18px 20px; margin-bottom:20px; box-shadow:var(--shadow)}
.reveal h4{margin:0 0 4px; font-family:"Fraunces",serif; font-weight:600; color:#fff; font-size:16px}
.reveal .warn-line{color:var(--brass-soft); font-size:12.5px; margin:8px 0 12px}
.reveal .kv{display:flex; gap:10px; padding:3px 0; font-size:13px; align-items:center}
.reveal .kv span{color:var(--side-muted); min-width:96px}
.reveal code{font-family:"JetBrains Mono"; background:rgba(255,255,255,.08); color:#9fe0ff;
  padding:3px 9px; border-radius:6px; font-size:12px; word-break:break-all}
.reveal hr{border:none; border-top:1px solid var(--side-line); margin:13px 0}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .kpi-row{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:none}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .cols-2{grid-template-columns:1fr}
}
@media (max-width:860px){
  .sidebar{transform:translateX(-100%); transition:transform .22s ease}
  .nav-toggle-cb:checked ~ .app .sidebar{transform:none; box-shadow:0 0 0 100vmax rgba(10,18,14,.45)}
  .main{margin-left:0}
  .menu-btn{display:inline-block}
  .content{padding:18px 16px 40px}
  .topbar{padding:13px 16px}
  .page-title{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}