/* ============================================================
   tools.css — Neural Network Builder styles
   Brand: dark bg, gold accent, Inter font, 14px radius
   ============================================================ */

/* ---- Hero ---- */
.tools-hero { padding: 80px 20px 40px; text-align: center; position: relative; }
.tools-hero .hero-title { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; color: var(--text); line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.02em; }
.tools-hero .hero-title .accent { color: var(--accent); }
.tools-hero .hero-subtitle { font-size: 1.05rem; color: var(--text-muted); max-width: 620px; margin: 0 auto; line-height: 1.65; }

.config-section { padding: 20px 20px 60px; }
.config-section .section-title { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--accent); margin-bottom: 8px; }
.config-section .section-lead { color: var(--text-muted); margin-bottom: 36px; }

/* ---- Slot Machine ---- */
.slot-machine { display: flex; justify-content: center; gap: 28px; margin-bottom: 32px; flex-wrap: wrap; }
.slot-column { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 250px; }
.slot-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-yellow, #f5c518); opacity: 0.8; }

.slot-window {
    width: 100%; height: 200px; overflow: hidden; position: relative;
    background: var(--surface, #0f0f0f); border: 1px solid var(--border, #2a2a2a); border-radius: var(--radius, 14px);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 10%, black 25%, black 75%, rgba(0,0,0,0.15) 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 10%, black 25%, black 75%, rgba(0,0,0,0.15) 90%, transparent 100%);
}
.slot-window::after {
    content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 46px; transform: translateY(-50%);
    border-top: 1px solid var(--accent, #ffd700); border-bottom: 1px solid var(--accent, #ffd700);
    background: rgba(255,215,0,0.04); border-radius: 6px; pointer-events: none; z-index: 2;
}

.slot-track { display: flex; flex-direction: column; align-items: stretch; transition: transform 0.5s cubic-bezier(0.22,0.61,0.36,1); will-change: transform; }
.slot-item { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; min-height: 46px; font-size: 0.78rem; color: var(--text-muted, #c9c9c9); transition: color 0.25s, background 0.25s; border-radius: 8px; cursor: pointer; user-select: none; white-space: nowrap; text-align: center; }
.slot-item i { width: 18px; text-align: center; font-size: 0.85rem; opacity: 0.6; transition: opacity 0.25s, color 0.25s; }
.slot-item.active { color: var(--accent, #ffd700); font-weight: 600; }
.slot-item.active i { opacity: 1; color: var(--accent, #ffd700); }

.slot-nav { display: flex; gap: 12px; }
.slot-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border, #2a2a2a); background: var(--surface, #0f0f0f); color: var(--text, #f5f5f5); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; font-size: 0.75rem; }
.slot-arrow:hover { border-color: var(--accent, #ffd700); color: var(--accent, #ffd700); background: rgba(255,215,0,0.06); }
.slot-arrow:active { transform: scale(0.93); }

/* ---- Advanced Settings ---- */
.advanced-settings { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-bottom: 28px; }
.setting-group { min-width: 160px; }
.setting-label { display: flex; flex-direction: column; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted, #c9c9c9); }
.setting-label strong { color: var(--accent, #ffd700); font-weight: 600; }
.setting-select { padding: 8px 12px; background: var(--surface, #0f0f0f); border: 1px solid var(--border, #2a2a2a); border-radius: 8px; color: var(--text, #f5f5f5); font-family: 'Inter', sans-serif; font-size: 0.85rem; cursor: pointer; transition: border-color 0.2s; }
.setting-select:focus { outline: none; border-color: var(--accent, #ffd700); }
.setting-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--border, #2a2a2a); border-radius: 2px; outline: none; cursor: pointer; }
.setting-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent, #ffd700); border: 2px solid var(--bg, #000); cursor: pointer; transition: transform 0.15s; }
.setting-range::-webkit-slider-thumb:hover { transform: scale(1.25); }

/* ---- Action Row ---- */
.action-row { display: flex; justify-content: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.btn-randomize, .btn-build { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border: none; border-radius: var(--radius, 14px); font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.25s ease; letter-spacing: 0.02em; }
.btn-randomize { background: transparent; color: var(--text, #f5f5f5); border: 1px solid var(--border, #2a2a2a); }
.btn-randomize:hover { border-color: var(--accent, #ffd700); color: var(--accent, #ffd700); background: rgba(255,215,0,0.05); transform: translateY(-2px); }
.btn-build { background: var(--accent, #ffd700); color: var(--bg, #000); box-shadow: 0 8px 24px rgba(255,215,0,0.18); }
.btn-build:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,215,0,0.28); }
.btn-build:active { transform: translateY(0); }
.btn-build:disabled, .btn-randomize:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ---- Config Summary ---- */
.config-summary { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.summary-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--surface-soft, #161616); border: 1px solid var(--border, #2a2a2a); border-radius: 20px; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #c9c9c9); }
.summary-chip i { color: var(--accent, #ffd700); font-size: 0.65rem; }
.summary-chip span { color: var(--text, #f5f5f5); }

/* ---- Visualization Section ---- */
.viz-section { padding: 30px 20px 60px; }
.viz-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.viz-panel { background: var(--surface, #0f0f0f); border: 1px solid var(--border, #2a2a2a); border-radius: var(--radius, 14px); padding: 24px; position: relative; min-height: 500px; }
.viz-title { font-size: 0.95rem; font-weight: 600; color: var(--text, #f5f5f5); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.viz-title i { color: var(--accent, #ffd700); }
.viz-badge { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 3px 10px; border-radius: 12px; background: rgba(255,215,0,0.08); color: var(--accent, #ffd700); border: 1px solid rgba(255,215,0,0.15); }
.viz-badge.training { animation: badgePulse 1.2s ease-in-out infinite; }
@keyframes badgePulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

.network-canvas { width: 100%; height: 420px; position: relative; overflow: hidden; border-radius: 12px; }
.network-canvas svg { width: 100%; height: 100%; }
.network-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(0,0,0,0.45); border-radius: 12px; transition: opacity 0.4s ease; pointer-events: none; }
.network-overlay.hidden { opacity: 0; }
.overlay-icon { width: 64px; height: 64px; border-radius: 50%; border: 2px dashed var(--border, #2a2a2a); display: flex; align-items: center; justify-content: center; color: var(--text-muted, #c9c9c9); font-size: 1.5rem; }
.network-overlay p { color: var(--text-muted, #c9c9c9); font-size: 0.85rem; text-align: center; max-width: 240px; }

.neuron-circle { transition: fill 0.4s ease, r 0.4s ease, opacity 0.4s ease; }
.neuron-circle.input-layer { fill: var(--surface-soft, #161616); stroke: var(--accent, #ffd700); stroke-width: 1.5; }
.neuron-circle.hidden-layer { fill: var(--surface-soft, #161616); stroke: var(--border, #2a2a2a); stroke-width: 1; }
.neuron-circle.output-layer { fill: var(--surface-soft, #161616); stroke: var(--accent, #ffd700); stroke-width: 2; }
.neuron-circle.firing { fill: rgba(255,215,0,0.25); stroke: var(--accent, #ffd700); }
.connection-line { stroke: var(--border, #2a2a2a); stroke-width: 0.5; opacity: 0.3; transition: stroke 0.3s, opacity 0.3s; }
.connection-line.active { stroke: var(--accent, #ffd700); opacity: 0.7; }
.data-pulse { fill: var(--accent, #ffd700); opacity: 0; }
.data-pulse.moving { animation: pulseTravel 1.2s ease-in-out forwards; }
@keyframes pulseTravel { 0%{opacity:0;r:1} 15%{opacity:1;r:3} 85%{opacity:0.8;r:3} 100%{opacity:0;r:1} }
.layer-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; fill: var(--text-muted, #c9c9c9); text-anchor: middle; letter-spacing: 0.05em; }

/* ---- Metrics Dashboard ---- */
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.metric-card { background: var(--surface-soft, #161616); border: 1px solid var(--border, #2a2a2a); border-radius: 10px; padding: 16px; text-align: center; position: relative; overflow: hidden; }
.metric-value { font-size: 1.8rem; font-weight: 700; color: var(--text, #f5f5f5); letter-spacing: -0.02em; transition: color 0.3s; }
.metric-value.improving { color: var(--accent, #ffd700); }
.metric-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted, #c9c9c9); margin-top: 4px; }
.metric-trend { font-size: 0.7rem; margin-top: 4px; color: var(--text-muted, #c9c9c9); }
.metric-sub { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: var(--text-muted, #c9c9c9); margin-top: 2px; }

.mini-chart { background: var(--surface-soft, #161616); border: 1px solid var(--border, #2a2a2a); border-radius: 10px; padding: 12px; margin-bottom: 16px; overflow: hidden; }
.mini-chart canvas { width: 100%; height: auto; display: block; }

.training-log { background: var(--surface-soft, #161616); border: 1px solid var(--border, #2a2a2a); border-radius: 10px; padding: 12px 16px; max-height: 120px; overflow-y: auto; margin-bottom: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; line-height: 1.7; }
.training-log .log-line { color: var(--text-muted, #c9c9c9); }
.training-log .log-line i { margin-right: 6px; color: var(--accent, #ffd700); font-size: 0.55rem; }

.progress-bar-wrap { display: flex; align-items: center; gap: 12px; }
.progress-bar { flex: 1; height: 6px; background: var(--border, #2a2a2a); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent, #ffd700), #f0c400); border-radius: 3px; transition: width 0.15s linear; }
.progress-text { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--accent, #ffd700); min-width: 36px; text-align: right; }

.explainer-section { padding: 40px 20px 80px; }
.explainer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.explainer-card { background: var(--surface, #0f0f0f); border: 1px solid var(--border, #2a2a2a); border-radius: var(--radius, 14px); padding: 24px; position: relative; transition: border-color 0.25s, transform 0.25s; }
.explainer-card:hover { border-color: var(--accent, #ffd700); transform: translateY(-3px); }
.explainer-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent, #ffd700); opacity: 0; transition: opacity 0.25s; }
.explainer-card:hover::before { opacity: 1; }
.explainer-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(255,215,0,0.08); display: flex; align-items: center; justify-content: center; color: var(--accent, #ffd700); font-size: 1.1rem; margin-bottom: 14px; }
.explainer-card h3 { font-size: 1rem; font-weight: 600; color: var(--text, #f5f5f5); margin-bottom: 8px; }
.explainer-card p { font-size: 0.85rem; line-height: 1.55; }

@keyframes slotShake { 0%,100%{transform:translateX(0)} 10%{transform:translateX(-6px)} 20%{transform:translateX(6px)} 30%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} }
@keyframes btnVictory { 0%,100%{transform:scale(1)} 30%{transform:scale(1.06)} 60%{transform:scale(0.97)} }

@media (max-width:900px) {
    .viz-layout { grid-template-columns: 1fr; }
    .network-canvas { height: 340px; }
    .slot-column { width: 210px; }
    .slot-window { height: 170px; }
}
@media (max-width:700px) {
    .slot-machine { gap: 10px; }
    .slot-column { width: 175px; }
    .slot-window { height: 170px; }
    .slot-item { padding: 8px 8px; font-size: 0.7rem; min-height: 46px; gap: 5px; }
    .slot-item i { width: 14px; font-size: 0.7rem; }
    .slot-window::after { left: 4px; right: 4px; }
    .slot-arrow { width: 30px; height: 30px; font-size: 0.65rem; }
    .slot-nav { gap: 8px; }
}
@media (max-width:520px) {
    .slot-machine { gap: 8px; }
    .slot-column { width: 155px; }
    .slot-window { height: 160px; }
    .slot-item { padding: 8px 4px; font-size: 0.6rem; min-height: 46px; gap: 4px; white-space: nowrap; }
    .slot-item i { width: 12px; font-size: 0.6rem; flex-shrink: 0; }
    .slot-window::after { left: 3px; right: 3px; }
    .advanced-settings { flex-direction: column; align-items: center; gap: 16px; }
    .setting-group { width: 100%; max-width: 300px; }
    .action-row { flex-direction: column; align-items: center; }
    .btn-randomize, .btn-build { width: 100%; max-width: 300px; justify-content: center; }
    .metrics-grid { grid-template-columns: 1fr; gap: 8px; }
    .explainer-grid { grid-template-columns: 1fr; }
}
@media (max-width:400px) {
    .slot-machine { gap: 6px; }
    .slot-column { width: 130px; }
    .slot-window { height: 150px; }
    .slot-item { padding: 8px 3px; font-size: 0.55rem; min-height: 44px; gap: 3px; }
    .slot-item i { width: 10px; font-size: 0.55rem; }
    .slot-window::after { left: 2px; right: 2px; height: 44px; }
    .slot-arrow { width: 26px; height: 26px; font-size: 0.6rem; }
    .slot-nav { gap: 6px; }
}