/* AIMesh Tool Pages — Shared Styles (Purple #7c3aed + Green #4ade80) */
:root{
  --bg-hsl:260 25% 5%;
  --fg-hsl:260 10% 96%;
  --muted-hsl:260 15% 12%;
  --muted-fg-hsl:260 10% 65%;
  --border-hsl:260 15% 16%;
  --primary-hsl:262 83% 58%;
  --primary-fg-hsl:0 0% 100%;
  --accent-hsl:142 71% 45%;
  --ring-hsl:262 83% 58%;
  --card-hsl:260 20% 7%;

  --bg:hsl(var(--bg-hsl));
  --fg:hsl(var(--fg-hsl));
  --muted:hsl(var(--muted-hsl));
  --muted-fg:hsl(var(--muted-fg-hsl));
  --border:hsl(var(--border-hsl));
  --primary:hsl(var(--primary-hsl));
  --primary-fg:hsl(var(--primary-fg-hsl));
  --accent:hsl(var(--accent-hsl));
  --card-bg:hsl(var(--card-hsl));

  --radius:18px;
  --radius-sm:10px;
  --shadow:0 1px 3px hsl(var(--fg-hsl)/.04);
  --shadow-hover:0 20px 54px -42px hsl(var(--primary-hsl)/.45);
  --font:-apple-system,BlinkMacSystemFont,"DM Sans","Space Grotesk","PingFang SC","Noto Sans SC","Microsoft YaHei","Helvetica Neue",sans-serif;
}

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

html{font-size:16px;-webkit-text-size-adjust:100%;color-scheme:dark}
body{
  font-family:var(--font);background:var(--bg);color:var(--fg);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:hsl(var(--fg-hsl)/.12);border-radius:3px}

/* === Nav === */
.nav{
  position:sticky;top:0;z-index:50;
  background:hsl(var(--bg-hsl)/.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid hsl(var(--border-hsl)/.6);
}
.nav-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:56px;
}
.nav-brand{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  padding:8px 14px;border-radius:var(--radius-sm);font-size:14px;color:var(--muted-fg);
  transition:all .2s;
}
.nav-links a:hover{color:var(--fg);background:hsl(var(--muted-hsl)/.42)}
.nav-cta{
  background:var(--primary)!important;color:var(--primary-fg)!important;
  font-weight:600;padding:8px 18px!important;border-radius:var(--radius-sm)!important;
}

/* === Backward-compat topbar === */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;border-bottom:1px solid hsl(var(--border-hsl)/.4);margin-bottom:28px
}
.topbar-logo{display:flex;align-items:center;gap:10px;color:var(--fg);font-weight:700;font-size:16px;text-decoration:none}
.topbar-links{display:flex;gap:12px;align-items:center}
.topbar-links a,.topbar-links button{
  font-size:13px;color:var(--muted-fg);text-decoration:none;padding:6px 12px;border-radius:8px;
  transition:all .2s;background:none;border:none;cursor:pointer;font-family:inherit
}
.topbar-links a:hover,.topbar-links button:hover{background:hsl(var(--primary-hsl)/.08);color:var(--primary)}
.topbar-user{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:20px;background:var(--muted);border:1px solid hsl(var(--border-hsl)/.4);font-size:13px;color:var(--muted-fg)}
.topbar-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#4ade80);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}

/* === Layout === */
.app{max-width:1200px;margin:0 auto;padding:0 20px 60px}

/* === Card === */
.card{
  background:var(--card-bg);border:1px solid hsl(var(--border-hsl)/.5);
  border-radius:var(--radius);padding:28px;margin-bottom:16px;
  box-shadow:var(--shadow)
}
.card h1{font-size:22px;margin-bottom:8px}
.card h2{font-size:17px;margin-bottom:16px}
.card p.sub{color:var(--muted-fg);font-size:14px;margin-bottom:20px}

/* === Buttons === */
.btn{
  padding:10px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;
  cursor:pointer;border:none;transition:all .2s;font-family:inherit;
  display:inline-flex;align-items:center;gap:8px
}
.btn-primary{
  background:var(--primary);color:var(--primary-fg);
  box-shadow:0 4px 20px hsl(var(--primary-hsl)/.3);
}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 8px 32px hsl(var(--primary-hsl)/.4)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-ghost{
  background:var(--muted);color:var(--muted-fg);
  border:1px solid hsl(var(--border-hsl)/.4)
}
.btn-ghost:hover{background:hsl(var(--primary-hsl)/.08);color:var(--primary)}

/* === Inputs === */
.input{
  width:100%;padding:11px 14px;border-radius:var(--radius-sm);
  background:var(--muted);border:1px solid hsl(var(--border-hsl)/.6);
  color:var(--fg);font-size:14px;font-family:inherit;outline:none;transition:.2s
}
.input:focus{border-color:hsl(var(--primary-hsl)/.5)}
.input::placeholder{color:hsl(var(--muted-fg-hsl)/.5)}
textarea.input{resize:vertical;min-height:80px}

/* === Tags === */
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500}
.tag-green{background:hsl(142 71% 45%/.12);color:hsl(142 71% 45%)}
.tag-purple{background:hsl(var(--primary-hsl)/.12);color:var(--primary)}

/* === Modal === */
.modal-overlay{
  position:fixed;inset:0;z-index:99;
  background:hsl(var(--bg-hsl)/.75);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center
}
.modal{
  background:var(--card-bg);border:1px solid hsl(var(--border-hsl)/.6);
  border-radius:var(--radius);padding:32px 28px;max-width:400px;width:90%;
  box-shadow:0 24px 80px hsl(var(--bg-hsl)/.8);
  animation:fadeUp .3s ease
}
.modal h2{font-size:20px;margin-bottom:6px}
.modal .sub{color:var(--muted-fg);font-size:14px;margin-bottom:24px}
.modal .error{color:#ef4444;font-size:12px;margin-top:8px;display:none}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

@media(min-width:768px){
  .nav-inner{padding:0 32px;height:64px}
  .nav-links{gap:8px}
  .nav-links a{padding:8px 16px;font-size:15px}
  .app{padding:0 32px 60px}
}