/* ── readability pass: chrome, responsive drawer, modal/text tuning ── */
/* ── header: topbar + fee row read as one continuous block ── */
.topbar { border-bottom: none; }
.ticker {
  position: sticky; top: 50px; z-index: 29;
  padding: 1px 36px 9px;
  gap: 40px;
  font-size: 16px;
  background: #0f4fa8;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ticker-label { color: rgba(255,255,255,0.82); font-weight: 600; }
.ticker-val   { font-size: 16px; font-weight: 700; margin-left: 7px; }
.ticker-up, .ticker-dn { font-size: 16px; margin-left: 6px; }
.ticker-pill {
  font-size: 14px; padding: 3px 12px; margin-left: 9px;
  background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.42);
}

/* ── sidebar: scroll without a visible scrollbar ── */
.nav {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge/IE */
  overscroll-behavior: contain;
}
.nav::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chrome, Safari */

/* ── brand tagline ── */
.wm-sub { margin-top: 7px; font-size: 12px; color: rgba(255,255,255,0.8); letter-spacing: 0.02em; white-space: nowrap; }

/* ── navigation & chrome ── */
.nav-item        { font-size: 15px; }
.topbar-link     { font-size: 15px; padding: 8px 17px; }
.btn-create,
.btn-wallet      { font-size: 15px; }
.sidebar-footer  { font-size: 14px; }
.footer-txt      { font-size: 14px; }
.footer-links a  { font-size: 15px; }

/* ── form: labels, hints, counters ── */
.label       { font-size: 15px; }
.field-hint  { font-size: 13px; color: rgba(255,255,255,0.68); }
.char        { font-size: 13px; color: rgba(255,255,255,0.6); }
.img-box .t1 { font-size: 15px; }
.img-box .t2 { font-size: 13px; color: rgba(255,255,255,0.62); }
.inp         { font-size: 15px; }
.tags-input, .tag-inp { font-size: 15px; }
.tags-count  { font-size: 14px; color: rgba(255,255,255,0.62); }
.tag-chip    { font-size: 14px; }
.tag-suggest { font-size: 13px; color: rgba(255,255,255,0.85); }
.tags-hint   { font-size: 13px; color: rgba(255,255,255,0.62); }
.meta-title  { font-size: 13px; color: rgba(255,255,255,0.82); }
.create-btn-sub { font-size: 14px; }

/* ── explanatory / informational copy ── */
.note      { font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.75; }
.step-t    { font-size: 15px; color: rgba(255,255,255,0.92); }
.step-n    { font-size: 13px; }
.t-desc    { font-size: 14px; color: rgba(255,255,255,0.85); }
.sec-name  { font-size: 15px; }
.sec-desc  { font-size: 13px; color: rgba(255,255,255,0.72); }
.faq-ans   { font-size: 15px; color: rgba(255,255,255,0.88); }
.faq-chev  { font-size: 14px; }
.badge     { font-size: 12px; }

/* ── modals ── */
.modal p           { font-size: 15px; color: rgba(255,255,255,0.78); }
.modal-cancel      { font-size: 15px; }
.success-pkg span  { font-size: 13px; color: rgba(255,255,255,0.72); }
.copy-btn          { font-size: 13px; }
.success-btn       { font-size: 15px; }

