:root {
  --atd-ink: #172033;
  --atd-muted: #637083;
  --atd-soft: #f4f6f8;
  --atd-panel: rgba(255, 255, 255, .94);
  --atd-line: rgba(37, 99, 235, .16);
  --atd-blue: #2563eb;
  --atd-violet: #3b82f6;
  --atd-cyan: #0ea5e9;
  --atd-success: #0aa68f;
  --atd-warn: #e49b24;
  --atd-shadow: 0 24px 60px rgba(31, 41, 55, .09);
  --atd-gradient: linear-gradient(115deg, var(--atd-blue), var(--atd-violet) 58%, var(--atd-cyan));
  --atd-gradient-soft: linear-gradient(145deg, #ffffff, #f5f7fb 52%, #eef4ff);
}

body,
.home-page,
.tools-page,
.info-page,
.speed-page,
.resize-page,
.compress-page,
.pdf-page {
  color: var(--atd-ink);
  background:
    radial-gradient(circle at 7% 0%, rgba(36, 107, 254, .16) 0, transparent 32%),
    radial-gradient(circle at 94% 12%, rgba(114, 89, 232, .16) 0, transparent 30%),
    radial-gradient(circle at 50% 95%, rgba(18, 191, 211, .1) 0, transparent 34%),
    var(--atd-soft);
}

body:before,
.home-page:before,
.info-page:before,
.speed-page:before,
.resize-page:before,
.compress-page:before,
.pdf-page:before {
  background-image:
    linear-gradient(rgba(36, 107, 254, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 107, 254, .055) 1px, transparent 1px);
}

.aurora {
  opacity: .22;
  filter: blur(86px);
}

.aurora-a,
.home-page .aurora-a,
.speed-page .aurora-a,
.resize-page .aurora-a,
.compress-page .aurora-a,
.pdf-page .aurora-a {
  background: var(--atd-blue);
}

.aurora-b,
.home-page .aurora-b,
.speed-page .aurora-b,
.resize-page .aurora-b,
.compress-page .aurora-b,
.pdf-page .aurora-b {
  background: var(--atd-violet);
}

.brand,
.home-page .brand,
.info-page .brand,
.speed-page .brand,
.resize-page .brand,
.compress-page .brand,
.pdf-page .brand {
  color: var(--atd-ink);
}

.brand-accent,
.home-page .brand-accent,
.info-page .brand-accent,
.speed-page .brand-accent,
.resize-page .brand-accent,
.compress-page .brand-accent,
.pdf-page .brand-accent {
  color: var(--atd-blue);
}

.brand-mark,
.home-page .brand-mark,
.info-page .brand-mark,
.speed-page .brand-mark,
.resize-page .brand-mark,
.compress-page .brand-mark,
.pdf-page .brand-mark {
  background: var(--atd-gradient);
  box-shadow: 0 8px 24px rgba(36, 107, 254, .28);
}

.topbar-right,
.home-page .topbar-right,
.info-page .topbar-right {
  color: var(--atd-muted);
}

.secure-dot,
.speed-nav .secure-dot {
  background: var(--atd-cyan);
  box-shadow: 0 0 0 4px rgba(18, 191, 211, .18);
}

.nav-link,
.home-page .nav-link {
  color: #536383;
}

.nav-link:hover,
.nav-link.active,
.home-page .nav-link:hover,
.home-page .nav-link.active,
.info-page .nav-link.active,
.speed-page .nav-link.active,
.speed-page .nav-link.speed-active,
.resize-page .nav-link.active,
.compress-page .nav-link.active,
.pdf-page .nav-link.active {
  color: #1f55d8;
  background: rgba(36, 107, 254, .1);
}

.nav-toggle,
.home-page .nav-toggle,
.info-page .nav-toggle,
.speed-page .nav-toggle {
  color: #1f55d8;
  border-color: rgba(36, 107, 254, .28);
  background: rgba(36, 107, 254, .08);
}

.tools-menu,
.home-page .tools-menu,
.info-page .tools-menu,
.speed-page .tools-menu,
.resize-page .tools-menu,
.compress-page .tools-menu,
.pdf-page .tools-menu {
  color: var(--atd-ink);
  background: rgba(255, 255, 255, .96);
  border-color: var(--atd-line);
}

.tools-menu a,
.speed-page .tools-menu a,
.resize-page .tools-menu a,
.compress-page .tools-menu a,
.pdf-page .tools-menu a {
  color: #425274;
}

.tools-menu a:hover,
.tools-menu a.active-tool,
.home-page .tools-menu a:hover,
.home-page .tools-menu a.active-tool,
.speed-page .tools-menu a:hover,
.speed-page .tools-menu a.active-tool,
.resize-page .tools-menu a:hover,
.resize-page .tools-menu a.active-tool,
.compress-page .tools-menu a:hover,
.compress-page .tools-menu a.active-tool,
.pdf-page .tools-menu a:hover,
.pdf-page .tools-menu a.active-tool {
  color: #1f55d8;
  background: rgba(36, 107, 254, .1);
}

.tools-menu .menu-group,
.speed-page .tools-menu .menu-group,
.resize-page .tools-menu .menu-group,
.compress-page .tools-menu .menu-group,
.pdf-page .tools-menu .menu-group {
  color: #8491ac;
}

.home-page,
.home-page .home-hero h1,
.home-tool h3,
.tools-page,
.tools-hero h1,
.tool-directory-card h2,
.info-page,
.info-hero h1,
.info-card h2,
.info-card h3,
.speed-page,
.speed-intro h1,
.speed-card h2,
.speed-explain h2,
.resize-page,
.resize-intro h1,
.resize-card h2,
.resize-seo h2,
.compress-page,
.compress-intro h1,
.compress-card h2,
.compress-seo h2,
.pdf-page,
.pdf-intro h1,
.pdf-card h2,
.pdf-seo h2 {
  color: var(--atd-ink);
}

.home-page {
  --home-ink: var(--atd-ink);
  --home-muted: var(--atd-muted);
  --home-blue: var(--atd-blue);
  --home-violet: var(--atd-violet);
  --home-cyan: var(--atd-cyan);
}

.speed-page {
  --speed-ink: var(--atd-ink);
  --speed-muted: var(--atd-muted);
  --speed-blue: var(--atd-blue);
  --speed-violet: var(--atd-violet);
  --speed-cyan: var(--atd-cyan);
  --speed-bg: var(--atd-soft);
}

.resize-page {
  --resize-ink: var(--atd-ink);
  --resize-muted: var(--atd-muted);
  --resize-teal: var(--atd-blue);
  --resize-aqua: var(--atd-cyan);
  --resize-lilac: var(--atd-violet);
  --resize-bg: var(--atd-soft);
  --resize-line: var(--atd-line);
}

.compress-page {
  --compress-ink: var(--atd-ink);
  --compress-muted: var(--atd-muted);
  --compress-plum: var(--atd-blue);
  --compress-amber: var(--atd-cyan);
  --compress-panel: var(--atd-panel);
  --compress-line: var(--atd-line);
}

.pdf-page {
  --pdf-ink: var(--atd-ink);
  --pdf-muted: var(--atd-muted);
  --pdf-rose: var(--atd-blue);
  --pdf-orange: var(--atd-cyan);
  --pdf-bg: var(--atd-soft);
  --pdf-line: var(--atd-line);
}

.eyebrow,
.section-kicker,
.home-eyebrow,
.tools-kicker,
.info-kicker,
.speed-eyebrow,
.compress-eyebrow,
.pdf-eyebrow,
.result-kicker {
  color: var(--atd-blue);
}

h1 em,
h2 em,
.home-hero h1 em,
.tools-hero h1 em,
.info-hero h1 em,
.speed-intro h1 em,
.speed-explain h2 em,
.resize-intro h1 em,
.resize-seo h2 em,
.compress-intro h1 em,
.compress-seo h2 em,
.pdf-intro h1 em,
.pdf-seo h2 em {
  color: var(--atd-violet);
}

.home-eyebrow i,
.speed-eyebrow span,
.compress-eyebrow span,
.pdf-eyebrow span {
  background: var(--atd-cyan);
}

.home-hero p,
.home-section-head p,
.home-tool p,
.tools-hero p,
.tool-directory-card p,
.info-hero p,
.info-card p,
.info-card li,
.speed-intro p,
.speed-subtitle,
.speed-explain p,
.resize-intro p,
.resize-subtitle,
.resize-seo p,
.compress-intro p,
.compress-subtitle,
.compress-seo p,
.pdf-intro p,
.pdf-subtitle,
.pdf-seo p {
  color: var(--atd-muted);
}

.converter-card,
.home-art,
.home-search,
.home-tool,
.home-guide,
.tool-directory-card,
.info-card,
.speed-card,
.score-card,
.vitals-panel,
.recommendations,
.vital,
.resize-card,
.compress-card,
.pdf-card {
  background: var(--atd-panel);
  border-color: var(--atd-line);
  box-shadow: var(--atd-shadow), inset 0 1px rgba(255, 255, 255, .85);
}

.dropzone,
.home-window,
.home-art-tile,
.resize-dropzone,
.compress-dropzone,
.pdf-dropzone,
.url-form {
  border-color: rgba(36, 107, 254, .28);
  background: var(--atd-gradient-soft);
}

.dropzone:hover,
.dropzone:focus,
.resize-dropzone:hover,
.resize-dropzone:focus,
.resize-dropzone.dragging,
.compress-dropzone:hover,
.compress-dropzone:focus,
.pdf-dropzone:hover,
.pdf-dropzone:focus,
.pdf-dropzone.dragging {
  border-color: var(--atd-blue);
  background: linear-gradient(145deg, #eef5ff, #f2efff);
}

.home-button.primary,
.convert-btn,
.speed-card .url-form button,
.resize-btn,
.compress-btn,
.pdf-btn,
.contact-form button {
  color: #fff;
  background: var(--atd-gradient);
  box-shadow: 0 12px 28px rgba(36, 107, 254, .25);
}

.home-button.secondary,
.tool-tab,
.tested-mode,
.mode-row label,
.size-presets button {
  color: #425274;
  background: rgba(255, 255, 255, .82);
  border-color: var(--atd-line);
}

.home-button.secondary:hover,
.tool-tab:hover,
.tool-tab.active,
.mode-row label:hover,
.mode-row label:has(input:checked),
.size-presets button:hover,
.size-presets button.selected {
  color: #1f55d8;
  background: rgba(36, 107, 254, .1);
  border-color: rgba(36, 107, 254, .35);
}

.home-tool-icon,
.home-tool:nth-child(2) .home-tool-icon,
.home-tool:nth-child(3) .home-tool-icon,
.tool-icon,
.tool-directory-card.resize .tool-icon,
.tool-directory-card.compress .tool-icon,
.tool-directory-card.pdf .tool-icon,
.tool-directory-card.speed .tool-icon,
.drop-orb,
.resize-orb,
.compress-orb,
.pdf-orb {
  color: #fff;
  background: var(--atd-gradient);
}

.home-art-tile,
.home-art-tile:nth-child(2),
.home-art-tile:nth-child(3) {
  color: var(--atd-blue);
  background: linear-gradient(145deg, #e7f9ff, #eeebff);
}

.home-trust {
  background:
    radial-gradient(circle at 12% 0%, rgba(18, 191, 211, .22), transparent 42%),
    linear-gradient(135deg, #14213d, #1f2f66 58%, #243482);
}

.home-facts strong,
.score-card.performance strong,
.score-card.accessibility strong,
.score-card.practices strong,
.score-card.seo strong,
.resize-facts strong,
.compress-facts strong,
.pdf-facts strong,
.full-report,
.home-tool-link,
.tool-link,
.tools-page .footer-links a:hover,
.home-page footer .footer-links a:hover,
.speed-page footer a,
footer .footer-links a:hover {
  color: var(--atd-blue);
}

.score-card.accessibility strong,
.speed-status,
.resize-status,
.card-status {
  color: var(--atd-success);
}

.score-card.seo strong,
.proof-icon {
  color: var(--atd-warn);
}

.speed-status i,
.resize-status i,
.card-status i {
  background: var(--atd-cyan);
  box-shadow: 0 0 9px var(--atd-cyan);
}

.privacy-note,
.resize-note,
.compress-note,
.pdf-note,
.info-callout,
.pdf-proof,
.compress-proof {
  color: #425274;
  background: rgba(18, 191, 211, .08);
  border-color: rgba(18, 191, 211, .24);
}

.privacy-note strong,
.resize-note strong,
.compress-note strong,
.pdf-note strong {
  color: #136f88;
}

.file-icon,
.resize-file-icon,
.pdf-file-icon {
  color: var(--atd-blue);
  background: rgba(36, 107, 254, .12);
}

.quality-row input,
.resize-quality input,
.quality-block input,
.compress-quality input,
.mode-row input,
.contact-form input[type="checkbox"] {
  accent-color: var(--atd-blue);
}

.url-import input,
.contact-form input:not([type="checkbox"]),
.contact-form textarea,
.control-block input,
.control-block select,
.compress-format select,
.pdf-controls select {
  color: var(--atd-ink);
  background: #fff;
  border-color: var(--atd-line);
}

.url-import input:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.control-block input:focus,
.control-block select:focus,
.pdf-controls select:focus,
.url-form:focus-within {
  border-color: var(--atd-blue);
  box-shadow: 0 0 0 4px rgba(36, 107, 254, .12);
}

footer,
.home-page footer,
.tools-page footer,
.info-page footer,
.speed-page footer,
.resize-page footer,
.compress-page footer,
.pdf-page footer {
  color: #75829e;
  border-top-color: rgba(36, 107, 254, .13);
}

@media (max-width: 680px) {
  .site-nav.open,
  .speed-page .site-nav.open,
  .resize-page .site-nav.open,
  .compress-page .site-nav.open {
    background: rgba(255, 255, 255, .97);
    border-color: var(--atd-line);
  }

  .tools-menu,
  .home-page .tools-menu,
  .info-page .tools-menu,
  .speed-page .tools-menu,
  .resize-page .tools-menu,
  .compress-page .tools-menu,
  .pdf-page .tools-menu {
    background: rgba(246, 250, 255, .98);
    border-color: var(--atd-line);
  }
}

/* Final Astro theme pass: light gray canvas, one blue accent, consistent components. */
body,
.home-page,
.tools-page,
.info-page,
.guides-page,
.app-page,
.speed-page,
.resize-page,
.compress-page,
.pdf-page {
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .08) 0, transparent 30%),
    radial-gradient(circle at 90% 12%, rgba(14, 165, 233, .07) 0, transparent 28%),
    var(--atd-soft) !important;
  color: var(--atd-ink) !important;
}

.aurora {
  opacity: .08 !important;
}

.info-card,
.guide-article,
.guide-card,
.tool-directory-card,
.converter-card,
.speed-card,
.resize-card,
.compress-card,
.pdf-card,
.home-tool {
  background: var(--atd-panel) !important;
  border-color: var(--atd-line) !important;
  box-shadow: var(--atd-shadow) !important;
}

.info-kicker,
.guides-kicker,
.tools-kicker,
.home-eyebrow,
.eyebrow,
.section-kicker,
.guide-card > span,
.tool-number,
.brand-accent,
.info-hero h1 em,
.guides-hero h1 em,
.tools-hero h1 em,
.home-hero h1 em,
.intro h1 em {
  color: var(--atd-blue) !important;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.guide-card {
  color: inherit;
  text-decoration: none;
  min-height: 230px;
}

.guide-card > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.guide-read,
.tool-link,
.home-tool-link {
  color: var(--atd-blue) !important;
}

.guide-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.guide-button,
.contact-form button,
.convert-btn,
.resize-btn,
.compress-btn,
.pdf-btn,
#run-btn {
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(100deg, var(--atd-blue), var(--atd-cyan)) !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .2) !important;
}

.guide-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-weight: 800 !important;
}

