/* Compact, green-led layout shared by the homepage and every downloader. */
:root {
  --ink: #30373a;
  --muted: #667176;
  --line: #e2e7e1;
  --paper: #fafbf9;
  --coral: #76cf00;
  --coral-dark: #5cab00;
  --green: #548d08;
  --mint: #e8f6e1;
  --shadow: 0 16px 45px rgba(31, 59, 23, .08);
}

body { background: #fafbf9; }
.site-header { background: #fafbf9; border-top: 3px solid #e2f1d2; border-bottom: 0; }
.header-inner { min-height: 68px; border-bottom: 1px solid #dfe4de; }
.brand { font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif; font-size: 2rem; font-weight: 650; letter-spacing: -.075em; color: #2f3335; gap: 0; }
.brand-mark { display: none; }
.brand-dot { color: var(--green); }
.main-nav { gap: 27px; font-size: .96rem; font-weight: 500; }
.main-nav > a:not(.nav-cta) { border-bottom: 2px solid transparent; padding: 6px 0; }
.main-nav > a:not(.nav-cta):hover, .main-nav > a[aria-current="page"] { color: var(--green); border-bottom-color: var(--coral); }
.nav-dropdown summary { padding: 6px 0; }
.dropdown-panel { grid-template-columns: 1fr 1fr; width: 290px; }

.home-hero, .tool-hero { background: #fafbf9; padding: 75px 0 0; }
.tool-hero { padding-top: 22px; }
.hero-centered { max-width: 1120px; }
.hero-centered h1, .tool-hero .hero-centered h1 { max-width: 100%; color: var(--ink); font-size: clamp(2rem, 3vw, 2.65rem); font-weight: 750; line-height: 1.2; letter-spacing: -.04em; }
.home-hero .hero-centered h1 { font-size: clamp(2.4rem, 3.7vw, 3.25rem); }
.hero-centered h1 em { color: var(--green); }
.guide-lead { max-width: 710px; margin: 13px auto 0; color: var(--muted); font-size: .98rem; line-height: 1.6; }
.tool-hero:not(.guide-hero) .breadcrumb { justify-content: flex-start; flex-wrap: wrap; max-width: 1100px; margin: 0 auto 55px; color: #667176; font-size: .85rem; }
.breadcrumb a:hover { color: var(--green); }
.guide-hero .hero-centered h1 { font-size: clamp(2.15rem, 3.6vw, 3.2rem); }

.download-zone { background: #fafbf9; margin-top: 0; padding: 42px 0 8px; }
.download-zone .narrow { max-width: 730px; }
.download-panel { padding: 0; background: transparent; border: 0; box-shadow: none; }
.input-row { display: flex; align-items: stretch; min-height: 56px; padding: 0; gap: 0; border: 4px solid var(--coral); border-radius: 0; background: #fff; box-shadow: none; }
.input-row:focus-within { border-color: var(--coral-dark); box-shadow: 0 0 0 3px rgba(118, 207, 0, .18); }
.input-row input { flex: 1; min-width: 0; padding: 12px 15px; font-size: .94rem; }
.input-row input::placeholder { color: #889095; }
.paste-btn { background: #f0f5eb; border: 0; border-radius: 0; color: var(--green); padding: 0 15px; font-size: .85rem; }
.paste-btn:hover { background: #e4f0da; }
.submit-btn, .input-row .submit-btn { min-height: 52px; border: 0; border-radius: 0; background: var(--coral); color: #233300; padding: 0 27px; font-size: .91rem; font-weight: 750; }
.submit-btn:hover, .input-row .submit-btn:hover { background: var(--coral-dark); }
.download-note { margin: 9px 0 0; color: #5d686d; font-size: .8rem; text-align: left; }
.howto-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 31px auto 0; color: #1573cc; font-size: .91rem; text-decoration: underline; }
.howto-link span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #1573cc; color: #fff; font-size: .62rem; text-decoration: none; }
.howto-link small { color: #9ba4a8; font-size: .86rem; text-decoration: none; }
.hero-highlights { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 24px; margin: 24px auto 0; color: #4b5b55; font-size: .82rem; }
.hero-highlights span::first-letter { color: var(--green); }
.analysis-status { justify-content: center; }
.result-panel, .progress-panel { border-radius: 12px; }

.quick-tools { padding: 43px 0 84px; background: #fafbf9; }
.quick-tools-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; max-width: 990px; margin: 0 auto; }
.quick-tool { display: flex; align-items: center; gap: 14px; flex: 0 1 220px; min-height: 54px; padding: 10px 18px; border: 1px solid #e0efdd; border-radius: 6px; background: #e9f6e7; color: #25302a; font-size: .94rem; font-weight: 600; transition: background .15s, border-color .15s; }
.quick-tool:hover { background: #def1dc; border-color: #afd8a5; }
.quick-tool.is-current { border-color: #87c978; background: #dff1db; }
.quick-tool .platform-icon { width: 30px; height: 30px; border-radius: 7px; font-size: .88rem; }
.quick-tool .platform-icon.universal { background: var(--green); }

.section-space { padding-top: 77px; padding-bottom: 77px; }
.tools-section { background: #f1f7ef; }
.tool-card { min-height: 96px; border-radius: 8px; box-shadow: none; }
.guide-card, .directory-group, .detail-card { border-radius: 9px; }
.guide-promo { background: #f1f7ef; }
.ready-link { background: var(--green); }
.ready-link:hover { background: #3d7104; }

@media (max-width: 900px) {
  .main-nav { gap: 15px; font-size: .84rem; }
  .brand { font-size: 1.65rem; }
  .quick-tool { flex-basis: 205px; }
}
@media (max-width: 700px) {
  .header-inner { min-height: 64px; }
  .brand { font-size: 1.55rem; }
  .main-nav { top: 67px; gap: 0; }
  .main-nav > a:not(.nav-cta) { padding: 12px 0; }
  .home-hero, .tool-hero { padding-top: 56px; }
  .tool-hero { padding-top: 20px; }
  .tool-hero:not(.guide-hero) .breadcrumb { margin-bottom: 38px; }
  .hero-centered h1, .tool-hero .hero-centered h1 { font-size: clamp(2rem, 7vw, 2.75rem); }
  .guide-lead { font-size: .93rem; }
  .download-zone { padding-top: 29px; }
  .input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; }
  .input-row input { grid-column: 1; min-height: 54px; padding: 11px 13px; font-size: .9rem; }
  .paste-btn { grid-column: 2; padding: 0 12px; }
  .input-row .submit-btn { grid-column: 1 / -1; min-height: 52px; width: 100%; }
  .download-note { text-align: center; }
  .howto-link { margin-top: 23px; flex-wrap: wrap; }
  .howto-link small { display: none; }
  .hero-highlights { gap: 7px 12px; font-size: .74rem; }
  .quick-tools { padding: 32px 0 60px; }
  .quick-tools-grid { gap: 10px; }
  .quick-tool { flex: 1 1 calc(50% - 10px); min-width: 0; min-height: 52px; gap: 8px; padding: 8px; font-size: .78rem; }
  .quick-tool .platform-icon { width: 25px; height: 25px; flex: none; font-size: .72rem; }
}
@media (max-width: 390px) {
  .quick-tool { flex-basis: 100%; font-size: .85rem; }
}