/* ============================================================
   Chinese Signal Bot — Design System
   Dark terminal aesthetic — clean, high-contrast, data-first
   KEY DIFFERENTIATOR from signal-site: narrative insight cards
   ============================================================ */

/* ----- Design Tokens ----- */
:root {
  --bg: #08080d;
  --surface: #0f0f17;
  --surface-raised: #14141f;
  --border: #1e1e2e;
  --border-light: #252538;
  --text: #e8e8f0;
  --text-secondary: #a0a0b8;
  --muted: #6b6b80;
  --muted-light: #505068;

  --green: #22c55e;
  --green-soft: rgb(34 197 94 / 0.08);
  --green-border: rgb(34 197 94 / 0.2);
  --red: #ef4444;
  --red-soft: rgb(239 68 68 / 0.08);
  --red-border: rgb(239 68 68 / 0.2);
  --amber: #f59e0b;
  --amber-soft: rgb(245 158 11 / 0.08);
  --amber-border: rgb(245 158 11 / 0.2);
  --blue: #3b82f6;

  --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;

  --radius: 4px;
  --radius-lg: 8px;
  --gap-xs: 0.35rem;
  --gap-sm: 0.6rem;
  --gap-md: 1rem;
  --gap-lg: 1.5rem;
  --gap-xl: 2rem;

  --max-w: 1100px;
}

