/* VargaMesh unified UI polish v4.0.0 — 2026-09-30
   Purpose: keep the existing VargaMesh visual language while making spacing,
   hierarchy, brand treatment, tables and responsive behavior consistent. */

:root{
  --ui-panel:rgba(7,22,32,.92);
  --ui-panel-strong:rgba(8,27,39,.97);
  --ui-panel-soft:rgba(8,25,36,.72);
  --ui-border:rgba(45,105,132,.52);
  --ui-border-soft:rgba(35,82,105,.42);
  --ui-highlight:rgba(67,224,183,.12);
  --ui-shadow:0 18px 54px rgba(0,0,0,.22);
  --ui-shadow-strong:0 26px 78px rgba(0,0,0,.32);
  --ui-radius:18px;
  --ui-radius-sm:12px;
}

html{scroll-padding-top:92px}
body{overflow-x:hidden}
::selection{background:rgba(67,224,183,.27);color:#fff}
img{max-width:100%;height:auto}
a,button,input,select,textarea{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #62dce8;
  outline-offset:3px;
}

/* Core layout rhythm */
.wrap{width:min(1280px,calc(100% - 42px))}
.section{padding:54px 0}
.section.surface{border-color:rgba(34,74,97,.55)}
.section-head{margin-bottom:26px;align-items:flex-end}
.section-head>div{min-width:0}
.section-head h2,.content h2{letter-spacing:-.04em}
.section-head p{max-width:780px;line-height:1.68}
.eyebrow,.badge{letter-spacing:.115em}

/* Consistent brand treatment: official coin artwork only. */
.brandmark{
  width:42px!important;height:42px!important;border-radius:50%!important;
  background:#06101a url('/assets/vmesh-mark.png') center/112% no-repeat!important;
  border:1px solid rgba(95,224,242,.3)!important;
  box-shadow:0 8px 26px rgba(0,0,0,.3),0 0 26px rgba(44,205,226,.1)!important;
  overflow:hidden;
}
.brandmark>span{display:none!important}
.brandmark:after{border-radius:50%!important;inset:1px!important;border-color:rgba(255,255,255,.07)!important}
.topbar .brandmark{
  width:42px!important;height:42px!important;border-radius:50%!important;
  background:#06101a url('/assets/vmesh-mark.png') center/112% no-repeat!important;
  border:1px solid rgba(95,224,242,.3)!important;
  box-shadow:0 8px 26px rgba(0,0,0,.3),0 0 26px rgba(44,205,226,.1)!important;
}
.topbar .brandmark>span{display:none!important}
.topbar .brandmark:after{border-radius:50%!important;inset:1px!important;border-color:rgba(255,255,255,.07)!important}
.topbar{border-bottom-color:rgba(38,87,109,.62);box-shadow:0 10px 36px rgba(0,0,0,.12)}
.topbar .nav{min-height:74px}
.topbar .brandtext{font-weight:900}
.topbar .navlinks>a,.topbar .nav-more-button{letter-spacing:.005em}

/* Common surfaces */
.card,.feature-card,.metric-card,.hero-console,.connect-card,.security-card{
  border-color:var(--ui-border-soft);
}
.card,.feature-card,.metric-card{
  box-shadow:0 14px 44px rgba(0,0,0,.12);
}
.card:hover,.feature-card:hover,.metric-card:hover{
  border-color:rgba(64,133,162,.63);
}
.card{border-radius:var(--ui-radius)}
.feature-card{border-radius:var(--ui-radius)}
.metric-card{border-radius:15px}
.notice{border-radius:12px}

/* Buttons / inputs */
.btn{min-height:42px;border-radius:11px;letter-spacing:.005em}
.btn.primary{box-shadow:0 12px 32px rgba(61,174,196,.18)}
.input{min-height:44px}
.searchbox{border-color:rgba(51,111,138,.63);background:rgba(6,20,30,.9)}
.searchbox:focus-within{border-color:rgba(80,190,211,.74);box-shadow:0 0 0 3px rgba(75,190,213,.07),var(--ui-shadow)}

/* Tables: clearer hierarchy across Explorer, network, mining, wallet and APIs. */
.table-wrap{
  overflow:auto;
  border:1px solid rgba(31,77,99,.56);
  border-radius:13px;
  background:rgba(3,15,23,.52);
  scrollbar-width:thin;
  scrollbar-color:#24536a transparent;
}
.table-wrap>.table{margin:0}
.table{border-collapse:separate;border-spacing:0;width:100%}
.table th{
  color:#7797a7;
  background:rgba(5,23,34,.93);
  font-size:.69rem;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.table th,.table td{border-bottom-color:rgba(29,73,94,.45)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:rgba(25,93,113,.065)}
.table td{vertical-align:middle}

/* Hero consistency without changing the established visual identity. */
.hero{padding-top:82px;padding-bottom:58px}
.hero h1{letter-spacing:-.06em}
.hero-console{box-shadow:var(--ui-shadow-strong)}
.hero-console p{line-height:1.65}
.console-code{border-color:rgba(36,83,107,.72)}

/* Footer + long pages */
.footer{border-top-color:rgba(33,76,97,.62)}
.footer-grid{gap:28px}
.footer a{transition:color .15s ease}
.footer a:hover{color:#dffbff}
.content p,.content li{line-height:1.72}

/* ===== Explorer v4 ===== */
body[data-page="explorer"] .hero{padding:58px 0 34px}
body[data-page="explorer"] .hero-grid{gap:38px;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)}
body[data-page="explorer"] .hero h1{font-size:clamp(3rem,5.4vw,5.25rem);margin:16px 0 16px}
body[data-page="explorer"] .hero-search{max-width:860px}
body[data-page="explorer"] .hero-console{box-shadow:0 22px 66px rgba(0,0,0,.28)}
.explorer-workspace{padding-top:26px!important;padding-bottom:42px!important}
.explorer-overview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
  margin-bottom:14px;
}
.explorer-overview-card{
  min-width:0;
  padding:15px 16px;
  border:1px solid rgba(31,91,116,.54);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(8,29,41,.9),rgba(4,18,27,.9));
  box-shadow:0 10px 30px rgba(0,0,0,.1);
}
.explorer-overview-card>span{
  display:flex;align-items:center;gap:7px;
  color:#668e9f;font-size:.64rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
}
.explorer-overview-card strong{
  display:block;min-width:0;margin-top:5px;
  color:#eefbff;font-size:clamp(1.15rem,2vw,1.62rem);line-height:1.15;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.explorer-overview-card small{display:block;margin-top:4px;color:#668797;font-size:.68rem}
.explorer-overview-card.is-live{border-color:rgba(60,173,127,.44)}
.explorer-overview-card.is-live strong{color:#96edbd}
.explorer-statebar{
  margin-bottom:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.08);
}
.explorer-statebar .explorer-refresh-note{margin-left:auto;color:#668797}
.explorer-result:not(:empty){margin-top:14px}
.explorer-object-card{box-shadow:0 20px 64px rgba(0,0,0,.24)!important}
.explorer-object-head{padding:22px 24px 20px!important}
.explorer-statgrid{padding:18px 24px!important}
.explorer-kv{margin-left:24px!important;margin-right:24px!important}
.explorer-subsection{margin-left:24px!important;margin-right:24px!important}
.explorer-data-note{margin-left:24px!important;margin-right:24px!important}
.explorer-latest-section{padding-top:48px!important}
.explorer-latest-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.explorer-latest-meta{
  flex:0 0 auto;
  display:flex;align-items:center;gap:8px;
  color:#7092a1;font-size:.72rem;font-weight:800;
}
.explorer-latest-meta .dot{width:7px;height:7px}
.explorer-latest-toolbar{margin:0 0 12px!important;padding:11px 12px!important;border-radius:11px!important}
body[data-page="explorer"] .table-wrap{box-shadow:0 14px 42px rgba(0,0,0,.12)}
body[data-page="explorer"] #blocks-body td{padding-top:13px;padding-bottom:13px}
body[data-page="explorer"] #blocks-body tr:first-child td{background:rgba(24,108,128,.055)}
.explorer-height-link{display:inline-flex;align-items:center;min-width:70px}
.explorer-hash-cell span{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.explorer-search-hints span{cursor:default}

/* More readable result sections and long identifiers. */
.explorer-object-title{max-width:min(900px,80vw)!important}
.explorer-object-title h2{font-size:clamp(1.05rem,1.7vw,1.5rem)!important}
.explorer-kv{grid-template-columns:minmax(150px,.34fr) minmax(0,1fr)}
.explorer-kv>div:not(.k){overflow-wrap:anywhere}
.explorer-subhead{padding-bottom:2px}
.explorer-data-table td{line-height:1.45}
.vmesh-amount{font-variant-numeric:tabular-nums}

/* Responsive polish */
@media(max-width:1050px){
  .wrap{width:min(100% - 32px,1280px)}
  .section{padding:46px 0}
  body[data-page="explorer"] .hero-grid{grid-template-columns:1fr}
  body[data-page="explorer"] .hero-console{max-width:720px}
  .explorer-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .wrap{width:min(100% - 26px,1280px)}
  .section{padding:40px 0}
  .section-head{align-items:flex-start;flex-direction:column;margin-bottom:20px}
  .hero{padding-top:56px;padding-bottom:40px}
  .hero h1{font-size:clamp(2.65rem,13vw,4.2rem)}
  .actions>.btn{min-height:44px}
  .card{padding:19px}
  .explorer-workspace{padding-top:20px!important}
  .explorer-object-head,.explorer-statgrid{padding-left:16px!important;padding-right:16px!important}
  .explorer-kv,.explorer-subsection,.explorer-data-note{margin-left:16px!important;margin-right:16px!important}
  .explorer-latest-heading{align-items:flex-start;flex-direction:column}
  .explorer-latest-meta{margin-top:-7px}
}
@media(max-width:540px){
  .wrap{width:min(100% - 22px,1280px)}
  .topbar .brandmark{width:38px!important;height:38px!important}
  .explorer-overview{grid-template-columns:1fr 1fr;gap:8px}
  .explorer-overview-card{padding:12px}
  .explorer-overview-card strong{font-size:1.05rem}
  .explorer-overview-card small{font-size:.63rem}
  .searchbox{padding:6px}
  .searchbox .btn{padding-left:12px;padding-right:12px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* v4.1 multilingual RU/ZH */
html[lang="ru"],html[lang="zh-Hans"]{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif}
html[lang="zh-Hans"]{font-family:Inter,"Noto Sans SC","Microsoft YaHei","PingFang SC",ui-sans-serif,system-ui,sans-serif}
html[lang="zh-Hans"] body{word-break:normal;line-break:auto}
.nav-actions .langswitch{min-width:2.1rem;text-align:center}
@media(max-width:860px){.nav-actions .langswitch{font-size:.72rem;padding:.38rem .42rem}}