.widget-docs { color: #18201c; background: #fff; font: 15px/1.6 system-ui, sans-serif; letter-spacing: 0; }
.widget-docs * { box-sizing: border-box; letter-spacing: 0; }
.wd-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.wd-header { padding: 40px 0 28px; border-bottom: 1px solid #dce3de; }
.wd-header h1 { font-size: 34px; line-height: 1.2; font-weight: 650; margin: 16px 0; }
.wd-header p { max-width: 720px; color: #536259; }
.wd-nav { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 20px; }
.widget-docs a { color: #016630; text-underline-offset: 4px; }
.widget-docs a:hover { text-decoration: underline; }
.widget-docs p, .widget-docs code { overflow-wrap: anywhere; }
.wd-builder { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; padding: 32px 0; }
.wd-form { padding-right: 24px; border-right: 1px solid #dce3de; }
.wd-form fieldset { border: 0; padding: 0 0 22px; margin: 0; min-width: 0; }
.wd-form legend { font-size: 15px; font-weight: 650; margin-bottom: 10px; }
.wd-form label { display: block; font-size: 13px; margin-bottom: 12px; }
.wd-form input:not([type=checkbox]):not([type=radio]):not([type=color]), .wd-form select, .wd-form textarea { display: block; width: 100%; min-width: 0; margin-top: 4px; padding: 8px 10px; border: 1px solid #bcc8bf; border-radius: 4px; background: white; color: #18201c; font: inherit; }
.wd-form .wd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wd-form .wd-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wd-colors label { display: flex; align-items: center; gap: 8px; margin: 0; }
.wd-colors input { width: 30px; height: 30px; padding: 1px; border: 1px solid #bcc8bf; background: none; cursor: pointer; }
.wd-preview { min-width: 0; }
.wd-preview-top { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: baseline; padding: 0 0 16px; }
.wd-preview-top h2 { font-size: 18px; font-weight: 650; margin: 0; }
.wd-preview-top span { color: #68756b; font-size: 12px; }
#preview-width { width: 100%; margin: 0 auto 24px; }
#widget-preview { border: 1px solid #dce3de; border-radius: 6px; }
.wd-code { background: #f3f6f4; border-top: 1px solid #dce3de; padding: 16px; min-width: 0; }
.wd-code pre { margin: 16px 0 0; max-height: 520px; overflow: auto; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.wd-code button { padding: 8px 14px; border: 1px solid #bcc8bf; border-radius: 4px; background: white; font: inherit; cursor: pointer; }
.wd-code button:disabled { opacity: .5; cursor: not-allowed; }
.wd-feedback { font-size: 13px; min-height: 24px; color: #016630; }
.wd-section { border-top: 1px solid #dce3de; padding: 36px 0; scroll-margin-top: 80px; }
.wd-section h2 { font-size: 24px; font-weight: 650; margin: 0 0 16px; }
.wd-section h3 { font-size: 17px; font-weight: 650; margin: 24px 0 8px; }
.wd-section p { max-width: 90ch; margin: 10px 0; }
.wd-section li { margin: 8px 0; }
.wd-section ul { padding-left: 20px; list-style: disc; }
.wd-section pre { padding: 16px; background: #f3f6f4; overflow: auto; font-size: 13px; }
.wd-table { overflow-x: auto; }
.wd-table table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.wd-table td, .wd-table th { padding: 12px; border-bottom: 1px solid #dce3de; vertical-align: top; }
.wd-table th { background: #f3f6f4; font-weight: 650; }
.widget-docs :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
@media(max-width: 760px) { .wd-builder { grid-template-columns: 1fr; gap: 24px; } .wd-form { border: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .wd-preview { grid-row: 1; } .wd-wrap { padding: 0 16px; } .wd-header h1 { font-size: 28px; } }
@media(max-width: 390px) { .wd-form { grid-template-columns: 1fr; } }