.contact-status {
  margin: 14px 0 0;
  min-height: 20px;
  font-size: 14px;
}

.contact-status.success {
  color: var(--atd-success);
}

.contact-status.error {
  color: #c2410c;
}

.contact-form button:disabled,
.convert-btn:disabled {
  cursor: wait;
  opacity: .72;
}

.tool-seo-panel,
.tool-help-grid,
.tool-faq {
  max-width: 960px;
  margin: 30px auto 0;
  position: relative;
  z-index: 1;
}

.tool-seo-panel {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 34px;
  padding-top: 34px;
  border-top: 1px solid var(--atd-line);
}

.tool-seo-panel h2,
.tool-help-grid h2,
.tool-faq h2 {
  margin: 10px 0 12px;
  color: var(--atd-ink);
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -.04em;
}

.tool-seo-panel h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
}

.tool-seo-panel h2 em {
  color: var(--atd-blue);
  font-style: normal;
}

.tool-seo-copy p,
.tool-seo-copy li,
.tool-help-grid p,
.tool-help-grid li,
.tool-faq p {
  color: var(--atd-muted);
  line-height: 1.7;
  font-size: 14px;
}

.tool-seo-copy ul,
.tool-help-grid ol {
  padding-left: 20px;
}

.tool-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.tool-help-grid article,
.tool-faq {
  background: var(--atd-panel);
  border: 1px solid var(--atd-line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--atd-shadow);
}

