/* Unicrium Explorer — "The Element of Uniqueness"
   Palette pulled from the logo: deep navy gradient + metallic gold. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --navy-900:#0a1020;
  --navy-800:#0e1628;
  --navy-700:#131d33;
  --navy-600:#1a2742;
  --border:#22304f;
  --border-soft:#1a2640;
  --text:#e8edf7;
  --muted:#8493b0;
  --muted-2:#5f6e8c;
  --gold:#d4a843;
  --gold-bright:#f0c75e;
  --gold-dim:#a8842f;
  --green:#3ddc84;
  --red:#ff6b6b;
  --shadow:0 8px 30px rgba(0,0,0,.4);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(212,168,67,.07), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(26,39,66,.6), transparent 55%),
    linear-gradient(180deg,var(--navy-900),#070b16);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Sora',-apple-system,sans-serif;
  line-height:1.55;
  min-height:100vh;
}
a{color:var(--gold);text-decoration:none;transition:color .15s;}
a:hover{color:var(--gold-bright);}
.mono{font-family:'JetBrains Mono',monospace;}
.muted{color:var(--muted);}
.green{color:var(--green);}
.red{color:var(--red);}
.gold{color:var(--gold);}

/* layout */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;}

/* header */
header.nav{
  border-bottom:1px solid var(--border);
  background:rgba(10,16,32,.7);
  backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:50;
}
.nav-inner{display:flex;align-items:center;gap:24px;padding:14px 20px;max-width:1180px;margin:0 auto;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:38px;width:38px;border-radius:50%;}
.brand .name{font-weight:800;font-size:19px;letter-spacing:.5px;color:#fff;}
.brand .name b{color:var(--gold);font-weight:800;}
.brand .tag{font-size:10px;color:var(--muted-2);letter-spacing:2px;text-transform:uppercase;margin-top:-3px;}
nav.links{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;}
nav.links a{
  color:var(--muted);font-size:14px;font-weight:600;padding:8px 14px;border-radius:8px;transition:all .15s;
}
nav.links a:hover,nav.links a.active{color:var(--gold-bright);background:rgba(212,168,67,.1);}

/* search */
.searchbar{display:flex;gap:10px;margin:26px 0;}
.searchbar input{
  flex:1;background:var(--navy-800);border:1px solid var(--border);border-radius:12px;
  padding:14px 18px;color:var(--text);font-size:14px;font-family:'JetBrains Mono',monospace;
  transition:border-color .15s;
}
.searchbar input:focus{outline:none;border-color:var(--gold-dim);}
.searchbar button{
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-dim));
  color:#1a1205;border:none;border-radius:12px;padding:0 26px;font-weight:700;font-size:14px;cursor:pointer;
  transition:transform .1s,box-shadow .15s;
}
.searchbar button:hover{box-shadow:0 6px 20px rgba(212,168,67,.3);transform:translateY(-1px);}

/* stat cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:24px 0;}
.stat{
  background:linear-gradient(160deg,var(--navy-700),var(--navy-800));
  border:1px solid var(--border);border-radius:16px;padding:20px;position:relative;overflow:hidden;
}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright),transparent);}
.stat .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
.stat .value{font-size:28px;font-weight:800;margin-top:8px;color:#fff;font-family:'Sora';}
.stat .sub{font-size:12px;color:var(--muted-2);margin-top:4px;}

/* panels */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:820px){.grid2{grid-template-columns:1fr;}}
.panel{
  background:linear-gradient(160deg,var(--navy-700),var(--navy-800));
  border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:20px;
}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);}
.panel-head h2{font-size:16px;font-weight:700;color:#fff;}
.panel-head a{font-size:13px;}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--border-soft);font-size:14px;}
.row:last-child{border-bottom:none;}
.row:hover{background:rgba(212,168,67,.03);}
.row .l{display:flex;align-items:center;gap:12px;min-width:0;}
.row .icon{width:34px;height:34px;border-radius:9px;background:rgba(212,168,67,.1);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--gold);flex-shrink:0;font-weight:700;}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* badges */
.pill{background:rgba(212,168,67,.14);color:var(--gold-bright);padding:3px 10px;border-radius:7px;font-size:12px;font-weight:600;}
.pill.green{background:rgba(61,220,132,.14);color:var(--green);}
.pill.red{background:rgba(255,107,107,.14);color:var(--red);}
.pill.gray{background:rgba(132,147,176,.14);color:var(--muted);}

/* tables (detail pages) */
.kv{display:grid;grid-template-columns:200px 1fr;gap:0;}
.kv .k{padding:14px 20px;color:var(--muted);font-size:13px;border-bottom:1px solid var(--border-soft);}
.kv .v{padding:14px 20px;font-size:14px;border-bottom:1px solid var(--border-soft);word-break:break-all;}
@media(max-width:680px){.kv{grid-template-columns:1fr;}.kv .k{padding-bottom:2px;border:none;}.kv .v{padding-top:2px;}}

