/* ═══════════════════════════════════════════════════════
   AppTooler — Modern Enterprise Green
   Clean · Professional · Vibrant
   ═══════════════════════════════════════════════════════ */

:root {
  /* Primary green spectrum */
  --brand:        #00D084;
  --brand2:       #10B981;
  --brand-deep:   #059669;
  --brand-dark:   #047857;
  --brand-glow:   rgba(0,208,132,.28);
  --brand-surface:rgba(0,208,132,.06);

  /* Supporting accents */
  --ocean:        #0EA5E9;
  --amber:        #F59E0B;
  --coral:        #F43F5E;

  /* Neutrals */
  --ink:          #0B1220;
  --ink2:         #1E293B;
  --muted:        #64748B;
  --bg:           #F4F7F6;
  --surface:      #FFFFFF;
  --line:         rgba(15,23,42,.07);

  /* Effects */
  --glass:        rgba(255,255,255,.60);
  --glass-border: rgba(255,255,255,.50);
  --shadow:       0 16px 48px rgba(0,208,132,.07), 0 6px 20px rgba(15,23,42,.05);
  --shadow2:      0 20px 56px rgba(0,208,132,.10), 0 8px 24px rgba(15,23,42,.07);
  --shadow-card:  0 8px 32px rgba(0,208,132,.06), 0 2px 8px rgba(15,23,42,.04);
  --shadow-btn:   0 6px 20px rgba(0,208,132,.22);
  --radius:       20px;
  --radius-sm:    14px;

  /* Mesh background */
  --mesh:
    radial-gradient(ellipse 65% 50% at 10% 10%, rgba(0,208,132,.08), transparent),
    radial-gradient(ellipse 50% 50% at 90% 20%, rgba(16,185,129,.06), transparent),
    radial-gradient(ellipse 45% 40% at 50% 90%, rgba(14,165,233,.04), transparent);
}

/* ── RESET & BASE ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { text-decoration: none; color: var(--brand-deep); }
.small-muted { color: var(--muted); }

/* ── KICKER ──────────────────────────────────────────── */
.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(0,208,132,.22);
  background: linear-gradient(135deg, rgba(0,208,132,.10), rgba(16,185,129,.06));
  color: var(--brand-dark);
  font-weight: 800;
  font-size: .9rem;
  backdrop-filter: blur(6px);
}

/* ── NAVBAR ──────────────────────────────────────────── */
.navbar {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.74) !important;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.navbar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep), var(--ocean), var(--brand));
  background-size: 200% 100%;
  animation: navStripe 8s linear infinite;
}
@keyframes navStripe {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.brand-mark {
  width: 36px; height: 36px; border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.50), transparent 45%),
    linear-gradient(135deg, var(--brand), var(--brand-deep));
  box-shadow: 0 8px 24px var(--brand-glow);
}
.navbar .nav-link {
  color: var(--ink);
  font-weight: 500;
  transition: color .2s;
}
.navbar .nav-link:hover { color: var(--brand-deep); }
.navbar .nav-link.active { color: var(--brand-dark); font-weight: 800; }

/* ── MEGA MENU ───────────────────────────────────────── */
.dropdown-mega .dropdown-menu {
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow2);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
}
.mega-menu {
  width: min(1120px, calc(100vw - 24px));
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

@media (min-width: 992px) {
  .mega-menu { left: 50%; right: auto; transform: translateX(-50%); }
  .dropdown-mega:hover > .dropdown-menu { display: block; }
  .dropdown-mega .dropdown-toggle::after { transform: translateY(1px); }
  .open-on-hover:hover > .dropdown-menu { display: block; }
}
@media (max-width: 991.98px) {
  .mega-menu { width: 100%; max-height: none; transform: none; left: 0; right: 0; }
}

.mega-title {
  font-weight: 900;
  letter-spacing: -.01em;
  margin-bottom: .5rem;
  color: var(--brand-dark);
}
.mega-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: .6rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background .18s, transform .18s;
}
.mega-link:hover {
  background: linear-gradient(135deg, rgba(0,208,132,.08), rgba(16,185,129,.05));
  transform: translateX(3px);
}
.mega-link .meta { color: var(--muted); font-size: .88rem; }
.mega-kbd {
  font-size: .78rem; color: var(--muted);
  border: 1px solid rgba(15,23,42,.10);
  border-bottom-width: 2px;
  padding: .12rem .4rem;
  border-radius: .5rem;
  background: #fff;
}
.mega-card {
  border: 1px solid rgba(0,208,132,.18);
  background: linear-gradient(135deg, rgba(0,208,132,.06), rgba(16,185,129,.03));
  border-radius: calc(var(--radius) + 6px);
  padding: 18px;
}
.mega-card .title { font-weight: 900; }
.mega-card .small-muted { line-height: 1.5; }

