/*
 * Industrial 模板 - 工业金属风
 *
 * 设计语言：
 * - 深灰钢板底 + 铁锈橙点缀
 * - 铆钉螺栓边框 + 警告条纹
 * - 等宽工业字体 + 全大写标签
 * - 仪表盘数字读数
 */

:root {
    --steel: #4a5568;
    --steel-light: #718096;
    --iron: #2d3748;
    --rust: #c05621;
    --rust-light: var(--primary);
    --caution: #ecc94b;
    --plate: #1a202c;
    --ink: #e2e8f0;
    --ink-dim: #a0aec0;
    --rivet: #718096;
    --mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
    --sans: 'Inter', 'Segoe UI', 'PingFang SC', sans-serif;
}

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

body {
    font-family: var(--sans);
    background:
        radial-gradient(ellipse at 30% 20%, rgba(237, 137, 54, 0.04), transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(74, 85, 104, 0.06), transparent 50%),
        var(--plate);
    color: var(--ink);
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 钢板纹理 */
body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 9999;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(255,255,255,0.008) 3px, rgba(255,255,255,0.008) 4px
    );
}

/* ========== Caution Stripe ========== */
.ind-caution-stripe {
    height: 5px;
    background: repeating-linear-gradient(
        45deg,
        var(--caution) 0px, var(--caution) 8px,
        var(--iron) 8px, var(--iron) 16px
    );
}

/* ========== Header ========== */
.ind-header {
    background: linear-gradient(180deg, var(--iron), rgba(26, 32, 44, 0.95));
    border-bottom: 2px solid var(--steel);
    position: sticky; top: 0; z-index: 100;
}
.ind-header-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 12px 32px;
    display: flex; align-items: center; gap: 20px;
    flex-wrap: wrap;
}

/* Brand Plate with Rivets */
.ind-brand { text-decoration: none; }
.ind-brand-plate {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 20px;
    background: linear-gradient(180deg, var(--iron), var(--plate));
    border: 2px solid var(--steel);
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.ind-rivet {
    position: absolute;
    width: 6px; height: 6px;
    background: var(--rivet);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.1);
}
.ind-rivet.tl { top: 4px; left: 6px; }
.ind-rivet.tr { top: 4px; right: 6px; }
.ind-rivet.bl { bottom: 4px; left: 6px; }
.ind-rivet.br { bottom: 4px; right: 6px; }
.ind-brand-icon { font-size: 1.3em; }
.ind-brand-name {
    font-family: var(--mono);
    font-size: 1.1em; font-weight: 700;
    color: var(--ink); letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Gauge */
.ind-gauge {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 14px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--steel);
    font-family: var(--mono); font-size: 0.7em;
    flex-shrink: 0;
}
.ind-gauge-label {
    color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.1em;
}
.ind-gauge-value {
    color: #68d391; font-weight: 700;
}
.ind-gauge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #68d391;
    box-shadow: 0 0 6px #68d391;
    animation: ind-blink 2s step-end infinite;
}
@keyframes ind-blink { 50% { opacity: 0.3; } }

/* Nav */
.ind-nav { display: flex; gap: 2px; margin-left: auto; }
.ind-nav a {
    padding: 8px 18px;
    text-decoration: none;
    color: var(--ink-dim);
    font-family: var(--mono); font-size: 0.8em; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.ind-nav a:hover {
    border-color: var(--steel); color: var(--ink);
    background: rgba(255,255,255,0.03);
}
.ind-nav a.active {
    border-color: var(--rust-light); color: var(--rust-light);
    background: rgba(237, 137, 54, 0.08);
}

/* ========== Main ========== */
.ind-main {
    flex: 1; max-width: 1200px; margin: 0 auto;
    padding: 36px 32px 48px; width: 100%;
}

/* ========== Converter ========== */
.converter-box {
    background: linear-gradient(180deg, var(--iron), rgba(26, 32, 44, 0.8));
    border: 2px solid var(--steel);
    padding: 32px 28px; margin-bottom: 28px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 20px rgba(0,0,0,0.5);
    position: relative;
}
.converter-box::before {
    content: 'TERMINAL';
    position: absolute; top: -9px; left: 20px;
    background: var(--plate);
    padding: 0 10px;
    font-family: var(--mono); font-size: 0.55em; font-weight: 700;
    color: var(--steel-light); letter-spacing: 0.15em;
}
.converter-title {
    font-family: var(--mono); font-size: 1.1em; font-weight: 700;
    color: var(--rust-light); text-transform: uppercase;
    letter-spacing: 0.1em; margin-bottom: 24px;
    text-align: center;
}
.converter-row {
    display: flex; gap: 16px; align-items: flex-end;
    flex-wrap: wrap; justify-content: center;
}
.converter-field { flex: 1; min-width: 140px; }
.converter-field label {
    display: block;
    font-family: var(--mono); font-size: 0.62em; font-weight: 700;
    color: var(--steel-light); text-transform: uppercase;
    letter-spacing: 0.12em; margin-bottom: 8px;
}
.converter-field input,
.converter-field select {
    width: 100%; padding: 12px 16px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--steel);
    font-family: var(--mono); font-size: 1em;
    color: var(--ink); transition: all 0.15s;
}
.converter-field input:focus,
.converter-field select:focus {
    outline: none; border-color: var(--rust-light);
    box-shadow: 0 0 0 2px rgba(237, 137, 54, 0.15);
}
.converter-field input { font-size: 1.3em; font-weight: 700; text-align: right; }
.swap-btn {
    width: 48px; height: 48px;
    border: 1px solid var(--steel);
    background: rgba(0,0,0,0.4);
    color: var(--rust-light); cursor: pointer;
    font-size: 1.2em; font-family: var(--mono);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0; margin-bottom: 2px;
}
.swap-btn:hover {
    border-color: var(--rust-light); background: rgba(237,137,54,0.1);
    box-shadow: 0 0 12px rgba(237,137,54,0.2);
}
.rate-display {
    text-align: center; margin-top: 22px;
    padding: 16px 20px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--steel);
}
.rate-display .rate-value {
    font-family: var(--mono); font-size: 1.3em; font-weight: 700;
    color: var(--rust-light);
}
.rate-display .rate-label {
    font-family: var(--mono); font-size: 0.68em;
    color: var(--ink-dim); margin-top: 4px;
}
.result-box {
    text-align: center; margin-top: 18px; padding: 20px;
    background: rgba(192, 86, 33, 0.08);
    border: 1px solid var(--rust);
    display: none;
    box-shadow: inset 0 0 20px rgba(192,86,33,0.05);
}
.result-box.show { display: block; }
.result-box .result-value {
    font-family: var(--mono); font-size: 1.8em; font-weight: 700;
    color: var(--rust-light);
}
.result-box .result-detail {
    font-family: var(--mono); font-size: 0.78em;
    color: var(--ink-dim); margin-top: 8px;
}

