/* Build 27 – browser tools */
.tool-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:34px}
.tool-overview-card{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:26px;border:1px solid #cfe0ea;border-radius:18px;background:#fff;box-shadow:0 14px 34px rgba(3,24,39,.07)}
.tool-overview-card svg{width:46px;height:46px;padding:9px;border-radius:13px;background:#eaf7fc;color:#087eb7;stroke:currentColor;fill:none;stroke-width:1.8}
.tool-overview-card h2{font-size:1.28rem;margin:0 0 8px}.tool-overview-card p{margin:0 0 18px;color:#506b7c}.tool-overview-card .button{justify-self:start}
.tools-product-note{margin-top:30px;padding:20px 24px;border-left:4px solid #12b8e8;border-radius:0 12px 12px 0;background:#eaf7fc;color:#25485d}
.browser-tool-shell{padding:56px 0 82px;background:#edf6fa}.browser-tool{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:28px;align-items:start}
.tool-panel,.tool-result{padding:28px;border:1px solid #cfe0ea;border-radius:18px;background:#fff;box-shadow:0 14px 34px rgba(3,24,39,.07)}.browser-tool [hidden]{display:none!important}
.tool-panel label,.tool-panel legend{font-weight:700;color:#123248}.tool-field{display:grid;gap:8px;margin-bottom:20px}.tool-field input,.tool-field select{width:100%;min-height:46px;padding:10px 12px;border:1px solid #9fb7c6;border-radius:9px;background:#fff;color:#092a40;font:inherit}
.drop-zone{display:grid;place-items:center;min-height:160px;padding:24px;border:2px dashed #74b4d2;border-radius:14px;background:#f5fbfe;text-align:center;cursor:pointer;transition:.18s ease}.drop-zone.is-dragging{border-color:#00aee8;background:#e3f7ff;transform:translateY(-2px)}.drop-zone input{position:absolute;width:1px;height:1px;opacity:0}.drop-zone strong{font-size:1.08rem}.drop-zone span{display:block;margin-top:6px;color:#587181}
.tool-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.range-line{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.range-line input{grid-column:1/-1}.range-line output{font-weight:800;color:#007db5}
.tool-status{min-height:1.5em;margin:14px 0;color:#31566c}.tool-status.is-error{color:#a21f32;font-weight:700}.tool-note{font-size:.92rem;color:#526d7d}.tool-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.tool-stats div{padding:12px;border-radius:10px;background:#edf6fa}.tool-stats span{display:block;font-size:.8rem;color:#5a7280}.tool-stats strong{display:block;margin-top:3px}.image-preview{display:grid;place-items:center;min-height:260px;overflow:hidden;border-radius:13px;background:linear-gradient(45deg,#e2ebef 25%,transparent 25%),linear-gradient(-45deg,#e2ebef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2ebef 75%),linear-gradient(-45deg,transparent 75%,#e2ebef 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.image-preview img{display:block;max-width:100%;max-height:460px}.image-preview .empty{padding:30px;color:#567180;text-align:center}
.color-input-row{display:grid;grid-template-columns:70px 1fr;gap:12px}.color-input-row input[type=color]{width:70px;padding:4px}.contrast-preview{padding:32px;border-radius:14px;font-size:1.15rem}.contrast-preview strong{display:block;font-size:1.7rem;margin-bottom:8px}.contrast-ratio{font-size:2.6rem;font-weight:850;color:#082a41}.rgb-readout{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#456273}.wcag-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.wcag-result{padding:13px;border-radius:10px;background:#f1f5f7}.wcag-result strong{display:block;margin-top:5px}.wcag-result.pass{background:#e6f7ee;color:#125c36}.wcag-result.fail{background:#fff0f1;color:#852433}.copy-feedback{min-height:1.4em}
.mega-nav summary,.nav-actions summary{list-style:none!important}.mega-nav summary::marker,.nav-actions summary::marker{content:""}.mega-nav summary::-webkit-details-marker,.nav-actions summary::-webkit-details-marker{display:none!important}.tool-hero h1{font-size:clamp(2.3rem,4.2vw,3.9rem)}
@media(max-width:800px){.tool-overview-grid,.browser-tool{grid-template-columns:1fr}.tool-grid-2{grid-template-columns:1fr}.tool-result{order:-1}.tool-overview-card{grid-template-columns:44px 1fr;padding:20px}.tool-overview-card svg{width:40px;height:40px}.tool-stats{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.tool-stats,.wcag-grid{grid-template-columns:1fr}.tool-panel,.tool-result{padding:20px}.browser-tool-shell{padding:36px 0 56px}}