body { font-family: sans-serif; line-height: 1.6; margin: 20px; background-color: #f8f9fa; }
h1, h2 { text-align: center; color: #343a40; }
p { text-align: center; }
.controls { text-align: center; margin: 15px 0; padding: 10px 0; position: relative; border-bottom: 1px solid #e9ecef; }
.controls:last-of-type { border-bottom: none; margin-bottom: 30px; }
.controls button { padding: 8px 15px; font-size: 0.9em; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 4px; transition: background-color 0.3s; margin: 0 5px; }
.controls button.stop { background-color: #dc3545; }
.controls button#reset-weights { background-color: #ffc107; color: #333; }
.controls button#update-inputs { background-color: #17a2b8; }
.controls button:hover { opacity: 0.9; }
.controls button:disabled { background-color: #adb5bd; cursor: not-allowed; }
.controls label { font-size: 0.9em; color: #495057; margin-left: 10px; margin-right: 5px; }
.controls input[type="number"], .controls input[type="text"] { padding: 5px 8px; border: 1px solid #ced4da; border-radius: 4px; font-size: 0.9em; margin-right: 10px; }
.controls span { font-size: 0.9em; color: #6c757d; margin: 0 8px; }
#current-error { font-weight: bold; }
.tooltip { position: absolute; background-color: #ffffff; color: #333333; border: 1px solid #cccccc; padding: 6px 12px; border-radius: 4px; font-size: 0.85em; box-shadow: 0 2px 4px rgba(0,0,0,0.1); pointer-events: none; opacity: 0; transition: opacity 0.2s; white-space: nowrap; z-index: 100; transform: translate(12px, 12px); }
.network-container { display: flex; justify-content: space-around; align-items: flex-start; background-color: #ffffff; padding: 30px 40px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); position: relative; min-height: 550px; margin-bottom: 20px; overflow-x: auto; }
.connections-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.connections-svg line { stroke: #adb5bd; stroke-width: 2.5; opacity: 0.7; transition: stroke-width 0.15s ease-out, opacity 0.15s ease-out; pointer-events: auto; cursor: pointer; }
.connections-svg line.highlight { stroke: #007bff !important; stroke-width: 4; opacity: 1; }
.connections-svg line.bias-line { stroke: #6c757d; stroke-dasharray: 5 3; stroke-width: 2; }
.connections-svg line.bias-line.training { stroke: #ffc107; } /* 訓練中Bias線段為黃色 */
.connections-svg line.bias-line.highlight { stroke: #343a40 !important; stroke-width: 3; opacity: 1; }
.layer-group { display: flex; flex-direction: column; align-items: center; margin: 0 20px; position: relative; z-index: 1; }
.layer { text-align: center; padding: 10px 0; min-width: 110px; position: relative; }
.neuron-group { display: flex; flex-direction: column; align-items: center; margin-top: 15px; }
.neuron { background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 50%; width: 65px; height: 65px; margin: 12px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0.75em; box-shadow: 0 1px 3px rgba(0,0,0,0.08); position: relative; transition: background-color 0.2s ease, transform 0.1s ease; pointer-events: auto; }
.neuron.active { transform: scale(1.05); }
.input-layer .neuron { background-color: #d1e7dd; border-color: #a3cfbb; }
.input-layer .neuron.active { background-color: #a3cfbb !important; }
.hidden-layer-1 .neuron { background-color: #cfe2ff; border-color: #a9c6f3; }
.hidden-layer-1 .neuron.active { background-color: #a9c6f3 !important; }
.hidden-layer-2 .neuron { background-color: #e2d9f3; border-color: #c5b8e0; }
.hidden-layer-2 .neuron.active { background-color: #c5b8e0 !important; }
.output-layer .neuron { background-color: #f8d7da; border-color: #f1b0b7; }
.output-layer .neuron.active { background-color: #f1b0b7 !important; }
.bias-node-container { display: flex; flex-direction: column; align-items: center; margin-top: 25px; }
.bias-label { font-size: 0.7em; color: #6c757d; margin-top: 5px; }
.neuron.bias-node { background-color: #f8f9fa; border-color: #dee2e6; border-radius: 5px; width: 55px; height: 40px; font-size: 0.7em; }
.neuron .label { font-weight: bold; font-size: 0.85em; margin-bottom: 1px; color: #495057; }
.neuron .calc { font-size: 0.65em; color: #6c757d; }
.neuron .value { font-weight: bold; color: #212529; font-size: 0.8em; }
.neuron .input-val { width: 50px; padding: 2px; font-size: 0.8em; border: 1px solid #ced4da; border-radius: 4px; }
.description { background-color: #e9ecef; padding: 15px 20px; border-radius: 5px; margin: 20px auto; border: 1px solid #dee2e6; }
.description ul { padding-left: 20px; margin: 5px 0; color: #495057; }
.description li { margin-bottom: 8px; line-height: 1.5; }
.parameters { background-color: #e9ecef; padding: 20px; border-radius: 5px; margin-top: 30px; }
.parameters h2 { margin-top: 0; text-align: left; font-size: 1.2em; }
.parameters p { font-size: 0.9em; color: #495057; margin-bottom: 15px; }
.param-group { margin-bottom: 15px; }
.param-group h3 { margin-bottom: 8px; font-size: 1em; color: #343a40; }
pre { background-color: #fff; padding: 10px; border: 1px solid #dee2e6; border-radius: 4px; font-family: monospace; white-space: pre-wrap; word-wrap: break-word; font-size: 0.85em; max-height: 100px; overflow-y: auto; transition: background-color 0.3s ease; }
pre.changed { background-color: #fff3cd; }