/* ========== Card ========== */
.card {
    background: linear-gradient(180deg, var(--iron), rgba(26,32,44,0.7));
    border: 2px solid var(--steel);
    padding: 24px 28px; margin-bottom: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.card-title {
    font-family: var(--mono); font-size: 0.95em; font-weight: 700;
    color: var(--rust-light); text-transform: uppercase;
    letter-spacing: 0.08em; margin-bottom: 16px;
    padding-bottom: 12px; border-bottom: 1px solid var(--steel);
    display: flex; align-items: center; gap: 8px;
}
.card h1, .card h2 {
    font-family: var(--mono); color: var(--ink);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}
.card h1 { font-size: 1.3em; }
.card h2 { font-size: 1.1em; }
.card p { color: var(--ink-dim); }

/* ========== Breadcrumb ========== */
.breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 0.72em;
    color: var(--ink-dim); margin-bottom: 16px;
}
.breadcrumb a { color: var(--rust-light); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }

/* ========== Pairs Grid ========== */
.pairs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}
.pair-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--steel);
    text-decoration: none; color: var(--ink);
    transition: all 0.15s;
}
.pair-item:hover {
    border-color: var(--rust-light);
    background: rgba(237,137,54,0.05);
    transform: translateY(-1px);
}
.pair-info { display: flex; flex-direction: column; gap: 2px; }
.pair-name { font-family: var(--mono); font-weight: 700; font-size: 0.9em; text-transform: uppercase; }
.pair-code { font-family: var(--mono); font-size: 0.65em; color: var(--steel-light); letter-spacing: 0.06em; }
.pair-rate { font-family: var(--mono); font-weight: 700; font-size: 1em; color: var(--rust-light); }
.pair-change { font-family: var(--mono); font-size: 0.75em; font-weight: 600; }
.pair-change.up { color: #68d391; }
.pair-change.down { color: #fc8181; }

/* ========== Search ========== */
.search-box { position: relative; margin-bottom: 20px; }
.search-box input {
    width: 100%; padding: 12px 16px 12px 42px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--steel);
    font-family: var(--mono); font-size: 0.9em;
    color: var(--ink); transition: all 0.15s;
}
.search-box input:focus {
    outline: none; border-color: var(--rust-light);
}
.search-box .search-icon {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); color: var(--steel-light);
}

/* ========== Pagination ========== */
.pagination {
    display: flex; justify-content: center; gap: 4px; margin-top: 28px;
}
.pagination a, .pagination span {
    padding: 8px 16px;
    border: 1px solid var(--steel);
    text-decoration: none; color: var(--ink-dim);
    font-family: var(--mono); font-size: 0.82em;
    transition: all 0.15s; background: rgba(0,0,0,0.3);
}
.pagination a:hover { border-color: var(--rust-light); color: var(--ink); }
.pagination .current {
    background: var(--rust); color: #fff; border-color: var(--rust); font-weight: 700;
}