.balance-modal-icon {
  font-size: 30px; width: 52px; height: 52px; line-height: 52px; text-align: center;
  border-radius: 50%; background: rgba(255,193,7,0.12); margin-bottom: 14px;
}
.balance-rows { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.balance-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 14px;
}
.balance-row span   { font-size: 13px; color: rgba(255,255,255,0.65); }
.balance-row strong { font-size: 14px; color: #fff; font-weight: 700; }
.balance-addr-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 14px; margin-bottom: 6px;
}
.balance-addr-row span { font-size: 12px; color: rgba(255,255,255,0.72); font-family: monospace; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — drawer nav below 900px, single column below 720px
   ═══════════════════════════════════════════════════════ */

html, body { overflow-x: clip; }
body.nav-open { overflow: hidden; }

/* hamburger — hidden until the sidebar becomes a drawer */
.nav-toggle {
  display: none;
  width: 38px; height: 38px; flex-shrink: 0;
  background: none; border: 1px solid rgba(255,255,255,0.35);
  border-radius: 9px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 0; margin-right: 4px;
}
.nav-toggle span {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: #fff; transition: transform 0.2s, opacity 0.2s;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sidebar-backdrop {
  display: none; position: fixed; inset: 0; z-index: 39;
  background: rgba(0,0,0,0.55);
  opacity: 0; transition: opacity 0.25s;
}
.nav-only-mobile { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* sidebar becomes an off-canvas drawer */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.26s ease;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    z-index: 60;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .sidebar-backdrop { display: block; opacity: 1; }

  .main  { margin-left: 0; }
  .page  { padding: 26px 20px 70px; }
  .topbar, .ticker { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 720px) {
  /* every two-column grid folds */
  .form-row,
  .sec-grid,
  .soc-grid,
  .how-card,
  .trust-grid,
  .comm-grid {
    grid-template-columns: 1fr;
  }

  .form-row[style*="align-items:stretch"] > .form-group > .img-box,
  .form-row textarea { min-height: 130px; }

  /* the topbar links live in the drawer at this size */
  .topbar-center     { display: none; }
  .nav-only-mobile   { display: flex; }

  .topbar { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .btn-wallet { font-size: 14px; padding: 7px 13px; }

  /* fee bar wraps instead of overflowing */
  .ticker {
    flex-wrap: wrap; gap: 6px 20px;
    font-size: 14px; padding: 8px 14px 10px;
  }
  .ticker-val, .ticker-up, .ticker-dn { font-size: 14px; }
  .ticker-pill { font-size: 12px; }

  .hero-title { font-size: 26px; }
  .hero-sub   { font-size: 14px; margin-bottom: 24px; }
  .hero-sub br { display: none; }
  .card { padding: 18px; border-radius: 13px; margin-bottom: 32px; }
  .sec-h { font-size: 26px; }
  .community h2, #community-footer h2 { font-size: 26px; }

  .create-btn { width: 100%; padding: 14px 20px; }

  .modal { padding: 22px; }
  .success-modal { padding: 24px 20px; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px 18px; }


  [id] { scroll-margin-top: 150px; }
}

@media (max-width: 420px) {
  .sidebar { width: 84vw; min-width: 0; }
  .page    { padding: 20px 14px 60px; }
  .card    { padding: 15px; }
  .wm-side { font-size: 24px; }
  .wm-logo-side { width: 36px; height: 36px; }
  .wm-sub  { font-size: 11px; letter-spacing: 0; }
  .ticker  { font-size: 13px; }
  .hero-title { font-size: 23px; }
  .sec-h { font-size: 23px; }
  .community h2, #community-footer h2 { font-size: 23px; }
}

/* a drawer that opens on tap should not also need a hover to look right */
@media (hover: none) {
  .create-btn:hover { transform: none; }
}

/* ── form validation: toast + inline error states ── */
#form-card .form-group,
#form-card .img-box { scroll-margin-top: 160px; }

.form-toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-14px);
  display: flex; align-items: center; gap: 9px;
  background: #fff; color: #7a1f1f;
  border: 1px solid rgba(255,128,128,0.5); border-left: 4px solid #ff4d4d;
  border-radius: 10px; padding: 13px 20px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  z-index: 999; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.form-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.form-toast .ft-icon { font-size: 16px; line-height: 1; }

#form-card .inp.field-error,
#form-card .tags-input.field-error {
  border-color: #ff4d4d !important;
  background: rgba(255,77,77,0.06) !important;
}
#form-card .inp.field-error:focus {
  border-color: #ff4d4d !important;
  box-shadow: 0 0 0 3px rgba(255,77,77,0.18);
}
#form-card .img-box.field-error {
  border-color: #ff4d4d !important;
  background: rgba(255,77,77,0.06) !important;
}
#form-card .img-box:focus-visible {
  outline: none;
  border-color: #1273e6;
  box-shadow: 0 0 0 3px rgba(18,115,230,0.15);
}

@media (max-width: 480px) {
  .form-toast { left: 12px; right: 12px; transform: translateY(-14px); width: auto; }
  .form-toast.show { transform: translateY(0); }
}