:root{
  --bg: #0b0f17;
  --panel: #0f112e;
  --card: #11122e;
  --text: #e6f0ff;
  --muted: #97a6b7;
  --brand: #6d6bff;
  --cyan: #00e0ff;
  --border: #253b6d;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(109,107,255,.18), transparent),
    radial-gradient(1000px 500px at 80% 110%, rgba(0,224,255,.12), transparent),
    var(--bg);
  color:var(--text);
  line-height:1.6;
}

.container{width:min(1200px,92%); margin-inline:auto}

.site-header{position:sticky; top:0; z-index:1000; background:rgba(11,15,23,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; gap:16px; padding:12px 0}
.logo{color:#fff; text-decoration:none; font-weight:700; display:flex; gap:10px; align-items:center}
.logo-icon{color:var(--brand)}
.main-nav{display:flex; gap:12px}
.nav-link{color:var(--text); text-decoration:none; padding:8px 12px; border-radius:12px}
.nav-link:hover,.nav-link.active{background:rgba(109,107,255,.18)}

.mobile-menu-btn{margin-left:auto; display:none; background:var(--panel); color:var(--text); border:1px solid var(--border); padding:8px 12px; border-radius:10px}

.region-wrap{display:flex; gap:10px; align-items:center; padding:14px 0}
.region-select{background:var(--panel); color:var(--text); border:1px solid var(--border); padding:10px 12px; border-radius:12px}
.region-note{color:var(--muted); font-size:.9rem}

.main-grid{display:grid; grid-template-columns:270px 1fr; gap:20px; padding:18px 0 40px}
.sidebar{position:sticky; top:70px; height:fit-content}
.tabs{display:flex; flex-direction:column; gap:8px}
.tab-link{all:unset; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg, rgba(109,107,255,.12), rgba(0,224,255,.10)); cursor:pointer}
.tab-link.active{outline:2px solid var(--brand)}

.card{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--panel); border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow:var(--shadow)}
.status-bar{display:flex; align-items:center; justify-content:space-between}
.status-actions{display:flex; align-items:center; gap:10px}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%}
.dot.live{background:#10b981}

.content{display:flex; flex-direction:column; gap:18px}
.fact-card{display:flex; flex-direction:column; gap:12px}
.fact-header{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.fact-header h2{margin:0; font-size:1.2rem}
.fact-text{margin:0}
.tab-panel{display:none}
.tab-panel.active{display:block}

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

#tab-land .grid-2{gap:20px}
.outputs{gap:20px; margin-top:20px}

.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

label{display:block; margin-bottom:6px; color:#d9e6ff}
input, select, textarea{width:100%; background:var(--card); color:var(--text); border:1px solid var(--border); padding:10px 12px; border-radius:12px; outline:none}
input:focus, select:focus, textarea:focus{border-color:var(--brand)}

.metals-grid{display:grid; grid-template-columns:minmax(140px,200px) minmax(320px,1fr) minmax(180px,240px) minmax(200px,260px); gap:12px; align-items:end}
.metal-select select{width:100%}
.input-combo{display:flex; gap:10px; align-items:center}
.input-combo input{flex:2; min-width:140px}
.input-combo select{flex:1; min-width:120px}

@media (max-width:640px){
  .metals-grid{grid-template-columns:1fr}
  .input-combo{flex-direction:column; align-items:stretch}
  .input-combo input,.input-combo select{width:100%}
}
.result-box{background:#0b1220; border:1px dashed var(--border); padding:12px; border-radius:12px; min-height:44px; display:flex; align-items:center}
.btn{all:unset; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:linear-gradient(90deg, rgba(109,107,255,.5), rgba(0,224,255,.5)); cursor:pointer}
.btn.ghost{background:transparent}

.muted{color:var(--muted); font-size:.92rem}

.site-footer{border-top:1px solid var(--border); margin-top:40px; background:#0b0f17}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.footer-nav{display:flex; gap:12px; align-items:center}
.footer-nav a{color:var(--muted); text-decoration:none}
.footer-nav .resources{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:8px 12px}
.footer-nav .resources summary{list-style:none; cursor:pointer; color:var(--text); font-weight:600}
.footer-nav .resources summary::-webkit-details-marker{display:none}
.footer-nav .resources[open]{box-shadow:var(--shadow)}
.footer-nav .resources a{display:block; margin-top:8px}

.page{padding:24px 0; display:flex; flex-direction:column; gap:18px}

@media (max-width:980px){
  .main-grid{grid-template-columns:1fr}
  .sidebar{position:static}
  .main-nav{display:none; position:absolute; right:4%; top:58px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px; flex-direction:column}
  .main-nav.open{display:flex}
  .mobile-menu-btn{display:inline-flex}
  .grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
}