/* ── CATEGORY SIDEBAR ────────────────────────────────── */
.cat-children {
  margin: .35rem 0 .85rem 2.35rem;
  padding-left: .8rem;
  border-left: 2px solid rgba(0,208,132,.18);
  display: flex; flex-direction: column; gap: .25rem;
}
.cat-child {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem;
  padding: .4rem .55rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  transition: background .18s, transform .18s;
}
.cat-child:hover {
  background: rgba(0,208,132,.07);
  transform: translateX(2px);
}
.cat-child.active {
  background: linear-gradient(135deg, rgba(0,208,132,.14), rgba(16,185,129,.08));
  font-weight: 800;
  color: var(--brand-dark);
}
.cat-child .tiny { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.cat-child[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ── ALL TOOLS DIRECTORY ─────────────────────────────── */
.cat-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; width: 100%; text-align: left;
  padding: .75rem .9rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.8);
  transition: all .2s;
}
.cat-item:hover {
  background: rgba(0,208,132,.06);
  border-color: rgba(0,208,132,.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,208,132,.07);
}
.cat-item.active {
  background: linear-gradient(135deg, rgba(0,208,132,.12), rgba(16,185,129,.07));
  border-color: rgba(0,208,132,.28);
}
.cat-item .left { display: flex; align-items: center; gap: .6rem; }
.cat-item .count { font-size: .85rem; color: var(--muted); }

.dir-cat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 20px;
}
.dir-cat + .dir-cat { margin-top: 16px; }
.dir-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dir-head h3 { margin: 0; }
.dir-tools { margin-top: 14px; }
.icon-pill.icon-sm { width: 40px; height: 40px; border-radius: var(--radius-sm); }

.tool-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(0,208,132,.12);
  background: rgba(255,255,255,.85);
  font-size: .9rem;
  transition: border-color .18s, background .18s;
}
.tool-chip:hover {
  border-color: rgba(0,208,132,.25);
  background: rgba(0,208,132,.05);
}

/* ── BADGES ──────────────────────────────────────────── */
.badge-soft {
  background: linear-gradient(135deg, rgba(0,208,132,.12), rgba(16,185,129,.08));
  border: 1px solid rgba(0,208,132,.22);
  color: var(--brand-dark);
  font-weight: 800;
}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-brand {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 800;
  box-shadow: var(--shadow-btn);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,208,132,.30);
  filter: brightness(1.06);
  color: #fff !important;
}
.btn-ink {
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: var(--ink2);
  --bs-btn-hover-border-color: var(--ink2);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  font-weight: 800;
  transition: transform .2s, box-shadow .2s;
}
.btn-ink:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15,23,42,.15);
}
.btn-soft {
  background: linear-gradient(135deg, rgba(0,208,132,.08), rgba(16,185,129,.05));
  border: 1px solid rgba(0,208,132,.18);
  color: var(--brand-dark);
  font-weight: 800;
  transition: all .2s;
}
.btn-soft:hover {
  background: linear-gradient(135deg, rgba(0,208,132,.14), rgba(16,185,129,.09));
  transform: translateY(-1px);
  color: var(--brand-dark);
}

/* ── HERO ────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    var(--mesh),
    linear-gradient(175deg, #F4F7F6 0%, #E6F5EE 40%, #F0FAFB 100%);
}
.hero::before {
  content: "";
  position: absolute;
  top: -35%; right: -8%;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,208,132,.10), transparent 65%);
  animation: heroOrb1 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -25%; left: -6%;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,233,.07), transparent 65%);
  animation: heroOrb2 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroOrb1 {
  0%   { transform: translate(0, 0)   scale(1); }
  100% { transform: translate(-50px, 35px) scale(1.12); }
}
@keyframes heroOrb2 {
  0%   { transform: translate(0, 0)   scale(1); }
  100% { transform: translate(40px, -25px) scale(1.08); }
}
.hero h1 {
  letter-spacing: -.04em;
  line-height: 1.02;
  color: var(--ink);
}
.highlight {
  background: linear-gradient(180deg, transparent 55%, rgba(0,208,132,.20) 55%);
  border-radius: 12px;
  padding: 0 .25rem;
}
.kbd-hint {
  border: 1px solid rgba(0,208,132,.16);
  border-bottom-width: 2px;
  padding: .15rem .4rem;
  border-radius: .5rem;
  font-size: .85rem;
  color: var(--muted);
  background: #fff;
}

/* ── CARDS ────────────────────────────────────────────── */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform .22s, box-shadow .22s;
}
.card:hover { box-shadow: var(--shadow-card); }
.card-lite {
  border: 1px solid rgba(0,208,132,.10);
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 36px rgba(0,208,132,.05);
}

