:root {
  color-scheme: light;
  --ink: #111827;
  --muted: #667085;
  --soft: #f5f7f4;
  --panel: #ffffff;
  --panel-strong: #fbfcfe;
  --line: #d7dee8;
  --line-strong: #b8c3d0;
  --accent: #08756f;
  --accent-dark: #065f59;
  --accent-soft: #e7f5f3;
  --blue: #0a6f84;
  --blue-soft: #eef2fb;
  --amber: #667085;
  --amber-soft: #f3f5f7;
  --green: #08756f;
  --green-soft: #e7f5f3;
  --shadow: 0 22px 58px rgba(24, 39, 75, 0.1);
  --shadow-soft: 0 12px 34px rgba(24, 39, 75, 0.07);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

/* Chinese lunar calendar and traditional almanac */
.lunar-tool .panel {
  display: grid;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
}

.lunar-tool .panel > *,
.lunar-input-grid,
.lunar-input-card,
.lunar-calendar-panel,
.lunar-calendar-grid,
.lunar-summary,
.lunar-detail-grid,
.lunar-tool .result-card,
.lunar-tool label,
.lunar-tool input,
.lunar-tool select,
.lunar-tool button {
  min-width: 0;
  max-width: 100%;
}

.lunar-input-grid,
.lunar-calendar-panel,
.lunar-summary,
.lunar-detail-grid {
  width: 100%;
}

.lunar-input-grid,
.lunar-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lunar-input-card,
.lunar-calendar-panel,
.lunar-date-hero {
  padding: 18px;
  border: 1px solid rgba(8, 117, 111, 0.18);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(231, 245, 243, 0.72), rgba(255, 255, 255, 0.96));
}

