:root {
  --logo-img: url(../assets/images/logo.png);
}

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

body {
  font-family: 'Inter', sans-serif;
  background: #1565c8;
  color: #fff;
}

/* app-shell pages (sidebar + main) need body as a flex row; guide pages (gbar + shell) don't */
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: 34px; font-weight: 800; color: #fff; margin-bottom: 18px; letter-spacing: -0.7px; line-height: 1.2; }


/* ── PAGE ── */
.page { padding: 36px 40px 80px; width: 100%; max-width: 980px; }

/* ── CREATE BTN (shared by the create-token workflow's action buttons) ── */
.create-btn {
  width: auto;
  background: linear-gradient(180deg, #1273e6 0%, #0a3f8f 100%);
  color: #fff;
  border: 1px solid rgba(20,224,252,0.45);
  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 rgba(2,125,252,0.28); }
.create-btn:hover {
  background: linear-gradient(180deg, #1a86ff 0%, #0d4aa6 100%);
  border-color: rgba(20,224,252,0.8);
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(2,125,252,0.42);
}
.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; }