.section-title { letter-spacing: -.02em; }

.icon-pill {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(0,208,132,.12), rgba(16,185,129,.07));
  border: 1px solid rgba(0,208,132,.18);
  color: var(--brand-dark);
  font-size: 1.1rem;
}

.tool-card { transition: transform .22s ease, box-shadow .22s ease; }
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow2);
}

.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(0,208,132,.10);
  background: rgba(255,255,255,.84);
  color: var(--ink);
  font-size: .85rem;
  backdrop-filter: blur(6px);
}

.stat {
  border: 1px solid rgba(0,208,132,.10);
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 18px;
  padding: 16px;
  transition: transform .2s, box-shadow .2s;
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,208,132,.08);
}
.stat .num {
  font-weight: 900; font-size: 1.6rem; letter-spacing: -.02em;
  color: var(--brand-deep);
}

.hr-soft { border: 0; border-top: 1px solid var(--line); opacity: 1; }

/* ── DASHBOARD MOCK ──────────────────────────────────── */
.mock {
  border: 1px solid rgba(0,208,132,.10);
  border-radius: 24px;
  background: linear-gradient(180deg, #fff 0%, #F0FAF5 100%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mock-top {
  display: flex; gap: 8px; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,208,132,.08);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
}
.dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(15,23,42,.14); }
.dot.g { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.mock-body { padding: 18px; }
.mock-row {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(0,208,132,.07);
  border-radius: 16px;
  background: #fff;
  transition: transform .18s, box-shadow .18s;
}
.mock-row:hover {
  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(0,208,132,.07);
}
.mock-row + .mock-row { margin-top: 10px; }
.mock-bar {
  height: 10px; border-radius: 999px;
  background: rgba(0,208,132,.06);
  overflow: hidden;
  flex: 1;
}
.mock-bar > span {
  display: block; height: 100%;
  width: var(--w, 65%);
  background: linear-gradient(90deg, var(--brand), var(--brand-deep), var(--ocean));
  background-size: 200% 100%;
  animation: barShimmer 4s ease-in-out infinite;
}
@keyframes barShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── TOOL PAGES ──────────────────────────────────────── */
.page-hero {
  border-bottom: 1px solid var(--line);
  background: var(--mesh), var(--bg);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-deep); }
.codebox {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .92rem;
  background: linear-gradient(160deg, #0B1220, #1E293B);
  color: #E2E8F0;
  border-radius: 16px;
  padding: 16px;
  overflow: auto;
  border: 1px solid rgba(0,208,132,.12);
}
.article h2, .article h3 { margin-top: 1.25rem; }
.article p { line-height: 1.78; color: var(--ink); }

/* ── FOOTER ──────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 55% 50% at 15% 100%, rgba(0,208,132,.04), transparent),
    radial-gradient(ellipse 45% 45% at 85% 100%, rgba(14,165,233,.03), transparent),
    #FFFFFF;
}
.footer a { color: var(--muted); transition: color .18s; }
.footer a:hover { color: var(--brand-deep); text-decoration: underline; }

/* ── DROPDOWN FOCUS ──────────────────────────────────── */
.navbar .dropdown-toggle:focus:not(:focus-visible),
.navbar .dropdown-toggle:active,
.navbar .dropdown-toggle.show {
  outline: none !important;
  box-shadow: none !important;
}

/* ── REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .card, .tool-card, .stat, .cat-item, .mock-row, .mega-link, .cat-child {
    will-change: transform;
  }
}

/* ── SELECTION ───────────────────────────────────────── */
::selection {
  background: rgba(0,208,132,.16);
  color: var(--ink);
}

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,208,132,.18);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,208,132,.30); }