/* ═══════════════════════════════════════════════════
   SmartiTools — Unified Design System
   One file, all pages, all tools
═══════════════════════════════════════════════════ */

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

/* ── CSS Variables ── */
:root {
  --brand-blue:     #2563eb;
  --brand-blue-h:   #1d4ed8;
  --brand-cyan:     #22d3ee;
  --brand-font:     'Inter', sans-serif;
  --radius:         12px;
  --radius-sm:      8px;
  --transition:     0.25s ease;
}

:root,
[data-theme="dark"] {
  --bg:             #0f172a;
  --bg-alt:         #080e1a;
  --card:           #1e293b;
  --card-hover:     #263348;
  --border:         #334155;
  --text:           #e2e8f0;
  --text-muted:     #94a3b8;
  --text-heading:   #f1f5f9;
  --navbar-bg:      #1e293b;
  --footer-bg:      #0d1526;
  --input-bg:       #0f172a;
  --input-border:   #334155;
  --shadow:         0 4px 24px rgba(0,0,0,0.4);
}

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

html { scroll-behavior: smooth; }

body {
  font-family:      var(--brand-font);
  background-color: var(--bg);
  background-image: radial-gradient(rgba(148,163,184,0.13) 1px, transparent 1px);
  background-size:  28px 28px;
  color:            var(--text);
  transition:       background-color var(--transition), color var(--transition);
  line-height:      1.6;
}

/* ── Navbar ── */
.st-navbar {
  position:         sticky;
  top:              0;
  z-index:          1000;
  background:       rgba(15,23,42,0.72);
  backdrop-filter:  blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:    1px solid var(--border);
  padding:          0 2rem;
  height:           64px;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  transition:       background var(--transition);
  box-shadow:       var(--shadow);
}


.st-logo {
  display:          flex;
  align-items:      center;
  gap:              10px;
  text-decoration:  none;
  font-size:        1.25rem;
  font-weight:      800;
  color:            var(--text-heading);
}


.st-nav-links {
  display:          flex;
  align-items:      center;
  gap:              0.25rem;
  list-style:       none;
}

.st-nav-links a {
  text-decoration:  none;
  color:            var(--text-muted);
  font-size:        0.9rem;
  font-weight:      500;
  padding:          0.4rem 0.75rem;
  border-radius:    var(--radius-sm);
  transition:       color var(--transition), background var(--transition);
}

.st-nav-links a:hover {
  color:            var(--text);
  background:       var(--card);
}

/* Dropdown — position relative to navbar so it centers on screen */
.st-dropdown { position: static; }

.st-navbar { position: relative; }

.st-dropdown-menu {
  position:         absolute;
  top:              100%;
  left:             50%;
  transform:        translateX(-50%);
  background:       var(--card);
  border:           1px solid var(--border);
  border-radius:    var(--radius);
  width:            min(1300px, 96vw);
  box-shadow:       var(--shadow);
  z-index:          999;
  display:          none;
  flex-direction:   column;
  margin-top:       0;
  overflow:         hidden;
}

/* Category columns layout */
.st-dd-columns {
  display:          flex;
  align-items:      flex-start;
}

.st-dd-col {
  flex:             1;
  padding:          0.85rem 0.65rem;
  border-right:     1px solid var(--border);
  min-width:        0;
}
.st-dd-col:last-child { border-right: none; }

.st-dd-col-hd {
  display:          flex;
  align-items:      center;
  gap:              0.3rem;
  font-size:        0.6rem;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.1em;
  color:            var(--text-muted);
  margin-bottom:    0.5rem;
  padding-bottom:   0.4rem;
  border-bottom:    2px solid var(--col-color, var(--border));
  white-space:      nowrap;
}

.st-dd-col a {
  display:          flex;
  align-items:      center;
  gap:              0.4rem;
  padding:          0.28rem 0.35rem;
  border-radius:    var(--radius-sm);
  color:            var(--text);
  font-size:        0.8rem;
  white-space:      nowrap;
  text-decoration:  none;
  transition:       background 0.15s, color 0.15s;
}
.st-dd-col a:hover { background: var(--bg); color: var(--text-heading); }

.st-dd-viewall {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.4rem;
  padding:          0.55rem;
  border-top:       1px solid var(--border);
  color:            var(--brand-cyan) !important;
  font-weight:      700;
  font-size:        0.8rem;
  letter-spacing:   0.03em;
  text-decoration:  none;
  transition:       background 0.15s;
}
.st-dd-viewall:hover { background: var(--bg); }

/* Keep dropdown open while hovering menu */
.st-dropdown:hover .st-dropdown-menu,
.st-dropdown-menu:hover { display: flex; }

.st-nav-actions {
  display:          flex;
  align-items:      center;
  gap:              0.75rem;
}