/* page title */
.ptitle{display:flex;align-items:center;gap:12px;margin:24px 0 16px;}
.ptitle h1{font-size:24px;font-weight:800;color:#fff;}
.ptitle .pill{margin-left:4px;}

/* pagination */
.pager{display:flex;gap:8px;justify-content:center;padding:18px;}
.pager button{background:var(--navy-600);border:1px solid var(--border);color:var(--text);padding:8px 16px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;}
.pager button:disabled{opacity:.4;cursor:default;}
.pager button:not(:disabled):hover{border-color:var(--gold-dim);color:var(--gold-bright);}

/* misc */
.netdot{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);background:var(--navy-700);border:1px solid var(--border);padding:6px 12px;border-radius:20px;}
.netdot .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);}
.netdot.off .dot{background:var(--red);box-shadow:0 0 8px var(--red);}
.empty{padding:30px 20px;text-align:center;color:var(--muted-2);font-size:14px;}
footer{text-align:center;color:var(--muted-2);font-size:13px;padding:40px 0 30px;border-top:1px solid var(--border-soft);margin-top:40px;}
footer .mono{color:var(--muted);}
.copy{cursor:pointer;color:var(--muted-2);font-size:12px;margin-left:6px;}
.copy:hover{color:var(--gold);}
.fade-in{animation:fade .4s ease both;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ============ MOBILE-FIRST OVERRIDES & NEW COMPONENTS ============ */

/* responsive nav */
.menu-toggle{display:none;background:none;border:none;color:var(--gold);font-size:26px;cursor:pointer;margin-left:auto;}
@media(max-width:780px){
  .menu-toggle{display:block;}
  nav.links{display:none;flex-direction:column;width:100%;margin-left:0;gap:2px;margin-top:10px;}
  nav.links.open{display:flex;}
  nav.links a{width:100%;}
  .nav-inner{flex-wrap:wrap;}
}

/* data tables: use real table semantics, horizontal scroll on mobile */
.dtable{width:100%;border-collapse:collapse;}
.dtable th{
  text-align:left;padding:12px 16px;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border);font-weight:600;
}
.dtable td{padding:13px 16px;font-size:13.5px;border-bottom:1px solid var(--border-soft);vertical-align:middle;}
.dtable tr:last-child td{border-bottom:none;}
.dtable tbody tr:hover{background:rgba(212,168,67,.03);}
.dtable .r{text-align:right;}
.dtable .icon{width:32px;height:32px;border-radius:8px;background:rgba(212,168,67,.1);display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--gold);font-weight:700;margin-right:10px;vertical-align:middle;}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media(max-width:780px){
  .dtable{min-width:560px;}
  .stat .value{font-size:22px;}
}

/* forms (verification, faucet) */
.form{padding:20px;}
.form label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px;font-weight:600;}
.form input,.form select,.form textarea{
  width:100%;background:var(--navy-900);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;color:var(--text);font-size:14px;font-family:'JetBrains Mono',monospace;
}
.form textarea{min-height:300px;resize:vertical;line-height:1.5;}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold-dim);}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:680px){.form .row2{grid-template-columns:1fr;}}
.btn{
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-dim));color:#1a1205;border:none;
  border-radius:10px;padding:13px 28px;font-weight:700;font-size:14px;cursor:pointer;margin-top:18px;
  transition:transform .1s,box-shadow .15s;
}
.btn:hover{box-shadow:0 6px 20px rgba(212,168,67,.3);transform:translateY(-1px);}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none;}
.checkbox{display:flex;align-items:center;gap:10px;margin-top:14px;}
.checkbox input{width:auto;}
.alert{padding:14px 16px;border-radius:10px;margin-top:16px;font-size:14px;}
.alert.ok{background:rgba(61,220,132,.12);border:1px solid rgba(61,220,132,.3);color:var(--green);}
.alert.err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3);color:var(--red);}

/* hero (home) */
.hero{text-align:center;padding:30px 0 10px;}
.hero h1{font-size:30px;font-weight:800;color:#fff;letter-spacing:.5px;}
.hero h1 .gold{color:var(--gold);}
.hero p{color:var(--muted);margin-top:8px;font-size:15px;}

/* verified badge */
.vbadge{display:inline-flex;align-items:center;gap:6px;background:rgba(61,220,132,.12);color:var(--green);padding:4px 12px;border-radius:8px;font-size:13px;font-weight:600;}

/* code block */
pre.code{background:var(--navy-900);border:1px solid var(--border);border-radius:10px;padding:16px;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.6;color:#cdd6e8;white-space:pre;}

/* footer */
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;text-align:left;}
@media(max-width:680px){.foot-grid{grid-template-columns:1fr;gap:18px;}}
.foot-brand{font-weight:800;color:var(--gold);letter-spacing:1px;}
.foot-h{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:8px;}
footer{text-align:left;}
.foot-bottom{text-align:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--border-soft);font-size:12px;}

/* meet card */
.meet-hero{background:linear-gradient(160deg,var(--navy-600),var(--navy-800));border:1px solid var(--border);border-radius:18px;padding:36px;text-align:center;}
.meet-hero h2{font-size:24px;color:#fff;margin-bottom:10px;}
.meet-hero p{color:var(--muted);max-width:560px;margin:0 auto 22px;line-height:1.7;}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:24px;}
.feat .f{background:var(--navy-800);border:1px solid var(--border);border-radius:12px;padding:18px;text-align:left;}
.feat .f h3{font-size:15px;color:var(--gold);margin-bottom:6px;}
.feat .f p{font-size:13px;color:var(--muted);margin:0;}