/* TradeGuides — shared site styles */
:root{
  --navy:#0b3d66; --navy-deep:#082a47; --navy-light:#124a7a;
  --accent:#d99a1f; --accent-deep:#b8810f;
  --bg:#f2f6fa; --card:#ffffff; --ink:#182430; --muted:#5c6b7a; --line:#dfe6ee;
  --ok:#158a3c; --ok-bg:#e8f8ec; --warn:#b25e00; --warn-bg:#fdf2e2; --bad:#b3261e;
  --radius:14px;
  --shadow:0 2px 10px rgba(11,61,102,.08), 0 1px 2px rgba(11,61,102,.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Segoe UI",Inter,system-ui,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  min-height:100vh;
}
a{color:var(--navy-light); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}

/* ---------- Top nav ---------- */
.tg-nav{
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; padding:14px 24px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--shadow); position:sticky; top:0; z-index:50;
}
.tg-nav .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; color:#fff;}
.tg-nav .brand:hover{text-decoration:none; opacity:.92;}
.tg-nav .brand-badge{
  width:34px; height:34px; border-radius:9px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.tg-nav-links{display:flex; align-items:center; gap:18px; font-size:14px;}
.tg-nav-links a{color:#dbe8f5; font-weight:600;}
.tg-nav-links a:hover{color:#fff;}
.tg-lock-btn{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff;
  padding:6px 13px; border-radius:20px; font-size:12.5px; cursor:pointer; font-weight:600;
}
.tg-lock-btn:hover{background:rgba(255,255,255,.22);}

/* ---------- Page shell ---------- */
.tg-main{max-width:1080px; margin:0 auto; padding:32px 20px 70px;}
.tg-narrow{max-width:840px;}

/* ---------- Hero ---------- */
.tg-hero{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, #1a6aa8 100%);
  color:#fff; border-radius:18px; padding:44px 36px; margin-bottom:34px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.tg-hero::after{
  content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  background:radial-gradient(circle, rgba(217,154,31,.35), transparent 70%);
}
.tg-hero h1{font-size:clamp(26px,4vw,36px); margin:0 0 10px; font-weight:800;}
.tg-hero p{font-size:16px; color:#dceaf6; max-width:620px; margin:0; position:relative;}
.tg-hero .pin-hint{
  margin-top:18px; display:inline-block; font-size:12.5px; background:rgba(255,255,255,.14);
  padding:6px 12px; border-radius:20px; color:#f0f6fc;
}

/* ---------- Guide cards grid ---------- */
.tg-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px;}
.tg-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;
  transition:transform .15s, box-shadow .15s;
}
.tg-card.available:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(11,61,102,.15);}
.tg-card-top{display:flex; align-items:center; gap:12px;}
.tg-card-icon{
  width:46px; height:46px; border-radius:11px; background:#eaf1f8; display:flex;
  align-items:center; justify-content:center; font-size:24px; flex-shrink:0;
}
.tg-card.available .tg-card-icon{background:#e3f2e8;}
.tg-card-trade{font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700;}
.tg-card h3{margin:2px 0 0; font-size:17px; color:var(--navy); line-height:1.3;}
.tg-card p{color:var(--muted); font-size:14px; margin:0; flex:1;}
.tg-badge{
  display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;
  text-transform:uppercase; letter-spacing:.4px; align-self:flex-start;
}
.tg-badge.available{background:var(--ok-bg); color:var(--ok);}
.tg-badge.soon{background:#eef1f4; color:var(--muted);}
.tg-card-actions{display:flex; gap:8px; margin-top:6px; flex-wrap:wrap;}
.tg-btn{
  display:inline-flex; align-items:center; gap:6px; background:var(--navy); color:#fff;
  border:none; padding:9px 16px; border-radius:8px; font-size:13.5px; font-weight:700;
  cursor:pointer;
}
.tg-btn:hover{background:var(--navy-light); text-decoration:none; color:#fff;}
.tg-btn.ghost{background:#fff; color:var(--navy); border:1.5px solid var(--navy);}
.tg-btn.ghost:hover{background:#eaf1f8;}
.tg-btn.accent{background:var(--accent);}
.tg-btn.accent:hover{background:var(--accent-deep);}
.tg-btn[disabled], .tg-btn.disabled{opacity:.5; cursor:default; pointer-events:none;}

.tg-section-title{font-size:20px; color:var(--navy); margin:38px 0 16px; font-weight:800;}
.tg-footer{text-align:center; color:var(--muted); font-size:13px; padding:30px 20px 10px;}

/* ---------- PIN gate ---------- */
html.gate-locked .site-content{display:none !important;}
#pin-gate{display:none;}
html.gate-locked #pin-gate{
  display:flex; position:fixed; inset:0; z-index:999; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--navy-deep), var(--navy) 55%, #16548a);
  padding:20px;
}
.pin-card{
  background:#fff; border-radius:18px; padding:36px 32px; width:100%; max-width:340px;
  text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.pin-card .pin-badge{
  width:56px; height:56px; border-radius:14px; background:var(--accent); color:#fff; font-size:26px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.pin-card h2{margin:0 0 6px; color:var(--navy); font-size:19px;}
.pin-card p{margin:0 0 18px; color:var(--muted); font-size:13.5px;}
#pin-input{
  width:100%; font-size:26px; letter-spacing:10px; text-align:center; padding:12px 10px;
  border:2px solid var(--line); border-radius:10px; margin-bottom:12px; font-weight:700; color:var(--navy);
}
#pin-input:focus{outline:none; border-color:var(--navy-light);}
#pin-submit{
  width:100%; background:var(--navy); color:#fff; border:none; padding:12px; border-radius:10px;
  font-size:15px; font-weight:700; cursor:pointer;
}
#pin-submit:hover{background:var(--navy-light);}
#pin-error{color:var(--bad); font-size:13px; min-height:18px; margin-top:10px; font-weight:600;}

/* ---------- Markdown guide viewer ---------- */
.md-body{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 40px; box-shadow:var(--shadow);
}
@media (max-width:640px){ .md-body{padding:22px 18px;} }
.md-body h1{color:var(--navy); font-size:26px; border-bottom:3px solid var(--accent); padding-bottom:12px;}
.md-body h2{color:var(--navy); font-size:21px; margin-top:38px; padding-top:6px; border-top:1px solid var(--line);}
.md-body h3{color:var(--navy-light); font-size:17px; margin-top:26px;}
.md-body h4{color:var(--navy-light); font-size:15px;}
.md-body p, .md-body li{font-size:15px; color:#2b3b48;}
.md-body table{border-collapse:collapse; width:100%; margin:16px 0; font-size:13.8px; display:block; overflow-x:auto;}
.md-body th, .md-body td{border:1px solid var(--line); padding:7px 10px; text-align:left; vertical-align:top;}
.md-body th{background:#eaf1f8; color:var(--navy); font-weight:700;}
.md-body tr:nth-child(even) td{background:#fafcfe;}
.md-body code{background:#eef2f6; padding:2px 6px; border-radius:5px; font-size:13px; color:#0b3d66;}
.md-body pre{background:#0e2a41; color:#eaf3fb; padding:16px 18px; border-radius:10px; overflow-x:auto;}
.md-body pre code{background:none; color:inherit; padding:0;}
.md-body blockquote{
  border-left:4px solid var(--accent); background:var(--warn-bg); margin:16px 0; padding:10px 18px;
  border-radius:0 8px 8px 0; color:#5a4520; font-size:14.5px;
}
.md-body hr{border:none; border-top:1px solid var(--line); margin:30px 0;}
.md-body a{color:var(--navy-light); font-weight:600;}
.md-loading{padding:60px 20px; text-align:center; color:var(--muted);}

.guide-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:20px;
}
.guide-toolbar .tg-btn{white-space:nowrap;}