/* Theme toggle */
.st-theme-btn {
  background:       var(--card);
  border:           1px solid var(--border);
  color:            var(--text);
  width:            38px;
  height:           38px;
  border-radius:    var(--radius-sm);
  cursor:           pointer;
  font-size:        1rem;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       all var(--transition);
}

.st-theme-btn:hover { border-color: var(--brand-blue); }

/* Signup button */
.st-signup-btn {
  background:       var(--brand-blue);
  color:            #fff;
  border:           none;
  padding:          0.45rem 1.1rem;
  border-radius:    var(--radius-sm);
  font-size:        0.875rem;
  font-weight:      600;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background var(--transition);
}

.st-signup-btn:hover { background: var(--brand-blue-h); }

/* User pill (shown when signed in) */
.st-user-pill {
  display:          flex;
  align-items:      center;
  gap:              0.5rem;
  background:       var(--card);
  border:           1px solid var(--border);
  border-radius:    999px;
  padding:          0.25rem 0.65rem 0.25rem 0.25rem;
  transition:       border-color var(--transition);
}

.st-user-pill:hover { border-color: var(--brand-blue); }

.st-user-avatar {
  width:            28px;
  height:           28px;
  border-radius:    50%;
  object-fit:       cover;
  flex-shrink:      0;
}

.st-user-name {
  font-size:        0.85rem;
  font-weight:      600;
  color:            var(--text);
  max-width:        80px;
  overflow:         hidden;
  text-overflow:    ellipsis;
  white-space:      nowrap;
}

.st-signout-btn {
  background:       none;
  border:           none;
  color:            var(--text-muted);
  cursor:           pointer;
  font-size:        0.85rem;
  padding:          0.15rem 0.25rem;
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       color var(--transition), background var(--transition);
  margin-left:      0.1rem;
}

.st-signout-btn:hover {
  color:            #f87171;
  background:       rgba(248,113,113,0.1);
}

/* Modal divider ("or use email") */
.st-modal-divider {
  display:          flex;
  align-items:      center;
  gap:              0.75rem;
  margin:           1rem 0;
  color:            var(--text-muted);
  font-size:        0.8rem;
}

.st-modal-divider::before,
.st-modal-divider::after {
  content:          '';
  flex:             1;
  height:           1px;
  background:       var(--border);
}

/* Mobile menu */
.st-hamburger {
  display:          none;
  background:       none;
  border:           none;
  color:            var(--text);
  font-size:        1.4rem;
  cursor:           pointer;
}

/* ── Buttons ── */
.btn {
  display:          inline-flex;
  align-items:      center;
  gap:              8px;
  padding:          0.65rem 1.4rem;
  border-radius:    var(--radius-sm);
  font-family:      var(--brand-font);
  font-size:        0.9rem;
  font-weight:      600;
  cursor:           pointer;
  text-decoration:  none;
  border:           none;
  transition:       all var(--transition);
}

.btn-primary {
  background:       var(--brand-blue);
  color:            #fff;
}

.btn-primary:hover { background: var(--brand-blue-h); transform: translateY(-1px); }

.btn-outline {
  background:       transparent;
  color:            var(--text);
  border:           1px solid var(--border);
}

.btn-outline:hover { border-color: var(--brand-blue); color: var(--brand-blue); }

/* ── Cards ── */
.st-card {
  background:       var(--card);
  border:           1px solid var(--border);
  border-radius:    var(--radius);
  padding:          1.5rem;
  transition:       all var(--transition);
  box-shadow:       var(--shadow);
}

.st-card:hover {
  border-color:     var(--brand-blue);
  transform:        translateY(-3px);
  box-shadow:       0 8px 32px rgba(37,99,235,0.15);
}

/* ── Tool Icon ── */
.tool-icon {
  width:            52px;
  height:           52px;
  border-radius:    var(--radius-sm);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        1.5rem;
  margin-bottom:    1rem;
  background:       rgba(37,99,235,0.1);
  color:            var(--brand-cyan);
}

