:root{
  --bg:#0b0f19;
  --card:#111827;
  --muted:#9ca3af;
  --text:#e5e7eb;
  --border:rgba(255,255,255,.10);
  --accent:#9b59b6;
  --accent2:#8e44ad;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background-color:var(--bg);
  color:var(--text);
  font-family:Arial,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  overflow-x:hidden;

  /* background image is controlled in config/backgrounds.js */
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.container{max-width:1040px;margin:0 auto;padding:92px 16px 28px}
.container.narrow{max-width:560px}
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:16px 16px;
  gap:12px;
  z-index:50;
  background:linear-gradient(to bottom, rgba(11,15,25,.92), rgba(11,15,25,.35), rgba(11,15,25,0));
  backdrop-filter: blur(6px);
}
.left,.right{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.auth{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.btn, .nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  background:var(--accent);
  border:1px solid transparent;
  border-radius:10px;
  color:var(--text);
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
}
.btn:hover, .nav-link:hover{background:var(--accent2)}
.btn:disabled{opacity:.55;cursor:not-allowed}

.btn-ghost{
  background:rgba(255,255,255,.06);
  border-color:var(--border);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.10);
}

.nav{
  display:none;
  margin-top:10px;
  width:220px;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(17,24,39,.88);
}
.nav.open{display:block}
.nav-link{width:100%;background:rgba(255,255,255,.08);border:1px solid var(--border);margin:6px 0}
.nav-link:hover{background:rgba(255,255,255,.14)}

.panel{
  display:none;
  background:rgba(17,24,39,.82);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  margin:12px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.panel.active{display:block}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.muted{color:var(--muted)}
.small{font-size:12px}

.form{display:flex;flex-direction:column;gap:12px;margin-top:12px}
label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.input{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.22);
  color:var(--text);
  font-size:14px;
}


.session-pill{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.20);
}


.coins-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 980px){ .coins-grid{grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media (max-width: 520px){ .coins-grid{grid-template-columns: 1fr;} }

.coin-card{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.16);
  text-decoration:none;
  color:var(--text);
}
.coin-card:hover{ background:rgba(0,0,0,.24); }

.coin-card img{
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  object-fit:cover;
  background:rgba(255,255,255,.06);
}

.coin-card .title{font-weight:900}
.coin-card .sub{color:var(--muted); font-size:12px; margin-top:2px}
.coin-card .kpis{margin-left:auto; text-align:right}
.coin-card .kpis .mc{font-weight:900}
.coin-card .kpis .price{color:var(--muted); font-size:12px}

.coin-img{
  width:64px;height:64px;
  border-radius:18px;
  border:1px solid var(--border);
  object-fit:cover;
  background:rgba(255,255,255,.06);
}

.trades{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:280px;
  overflow:auto;
  padding-right:6px;
}
.trade{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:rgba(0,0,0,.16);
}
.trade .rowline{
  display:flex;
  justify-content:space-between;
  gap:10px;
}


/* Pump.fun-like shell (simple, editable) */
.shell{
  display:flex;
  min-height:100vh;
}
.sidebar{
  width:240px;
  padding:14px 12px;
  border-right:1px solid var(--border);
  background:rgba(0,0,0,.18);
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar .brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px 14px;
  font-weight:900;
  letter-spacing:-.02em;
}
.sidebar .brand-dot{
  width:14px;height:14px;border-radius:5px;
  background:linear-gradient(135deg, rgba(130,246,173,1), rgba(155,89,182,1));
}
.sidebar a.side-link{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  border:1px solid transparent;
}
.sidebar a.side-link:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--border);
}
.sidebar a.side-link.active{
  background:rgba(130,246,173,.18);
  border-color:rgba(130,246,173,.25);
}
.sidebar .side-spacer{height:10px}
.main{
  flex:1;
  padding:18px 18px 28px;
}
.main-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.searchbar{
  flex:1;
  display:flex;
  gap:10px;
  align-items:center;
  max-width:520px;
}
.searchbar .input{min-width:0}
.header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid-2{
  display:grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap:14px;
}
@media(max-width: 980px){
  .sidebar{display:none}
  .grid-2{grid-template-columns:1fr}
}
.card{
  background:rgba(17,24,39,.82);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.dropzone{
  border:1px dashed rgba(255,255,255,.18);
  border-radius:16px;
  padding:18px;
  background:rgba(0,0,0,.12);
  text-align:center;
}
.toggle{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
  margin-top:10px;
}
.toggle input{transform: scale(1.15)}
.preview{
  height:220px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.preview img{width:100%;height:100%;object-fit:cover}
.preview .muted{padding:12px;text-align:center}


.chart-box{
  height:420px;
  width:100%;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.14);
  overflow:hidden;
}
.progress{
  height:10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  overflow:hidden;
  margin-top:8px;
}
.progress-bar{
  height:100%;
  width:0%;
  background:rgba(130,246,173,.55);
}


.tabs{
  display:flex;
  gap:10px;
  align-items:center;
  border-bottom:1px solid var(--border);
  margin-top:10px;
}
.tab{
  padding:10px 12px;
  border-radius:12px 12px 0 0;
  cursor:pointer;
  border:1px solid transparent;
  color:var(--muted);
  font-weight:900;
}
.tab.active{
  color:var(--text);
  border-color:var(--border);
  border-bottom-color: transparent;
  background:rgba(255,255,255,.04);
}

.table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--border);
}
.table th, .table td{
  text-align:left;
  padding:10px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:13px;
}
.table th{color:var(--muted); font-weight:900; background:rgba(0,0,0,.14)}
.table tr:last-child td{border-bottom:none}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.18);
  font-size:12px;
  color:var(--muted);
}

