/* Neutral gray surfaces with a bright green market accent. */
:root {
  --border: rgba(160, 160, 160, 0.16);
  --panel: #1b1b1b;
  --panel-soft: #292929;
  --surface: #202020;
  --muted: #a7a7a7;
}

.app-header, .app-footer { background: rgba(24, 24, 24, 0.94); border-color: var(--border); }
.app-sidebar { background: rgba(27, 27, 27, 0.96); border-color: var(--border); }
.header-support-trigger {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(95, 203, 136, 0.35);
  border-radius: 10px;
  background: #222;
  color: var(--accent-strong);
  cursor: pointer;
}
.header-support-trigger:hover, .header-support-trigger[aria-expanded="true"] { border-color: var(--accent); background: #292929; }
.header-support-trigger:focus-visible, .header-support-panel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.header-support-panel {
  position: fixed;
  z-index: 200;
  top: 64px;
  right: 20px;
  display: grid;
  gap: 8px;
  width: min(300px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid rgba(95, 203, 136, 0.4);
  border-radius: 12px;
  background: #242424;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  color: #f2f2f2;
  font-size: 13px;
}
.header-support-panel[hidden] { display: none; }
.header-support-panel strong { font-size: 15px; }
.header-support-panel span { color: var(--muted); }
.header-support-panel a { color: var(--accent-strong); overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .header-actions { justify-content: flex-start; }
  #ton-connect { margin-left: auto; }
  .header-support-panel { top: 50px; right: 12px; }
}
@media (max-width: 420px) {
  .header-support-trigger { width: 32px; height: 32px; }
  .header-actions { gap: 6px; }
  .network-badge { display: none; }
}
.brand-text { color: #f2f2f2; }
.network-badge { border-color: rgba(95, 203, 136, 0.38); background: rgba(95, 203, 136, 0.13); color: var(--accent-strong); }
.coin-panel, .simple-view-panel, .create-form-panel, .launch-preview-panel, .list-panel, .chart-panel, .coin-trade-col, .trade-log-panel {
  border-color: var(--border);
}
.section-heading h2, .coin-detail-title h1 { color: #f0f0f0; }
.ghost-button:hover { border-color: rgba(95, 203, 136, 0.58); color: var(--accent-strong); }
.info-trigger, .sidebar-toggle { border-color: rgba(95, 203, 136, 0.28); color: var(--accent-strong); }
.info-modal-window, .modal-window { border-color: var(--border); }
.info-lang-option.is-active { box-shadow: 0 0 0 1px rgba(160, 160, 160, 0.35); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.nav-link svg { stroke-width: 1.8; }
.nav-link.active:not(.nav-create) { background: var(--panel-soft); color: var(--accent-strong); }
.app-sidebar .nav-link:not(.nav-create) .nav-label { color: #f2f2f2; }
.nav-link:focus-visible, .coin-card:focus-visible, .ghost-button:focus-visible, .primary-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sidebar-toggle svg { width: 16px; height: 16px; }
.ghost-button .ui-icon { width: 17px; height: 17px; }
.verified-coin-fallback { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--accent); }
#refresh-coins { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.explore-panel, .coin-panel { box-shadow: none; }
.explore-panel {
  background: var(--panel);
  border-color: var(--border);
}
.explore-title .eyebrow { color: #59b8f6; letter-spacing: 0.1em; }
.explore-stat { border-color: rgba(160, 160, 160, 0.13); background: rgba(255, 255, 255, 0.025); }
.explore-stat strong { color: var(--accent-strong); }
.explore-verification-note { border-color: var(--border); background: var(--surface); }
.explore-verification-note strong { color: var(--accent-strong); }
.filter-button.active { border-color: var(--accent); color: var(--accent-strong); background: rgba(95, 203, 136, 0.12); }
.search-field input:focus, .sort-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(95, 203, 136, 0.14); }

.coin-list { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.coin-card {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 11px 12px;
  min-height: 0;
  padding: 15px;
  border: 1px solid rgba(160, 160, 160, 0.14);
  border-radius: 12px;
  background: #202020;
  box-shadow: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.coin-card::before { height: 2px; background: var(--card-accent, var(--accent)); opacity: .85; }
.coin-card:hover, .coin-card.is-selected {
  border-color: rgba(95, 203, 136, 0.62);
  background: #2b2b2b;
  box-shadow: 0 0 0 1px rgba(95, 203, 136, 0.12);
  transform: translateY(-2px);
}
.coin-card.is-near-grad, .coin-card.is-near-grad:hover {
  border-color: rgba(95, 203, 136, 0.58);
  box-shadow: 0 0 0 1px rgba(95, 203, 136, 0.15);
}
.coin-avatar { width: 48px; height: 48px; border-radius: 10px; border-color: var(--border); background: #262626; }
.coin-info { gap: 5px; }
.coin-title-row { align-items: flex-start; flex-wrap: nowrap; }
.coin-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px; min-width: 0; }
.coin-identity h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.25; }
.coin-identity span { color: var(--accent-strong); font-size: 12px; font-weight: 700; }
.coin-description { -webkit-line-clamp: 1 !important; line-clamp: 1 !important; font-size: 12px !important; }
.coin-status { padding: 3px 6px; font-size: 9px; letter-spacing: .04em; }
.coin-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(45px, .55fr);
  gap: 6px;
}
.coin-stats div { gap: 3px; min-width: 0; padding: 8px; border: 1px solid rgba(160, 160, 160, 0.13); border-radius: 6px; background: #191919; }
.coin-stats span { color: #a7a7a7; font-size: 10px; }
.coin-stats strong { color: var(--text); font-size: 12px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-stats div:first-child strong { color: var(--accent-strong); }
.coin-card-footer { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 0; padding-top: 3px; }
.coin-card-footer .coin-progress-head { margin-top: 0; }
.coin-card-footer .coin-progress-head span { font-size: 10px; }
.coin-card-footer .coin-progress-head strong { font-size: 11px; }
.coin-card-footer .progress-track { width: min(160px, 100%); height: 5px; }
.coin-card-progress { flex: 1; min-width: 0; max-width: 170px; }
.coin-card-footer:has(.progress-track) { align-items: end; }
.coin-card-footer .coin-progress-head, .coin-card-footer .progress-track { max-width: 170px; }
.coin-card-open { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--accent-strong); font-size: 11px; font-weight: 700; white-space: nowrap; }
.coin-card-open .ui-icon { width: 13px; height: 13px; }

.coin-detail-header, .creator-profile-card { border-color: var(--border); }
.metric-card, .admin-card, .profile-coin-card { border-color: rgba(160, 160, 160, 0.2); border-radius: 12px; background: #202020; box-shadow: none; }
.metric-card { min-height: 100px; }
.metric-card .metric-value { color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.profile-coin-card:hover, .profile-coin-card:focus-visible { border-color: rgba(95, 203, 136, 0.6); background: #2b2b2b; }
.portfolio-coin-card { border-color: rgba(160, 160, 160, 0.12); }
.creator-profile-banner { background: linear-gradient(135deg, #292929, #1b1b1b); }
.initial-intro { border-color: var(--border); background: var(--panel); }

@media (max-width: 768px) {
  .coin-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .coin-card .coin-stats { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .coin-list { grid-template-columns: 1fr; }
  .coin-card { padding: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .coin-card, .coin-card.is-near-grad { animation: none; transition: none; }
  .coin-card:hover { transform: none; }
}