/* ── Section ── */
.st-section {
  padding:          5rem 2rem;
  max-width:        1200px;
  margin:           0 auto;
}
.st-section--no-top { padding-top: 0; }
.st-section--no-bottom { padding-bottom: 0; }
.section-header--split { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.btn--shrink0 { flex-shrink: 0; }

.st-section-title {
  font-size:        2rem;
  font-weight:      800;
  color:            var(--text-heading);
  margin-bottom:    0.5rem;
}

.st-section-sub {
  color:            var(--text-muted);
  margin-bottom:    3rem;
  font-size:        1rem;
}

/* ── Grid ── */
.tools-grid {
  display:          grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:              1.5rem;
}

/* ── Footer ── */
.st-footer {
  position:   relative;
  background: #080c1a;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 4rem;
  padding:    0 2rem;
}

/* Gradient accent line at very top */
.st-footer::before {
  content: '';
  display: block;
  height:  2px;
  background: linear-gradient(90deg, transparent 0%, #22d3ee 35%, #2563eb 65%, transparent 100%);
  opacity: 0.7;
}

.st-footer-inner {
  max-width: 1200px;
  margin:    0 auto;
  padding:   3rem 0 0;
}

/* 6-column footer: brand + 4 cat cols + company */
.st-footer-body {
  display:               grid;
  grid-template-columns: 200px repeat(4, 1fr) 160px;
  gap:                   2rem 2rem;
  margin-bottom:         2.5rem;
  align-items:           start;
}

/* Brand column */
.st-footer-tagline {
  color:        #8899b0;
  font-size:    0.82rem;
  line-height:  1.7;
  margin:       0.75rem 0 1.25rem;
  max-width:    200px;
}
.st-footer-all-link {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4rem;
  font-size:       0.8rem;
  font-weight:     700;
  color:           var(--brand-cyan);
  text-decoration: none;
  border:          1px solid rgba(34,211,238,0.25);
  border-radius:   6px;
  padding:         0.32rem 0.7rem;
  transition:      all 0.2s;
  background:      rgba(34,211,238,0.05);
}
.st-footer-all-link:hover { background: rgba(34,211,238,0.12); gap: 0.65rem; }

/* Category columns */
.st-footer-cat-col {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}
.st-footer-cat-section {
  display:        flex;
  flex-direction: column;
}
.st-footer-cat-hd {
  display:        flex;
  align-items:    center;
  gap:            0.35rem;
  font-size:      0.6rem;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          #94a3b8;
  margin-bottom:  0.6rem;
  padding-bottom: 0.4rem;
  border-bottom:  2px solid var(--cat-color, rgba(255,255,255,0.08));
  white-space:    nowrap;
}
.st-footer-cat-link {
  display:         block;
  color:           #7a8fa8;
  font-size:       0.82rem;
  text-decoration: none;
  padding:         0.2rem 0;
  transition:      color 0.15s;
  white-space:     nowrap;
}
.st-footer-cat-link:hover { color: var(--brand-cyan); }

/* Section headings (Company col) */
.st-footer-h4 {
  font-size:      0.6rem;
  font-weight:    800;
  color:          #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom:  0.6rem;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid rgba(255,255,255,0.06);
}

/* Company links */
.st-footer-links-col { display: flex; flex-direction: column; gap: 0.1rem; }
.st-footer-link {
  display:         flex;
  align-items:     center;
  gap:             0.55rem;
  color:           #7a8fa8;
  font-size:       0.82rem;
  text-decoration: none;
  padding:         0.35rem 0.4rem;
  border-radius:   6px;
  transition:      all 0.18s;
}
.st-footer-link i { font-size: 0.72rem; width: 14px; color: #4e6280; transition: color 0.18s; }
.st-footer-link:hover { color: var(--brand-cyan); background: rgba(34,211,238,0.05); }
.st-footer-link:hover i { color: var(--brand-cyan); }

/* Bottom bar */
.st-footer-bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         1.25rem 0 1.5rem;
  border-top:      1px solid rgba(255,255,255,0.05);
  color:           #4e6280;
  font-size:       0.78rem;
  gap:             1rem;
}
.st-footer-copy {}
.st-footer-made { letter-spacing: 0.01em; }

/* ── Signup Modal ── */
.st-modal-overlay {
  display:          none;
  position:         fixed;
  inset:            0;
  background:       rgba(0,0,0,0.6);
  z-index:          9999;
  align-items:      center;
  justify-content:  center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter:  blur(4px);
}

.st-modal-overlay.active { display: flex; }

.st-modal {
  background:       var(--card);
  border:           1px solid var(--border);
  border-radius:    var(--radius);
  padding:          2.5rem;
  width:            100%;
  max-width:        420px;
  position:         relative;
  box-shadow:       0 20px 60px rgba(0,0,0,0.3);
}

.st-modal-close {
  position:         absolute;
  top:              1rem;
  right:            1rem;
  background:       none;
  border:           none;
  color:            var(--text-muted);
  font-size:        1.3rem;
  cursor:           pointer;
}

.st-modal h2 {
  font-size:        1.5rem;
  font-weight:      800;
  color:            var(--text-heading);
  margin-bottom:    0.5rem;
}

.st-modal p {
  color:            var(--text-muted);
  font-size:        0.9rem;
  margin-bottom:    1.5rem;
}

.st-input {
  width:            100%;
  background:       var(--input-bg);
  border:           1px solid var(--input-border);
  color:            var(--text);
  padding:          0.75rem 1rem;
  border-radius:    var(--radius-sm);
  font-family:      var(--brand-font);
  font-size:        0.9rem;
  margin-bottom:    1rem;
  transition:       border-color var(--transition);
}

.st-input:focus {
  outline:          none;
  border-color:     var(--brand-blue);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .st-nav-links, .st-signup-btn, .st-user-pill { display: none; }
  .st-hamburger { display: block; }

  .st-nav-links.open {
    display:        flex;
    flex-direction: column;
    position:       fixed;
    top:            64px;
    left:           0;
    right:          0;
    background:     var(--navbar-bg);
    padding:        1rem;
    border-bottom:  1px solid var(--border);
  }

  .st-footer-body { grid-template-columns: 1fr; gap: 2rem; }
  .st-footer-bottom { flex-direction: column; gap: 0.4rem; text-align: center; }
  .st-footer-tagline { max-width: 100%; }
  .st-section { padding: 3rem 1rem; }
  .tools-grid { grid-template-columns: 1fr; }
}

/* ── Tool Hero Bar ── */
.st-tool-hero {
  background:     var(--bg);
  border-bottom:  1px solid var(--border);
  padding:        0.55rem 2rem;
  display:        flex;
  align-items:    center;
  gap:            0.65rem;
}

.st-tool-hero-icon {
  width:            24px;
  height:           24px;
  border-radius:    5px;
  background:       rgba(37,99,235,0.12);
  color:            var(--brand-cyan);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        0.7rem;
  flex-shrink:      0;
}

.st-tool-hero-name {
  font-size:      0.875rem;
  font-weight:    700;
  color:          var(--text-heading);
  white-space:    nowrap;
}

.st-tool-hero-sep {
  color:          var(--border);
  font-size:      0.8rem;
  flex-shrink:    0;
}

.st-tool-hero-desc {
  font-size:      0.8rem;
  color:          var(--text-muted);
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

@media (max-width: 600px) {
  .st-tool-hero-sep,
  .st-tool-hero-desc { display: none; }
}

/* ── FAB Stack (scroll-to-top + feedback) ── */
.st-fab-group {
  position:         fixed;
  bottom:           1.75rem;
  right:            1.75rem;
  display:          flex;
  flex-direction:   column;
  align-items:      flex-end;
  gap:              0.75rem;
  z-index:          8000;
}

/* Scroll-to-top button */
.st-scroll-top {
  width:            42px;
  height:           42px;
  border-radius:    50%;
  background:       var(--card);
  border:           1px solid var(--border);
  color:            var(--text);
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        0.95rem;
  box-shadow:       var(--shadow);
  transition:       all var(--transition);
  opacity:          0;
  pointer-events:   none;
  transform:        translateY(8px);
}

.st-scroll-top.visible {
  opacity:          1;
  pointer-events:   auto;
  transform:        translateY(0);
}

.st-scroll-top:hover {
  background:       var(--brand-blue);
  border-color:     var(--brand-blue);
  color:            #fff;
  transform:        translateY(-3px);
  box-shadow:       0 8px 24px rgba(37,99,235,0.4);
}

/* Feedback FAB */
.st-suggest-fab {
  background:       var(--brand-blue);
  color:            #fff;
  border:           none;
  border-radius:    999px;
  padding:          0.6rem 1.2rem;
  font-size:        0.875rem;
  font-weight:      600;
  font-family:      var(--brand-font);
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  gap:              0.5rem;
  box-shadow:       0 4px 20px rgba(37,99,235,0.45);
  transition:       all var(--transition);
}

.st-suggest-fab:hover {
  background:       var(--brand-blue-h);
  transform:        translateY(-3px);
  box-shadow:       0 8px 28px rgba(37,99,235,0.55);
}

.st-suggest-fab i { font-size: 1rem; }

/* Collapse feedback to icon-only on mobile */
@media (max-width: 600px) {
  .st-suggest-fab span { display: none; }
  .st-suggest-fab       { padding: 0.8rem; border-radius: 50%; }
}

/* ── Suggestion Modal Form ── */
.st-suggest-form {
  display:          flex;
  flex-direction:   column;
  gap:              0.75rem;
  margin-top:       0.5rem;
}

.st-suggest-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0.75rem;
}

.st-suggest-form select.st-input { cursor: pointer; }

.st-suggest-form textarea.st-input {
  resize:      vertical;
  min-height:  100px;
}

.st-suggest-footer {
  display:     flex;
  align-items: center;
  gap:         1rem;
  flex-wrap:   wrap;
}

#stSuggestResult { font-size: 0.875rem; }

@media (max-width: 600px) {
  .st-suggest-row { grid-template-columns: 1fr; }
}