/* ----- Reset ----- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  font-size:15px;
}
img{max-width:100%;height:auto}
a{color:var(--amber);text-decoration:none;transition:color .15s}
a:hover{color:#fbbf24;text-decoration:underline}

/* ----- Skip Link ----- */
.skip-link{position:absolute;top:-100px;left:1rem;z-index:999;background:var(--amber);color:#000;padding:.5rem 1rem;font-weight:700;font-size:.8rem;border-radius:var(--radius);transition:top .2s}
.skip-link:focus{top:.5rem}

/* ----- Shared Containers ----- */
.container{max-width:800px;margin:0 auto;padding:2rem 1rem}
.container-wide{max-width:var(--max-w);margin:0 auto;padding:1.25rem 1rem}

/* ----- Section (used on subpages) ----- */
.section{border:1px solid var(--border);padding:1.5rem;margin-bottom:1.25rem;background:var(--surface)}
.section-header{margin-bottom:1.5rem}
.section-header h2{font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:.3rem;padding:0;border:none}
.section-desc{font-size:.72rem;color:var(--muted);line-height:1.5}

/* ----- Typography (shared) ----- */
h1{font-size:1.5rem;font-weight:800;color:var(--amber)}
h2{font-size:1rem;font-weight:700;color:var(--text);margin:2rem 0 .75rem;padding-top:1.25rem;border-top:1px solid var(--border)}
h2:first-of-type{border-top:none;padding-top:0}
h3{font-size:.8rem;font-weight:700;color:var(--text)}
p,li{font-size:.8rem;color:var(--muted);margin-bottom:.75rem}
ul{padding-left:1.25rem;margin-bottom:.75rem}
li{margin-bottom:.35rem}

/* ----- Page Meta (subpages) ----- */
.page-meta{font-size:.7rem;color:var(--muted);margin-bottom:2rem}

/* ============================================================
   PROMO BANNER — Sticky, high-impact, mobile-optimized
   ============================================================ */
.promo-banner{
  background:linear-gradient(135deg, #1a1040 0%, #1a1a50 30%, #102050 60%, #1a1040 100%);
  border-bottom:1px solid rgb(255 152 0 / 0.35);
  position:sticky;top:0;z-index:101;
}
.promo-banner-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;align-items:center;justify-content:center;gap:.8rem;
  padding:.75rem 1rem;
}
.promo-badge{
  font-size:.62rem;font-weight:700;color:#64b5f6;
  white-space:nowrap;flex-shrink:0;
}
.promo-text{
  font-size:.78rem;color:#64b5f6;white-space:nowrap;
}
.promo-text strong{color:#fff}
.promo-sub{
  font-size:.78rem;color:#64b5f6;white-space:nowrap;
}
.promo-row2{
  display:inline-flex;align-items:center;gap:.8rem;
}
.promo-cta{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.4rem .9rem;
  background:linear-gradient(135deg, #ff6d00, #ff9100);color:#fff;
  font-size:.7rem;font-weight:800;
  border-radius:4px;text-decoration:none;
  white-space:nowrap;flex-shrink:0;
  transition:all .15s;
  animation:promo-pulse 2s infinite;
}
.promo-cta:hover{
  background:#fff;color:#ff6d00;
  text-decoration:none;transform:scale(1.04);
  animation:none;
}
@keyframes promo-pulse{
  0%,100%{box-shadow:0 0 0 0 rgb(255 109 0 / 0.7)}
  50%{box-shadow:0 0 0 8px rgb(255 109 0 / 0)}
}

/* Desktop: add breathing room */
@media(min-width:601px){
  .promo-banner-inner{padding:.85rem 1rem}
  .promo-text{font-size:.82rem}
  .promo-cta{font-size:.72rem;padding:.45rem 1rem}
}

/* Mobile: row1 badge+text, row2 deposit+CTA */
@media(max-width:600px){
  .promo-banner-inner{
    flex-wrap:wrap;gap:.3rem .5rem;
    padding:.5rem;justify-content:center;
  }
  .promo-badge{font-size:.55rem}
  .promo-text{font-size:.62rem;white-space:nowrap}
  .promo-row2{
    flex-basis:100%;justify-content:center;gap:.4rem;
  }
  .promo-sub{font-size:.58rem}
  .promo-cta{font-size:.6rem;padding:.3rem .6rem}
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header{border-bottom:1px solid var(--border);padding:.85rem 1.5rem;background:var(--surface)}
.header-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.header-brand{font-size:.82rem;font-weight:800;color:var(--amber);white-space:nowrap;text-decoration:none;letter-spacing:-.01em}
.header-brand:hover{text-decoration:none;color:#fbbf24}
.header-nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.header-nav a{font-size:.72rem;color:var(--muted);transition:color .15s;letter-spacing:-.01em}
.header-nav a:hover{color:var(--text);text-decoration:none}
.header-nav a[aria-current="page"]{color:var(--amber);font-weight:600}

/* ============================================================
   HERO — Clean, wide, authoritative
   ============================================================ */
.hero{
  border-bottom:1px solid var(--border);
  padding:2rem 1.5rem;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
.hero-inner{max-width:var(--max-w);margin:0 auto;text-align:center}
.hero-badge-row{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-bottom:1rem}
.status-indicator{width:7px;height:7px;background:var(--green);border-radius:50%;flex-shrink:0;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgb(34 197 94/.4)}50%{opacity:.6;box-shadow:0 0 0 6px rgb(34 197 94/0)}}
.hero-status{font-size:.7rem;font-weight:600;color:var(--green);letter-spacing:.02em}
.hero h1{font-size:clamp(1.5rem, 4vw, 2.25rem);font-weight:800;color:var(--text);line-height:1.15;margin-bottom:.6rem;letter-spacing:-.02em}
.hero-subtitle{font-size:.85rem;color:var(--text-secondary);max-width:620px;margin:0 auto 1.25rem;line-height:1.55}
.hero-ctas{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.cta-primary{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.65rem 1.4rem;
  background:var(--amber);color:#000;
  font-weight:700;font-size:.78rem;
  border-radius:var(--radius);
  text-decoration:none;transition:all .15s;
}
.cta-primary:hover{background:#fbbf24;color:#000;text-decoration:none;transform:translateY(-1px)}
.cta-secondary{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.65rem 1.4rem;
  background:transparent;color:var(--text);
  border:1px solid var(--border-light);
  font-weight:600;font-size:.78rem;
  border-radius:var(--radius);
  text-decoration:none;transition:all .15s;
}
.cta-secondary:hover{background:var(--surface-raised);border-color:var(--text-secondary);text-decoration:none}

/* ============================================================
   TIER TABS — Free vs Premium
   ============================================================ */
.tier-tabs{
  display:flex;gap:0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;margin-bottom:1.25rem;
}
.tier-tab{
  flex:1;padding:.7rem 1rem;
  font-size:.75rem;font-weight:700;
  background:var(--bg);color:var(--muted);
  border:none;cursor:pointer;
  transition:all .15s;text-align:center;
  font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:.3rem;
}
.tier-tab.active{background:var(--surface);color:var(--text)}
.tier-tab:first-child.active{border-right:2px solid var(--green)}
.tier-tab:last-child.active{border-left:2px solid var(--amber)}
.tier-tab:hover:not(.active){color:var(--text);background:var(--surface)}
.tier-icon{font-size:.85rem}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ============================================================
   TIMEFRAME SUB-TABS
   ============================================================ */
.tf-tabs{
  display:flex;gap:.25rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;margin-bottom:.75rem;
  padding:.2rem;
}
.tf-tab-btn{
  flex:1;padding:.45rem .4rem;
  font-size:.68rem;font-weight:700;
  background:transparent;color:var(--muted);
  border:none;border-radius:2px;cursor:pointer;
  transition:all .15s;text-align:center;
  font-family:inherit;letter-spacing:.01em;
}
.tf-tab-btn.active{background:var(--surface-raised);color:var(--amber)}
.tf-tab-btn:hover:not(.active){color:var(--text)}
.tf-panel{display:none}
.tf-panel.active{display:block}

.tf-meta{
  display:flex;gap:1rem;align-items:center;
  margin-bottom:.75rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--border-light);
}
.tf-count{font-size:.7rem;font-weight:700;color:var(--text)}
.tf-active{font-size:.65rem;color:var(--green)}
.tf-expiry{font-size:.62rem;color:var(--muted);margin-left:auto}

/* ============================================================
   SIGNAL GRID & CARDS — THE KEY DIFFERENTIATOR
   ============================================================ */
.signal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:.5rem;
}

.signal-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.1rem;
  transition:border-color .2s, box-shadow .2s;
}
.signal-card:hover{
  border-color:var(--border-light);
  box-shadow:0 2px 12px rgb(0 0 0/.3);
}

/* Card Header — pair + price */
.card-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:.75rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--border-light);
}
.pair-info{display:flex;flex-direction:column;gap:.15rem}
.pair-symbol{font-size:.9rem;font-weight:800;color:var(--text);letter-spacing:-.02em}
.pair-market{font-size:.55rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.price-info{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.price-value{font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--text-secondary)}
.price-change{font-family:var(--font-mono);font-size:.62rem;font-weight:700}
.price-change.positive{color:var(--green)}
.price-change.negative{color:var(--red)}

/* Signal Direction + Strength */
.card-signal{
  display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;
}
.direction-badge{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.2rem .55rem;
  border:1.5px solid;
  border-radius:var(--radius);
  font-size:.68rem;font-weight:800;
  letter-spacing:.03em;
  font-family:var(--font-mono);
}
.direction-call{border-color:var(--green-border);color:var(--green);background:var(--green-soft)}
.direction-put{border-color:var(--red-border);color:var(--red);background:var(--red-soft)}
.direction-wait{border-color:var(--amber-border);color:var(--amber);background:var(--amber-soft)}

.strength-tag{
  font-size:.62rem;font-weight:700;
  padding:.15rem .45rem;border-radius:100px;
  text-transform:uppercase;letter-spacing:.03em;
}
.strength-strong{background:var(--green-soft);color:var(--green);border:1px solid var(--green-border)}
.strength-moderate{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber-border)}
.strength-weak{background:transparent;color:var(--muted);border:1px solid var(--border)}
.strength-neutral{background:transparent;color:var(--muted);border:1px solid var(--border)}

/* Confidence Meter — visual progress bar */
.confidence-meter{
  display:flex;align-items:center;gap:.5rem;margin-bottom:.65rem;
}
.confidence-track{
  flex:1;height:5px;background:var(--border);
  border-radius:3px;overflow:hidden;
}
.confidence-fill{height:100%;border-radius:3px;transition:width .4s ease-out}
.confidence-high{background:linear-gradient(90deg,var(--green),#4ade80)}
.confidence-mid{background:linear-gradient(90deg,var(--amber),#fbbf24)}
.confidence-low{background:linear-gradient(90deg,var(--muted),var(--muted-light))}
.confidence-value{
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  color:var(--muted);white-space:nowrap;
}

/* Trader Insight — THE KEY DIFFERENTIATOR from signal-site */
.card-insight{
  background:var(--surface-raised);
  border:1px solid var(--border-light);
  border-radius:var(--radius);
  padding:.65rem .75rem;
  margin-bottom:.55rem;
}
.insight-label{
  display:block;font-size:.55rem;font-weight:700;
  color:var(--amber);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:.25rem;
}
.insight-text{
  font-size:.68rem;color:var(--text-secondary);line-height:1.55;
  margin:0;
}

/* Trading Tip */
.card-tip{
  display:flex;align-items:flex-start;gap:.35rem;
  background:var(--amber-soft);
  border:1px solid var(--amber-border);
  border-radius:var(--radius);
  padding:.4rem .6rem;
}
.tip-icon{font-size:.7rem;flex-shrink:0;line-height:1.4}
.tip-text{font-size:.62rem;color:var(--amber);font-weight:600;line-height:1.45}

/* Empty state */
.signal-empty{
  grid-column:1/-1;
  text-align:center;padding:3rem 1rem;
  border:1px dashed var(--border);
  border-radius:var(--radius-lg);
}
.signal-empty p{font-size:.8rem;color:var(--muted);margin-bottom:.25rem}
.signal-empty span{font-size:.65rem;color:var(--muted-light)}

/* ============================================================
   PREMIUM SECTION
   ============================================================ */
.premium-section{
  text-align:center;padding:2rem;
  border:1px solid var(--amber-border);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--amber-soft), var(--surface));
}
.premium-header{margin-bottom:1.25rem}
.premium-icon{font-size:2.5rem;display:block;margin-bottom:.5rem}
.premium-header h3{font-size:1rem;font-weight:800;color:var(--text);margin-bottom:.4rem}
.premium-header p{font-size:.75rem;color:var(--text-secondary);max-width:500px;margin:0 auto;line-height:1.5}

.premium-timeframes{margin-bottom:1.25rem}
.premium-subtitle{display:block;font-size:.65rem;font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}
.tf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(65px,1fr));gap:.35rem;max-width:520px;margin:0 auto}
.tf-chip{
  padding:.35rem .3rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  text-align:center;font-size:.62rem;font-weight:700;
  font-family:var(--font-mono);
  color:var(--amber);
  transition:all .15s;
}
.tf-chip:hover{border-color:var(--amber);color:#fbbf24}

.premium-features{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.75rem 1.5rem;margin-bottom:1.5rem;
}
.premium-feature{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:var(--text-secondary)}
.pf-check{color:var(--green);font-weight:700;font-size:.8rem}

.premium-cta{margin-top:1rem}
.cta-large{padding:.75rem 2rem;font-size:.85rem}
.premium-note{font-size:.65rem;color:var(--muted);margin-top:.5rem}

/* ============================================================
   FEATURES GRID
   ============================================================ */
.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:.6rem;
}
.feature-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  transition:border-color .15s;
}
.feature-card:hover{border-color:var(--border-light)}
.feature-num{
  display:block;
  font-family:var(--font-mono);
  font-size:.6rem;font-weight:700;
  color:var(--amber);margin-bottom:.5rem;
  letter-spacing:.04em;
}
.feature-card h3{font-size:.78rem;font-weight:700;color:var(--text);margin-bottom:.35rem}
.feature-card p{font-size:.7rem;color:var(--text-secondary);line-height:1.55;margin:0}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.table-wrapper{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.compare-table{width:100%;border-collapse:collapse;font-size:.72rem}
.compare-table caption{font-size:.58rem;color:var(--muted);padding:.5rem 1rem;text-align:left;caption-side:bottom}
.compare-table th,.compare-table td{padding:.65rem .85rem;text-align:center;border-bottom:1px solid var(--border-light)}
.compare-table thead th{
  background:var(--surface);
  font-size:.62rem;font-weight:700;
  color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;border-bottom:2px solid var(--border);
}
.compare-table tbody tr:hover{background:var(--surface-raised)}
.compare-table th[scope="row"]{
  text-align:left;font-weight:600;
  color:var(--text);font-size:.7rem;
}
.highlight{color:var(--amber);font-weight:800}
.dim{color:var(--muted);font-weight:400}

/* ============================================================
   FAQ
   ============================================================ */
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  padding:.8rem 0;font-size:.78rem;font-weight:700;
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
  color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.1rem;color:var(--muted);font-weight:300;transition:transform .2s}
.faq details[open] summary::after{content:'−';transform:rotate(180deg)}
.faq-answer{padding:0 0 .8rem;font-size:.72rem;color:var(--text-secondary);line-height:1.6}
.faq-answer p{margin-bottom:.5rem}
.faq-answer ul{padding-left:1.25rem;margin-bottom:.5rem}
.faq-answer li{font-size:.7rem;margin-bottom:.25rem}

/* ============================================================
   FORMS (Contact)
   ============================================================ */
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:.7rem;font-weight:600;color:var(--text);margin-bottom:.3rem}
.form-input,.form-select,.form-textarea{
  width:100%;padding:.6rem .75rem;
  background:var(--bg);border:1px solid var(--border);
  color:var(--text);font-size:.75rem;font-family:inherit;
  border-radius:var(--radius);transition:border-color .15s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--amber)}
