/* =====================================================================
   NicKSe Staking DApp
   主题：香槟金 + 深墨黑（替换原站蓝色）
   改配色只需要动 :root 里的变量
   ===================================================================== */

:root{
  /* ---- 品牌主色 ---- */
  --brand:        #E8B339;
  --brand-light:  #FFD76E;
  --brand-dark:   #B98A22;
  --brand-soft:   rgba(232,179,57,.12);
  --brand-glow:   rgba(232,179,57,.35);

  /* ---- 背景层 ---- */
  --bg:           #08090C;
  --bg-alt:       #0E1015;
  --surface:      #14161D;
  --surface-2:    #1B1E27;
  --surface-3:    #22262F;

  /* ---- 线条与文字 ---- */
  --border:       #262A36;
  --border-light: #333846;
  --text:         #EAECF2;
  --text-sub:     #A7AEC0;
  --text-muted:   #6F7789;

  /* ---- 语义色 ---- */
  --up:           #22C98B;
  --down:         #F0616D;
  --warn:         #F2A93B;

  /* ---- 尺寸 ---- */
  --radius:       16px;
  --radius-sm:    10px;
  --radius-lg:    24px;
  --nav-h:        68px;
  --maxw:         1180px;

  --font-mono:    "SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,"Roboto Mono","DejaVu Sans Mono",Menlo,monospace;

  --shadow:       0 8px 32px rgba(0,0,0,.45);
  --shadow-brand: 0 6px 28px rgba(232,179,57,.22);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-light); }

img{ max-width:100%; display:block; }

::selection{ background:var(--brand); color:#0B0B0B; }

/* 滚动条 */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--bg-alt); }
::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--brand-dark); }

/* =====================  布局  ===================== */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px; }

.section{ margin-top:22px; }

.grid{ display:grid; gap:14px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

@media (max-width:820px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .grid-3,.grid-4{ grid-template-columns:1fr 1fr; }
}

.row{ display:flex; align-items:center; }
.row-between{ display:flex; align-items:center; justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }
.flex-1{ flex:1; }

/* =====================  顶部导航  ===================== */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  background:rgba(8,9,12,.72);
  border-bottom:1px solid var(--border);
}
.header .inner{
  max-width:var(--maxw); margin:0 auto;
  height:64px; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; letter-spacing:.5px; color:var(--text); }
.logo .mark{
  width:32px; height:32px; border-radius:9px;
  background:linear-gradient(135deg,var(--brand-light),var(--brand-dark));
  display:flex; align-items:center; justify-content:center;
  color:#0B0B0B; font-size:16px; font-weight:900;
  box-shadow:var(--shadow-brand);
}
.logo-text{ display:inline-block; white-space:nowrap; }
.logo em{ font-style:normal; color:var(--brand); }

