/* ============================================
   tools.zhigupu.com — Shared Styles
   ============================================ */

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}

/* Body */
body{
  min-height:100vh;
  background:linear-gradient(135deg,#0a0e17 0%,#111827 50%,#0a0e17 100%);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif;
  color:#f9fafb;
  line-height:1.6;
  padding:20px;
}

/* Nav */
.nav{max-width:800px;margin:0 auto 20px}
.nav a{color:#10b981;text-decoration:none;font-size:0.9em}
.nav a:hover{text-decoration:underline}

/* Container */
.container{max-width:800px;margin:0 auto}

/* Typography */
h1{
  font-size:2em;margin-bottom:8px;
  background:linear-gradient(135deg,#10b981,#3b82f6);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.subtitle{color:#9ca3af;margin-bottom:30px}

/* Card */
.card{
  background:rgba(17,24,39,0.8);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;padding:28px;margin-bottom:20px;
}

/* Form */
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:0.9em;color:#d1d5db;margin-bottom:6px}
.form-group input,.form-group textarea{
  width:100%;padding:12px 16px;border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(0,0,0,0.3);color:#f9fafb;font-size:1.1em;
  outline:none;transition:border-color 0.3s;
}
.form-group input:focus,.form-group textarea:focus{border-color:#10b981}
.form-group textarea{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;
  resize:vertical;min-height:140px;font-size:1rem;line-height:1.6;
}
.form-group .hint{font-size:0.8em;color:#6b7280;margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Button */
.btn{
  width:100%;padding:14px;border:none;border-radius:10px;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;font-size:1.1em;font-weight:600;cursor:pointer;
  transition:all 0.3s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(16,185,129,0.3)}

/* Result */
.result{display:none;margin-top:20px}
.result.show{display:block}
.result-value{font-size:3em;font-weight:700;text-align:center;margin:16px 0}
.result-label{text-align:center;color:#9ca3af;font-size:0.9em}
.result-main{text-align:center;padding:24px;background:rgba(0,0,0,0.2);border-radius:12px;margin-bottom:16px}
.result-main .label{font-size:0.9em;color:#9ca3af}
.result-main .value{font-size:2.5em;font-weight:700;margin:8px 0}

/* Verdict */
.verdict{text-align:center;padding:12px;border-radius:10px;font-weight:600;font-size:1.1em;margin-top:12px}
.verdict.low,.verdict.good{background:rgba(16,185,129,0.15);color:#10b981}
.verdict.mid{background:rgba(234,179,8,0.15);color:#eab308}
.verdict.high,.verdict.bad,.verdict.danger{background:rgba(239,68,68,0.15);color:#ef4444}

/* Knowledge */
.knowledge{margin-top:20px}
.knowledge h3{font-size:1.1em;margin-bottom:12px;color:#d1d5db}
.knowledge ul{padding-left:20px;color:#9ca3af;font-size:0.9em}
.knowledge li{margin-bottom:8px}

/* CTA Box */
.cta-box{
  text-align:center;padding:30px;
  background:rgba(16,185,129,0.08);
  border:1px solid rgba(16,185,129,0.2);
  border-radius:12px;margin-top:20px;
}
.cta-box p{color:#9ca3af;margin-bottom:12px}
.cta-box a{
  display:inline-block;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;padding:10px 24px;border-radius:8px;
  text-decoration:none;font-weight:600;
}

/* Footer */
footer{text-align:center;padding:30px;color:#6b7280;font-size:0.85em}
footer a{color:#10b981;text-decoration:none}

/* ============================================
   Index Page
   ============================================ */
.hero{text-align:center;padding:60px 20px 40px}
.hero h1{font-size:2.5em;margin-bottom:12px}
.hero p{color:#9ca3af;font-size:1.1em;max-width:600px;margin:0 auto}

.tools-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;max-width:1200px;margin:0 auto;padding:20px;
}
.tool-card{
  background:rgba(17,24,39,0.8);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;padding:28px;
  transition:all 0.3s;text-decoration:none;color:inherit;display:block;
}
.tool-card:hover{
  border-color:#10b981;transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(16,185,129,0.15);
}
.tool-icon{font-size:2.2em;margin-bottom:12px}
.tool-card h2{font-size:1.2em;margin-bottom:8px;color:#f9fafb}
.tool-card p{color:#9ca3af;font-size:0.9em;line-height:1.5}
.tool-tag{
  display:inline-block;background:rgba(16,185,129,0.15);
  color:#10b981;padding:2px 8px;border-radius:4px;
  font-size:0.75em;margin-top:10px;
}
.cta-section{text-align:center;padding:60px 20px;max-width:600px;margin:0 auto}
.cta-section h2{font-size:1.5em;margin-bottom:12px}
.cta-section p{color:#9ca3af;margin-bottom:20px}
.cta-btn{
  display:inline-block;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;padding:14px 36px;border-radius:10px;
  text-decoration:none;font-weight:600;font-size:1.05em;
  transition:all 0.3s;
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(16,185,129,0.3)}

/* ============================================
   Language Switcher
   ============================================ */
.lang-switch{
  position:fixed;top:16px;right:16px;z-index:100;
  background:rgba(17,24,39,0.9);border:1px solid rgba(255,255,255,0.15);
  border-radius:8px;overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.lang-switch button{
  background:none;border:none;color:#9ca3af;
  padding:8px 14px;cursor:pointer;font-size:0.85em;
  transition:all 0.2s;
}
.lang-switch button.active{color:#10b981;background:rgba(16,185,129,0.1)}
.lang-switch button:hover{color:#f9fafb}

/* ============================================
   PE Bar Gauge
   ============================================ */
.result-bar{
  height:8px;border-radius:4px;background:rgba(255,255,255,0.1);
  margin:16px 0;position:relative;overflow:hidden;
}
.result-bar-fill{height:100%;border-radius:4px;transition:width 0.5s}

/* ============================================
   Dividend Compare
   ============================================ */
.compare{text-align:center;padding:16px;background:rgba(0,0,0,0.2);border-radius:10px;margin-top:12px}
.compare .label{font-size:0.85em;color:#9ca3af;margin-bottom:8px}
.compare .items{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.compare .item{text-align:center}
.compare .item .name{font-size:0.8em;color:#6b7280}
.compare .item .val{font-size:1.2em;font-weight:600}
.compare .item .val.better{color:#10b981}
.compare .item .val.worse{color:#ef4444}

/* ============================================
   ROE DuPont
   ============================================ */
.formula-box{text-align:center;padding:20px;background:rgba(0,0,0,0.3);border-radius:12px;margin-bottom:16px}
.formula-box .formula{font-size:1.3em;font-weight:600;color:#10b981}
.factor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.factor{text-align:center;padding:16px;background:rgba(0,0,0,0.2);border-radius:10px}
.factor .label{font-size:0.8em;color:#9ca3af;margin-bottom:4px}
.factor .value{font-size:1.5em;font-weight:700}
.factor .value.good{color:#10b981}
.factor .value.mid{color:#eab308}
.factor .value.bad{color:#ef4444}
.roe-total{text-align:center;font-size:2em;font-weight:700;color:#10b981;margin:16px 0}

/* ============================================
   Stats Grid (Compound Interest)
   ============================================ */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.stat{text-align:center;padding:16px;background:rgba(0,0,0,0.2);border-radius:10px}
.stat .label{font-size:0.8em;color:#9ca3af;margin-bottom:4px}
.stat .value{font-size:1.4em;font-weight:700}
.stat .value.green{color:#10b981}
.stat .value.blue{color:#3b82f6}
.stat .value.yellow{color:#eab308}
.chart-container{position:relative;width:100%;height:280px;margin-top:16px}
.chart-container canvas{width:100%!important;height:100%!important}
.rule72{text-align:center;padding:16px;background:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.2);border-radius:10px;margin-top:16px}
.rule72 .title{font-weight:600;color:#eab308;margin-bottom:4px}
.rule72 .desc{font-size:0.9em;color:#9ca3af}

/* ============================================
   Detail Grid (Position)
   ============================================ */
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.detail{padding:16px;background:rgba(0,0,0,0.2);border-radius:10px;text-align:center}
.detail .label{font-size:0.8em;color:#9ca3af;margin-bottom:4px}
.detail .value{font-size:1.2em;font-weight:600}

/* ============================================
   Quiz (Financial Checklist)
   ============================================ */
.progress-bar{width:100%;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;margin-bottom:24px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,#10b981,#3b82f6);border-radius:3px;transition:width 0.3s}
.progress-text{font-size:0.85em;color:#6b7280;margin-bottom:8px}
.question{display:none}
.question.active{display:block}
.q-number{font-size:0.85em;color:#10b981;margin-bottom:8px;font-weight:600}
.q-text{font-size:1.15em;font-weight:600;margin-bottom:8px;color:#f9fafb}
.q-desc{font-size:0.9em;color:#9ca3af;margin-bottom:20px;line-height:1.5}
.btn-group{display:flex;gap:12px}
.btn-yes,.btn-no{flex:1;padding:14px;border:none;border-radius:10px;font-size:1.05em;font-weight:600;cursor:pointer;transition:all 0.3s}
.btn-yes{background:rgba(239,68,68,0.15);color:#ef4444;border:1px solid rgba(239,68,68,0.3)}
.btn-yes:hover{background:rgba(239,68,68,0.3)}
.btn-no{background:rgba(16,185,129,0.15);color:#10b981;border:1px solid rgba(16,185,129,0.3)}
.btn-no:hover{background:rgba(16,185,129,0.3)}
.score-circle{text-align:center;margin:20px 0}
.score-circle .ring{width:140px;height:140px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-direction:column;border:6px solid}
.score-circle .ring.low{border-color:#10b981}
.score-circle .ring.mid{border-color:#eab308}
.score-circle .ring.high{border-color:#ef4444}
.score-circle .num{font-size:2.5em;font-weight:700}
.score-circle .label{font-size:0.85em;color:#9ca3af}
.risk-list{margin-top:16px}
.risk-item{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:8px;margin-bottom:8px;font-size:0.9em}
.risk-item.warn{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2)}
.risk-item.ok{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.2)}
.risk-item .icon{font-size:1.2em;flex-shrink:0}
.restart-btn{width:100%;padding:14px;border:none;border-radius:10px;background:rgba(255,255,255,0.1);color:#f9fafb;font-size:1em;font-weight:600;cursor:pointer;margin-top:16px;border:1px solid rgba(255,255,255,0.2)}
.restart-btn:hover{background:rgba(255,255,255,0.2)}

/* ============================================
   Responsive
   ============================================ */
@media(max-width:600px){
  .form-row{grid-template-columns:1fr}
  .factor-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.8em}
  h1{font-size:1.6em}
}