:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-hover: #273449;
  --border: #334155;
  --text: #e2e8f0;
  --text-secondary: #94a3b8;
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --radius: 8px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

/* Nav */
.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top:0;
  z-index:100;
  backdrop-filter: blur(12px);
}
.nav-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.nav-logo span { color: var(--accent); }
.nav-links { display:flex; gap:8px; list-style:none; flex-wrap:wrap; }
.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  transition: all .15s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-hover); }

/* Container */
.container { max-width:1100px; margin:0 auto; padding:40px 24px; }

/* Hero */
.hero { text-align:center; padding:60px 0 40px; }
.hero h1 { font-size:2.8rem; font-weight:800; letter-spacing:-0.03em; line-height:1.15; margin-bottom:16px; }
.hero h1 span { background:linear-gradient(135deg, var(--accent), #a855f7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p { color:var(--text-secondary); font-size:1.15rem; max-width:560px; margin:0 auto 32px; }
.hero .ad-placeholder {
  width:100%; max-width:728px; height:90px; margin:0 auto 32px;
  background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); font-size:0.85rem;
}

/* Search */
.search-wrap {
  max-width:500px; margin:0 auto 48px; position:relative;
}
.search-wrap input {
  width:100%; padding:14px 20px 14px 48px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  color:var(--text); font-size:1rem; outline:none; transition:border .15s;
}
.search-wrap input:focus { border-color:var(--accent); }
.search-wrap svg {
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:var(--text-secondary);
}

/* Tool Grid */
.section-title { font-size:1.5rem; font-weight:700; margin-bottom:24px; }
.tool-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
  margin-bottom:48px;
}
.tool-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  text-decoration:none;
  color:var(--text);
  transition:all .2s;
  display:flex; gap:14px; align-items:flex-start;
}
.tool-card:hover {
  background:var(--surface-hover);
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.tool-card-icon {
  width:44px; height:44px; border-radius:10px; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; flex-shrink:0;
}
.tool-card h3 { font-size:1.05rem; margin-bottom:4px; }
.tool-card p { color:var(--text-secondary); font-size:0.875rem; }

/* Tool Page */
.tool-page { max-width:900px; margin:0 auto; }
.tool-page h1 { font-size:2rem; font-weight:700; margin-bottom:8px; }
.tool-page .desc { color:var(--text-secondary); margin-bottom:32px; font-size:1.05rem; }

/* Tool Area */
.tool-area {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  margin-bottom:24px;
}
.tool-area label {
  display:block; font-size:0.875rem; font-weight:600; margin-bottom:8px; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:0.05em;
}
.tool-area textarea {
  width:100%; min-height:180px; padding:14px;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-family:'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
  font-size:0.9rem; resize:vertical; outline:none; transition:border .15s;
}
.tool-area textarea:focus { border-color:var(--accent); }
.tool-area .output {
  width:100%; min-height:120px; padding:14px;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  font-family:'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
  font-size:0.9rem; white-space:pre-wrap; word-break:break-all;
}

/* Buttons */
.btn-row { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.btn {
  padding:10px 20px; border-radius:var(--radius); font-size:0.9rem; font-weight:600;
  cursor:pointer; border:none; transition:all .15s; display:inline-flex; align-items:center; gap:6px;
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-secondary { background:var(--bg); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--surface-hover); }
.btn-success { background:var(--success); color:#000; }
.btn-warning { background:var(--warning); color:#000; }

/* Ad placeholder */
.ad-placeholder {
  width:100%; min-height:90px; margin:24px 0;
  background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); font-size:0.85rem;
}

/* Related Tools */
.related-tools { margin-top:48px; padding-top:32px; border-top:1px solid var(--border); }
.related-tools h2 { font-size:1.3rem; margin-bottom:16px; }
.related-links { display:flex; flex-wrap:wrap; gap:8px; }
.related-links a {
  padding:8px 16px; background:var(--surface); border:1px solid var(--border);
  border-radius:20px; color:var(--text-secondary); text-decoration:none; font-size:0.875rem;
  transition:all .15s;
}
.related-links a:hover { color:var(--text); border-color:var(--accent); }

/* Footer */
.footer {
  text-align:center; padding:40px 24px; border-top:1px solid var(--border);
  color:var(--text-secondary); font-size:0.85rem; margin-top:60px;
}
.footer a { color:var(--accent); text-decoration:none; }

/* Toast */
.toast {
  position:fixed; bottom:24px; right:24px;
  background:var(--success); color:#000; padding:10px 20px;
  border-radius:var(--radius); font-weight:600; font-size:0.9rem;
  opacity:0; transition:opacity .3s; pointer-events:none; z-index:999;
}
.toast.show { opacity:1; }

/* Responsive */
@media(max-width:640px) {
  .hero h1 { font-size:2rem; }
  .nav { padding:0 16px; }
  .container { padding:24px 16px; }
  .tool-grid { grid-template-columns:1fr; }
  .tool-page h1 { font-size:1.5rem; }
}

/* Input fields */
input[type="text"], input[type="number"], input[type="color"], select {
  padding:10px 14px; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text); font-size:0.9rem; outline:none;
  transition:border .15s;
}
input:focus, select:focus { border-color:var(--accent); }

/* Tabs */
.tabs { display:flex; gap:4px; margin-bottom:16px; }
.tab {
  padding:8px 16px; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-secondary); cursor:pointer;
  font-size:0.875rem; transition:all .15s;
}
.tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Count badge */
.count { display:inline-block; padding:2px 10px; border-radius:12px; background:var(--bg); font-size:0.8rem; color:var(--accent); margin-left:8px; }

/* Info boxes */
.info-box {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:20px;
}
.info-box h4 { margin-bottom:8px; font-size:0.95rem; }

/* Color swatches */
.color-swatch { width:32px; height:32px; border-radius:6px; border:2px solid var(--border); display:inline-block; vertical-align:middle; margin-right:8px; }

/* QR Code */
#qrcode-result { display:flex; justify-content:center; padding:20px; }
#qrcode-result canvas, #qrcode-result img { max-width:100%; height:auto; }

/* Markdown Preview */
#md-preview { min-height:150px; }
#md-preview h1,#md-preview h2,#md-preview h3 { margin:12px 0 8px; }
#md-preview p { margin:8px 0; }
#md-preview code { background:var(--surface); padding:2px 6px; border-radius:4px; }
#md-preview pre { background:var(--bg); padding:14px; border-radius:var(--radius); overflow-x:auto; }
#md-preview blockquote { border-left:3px solid var(--accent); padding-left:14px; color:var(--text-secondary); margin:12px 0; }
#md-preview ul,#md-preview ol { margin:8px 0; padding-left:24px; }