.form-textarea{resize:vertical;min-height:100px}
.form-input::placeholder{color:var(--muted)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--border);padding:1.25rem 0;font-size:.65rem;color:var(--muted);margin-top:2rem}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;bottom:1rem;right:1rem;
  padding:.6rem 1rem;background:var(--green);color:#000;
  font-size:.7rem;font-weight:700;
  border-radius:var(--radius);
  opacity:0;transform:translateY(10px);
  transition:all .3s;pointer-events:none;z-index:99;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.error{background:var(--red)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px){
  .hero{padding:1.5rem 1rem}
  .hero h1{font-size:1.35rem}
  .hero-subtitle{font-size:.75rem}
  .hero-ctas{flex-direction:column;align-items:center}
  .signal-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .premium-features{flex-direction:column;align-items:center;gap:.5rem}
  .tier-tabs{flex-direction:column}
  .tier-tab:first-child.active{border-right:none;border-bottom:2px solid var(--green)}
  .tier-tab:last-child.active{border-left:none;border-top:2px solid var(--amber)}
}

@media(max-width:480px){
  .site-header{padding:.7rem 1rem}
  .header-nav{gap:.75rem}
  .header-nav a{font-size:.65rem}
  .header-brand{font-size:.75rem}
  .container,.container-wide{padding:1rem .75rem}
  .signal-card{padding:.85rem}
  .card-header{flex-direction:column;gap:.4rem}
  .price-info{align-items:flex-start}
  .card-signal{flex-wrap:wrap}
  .confidence-meter{flex-direction:column;align-items:stretch;gap:.3rem}
  .compare-table{font-size:.62rem}
  .compare-table th,.compare-table td{padding:.4rem .5rem}
}