/* ========== Industrial Panels (SEO) ========== */
.ind-content { margin-top: 44px; }
.ind-panel {
    margin-bottom: 24px; padding: 24px 28px;
    background: linear-gradient(180deg, var(--iron), rgba(26,32,44,0.6));
    border: 1px solid var(--steel);
}
.ind-panel:last-child { margin-bottom: 0; }
.ind-panel-head {
    display: flex; align-items: center; gap: 16px; margin-bottom: 14px;
}
.ind-panel-num {
    font-family: var(--mono); font-size: 0.6em; font-weight: 700;
    color: var(--rust-light); padding: 3px 10px;
    border: 1px solid var(--steel);
    letter-spacing: 0.1em; flex-shrink: 0;
}
.ind-panel h2 {
    font-family: var(--mono); font-size: 1em; font-weight: 700;
    color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em;
}
.ind-panel p { color: var(--ink-dim); line-height: 1.8; font-size: 0.9em; }

/* ========== Footer ========== */
.ind-footer { margin-top: auto; padding: 24px 32px 28px; }
.ind-footer-plate {
    max-width: 1200px; margin: 0 auto;
    background: linear-gradient(180deg, var(--iron), rgba(26,32,44,0.9));
    border: 2px solid var(--steel);
    padding: 24px 28px;
    position: relative;
}
.ind-footer-inner { text-align: center; }
.ind-footer-links {
    display: flex; justify-content: center; gap: 12px;
    font-family: var(--mono); font-size: 0.8em; margin-bottom: 10px;
}
.ind-footer-links a { color: var(--rust-light); text-decoration: none; font-weight: 600; }
.ind-footer-links a:hover { text-decoration: underline; }
.ind-sep { color: var(--steel); }
.ind-footer-info {
    font-family: var(--mono); font-size: 0.7em;
    color: var(--ink-dim); margin-bottom: 8px;
}
.ind-footer-stamp {
    font-family: var(--mono); font-size: 0.68em; font-weight: 700;
    color: var(--steel-light); text-transform: uppercase; letter-spacing: 0.12em;
}

/* ========== Shared Components ========== */
table {
    width: 100%; border-collapse: collapse;
    background: rgba(0,0,0,0.3); border: 1px solid var(--steel);
}
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--steel); font-family: var(--mono); font-size: 0.85em; }
th { background: var(--iron); color: var(--rust-light); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72em; }
tr:hover { background: rgba(237,137,54,0.04); }
.btn {
    display: inline-block; padding: 9px 20px;
    border: 1px solid var(--steel);
    background: rgba(0,0,0,0.3); color: var(--ink-dim);
    cursor: pointer; font-size: 0.85em; font-weight: 600;
    text-decoration: none; font-family: var(--mono);
    text-transform: uppercase; letter-spacing: 0.06em;
    transition: all 0.15s;
}
.btn:hover { border-color: var(--rust-light); color: var(--ink); }
.btn-primary { background: var(--rust); color: #fff; border-color: var(--rust); }
.btn-primary:hover { background: var(--rust-light); }
.btn-success { color: #68d391; border-color: #276749; }
.btn-success:hover { background: rgba(104,211,145,0.08); }
.btn-danger { color: #fc8181; border-color: #9b2c2c; }
.btn-danger:hover { background: rgba(252,129,129,0.08); }
.btn-outline { background: transparent; }
.btn-sm { padding: 5px 12px; font-size: 0.75em; }
.badge { display: inline-block; padding: 2px 10px; font-size: 0.65em; font-weight: 700; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.badge-active { color: #68d391; border: 1px solid #276749; background: rgba(104,211,145,0.08); }
.badge-inactive { color: #fc8181; border: 1px solid #9b2c2c; background: rgba(252,129,129,0.06); }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-family: var(--mono); font-weight: 600; margin-bottom: 6px; color: var(--ink-dim); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.06em; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 10px 14px;
    background: rgba(0,0,0,0.4); border: 1px solid var(--steel);
    font-size: 0.9em; font-family: var(--mono); color: var(--ink); transition: all 0.15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--rust-light); }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.alert { padding: 14px 18px; border: 1px solid; margin-bottom: 16px; font-family: var(--mono); font-size: 0.85em; }
.alert-success { background: rgba(104,211,145,0.06); color: #68d391; border-color: #276749; }
.alert-danger { background: rgba(252,129,129,0.06); color: #fc8181; border-color: #9b2c2c; }
.alert-info { background: rgba(237,137,54,0.05); color: var(--rust-light); border-color: var(--steel); }
.tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--steel); }
.tabs a { padding: 10px 20px; text-decoration: none; color: var(--ink-dim); font-family: var(--mono); font-weight: 600; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid transparent; transition: all 0.15s; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--rust-light); border-bottom-color: var(--rust-light); }
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--steel); border-top-color: var(--rust-light); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.gap-8 { display: flex; gap: 8px; }

@media (max-width: 768px) {
    .ind-header-inner { flex-direction: column; gap: 10px; align-items: stretch; }
    .ind-nav { margin-left: 0; justify-content: center; flex-wrap: wrap; }
    .ind-gauge { align-self: center; }
    .converter-row { flex-direction: column; }
    .converter-field { min-width: 100%; }
    .ind-main { padding: 24px 16px 40px; }
    .converter-box, .card { padding: 22px 18px; }
    .pairs-grid { grid-template-columns: 1fr; }
}