/* =====================  Hero  ===================== */
.hero{
  position:relative;
  padding:56px 16px 64px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(900px 380px at 50% -10%, rgba(232,179,57,.22), transparent 65%),
    linear-gradient(180deg,#0C0D11 0%, var(--bg) 100%);
  border-bottom:1px solid var(--border);
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--brand-glow),transparent);
}
.hero h1{
  margin:0 auto; max-width:900px;
  font-size:clamp(24px,4.6vw,46px);
  line-height:1.22; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase;
  background:linear-gradient(180deg,#FFF4D6 0%, var(--brand) 55%, var(--brand-dark) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ margin:14px auto 0; max-width:640px; color:var(--text-sub); font-size:15px; }

/* =====================  卡片  ===================== */
.card{
  background:linear-gradient(180deg,var(--surface) 0%, var(--bg-alt) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}
.card.hl{
  border-color:rgba(232,179,57,.35);
  box-shadow:0 0 0 1px rgba(232,179,57,.06), var(--shadow);
}
.card-title{
  font-size:13px; letter-spacing:1px; text-transform:uppercase;
  color:var(--text-muted); margin:0 0 12px;
  display:flex; align-items:center; gap:8px;
}
.card-title::before{
  content:""; width:3px; height:13px; border-radius:2px;
  background:linear-gradient(180deg,var(--brand-light),var(--brand-dark));
}

/* 指标块 */
.stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px 16px;
}
.stat .label{ font-size:12px; color:var(--text-muted); letter-spacing:.4px; }
.stat .value{ margin-top:6px; font-size:20px; font-weight:700; color:var(--text); }
.stat .value.brand{ color:var(--brand); }
.stat .sub{ margin-top:4px; font-size:12px; color:var(--text-sub); }

/* 参数条（Single Staking Range 那一行） */
.spec-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.spec-item{ background:var(--bg-alt); padding:16px 14px; text-align:center; }
.spec-item .k{ font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; }
.spec-item .v{ margin-top:8px; font-size:16px; font-weight:700; color:var(--brand); }
@media (max-width:720px){ .spec-list{ grid-template-columns:repeat(2,1fr); } }

/* =====================  按钮  ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px;
  border:1px solid transparent; border-radius:999px;
  font-size:15px; font-weight:600; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
  white-space:nowrap; font-family:inherit;
}
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn.is-loading{ opacity:.55; cursor:not-allowed; }

.btn-primary{
  background:linear-gradient(135deg,var(--brand-light),var(--brand));
  color:#100C02; box-shadow:var(--shadow-brand);
}
.btn-primary:hover{ box-shadow:0 8px 34px rgba(232,179,57,.34); color:#100C02; }

.btn-ghost{
  background:rgba(255,255,255,.04);
  border-color:var(--border-light);
  color:var(--text);
}
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }

.btn-block{ width:100%; }
.btn-lg{ height:52px; font-size:16px; }
.btn-sm{ height:34px; padding:0 14px; font-size:13px; }

/* 连接钱包按钮 */
.btn-wallet{
  background:rgba(232,179,57,.10);
  border:1px solid rgba(232,179,57,.45);
  color:var(--brand-light);
  height:40px; border-radius:999px; padding:0 16px;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; cursor:pointer; font-size:14px; font-family:inherit;
}
.btn-wallet:hover{ background:rgba(232,179,57,.18); }
.btn-wallet.connected{ color:var(--up); border-color:rgba(34,201,139,.45); background:rgba(34,201,139,.10); }

/* =====================  表单  ===================== */
.field{ margin-top:14px; }
.field-label{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-muted); margin-bottom:8px; }
.field-label b{ color:var(--text-sub); font-weight:500; }

.input-box{
  display:flex; align-items:center; gap:10px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:0 14px; height:54px;
  transition:border-color .2s, box-shadow .2s;
}
.input-box:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.input-box .prefix{ color:var(--text-muted); font-size:16px; }
.input-box input{
  flex:1; background:transparent; border:0; outline:0;
  color:var(--text); font-size:18px; font-weight:600; font-family:inherit;
  min-width:0;
}
.input-box input::placeholder{ color:var(--text-muted); font-weight:400; font-size:15px; }
.input-box .max{
  color:var(--brand); font-size:13px; font-weight:700; cursor:pointer;
  padding:4px 10px; border-radius:8px; background:var(--brand-soft);
}

/* 拆分展示（Buy 50% / LP 50%） */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.split-item{
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px;
}
.split-item .t{ font-size:13px; color:var(--text); font-weight:600; }
.split-item .d{ font-size:11px; color:var(--text-muted); margin-top:3px; line-height:1.4; }
.split-item .n{ font-size:19px; font-weight:700; color:var(--brand); margin-top:10px; }
@media (max-width:520px){ .split{ grid-template-columns:1fr; } }

/* =====================  表格 / 列表  ===================== */
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th{
  text-align:left; padding:12px 10px; font-size:12px; font-weight:500;
  color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid var(--border);
}
.table td{ padding:14px 10px; border-bottom:1px solid rgba(38,42,54,.6); color:var(--text-sub); }
.table tr:last-child td{ border-bottom:0; }
.table tr:hover td{ background:rgba(255,255,255,.02); }
.table td.strong{ color:var(--text); font-weight:600; }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.empty{ padding:40px 0; text-align:center; color:var(--text-muted); font-size:14px; }
.empty .icon{ font-size:30px; opacity:.4; margin-bottom:8px; }

/* 徽章 */
.badge{
  display:inline-flex; align-items:center; height:22px; padding:0 9px;
  border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.3px;
}
.badge-brand{ background:var(--brand-soft); color:var(--brand-light); }
.badge-up{ background:rgba(34,201,139,.14); color:var(--up); }
.badge-down{ background:rgba(240,97,109,.14); color:var(--down); }
.badge-muted{ background:rgba(255,255,255,.06); color:var(--text-muted); }

/* 节点等级卡 */
.node-card{
  background:linear-gradient(180deg,var(--surface) 0%, var(--bg-alt) 100%);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; position:relative; overflow:hidden;
}
.node-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--brand-dark),var(--brand-light),var(--brand-dark));
  opacity:.7;
}
.node-card .lv{ font-size:19px; font-weight:800; color:var(--brand); letter-spacing:.5px; }
.node-card .req{ margin-top:12px; display:grid; gap:7px; }
.node-card .req div{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-muted); }
.node-card .req div span:last-child{ color:var(--text-sub); font-weight:600; }