.related-tool-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.related-tool-links a {
  color: var(--atd-blue);
  background: rgba(37, 99, 235, .08);
  border: 1px solid var(--atd-line);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

.tool-faq details {
  border-top: 1px solid var(--atd-line);
  padding: 14px 0;
}

.tool-faq details:first-of-type {
  border-top: 0;
}

.tool-faq summary {
  color: var(--atd-ink);
  cursor: pointer;
  font-weight: 800;
}

.tool-control-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 14px;
  align-items: center;
  margin-top: 17px;
}

.tool-control-grid .control-block {
  display: grid;
  gap: 8px;
  color: var(--atd-muted);
  font-size: 12px;
  font-weight: 700;
}

.tool-directory-card.webp .tool-icon {
  background: linear-gradient(135deg, var(--atd-blue), var(--atd-cyan)) !important;
}

.tool-directory-card.pdf-compressor .tool-icon {
  background: linear-gradient(135deg, var(--atd-blue), var(--atd-violet)) !important;
}

.tool-directory-card.qr .tool-icon,
.tool-directory-card.word-counter .tool-icon {
  background: linear-gradient(135deg, var(--atd-blue), var(--atd-cyan)) !important;
}

.pwa-install {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  border: 1px solid rgba(37, 99, 235, .22);
  border-radius: 999px;
  padding: 12px 16px;
  color: #fff;
  background: var(--atd-gradient);
  box-shadow: 0 16px 34px rgba(37, 99, 235, .26);
  font: 800 13px 'DM Sans', sans-serif;
  cursor: pointer;
}