.lunar-input-card h3,
.lunar-detail-grid h3,
.lunar-tool .result-card h3 {
  margin: 0 0 14px;
  font-size: 18px;
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.check-row input {
  width: auto;
}

.lunar-calendar-panel {
  display: grid;
  gap: 10px;
}

.lunar-calendar-nav {
  display: grid;
  grid-template-columns: 44px minmax(170px, 240px) auto 44px;
  justify-content: center;
  gap: 8px;
}

.lunar-calendar-nav button,
.lunar-calendar-nav input {
  min-height: 42px;
}

.lunar-week-row,
.lunar-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.lunar-week-row span {
  padding: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.lunar-day,
.lunar-day-empty {
  min-width: 0;
  min-height: 82px;
}

.lunar-day {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 8px 5px;
  border: 1px solid rgba(8, 117, 111, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow: none;
}

.lunar-day:hover {
  border-color: rgba(8, 117, 111, 0.55);
  background: var(--accent-soft);
  transform: none;
}

.lunar-day strong {
  font-size: 17px;
}

.lunar-day span {
  width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lunar-day.weekend strong {
  color: #b45309;
}

.lunar-day.today {
  box-shadow: inset 0 0 0 2px rgba(8, 117, 111, 0.22);
}

.lunar-day.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.lunar-day.selected strong,
.lunar-day.selected span {
  color: #fff;
}

.lunar-summary {
  display: grid;
  gap: 12px;
}

.lunar-date-hero p,
.lunar-date-hero h3 {
  margin: 0;
}

.lunar-date-hero p {
  color: var(--accent-dark);
  font-weight: 900;
}

.lunar-date-hero h3 {
  margin-top: 7px;
  font-size: clamp(22px, 3vw, 32px);
}

.lunar-summary-grid,
.lunar-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.lunar-summary-grid article,
.lunar-facts article {
  padding: 14px;
  border: 1px solid rgba(8, 117, 111, 0.16);
  border-radius: 12px;
  background: #fff;
}

.lunar-summary-grid span,
.lunar-facts span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.lunar-summary-grid strong,
.lunar-facts strong {
  display: block;
  font-size: 14px;
  line-height: 1.5;
}

.lunar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.lunar-tags span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8, 117, 111, 0.1);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
}

.lunar-tags.good span {
  background: #e8f7ef;
  color: #166534;
}

.lunar-tags.bad span {
  background: #fff1f2;
  color: #9f1239;
}

.lunar-tool .table-scroll td {
  min-width: 92px;
  vertical-align: top;
}

@media (max-width: 760px) {
  .lunar-input-grid,
  .lunar-detail-grid {
    grid-template-columns: 1fr;
  }

  .lunar-summary-grid,
  .lunar-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .lunar-input-card,
  .lunar-calendar-panel,
  .lunar-date-hero {
    padding: 14px;
  }

  .lunar-calendar-nav {
    grid-template-columns: 38px minmax(0, 1fr) minmax(54px, auto) 38px;
  }

  .lunar-calendar-nav button {
    width: auto;
    padding: 8px;
  }

  .lunar-week-row,
  .lunar-calendar-grid {
    gap: 4px;
  }

  .lunar-day,
  .lunar-day-empty {
    min-height: 62px;
  }

  .lunar-day {
    padding: 5px 2px;
    border-radius: 9px;
  }

  .lunar-day strong {
    font-size: 15px;
  }

  .lunar-day span {
    font-size: 9px;
  }

  .lunar-summary-grid,
  .lunar-facts {
    grid-template-columns: 1fr;
  }
}

/* Third-batch browser tools */
.totp-display {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 20px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
}

.totp-display strong {
  font-size: clamp(32px, 6vw, 54px);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

.totp-display span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.qr-preview {
  display: block;
  width: 220px;
  height: 220px;
  max-width: 100%;
  margin: 14px 0 22px;
  border: 10px solid #fff;
  border-radius: 12px;
}

.image-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.color-preview {
  min-height: 110px;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.result.error {
  color: #b42318;
}

.frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.frame-grid img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
}

audio {
  display: block;
  width: 100%;
  margin: 18px 0;
}

progress {
  width: 100%;
  height: 14px;
  margin: 16px 0;
}

.break-anywhere {
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .ip-generator-fields,
  .ip-suggestion,
  .detail-list div {
    grid-template-columns: 1fr;
  }

  .ip-suggestion {
    align-items: stretch;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #f5f7f4;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: inherit;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 68px;
  padding: 12px 28px;
  border-bottom: 1px solid rgba(215, 222, 232, 0.85);
  background: rgba(245, 247, 244, 0.92);
  box-shadow: 0 10px 30px rgba(24, 39, 75, 0.04);
  backdrop-filter: blur(12px);
}

.topbar > .brand {
  flex: 0 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.brand::before {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--blue));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  content: "";
}

.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  min-width: 0;
}

nav a,
footer a {
  text-decoration: none;
}

nav a {
  padding: 8px 11px;
  border-radius: 7px;
  font-weight: 700;
}

nav a:hover {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

footer a:hover {
  color: var(--accent);
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  font-size: 13px;
}

.language-switch a {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
}

.language-switch a.active {
  background: var(--accent);
  color: #fff;
}

main {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.breadcrumb a {
  color: var(--accent-dark);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span::before {
  margin-right: 8px;
  color: var(--line-strong);
  content: "/";
}

.hero {
  display: block;
  min-height: 292px;
  padding: 28px 0 18px;
}

.hero > div {
  position: relative;
  min-height: 254px;
  padding: 36px 34px 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(231, 245, 243, 0.72), rgba(238, 242, 251, 0.66)),
    var(--panel);
  box-shadow: var(--shadow);
  text-align: center;
}

.home-intro {
  min-height: 0;
  padding: 8px 0 24px;
}

.home-intro > div {
  min-height: 0;
  padding: 26px 24px 24px;
  box-shadow: 0 10px 30px rgba(24, 39, 75, 0.055);
}

.home-intro h1 {
  max-width: 860px;
  font-size: 30px;
}

.home-intro .lede {
  max-width: 840px;
  font-size: 16px;
  text-wrap: pretty;
}

.home-intro .hero-actions {
  margin-top: 18px;
}

.home-intro .trust-strip {
  margin-top: 14px;
}

.featured-life-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 1040px;
  margin: 24px auto 0;
  text-align: left;
}

.featured-tool-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px 14px;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(8, 117, 111, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(24, 39, 75, 0.08);
  color: var(--ink);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.featured-tool-card::after {
  position: absolute;
  right: -42px;
  bottom: -58px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(8, 117, 111, 0.07);
  content: "";
}

.featured-tool-card.featured-chef {
  border-color: rgba(8, 117, 111, 0.24);
  background: rgba(255, 255, 255, 0.92);
}

.featured-tool-card.featured-chef::after {
  background: rgba(8, 117, 111, 0.07);
}

.featured-tool-card:hover {
  border-color: rgba(8, 117, 111, 0.62);
  box-shadow: 0 16px 34px rgba(24, 39, 75, 0.12);
  transform: translateY(-2px);
}

.featured-tool-card:focus-visible {
  outline: 3px solid rgba(36, 87, 197, 0.3);
  outline-offset: 3px;
}

.featured-tool-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--accent), #0a6f84);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
}

.featured-chef .featured-tool-icon {
  background: linear-gradient(135deg, #b45309, #dc6b12);
}

.featured-finance .featured-tool-icon {
  background: linear-gradient(135deg, #153f36, #2c7a65);
}

.featured-finance::after {
  background: rgba(21, 63, 54, 0.08);
}

.featured-tool-copy,
.featured-tool-copy > span,
.featured-tool-copy > strong,
.featured-tool-copy > small {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
}

.featured-tool-copy small {
  margin-bottom: 3px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.featured-chef .featured-tool-copy small {
  color: var(--accent-dark);
}

.featured-tool-copy strong {
  font-size: 20px;
  line-height: 1.3;
}

.featured-tool-copy > span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.featured-tool-cta {
  position: relative;
  z-index: 1;
  grid-column: 2;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 900;
}

.featured-chef .featured-tool-cta {
  color: var(--accent-dark);
}

.featured-tool-cta b {
  margin-left: 4px;
  font-size: 16px;
}

.quick-tools-label {
  margin: 20px 0 -8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

@media (max-width: 960px) {
  .featured-life-tools {
    grid-template-columns: 1fr;
    max-width: 700px;
  }
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

h1,
h2 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: 0;
}

h1 {
  max-width: 940px;
  font-size: 36px;
}

h2 {
  font-size: 26px;
}

.lede {
  max-width: 680px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 17px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 720px;
  margin: 22px auto 0;
}

.hero-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid rgba(8, 117, 111, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.hero-actions a:hover {
  border-color: var(--accent);
  background: #fff;
  color: var(--accent-dark);
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.trust-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(90, 67, 0, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.ad-unit {
  display: grid;
  place-items: center;
  min-height: 220px;
  height: 220px;
  contain: layout paint size;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg, rgba(215, 222, 232, 0.28), rgba(215, 222, 232, 0.28) 8px, transparent 8px, transparent 16px),
    #f8fafc;
  color: #778394;
  text-align: center;
}

.ad-fallback {
  display: grid;
  place-items: center;
}

.ad-unit span {
  display: block;
  font-weight: 800;
}

.ad-unit small {
  display: block;
  margin-top: 4px;
}

.ad-unit-inline {
  min-height: 120px;
  height: 120px;
  width: min(100%, 300px);
}

.ad-unit-strip {
  min-height: 120px;
  height: 120px;
  margin: 18px 0;
}

.ad-unit[data-ad-mode="placeholder"] {
  user-select: none;
}

.tool-workbench {
  display: grid;
  gap: 24px;
  margin: 14px 0 28px;
}

.smart-launcher {
  display: grid;
  gap: 14px;
  margin: 4px auto 30px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.smart-drop {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 360px;
  padding: 46px 32px 40px;
  overflow: hidden;
  border: 2px dashed rgba(8, 117, 111, 0.46);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% -12%, rgba(8, 117, 111, 0.18), transparent 330px),
    radial-gradient(circle at 12% 88%, rgba(255, 255, 255, 0.76), transparent 240px),
    linear-gradient(135deg, #ffffff, #e7f5f3 56%, #dcecff);
  color: #193b40;
  cursor: pointer;
  text-align: center;
  box-shadow:
    0 28px 70px rgba(24, 39, 75, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.smart-drop:hover,
.smart-drop.is-dragging {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 50% -12%, rgba(8, 117, 111, 0.24), transparent 330px),
    radial-gradient(circle at 12% 88%, rgba(255, 255, 255, 0.82), transparent 240px),
    linear-gradient(135deg, #ffffff, #dff3ef 58%, #d7e7ff);
  box-shadow:
    0 34px 84px rgba(24, 39, 75, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transform: translateY(-2px);
}

.smart-drop input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.smart-upload-icon {
  position: relative;
  width: 66px;
  height: 48px;
  margin-bottom: 30px;
}

.smart-upload-icon::before,
.smart-upload-icon::after {
  position: absolute;
  content: "";
}

.smart-upload-icon::before {
  left: 8px;
  bottom: 0;
  width: 42px;
  height: 28px;
  border-radius: 22px 22px 16px 16px;
  background: var(--accent-dark);
  box-shadow:
    -9px 3px 0 -1px var(--accent-dark),
    13px 4px 0 -2px var(--accent-dark);
}

.smart-upload-icon::after {
  left: 26px;
  bottom: -14px;
  width: 7px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent-dark);
  box-shadow:
    -10px -7px 0 -2px var(--accent-dark),
    10px -7px 0 -2px var(--accent-dark);
}

.smart-drop-title,
.smart-drop-subtitle,
.smart-drop-button,
.smart-drop-privacy {
  position: relative;
  z-index: 1;
  display: block;
}

.smart-drop-title {
  max-width: 860px;
  color: #111827;
  font-size: 38px;
  font-weight: 950;
  line-height: 1.18;
}

.smart-drop-subtitle {
  max-width: 680px;
  margin-top: 14px;
  color: #315b61;
  font-size: 18px;
  font-weight: 700;
}

.smart-drop-button {
  min-height: 54px;
  margin-top: 32px;
  padding: 14px 34px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 28px rgba(8, 117, 111, 0.22);
  font-size: 16px;
  font-weight: 950;
}

.smart-drop-privacy {
  margin-top: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: #4f6670;
  font-size: 13px;
  font-weight: 800;
}

.smart-results {
  display: grid;
  gap: 10px;
  padding: 0 2px;
}

.smart-results > .muted-note {
  text-align: center;
}

.smart-result-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(8, 117, 111, 0.2);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(231, 245, 243, 0.62)),
    #fff;
  box-shadow: 0 16px 38px rgba(24, 39, 75, 0.065);
}

.smart-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 2px 4px;
}

.smart-result-head > div {
  display: grid;
  gap: 3px;
}

.smart-result-head strong {
  color: var(--ink);
  font-size: 16px;
}

.smart-result-head span {
  color: var(--muted);
  font-size: 13px;
}

.smart-reset-btn {
  min-height: 36px;
  padding: 8px 13px;
  box-shadow: none;
  white-space: nowrap;
}

.smart-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(8, 117, 111, 0.2);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, #ffffff, rgba(231, 245, 243, 0.44)),
    #fff;
  box-shadow: 0 10px 26px rgba(24, 39, 75, 0.045);
}

.smart-file-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.smart-file-badge {
  display: none;
}

.smart-file-meta > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.smart-file-meta strong {
  display: block;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.smart-file-meta span {
  color: var(--muted);
  font-size: 13px;
}

.smart-tool-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.smart-tool-label {
  flex: 0 0 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.smart-tool-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(8, 117, 111, 0.22);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.smart-tool-links a:hover {
  border-color: var(--accent);
  background: #fff;
}

.tool-workbench[id] {
  scroll-margin-top: 84px;
}

.tool-group {
  display: grid;
  gap: 11px;
}

.tool-group-head {
  display: block;
}

.tool-group-head .eyebrow {
  margin-bottom: 7px;
}

.tool-group-head h2 {
  font-size: 21px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.tool-group-compact .tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-card {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 136px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: 0 10px 26px rgba(24, 39, 75, 0.045);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tool-card::before {
  display: block;
  width: 30px;
  height: 5px;
  margin-bottom: 13px;
  border-radius: 999px;
  background: var(--accent);
  content: "";
}

.tool-card:hover {
  border-color: rgba(8, 117, 111, 0.38);
  box-shadow: 0 18px 34px rgba(8, 117, 111, 0.09);
  transform: translateY(-2px);
}

.tool-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
}

.tool-card span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.image-matrix {
  margin-top: 18px;
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.link-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
}

#design-tools .matrix-grid,
#design-tools .link-matrix,
#file-tools .matrix-grid,
#file-tools .link-matrix,
#audio-tools .matrix-grid,
#audio-tools .link-matrix {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.matrix-grid a,
.link-matrix a {
  position: relative;
  display: block;
  min-height: 78px;
  aspect-ratio: 2.45 / 1;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(8, 117, 111, 0.18);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(231, 245, 243, 0.82), rgba(255, 255, 255, 0.92) 58%, rgba(238, 242, 251, 0.68)),
    #fff;
  box-shadow: 0 8px 22px rgba(8, 117, 111, 0.045);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.matrix-grid a:hover,
.link-matrix a:hover {
  border-color: rgba(8, 117, 111, 0.48);
  background:
    linear-gradient(135deg, rgba(219, 242, 237, 0.96), rgba(255, 255, 255, 0.96) 58%, rgba(231, 239, 255, 0.78)),
    #fff;
  box-shadow: 0 14px 30px rgba(8, 117, 111, 0.09);
  transform: translateY(-1px);
}

.matrix-grid strong,
.matrix-grid span,
.link-matrix strong,
.link-matrix span {
  display: block;
}

.link-matrix strong {
  margin-bottom: 5px;
  font-size: 15px;
}

.link-matrix span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.matrix-grid strong {
  font-size: 15px;
}

.matrix-grid span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.matrix-grid a.planned {
  background: #fbfcfe;
  color: var(--muted);
}

.intent-block {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: center;
  margin: 18px 0;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  box-shadow: var(--shadow-soft);
}

.intent-block h2 {
  font-size: 24px;
}

.intent-block p:not(.eyebrow) {
  margin: 10px 0 0;
  color: var(--muted);
}

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

.intent-links a {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.intent-links a:hover {
  border-color: rgba(8, 117, 111, 0.38);
  background: var(--accent-soft);
}

.tool-section,
.content-block {
  margin: 18px 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 24px 26px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(231, 245, 243, 0.56), rgba(255, 255, 255, 0.86) 52%, rgba(234, 240, 255, 0.42)),
    var(--panel-strong);
}

.section-head p {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--muted);
}

.content-block {
  padding: 26px;
}

.content-block p {
  max-width: 860px;
  color: var(--muted);
}

.content-block h2 {
  margin-top: 24px;
  margin-bottom: 10px;
  font-size: 24px;
}

.content-block h2:first-child,
.content-block .eyebrow + h1 + p + h2 {
  margin-top: 22px;
}

.content-block ul,
.content-block ol {
  margin-top: 10px;
  margin-bottom: 24px;
  padding-left: 22px;
}

.content-block li {
  margin: 8px 0;
}

.support-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: center;
  margin: 18px 0;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.support-block p:not(.eyebrow) {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--muted);
}

.reward-card {
  display: grid;
  gap: 9px;
  justify-items: center;
  margin: 0;
}

.reward-card a {
  display: block;
  width: min(100%, 240px);
  aspect-ratio: 1 / 1;
}

.reward-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.reward-card figcaption {
  color: var(--muted);
  font-size: 13px;
}

.panel {
  display: grid;
  gap: 14px;
  padding: 20px 26px 24px;
}

.panel > .panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.form-grid,
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: end;
}

.form-grid .wide,
.two-col .wide {
  grid-column: 1 / -1;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 42px;
  color: #46515f;
  font-size: 13px;
  font-weight: 700;
}

.check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
}

.tool-canvas {
  display: block;
  justify-self: start;
  width: min(100%, 256px);
  height: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.tool-canvas[hidden] {
  display: none;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.image-preview-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  align-content: start;
  min-height: 196px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.image-preview-card strong {
  color: #172033;
  font-size: 13px;
  line-height: 1.2;
}

.image-preview-card img,
.image-preview-card canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 250px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.image-preview-card.is-local img,
.image-preview-card.is-local canvas {
  object-fit: cover;
}

.image-preview-empty {
  display: grid;
  place-items: center;
  min-height: 142px;
  aspect-ratio: 4 / 3;
  padding: 14px;
  border: 1px dashed #cbd5df;
  border-radius: 8px;
  background:
    linear-gradient(45deg, rgba(203, 213, 223, 0.18) 25%, transparent 25%, transparent 75%, rgba(203, 213, 223, 0.18) 75%),
    linear-gradient(45deg, rgba(203, 213, 223, 0.18) 25%, transparent 25%, transparent 75%, rgba(203, 213, 223, 0.18) 75%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.watermark-controls {
  align-items: end;
}

.watermark-controls label {
  min-width: 132px;
}

.watermark-controls input[type="color"] {
  width: 64px;
  min-height: 42px;
  padding: 4px;
}

.watermark-controls input[type="range"] {
  width: 180px;
}

.watermark-mode-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.watermark-drag-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  line-height: 0;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.watermark-drag-stage:focus-visible {
  outline: 3px solid rgba(14, 131, 126, 0.28);
  outline-offset: 3px;
}

.watermark-drag-stage.is-dragging {
  cursor: grabbing;
}

.image-preview-card .watermark-drag-stage img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 250px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  pointer-events: none;
}

#imageWatermarkSourcePreview:not(.image-preview-empty) {
  display: flex;
  min-height: 142px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #f8fafc;
}

.watermark-drag-overlay {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.watermark-drag-overlay.is-single {
  padding: 5px 7px;
  border: 1px dashed currentColor;
  border-radius: 5px;
}

.watermark-drag-overlay.is-canvas {
  inset: 0;
  display: block;
  aspect-ratio: auto;
  max-width: none;
  max-height: none;
  object-fit: fill;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.watermark-drag-overlay.is-pattern {
  inset: 0;
  overflow: hidden;
  transform: translate(var(--watermark-preview-x), var(--watermark-preview-y));
}

.watermark-drag-overlay.is-pattern span {
  position: absolute;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
}

.split-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.split-tools > div {
  display: grid;
  gap: 14px;
}

.qr-panel textarea {
  min-height: 120px;
}

.qr-output {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

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

h3 {
  margin: 0;
  font-size: 18px;
}

.file-drop {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(180px, auto);
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 104px;
  padding: 18px 22px;
  border: 1px dashed #9bb6c8;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(8, 117, 111, 0.06), rgba(10, 111, 132, 0.02)),
    #fbfdff;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.file-drop:hover {
  border-color: var(--accent);
  background:
    linear-gradient(135deg, rgba(8, 117, 111, 0.1), rgba(10, 111, 132, 0.04)),
    #f7fcfb;
  box-shadow: 0 12px 28px rgba(8, 117, 111, 0.08);
  transform: translateY(-1px);
}

.file-drop:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(8, 117, 111, 0.12);
}

.file-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.file-drop::before {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--blue));
  box-shadow: 0 10px 20px rgba(8, 117, 111, 0.18);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  content: "+";
}

.file-drop span,
.file-drop-main {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
}

.file-drop-main {
  max-width: min(100%, 520px);
  padding-right: 0;
  text-align: left;
  word-break: break-word;
}

.file-drop-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.file-drop .file-drop-action {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(8, 117, 111, 0.18), 0 8px 20px rgba(24, 39, 75, 0.08);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.file-drop.has-files {
  border-style: solid;
  border-color: rgba(8, 117, 111, 0.45);
  background:
    linear-gradient(135deg, rgba(8, 117, 111, 0.12), rgba(10, 111, 132, 0.05)),
    #f8fcfb;
}

.file-drop.has-files::before {
  content: "OK";
  font-size: 13px;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfd;
}

#loanCurrency {
  min-width: 180px;
}

.controls label:has(input[type="checkbox"]) {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.controls label:has(input[type="checkbox"]) input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

.form-hint {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

label {
  display: grid;
  gap: 6px;
  min-width: 136px;
  color: #46515f;
  font-size: 12px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #cbd5df;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(8, 117, 111, 0.14);
}

input[type="range"] {
  width: 190px;
  padding: 0;
  accent-color: var(--accent);
}

.range-control {
  min-width: 250px;
}

.range-line {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.range-line > span {
  min-width: 42px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.range-line input[type="range"] {
  width: 100%;
}

textarea {
  resize: vertical;
}

.output-area {
  min-height: 220px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  line-height: 1.6;
}

.pdf-structure-options {
  align-items: end;
}

.pdf-structure-options > label:first-child {
  min-width: 180px;
}

.pdf-structured-output {
  min-height: 360px;
  tab-size: 2;
  white-space: pre-wrap;
}

.pdf-structured-output[readonly] {
  background: #fcfdfd;
}

.pdf-text-stats[hidden] {
  display: none;
}

.pdf-text-stats span {
  display: grid;
  gap: 4px;
}

.pdf-text-stats small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pdf-text-stats strong {
  color: var(--accent-dark);
  font-size: 22px;
}

button {
  min-height: 42px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 24px rgba(8, 117, 111, 0.2);
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

button:hover {
  background: var(--accent-dark);
  box-shadow: 0 10px 22px rgba(8, 117, 111, 0.24);
  transform: translateY(-1px);
}

button.secondary {
  background: #344054;
  box-shadow: 0 8px 18px rgba(52, 64, 84, 0.12);
}

button.secondary:hover {
  background: #1f2937;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.result {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--muted);
  font-size: 14px;
}

.result:empty {
  display: none;
}

.result.error {
  border-color: #f3b7b7;
  background: #fff6f6;
  color: #a51d1d;
}

.result-card {
  min-height: 92px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfe;
  overflow-wrap: anywhere;
}

.result-card:empty {
  display: none;
}

.result-card p {
  margin: 8px 0 0;
  color: var(--muted);
}

.code-output {
  min-height: 320px;
  max-height: 620px;
  margin: 14px 0 0;
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111827;
  color: #d9f6ee;
  font: 13px/1.55 Consolas, "Courier New", monospace;
  white-space: pre;
}

.table-scroll {
  margin-top: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.table-scroll:empty {
  display: none;
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.table-scroll th,
.table-scroll td {
  padding: 9px 11px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.table-scroll th {
  position: sticky;
  top: 0;
  background: #eef8f6;
}

.detail-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.detail-list div {
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) minmax(0, 1fr);
  gap: 12px;
}

.detail-list dt {
  color: var(--muted);
}

.detail-list dd {
  margin: 0;
  font-family: Consolas, "Courier New", monospace;
  overflow-wrap: anywhere;
}

.ip-section + .ip-section {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.ip-section h3 {
  margin: 0 0 12px;
  color: #172033;
  font-size: 20px;
}

.ip-generator-fields {
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr);
}

.ip-conflict-table td:last-child {
  min-width: 250px;
  white-space: normal;
}

.ip-conflict-table tr.has-conflict td {
  background: #fff8f7;
}

.ip-conflict-table tr.is-safe td {
  background: #fbfffd;
}

.ip-state {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ip-state.safe {
  background: #dcf7e9;
  color: #087052;
}

.ip-state.conflict,
.ip-state.invalid {
  background: #fee2e2;
  color: #b42318;
}

.ip-conflict-detail {
  margin-top: 7px;
  color: #8f1d16;
  font-size: 12px;
  line-height: 1.5;
}

.ip-generated-output {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfe;
}

.ip-generated-output:empty {
  display: none;
}

.ip-generated-output h4 {
  margin: 0 0 4px;
  color: #172033;
  font-size: 16px;
}

.ip-suggestion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #d7e9e5;
  border-radius: 9px;
  background: #fff;
}

.ip-suggestion code {
  color: #172033;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ip-suggestion button {
  min-height: 34px;
  padding: 6px 12px;
}

.image-preview {
  display: block;
  width: min(100%, 720px);
  max-height: 420px;
  margin: 14px auto;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.image-preview[hidden] {
  display: none;
}

.media-preview,
.canvas-preview {
  display: block;
  width: min(100%, 900px);
  max-height: 560px;
  margin: 14px auto;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0f172a;
}

.attachment-list,
.option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.option-row label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.break-all {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.palette-swatch {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #172033;
}

.palette-swatch span {
  display: block;
  height: 70px;
  margin-bottom: 8px;
  border-radius: 7px;
  background: var(--swatch);
}

.palette-swatch strong {
  font-size: 13px;
}

.strength-meter {
  height: 12px;
  margin: 14px 0;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf3;
}

.strength-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #dc2626;
  transition: width 160ms ease, background 160ms ease;
}

.strength-meter span[data-score="1"] { background: #ea580c; }
.strength-meter span[data-score="2"] { background: #ca8a04; }
.strength-meter span[data-score="3"] { background: #16a34a; }
.strength-meter span[data-score="4"] { background: #08756f; }

.gradient-preview {
  min-height: 240px;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.favicon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.favicon-grid div {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 130px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}

.favicon-grid canvas {
  max-width: 82px;
  max-height: 82px;
  image-rendering: auto;
}

.scan-canvas {
  display: block;
  width: min(100%, 720px);
  max-height: 560px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.scan-canvas[hidden] {
  display: none;
}

.preview-surface {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(45deg, #eef2f6 25%, transparent 25%),
    linear-gradient(-45deg, #eef2f6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef2f6 75%),
    linear-gradient(-45deg, transparent 75%, #eef2f6 75%),
    #fff;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.preview-surface canvas {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
}

.diff-output {
  min-height: 110px;
  padding: 16px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: 14px/1.7 Consolas, "Courier New", monospace;
}

.diff-added,
.diff-output mark {
  padding: 1px 2px;
  border-radius: 3px;
  background: #dff7e9;
  color: #135c35;
  text-decoration: none;
}

.diff-removed {
  padding: 1px 2px;
  border-radius: 3px;
  background: #ffe4e4;
  color: #9d2424;
  text-decoration: line-through;
}

.timestamp-results,
.contrast-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.timestamp-results > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcfe;
}

.timestamp-results strong {
  color: var(--muted);
  font-size: 12px;
}

.timestamp-results code {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
}

.contrast-preview {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: clamp(22px, 4vw, 42px);
  font-weight: 800;
  text-align: center;
}

.contrast-results {
  align-items: stretch;
}

.contrast-ratio,
.contrast-pass,
.contrast-fail {
  display: grid;
  place-items: center;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 9px;
  font-weight: 800;
  text-align: center;
}

.contrast-ratio {
  border: 1px solid #b8d9d6;
  background: #e9f6f4;
  color: var(--accent-dark);
  font-size: 24px;
}

.contrast-pass {
  border: 1px solid #b7dfc7;
  background: #e8f7ee;
  color: #135c35;
}

.contrast-fail {
  border: 1px solid #efc3c3;
  background: #fff0f0;
  color: #9d2424;
}

.markdown-preview {
  min-height: 220px;
  max-height: 520px;
  padding: 16px 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  line-height: 1.7;
}

.markdown-preview > :first-child {
  margin-top: 0;
}

.markdown-preview pre {
  padding: 12px;
  overflow: auto;
  border-radius: 7px;
  background: #172033;
  color: #f8fafc;
}

.markdown-preview code {
  font-family: Consolas, "Courier New", monospace;
}

.document-preview {
  min-height: 360px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: #eef2f7;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.document-preview .docx-wrapper {
  background: #eef2f7;
  padding: 24px;
}

.document-preview .docx-wrapper > section.docx {
  margin: 0 auto 24px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.document-preview:empty {
  display: none;
}

.cropper-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  grid-template-areas:
    "meta meta"
    "stage zoom";
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.cropper-panel[hidden] {
  display: none;
}

.cropper-stage {
  grid-area: stage;
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef3f8;
  user-select: none;
}

.cropper-stage img {
  display: block;
  max-width: 100%;
  max-height: 520px;
  margin: 0 auto;
}

.crop-box {
  position: absolute;
  left: 18%;
  top: 18%;
  width: 46%;
  height: 46%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.48), 0 0 0 1px rgba(15, 23, 42, 0.3);
  cursor: move;
  touch-action: none;
}

.crop-box::before,
.crop-box::after {
  content: "";
  position: absolute;
  inset: 33.333% 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.72);
}

.crop-box::after {
  inset: 66.666% 0 auto;
}

.crop-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  cursor: nwse-resize;
}

.cropper-meta {
  grid-area: meta;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cropper-meta span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
}

.cropper-meta strong {
  color: var(--ink);
}

.zoom-preview {
  grid-area: zoom;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.zoom-preview-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.zoom-preview-head > div {
  display: grid;
  gap: 2px;
}

.zoom-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fbfd;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.zoom-level strong {
  color: var(--ink);
}

.zoom-preview small {
  color: var(--muted);
  font-size: 12px;
}

.zoom-canvas-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-height: 620px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #eef3f8;
  cursor: zoom-in;
}

.zoom-canvas-wrap::before,
.zoom-canvas-wrap::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.16);
}

.zoom-canvas-wrap::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
}

.zoom-canvas-wrap::after {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}

.zoom-preview canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 620px;
  image-rendering: auto;
}

.result a {
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 800;
  word-break: break-all;
}

.file-results {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.file-result-row {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
}

.file-result-row strong {
  color: var(--ink);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.stats span {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfd;
  color: #344054;
  font-weight: 800;
}

.two-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

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

.password-panel {
  gap: 16px;
}

.password-options {
  display: grid;
  gap: 12px;
}

.password-character-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.password-check-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font-size: 14px;
  font-weight: 900;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.password-check-card:hover {
  border-color: rgba(8, 117, 111, 0.34);
  box-shadow: 0 10px 22px rgba(24, 39, 75, 0.06);
  transform: translateY(-1px);
}

.password-check-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--accent);
}

.password-field-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(140px, 180px) minmax(140px, 180px);
  gap: 12px;
  align-items: end;
}

.password-option-wide,
.password-options > label,
.password-inline {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.password-options > label {
  font-weight: 800;
}

.password-options > label input {
  min-height: 42px;
}

.checkbox-row,
.password-inline > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.checkbox-row label,
.password-inline label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 800;
}

.checkbox-row label {
  min-width: 118px;
  justify-content: center;
  white-space: nowrap;
}

.password-inline label {
  min-width: 0;
  white-space: nowrap;
}

.password-option-wide .label-text,
.password-inline .label-text {
  color: #344054;
  font-size: 14px;
  font-weight: 900;
}

.password-inline input[type="number"],
.password-inline select {
  width: auto;
  min-width: 82px;
  min-height: 38px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.password-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(231, 245, 243, 0.58), rgba(249, 251, 253, 0.92)),
    #f9fbfd;
}

.password-actions label {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.password-actions .check-row {
  justify-self: start;
}

.password-result {
  display: grid;
  gap: 10px;
}

.password-result-row,
.password-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(8, 117, 111, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff, rgba(231, 245, 243, 0.34)),
    #fff;
}

.password-result-row code,
.password-history-row code {
  overflow-wrap: anywhere;
  color: var(--accent-dark);
  font-size: 18px;
  font-weight: 900;
}

.password-strength {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(8, 117, 111, 0.14);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
}

.password-strength:empty {
  display: none;
}

.password-history-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfd;
}

.password-history-panel[hidden] {
  display: none;
}

.password-history-list {
  display: grid;
  gap: 8px;
}

.muted-note {
  margin: 0;
  color: var(--muted);
}

footer {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 36px 16px;
  color: var(--muted);
  font-size: 14px;
}

.seo-hero .lede {
  max-width: 760px;
}

.seo-content {
  display: block;
}

.seo-content p {
  max-width: 840px;
}

.seo-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 22px;
  color: var(--text);
}

.inline-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.faq-item {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.faq-item h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.faq-item p {
  margin: 0;
  color: var(--muted);
}

.faq-home .faq-grid {
  margin-top: 16px;
}

@media (max-width: 960px) {
  .topbar {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .topbar-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .ad-unit {
    min-height: 120px;
    height: 120px;
  }

  h1 {
    font-size: 34px;
  }

  .section-head {
    grid-template-columns: 1fr;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .tool-grid,
  .tool-group-compact .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .matrix-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #design-tools .matrix-grid,
  #design-tools .link-matrix,
  #file-tools .matrix-grid,
  #file-tools .link-matrix,
  #audio-tools .matrix-grid,
  #audio-tools .link-matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .split-tools {
    grid-template-columns: 1fr;
  }

  .qr-output {
    grid-template-columns: 1fr;
  }

  .cropper-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "stage"
      "zoom";
  }

  .cropper-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-block {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .intent-block {
    grid-template-columns: 1fr;
  }

  .smart-launcher,
  .smart-file-row {
    grid-template-columns: 1fr;
  }

  .smart-tool-links {
    justify-content: flex-start;
  }

  .smart-result-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .smart-reset-btn {
    width: 100%;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .password-option-wide,
  .password-options > label,
  .password-inline,
  .password-character-grid,
  .password-actions,
  .password-field-grid {
    grid-template-columns: 1fr;
  }

  .password-actions label {
    justify-self: stretch;
  }
}

@media (max-width: 560px) {
  main {
    width: min(100% - 20px, 1180px);
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    padding: 10px 12px 9px;
  }

  .topbar-actions {
    display: contents;
  }

  .language-switch {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    margin: 0 -2px;
    padding: 2px 2px 3px;
    overflow-x: auto;
    font-size: 13px;
    scrollbar-width: none;
  }

  nav::-webkit-scrollbar {
    display: none;
  }

  nav a {
    flex: 0 0 auto;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid rgba(215, 222, 232, 0.72);
  }

  .hero > div,
  .section-head,
  .panel,
  .content-block,
  .support-block {
    padding: 18px;
  }

  .hero {
    min-height: 0;
    padding: 14px 0 16px;
  }

  .hero > div {
    min-height: 0;
    padding: 20px 18px;
  }

  .hero-actions,
  .trust-strip {
    justify-content: center;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
  }

  .hero-actions a {
    justify-content: center;
    min-height: 40px;
    padding: 8px 10px;
    text-align: center;
  }

  .hero-actions a:first-child {
    grid-column: 1 / -1;
  }

  .featured-life-tools {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  .featured-tool-card {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 15px;
  }

  .featured-tool-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 17px;
  }

  .featured-tool-copy strong {
    font-size: 18px;
  }

  .featured-tool-cta {
    grid-column: 2;
  }

  .trust-strip {
    gap: 6px;
    margin-top: 12px;
  }

  .trust-strip span {
    min-height: 26px;
    padding: 4px 8px;
    font-size: 12px;
  }

  .tool-grid,
  .tool-group-compact .tool-grid,
  .matrix-grid,
  .intent-links,
  .stats,
  .image-preview-grid,
  .form-grid,
  .two-col {
    grid-template-columns: 1fr;
  }

  #design-tools .matrix-grid,
  #design-tools .link-matrix,
  #file-tools .matrix-grid,
  #file-tools .link-matrix,
  #audio-tools .matrix-grid,
  #audio-tools .link-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-card {
    min-height: 118px;
  }

  .smart-drop {
    min-height: 264px;
    padding: 30px 18px 24px;
    border-radius: 22px;
  }

  .smart-drop-title {
    font-size: 25px;
  }

  .smart-drop-subtitle {
    font-size: 15px;
  }

  .matrix-grid a,
  .link-matrix a {
    min-height: 74px;
    aspect-ratio: auto;
  }

  h1 {
    font-size: 26px;
  }

  .lede {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.45;
  }

  h2 {
    font-size: 23px;
  }

  .controls {
    align-items: stretch;
  }

  .file-drop {
    grid-template-columns: auto minmax(0, auto);
    justify-items: start;
    min-height: 112px;
    padding: 18px 16px;
    gap: 14px;
  }

  .file-drop-main {
    max-width: 100%;
    text-align: left;
  }

  .file-drop-hint {
    text-align: left;
  }

  .file-drop .file-drop-action {
    display: none;
  }

  .controls > * {
    width: 100%;
  }

  .password-result-row,
  .password-history-row {
    grid-template-columns: 1fr;
  }

  input[type="range"] {
    width: 100%;
  }
}









/* High-value document tools */
.hv-tool .panel{overflow:visible}.hv-layout{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:18px;align-items:start}.hv-sidebar,.hv-workspace{min-width:0}.hv-sidebar{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}.hv-sidebar .file-drop{min-height:108px;margin:0}.hv-stack{display:grid;grid-template-columns:1fr;gap:8px}.hv-stack>*{width:100%}.hv-button-label{display:flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);font-weight:800;cursor:pointer}.hv-button-label:hover{border-color:var(--accent);background:var(--accent-soft)}.hv-button-label input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.hv-form-grid{display:grid;gap:12px}.hv-check{display:flex!important;align-items:center;gap:8px}.hv-check input{width:auto!important}.hv-note,.hv-warning{padding:11px 12px;border-radius:8px;font-size:13px;line-height:1.55}.hv-note{background:#fff;color:var(--muted);border:1px solid var(--line)}.hv-warning{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}.hv-pagebar{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}.hv-pagebar button{min-width:42px;padding:8px 12px}.hv-pagebar span{min-width:120px;text-align:center;font-weight:800}.hv-pdf-stage{position:relative;display:grid;place-items:center;min-height:420px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#dfe7ef}.hv-pdf-stage canvas{display:block;max-width:none;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.14)}.hv-pdf-stage .hv-empty{position:absolute;inset:0;display:grid;place-items:center;padding:28px;color:var(--muted);text-align:center}.hv-pdf-stage.has-page .hv-empty{display:none}.hv-overlay{position:absolute;touch-action:none}.hv-overlay-item{position:absolute;display:flex;align-items:flex-start;min-width:24px;min-height:24px;padding:3px;border:1px dashed transparent;cursor:grab;touch-action:none;user-select:none}.hv-overlay-item.selected{border-color:#0f766e;background:rgba(204,251,241,.24)}.hv-overlay-item img{display:block;width:100%;height:auto;pointer-events:none}.hv-item-text,.hv-item-date{font-weight:600;line-height:1.2;white-space:nowrap}.hv-item-check{font-size:clamp(24px,4vw,52px);font-weight:900;line-height:1}.hv-dialog{width:min(700px,calc(100% - 24px));padding:0;border:0;border-radius:14px;box-shadow:0 25px 80px rgba(15,23,42,.3)}.hv-dialog::backdrop{background:rgba(15,23,42,.56)}.hv-dialog form{padding:20px}.hv-dialog h3{margin-top:0}.hv-dialog canvas{display:block;max-width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;touch-action:none}.hv-file-list{display:grid;gap:10px}.hv-file-card{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}.hv-file-card img{width:72px;height:72px;object-fit:cover;border-radius:7px}.hv-file-card strong,.hv-file-card span{display:block;overflow-wrap:anywhere}.hv-file-card span{margin-top:4px;color:var(--muted);font-size:13px}.hv-mini-controls{display:flex;gap:5px}.hv-mini-controls button{min-width:36px;padding:7px}.hv-empty-card{padding:50px 18px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);text-align:center}.hv-table-wrap{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:10px}.hv-data-table{width:max-content;min-width:100%;border-collapse:collapse;background:#fff}.hv-data-table th,.hv-data-table td{padding:7px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:top}.hv-data-table th{position:sticky;top:0;z-index:1;background:#f1f7f6;font-size:13px;white-space:nowrap}.hv-data-table input,.hv-data-table textarea{width:150px;min-width:110px;padding:8px}.hv-data-table textarea{width:280px;min-height:76px;resize:vertical}.hv-data-table td:first-child input{width:180px}.hv-data-table td:nth-child(4) input{width:220px}.hv-data-table td:last-child{border-right:0}.hv-data-table button{padding:7px 10px}.hv-crosshair .hv-overlay{cursor:crosshair}.hv-redaction{position:absolute;display:grid;place-items:center;overflow:hidden;padding:0;border:1px solid #ef4444;border-radius:0;font-size:11px;font-weight:900;line-height:1;cursor:pointer}.hv-redaction-black{background:#000;color:#fff}.hv-redaction-white{background:#fff;color:#111}.hv-sign-layout .hv-workspace>.controls,.hv-tool .hv-workspace>.controls{justify-content:center;margin-top:12px}
@media(max-width:820px){.hv-layout{grid-template-columns:1fr}.hv-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.hv-sidebar>.file-drop,.hv-sidebar>.hv-note,.hv-sidebar>.hv-warning,.hv-sidebar>.hv-stack{grid-column:1/-1}.hv-pdf-stage{min-height:360px}}
@media(max-width:560px){.hv-tool .panel{padding:12px}.hv-sidebar{grid-template-columns:1fr;padding:12px}.hv-sidebar>*{grid-column:1!important}.hv-pdf-stage{min-height:320px;margin-inline:-2px}.hv-file-card{grid-template-columns:56px minmax(0,1fr)}.hv-file-card img{width:56px;height:56px}.hv-mini-controls{grid-column:1/-1;justify-content:flex-end}.hv-data-table input{width:132px}.hv-data-table textarea{width:220px}.hv-dialog form{padding:14px}}
.hv-receipt-section+.hv-receipt-section{margin-top:20px}.hv-subhead{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:10px}.hv-subhead h3{margin:3px 0 0}.hv-subhead>span{color:var(--muted);font-weight:800;white-space:nowrap}.hv-detected-docs{display:grid;gap:10px}.hv-detected-card{padding:14px;border:1px solid var(--line);border-radius:10px;background:#fff}.hv-detected-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.hv-detected-title strong{overflow-wrap:anywhere}.hv-detected-title span{flex:0 0 auto;padding:4px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:800}.hv-detected-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hv-detected-grid label{min-width:0}.hv-detected-grid input{width:100%}.hv-detected-card details{margin-top:10px}.hv-detected-card summary{color:var(--accent);font-weight:800;cursor:pointer}.hv-detected-card pre{max-height:220px;margin:10px 0 0;padding:12px;overflow:auto;border-radius:8px;background:#f8fafc;color:var(--muted);font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}.hv-table-empty{min-width:360px;padding:42px!important;color:var(--muted);text-align:center}.hv-line-item-table td:first-child input{width:240px}.hv-line-item-table td:last-child{width:52px;text-align:center}
.hv-receipt-validation{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:10px 12px;border:1px solid;border-radius:9px;font-size:13px}.hv-receipt-validation strong{flex:0 0 auto}.hv-receipt-validation span{color:inherit}.hv-receipt-validation ul{margin:0;padding-left:18px}.hv-receipt-validation.is-pass{border-color:#8dd6bb;background:#ecfbf5;color:#0b6b46}.hv-receipt-validation.is-warning{border-color:#f2bd78;background:#fff7e8;color:#8a4700}
.hv-receipt-drop .file-drop-hint{display:none}.hv-receipt-file-list{display:grid;gap:6px;margin-top:-8px}.hv-receipt-file{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:start;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff}.hv-receipt-file span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:900}.hv-receipt-file strong{min-width:0;overflow-wrap:anywhere;font-size:13px;line-height:1.45}
@media(max-width:820px){.hv-detected-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hv-subhead{align-items:start}.hv-detected-grid{grid-template-columns:1fr}.hv-detected-card{padding:12px}.hv-table-empty{min-width:260px;padding:30px 14px!important}.hv-line-item-table td:first-child input{width:200px}}












/* Workflow and finance tools */
.wf-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px}.wf-sidebar{display:grid;align-content:start;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}.wf-sidebar label{display:grid;gap:6px;font-weight:800}.wf-sidebar input,.wf-sidebar select,.wf-inline input,.wf-inline select,.wf-table input{width:100%;min-height:42px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit}.wf-workspace{min-width:0}.wf-note{margin:0;padding:11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted);font-size:13px;line-height:1.55}.wf-table-wrap{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}.wf-table{width:100%;border-collapse:collapse;font-size:14px}.wf-table th,.wf-table td{min-width:112px;padding:10px 11px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.wf-table th{position:sticky;top:0;z-index:1;background:#eaf8f6;color:#0f4f4a}.wf-table td[contenteditable="true"]:focus{outline:2px solid var(--accent);outline-offset:-2px;background:#fff}.wf-metrics{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0 0 14px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}.wf-metrics b{color:var(--accent)}.wf-diff{min-height:300px;max-height:680px;padding:18px;overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff;white-space:pre-wrap;line-height:1.75}.wf-diff ins{background:#d1fae5;text-decoration:none}.wf-diff del{background:#fee2e2}.wf-portfolio{display:grid;gap:22px}.wf-portfolio section{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}.wf-portfolio h2{margin:0 0 14px}.wf-inline{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:14px 0}.wf-inline label{display:grid;gap:6px;min-width:190px;font-weight:800}.wf-chart{display:block;width:100%;height:360px;margin-top:14px;border:1px solid var(--line);border-radius:10px;background:#fff}.wf-portfolio .controls{margin-top:14px}
@media(max-width:820px){.wf-layout{grid-template-columns:1fr}.wf-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.wf-sidebar .file-drop,.wf-sidebar .wf-note{grid-column:1/-1}}
@media(max-width:560px){.wf-sidebar{grid-template-columns:1fr}.wf-sidebar .file-drop,.wf-sidebar .wf-note{grid-column:auto}.wf-table th,.wf-table td{min-width:100px;padding:9px}.wf-chart{height:280px}}
.wf-portfolio,.wf-portfolio section{min-width:0;width:100%}
.wf-layout{grid-template-columns:minmax(0,280px) minmax(0,1fr)}
.wf-sidebar{min-width:0;max-width:100%;overflow:hidden}
.wf-sidebar .file-drop{grid-template-columns:46px minmax(0,1fr);justify-content:stretch;width:100%;max-width:100%;min-width:0;padding:14px;gap:12px;overflow:hidden}
.wf-sidebar .file-drop-copy{min-width:0;width:100%;max-width:100%;overflow:hidden}
.wf-sidebar .file-drop-main{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-sidebar .file-drop-hint{display:-webkit-box;min-width:0;max-width:100%;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;word-break:break-all}
@media(max-width:820px){.wf-layout{grid-template-columns:minmax(0,1fr)}.wf-sidebar{width:100%}}









/* Quick-tools high-value additions */
.qv-tool .panel{overflow:visible}.qv-layout{display:grid;grid-template-columns:minmax(240px,290px) minmax(0,1fr);gap:18px;align-items:start}.qv-sidebar{display:grid;align-content:start;gap:12px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}.qv-sidebar .file-drop{min-height:108px;margin:0}.qv-sidebar label,.qv-two-column label,.qv-grid-2 label{display:grid;gap:6px;font-weight:800}.qv-sidebar input:not([type="checkbox"]),.qv-sidebar select,.qv-two-column select,.qv-two-column textarea,.qv-grid-2 input,.qv-grid-2 select{width:100%;min-height:42px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit}.qv-check{display:flex!important;align-items:center;gap:8px}.qv-check input{width:auto}.qv-note,.qv-example{margin:0;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted);font-size:13px;line-height:1.55}.qv-workspace{display:grid;gap:18px;min-width:0}.qv-workspace>section{min-width:0}.qv-subhead,.qv-recorder-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px}.qv-subhead h2{margin:3px 0 0;font-size:20px}.qv-subhead>span,.qv-recorder-head>span{color:var(--muted);font-size:13px;font-weight:800}.qv-chip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.qv-column-chip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;min-width:0;padding:11px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer}.qv-column-chip.is-protected{border-color:#70bfb9;background:#ecfaf8}.qv-column-chip input{margin-top:3px}.qv-column-chip strong,.qv-column-chip small{display:block;min-width:0;overflow-wrap:anywhere}.qv-column-chip small{margin-top:4px;color:var(--muted);font-weight:400}.qv-table-wrap{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}.qv-table{width:max-content;min-width:100%;border-collapse:collapse;font-size:13px}.qv-table th,.qv-table td{max-width:280px;padding:9px 10px;overflow:hidden;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;text-overflow:ellipsis;white-space:nowrap}.qv-table th{position:sticky;top:0;background:#eaf8f6}.qv-table [data-protected="true"]{background:#f0fdfa;color:#0f5d58}.qv-empty{padding:42px 18px;color:var(--muted);text-align:center}.qv-download{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 15px;border-radius:8px;background:var(--accent);color:#fff;font-weight:800;text-decoration:none}.qv-two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.qv-two-column section{display:grid;align-content:start;gap:12px;min-width:0}.qv-two-column textarea{resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.65}.qv-example{display:grid;gap:4px}.qv-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.qv-video{display:block;width:100%;max-height:560px;min-height:280px;border:1px solid var(--line);border-radius:12px;background:#111;object-fit:contain}.qv-recorder-head{align-items:center;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#f8fafc}.qv-recorder-head strong{font-variant-numeric:tabular-nums}.qv-state{padding:4px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)!important}.qv-progress{height:10px;overflow:hidden;border-radius:999px;background:#dfe8ec}.qv-progress>div{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#08756f,#35b69e);transition:width .15s}.qv-gif-output{display:grid;justify-items:center;gap:12px;min-height:180px;padding:12px;border:1px dashed var(--line);border-radius:12px;background:#f8fafc}.qv-gif-output img{display:block;max-width:100%;max-height:520px;border-radius:8px}.qv-gif-output .qv-empty{align-self:center}.qv-sidebar button.danger{background:#9f2d2d;color:#fff}
@media(max-width:820px){.qv-layout,.qv-two-column{grid-template-columns:1fr}.qv-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.qv-sidebar>.file-drop,.qv-sidebar>.qv-note{grid-column:1/-1}.qv-video{min-height:240px}.qv-chip-grid{grid-template-columns:1fr}}
@media(max-width:560px){.qv-tool .panel{padding:12px}.qv-sidebar{grid-template-columns:1fr;padding:12px}.qv-sidebar>*{grid-column:auto!important}.qv-grid-2{grid-template-columns:1fr}.qv-video{min-height:200px}.qv-subhead{align-items:start;flex-direction:column}.qv-recorder-head{flex-wrap:wrap}.qv-table th,.qv-table td{max-width:220px}}













/* Network speed test */
.speed-panel{overflow:hidden;padding:0;background:linear-gradient(145deg,#ffffff 0%,#f4fbfa 58%,#eef4fb 100%)}
.speed-test-topline{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:800}
.speed-node{display:inline-flex;align-items:center;gap:8px;color:var(--text)}
.speed-node i{width:9px;height:9px;border-radius:50%;background:#24b388;box-shadow:0 0 0 5px rgba(36,179,136,.13)}
.speed-stage{display:grid;grid-template-columns:minmax(260px,390px) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:center;padding:clamp(26px,5vw,58px)}
.speed-gauge{--speed-progress:0;position:relative;display:grid;place-items:center;width:min(100%,340px);aspect-ratio:1;margin:auto;border-radius:50%;background:conic-gradient(from 225deg,#08756f calc(var(--speed-progress)*270deg),rgba(8,117,111,.12) 0 270deg,transparent 0);transform:rotate(0deg);filter:drop-shadow(0 22px 30px rgba(8,117,111,.13));transition:background .35s ease}
.speed-gauge::before{content:"";position:absolute;width:calc(min(100%,340px) - 24px);aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#fff,#f5fbfa);box-shadow:inset 0 0 0 1px rgba(8,117,111,.1)}
.speed-gauge-inner{position:relative;z-index:1;display:grid;justify-items:center;line-height:1}
.speed-gauge-inner span{margin-bottom:12px;color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.16em}
.speed-gauge-inner strong{font-size:clamp(48px,8vw,84px);font-weight:850;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.speed-gauge-inner small{margin-top:10px;color:var(--muted);font-weight:800}
.speed-stage-copy{min-width:0}.speed-stage-copy h2{margin:6px 0 10px;font-size:clamp(25px,4vw,38px);line-height:1.14}.speed-stage-copy>p:not(.eyebrow){max-width:620px;color:var(--muted);line-height:1.65}
.speed-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.speed-actions button{min-width:142px}.speed-actions .secondary{background:#fff;color:var(--accent);border:1px solid rgba(8,117,111,.28)}
.speed-progress{height:9px;margin-top:22px;overflow:hidden;border-radius:999px;background:rgba(8,117,111,.11)}.speed-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#08756f,#32c29a);transition:width .35s ease}
.speed-data-note{margin:9px 0 0!important;font-size:12px}
.speed-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.72)}
.speed-metric{min-width:0;padding:19px 15px;border-right:1px solid var(--line);text-align:center}.speed-metric:last-child{border-right:0}.speed-metric span,.speed-metric small{display:block;color:var(--muted);font-size:12px;font-weight:750}.speed-metric strong{display:block;margin:8px 0 5px;font-size:25px;font-variant-numeric:tabular-nums}.speed-metric-primary strong{color:var(--accent);font-size:30px}
.speed-verdict{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:24px;align-items:center;padding:26px}.speed-verdict h2{margin:4px 0 7px}.speed-verdict p{margin:0;color:var(--muted)}.speed-use-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.speed-use-cases span{padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff}.speed-use-cases strong,.speed-use-cases small{display:block}.speed-use-cases small{margin-top:5px;font-size:12px;font-weight:800}.speed-use-cases .is-ready small{color:#08756f}.speed-use-cases .is-limited small{color:#a05a00}
.speed-disclosure{padding:17px 20px;background:rgba(236,244,247,.7);font-size:13px;line-height:1.55}.speed-disclosure strong{display:block;margin-bottom:4px}.speed-disclosure p{margin:0;color:var(--muted)}
.speed-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.speed-guide-grid article{padding:17px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}.speed-guide-grid strong{display:block;margin-bottom:7px}.speed-guide-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
@media(max-width:900px){.speed-stage{grid-template-columns:1fr;gap:24px}.speed-gauge{width:min(72vw,300px)}.speed-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.speed-metric:nth-child(3){border-right:0}.speed-metric:nth-child(-n+3){border-bottom:1px solid var(--line)}.speed-verdict{grid-template-columns:1fr}.speed-guide-grid{grid-template-columns:1fr}}
@media(max-width:560px){.speed-test-topline{align-items:flex-start;flex-direction:column}.speed-stage{padding:24px 16px}.speed-gauge{width:min(78vw,276px)}.speed-gauge::before{width:calc(min(78vw,276px) - 20px)}.speed-actions button{width:100%}.speed-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.speed-metric,.speed-metric:nth-child(3){border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.speed-metric:nth-child(even){border-right:0}.speed-metric:nth-last-child(-n+2){border-bottom:0}.speed-verdict{padding:20px 16px}.speed-use-cases{grid-template-columns:1fr}}

/* Keep network tools aligned with the other compact homepage card grids. Release 20260717-2. */
#network-tools .matrix-grid,#network-tools .link-matrix{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:960px){#network-tools .matrix-grid,#network-tools .link-matrix{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){#network-tools .matrix-grid,#network-tools .link-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}}





/* Let's Encrypt certificate request */
.cert-tool{max-width:1040px;margin-inline:auto}.cert-privacy-banner{display:flex;align-items:flex-start;gap:13px;margin:16px 0;padding:16px 18px;border:1px solid rgba(8,117,111,.26);border-radius:14px;background:linear-gradient(135deg,#e7f5f3,#f8fffe);box-shadow:var(--shadow-soft)}.cert-privacy-banner>span{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900}.cert-privacy-banner strong,.cert-privacy-banner p{display:block}.cert-privacy-banner p{margin:4px 0 0;color:var(--muted);line-height:1.5}.cert-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0}.cert-step{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.78);color:var(--muted)}.cert-step span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e9edf3;color:#526174;font-size:13px;font-weight:900}.cert-step strong{font-size:14px}.cert-step.active{border-color:rgba(8,117,111,.45);background:var(--accent-soft);color:var(--accent-dark)}.cert-step.active span,.cert-step.done span{background:var(--accent);color:#fff}.cert-step.done{color:var(--accent-dark)}.cert-panel{display:grid;gap:18px;padding:0;overflow:hidden}.cert-form-section{padding:24px}.cert-form-section+.cert-form-section{border-top:1px solid var(--line)}.cert-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.cert-section-heading h2{margin:4px 0 0}.cert-section-heading p{margin:5px 0 0;color:var(--muted)}.cert-provider{padding:7px 11px;border:1px solid rgba(8,117,111,.24);border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-size:13px;font-weight:900;white-space:nowrap}.cert-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.cert-choice{display:flex!important;align-items:flex-start;gap:11px;padding:15px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}.cert-choice:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px rgba(8,117,111,.09);background:linear-gradient(135deg,#fff,var(--accent-soft))}.cert-choice input{width:auto!important;margin-top:3px}.cert-choice strong,.cert-choice small{display:block}.cert-choice small{margin-top:5px;color:var(--muted);font-weight:500;line-height:1.45}.cert-form-grid{display:grid;grid-template-columns:1.25fr 1fr .8fr;gap:12px}.cert-form-grid label>span{display:block;margin-bottom:7px;font-weight:800}.cert-form-grid label>span small{color:var(--muted);font-weight:500}.cert-form-grid input,.cert-form-grid select{width:100%;min-height:44px}.cert-inline-note,.cert-warning,.cert-checklist{padding:12px 14px;border-radius:10px;line-height:1.55}.cert-inline-note{margin:12px 0 0;border:1px solid #bfdbfe;background:#eff6ff;color:#1e3a8a}.cert-warning{border:1px solid #fed7aa;background:#fff7ed;color:#9a3412}.cert-advanced{margin-top:15px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}.cert-advanced summary{cursor:pointer;font-weight:800}.cert-advanced[open] summary{margin-bottom:11px}.cert-check{display:flex!important;align-items:flex-start;gap:9px;line-height:1.5}.cert-check input{width:auto!important;margin-top:4px}.cert-terms{margin-top:15px}.cert-main-actions{margin-top:18px}.cert-status{display:flex;align-items:flex-start;gap:12px;margin:0 24px;padding:14px 16px;border:1px solid var(--line);border-radius:12px}.cert-status-icon{flex:0 0 12px;width:12px;height:12px;margin-top:5px;border-radius:50%;background:var(--muted)}.cert-status strong,.cert-status p{display:block}.cert-status p{margin:4px 0 0;line-height:1.5}.cert-status-working{border-color:#bfdbfe;background:#eff6ff;color:#1e3a8a}.cert-status-working .cert-status-icon{border:2px solid #93c5fd;border-top-color:#1d4ed8;background:transparent;animation:cert-spin .8s linear infinite}.cert-status-ready{border-color:#a7f3d0;background:#ecfdf5;color:#065f46}.cert-status-ready .cert-status-icon,.cert-status-success .cert-status-icon{background:#059669}.cert-status-error{border-color:#fecaca;background:#fef2f2;color:#991b1b}.cert-status-error .cert-status-icon{background:#dc2626}.cert-status-success{border-color:#86efac;background:#f0fdf4;color:#166534}@keyframes cert-spin{to{transform:rotate(360deg)}}.cert-challenge-section{background:linear-gradient(180deg,rgba(231,245,243,.25),transparent)}.cert-challenge-list{display:grid;gap:13px}.cert-challenge-card{padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff}.cert-challenge-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.cert-challenge-title span{padding:4px 8px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-size:11px;font-weight:900}.cert-copy-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #edf0f4}.cert-copy-row:first-of-type{border-top:0}.cert-copy-row small,.cert-copy-row code{display:block}.cert-copy-row small{margin-bottom:5px;color:var(--muted);font-size:12px}.cert-copy-row code{overflow-wrap:anywhere;color:#172033;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.5}.cert-copy-button{min-width:72px;padding:8px 11px}.cert-checklist{margin-top:14px;border:1px solid var(--line);background:var(--soft)}.cert-checklist ul{margin:7px 0 0;padding-left:20px}.cert-checklist li+li{margin-top:5px}.cert-details{display:grid;grid-template-columns:150px minmax(0,1fr);margin:0 0 18px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.cert-details dt,.cert-details dd{margin:0;padding:10px 13px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.cert-details dt{background:var(--soft);font-weight:800}.cert-details dt:last-of-type,.cert-details dd:last-of-type{border-bottom:0}.cert-download-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cert-download-grid button{min-height:78px;text-align:left}.cert-download-grid button:first-child{grid-column:1/-1}.cert-download-grid strong,.cert-download-grid span{display:block}.cert-download-grid span{margin-top:5px;font-size:12px;font-weight:500;opacity:.78}.cert-download-section>.cert-warning{margin-top:16px}.cert-explainer{max-width:1040px;margin-inline:auto}.cert-explainer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.cert-explainer-grid article{padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff}.cert-explainer-grid article>span{display:grid;place-items:center;width:28px;height:28px;margin-bottom:10px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);font-weight:900}.cert-explainer-grid strong{font-size:16px}.cert-explainer-grid p{margin:7px 0 0;color:var(--muted);line-height:1.55}
@media(max-width:780px){.cert-form-grid{grid-template-columns:1fr}.cert-explainer-grid{grid-template-columns:1fr}.cert-steps{gap:5px}.cert-step{justify-content:center;padding:10px 7px}.cert-step strong{display:none}}
@media(max-width:560px){.cert-form-section{padding:17px}.cert-status{margin:0 17px}.cert-type-grid,.cert-download-grid{grid-template-columns:1fr}.cert-download-grid button:first-child{grid-column:auto}.cert-section-heading{display:block}.cert-provider{display:inline-block;margin-top:10px}.cert-copy-row{grid-template-columns:1fr}.cert-copy-button{justify-self:start}.cert-details{grid-template-columns:1fr}.cert-details dt{padding-bottom:3px;border-bottom:0}.cert-details dd{padding-top:3px}.cert-privacy-banner{padding:14px}.cert-main-actions{align-items:stretch}}






























































































/* FILETINY_SEO_STYLES_START */
.section-head h1{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.12;letter-spacing:-.025em}
.seo-article h2{margin-top:30px}.seo-article h2:first-of-type{margin-top:8px}.seo-article p,.seo-article li{max-width:900px}
.search-intents{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.search-intents span{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:var(--muted);font-size:13px}
.catalog-overview,.catalog-hero,.catalog-group{margin:18px 0;padding:26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(231,245,243,.72),rgba(238,242,251,.66)),var(--panel);box-shadow:0 10px 30px rgba(24,39,75,.055)}
.catalog-overview{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(231,245,243,.72),rgba(238,242,251,.66)),var(--panel);box-shadow:0 10px 30px rgba(24,39,75,.055)}.catalog-overview h2,.catalog-hero h1{margin:5px 0 8px}.catalog-overview p,.catalog-hero>p{max-width:820px;color:var(--muted)}
.catalog-overview-cta{padding:11px 15px;border-radius:8px;background:var(--accent);color:#fff;font-weight:800;text-decoration:none}.catalog-overview-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.catalog-overview-grid a{padding:13px;border:1px solid var(--line);border-radius:8px;text-decoration:none}.catalog-overview-grid strong,.catalog-overview-grid span{display:block}.catalog-overview-grid span{margin-top:4px;color:var(--muted);font-size:13px}
.catalog-search{display:block;max-width:720px;margin-top:22px;font-weight:800}.catalog-search span{display:block;margin-bottom:7px}.catalog-search input{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit}
.catalog-group-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:18px}.catalog-group-head h2{margin:5px 0 0;font-size:22px}.catalog-group-head>span{color:var(--muted);font-weight:800;white-space:nowrap}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.catalog-tool{display:block;min-height:104px;padding:15px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none}.catalog-tool:hover{border-color:rgba(8,117,111,.45);background:var(--accent-soft)}.catalog-tool strong,.catalog-tool span{display:block}.catalog-tool span{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.45}.catalog-tool[hidden],.catalog-group[hidden]{display:none}
@media(max-width:800px){.catalog-overview{grid-template-columns:1fr}.catalog-overview-cta{justify-self:start}.catalog-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.catalog-overview,.catalog-hero,.catalog-group{padding:18px}.catalog-overview-grid,.catalog-grid{grid-template-columns:1fr}.catalog-group-head{align-items:start;flex-direction:column;gap:6px}}
/* FILETINY_SEO_STYLES_END */