/* 邀请链接 */
.invite{
  display:flex; align-items:center; gap:10px;
  background:var(--bg); border:1px dashed var(--border-light);
  border-radius:var(--radius-sm); padding:12px 14px;
}
.invite code{
  flex:1; font-size:12px; color:var(--text-sub);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-mono);
}

/* =====================  底部导航  ===================== */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(14,16,21,.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-around;
}
.tabbar a{
  flex:1; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--text-muted); font-size:11px; letter-spacing:.3px;
  transition:color .2s;
}
.tabbar a svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; }
.tabbar a.active{ color:var(--brand); }
.tabbar a.active .dot{
  position:absolute; margin-top:-40px; width:40px; height:40px; border-radius:50%;
  background:var(--brand-soft); z-index:-1;
}
.tabbar a:hover{ color:var(--brand-light); }

@media (min-width:900px){
  .tabbar{
    left:50%; right:auto; bottom:22px; transform:translateX(-50%);
    width:auto; height:60px; padding:0 8px;
    border:1px solid var(--border); border-radius:999px;
    box-shadow:var(--shadow);
  }
  .tabbar a{ padding:0 22px; }
  body{ padding-bottom:110px; }
}

/* =====================  提示条  ===================== */
.toast-host{ position:fixed; top:78px; left:0; right:0; z-index:200; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast{
  max-width:88vw; padding:11px 18px; border-radius:999px; font-size:14px;
  background:var(--surface-2); border:1px solid var(--border-light); color:var(--text);
  box-shadow:var(--shadow); animation:toastIn .22s ease;
}
.toast.ok{ border-color:rgba(34,201,139,.5); color:var(--up); }
.toast.err{ border-color:rgba(240,97,109,.5); color:var(--down); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }

/* 骨架屏 */
.skeleton{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%; animation:sk 1.3s ease infinite; border-radius:6px; color:transparent!important;
}
@keyframes sk{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* 工具类 */
.t-brand{ color:var(--brand); }
.t-up{ color:var(--up); }
.t-down{ color:var(--down); }
.t-muted{ color:var(--text-muted); }
.t-sub{ color:var(--text-sub); }
.t-c{ text-align:center; }
.t-r{ text-align:right; }
.mono{ font-family:var(--font-mono); letter-spacing:.01em; }
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-18{font-size:18px}.fs-22{font-size:22px}
.fw-7{font-weight:700}
.hide{ display:none !important; }

/* =====================  语言切换  ===================== */
.lang-pick{ position:relative; }
.lang-pick summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  height:40px; padding:0 13px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid var(--border-light);
  color:var(--text-sub); font-size:13px; font-weight:600;
  transition:border-color .2s, color .2s;
}
.lang-pick summary::-webkit-details-marker{ display:none; }
.lang-pick summary:hover{ border-color:var(--brand); color:var(--brand); }
.lang-pick[open] summary{ border-color:var(--brand); color:var(--brand); }

.lang-menu{
  position:absolute; right:0; top:48px; z-index:80;
  min-width:150px; padding:6px;
  background:var(--surface-2); border:1px solid var(--border-light);
  border-radius:var(--radius-sm); box-shadow:var(--shadow);
}
.lang-menu a{
  display:block; padding:9px 12px; border-radius:8px;
  font-size:14px; color:var(--text-sub); white-space:nowrap;
}
.lang-menu a:hover{ background:rgba(255,255,255,.05); color:var(--text); }
.lang-menu a.on{ background:var(--brand-soft); color:var(--brand); font-weight:600; }

@media (max-width:420px){
  .lang-pick summary{ padding:0 10px; }
  .lang-pick summary b{ display:none; }
}