.tools-page { background:radial-gradient(ellipse at 85% 0%,#31214d32,transparent 35%),#050910; }
.tools-content { padding-block:34px 65px; }
.tools-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:25px; }
.tools-heading .eyebrow { color:#9683af; font-size:9px; letter-spacing:.16em; margin:0 0 8px; }
.tools-heading h2 { font-size:26px; margin:0; letter-spacing:.06em; }
.tools-heading > p { color:#97a1b7; font-size:12px; }
.tools-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px; background:#0d1420; border:1px solid #ffffff14; border-radius:10px; }
#tools-filters { display:flex; flex-wrap:wrap; gap:8px; }
.tools-filter { border:1px solid #ffffff1c; background:#ffffff02; color:#a7b0c4; min-height:42px; padding:9px 15px; font:inherit; font-size:12px; border-radius:6px; cursor:pointer; transition:background .2s,border-color .2s; }
.tools-filter[aria-pressed="true"] { background:#9361d52b; border-color:#aa7ee280; color:#dfc8ff; }
.tools-toolbar input { width:240px; max-width:100%; height:44px; border:1px solid #a084bc33; border-radius:7px; background:#060b14; color:#dbe2f3; padding:0 14px; font:inherit; font-size:13px; }
.tools-toolbar input::placeholder { color:#7d889f; }
#tools-status { font-size:12px; color:#929db2; margin:22px 0; }
.tools-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.tool-card { min-width:0; display:flex; flex-direction:column; border:1px solid #a386c029; border-radius:12px; overflow:hidden; background:#0c131e; transition:transform .25s,border-color .25s; }
.tool-card__art { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; height:170px; background:radial-gradient(ellipse at center,#5c379932,transparent 65%),linear-gradient(140deg,#171327,#091521); border-bottom:1px solid #ffffff10; position:relative; color:#b28afa; }
.tool-card__art::before { content:''; position:absolute; inset:15px; background:linear-gradient(#a885de08 1px,transparent 1px),linear-gradient(90deg,#a885de08 1px,transparent 1px); background-size:22px 22px; pointer-events:none; }
.tool-card__art svg { width:65px; height:65px; filter:drop-shadow(0 0 14px #9764f448); position:relative; }
.tool-card__art > span { font:8px var(--display); letter-spacing:.17em; color:#9282a9; }
.tool-card__body { padding:22px; display:flex; flex-direction:column; flex:1; }
.tool-card__category { font-size:10px; color:#a68bbf; margin:0 0 7px; }
.tool-card h3 { font-size:21px; font-weight:600; margin:0; }
.tool-card__description { font-size:13px; color:#a2adc3; line-height:1.9; margin:14px 0; }
.tool-card__tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.tool-card__tags span { font-size:10px; color:#8f9db6; border:1px solid #ffffff14; border-radius:4px; padding:4px 7px; }
.tool-card__access { font-size:11px; color:#b4a5ce; padding-top:15px; border-top:1px solid #ffffff12; margin:0 0 10px; margin-top:auto; line-height:1.7; }
.tool-card__how { font-size:12px; color:#919cb2; margin-bottom:18px; }
.tool-card__how summary { cursor:pointer; min-height:36px; padding-block:9px; }
.tool-card__how p { line-height:1.9; margin:8px 0; color:#b0bad0; }
.tool-card__enter { display:flex; align-items:center; justify-content:space-between; min-height:45px; padding:10px 15px; color:#ddc8fa; text-decoration:none; font-size:12px; background:#9555e214; border:1px solid #9e76d657; border-radius:6px; transition:background .2s; }
.tool-card__enter:hover { background:#9555e22c; }
.tools-note { display:flex; align-items:center; gap:22px; border-top:1px solid #ffffff15; padding-top:28px; margin-top:36px; }
.tools-note > span { color:#a27bdc; font-size:30px; }
.tools-note h3 { font-size:16px; margin:0 0 8px; font-weight:500; }
.tools-note p { color:#8f9bb1; font-size:12px; line-height:1.9; max-width:710px; margin:0; }
.tools-note a { margin-left:auto; flex-shrink:0; color:#bc9ee4; font-size:12px; text-decoration:none; }
.tools-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tools-page :is(a,button,input,summary):focus-visible { outline:2px solid #b991ed; outline-offset:4px; }
@media(hover:hover) { .tool-card:hover { transform:translateY(-4px); border-color:#ab81e276; } }
@media(max-width:950px) { .tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .tools-toolbar { align-items:stretch; flex-direction:column; gap:14px; } .tools-toolbar input { width:100%; } .tools-note { flex-wrap:wrap; } .tools-note a { margin-left:0; } }
@media(max-width:560px) { .tools-heading { align-items:flex-end; } .tools-heading h2 { font-size:23px; } .tools-heading > p { font-size:10px; max-width:112px; text-align:right; line-height:1.8; margin:0; } .tools-grid { grid-template-columns:minmax(0,1fr); gap:18px; } .tools-filter { padding-inline:12px; } .tools-toolbar { padding:14px; } .tools-toolbar input { font-size:16px; } .tool-card__art { height:140px; } .tool-card__body { padding:20px; } .tools-note { gap:14px; } .tools-note > span { display:none; } }
@media(prefers-reduced-motion:reduce) { .tool-card,.tool-card__enter,.tools-filter { transition:none; } }