/* Gedeelde stijl voor alle tool-pagina's */
body.bg-grid main { position: relative; }
body.bg-grid main::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 520px; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(249, 115, 22, .14), transparent 70%);
}
main > div { position: relative; z-index: 1; }

main header img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 70px rgba(249, 115, 22, .28); }
main h1, main h1[class] {
    background: linear-gradient(90deg, #fff 20%, #fdba74 60%, #f97316);
    -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.02em;
}
main header p code, main p code {
    background: rgba(249, 115, 22, .12); color: #fdba74; padding: .1rem .4rem; border-radius: .4rem; font-size: .9em;
}

main .bg-slate-900\/60 {
    background: linear-gradient(160deg, rgba(30, 41, 59, .75), rgba(15, 23, 42, .85));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(14px);
}

main label.block { letter-spacing: .02em; }
main input:not([type=checkbox]):not([type=color]), main textarea, main select {
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
main input:not([type=checkbox]):not([type=color]):hover, main textarea:hover, main select:hover { border-color: rgba(249, 115, 22, .35); }
main input:not([type=checkbox]):not([type=color]):focus, main textarea:focus, main select:focus {
    box-shadow: 0 0 0 4px rgba(249, 115, 22, .15);
}
main input[type=checkbox] { accent-color: #f97316; }
main input[type=color] { padding: 4px; }

main button[class*="bg-orange-500"] {
    background: linear-gradient(135deg, #fb923c, #f97316 55%, #ea580c);
    box-shadow: 0 10px 28px -10px rgba(249, 115, 22, .7);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
main button[class*="bg-orange-500"]:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 34px -10px rgba(249, 115, 22, .8); }
main button[class*="bg-orange-500"]:active { transform: translateY(0); }
main button.bg-slate-800 { border: 1px solid rgba(255, 255, 255, .08); transition: background-color .15s; }
main button.bg-slate-800:hover { background-color: #334155; }

main pre, main code.block {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    border-left: 3px solid #f97316 !important;
    background: rgba(2, 6, 23, .85) !important;
}
main table { border-collapse: collapse; }
main tbody tr { transition: background-color .15s; }
main tbody tr:hover { background: rgba(249, 115, 22, .06); }

.tools-more { max-width: 64rem; margin: 4rem auto 0; position: relative; z-index: 1; }
.tools-more h2 {
    text-align: center; font-size: .75rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
    color: #67e8f9; margin-bottom: 1.25rem;
}
.tools-more div { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .75rem; }
.tools-more a {
    display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; border-radius: 1rem;
    background: rgba(15, 23, 42, .7); border: 1px solid rgba(255, 255, 255, .08);
    color: #cbd5e1; font-size: .875rem; font-weight: 700; text-decoration: none;
    transition: transform .15s, border-color .15s, color .15s, background-color .15s;
}
.tools-more a:hover { transform: translateY(-3px); border-color: rgba(249, 115, 22, .5); color: #fff; background: rgba(30, 41, 59, .8); }
.tools-more a[aria-current="page"] { border-color: rgba(249, 115, 22, .6); color: #fdba74; background: rgba(249, 115, 22, .1); }
.tools-more a span { font-size: 1.15rem; width: 1.5rem; text-align: center; }