:root {
  --primary: #2563eb;
  --secondary: #64748b;
  --accent: #f59e0b;
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --text: #1e293b;
  --border: #e2e8f0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

.navbar-brand { letter-spacing: -0.5px; }

/* Tool cards */
.tool-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
  transition: box-shadow 0.2s;
}
.tool-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Tool page */
.tool-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; }
.tool-desc { color: var(--secondary); margin-bottom: 1.5rem; }

.tool-input textarea,
.tool-output pre {
  width: 100%;
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
}
.tool-input textarea { min-height: 140px; resize: vertical; background: #fff; }
.tool-output pre { min-height: 100px; background: #1e293b; color: #e2e8f0; overflow-x: auto; margin: 0; }

.tool-input .btn { margin-top: 0.75rem; }
.tool-output { position: relative; }
.tool-output .copy-btn {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,0.1); border: none; color: #e2e8f0;
  padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer;
}
.tool-output .copy-btn:hover { background: rgba(255,255,255,0.2); }

/* Help section */
.tool-help {
  margin-top: 2rem;
  padding: 1.25rem;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 14px;
}
.tool-help h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.tool-help ul { margin: 0; padding-left: 1.25rem; }
.tool-help li { margin-bottom: 0.35rem; color: #475569; }

/* Category title */
.category-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}

/* Tool link card */
.tool-link-card {
  display: block;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.15s;
  margin-bottom: 0.5rem;
}
.tool-link-card:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #eff6ff;
}
.tool-link-card .tool-link-icon { margin-right: 0.5rem; }
/* RESPONSIVE */
@media(max-width:575.98px){.tool-title{font-size:1.35rem}.tool-desc{font-size:.9rem}.tool-input textarea,.tool-output pre{font-size:12px;padding:.5rem}.tool-help{padding:1rem;font-size:13px}.navbar-brand{font-size:1rem}.lang-switcher select{font-size:12px;min-width:110px;padding:5px 28px 5px 8px}.tool-card{padding:1rem}.tool-link-card{padding:.6rem .8rem;font-size:.9rem}.category-title{font-size:1rem;margin:1.5rem 0 .75rem}}
@media(min-width:576px) and (max-width:767.98px){.tool-title{font-size:1.5rem}.navbar-brand{font-size:1.1rem}.lang-switcher select{min-width:120px}}
@media(max-width:991.98px){.navbar-nav .lang-switcher{margin:.5rem 0}.navbar-nav .nav-item{padding:.25rem 0}}
@media(max-width:767.98px){.col-lg-8,.col-lg-4,.col-md-6,.col-lg-3{width:100%}}
@media(min-width:1200px){main.container{max-width:1140px}}