.page-header{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);color:#fff;padding:var(--space-8) 0 var(--space-6)}.page-header h1{color:#fff;font-size:var(--text-3xl);margin-bottom:var(--space-2)}.page-desc{opacity:.9;font-size:var(--text-sm)}.breadcrumb{font-size:var(--text-xs);margin-bottom:var(--space-3);opacity:.8}.breadcrumb a{color:#fff}.breadcrumb .sep{margin:0 var(--space-2)}.tool-body{padding-top:var(--detail-padding-top);padding-bottom:var(--detail-padding-bottom)}.ob-wrap{max-width:680px;margin:0 auto}.ob-wrap .card{margin-bottom:var(--space-5)}.ob-h2{font-size:var(--text-lg);margin-bottom:var(--space-3)}.ob-result{border-left:4px solid var(--color-accent)}.ob-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.ob-box{text-align:center;padding:var(--space-4);background:var(--color-bg);border-radius:var(--radius-md)}.ob-box-accent{background:#fff8e1}.ob-box-label{display:block;font-size:var(--text-xs);color:var(--color-text-secondary);margin-bottom:var(--space-1)}.ob-box-val{display:block;font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:900;color:var(--color-primary);line-height:1.2}.ob-basis{margin-top:var(--space-3);font-size:var(--text-xs);font-weight:700;display:inline-block;padding:2px 10px;border-radius:999px;background:var(--color-bg);color:var(--color-text-secondary)}.ob-basis.ob-basis-machine{background:#ffebee;color:#b3261e}.ob-where{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.8;margin-top:var(--space-2)}.ob-field{margin-bottom:var(--space-5)}.ob-field-last{margin-bottom:var(--space-2)}.ob-label{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);font-weight:600;font-size:var(--text-sm);color:var(--color-primary);margin-bottom:var(--space-2)}.ob-val{font-family:var(--font-mono);font-weight:700;color:var(--color-accent-text);font-size:var(--text-sm)}.ob-select{width:100%;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-base);font-family:var(--font-body);background:var(--color-surface);cursor:pointer;color:var(--color-text)}.ob-select:focus{border-color:var(--color-primary);outline:none}.ob-sub{font-size:var(--text-xs);color:var(--color-text-secondary);margin-top:var(--space-2);line-height:1.6}.ob-slider{width:100%;height:8px;-webkit-appearance:none;appearance:none;background:var(--color-border);border-radius:4px;outline:none;cursor:pointer}.ob-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--color-primary);border:3px solid white;box-shadow:0 2px 6px #0003;cursor:pointer}.ob-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--color-primary);border:3px solid white;box-shadow:0 2px 6px #0003;cursor:pointer}.ob-range{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-secondary);margin-top:2px}.ob-code{font-family:var(--font-mono);font-size:var(--text-sm);background:var(--color-bg);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border-left:3px solid var(--color-accent)}.ob-note{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.8;margin-top:var(--space-3)}.ob-note strong{color:var(--color-text)}.ob-scroll{overflow-x:auto}.ob-table{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--text-sm)}.ob-table th{background:var(--color-primary);color:#fff;padding:var(--space-2) var(--space-3);text-align:left}.ob-table td{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);vertical-align:top}.ob-rulenum{font-size:var(--text-xs);color:var(--color-text-secondary);font-family:var(--font-mono)}.ob-machine{color:#b3261e;font-weight:600}.ob-related{margin-top:var(--space-6)}.ob-card{display:block;transition:transform .2s,box-shadow .2s}.ob-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-elevated);color:var(--color-text)}.ob-card h3{font-size:var(--text-base);margin-bottom:var(--space-2)}.ob-card p{font-size:var(--text-sm);color:var(--color-text-secondary)}
