/* Shared shell for every DimaChain page. Each chain overrides the handful
 * of custom properties below (via chains/<chain>/css/theme.css, loaded
 * after this file) — nothing else in this stylesheet, or in navbar.css /
 * footer.css / overrides.css / create.css / payment.css / deploying.css /
 * result.css, needs to change per chain. */

/* Standard visually-hidden utility (the well-known "sr-only" pattern) —
 * added for real, unique <h1> elements on pages whose visible top
 * heading is an <h2> for existing visual-hierarchy reasons (see each
 * page's own h1.seo-h1 comment). Keeps the element in the DOM/
 * accessibility tree — real content for search engines and screen
 * readers — without changing anything visible, since the explicit
 * instruction for this pass was SEO/markup only, no visual changes. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:root {
  --logo-img: url(../../assets/images/logo.png);

  /* DimaChain's own brand identity (root index.html has no theme.css
   * override, so these are what it actually renders with) — main blue,
   * near-black blue background, and white are the three colors in the
   * hexagon/D/chain-link logo itself (assets/images/logo.png). Each
   * chain's own theme.css still overrides these to that chain's real
   * brand color on its own sub-pages — this default identity is
   * DimaChain's alone, not meant to replace Sui/Solana/Base/etc.'s. */
  --accent: #1E90FF;
  --accent-2: #4DA6FF;
  --shell-bg: #000814;
  --chrome-bg: #041220;
  --chrome-bg-2: #0A1B2E;

  /* fixed across every chain — not brand-dependent */
  --success: #22C55E;
  --danger: #ff4d4d;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--shell-bg);
  color: #fff;
}

body.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ── CARD ── */
.card {
  background: rgba(255,255,255,0.09); border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18); padding: 28px; margin-bottom: 44px;
  position: relative;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.7), rgba(255,255,255,0.2));
  border-radius: 16px 16px 0 0;
}
.card-title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 24px; }

/* ── SECTION HEADING ── */
.sec-h { font-size: clamp(34px, 0.89vw + 21.1px, 44px); font-weight: 800; color: #fff; margin-bottom: 18px; letter-spacing: -0.7px; line-height: 1.2; }

/* ── PAGE ── */
/* width stays 100% (never shrinks below whatever .main actually has
 * available — a % here cost real width at normal/narrow sizes, which
 * broke the step-6/step-list one-line fit at 1024px, confirmed by
 * measurement). max-width is a clamp(), not a flat number: below its
 * own floor it does nothing (100% already wins), so small/normal
 * screens are completely unaffected; past the floor it grows
 * continuously with viewport width instead of freezing, which is what
 * actually fixes "doesn't scale on a bigger screen". */
.page { padding: 36px 40px 80px; width: 100%; max-width: clamp(1300px, 58vw, 2000px); margin: 0 auto; }

/* ── CREATE BTN (shared by every chain's token-creation workflow) ──
 * Solid --accent fill, matching the reference SuiTools design — not a
 * gradient into --accent-2. Applies to every chain automatically since
 * each chain's own theme.css sets --accent to its real brand color. */
.create-btn {
  width: auto;
  background: var(--accent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, black 15%);
  border-radius: 11px;
  font-size: 16px; font-weight: 700; padding: 16px 40px; cursor: pointer;
  font-family: 'Inter', sans-serif; margin: 22px auto 0; transition: all 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.create-btn { box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 32%, transparent); }
.create-btn:hover {
  filter: brightness(1.08);
  border-color: color-mix(in srgb, var(--accent-2) 80%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 46%, transparent);
}
.create-btn-sub { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.78); }
.create-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }