/* ==========================================================================
   AlienWeb — design system
   Warm, editorial, Perplexity-inspired: off-white paper background, teal
   accent, generous whitespace, soft rounded surfaces, mono for tool output.
   ========================================================================== */

:root{
  /* Light (default) palette */
  --bg: #FBFAF7;
  --bg-raised: #FFFFFF;
  --bg-sunken: #F3F1EA;
  --border: #E6E2D8;
  --border-strong: #D8D3C4;
  --text: #1F1E1C;
  --text-muted: #5B5850;
  --text-faint: #8A8676;
  --accent: #1F8181;
  --accent-hover: #186A6A;
  --accent-soft: #E4F1F1;
  --accent-contrast: #FFFFFF;
  --link: #1F8181;
  --danger: #C0523F;
  --success: #2E7D4F;
  --warn: #B8842A;
  --shadow-sm: 0 1px 2px rgba(31,30,28,0.06);
  --shadow-md: 0 4px 16px rgba(31,30,28,0.08);
  --shadow-lg: 0 12px 32px rgba(31,30,28,0.12);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --header-h: 68px;
  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg: #17181A;
  --bg-raised: #1E2022;
  --bg-sunken: #131415;
  --border: #2C2E30;
  --border-strong: #3A3C3E;
  --text: #EDEBE4;
  --text-muted: #A8A497;
  --text-faint: #757269;
  --accent: #3FC1C0;
  --accent-hover: #56D2D1;
  --accent-soft: #1B3536;
  --accent-contrast: #0E1414;
  --link: #3FC1C0;
  --danger: #E28374;
  --success: #6FCB93;
  --warn: #E3B65C;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg: #17181A;
    --bg-raised: #1E2022;
    --bg-sunken: #131415;
    --border: #2C2E30;
    --border-strong: #3A3C3E;
    --text: #EDEBE4;
    --text-muted: #A8A497;
    --text-faint: #757269;
    --accent: #3FC1C0;
    --accent-hover: #56D2D1;
    --accent-soft: #1B3536;
    --accent-contrast: #0E1414;
    --link: #3FC1C0;
    --danger: #E28374;
    --success: #6FCB93;
    --warn: #E3B65C;
    color-scheme: dark;
  }
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .2s ease, color .2s ease;
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:600; line-height:1.2; margin:0 0 .5em; color:var(--text); }
h1{ font-size:clamp(1.9rem,4vw,2.7rem); }
h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; color:var(--text-muted); }
code,pre{ font-family:var(--font-mono); }
.container{ max-width:1180px; margin:0 auto; padding:0 20px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-contrast); padding:10px 16px; border-radius:0 0 8px 0; z-index:200; }
.skip-link:focus{ left:0; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
  height:var(--header-h);
}
.nav-container{ height:var(--header-h); display:flex; align-items:center; gap:20px; }
.logo{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:1.15rem; color:var(--text); flex-shrink:0; }
.logo:hover{ text-decoration:none; }
.logo .mark{ width:30px; height:30px; border-radius:9px; background:var(--accent); display:flex; align-items:center; justify-content:center; color:var(--accent-contrast); font-family:var(--font-serif); font-weight:700; }
.main-nav{ display:flex; align-items:center; gap:22px; margin-left:6px; }
.main-nav a{ color:var(--text-muted); font-size:.94rem; font-weight:500; white-space:nowrap; }
.main-nav a:hover{ color:var(--text); text-decoration:none; }
.header-search{ flex:1; max-width:420px; margin-left:auto; position:relative; }
.header-search input{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.icon-btn{
  width:38px; height:38px; border-radius:var(--radius-pill); border:1px solid var(--border);
  background:var(--bg-raised); color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s ease; flex-shrink:0;
}
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); }
.icon-btn svg{ width:18px; height:18px; }
.theme-toggle .sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .moon{ display:none; }
.menu-toggle{ display:none; }

/* ---------- Search inputs ---------- */
input[type="text"],input[type="search"],input[type="number"],input[type="date"],input[type="url"],input[type="email"],input[type="password"],select,textarea{
  font-family:var(--font-sans); font-size:.95rem; color:var(--text);
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 14px; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{ font-family:var(--font-mono); font-size:.92rem; line-height:1.55; resize:vertical; }
input:focus,select:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.search-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-faint); pointer-events:none; }
.header-search input{ padding-left:38px; border-radius:var(--radius-pill); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:600; font-size:.92rem; cursor:pointer;
  border-radius:var(--radius-pill); padding:11px 22px; border:1px solid transparent;
  transition:.15s ease; white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:var(--accent-contrast); }
.btn-primary:hover{ background:var(--accent-hover); text-decoration:none; }
.btn-secondary{ background:var(--bg-raised); color:var(--text); border-color:var(--border); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }
.btn-sm{ padding:7px 14px; font-size:.82rem; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Hero (home) ---------- */
.hero{ padding:64px 0 40px; text-align:center; }
.hero .eyebrow{ display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:6px 14px; border-radius:var(--radius-pill); margin-bottom:18px; }
.hero h1{ max-width:760px; margin-left:auto; margin-right:auto; }
.hero .lede{ max-width:600px; margin:0 auto 30px; font-size:1.08rem; }
.hero-search-wrap{ max-width:640px; margin:0 auto; position:relative; }
.hero-search-wrap input{ width:100%; padding:18px 24px 18px 52px; border-radius:var(--radius-pill); font-size:1.02rem; box-shadow:var(--shadow-md); }
.hero-search-wrap .search-icon{ left:22px; width:20px; height:20px; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:22px; }
.hero-tags a{ font-size:.83rem; color:var(--text-muted); border:1px solid var(--border); background:var(--bg-raised); padding:6px 14px; border-radius:var(--radius-pill); }
.hero-tags a:hover{ color:var(--accent); border-color:var(--accent); text-decoration:none; }
.no-results{ display:none; text-align:center; padding:50px 20px; color:var(--text-faint); }

/* ---------- Sections / category ---------- */
.section{ padding:36px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px; }
.section-head h2{ margin:0; }
.section-head .count{ color:var(--text-faint); font-size:.85rem; }

/* ---------- Tool grid / cards ---------- */
.tools-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.tool-card{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px; display:flex; flex-direction:column; gap:10px; transition:.15s ease; height:100%;
}
.tool-card:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-2px); text-decoration:none; }
.tool-card .emoji{ width:40px; height:40px; border-radius:11px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.tool-card h3{ margin:0; font-family:var(--font-sans); font-size:1rem; color:var(--text); }
.tool-card p{ margin:0; font-size:.85rem; color:var(--text-muted); flex:1; }
.tool-card .cat-tag{ font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); }

