/* AllgoTool v3: shared tokens and components. Loaded after legacy tool styles. */
:root {
  --ink: #17213c;
  --muted: #65718a;
  --blue: #405cf5;
  --teal: #087e86;
  --line: #e1e6f0;
  --bg: #f6f8fc;
  --surface: #fff;
  --surface-alt: #edf1fa;
  --accent: #405cf5;
  --accent-soft: #e9edff;
  --shadow: 0 12px 38px #1f33550b;
  --success-bg: #e6f7ef;
  --success-ink: #166b46;
  --error-bg: #fff0f1;
  --error-ink: #a52640;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ink: #eef2ff;
  --muted: #a1aec8;
  --blue: #96a8ff;
  --teal: #63d6d2;
  --line: #2b3650;
  --bg: #0d1425;
  --surface: #161f33;
  --surface-alt: #1c2840;
  --accent: #8b9bff;
  --accent-soft: #253156;
  --shadow: 0 12px 38px #0002;
  --success-bg: #123b30;
  --success-ink: #85e4bd;
  --error-bg: #48212f;
  --error-ink: #ffb4c4;
  color-scheme: dark;
}
html {
  scroll-behavior: smooth;
}
html body {
  background: var(--bg);
  color: var(--ink);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.65;
}
html header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
}
html .head {
  min-height: 86px;
  gap: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand {
  font-weight: 850;
  letter-spacing: -1.2px;
  font-size: 26px;
  text-decoration: none;
  white-space: nowrap;
}
html .brand span:not(.mark) {
  color: var(--accent);
}
html .mark {
  background: #405cf5;
  color: white;
  border-radius: 11px;
  font-weight: 700;
}
.head nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.head nav a {
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.head nav a:hover,
.head nav a[aria-current="page"] {
  color: var(--accent);
}
html .free {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 10px;
}
.theme-control {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.theme-control select {
  width: auto;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  padding: 8px;
  font: inherit;
}
.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--surface-alt);
  color: var(--ink);
  border-radius: 9px;
  padding: 8px 12px;
}
html .intro {
  padding: 64px 0 40px;
  gap: 40px;
  align-items: center;
}
html .intro h1 {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.09;
  letter-spacing: -2.8px;
  margin: 18px 0;
  max-width: 740px;
}
html .intro h1 span {
  color: var(--accent);
}
html .intro p {
  color: var(--muted);
  font-size: 17px;
  max-width: 590px;
}
.eyebrow {
  display: inline-flex;
  background: var(--accent-soft);
  color: var(--accent) !important;
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 11px !important;
  font-weight: 750;
  letter-spacing: 1.2px;
}
html .searchpanel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 24px;
}
html .searchbox {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 12px;
}
html .searchbox input {
  background: transparent;
  color: var(--ink);
}
html .searchpanel label {
  font-size: 16px;
  font-weight: 750;
}
html .searchpanel p {
  font-size: 12px;
}
.searchchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.searchchips button {
  background: var(--accent-soft);
  color: var(--accent);
  border: 0;
  padding: 6px 11px;
  border-radius: 100px;
  font-size: 12px;
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 20px;
}
.hero-proof span:before {
  content: "✓";
  color: var(--teal);
  margin-right: 6px;
}
html .categories button,
html .pill,
html .back {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 100px;
  padding: 9px 16px;
  font-size: 13px;
}
html .categories button.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
html .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  position: relative;
  padding: 24px;
  text-decoration: none;
}
html .card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
html .card h3 {
  font-size: 17px;
  letter-spacing: -0.35px;
  margin-top: 18px;
}
html .card p {
  font-size: 13px;
  color: var(--muted);
}
html .icon {
  background: var(--accent-soft);
  color: var(--accent);
  border: 0;
  border-radius: 13px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 750;
}
html .catlabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
}
.favorite {
  position: absolute;
  right: 12px;
  bottom: 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  padding: 4px 9px;
  line-height: 1;
}
.favorite[aria-pressed="true"] {
  color: var(--accent);
}
.directory-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.directory-actions button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
}
.directory-actions button[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-soft);
}
.new-services {
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-top: 24px;
}
.new-services h2 {
  font-size: 18px;
  margin: 0 0 4px;
}
.new-services p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
html .panel,
html .toolbox,
html .tool-panel,
html .result,
html .seo,
html .static-content,
html .info-card {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
html .workspace {
  padding-top: 36px;
}
html .tool-head h1,
html #tool-title {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.2;
  letter-spacing: -1.4px;
}
html .note,
html .caption,
html #tool-description,
html #tool-help,
html #tool-note,
html #privacy-note {
  color: var(--muted);
}
html input:not([type="checkbox"]):not([type="radio"]),
html select,
html textarea {
  background: var(--surface-alt);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 44px;
}
html input::placeholder,
html textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}
html label {
  color: var(--ink);
}
html .btn,
html .account button,
html .service-link {
  background: var(--surface-alt);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 650;
  padding: 11px 18px;
}
html .btn.primary,
html .account button[type="submit"],
html .account form > button:not([type="button"]),
html .service-link {
  background: #405cf5;
  color: #fff;
  border-color: #405cf5;
}
html .actions {
  flex-wrap: wrap;
  gap: 10px;
}
html table {
  color: var(--ink);
  background: var(--surface);
}
html th {
  background: var(--surface-alt);
  color: var(--ink);
}
html td,
html th {
  border-color: var(--line);
}
html pre,
html .tool-output,
html .code,
html .result textarea {
  background: var(--surface-alt);
  color: var(--ink);
  border-color: var(--line);
}
html .error {
  background: var(--error-bg);
  color: var(--error-ink);
  border: 1px solid var(--error-ink);
  border-radius: 12px;
}
html .success {
  background: var(--success-bg);
  color: var(--success-ink);
  border-radius: 12px;
}
.steps {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 20px 0;
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
}
.steps b {
  color: var(--accent);
  margin-right: 5px;
}
.result-status {
  color: var(--muted);
  font-size: 12px;
}
.sample-note {
  font-size: 12px;
  color: var(--muted);
}
html .account {
  max-width: 880px;
  margin: 40px auto;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
html .account h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  letter-spacing: -1px;
}
html .account h2 {
  font-size: 21px;
  letter-spacing: -0.5px;
}
.account form {
  margin-top: 22px;
}
.account textarea {
  min-height: 120px;
}
.account-links a {
  font-size: 13px;
  color: var(--accent);
}
html footer {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}
.site-footer {
  max-width: 1220px;
  margin: 40px auto 0;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
}
.site-footer a {
  color: var(--muted);
  margin-left: 16px;
}
.scan-tabs {
  display: flex;
  gap: 10px;
  margin: 24px 0;
}
.scan-tabs button {
  flex: 1;
}
.scan-tabs button[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.scan-progress {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 12px;
  padding: 18px;
  margin-top: 20px;
}
.scan-progress progress {
  width: 100%;
  accent-color: var(--accent);
}
.url-review {
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}
.url-review label {
  font-size: 12px;
  font-weight: 400;
  margin: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  overflow-wrap: anywhere;
}
.url-review input {
  min-height: 0 !important;
  margin: 5px 0 !important;
}
.utility-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.utility-result {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  align-self: start;
}
.utility-result:empty:before {
  content: "Your result will appear here.";
  color: var(--muted);
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.metric {
  background: var(--surface-alt);
  border-radius: 12px;
  padding: 16px;
}
.metric strong {
  display: block;
  font-size: 26px;
  letter-spacing: -1px;
}
.metric span {
  font-size: 12px;
  color: var(--muted);
}
.mini-search {
  position: relative;
}
.mini-search input {
  width: 180px;
  padding: 8px 12px;
  font-size: 12px;
}
.mini-search-results {
  position: absolute;
  right: 0;
  top: 50px;
  width: 290px;
  max-height: 350px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 40;
}
.mini-search-results a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  font-size: 13px;
}
.mini-search-results a:hover {
  background: var(--accent-soft);
}
.theme-ocean .profile,
.theme-forest .profile,
.theme-sunset .profile,
.theme-slate .profile {
  background: var(--surface);
  color: var(--ink);
}
html[data-theme="dark"] body[class^="theme-"] {
  background: var(--bg);
}
.profile button {
  background: var(--surface-alt);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 10px 15px;
  border-radius: 10px;
}
.profile .card-link {
  background: #405cf5;
  color: #fff;
}
.profile select {
  padding: 8px;
}
@media (min-width: 900px) {
  html .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .head .free {
    display: none;
  }
}
@media (max-width: 1100px) {
  .head nav {
    gap: 14px;
  }
  .mini-search {
    display: none;
  }
  .head .free {
    display: none;
  }
}
@media (max-width: 760px) {
  html .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  html .head {
    gap: 12px;
    min-height: 74px;
  }
  .brand {
    font-size: 22px;
  }
  .theme-control > span {
    display: none;
  }
  .theme-control select {
    font-size: 11px;
    max-width: 85px;
  }
  .nav-toggle {
    display: block;
  }
  html[data-enhanced="true"] .head nav {
    display: none;
    width: 100%;
    order: 5;
    padding: 12px 0;
    flex-wrap: wrap;
  }
  html[data-enhanced="true"] .head nav[data-open="true"] {
    display: flex;
  }
  .head nav {
    flex-wrap: wrap;
    width: 100%;
    font-size: 12px;
  }
  html .intro {
    display: block;
    padding: 36px 0 28px;
  }
  html .intro h1 {
    letter-spacing: -1.7px;
    margin: 16px 0;
  }
  html .searchpanel {
    margin-top: 24px;
    padding: 18px;
  }
  .hero-proof {
    gap: 12px;
  }
  html .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  html .card {
    padding: 18px 15px;
  }
  html .card h3 {
    font-size: 15px;
  }
  html .card p {
    font-size: 12px;
  }
  .catlabel {
    max-width: 100px;
  }
  html .account {
    margin: 22px 12px;
    padding: 22px 18px;
    border-radius: 16px;
  }
  .utility-layout {
    grid-template-columns: 1fr;
  }
  .site-footer {
    display: block;
    padding: 24px 20px;
  }
  .site-footer nav {
    margin-top: 12px;
  }
  .site-footer a {
    margin: 0 15px 0 0;
  }
  .steps {
    gap: 10px;
  }
  .new-services {
    padding: 18px;
  }
  .account .link-row {
    grid-template-columns: 1fr;
  }
  .account table {
    display: block;
    overflow: auto;
  }
  .head .theme-control {
    margin-left: auto;
  }
}
@media (max-width: 420px) {
  html .cards {
    grid-template-columns: 1fr;
  }
  .metric-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

.card-main {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  padding-bottom: 20px;
}
.file-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.file-row span {
  flex: 1;
  min-width: 120px;
  overflow-wrap: anywhere;
  font-size: 12px;
}
.file-row button {
  padding: 5px 10px !important;
  font-size: 11px;
}
.search-preview {
  margin-top: 20px;
  border: 1px solid var(--line);
  padding: 16px;
  border-radius: 12px;
}
.search-preview h3 {
  color: var(--accent);
  margin: 6px 0;
}
.search-preview p {
  font-size: 13px;
  color: var(--muted);
}
.utility-result canvas {
  max-width: 100%;
  height: auto;
}
.utility-result .service-link {
  margin-top: 15px;
}
.utility-result button {
  margin: 8px 8px 0 0;
}
html .seo-guide,
html .example {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  border-radius: 16px;
}
html .seo-guide p,
html .seo-guide li {
  color: var(--muted);
}

html .pagecopy,
html .trust,
html .searchpanel,
html .tabwrap {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
html .metric {
  border-color: var(--line);
}
html .metric-grid .metric {
  display: block;
  padding: 16px;
  border: 0;
}
html .metric-grid .metric strong {
  color: var(--ink);
}
html .imagepreview {
  background: var(--surface-alt);
}
html .tabwrap input:focus {
  background: var(--surface-alt);
}
html .toolheading > p,
html .help p,
html .help li,
html .pagecopy p {
  color: var(--muted);
}
.account .cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 600px) {
  .account .cards {
    grid-template-columns: 1fr;
  }
}