/* /public/tools/seo/assets/seo.css
   Best Nepali SEO Tools - maheshgupta.com.np
*/
:root{
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --primary:#2563eb;
  --primary-dark:#1e40af;
  --secondary:#7e22ce;
  --accent:#f59e0b;
  --light:#f8fafc;
  --dark:#0b0e14;
  --text:#0f172a;
  --text-muted:#64748b;
  --card:#ffffff;
  --card-dark:#141a22;
  --border:rgba(15,23,42,.10);
  --border-dark:rgba(255,255,255,.10);
  --ok:#10b981;
  --bad:#ef4444;
  --warn:#f59e0b;
  --bg:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);
  --bg-dark:linear-gradient(135deg,#0b0e14 0%,#1e293b 100%);
  --header-bg:rgba(255,255,255,.90);
  --header-bg-dark:rgba(15,23,42,.90);
  --transition:all .25s ease;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:var(--transition);
}
body.dark{background:var(--bg-dark); color:#e6edf3;}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.navbar{
  position:sticky;top:0;z-index:100;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding: .9rem 0;
}
body.dark .navbar{background:var(--header-bg-dark); border-color:var(--border-dark);}

.header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand-badge{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 10px 20px rgba(37,99,235,.25);
  color:#fff;
}
.brand-title{font-weight:800;font-size:1.15rem;line-height:1.1}
.brand-sub{font-size:.85rem;color:var(--text-muted)}
body.dark .brand-sub{color:#a0aec0}

.nav-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.btn{
  appearance:none;border:1px solid var(--border);
  background:rgba(255,255,255,.7);
  color:var(--text);
  padding:.55rem .85rem;border-radius:9999px;
  cursor:pointer;transition:var(--transition);
  text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:.92rem;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border-color:transparent;color:#fff;
}
.btn.ghost{background:transparent}
body.dark .btn{border-color:var(--border-dark); background:rgba(20,26,34,.65); color:#e6edf3;}
body.dark .btn.ghost{background:transparent}

.toggle{
  width:44px;height:44px;border-radius:9999px;
  display:grid;place-items:center;
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
  cursor:pointer;transition:var(--transition);
}
.toggle:hover{transform:rotate(10deg)}
body.dark .toggle{border-color:var(--border-dark); background:rgba(20,26,34,.65); color:#e6edf3;}

.hero{padding:3.25rem 0 1.25rem;text-align:center}
.hero h1{
  margin:.25rem 0 1rem;
  font-size:clamp(2rem,4vw,3.25rem);
  font-weight:900;
  background:linear-gradient(to right,var(--primary),var(--secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{margin:0 auto 1.2rem;max-width:780px;color:var(--text-muted);font-size:1.05rem;line-height:1.6}
body.dark .hero p{color:#cbd5e1}

.controls{
  display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;
  margin:1.25rem auto 0;max-width:920px;
}
.input, select, textarea{
  width:100%;
  padding:.85rem 1rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
  color:var(--text);
  outline:none;transition:var(--transition);
}
textarea{min-height:160px;resize:vertical}
.input:focus, select:focus, textarea:focus{border-color:rgba(37,99,235,.55); box-shadow:0 0 0 4px rgba(37,99,235,.12)}
body.dark .input, body.dark select, body.dark textarea{
  background:rgba(20,26,34,.78);
  border-color:var(--border-dark);
  color:#e6edf3;
}
.field{min-width:min(520px,100%);flex:1}
.field.small{min-width:min(260px,100%);max-width:340px;flex:0 1 340px}

.grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  padding:1.25rem 0 2.5rem;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:var(--transition);
  position:relative;
}
.card:hover{transform:translateY(-4px)}
body.dark .card{background:var(--card-dark); border-color:var(--border-dark);}

.card-top{
  padding:1.1rem 1.1rem .25rem;
  display:flex;gap:.8rem;align-items:flex-start;
}
.icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(126,34,206,.15));
  color:var(--primary);
  flex:0 0 auto;
}
body.dark .icon{background:linear-gradient(135deg,rgba(96,165,250,.18),rgba(168,85,247,.18)); color:#60a5fa;}
.card h3{margin:0;font-size:1.05rem;font-weight:800}
.card p{margin:.35rem 0 0;color:var(--text-muted);line-height:1.5;font-size:.95rem}
body.dark .card p{color:#a0aec0}
.card-bottom{
  padding: .9rem 1.1rem 1.1rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
}
.badge{
  font-size:.78rem;font-weight:800;
  padding:.25rem .55rem;border-radius:9999px;
  background:rgba(15,23,42,.06);
  color:var(--text-muted);
}
body.dark .badge{background:rgba(255,255,255,.08); color:#cbd5e1;}

.page{
  padding:1.5rem 0 2.75rem;
}
.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
}
body.dark .panel{background:var(--card-dark); border-color:var(--border-dark);}
.panel h2{margin:.25rem 0 1rem;font-size:1.4rem}
.help{color:var(--text-muted);margin-top:-.4rem;margin-bottom:1rem;line-height:1.55}
body.dark .help{color:#a0aec0}

.row{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:920px){.row{grid-template-columns:1fr 1fr}}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.75rem}

.output{
  width:100%;
  min-height:180px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:.92rem;
}
.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
}
.table th,.table td{
  border-bottom:1px solid rgba(15,23,42,.08);
  padding:.65rem .7rem;text-align:left;font-size:.92rem;
}
body.dark .table th, body.dark .table td{border-color:rgba(255,255,255,.08)}
.table th{background:rgba(15,23,42,.04); font-weight:900}
body.dark .table th{background:rgba(255,255,255,.06)}
.kpi{display:flex;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 0}
.kpi .pill{
  border:1px solid var(--border);
  background:rgba(255,255,255,.7);
  padding:.35rem .55rem;border-radius:9999px;font-weight:800;font-size:.82rem;
}
body.dark .kpi .pill{border-color:var(--border-dark); background:rgba(20,26,34,.65); color:#e6edf3}
.pill.ok{border-color:rgba(16,185,129,.35)}
.pill.bad{border-color:rgba(239,68,68,.35)}
.pill.warn{border-color:rgba(245,158,11,.35)}

footer{padding:2rem 0;text-align:center;color:var(--text-muted);opacity:.9}
body.dark footer{color:#a0aec0}
.small{font-size:.88rem}


/* Alerts */
.alert{
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.08);
  color:inherit;
  padding:.75rem .9rem;
  border-radius:14px;
}
body.dark .alert{border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.12)}