/* === bnbultra — BLACK × ORANGE full redesign === */

/* Fonts */
@font-face {
  font-family: 'MonumentExtended';
  src: url('../fonts/MonumentExtended-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'MonumentExtended';
  src: url('../fonts/MonumentExtended-Ultrabold.otf') format('opentype');
  font-weight: 800; font-style: normal;
}

/* Tokens */
:root{
  --bg: #0a0a0b;
  --bg-2: #0f1012;
  --bg-3: #14161a;
  --panel: rgba(18,18,22,.85);

  --text: #ECEFF3;
  --muted: #9aa1ab;

  --accent: #ff7a1a;
  --accent-2: #ff9347;
  --accent-3: #ff6a00;

  --stroke: #1b1d23;
  --live: #ff4d4d;
  --radius: 16px;

  --shadow-xs: 0 6px 14px rgba(0,0,0,.22);
  --shadow-sm: 0 10px 22px rgba(0,0,0,.28);
  --shadow-md: 0 16px 40px rgba(0,0,0,.36);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.44);
}

/* Reset */
*{ box-sizing:border-box; }
html, body{ height:100%; margin:0; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text); background: var(--bg); font-weight:600; line-height:1.5;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,122,26,.08), rgba(0,0,0,0)),
    radial-gradient(900px 420px at -20% 30%, rgba(255,122,26,.04), rgba(0,0,0,0)),
    linear-gradient(0deg, rgba(255,122,26,.04), rgba(0,0,0,0) 18%),
    repeating-linear-gradient(to right, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 160px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 90px);
  background-attachment: fixed;
}
a{ color: var(--accent); text-decoration:none; }
a:hover{ color:#ffd1b0; text-shadow:0 0 10px rgba(255,122,26,.35); }

/* LAYOUT: sidebar + content */
.layout{ display:grid; grid-template-columns: 260px 1fr; min-height:100dvh; }
@media (max-width: 960px){ .layout{ grid-template-columns: 1fr; } }

/* SIDEBAR */
.sidebar{
  position:sticky; top:0; align-self:start; height:100dvh;
  display:flex; flex-direction:column; gap:18px;
  padding:18px; background:
    linear-gradient(180deg, rgba(255,122,26,.08), rgba(255,122,26,0) 30%),
    rgba(14,14,16,.7);
  border-right:1px solid var(--stroke);
  backdrop-filter: blur(14px) saturate(140%);
}
@media (max-width:960px){
  .sidebar{ position:static; height:auto; border-right:none; border-bottom:1px solid var(--stroke); }
}

.brand-block{
  display:flex; align-items:center; gap:8px;
  width:100%; padding:14px 16px; border-radius:14px;
  border:1px solid var(--stroke); background: var(--bg-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-xs);
}
.brand-mark{ font-family:'MonumentExtended',sans-serif; font-weight:800; color:var(--accent); }
.brand-rest{ font-family:'MonumentExtended',sans-serif; font-weight:800; color:#fff; opacity:.95; }

.side-nav{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.side-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px; border:1px solid transparent;
  color:#e9e7e5; font-weight:800; letter-spacing:.3px;
}
.side-link .side-dot{ width:8px; height:8px; border-radius:999px; background:var(--stroke); }
.side-link:hover{ background: rgba(255,255,255,.04); }
.side-link.is-active{ background: var(--accent); color:#1a120c; border-color:var(--accent); }
.side-link.is-active .side-dot{ background:#1a120c; }

.side-bottom{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.btn-full{ width:100%; }
.link-x{ color:#ffd1b0; opacity:.8; font-weight:800; }
.link-x:hover{ opacity:1; }

.content{ padding:22px; }

/* TICKER */
.ticker{
  position:sticky; top:0; z-index:4; margin-bottom:16px;
  border:1px solid var(--stroke); border-radius:14px;
  background: linear-gradient(180deg, rgba(255,122,26,.08), rgba(255,122,26,0) 30%), var(--bg-2);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.03);
}
.ticker__inner{ display:flex; align-items:center; gap:10px; padding:10px 12px; }
.ticker__glow{ position:absolute; inset:-1px; pointer-events:none; border-radius:14px; box-shadow: 0 0 60px rgba(255,122,26,.18) inset; }
.ticker__cta{ margin-left:auto; font-weight:800; }

/* CHIPS */
.chip{ display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; border:1px solid var(--stroke); font-size:12px; font-weight:800; }
.chip--live{ background:#1a120c; color:#ffb07a; border-color: rgba(255,122,26,.45); }

.sep{ opacity:.5; }

/* PANEL: hero */
.panel{
  position:relative; overflow:hidden;
  border:1px solid var(--stroke); border-radius:18px;
  background: linear-gradient(180deg, rgba(255,122,26,.08), rgba(255,122,26,0) 30%), var(--panel);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.03);
}
.hero-panel{ display:grid; grid-template-columns: 1.1fr .9fr; gap:10px; padding:18px; }
@media (max-width: 900px){ .hero-panel{ grid-template-columns: 1fr; } }
.hero-title{ margin:0 0 6px; font-size:34px; font-weight:800; letter-spacing:.2px; }
.accent{ color: var(--accent); }
.hero-text{ margin:0 0 12px; color: var(--muted); }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.hero-panel__art{ position:relative; min-height:160px; border-left:1px dashed var(--stroke); border-radius:14px; }
.orb{ position:absolute; border-radius:999px; filter:blur(12px); opacity:.8; }
.orb--lg{ width:320px; height:320px; right:-40px; top:-20px; background: radial-gradient(closest-side, rgba(255,122,26,.35), rgba(255,122,26,0)); }
.orb--sm{ width:160px; height:160px; left:40px; bottom:-30px; background: radial-gradient(closest-side, rgba(255,147,71,.35), rgba(255,147,71,0)); }

/* SECTION HEAD */
.section-head{ display:flex; align-items:center; gap:10px; margin:18px 0 10px; }
.section-title{ margin:0; font-size:18px; font-weight:800; letter-spacing:.3px; color:#fff1e7; }

/* BANNER (pre-live) */
.banner{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--stroke); border-radius:14px;
  padding:12px 14px; margin:10px 0 14px;
  background: linear-gradient(180deg, rgba(255,122,26,.08), rgba(255,122,26,0) 30%), rgba(22,18,16,.4);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.03);
}
.banner.is-hidden{ display:none; }
.banner__dot{ width:10px; height:10px; border-radius:999px; background:var(--accent); box-shadow:0 0 12px var(--accent); }

/* GRID: portrait cards */
.grid-portrait{
  display:grid; gap:14px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width:1200px){ .grid-portrait{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width:800px){ .grid-portrait{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width:520px){ .grid-portrait{ grid-template-columns: 1fr; } }

.card{
  position:relative; border-radius: var(--radius);
  overflow:hidden; background:transparent; border:none; padding:0; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
  animation: cardFadeIn .4s ease forwards;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); filter:saturate(1.06); }
.card-media{ position:relative; width:100%; aspect-ratio: 9 / 16; background:#0e0e11; }
.card-img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  padding:6px 10px; border-radius:999px; background:var(--live); color:#fff;
  box-shadow: 0 0 0 2px rgba(255,80,80,.12), 0 6px 18px rgba(255,80,80,.25);
}
.card.is-offline .card-badge{ background:#3e3b44; color:#cfd3d9; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }

.card-body{
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.card-title{ margin:0 0 4px; font-size:15px; font-weight:800; line-height:1.3; }
.addr{ margin:0; font-weight:600; font-size:12px; letter-spacing:.3px; color:var(--muted); word-break:break-all; line-height:1.3; cursor:copy; }
.card-clickable .js-watch{ cursor:pointer; }

@keyframes cardFadeIn { 0% { opacity:0; transform: translateY(10px);} 100% { opacity:1; transform: translateY(0);} }

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:12px; border:1px solid transparent;
  background: var(--accent); color:#1a120c; font-weight:800; cursor:pointer;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 18px rgba(255,122,26,.22);
}
.btn:hover{ background:var(--accent-2); transform:translateY(-1px); }
.btn:active{ background:var(--accent-3); transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:#1a120c; border-color:var(--accent); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--stroke); }
.btn-ghost:hover{ background:rgba(255,255,255,.04); }
.btn-wallet{
  text-transform:uppercase; background:#1a1512; color:var(--accent); border:1px solid var(--accent);
  box-shadow: 0 0 0 2px rgba(255,122,26,.18) inset;
}
.btn-wallet:hover{ background:#16110e; }
.btn-wallet.is-connected{ background:#120f0d; color:var(--accent); box-shadow: 0 0 0 2px rgba(255,147,71,.22) inset; }

/* Refresh icon */
.icon-refresh{
  width:32px; height:32px; border:1px solid var(--stroke); border-radius:10px;
  background: var(--accent);
  -webkit-mask:url('../img/refresh.svg') center / 18px 18px no-repeat;
          mask:url('../img/refresh.svg') center / 18px 18px no-repeat;
  cursor:pointer; transition: background .2s ease, transform .18s ease, box-shadow .2s ease;
  box-shadow:0 4px 14px rgba(255,122,26,.18);
}
.icon-refresh:hover{ background:var(--accent-2); box-shadow:0 0 0 2px rgba(255,122,26,.22) inset; transform:rotate(90deg); }
.icon-refresh:active{ background:var(--accent-3); transform:rotate(120deg) translateY(1px); }
@supports not (-webkit-mask: url('../img/refresh.svg')) {
  .icon-refresh{ background:transparent; background-image:url('../img/refresh.svg'); background-repeat:no-repeat; background-position:center; background-size:18px 18px; filter: brightness(0) saturate(100%) sepia(88%) hue-rotate(340deg) saturate(600%) contrast(1.1); }
  .icon-refresh:hover{ filter:none; }
}

/* FOOTER */
.site-footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid var(--stroke); margin-top:24px; padding-top:12px;
}
.foot-left, .foot-right{ color:#cfc8c2; }

/* SKELETONS (shared) */
.card--skeleton{ pointer-events:none; }
.skel{ position:relative; overflow:hidden; border-radius:8px; background:#1b1c20; }
.skel::after{ content:""; position:absolute; inset:0; transform: translateX(-100%); background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 100%); animation: skel-shimmer 1.4s infinite; }
.skel-media{ height:100%; width:100%; border-radius:0; aspect-ratio: 9/16; background: linear-gradient(0deg, #0e0e11, #16161c); }
.skel-badge{ position:absolute; top:10px; left:10px; width:76px; height:22px; border-radius:999px; background:#2a2320; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.card--skeleton .card-body{ background: var(--bg-2); border:1px solid var(--stroke); border-top:none; border-radius:0 0 var(--radius) var(--radius); }
.skel-title{ height:16px; width:70%; margin:2px 0 8px; }
.skel-addr{ height:12px; width:55%; opacity:.7; }
@keyframes skel-shimmer{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);} }

/* MODALS (wallet) — прежняя совместимость */
.modal{ position: fixed; inset: 0; z-index: 9999; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.modal__card{
  position:absolute; left:50%; top:50%; width: min(92vw, 420px);
  transform: translate(-50%, -50%);
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.03);
}
.modal__header{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px 8px; border-bottom: 1px solid var(--stroke); }
.modal__title{ margin:0; font-size:16px; font-weight: 800; letter-spacing:.3px; }
.modal__close{ background: transparent; border:1px solid var(--stroke); color: var(--text); width: 32px; height: 32px; border-radius: 10px; cursor: pointer; }
.modal__close:hover{ background: rgba(255,255,255,.04); }
.modal__body{ padding: 14px 16px 16px; }
.wallet-list{ display: grid; gap: 10px; margin: 8px 0 10px; }
.wallet-item{ display:flex; align-items:center; gap:10px; width:100%; padding: 12px 14px; background: var(--bg-3); border: 1px solid var(--stroke); border-radius: 12px; color: var(--text); cursor:pointer; font-weight: 700; transition: transform .06s ease, background .15s ease, box-shadow .15s ease; }
.wallet-item:hover{ background: rgba(255,255,255,.04); box-shadow: var(--shadow-sm); }
.wallet-item:active{ transform: translateY(1px); }
.wallet-item__icon{ font-size: 18px; line-height: 1; }
.modal__hint{ margin: 8px 0 0; font-size:12px; color: var(--muted); }
.modal__error{ margin: 10px 0 0; font-size: 13px; color: #ff6b6b; }