.section-help { padding: 18px 22px; border: 1px solid #c7dace; border-left: 4px solid #3d785a; border-radius: 6px; background: #eef5ef; margin-bottom: 24px; }
.section-help>p { margin: 0; color: #2e4f3a; }
.section-help details { margin-top: 10px; }
.section-help summary { cursor: pointer; color: #24543c; font-size: .9375rem; font-weight: 600; }
.section-help summary:focus-visible { outline: 3px solid #19714f; outline-offset: 4px; }
.section-help li { font-size: .9375rem; margin-bottom: 8px; color: #2d4a35; }
.section-help .text-button { padding: 8px 0; width: auto; }
.settings-content, .guide-content { padding: 0 24px 24px; }
.settings-content { max-width: 1050px; }
.settings-row { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 36px; align-items: start; padding: 22px 0; }
.settings-row h3, .guide-content h3 { font-size: 1.0625rem; margin: 0 0 8px; font-weight: 600; }
.settings-row label { margin: 0; }
.settings-row select { width: 100%; }
.text-preview { background: #f2f6f1; border: 1px solid #ccdccf; padding: 20px; border-radius: 6px; }
.text-preview strong { font-size: 1.25rem; }
.text-preview p { font-size: 1rem; }
.text-preview small { font-size: .875rem; color: #3c5945; }
.settings-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
#preferences-status { color: #3f5c46; font-size: .875rem; }
.header-settings { padding: 7px 11px; font-size: .8125rem; }
.guide-panel { margin-bottom: 24px; }
.guide-panel .panel-heading { align-items: start; }
.guide-content p+p { margin-top: 14px; }
.guide-content strong { color: #203e2a; }
.guide-content li { margin-bottom: 12px; font-size: .9375rem; line-height: 1.7; }
.guide-content code, .guide-table code { font-size: .875rem; color: #274f37; overflow-wrap: anywhere; }
.guide-steps { padding-left: 24px; margin: 0; }
.guide-link { padding: 0; border: 0; background: none; text-align: left; color: #21563b; font-size: .9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.guide-link:hover { color: #123c27; }
.guide-columns, .section-directory { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; }
.guide-columns ul { margin: 0; padding-left: 20px; }
.section-directory>div { padding: 16px; border: 1px solid #d6e1d7; border-radius: 6px; }
.section-directory p { margin-top: 10px; }
.guide-table { white-space: normal; min-width: 650px; }
.guide-table td { vertical-align: top; line-height: 1.65; }
.guide-table td:first-child { font-weight: 600; width: 24%; }
.guide-table td:nth-child(2) { width: 25%; }
.traffic-diagram { margin: 0; border: 1px solid #c9daca; padding: 24px; border-radius: 8px; background: #f8faf7; }
.control-path { text-align: center; padding: 0 12px 24px; margin-bottom: 24px; border-bottom: 2px dashed #8cae97; }
.control-path strong, .control-path span, .control-path small { display: block; }
.control-path strong { font-size: 1.125rem; }
.control-path span { font-size: .9375rem; margin: 8px 0; }
.control-path small { color: #4b6551; font-size: .8125rem; }
.site-path { display: grid; grid-template-columns: minmax(0,1fr) minmax(130px,.8fr) minmax(0,1fr); gap: 14px; align-items: center; }
.site-card { background: #fff; border: 1px solid #b4cbb8; border-radius: 6px; padding: 20px; }
.site-card h3 { margin-top: 14px; }
.site-card small { color: #4b6551; font-size: .8125rem; }
.data-path { text-align: center; color: #255c3b; }
.data-path strong { display: block; font-size: 2.7rem; line-height: 1.2; }
.data-path span, .data-path small { display: block; font-size: .875rem; }
.data-path small { margin-top: 6px; font-size: .8125rem; }
.traffic-diagram figcaption { border-top: 1px solid #d2dfd2; padding-top: 18px; margin-top: 24px; font-size: .875rem; color: #3c5942; }
@media(max-width:1100px) { .site-path { grid-template-columns: minmax(0,1fr) 125px minmax(0,1fr); } .site-card { padding: 16px 12px; } }
@media(max-width:700px) { .settings-row { grid-template-columns: 1fr; gap: 16px; } .guide-columns, .section-directory { grid-template-columns: 1fr; } .site-path { grid-template-columns: 1fr; } .data-path strong { transform: rotate(90deg); } .traffic-diagram { padding: 16px; } .section-help { padding: 16px; } .settings-content, .guide-content { padding: 0 16px 20px; } }