:root{
  --primary-color:#2563eb;
  --secondary-color:#64748b;
  --background-color:#f8fafc;
  --card-color:#ffffff;
  --text-color:#1e293b;
  --border-color:#e2e8f0;
  --success-color:#059669;
  --error-color:#dc2626;
}
.devtoolbox-container *{box-sizing:border-box}
.devtoolbox-container{font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;background:var(--background-color);color:var(--text-color);line-height:1.6;padding:20px}
.devtoolbox-container .container{max-width:1200px;margin:0 auto}
.devtoolbox-header{ text-align:center;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}
.devtoolbox-header h1{color:var(--primary-color);font-size:2rem;margin-bottom:.25rem}
.devtoolbox-header p{color:var(--secondary-color)}
.devtoolbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.25rem;margin-top:1.75rem}
.devtoolbox-card{background:var(--card-color);border-radius:12px;padding:1rem;border:1px solid var(--border-color);box-shadow:0 4px 6px rgba(0,0,0,0.03);transition:transform .12s ease,box-shadow .12s ease}
.devtoolbox-card:focus-within, .devtoolbox-card:hover{transform:translateY(-3px);box-shadow:0 10px 18px rgba(0,0,0,0.06)}
.devtoolbox-card h3{color:var(--primary-color);margin-bottom:.6rem;font-size:1.1rem}
.devtoolbox-card textarea,.devtoolbox-card input,.devtoolbox-card select{width:100%;padding:.6rem;border-radius:6px;border:1px solid var(--border-color);font-family: "Courier New", monospace;font-size:.95rem}
.devtoolbox-btn{background:var(--primary-color);color:#fff;border:none;padding:.5rem .9rem;border-radius:6px;cursor:pointer}
.devtoolbox-btn:hover{background:#1d4ed8}
.devtoolbox-btn.secondary{background:#111827;color:#fff}
.devtoolbox-btn.ghost{background:transparent;border:1px solid var(--border-color);color:var(--text-color)}
.devtoolbox-btn[disabled]{opacity:.6;cursor:not-allowed}
.devtoolbox-btn-group{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.devtoolbox-result{margin-top:.75rem;background:#f1f5f9;border:1px solid var(--border-color);padding:.75rem;border-radius:6px;min-height:64px;white-space:pre-wrap;font-family: "Courier New", monospace;font-size:.9rem;color:var(--text-color)}
.devtoolbox-color-preview{width:48px;height:48px;border-radius:6px;border:1px solid var(--border-color);display:inline-block;vertical-align:middle;margin-left:.5rem}
.devtoolbox-footer{text-align:center;padding:1.25rem 0;margin-top:2rem;border-top:1px solid var(--border-color);color:var(--secondary-color)}
.devtoolbox-controls-row{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
.devtoolbox-small{font-size:.85rem;color:var(--secondary-color)}
@media (max-width:520px){ .devtoolbox-controls-row{flex-direction:column;align-items:stretch} }