@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #0b1220;
  --bg-soft: #111827;
  --surface: #151c2c;
  --surface-2: #1a2336;
  --ink: #eef2ff;
  --muted: #9aa6bf;
  --line: rgba(148,163,184,.18);
  --accent: #22d3ee;
  --accent-2: #a78bfa;
  --accent-3: #34d399;
  --danger: #fb7185;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --radius: 18px;
  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1000px 500px at 10% -10%, rgba(34,211,238,.18), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(167,139,250,.16), transparent 50%),
    var(--bg);
  line-height: 1.55;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: #67e8f9; }
.container { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.container.narrow { width: min(820px, calc(100% - 2rem)); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:100; background:#fff; color:#111; padding:.6rem .9rem; border-radius:10px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(11,18,32,.75);
  border-bottom: 1px solid var(--line);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .85rem 0; }
.logo { display:flex; align-items:center; gap:.7rem; color:var(--ink); font-weight:800; text-decoration:none; }
.logo-mark {
  width:2.2rem; height:2.2rem; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#041016; font-size:1rem; box-shadow: 0 8px 24px rgba(34,211,238,.25);
}
.logo-text { font-size:1.15rem; letter-spacing:-.02em; }
.site-nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:.2rem; margin:0; padding:0; }
.site-nav a {
  display:inline-flex; align-items:center; gap:.4rem;
  color: var(--muted); padding:.45rem .7rem; border-radius:999px; font-size:.86rem; font-weight:500;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--ink); background: rgba(34,211,238,.12);
}
.nav-toggle { display:none; background:transparent; border:1px solid var(--line); border-radius:10px; width:2.5rem; height:2.5rem; color:var(--ink); }
.nav-toggle span { display:block; height:2px; background:currentColor; margin:.35rem .35rem; border-radius:2px; }
.header-cta { display:flex; gap:.5rem; align-items:center; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  border:0; border-radius:12px; padding:.72rem 1.05rem; font-weight:700; cursor:pointer; font-size:.92rem;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), #67e8f9); color:#06202a; }
.btn-primary:hover { filter:brightness(1.05); color:#06202a; }
.btn-secondary { background: rgba(167,139,250,.2); color:#ddd6fe; border:1px solid rgba(167,139,250,.35); }
.btn-ghost { background: transparent; color:var(--ink); border:1px solid var(--line); }
.btn-block { width:100%; }
.btn-row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.85rem; }

.hero { padding: 3.4rem 0 2.2rem; }
.hero-grid { display:grid; grid-template-columns: 1.3fr .9fr; gap:1.5rem; align-items:center; }
.eyebrow {
  display:inline-flex; align-items:center; gap:.45rem;
  color:#a5f3fc; background: rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.25);
  padding:.35rem .7rem; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.hero h1 { font-size: clamp(2.1rem, 4.5vw, 3.3rem); line-height:1.1; margin:.7rem 0 1rem; letter-spacing:-.03em; }
.hero-lead { color: var(--muted); font-size:1.08rem; margin:0 0 1.3rem; max-width: 52ch; }
.search-form {
  display:flex; gap:.55rem; padding:.4rem; border-radius:16px;
  background: rgba(255,255,255,.04); border:1px solid var(--line); box-shadow: var(--shadow);
}
.search-form input {
  flex:1; border:0; outline:0; background:transparent; color:var(--ink); padding:.8rem .9rem; font:inherit;
}
.search-results {
  margin-top:.65rem; background: var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.search-results a { display:block; padding:.8rem 1rem; color:var(--ink); border-bottom:1px solid var(--line); }
.search-results a:hover { background: rgba(34,211,238,.08); }
.trust-row { display:flex; flex-wrap:wrap; gap:.8rem; list-style:none; padding:0; margin:1.2rem 0 0; }
.trust-row li {
  display:inline-flex; align-items:center; gap:.45rem; color:var(--muted); font-size:.92rem;
  background: rgba(255,255,255,.03); border:1px solid var(--line); padding:.45rem .75rem; border-radius:999px;
}
.hero-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius: 24px; padding:1.2rem; box-shadow: var(--shadow);
}
.hero-panel h2 { margin:.2rem 0 .8rem; font-size:1rem; color:var(--muted); font-weight:600; }
.quick-links { display:grid; gap:.55rem; }
.quick-links a {
  display:flex; align-items:center; gap:.7rem; padding:.75rem .85rem; border-radius:14px;
  background: var(--surface-2); color:var(--ink); border:1px solid transparent;
}
.quick-links a:hover { border-color: rgba(34,211,238,.35); }
.quick-links i { width:1.4rem; text-align:center; color:var(--accent); }

.section { padding: 2.6rem 0; }
.section-alt { background: rgba(255,255,255,.02); border-block:1px solid var(--line); }
.section-head { display:flex; justify-content:space-between; gap:1rem; align-items:end; margin-bottom:1.2rem; flex-wrap:wrap; }
.section-head h2 { margin:0; font-size:1.55rem; letter-spacing:-.02em; }
.section-head p { margin:.35rem 0 0; color:var(--muted); }

.category-grid, .tool-grid, .template-grid, .feature-grid {
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.category-card, .tool-card, .template-card, .feature, .sidebar-card, .tool-panel, .faq details {
  background: rgba(21,28,44,.9);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.category-card, .tool-card, .template-card {
  padding:1.15rem 1.2rem; color:inherit; text-decoration:none; transition: transform .15s ease, border-color .15s, background .15s;
}
.category-card:hover, .tool-card:hover, .template-card:hover {
  transform: translateY(-3px); border-color: rgba(34,211,238,.35); background: rgba(26,35,54,.95); color:inherit;
}
.card-icon {
  width:2.4rem; height:2.4rem; border-radius:12px; display:grid; place-items:center; margin-bottom:.75rem;
  background: rgba(34,211,238,.12); color: var(--accent); font-size:1.05rem;
}
.category-card h3, .tool-card h3, .template-card h3, .feature h3 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.category-card p, .tool-card p, .template-card p, .feature p { margin:0; color:var(--muted); font-size:.9rem; }
.tool-cat { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700; color:var(--accent-2); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem; }
.link-arrow { display:inline-flex; align-items:center; gap:.35rem; margin-top:.85rem; color:var(--accent); font-weight:700; font-size:.88rem; }
.feature { padding:1.2rem; }
.feature i { color:var(--accent-3); margin-bottom:.5rem; font-size:1.2rem; }

.page-hero { padding: 2.2rem 0 1.1rem; }
.page-hero h1 { margin:.45rem 0 .55rem; font-size:clamp(1.7rem, 3vw, 2.5rem); letter-spacing:-.02em; }
.lead { color:var(--muted); max-width:70ch; }
.privacy-note { color:#99f6e4; font-weight:600; font-size:.92rem; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; margin:0; color:var(--muted); font-size:.86rem; }
.breadcrumbs a { color:var(--muted); }

.tool-layout { display:grid; grid-template-columns: 1fr 290px; gap:1.2rem; padding-bottom:2.5rem; align-items:start; }
.tool-panel { padding:1.25rem; }
.tool-sidebar { display:grid; gap:1rem; }
.sidebar-card { padding:1rem; }
.sidebar-card h2 { margin:0 0 .7rem; font-size:1rem; }
.sidebar-links { list-style:none; padding:0; margin:0 0 1rem; }
.sidebar-links a { display:flex; align-items:center; gap:.45rem; padding:.4rem 0; color:var(--ink); border-bottom:1px solid var(--line); font-size:.9rem; }
.sidebar-links a[aria-current="page"] { color:var(--accent); font-weight:700; }

label.field { display:block; font-weight:600; margin:0 0 .35rem; font-size:.9rem; }
textarea, input[type=text], input[type=number], input[type=password], input[type=url], input[type=search], input[type=email], select {
  width:100%; border:1px solid var(--line); border-radius:12px; padding:.78rem .9rem; font:inherit;
  background:#0d1526; color:var(--ink);
}
textarea { min-height:140px; resize:vertical; }
.field-group { margin-bottom:1rem; }
.stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap:.6rem; margin-bottom:1rem; }
.stat { background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:.8rem; text-align:center; }
.stat strong { display:block; font-size:1.2rem; }
.stat span { color:var(--muted); font-size:.78rem; }
.output-box, .preview-box {
  margin-top:1rem; padding:1rem; border-radius:12px; background:#060b16; color:#dbeafe;
  white-space:pre-wrap; word-break:break-word; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.86rem;
  border:1px solid var(--line);
}
.muted { color:var(--muted); }
.error-box { background:rgba(251,113,133,.12); color:#fecdd3; border:1px solid rgba(251,113,133,.35); padding:.8rem 1rem; border-radius:12px; }
.success-box { background:rgba(52,211,153,.12); color:#a7f3d0; border:1px solid rgba(52,211,153,.35); padding:.8rem 1rem; border-radius:12px; }
.two-col { display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.check-row { display:flex; flex-wrap:wrap; gap:.8rem; margin:.6rem 0 1rem; }

.ad-slot {
  margin:1rem 0; min-height:58px; border:1px dashed var(--line); border-radius:12px;
  display:grid; place-items:center; color:var(--muted); font-size:.78rem; background:rgba(255,255,255,.02);
}
.ad-slot[data-filled="1"] { border-style:solid; min-height:auto; padding:.5rem; }
.faq details { padding:.9rem 1rem; margin-bottom:.55rem; }
.faq summary { cursor:pointer; font-weight:700; }

.site-footer { border-top:1px solid var(--line); padding:2.2rem 0 1.4rem; margin-top:1rem; background: rgba(0,0,0,.2); }
.footer-grid { display:grid; gap:1.2rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer-grid h2 { font-size:.92rem; margin:0 0 .55rem; color:var(--ink); }
.footer-grid ul { list-style:none; padding:0; margin:0; }
.footer-grid a { color:var(--muted); display:inline-flex; align-items:center; gap:.4rem; padding:.2rem 0; }
.footer-bottom { margin-top:1.4rem; color:var(--muted); font-size:.86rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

.template-meta { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem; }
.pill { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:700; padding:.28rem .55rem; border-radius:999px; background:rgba(167,139,250,.15); color:#ddd6fe; }

.admin-body { background:#070b14; color:var(--ink); min-height:100vh; }
.admin-wrap { width:min(920px, calc(100% - 2rem)); margin:2rem auto; }
.admin-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.25rem; margin-bottom:1rem; }
.admin-nav { display:flex; gap:.8rem; margin-bottom:1rem; }

@media (max-width: 980px) {
  .hero-grid, .tool-layout, .footer-grid { grid-template-columns: 1fr; }
  .nav-toggle { display:inline-block; }
  .site-nav { display:none; width:100%; }
  .site-nav.open { display:block; }
  .site-nav ul { flex-direction:column; padding-bottom:.5rem; }
  .header-inner { flex-wrap:wrap; }
  .header-cta { display:none; }
  .two-col { grid-template-columns:1fr; }
}


/* Icon library */
.hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.icon-lib-toolbar{display:grid;gap:1rem;margin-bottom:1.25rem}
.icon-lib-search{position:relative}
.icon-lib-search i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);opacity:.6}
.icon-lib-search input{width:100%;padding:.9rem 1rem .9rem 2.5rem;border-radius:14px;border:1px solid rgba(148,163,184,.25);background:#0f172a;color:#eef2ff}
.icon-lib-tabs{display:flex;flex-wrap:wrap;gap:.45rem}
.icon-tab{border:1px solid rgba(148,163,184,.25);background:#151c2c;color:#e2e8f0;border-radius:999px;padding:.45rem .85rem;cursor:pointer;font:inherit}
.icon-tab.is-active,.icon-tab[aria-selected="true"]{background:#22d3ee;color:#06202a;border-color:transparent;font-weight:700}
.icon-lib-meta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;color:#9aa6bf;font-size:.92rem}
.icon-copy-mode{display:inline-flex;gap:.4rem;align-items:center}
.icon-copy-mode select{background:#0f172a;color:#eef2ff;border:1px solid rgba(148,163,184,.25);border-radius:10px;padding:.35rem .55rem}
.icon-cdn-strip{display:flex;gap:.75rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#0f172a;border:1px solid rgba(148,163,184,.2);border-radius:14px;padding:.75rem 1rem;margin-bottom:1rem}
.icon-cdn-strip code{font-size:.78rem;color:#a5f3fc;word-break:break-all}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:.65rem}
.icon-tile{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.85rem .5rem;border-radius:14px;border:1px solid rgba(148,163,184,.18);background:#151c2c;color:#eef2ff;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.icon-tile:hover,.icon-tile:focus-visible{transform:translateY(-2px);border-color:#22d3ee;outline:none;background:#182235}
.icon-tile-preview{font-size:1.55rem;line-height:1;min-height:1.7rem;display:grid;place-items:center}
.icon-tile-preview .material-icons{font-size:1.55rem}
.icon-tile-name{font-size:.72rem;text-align:center;word-break:break-word;color:#cbd5e1}
.icon-tile-lib{font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;color:#67e8f9;opacity:.85}
.icon-lib-more{display:flex;justify-content:center;margin-top:1.25rem}
.icon-toast{position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%) translateY(20px);background:#22d3ee;color:#06202a;font-weight:700;padding:.65rem 1rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:80}
.icon-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.btn-sm{padding:.4rem .7rem;font-size:.85rem;border-radius:10px}
.template-card-rich{display:flex;flex-direction:column;padding:0;overflow:hidden}
.template-card-main{display:block;padding:1.1rem 1.1rem .4rem;color:inherit;text-decoration:none}
.template-card-actions{display:flex;gap:.4rem;flex-wrap:wrap;padding:.75rem 1.1rem 1.1rem;border-top:1px solid rgba(148,163,184,.12)}
.muted{color:#9aa6bf}