.comment-box{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:12px;
}
.avatar{
  width:34px;height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.comment-input{flex:1}
.comment{
  display:flex;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
  margin-top:10px;
}
.comment .meta{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
}
.comment .body{margin-top:4px;font-size:13px}
.comment .actions{
  margin-left:auto;
  display:flex;
  gap:10px;
  align-items:center;
}
.like-btn{cursor:pointer;user-select:none}


.auto-rule{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:rgba(0,0,0,.12);
  margin-top:10px;
}
.auto-rule .rowline{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}


.presale-card .presale-amount{
  font-size:34px;
  font-weight:900;
  letter-spacing:-0.03em;
}
.presale-card .presale-listing{
  font-size:28px;
  font-weight:900;
}
.presale-bar{
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  overflow:hidden;
  margin-top:12px;
}
.presale-bar-fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444);
  border-radius:999px;
}


.qbtn{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
  font-size:12px;
}
.qbtn:hover{background:rgba(255,255,255,.10)}


/* Global background overlay for readability */
body::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,0.35);pointer-events:none;z-index:0;}


body{background-image: var(--bg-image, none);}

.shell{position:relative;z-index:1;}


/* ===== Global Background (file:// safe, no JS) ===== */
:root{
  --site-bg-image: url("../images/main-bg.jpg");
  --site-bg-overlay: rgba(0,0,0,0.55);
}

body{
  background-color: var(--bg);
  background-image: var(--site-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* overlay for readability */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background: var(--site-bg-overlay);
  pointer-events:none;
  z-index:-1;
}

.shell{position:relative;z-index:0;}


/* Pump-style coin meter */
.coin-meter{margin-top:10px}
.coin-meter-track{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  overflow:hidden;
  position:relative;
}
.coin-meter-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(130,246,173,0.95), rgba(45,212,191,0.90));
  transition: width 180ms ease;
}
.coin-meter-label{
  margin-top:6px;
  font-size:12px;
  color: rgba(255,255,255,0.70);
}

/* Near graduate: turn gold + sparkles */
.coin-card.near-grad .coin-meter-fill,
.coin-card.graduated .coin-meter-fill{
  background: linear-gradient(90deg, rgba(251,191,36,0.95), rgba(245,158,11,0.95));
  box-shadow: 0 0 18px rgba(245,158,11,0.35);
}
.coin-card.near-grad .coin-meter-track::after,
.coin-card.graduated .coin-meter-track::after{
  content:"";
  position:absolute;
  inset:-8px -16px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.80) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 60%, rgba(255,255,255,0.70) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 25%, rgba(255,255,255,0.65) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 80%, rgba(255,255,255,0.55) 0 2px, transparent 3px);
  opacity:0;
  animation: sparkles 1.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sparkles{
  0%{ transform: translateX(-12px); opacity:0; }
  35%{ opacity:0.7; }
  70%{ opacity:0.3; }
  100%{ transform: translateX(12px); opacity:0; }
}

/* Graduated: stronger glow */
.coin-card.graduated{
  box-shadow: 0 0 0 1px rgba(245,158,11,0.25), 0 10px 30px rgba(0,0,0,0.35);
}


/* Wallet dropdown */
.wallet-dd{ position:relative; }
.wallet-dd-btn{ padding-left:12px; padding-right:12px; }
.wallet-dd-menu{
  position:absolute;
  right:0;
  top:44px;
  width:260px;
  display:none;
  z-index:50;
}
#walletDropdownWrap[data-open="1"] .wallet-dd-menu{ display:block; }
.wallet-dd-card{
  border:1px solid var(--border);
  background:rgba(10,14,22,0.92);
  backdrop-filter: blur(10px);
  border-radius:14px;
  padding:12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.wallet-dd-title{ font-weight:900; margin-bottom:8px; }
.wallet-dd-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; }
.wallet-dd-sep{ height:1px; background:rgba(255,255,255,0.08); margin:8px 0; }
.wallet-dd-empty{ padding-top:6px; }


/* Modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:200;
}
.modal{
  width:min(560px, 92vw);
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(10,14,22,0.94);
  backdrop-filter: blur(10px);
  padding:16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

.wallet-dd-action{ width:100%; justify-content:center; }
.wallet-dd-action.is-disabled{ opacity:0.55; cursor:not-allowed; }


/* v81 patch: create-coin preview (isolated) */
.preview-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.preview-media{
  width:100%;
  height:180px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
.preview-img{
  width:100%;
  height:100%;
  object-fit:contain; /* show full image */
}
.preview-placeholder{
  color:rgba(255,255,255,.6);
  font-size:12px;
}
.preview-body{flex:1; min-width:0;}
.preview-title{font-weight:800; font-size:16px; margin-top:2px;}
.preview-desc{margin-top:6px; line-height:1.25;}
.preview-stats{margin-top:8px;}


/* Wallet dropdown (Pump.fun-style) */
.header-actions{position:relative}
.wallet-dropdown{position:absolute;top:44px;right:0;min-width:260px;z-index:9999}
.wallet-dd-card{background:rgba(16,16,24,.92);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.45);padding:12px}
.wallet-dd-title{font-weight:900;margin-bottom:6px}
.wallet-dd-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0}
.wallet-dd-sep{height:1px;background:rgba(255,255,255,.08);margin:8px 0}
.wallet-dd-empty{padding:8px 0}
.wallet-dd-action{width:100%;margin-top:8px}
.wallet-dd-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.wallet-dd-actions .btn{flex:1 1 0}
.wallet-dd-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:12px;word-break:break-all}