body.w3-tools-page { color:#172b43; background:#f5f7f9; }
html body.w3-tools-page .qa-body-wrapper { box-sizing:border-box; width:calc(100% - 40px); max-width:1120px; margin:0 auto; padding:0; overflow:visible; }
body.w3-tools-page .qa-body-wrapper .qa-main-wrapper { display:block; width:100%; margin:0; padding:0; overflow:visible; }
body.w3-tools-page .qa-main-wrapper .qa-main { float:none; width:100%!important; min-width:0; margin:0; padding:0; border:0; background:transparent; box-shadow:none; }
body.w3-tools-page .qa-main .qa-part-custom { margin:0; padding:0; border:0; background:transparent; }
.w3-generator { --generator-border:#d3deea; color:#172b43; padding:12px 0 32px; font:14px/1.5 Arial,sans-serif; }
.w3-generator * { box-sizing:border-box; }
.w3-generator [hidden] { display:none!important; }
.w3-generator :is(h1,h2,p,ul) { margin:0; padding:0; border:0; background:none; }
.w3-generator :is(button,input,select,textarea) { font-family:inherit; }
.qa-main .w3-generator a { color:#244f82; text-decoration:none; }
.qa-main .w3-generator a:hover { text-decoration:underline; }
.w3-generator :is(button,input,select,textarea,a,summary):focus-visible { outline:3px solid #285dc8; outline-offset:2px; }
.generator-crumb { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:9px; color:#40516a; font-size:12px; }
.generator-heading { margin-bottom:14px; }
.qa-main .w3-generator .generator-heading h1 { width:auto; padding:0; margin:0 0 4px; border:0; background:none; color:#172b43; font:700 27px/1.25 Arial,sans-serif; letter-spacing:-.5px; }
.generator-heading p { color:#40516a; }
.generator-form-card { padding:16px; border:1px solid var(--generator-border); border-radius:11px; background:#fff; }
.generator-fields { display:grid; grid-template-columns:minmax(0,1fr) 185px 110px 150px; align-items:end; gap:12px; }
.generator-fields>div { min-width:0; }
.generator-fields label,.generator-copy-panel label { display:block; margin-bottom:6px; color:#243b55; font-size:13px; font-weight:700; }
.w3-generator .generator-fields :is(input,select) { display:block; width:100%; min-width:0; height:46px; margin:0; padding:10px 12px; border:1px solid #cdd9e6; border-radius:8px; color:#172b43; background:#f8fafc; font-size:14px; box-shadow:none; }
.w3-generator input::placeholder { color:#56657a; opacity:1; }
.w3-generator button { min-height:44px; margin:0; padding:9px 13px; border:1px solid var(--generator-border); border-radius:7px; color:#243b55; background:#fff; font:600 13px/1.4 Arial,sans-serif; cursor:pointer; box-shadow:none; }
.w3-generator button:hover { border-color:#a9bcd0; background:#f2f5f8; }
.w3-generator .generator-primary { display:flex; align-items:center; justify-content:center; gap:15px; height:46px; border-color:#e9b400; background:#ffca05; color:#172537; }
.w3-generator .generator-primary:hover { background:#f2be00; }
.w3-generator button:disabled { opacity:1; color:#4c5665; background:#e8edf2; cursor:not-allowed; }
.generator-form-bottom { display:flex; justify-content:space-between; align-items:center; gap:8px 18px; flex-wrap:wrap; margin-top:9px; }
.generator-form-bottom p { color:#40516a; font-size:12px; }
.generator-examples { display:flex; align-items:center; gap:7px; color:#40516a; font-size:12px; }
.w3-generator .generator-examples button { min-height:32px; padding:4px 9px; color:#604200; background:#fff7dd; border-color:#edddaa; font-size:12px; }
.w3-generator .generator-error { margin-top:10px; padding:9px 12px; border:1px solid #edcbd2; border-radius:7px; color:#922135; background:#fff0f3; font-size:13px; }
.generator-results { margin-top:17px; }
.generator-results-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.w3-generator h2 { color:#172b43; font:700 19px/1.3 Arial,sans-serif; }
.generator-results-heading p { margin-top:3px; color:#40516a; font-size:12px; overflow-wrap:anywhere; }
.generator-actions { display:flex; gap:8px; flex-shrink:0; }
.w3-generator .generator-notice { display:flex; align-items:baseline; gap:8px; color:#40516a; font-size:12px; margin-bottom:12px; }
.generator-notice>span { color:#886000; font-size:16px; }
.w3-generator .generator-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(var(--generator-rows,12),auto); grid-auto-flow:column; gap:0; margin:0; padding:0; border:1px solid var(--generator-border); border-radius:10px; background:#fff; list-style:none; }
.generator-card { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; min-height:64px; margin:0; padding:7px 14px; border:0; border-bottom:1px solid #e2e8ef; background:transparent; }
.generator-card:hover { background:#f8fafc; }
.generator-first-column { border-right:1px solid var(--generator-border); }
.generator-row-end { border-bottom:0; }
.generator-index { color:#40516a; font-size:12px; font-variant-numeric:tabular-nums; }
.generator-card-heading { display:flex; min-width:0; flex-direction:column; align-items:flex-start; gap:1px; }
.generator-domain { min-width:0; color:#172b43; font-size:15px; font-weight:700; overflow-wrap:anywhere; }
.generator-domain>span { color:#40516a; font-weight:400; }
.w3-generator .generator-copy { display:flex; flex:0 0 40px; width:40px; height:44px; align-items:center; justify-content:center; padding:10px; border-color:transparent; background:transparent; color:#40516a; }
.generator-copy svg { display:block; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.w3-generator .generator-copy:hover { background:#f2f5f8; border-color:#d3deea; }
.w3-generator .generator-copy.is-copied { color:#126341; background:#e8f7ed; }
.generator-card-footer { display:flex; align-items:center; gap:5px; }
.generator-kind { color:#46566d; font-size:12px; }
.qa-main .w3-generator .generator-check { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:90px; min-height:44px; padding:6px 9px; border:1px solid #eadcad; border-radius:6px; color:#604200; background:#fff8e3; font-size:12px; font-weight:700; white-space:nowrap; }
.qa-main .w3-generator .generator-check:hover { background:#fff0bc; text-decoration:none; }
.generator-about { margin-top:18px; border-top:1px solid var(--generator-border); color:#33445b; font-size:13px; }
.generator-about>summary { width:fit-content; min-height:44px; padding:11px 0; color:#243b55; font-weight:700; cursor:pointer; }
.generator-about>div { max-width:880px; padding:0 0 6px; }
.generator-about p+p { margin-top:9px; }
.generator-copy-panel { margin-top:14px; padding:14px; border:1px solid var(--generator-border); border-radius:9px; background:#fff; }
.w3-generator .generator-copy-panel textarea { display:block; width:100%; margin:0 0 10px; padding:10px; border:1px solid #cdd9e6; border-radius:7px; color:#172b43; background:#f8fafc; font:13px/1.5 Arial,sans-serif; }
.generator-reader { position:absolute; width:1px; height:1px; margin:-1px!important; padding:0!important; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:1000px) { .generator-fields { grid-template-columns:minmax(0,1fr) 175px 110px; } .generator-keyword { grid-column:1 / -1; } }
@media(max-width:850px) {
    .w3-generator .generator-grid { grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-auto-flow:row; }
    .generator-first-column { border-right:0; }
    .generator-row-end { border-bottom:1px solid #e2e8ef; }
    .generator-card:last-child { border-bottom:0; }
}
@media(max-width:800px) { html body.w3-tools-page .qa-body-wrapper { width:calc(100% - 24px); } }
@media(max-width:600px) {
    .w3-generator { padding-top:10px; }
    .qa-main .w3-generator .generator-heading h1 { font-size:24px; }
    .generator-heading p { font-size:13px; }
    .generator-form-card { padding:13px; }
    .generator-fields { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
    .generator-primary { grid-column:1 / -1; }
    .generator-form-bottom { gap:8px; }
    .generator-results-heading { align-items:flex-start; flex-wrap:wrap; }
    .generator-actions { width:100%; }
    .generator-actions button { flex:1; }
    .generator-card { grid-template-columns:20px minmax(0,1fr) auto; gap:6px; min-height:64px; padding:6px 10px; }
    .generator-domain { font-size:14px; }
    .generator-card-footer { gap:2px; }
    .w3-generator .generator-copy { width:36px; flex-basis:36px; padding:8px; }
    .qa-main .w3-generator .generator-check { min-width:80px; padding:6px; }
}