.dev-toolbox{--card-bg: color-mix(in oklab, var(--bg) 90%, #ffffff);--card-border: color-mix(in oklab, var(--link) 20%, transparent);--shadow: 0 20px 30px -22px rgb(32 49 68 / 0.45);padding:0 0 2rem}.dev-toolbox .tool-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr))}.dev-toolbox .tool-card{display:grid;gap:.6rem;padding:1rem;background:var(--card-bg);border-radius:14px;border:1px solid var(--card-border);box-shadow:var(--shadow)}.dev-toolbox .tool-card h2{margin:0 0 .2rem;font-size:1.2rem}.dev-toolbox .tool-card label{font-size:.875rem;font-weight:700;opacity:.85}.dev-toolbox .tool-card input,.dev-toolbox .tool-card textarea{width:100%;box-sizing:border-box;border-radius:10px;border:1px solid color-mix(in oklab, var(--fg) 20%, transparent);background:color-mix(in oklab, var(--bg) 80%, #fff);color:var(--fg);font-size:.95rem;padding:.7rem .8rem;font-family:"SFMono-Regular",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.dev-toolbox .tool-card textarea{resize:vertical;min-height:7rem}.dev-toolbox .tool-card .actions{display:flex;flex-wrap:wrap;gap:.5rem}.dev-toolbox .tool-card button{border:0;border-radius:10px;padding:.55rem .9rem;font-weight:700;background:linear-gradient(120deg, var(--link), color-mix(in oklab, var(--link), white 18%));color:#fff;transition:transform .15s ease,opacity .15s ease}.dev-toolbox .tool-card button:hover{opacity:.9}.dev-toolbox .tool-card button:active{transform:translateY(1px)}.dark .dev-toolbox{--card-bg: color-mix(in oklab, var(--bg) 80%, #121212);--card-border: color-mix(in oklab, var(--link) 28%, transparent);--shadow: 0 20px 30px -22px rgb(7 9 12 / 0.7)}