/* Mode Tabs */
.mode-tabs{display:flex;gap:.5rem;margin-bottom:0}
.mode-tab{flex:1;padding:.7rem 1rem;background:var(--bg2);border:1px solid var(--border);border-radius:10px 10px 0 0;font-size:.9rem;font-weight:600;cursor:pointer;color:var(--muted);transition:all .2s;border-bottom:none}
.mode-tab.active{background:var(--bg2);color:var(--text);border-color:var(--border);position:relative}
.mode-tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--bg2)}
.mode-tab:hover:not(.active){background:var(--bg3)}

/* Margin Visual Bar */
.margin-visual{margin:1.5rem 0}
.margin-bar-wrap{background:var(--bg3);border-radius:8px;height:32px;position:relative;overflow:hidden;border:1px solid var(--border)}
.margin-bar{height:100%;border-radius:7px;background:var(--gradient);transition:width .5s ease;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;min-width:40px}
.margin-bar-label{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-top:.3rem}

/* Margin Comparison */
.margin-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1rem}
@media(max-width:600px){.margin-compare{grid-template-columns:1fr}}
.margin-compare-item{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:1rem;text-align:center}
.margin-compare-item .mc-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.margin-compare-item .mc-value{font-size:1.6rem;font-weight:700;margin:.25rem 0;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.margin-compare-item .mc-amount{font-size:.85rem;color:var(--muted)}

/* Industry Grid */
.industry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-top:1rem}
.industry-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:1rem}
.industry-card h3{font-size:.9rem;margin-bottom:.5rem}
.ind-stat{font-size:.85rem;color:var(--muted);margin:.2rem 0}
.ind-stat strong{color:var(--text)}

/* Reference Table */
.ref-table{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:1rem}
.ref-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:.6rem 1rem;border-bottom:1px solid var(--border);font-size:.9rem}
.ref-row:last-child{border:none}
.ref-header{background:var(--bg3);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.ref-note{font-size:.85rem;color:var(--muted);margin-top:.75rem}

/* Detailed results breakdown */
.detail-breakdown{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:1.25rem;margin-top:1rem}
.detail-breakdown h3{font-size:1rem;margin-bottom:.75rem}
.db-row{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.9rem}
.db-row:last-child{border:none}
.db-row.db-total{font-weight:700;border-top:2px solid var(--border);padding-top:.6rem;margin-top:.2rem}
.db-row .db-val{font-weight:600}
.db-row .db-val.positive{color:#00b96b}
.db-row .db-val.negative{color:#e74c3c}

/* Reverse mode result */
.reverse-result{text-align:center;padding:2rem;background:var(--bg2);border:1px solid var(--border);border-radius:12px;margin-top:1.5rem}
.reverse-result .big-number{font-size:2.5rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.reverse-result .sub{font-size:.9rem;color:var(--muted);margin-top:.5rem}

/* Tools Grid */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin-top:1rem}
.tool-link{display:block;padding:.85rem 1rem;background:var(--bg2);border:1px solid var(--border);border-radius:8px;font-size:.9rem;font-weight:500;transition:border-color .2s}
.tool-link:hover{border-color:var(--accent1);text-decoration:none}

/* CTA */
.cta-box{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:2rem;text-align:center;margin:2rem 0}
.cta-box h2{font-size:1.3rem;margin-bottom:.5rem}
.cta-box p{color:var(--muted);font-size:.95rem;max-width:500px;margin:0 auto}
.cta-buttons{display:flex;gap:.75rem;justify-content:center;margin-top:1.25rem;flex-wrap:wrap}
.cta-btn{display:inline-block;padding:.7rem 1.5rem;background:var(--gradient);color:#fff;border-radius:8px;font-weight:600;font-size:.9rem;transition:opacity .2s}
.cta-btn:hover{opacity:.9;text-decoration:none;color:#fff}
.cta-btn-secondary{background:var(--bg3);color:var(--text)}
.cta-btn-secondary:hover{color:var(--text)}

/* FAQ */
.faq-list{margin-top:1rem}
.faq-item{background:var(--bg2);border:1px solid var(--border);border-radius:8px;margin-bottom:.5rem}
.faq-item summary{padding:.85rem 1rem;cursor:pointer;font-weight:600;font-size:.95rem;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:'＋';margin-right:.5rem;color:var(--accent1)}
.faq-item[open] summary::before{content:'－'}
.faq-item p{padding:0 1rem .85rem;font-size:.9rem;color:var(--muted);line-height:1.6}

/* SEO Content */
.seo-content h3{margin-top:1.25rem;margin-bottom:.5rem}
.seo-content p{color:var(--muted);font-size:.95rem;margin-bottom:.75rem}
.content-section{margin:2.5rem 0}
.content-section h2{font-size:1.3rem;margin-bottom:.5rem}