/* SafeActionShell.css — styling kit for the safe-action dapp shell */
:root {
  --bg: #0e1526; --card: #16203a; --ink: #e8eefc; --dim: #93a3c4;
  --line: #263457; --ok: #34d399; --warn: #fbbf24; --bad: #f87171; --accent: #60a5fa;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: radial-gradient(1200px 600px at 20% -10%, #1b2a52 0%, var(--bg) 60%);
  color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.55;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 28px 18px 64px; }
.hero img { width: 100%; border-radius: 14px; display: block; }
.hero h1 { font-size: 2rem; margin: 18px 0 4px; }
.hero p.sub { color: var(--dim); margin-top: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; margin: 18px 0; }
.card h2 { margin: 0 0 12px; font-size: 1.15rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card h3 { margin: 16px 0 8px; font-size: 1rem; }
.kv > div { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 7px 0;
  border-bottom: 1px dashed var(--line); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--dim); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.kv dd { margin: 0; word-break: break-all; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.dim { color: var(--dim); }
.small { font-size: .82rem; }
.badge { display: inline-block; font-size: .78rem; padding: 3px 10px; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap; }
.badge.ok { color: var(--ok); } .badge.warn { color: var(--warn); } .badge.bad { color: var(--bad); }
.safety { background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.35);
  padding: 10px 14px; border-radius: 10px; font-size: .92rem; }
.alert { padding: 10px 14px; border-radius: 10px; margin-top: 12px; }
.alert.ok { background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.35); }
.alert.bad { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.4); }
table.args { width: 100%; border-collapse: collapse; }
table.args td { padding: 6px 10px; border: 1px solid var(--line); font-size: .9rem; word-break: break-all; }
.lede { color: var(--dim); }
.steps { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; }
.steps li { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px; color: var(--dim); }
.steps .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); flex: none; }
.steps li.active { border-color: var(--accent); color: var(--ink); }
.steps li.active .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.steps li.done { color: var(--ok); } .steps li.done .dot { background: var(--ok); }
.steps li.fail { border-color: var(--bad); color: var(--bad); }
.steps li.fail .dot { background: var(--bad); }
.btn { display: inline-block; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--accent);
  color: #fff; background: rgba(96,165,250,.15); cursor: pointer; font-size: 1rem; text-decoration: none; }
.btn.primary { background: var(--accent); color: #06122e; font-weight: 600; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btnrow { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.confirm-box { border: 1px solid var(--warn); border-radius: 10px; padding: 12px 14px; margin-top: 12px;
  background: rgba(251,191,36,.06); }
.confirm-box label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.logs { list-style: none; padding: 0; }
.logs li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.readlive { margin-top: 10px; }
.readlive pre { background: #0a1020; padding: 10px 12px; border-radius: 8px; overflow-x: auto; font-size: .85rem; }
.footnote { color: var(--dim); font-size: .85rem; margin-top: 26px; }
a { color: var(--accent); }
.livebar { display: flex; align-items: center; gap: 10px; margin: 26px 0 10px; flex-wrap: wrap; }
.safety-banner { border-color: #1f7a4d; }
.usage pre { max-height: 460px; overflow: auto; }