body.w3-tools-page { color:#192637; 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-directory { padding:18px 0 30px; color:#192637; font:13px/1.6 Arial,sans-serif; }
.w3-directory * { box-sizing:border-box; }
.w3-directory [hidden] { display:none!important; }
.directory-crumb { display:flex; gap:9px; margin-bottom:14px; color:#7c8b9e; font-size:11px; }
.directory-crumb a { color:#55708d; }
.directory-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:114px; margin-bottom:18px; padding:22px 25px; border:1px solid #eee6cc; border-radius:12px; background:linear-gradient(110deg,#fffdf7,#fff 70%); }
.qa-main .w3-directory .directory-heading h1 { margin:0; padding:0; border:0; color:#192637; background:transparent; font:700 28px/1.3 Arial,sans-serif; letter-spacing:-.7px; }
.directory-heading p { margin:7px 0 0; color:#52677f; font-size:14px; }
.directory-total { flex-shrink:0; min-width:90px; padding-left:24px; border-left:1px solid #eee6ce; text-align:center; }
.directory-total strong { display:block; color:#987500; font-size:28px; font-weight:600; line-height:1.2; }
.directory-total span { color:#8b826b; font-size:10px; }
.directory-toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.directory-filters { display:flex; flex-wrap:wrap; gap:6px; }
.directory-filters button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; margin:0; padding:8px 14px; border:1px solid #d7e0eb; border-radius:7px; color:#405973; background:#fff; font:600 12px/1.4 Arial,sans-serif; cursor:pointer; }
.directory-filters button span { font-size:10px; opacity:.7; }
.directory-filters button[aria-pressed="true"] { border-color:#edb800; color:#503d00; background:#ffdf69; }
.directory-filters button:hover { border-color:#b8c7d8; }
.directory-search { position:relative; display:flex; align-items:center; flex:0 1 270px; min-width:180px; }
.directory-search > svg { position:absolute; left:12px; width:16px; height:16px; color:#7a8fa6; pointer-events:none; }
.w3-directory .directory-search input { width:100%; height:40px; margin:0; padding:7px 12px 7px 36px; border:1px solid #d3deeb; border-radius:7px; color:#253c54; background:#fff; font:13px/1.5 Arial,sans-serif; box-shadow:none; }
.directory-search input::placeholder { color:#8a99aa; }
.directory-results { display:flex; justify-content:space-between; gap:10px; margin:12px 0 10px; color:#61758d; font-size:11px; }
.directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.w3-directory .directory-card { --tool-color:#2563eb; position:relative; display:flex; align-items:flex-start; gap:14px; min-width:0; min-height:148px; padding:20px 26px 18px 18px; border:1px solid #dce4ed; border-radius:11px; color:inherit; background:#fff; box-shadow:0 2px 5px rgba(28,48,73,.035); text-decoration:none; transition:border-color .15s,box-shadow .15s,transform .15s; }
.directory-card::before { content:""; position:absolute; left:-1px; top:23px; width:3px; height:32px; border-radius:0 3px 3px 0; background:var(--tool-color); }
.directory-card:hover { border-color:var(--tool-color); box-shadow:0 6px 18px rgba(35,51,73,.09); transform:translateY(-2px); }
.directory-icon { display:flex; flex:0 0 48px; align-items:center; justify-content:center; width:48px; height:50px; border:0; border-radius:12px; color:#fff; background:linear-gradient(145deg,#4385ff,#2459d6); box-shadow:0 4px 9px rgba(37,99,235,.18); }
.directory-icon svg { display:block; width:27px; height:27px; stroke-width:1.8; }
.w3-directory .directory-tone-teal { --tool-color:#008e96; }
.w3-directory .directory-tone-purple { --tool-color:#7c4ed9; }
.w3-directory .directory-tone-green { --tool-color:#199654; }
.w3-directory .directory-tone-gold { --tool-color:#dba100; }
.w3-directory .directory-tone-orange { --tool-color:#e67524; }
.directory-tone-teal .directory-icon { color:#fff; background:linear-gradient(145deg,#16b5b1,#00858e); box-shadow:0 4px 9px rgba(0,142,150,.18); }
.directory-tone-purple .directory-icon { color:#fff; background:linear-gradient(145deg,#a078f0,#7040cc); box-shadow:0 4px 9px rgba(124,78,217,.18); }
.directory-tone-green .directory-icon { color:#fff; background:linear-gradient(145deg,#35bd78,#16864b); box-shadow:0 4px 9px rgba(25,150,84,.18); }
.directory-tone-gold .directory-icon { color:#503b00; background:linear-gradient(145deg,#ffdc4c,#ffc000); box-shadow:0 4px 9px rgba(219,161,0,.2); }
.directory-tone-orange .directory-icon { color:#fff; background:linear-gradient(145deg,#ff9a4c,#e46a20); box-shadow:0 4px 9px rgba(230,117,36,.18); }
.directory-copy { min-width:0; }
.w3-directory .directory-copy h2 { margin:0 0 7px; padding:0; color:#172b42; font:700 15px/1.4 Arial,sans-serif; }
.directory-copy p { margin:0; color:#52677f; font-size:13px; line-height:1.65; }
.directory-category { display:inline-block; margin-top:10px; padding:2px 7px; border-radius:4px; color:#536982; background:#f0f4f8; font-size:10px; font-weight:500; }
.directory-arrow { position:absolute; top:16px; right:11px; color:#71869d; font-size:16px; }
.directory-reader { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.w3-directory :focus-visible { outline:2px solid #b28b05; outline-offset:3px; }
.directory-empty { padding:35px 20px; border:1px dashed #d6e0ea; border-radius:10px; color:#6e8097; background:#fff; text-align:center; }
.directory-empty h2 { margin:0; padding:0; font-size:15px; color:#3c536c; }
.directory-empty p { margin:8px 0 14px; font-size:12px; }
.directory-empty button { min-height:38px; padding:7px 14px; border:1px solid #e4c76b; border-radius:6px; color:#70590d; background:#fff6d9; font:12px Arial,sans-serif; cursor:pointer; }
.directory-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid #e0e7ef; color:#637991; font-size:11px; }
.directory-footer a { color:#647b94; }
@media(max-width:900px) { .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .directory-toolbar { align-items:stretch; flex-direction:column; gap:10px; } .directory-search { flex-basis:auto; } }
@media(max-width:600px) { html body.w3-tools-page .qa-body-wrapper { width:calc(100% - 24px); } .w3-directory { padding-top:12px; } .directory-crumb { margin-bottom:10px; } .directory-heading { min-height:0; padding:18px; gap:12px; margin-bottom:14px; } .qa-main .w3-directory .directory-heading h1 { font-size:22px; letter-spacing:-.4px; } .directory-heading p { font-size:13px; } .directory-total { display:none; } .directory-filters { display:grid; grid-template-columns:repeat(2,1fr); } .directory-filters button { padding:7px 8px; } .directory-grid { grid-template-columns:1fr; gap:10px; } .w3-directory .directory-card { min-height:132px; padding:17px 26px 15px 15px; gap:12px; } .directory-results > span + span { display:none; } .directory-icon { flex-basis:44px; width:44px; height:46px; } .directory-icon svg { width:25px; height:25px; } .directory-copy p { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { .directory-card { transition:none!important; } .directory-card:hover { transform:none; } }