.pwa-install:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.qr-controls {
  margin: 18px 0 14px;
  padding: 14px;
  background: rgba(37, 99, 235, .06);
  border: 1px solid var(--atd-line);
  border-radius: 16px;
}

.qr-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 18px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--atd-line);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(31, 41, 55, .06);
}

.qr-fields .qr-wide {
  grid-column: 1 / -1;
}

.qr-fields input,
.qr-fields textarea,
.qr-fields select,
.word-input {
  width: 100%;
  color: var(--atd-ink);
  background: #f8fbff;
  border: 1px solid var(--atd-line);
  border-radius: 12px;
  padding: 12px 13px;
  font: 14px 'DM Sans', sans-serif;
}

.qr-controls select,
.tool-control-grid .control-block select {
  min-height: 45px;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--atd-blue) 50%) calc(100% - 18px) 19px / 6px 6px no-repeat,
    linear-gradient(135deg, var(--atd-blue) 50%, transparent 50%) calc(100% - 12px) 19px / 6px 6px no-repeat,
    #fff;
  padding-right: 36px;
}

.qr-fields .control-block,
.qr-controls .control-block {
  color: var(--atd-ink);
  font-size: 13px;
  font-weight: 800;
}

.qr-fields input::placeholder,
.qr-fields textarea::placeholder {
  color: #91a0b8;
}

.qr-fields textarea,
.word-input {
  resize: vertical;
}

.qr-fields input:focus,
.qr-fields textarea:focus,
.qr-fields select:focus,
.word-input:focus {
  outline: none;
  border-color: var(--atd-blue);
  box-shadow: 0 0 0 4px rgba(36, 107, 254, .12);
}

.qr-output {
  display: grid;
  place-items: center;
  margin: 16px 0;
}

.qr-output canvas {
  width: min(100%, 260px);
  height: auto;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--atd-line);
  border-radius: 18px;
  box-shadow: var(--atd-shadow);
}

.word-input {
  min-height: 230px;
  line-height: 1.65;
}

.word-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.word-stats div {
  background: rgba(37, 99, 235, .07);
  border: 1px solid var(--atd-line);
  border-radius: 14px;
  padding: 14px;
}

.word-stats strong {
  display: block;
  color: var(--atd-blue);
  font: 800 25px 'Space Grotesk', sans-serif;
}

.word-stats span {
  color: var(--atd-muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 680px) {
  .guide-grid {
    grid-template-columns: 1fr;
  }

  .tool-seo-panel,
  .tool-help-grid,
  .tool-control-grid,
  .qr-fields,
  .word-stats {
    grid-template-columns: 1fr;
  }
}