/* ---------- Feature strip ---------- */
.features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.feature{ text-align:center; padding:20px; }
.feature .ico{ width:46px; height:46px; margin:0 auto 12px; border-radius:14px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.feature h3{ font-size:1rem; }
.feature p{ font-size:.88rem; margin:0; }

/* ---------- Tool page ---------- */
.breadcrumbs{ font-size:.82rem; color:var(--text-faint); margin-bottom:14px; }
.breadcrumbs a{ color:var(--text-faint); }
.breadcrumbs a:hover{ color:var(--accent); }
.tool-header{ padding:36px 0 18px; }
.tool-header .cat-tag{ font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
.tool-header h1{ margin:8px 0 10px; }
.tool-header .lede{ max-width:680px; font-size:1.02rem; margin:0; }
.tool-panel{ background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); margin:22px 0; }
.tool-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:16px; }
.field:last-child{ margin-bottom:0; }
.field label{ display:block; font-size:.82rem; font-weight:600; color:var(--text-muted); margin-bottom:7px; }
.field input,.field select,.field textarea{ width:100%; }
.tool-toolbar{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.output-box{ background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; font-family:var(--font-mono); font-size:.92rem; white-space:pre-wrap; word-break:break-word; min-height:52px; }
.result-display{ text-align:center; padding:22px 10px; }
.result-display .big{ font-family:var(--font-serif); font-size:2.6rem; font-weight:700; color:var(--accent); line-height:1; }
.result-display .label{ font-size:.85rem; color:var(--text-muted); margin-top:8px; }
.stat-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.stat-pill{ flex:1; min-width:100px; background:var(--bg-sunken); border-radius:var(--radius-sm); padding:12px 14px; text-align:center; }
.stat-pill .num{ font-weight:700; font-size:1.25rem; color:var(--text); }
.stat-pill .lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); margin-top:2px; }
.badge{ display:inline-block; font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent); }
.copy-feedback{ font-size:.8rem; color:var(--success); opacity:0; transition:opacity .2s; margin-left:6px; }
.copy-feedback.show{ opacity:1; }

/* ---------- Ad slots ---------- */
.ad-slot{ margin:26px 0; text-align:center; }
.ad-slot .ad-label{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px; }
.ad-slot ins{ display:block; }
.ad-slot.ad-inline{ min-height:90px; }

/* ---------- Info / FAQ ---------- */
.tool-info{ margin:34px 0; }
.tool-info h2{ margin-bottom:14px; }
.tool-info ul,.tool-info ol{ color:var(--text-muted); padding-left:1.3em; }
.tool-info li{ margin-bottom:.4em; }
.faq{ border-top:1px solid var(--border); }
.faq details{ border-bottom:1px solid var(--border); padding:16px 2px; }
.faq summary{ cursor:pointer; font-weight:600; color:var(--text); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.3rem; color:var(--accent); flex-shrink:0; }
.faq details[open] summary::after{ content:"\2212"; }
.faq p{ margin:12px 0 0; }
.related-tools{ margin:34px 0; }
.related-tools .tools-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); margin-top:60px; padding:44px 0 28px; background:var(--bg-sunken); }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:26px; }
.footer-brand p{ font-size:.88rem; max-width:280px; }
.footer-col h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin:0 0 12px; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.footer-col a{ font-size:.88rem; color:var(--text-muted); }
.footer-col a:hover{ color:var(--accent); text-decoration:none; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:36px; padding-top:20px; border-top:1px solid var(--border); font-size:.82rem; color:var(--text-faint); }

/* ---------- Static pages (about/privacy/etc) ---------- */
.prose{ max-width:760px; margin:0 auto; padding:40px 0 70px; }
.prose h2{ margin-top:1.6em; }
.prose ul{ color:var(--text-muted); }

/* ---------- Misc utility pages ---------- */
.page-hero{ padding:50px 0 10px; text-align:center; }
.page-hero .lede{ max-width:600px; margin:0 auto; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .tool-grid-2{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .main-nav{ position:fixed; inset:var(--header-h) 0 0 0; background:var(--bg); flex-direction:column; align-items:stretch; padding:20px; gap:4px; transform:translateX(100%); transition:transform .2s ease; overflow-y:auto; }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ padding:12px 6px; border-bottom:1px solid var(--border); font-size:1rem; }
  .header-search{ display:none; }
  .menu-toggle{ display:flex; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero{ padding:44px 0 30px; }
  .tool-header{ padding:26px 0 12px; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .tools-grid{ grid-template-columns:1fr 1fr; }
  .tool-card{ padding:14px; }
  .stat-row{ flex-direction:column; }
}