:root{
  --primary:#1d4ed8;
  --primary-soft:#eff6ff;
  --bg:#f3f6fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#dbe3ef;
  --ok:#15803d;
  --ok-soft:#dcfce7;
  --warn:#b45309;
  --warn-soft:#fef3c7;
  --bad:#b91c1c;
  --bad-soft:#fee2e2;
  --shadow:0 18px 45px rgba(15,23,42,.07);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 0 0,#dbeafe 0,transparent 28rem),
    linear-gradient(180deg,#f8fafc,var(--bg));
  color:var(--text);
}
.wrap{max-width:1280px;margin:0 auto;padding:28px}
.hidden{display:none!important}
.card{
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  box-shadow:var(--shadow);
  overflow:visible;
}
.login-card{max-width:430px;margin:9vh auto;display:grid;gap:12px}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0 0 18px}
.top h1,.card h1,.card h2,.card h3{margin:0}
.top p,.card p{margin:7px 0 14px}
.top-actions,.actions{display:flex;gap:9px;flex-wrap:wrap}
.eyebrow{
  color:var(--primary)!important;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 5px!important;
}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
label{display:block;font-size:13px;font-weight:800;color:#334155;margin:13px 0 6px}
.check{display:flex;align-items:center;gap:9px;margin:14px 0}
.check input{width:auto;min-width:18px;height:18px}
.danger-check{color:var(--bad)}
input,textarea,select{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:11px 12px;
  font:inherit;
  color:var(--text);
  background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.sensitive-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#fffef2}
.sensitive-value[type="password"]{letter-spacing:.08em}
input:focus,textarea:focus,select:focus{outline:0;border-color:#60a5fa;box-shadow:0 0 0 3px #dbeafe}
textarea{min-height:118px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
button{
  border:0;
  border-radius:12px;
  padding:11px 15px;
  background:var(--primary);
  color:#fff;
  font-weight:850;
  cursor:pointer;
  transition:filter .15s,transform .15s;
}
button:hover{filter:brightness(.96);transform:translateY(-1px)}
button:disabled{opacity:.55;cursor:not-allowed;transform:none}
button.secondary{background:#0f172a}
button.ghost{background:#e2e8f0;color:#0f172a}
button.warning{background:#d97706}
button.danger{background:var(--bad)}
button.compact{padding:10px 12px;white-space:nowrap}
.full{width:100%;margin-top:14px}
.muted,.field-hint,small{color:var(--muted)}
.field-hint{font-size:12px;margin:5px 0 0!important}
.grid{display:grid;gap:18px;margin:18px 0;align-items:start}
.grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.store-layout,.source-layout{grid-template-columns:minmax(260px,.72fr) minmax(0,1.55fr)}
.mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mini-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.mini-grid.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.mini-grid label{margin-top:9px}
.input-with-action{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.status-box{display:grid;gap:2px}
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;border-bottom:1px solid var(--line);padding:10px 0}
.row:last-child{border-bottom:0}
.row strong{word-break:break-word;text-align:right}
.badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 10px;
  background:var(--ok-soft);
  color:#166534;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.badge.bad{background:var(--bad-soft);color:#991b1b}
.badge.warn{background:var(--warn-soft);color:#92400e}
.alert,.warning-panel{
  margin:14px 0;
  padding:13px 15px;
  border-radius:14px;
  background:#dbeafe;
  color:#1e3a8a;
  font-weight:750;
  border:1px solid #bfdbfe;
}
.alert.error{background:var(--bad-soft);color:#991b1b;border-color:#fecaca}
.warning-panel{background:var(--warn-soft);color:#78350f;border-color:#fde68a}
.warning-panel ul{margin:5px 0;padding-left:20px}
.save-feedback{
  margin:9px 0 0!important;
  padding:10px 12px;
  border:1px solid #bfdbfe;
  border-radius:12px;
  background:#eff6ff;
  color:#1e3a8a;
  font-size:13px;
  font-weight:800;
}
.save-feedback.success{border-color:#bbf7d0;background:var(--ok-soft);color:#166534}
.save-feedback.error{border-color:#fecaca;background:var(--bad-soft);color:#991b1b}
.save-feedback.pending{border-color:#bfdbfe;background:#eff6ff;color:#1e3a8a}
input:invalid:not(:placeholder-shown),textarea:invalid:not(:placeholder-shown){border-color:#f87171}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.metric{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:10px}
.metric strong{display:block;font-size:21px}.metric small{font-weight:750}
.source-list{display:grid;gap:9px;margin:13px 0}
.source-item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fff;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}
.source-item:hover{border-color:#93c5fd;background:var(--primary-soft)}
.source-item.active{border-color:var(--primary);background:#dbeafe}
.source-item small{display:block;margin-top:4px;overflow-wrap:anywhere}
.endpoint-box{margin-top:14px;background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:12px}
.endpoint-box code{display:block;white-space:pre-wrap;word-break:break-all;margin:8px 0;color:#1d4ed8;font-weight:750;font-size:12px}
.events{display:grid;gap:10px;max-height:none;overflow:visible;padding-right:0}
.event{border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff}
.event-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.event strong{display:block;margin-bottom:4px}
.event p{margin:7px 0!important}
.event pre{white-space:pre-wrap;word-break:break-word;background:#f8fafc;padding:9px;border-radius:10px;max-height:none;overflow:visible;font-size:11px}
.event-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.event-actions button{padding:7px 10px;font-size:12px}
.amount-big{font-size:21px;font-weight:900;margin:5px 0}
.status-paid{color:var(--ok);font-weight:900}
.status-pending{color:var(--warn);font-weight:900}
.status-terminal{color:var(--bad);font-weight:900}
.log-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}
.contract-box{border-color:#93c5fd;background:#f8fbff}
.contract-box .row{font-size:12px;padding:8px 0}
.contract-box code{user-select:all}
@media(max-width:980px){
  .grid.two,.store-layout,.source-layout{grid-template-columns:1fr}
  .mini-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .log-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .wrap{padding:13px}
  .card{padding:16px;border-radius:16px}
  .top{flex-direction:column}
  .top-actions,.top-actions button{width:100%}
  .mini-grid,.mini-grid.four,.mini-grid.two-cols,.metric-grid{grid-template-columns:1fr 1fr}
  .input-with-action{grid-template-columns:1fr}
  .row{flex-direction:column}.row strong{text-align:left}
}
@media(max-width:430px){
  .mini-grid,.mini-grid.four,.mini-grid.two-cols,.metric-grid{grid-template-columns:1fr}
  .actions{display:grid;grid-template-columns:1fr;width:100%}
  .actions button{width:100%}
}