/* ==========================================================================
   EasyFaviconGenerator - main stylesheet
   Mirrors the look of the original (Tailwind CSS + Flowbite, Inter font):
   gray scale, blue-700 buttons, cyan-700 link hovers, rounded-lg cards.
   Layout helpers live in utilities.css (Tailwind-compatible subset).
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

/* ---- Design tokens ------------------------------------------------------ */
:root {
  --radius-sm: .375rem;
  --radius: .625rem;
  --radius-lg: .875rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .06), 0 1px 3px 0 rgb(0 0 0 / .08);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .06);
  --shadow-lg: 0 12px 24px -6px rgb(0 0 0 / .14), 0 4px 8px -4px rgb(0 0 0 / .08);
  --ring: 0 0 0 4px #93c5fd;
  --tap: 2.75rem; /* minimum comfortable tap target */
}

/* ---- Base / preflight --------------------------------------------------- */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
html { font-size: 106.25%; line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; scroll-behavior: smooth; }
body { margin: 0; line-height: inherit; background: #fff; color: #111827; font-family: inherit; -webkit-font-smoothing: antialiased; max-width: 100%; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, figure, dl, dd, hr { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ol, ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: inherit; }
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; padding: 0; }
button { background: transparent; cursor: pointer; -webkit-appearance: button; }
button:disabled { cursor: default; }
code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
hr { border-top-width: 1px; height: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #0891b2; outline-offset: 2px; border-radius: .25rem; }
::selection { background: #bfdbfe; color: #111827; }
::placeholder { color: #6b7280; opacity: 1; }
html.dark { color-scheme: dark; }
html.dark body { background: #111827; color: #f3f4f6; }

.skip-link { position: absolute; left: 0; top: 0; z-index: 100; background: #1d4ed8; color: #fff; padding: .75rem 1.25rem; font-weight: 600; border-radius: 0 0 .5rem 0; transform: translateY(-160%); transition: transform .15s; }
.skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 3px solid #67e8f9; outline-offset: 2px; }

/* ---- Typography ("format" = Flowbite typography) ------------------------ */
.format { color: #374151; max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; overflow-wrap: break-word; }
.format a { color: #1f2937; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; transition: color .15s; }
.format a:hover { text-decoration: none; color: #0e7490; }
.format strong { color: #111827; font-weight: 700; }
.format h1 { color: #111827; font-weight: 800; font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5em); letter-spacing: -.02em; margin-top: 0; margin-bottom: .75em; line-height: 1.15; }
.format h2 { color: #111827; font-weight: 700; font-size: 1.375em; margin-top: 2em; margin-bottom: .55em; line-height: 1.3; }
.format h3 { color: #111827; font-weight: 700; font-size: 1.1875em; margin-top: 1.6em; margin-bottom: .5em; line-height: 1.45; }
.format h4 { color: #111827; font-weight: 600; margin-top: 1.25em; margin-bottom: .45em; line-height: 1.5; }
.format h2 + h3, .format h3 + h4 { margin-top: .85em; }
.format p { margin-top: 1.15em; margin-bottom: .65em; }
.format ul { list-style: disc; margin-top: 1.15em; margin-bottom: 1.25em; padding-left: 1.625em; }
.format ol { list-style: decimal; margin-top: 1.15em; margin-bottom: 1.25em; padding-left: 1.625em; }
.format li { margin-top: .45em; margin-bottom: .45em; padding-left: .375em; }
.format li::marker { color: #6b7280; }
.format img { margin-top: 2em; margin-bottom: 2em; }
.format .not-format img, .format .file-card img, .format .check-icon img, .format .pv-box img, .format .navbar-brand img { margin-top: 0; margin-bottom: 0; }
.format figure { margin: 2em 0; }
.format hr { border-color: #e5e7eb; border-top-width: 1px; margin: 2.5em 0; }
.format code { color: #111827; font-weight: 600; background: #f3f4f6; padding: .25em .5em; border-radius: .3em; font-size: .9em; overflow-wrap: anywhere; }
.format a code { color: inherit; }
.format pre { color: #1f2937; background: #f3f4f6; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; font-weight: 400; font-size: .875em; line-height: 1.7142857; margin: 1.5em 0; border-radius: var(--radius); padding: .9em 1.15em; border: 1px solid #e5e7eb; }
.format pre code { background: transparent; padding: 0; font-weight: inherit; color: inherit; font-size: inherit; border-radius: 0; white-space: inherit; }
.format blockquote { font-size: 1.0625em; font-weight: 500; font-style: italic; color: #111827; border-left: 4px solid #93c5fd; padding-left: 1em; margin: 1.6em 0; }
.format table { width: 100%; table-layout: auto; text-align: left; margin: 0; font-size: .875em; line-height: 1.65; border-collapse: collapse; }
.format thead { background: #f9fafb; }
.format thead th { color: #111827; font-weight: 600; vertical-align: bottom; padding: .65em .75em; white-space: nowrap; }
.format tbody tr { border-bottom: 1px solid #e5e7eb; }
.format tbody tr:last-child { border-bottom-width: 0; }
.format tbody td { vertical-align: top; padding: .65em .75em; color: #374151; }
.format td code, .format th code { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.table-scroll { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.75em 0; border: 1px solid #e5e7eb; border-radius: var(--radius); background: #fff; overscroll-behavior-x: contain; }
.table-scroll:focus-visible { outline: 3px solid #0891b2; outline-offset: 2px; }
.table-scroll table { margin: 0; min-width: 36rem; width: max-content; max-width: none; }
.format .not-format, .not-format { color: initial; }
.format .not-format a { font-weight: inherit; text-decoration: inherit; color: inherit; }
.format .lead { font-size: 1.25em; line-height: 1.6; }
.format-wide { max-width: none; }
.format .format { margin: 0; }
html.dark .format { color: #d1d5db; }
html.dark .format h1, html.dark .format h2, html.dark .format h3, html.dark .format h4, html.dark .format strong { color: #fff; }
html.dark .format a { color: #fff; }
html.dark .format a:hover { color: #67e8f9; }
html.dark .format code { color: #f3f4f6; background: #374151; box-shadow: inset 0 0 0 1px #4b5563; }
html.dark .format pre { background: #1f2937; color: #e5e7eb; border-color: #4b5563; }
html.dark .format pre code { box-shadow: none; background: transparent; }
html.dark .format thead { background: #1f2937; }
html.dark .format thead th { color: #fff; }
html.dark .format tbody td { color: #d1d5db; }
html.dark .format tbody tr { border-color: #374151; }
html.dark .format li::marker { color: #9ca3af; }
html.dark .format hr { border-color: #374151; }
html.dark .format blockquote { color: #f3f4f6; border-color: #22d3ee; }
html.dark .table-scroll { background: #111827; border-color: #374151; }

/* ---- Navbar (Flowbite Navbar) ------------------------------------------- */
.navbar { background: #fff; padding: .75rem .5rem; border-radius: .25rem; position: relative; z-index: 40; max-width: 100%; box-sizing: border-box; }
@media (min-width: 640px) { .navbar { padding-left: 1rem; padding-right: 1rem; } }
.navbar-brand { display: flex; align-items: center; }
.navbar-brand img { width: 40px; height: 40px; margin-right: .75rem; border-radius: .5rem; }
.navbar-brand span { align-self: center; white-space: nowrap; font-size: 1.3125rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -.01em; color: #111827; }
@media (max-width: 380px) { .navbar-brand span { font-size: 1.0625rem; } .navbar-brand img { width: 34px; height: 34px; margin-right: .5rem; } }
@media (max-width: 345px) { .navbar-brand span { font-size: .9375rem; } .navbar-brand img { width: 30px; height: 30px; margin-right: .375rem; } .theme-toggle { margin-left: 0; } .navbar-toggle { margin-left: 0 !important; } }
.navbar-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--radius); padding: .5rem; font-size: .9375rem; color: #4b5563; transition: background-color .15s, color .15s; }
.navbar-toggle:hover { background: #f3f4f6; color: #111827; }
.navbar-toggle:focus-visible { outline: 3px solid #0891b2; outline-offset: 0; }
.navbar-toggle svg { width: 1.625rem; height: 1.625rem; }
.navbar-collapse { width: 100%; display: none; }
.navbar-collapse.is-open { display: block; }
.navbar-list { margin-top: 1rem; display: flex; flex-direction: column; }
.nav-link, .nav-dropdown-btn { display: block; padding: .75rem 1rem .75rem 0; border-bottom: 1px solid #f3f4f6; color: #374151; font-size: 1rem; font-weight: 500; text-align: left; width: 100%; transition: color .15s, background-color .15s; }
.nav-link:hover, .nav-dropdown-btn:hover { background: #f9fafb; }
.nav-link.is-active { color: #0e7490; font-weight: 600; }
.nav-dropdown-btn { display: flex; align-items: center; color: #374151; }
.nav-dropdown-btn svg { width: 1.125rem; height: 1.125rem; margin-left: .375rem; transition: transform .15s; }
.nav-dropdown-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dropdown { position: relative; }
.nav-menu { display: none; z-index: 50; min-width: 16rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid #e5e7eb; padding: .375rem; }
.nav-menu.is-open { display: block; }
.nav-menu a { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; font-size: 1rem; color: #374151; white-space: nowrap; border-radius: var(--radius-sm); transition: background-color .15s, color .15s; }
.nav-menu a:hover, .nav-menu a:focus { background: #f3f4f6; color: #0e7490; }
.nav-menu a svg { width: 1.25rem; height: 1.25rem; color: #6b7280; flex-shrink: 0; }
.nav-menu a[aria-current="page"] { color: #0e7490; font-weight: 600; }
/* The full menu needs ~1280px; below that the hamburger menu is used. */
.navbar-actions { display: flex; align-items: center; }
.navbar-collapse { flex-basis: 100%; }
@media (min-width: 1280px) {
  .navbar-actions { order: 2; }
  .navbar-toggle { display: none; }
  .navbar-collapse { display: block; width: auto; flex-basis: auto; }
  .navbar-list { margin-top: 0; flex-direction: row; align-items: center; gap: .5rem; }
  .nav-link, .nav-dropdown-btn { font-size: .9375rem; }
  .navbar-brand span { font-size: 1.1875rem; }
  .nav-link, .nav-dropdown-btn { padding: .5rem .125rem; border: 0; width: auto; }
  .nav-link:hover, .nav-dropdown-btn:hover { background: transparent; color: #0e7490; }
  .nav-menu { position: absolute; left: 0; top: calc(100% + .5rem); }
  .nav-menu.align-right { left: auto; right: 0; }
}
@media (min-width: 1560px) { .navbar-list { gap: 1.5rem; } .nav-link, .nav-dropdown-btn { font-size: 1rem; } .navbar-brand span { font-size: 1.3125rem; } }
@media (max-width: 1279px) {
  .nav-menu { position: static; box-shadow: none; border: 0; border-left: 2px solid #e5e7eb; border-radius: 0; margin: 0 0 .25rem .5rem; }
}
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--radius); padding: .5rem; color: #4b5563; margin-left: .5rem; transition: background-color .15s, color .15s; }
.theme-toggle:hover { background: #f3f4f6; color: #111827; }
.theme-toggle svg { width: 1.5rem; height: 1.5rem; }
.theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }
html.dark .navbar { background: #111827; }
html.dark .navbar-brand span { color: #fff; }
html.dark .nav-link, html.dark .nav-dropdown-btn { color: #cbd5e1; border-color: #374151; }
html.dark .nav-link.is-active { color: #67e8f9; }
html.dark .navbar-toggle, html.dark .theme-toggle { color: #cbd5e1; }
html.dark .nav-menu a:hover, html.dark .nav-menu a:focus { color: #67e8f9; }
html.dark .nav-link:hover, html.dark .nav-dropdown-btn:hover { color: #fff; background: #374151; }
html.dark .nav-menu { background: #1f2937; border-color: #374151; }
html.dark .nav-menu a { color: #d1d5db; }
html.dark .nav-menu a:hover { background: #374151; }
html.dark .theme-toggle:hover, html.dark .navbar-toggle:hover { background: #374151; }

/* ---- Layout ------------------------------------------------------------- */
.site-main { display: flex; flex-grow: 1; flex-direction: column; padding-left: .75rem; padding-right: .75rem; min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (min-width: 640px) { .site-main { padding-left: 1rem; padding-right: 1rem; } }
.page { display: flex; flex-direction: column; justify-content: space-between; padding: 2rem 0; width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; min-width: 0; box-sizing: border-box; }
@media (min-width: 768px) { .page { padding: 4rem 3rem 5rem; } }
@media (min-width: 1100px) { .page { padding: 5rem; } }
.page-narrow { max-width: 56rem; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; font-size: .9375rem; color: #6b7280; margin-bottom: 1rem; }
.breadcrumb a { color: #4b5563; text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { color: #0e7490; text-decoration: underline; }
.breadcrumb .sep { margin: 0 .5rem; color: #9ca3af; }
.breadcrumb [aria-current] { color: #111827; font-weight: 500; }
html.dark .breadcrumb { color: #9ca3af; }
html.dark .breadcrumb a { color: #d1d5db; }
html.dark .breadcrumb [aria-current] { color: #fff; }

/* ---- Buttons (Flowbite) -------------------------------------------------- */
.btn { position: relative; display: inline-flex; align-items: stretch; justify-content: center; padding: .125rem; text-align: center; font-weight: 600; border: 1px solid transparent; background: #1d4ed8; color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .1s; text-decoration: none; cursor: pointer; }
.btn > span { display: flex; align-items: center; justify-content: center; gap: .5rem; border-radius: calc(var(--radius) - 2px); padding: .75rem 1.375rem; min-height: var(--tap); font-size: 1rem; line-height: 1.5rem; }
.btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.btn:focus-visible { z-index: 10; outline: none; box-shadow: var(--ring); }
.btn:hover:not(:disabled):not(.is-disabled) { background: #1e40af; color: #fff; box-shadow: var(--shadow-md); }
.btn:active:not(:disabled):not(.is-disabled) { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn.is-disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.btn-xs > span { padding: .5rem .875rem; min-height: 2.25rem; font-size: .875rem; line-height: 1.25rem; }
.btn-sm > span { padding: .625rem 1.125rem; min-height: var(--tap); font-size: 1rem; line-height: 1.25rem; }
.btn-lg > span { padding: .875rem 1.75rem; min-height: 3.25rem; font-size: 1.0625rem; line-height: 1.5rem; }
.btn-xl > span { padding: 1rem 2rem; min-height: 3.5rem; font-size: 1.125rem; line-height: 1.5rem; }
.btn-outline { border-width: 0; }
.btn-outline > span { width: 100%; background: #fff; color: #1d4ed8; border: 1px solid transparent; transition: all .075s ease-in; }
.btn-outline:hover:not(:disabled):not(.is-disabled) > span { background: transparent; color: inherit; }
.btn-outline.is-processing > span { color: #1d4ed8; }
.btn-outline:hover:not(:disabled):not(.is-disabled) { color: #fff; }
.btn-light { background: #fff; color: #111827; border-color: #d1d5db; }
.btn-light:hover:not(:disabled) { background: #f3f4f6; color: #111827; }
.btn-light:focus { box-shadow: 0 0 0 4px #e5e7eb; }
.btn-green { background: #15803d; }
.btn-green:hover:not(:disabled) { background: #166534; }
.btn-green:focus { box-shadow: 0 0 0 4px #86efac; }
.btn-gray { background: #fff; color: #374151; border-color: #d1d5db; box-shadow: none; }
.btn-gray:hover:not(:disabled) { background: #f3f4f6; color: #0e7490; }
.btn.is-processing > span::before { content: ""; width: 1em; height: 1em; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
.btn-outline.is-processing > span::before { border-color: rgba(0, 0, 0, .2); border-top-color: #1d4ed8; }
@keyframes spin { to { transform: rotate(360deg); } }
html.dark .btn-outline > span { background: #111827; color: #fff; }
html.dark .btn-gray, html.dark .btn-light { background: #1f2937; color: #e5e7eb; border-color: #4b5563; }
html.dark .btn-gray:hover:not(:disabled), html.dark .btn-light:hover:not(:disabled) { background: #374151; color: #67e8f9; }
html.dark .btn { background: #2563eb; }
html.dark .btn:hover:not(:disabled) { background: #1d4ed8; }

/* ---- Cards / panels ------------------------------------------------------ */
.card { display: flex; flex-direction: column; border-radius: var(--radius-lg); border: 1px solid #e5e7eb; background: #fff; box-shadow: var(--shadow-md); }
.card-body { display: flex; height: 100%; flex-direction: column; justify-content: center; gap: 1.25rem; padding: 1.5rem; }
.card-body.format { gap: .75rem; max-width: none; }
@media (min-width: 768px) { .card-body { padding: 2rem; } }
.panel { border-radius: var(--radius); border: 1px solid #e5e7eb; padding: 1.25rem; background: #fff; }
@media (max-width: 639px) {
  .card-body { padding: 1.125rem; gap: 1rem; }
  .editor .card-body { padding: .75rem; }
  .panel { padding: 1rem; }
  .editor .editor-title { font-size: 1.625rem; line-height: 2rem; }
  .dropzone { font-size: 1.375rem; min-height: 0; }
  .format pre { font-size: .8125em; }
  .check-form-row { flex-direction: column; align-items: stretch; }
  .check-form-row .btn { width: 100%; }
}
html.dark .card { background: #1f2937; border-color: #374151; }
html.dark .panel { border-color: #374151; background: transparent; }

/* ---- Forms --------------------------------------------------------------- */
.label { display: block; margin-bottom: .5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: #111827; }
.input, .select, .textarea { display: block; width: 100%; min-height: var(--tap); border: 1px solid #9ca3af; background: #fff; color: #111827; padding: .6875rem .875rem; font-size: 1rem; line-height: 1.5rem; border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; }
.textarea { min-height: 8rem; }
.input:hover, .select:hover, .textarea:hover { border-color: #6b7280; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: #0891b2; box-shadow: 0 0 0 3px rgb(6 182 212 / .28); }
.input.input-blue:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgb(59 130 246 / .3); }
.select { padding-right: 2.25rem; }
.input:disabled, .select:disabled { opacity: .5; cursor: not-allowed; }
.input-icon { position: relative; width: 100%; }
.input-icon > svg { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); width: 1.375rem; height: 1.375rem; color: #6b7280; pointer-events: none; }
.input-icon > .input { padding-left: 2.75rem; }
.help-text { display: block; margin-top: .5rem; font-size: .9375rem; line-height: 1.5; color: #4b5563; }
.help-text code { font-size: .875rem; background: #f3f4f6; padding: .1rem .4rem; border-radius: .25rem; color: #111827; overflow-wrap: anywhere; }
.check { width: 1.25rem; height: 1.25rem; accent-color: #0891b2; cursor: pointer; flex-shrink: 0; margin: 0; }
.field-row { display: flex; align-items: center; gap: .625rem; padding: .5rem 0; }
.field-row label { font-size: 1rem; font-weight: 500; color: #111827; cursor: pointer; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: .5rem; background: #d1d5db; border-radius: .5rem; cursor: pointer; }
.range:focus-visible { outline-offset: 4px; }
.range:disabled { opacity: .5; cursor: not-allowed; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.5rem; height: 1.5rem; background: #0891b2; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .35); transition: transform .1s; }
.range::-moz-range-thumb { width: 1.5rem; height: 1.5rem; background: #0891b2; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .35); }
.range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.color-swatch { display: block; width: var(--tap); height: var(--tap); padding: .375rem; border: 1px solid #9ca3af; background: #f9fafb; border-radius: var(--radius); cursor: pointer; box-shadow: inset 0 0 0 3px #fff; transition: border-color .15s, box-shadow .15s; }
.color-swatch:hover { border-color: #0891b2; }
.color-field { position: relative; display: inline-block; }
.color-popover { position: absolute; z-index: 50; left: 0; top: calc(100% + .375rem); width: min(15rem, calc(100vw - 2.5rem)); margin: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius); padding: .75rem; display: none; box-shadow: var(--shadow-lg); }
.color-popover.is-open { display: flex; flex-direction: column; gap: .75rem; }
.color-popover input[type="color"] { width: 100%; height: 6.5rem; padding: 0; border: 0; background: none; cursor: pointer; }
.palette { display: flex; flex-wrap: wrap; gap: .5rem; }
.palette button { width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1px solid #9ca3af; transition: box-shadow .15s, transform .1s; }
.palette button:hover { box-shadow: 0 0 0 3px #06b6d4; transform: scale(1.06); }
html.dark .input, html.dark .select, html.dark .textarea { background: #1f2937; border-color: #6b7280; color: #fff; }
html.dark .input:hover, html.dark .select:hover { border-color: #9ca3af; }
html.dark .color-swatch { background: #374151; border-color: #6b7280; box-shadow: inset 0 0 0 3px #1f2937; }
html.dark .label, html.dark .field-row label { color: #fff; }
html.dark .help-text { color: #a8b0bd; }
html.dark .help-text code { background: #374151; color: #fff; }
html.dark .color-popover { background: #1f2937; border-color: #374151; }
html.dark .range { background: #374151; }

/* ---- Alerts / badges ----------------------------------------------------- */
.alert { display: flex; gap: .875rem; padding: 1.125rem 1.25rem; border-radius: var(--radius); font-size: 1rem; line-height: 1.5rem; }
.alert svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; margin-top: .0625rem; }
.alert-info { background: #eff6ff; color: #1e40af; }
.alert-success { background: #f0fdf4; color: #166534; }
.alert-warning { background: #fefce8; color: #854d0e; }
.alert-failure { background: #fef2f2; color: #991b1b; }
.alert a { text-decoration: underline; font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .75rem; border-radius: 9999px; font-size: .875rem; font-weight: 600; background: #dbeafe; color: #1e40af; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-gray { background: #f3f4f6; color: #374151; }
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; border-radius: 9999px; background: #f3f4f6; color: #374151; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
html.dark .pill { background: #1f2937; color: #e5e7eb; }

/* tooltips (CSS only) */
.tip { position: relative; display: inline-flex; color: #6b7280; cursor: help; padding: .25rem; margin: -.25rem; }
.tip:hover, .tip:focus { color: #0e7490; }
.tip svg { width: 1.25rem; height: 1.25rem; }
.tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(18rem, 80vw); background: #111827; color: #fff; font-size: .9375rem; font-weight: 400; line-height: 1.3; padding: .5rem .75rem; border-radius: .5rem; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 30; text-align: left; white-space: normal; }
.tip:hover::after, .tip:focus::after { opacity: 1; }

/* ---- Hero / home --------------------------------------------------------- */
.hero-lead { margin-bottom: 3rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: #4b5563; max-width: 65ch; }
.hero-grid { margin: 3rem 0 4rem; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
@media (min-width: 768px) { .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; margin: 4rem 0 5rem; } }
.hero-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; color: #111827; }
/* Every logo sits in the same square cell so the rows share size, weight and alignment whatever the glyph's aspect ratio. */
.hero-icons > div { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; }
.hero-icons svg { fill: currentColor; width: 100%; height: 100%; max-width: 3.25rem; max-height: 3.25rem; overflow: visible; }
.hero-icons svg[aria-label="Apple"], .hero-icons svg[aria-label="Windows"], .hero-icons svg[aria-label="Android"] { max-width: 3rem; max-height: 3rem; }
.hero-icons > div > svg { transition: transform .15s; }
.hero-icons > div:hover > svg { transform: scale(1.08); }
html.dark .hero-icons { color: #e5e7eb; }
.dropzone { display: flex; height: 100%; min-height: 18rem; width: 100%; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-lg); border: 4px dashed #9ca3af; padding: 1.75rem 1.25rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #1f2937; background: #fafafa; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.dropzone:hover, .dropzone.is-drag { background: #eff6ff; border-color: #3b82f6; }
.dropzone.is-drag { box-shadow: 0 0 0 4px rgb(59 130 246 / .25); }
.dropzone[aria-busy="true"] { cursor: progress; border-color: #3b82f6; }
.dropzone-text { margin-bottom: 1.5rem; text-align: center; }
.dropzone-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; }
.dropzone-error { margin-top: 1rem; font-size: 1rem; font-weight: 500; color: #b91c1c; text-align: center; }
.url-load { display: flex; gap: .5rem; margin-top: 1.25rem; width: 100%; max-width: 32rem; }
.url-load .input { flex: 1 1 auto; min-width: 0; font-size: 1rem; font-weight: 400; }
.url-load .btn { flex-shrink: 0; }
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem 2rem; margin-top: 4rem; }
.feature-grid > .format p.text-xl { color: #111827; margin-top: 0; margin-bottom: .5rem; }
html.dark .feature-grid > .format p.text-xl { color: #fff; }
@media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.reference-item { margin-top: 3.5rem; display: flex; align-items: center; gap: 2rem; }
.figure-box { border: 1px solid #e5e7eb; border-radius: var(--radius); padding: .5rem; background: #fff; max-width: 100%; box-shadow: var(--shadow-sm); }
.figure-box svg { width: 100%; height: auto; }
html.dark .dropzone { border-color: #9ca3af; color: #e5e7eb; background: transparent; }
html.dark .dropzone:hover, html.dark .dropzone.is-drag { background: #1f2937; border-color: #60a5fa; }
html.dark .hero-lead { color: #a8b0bd; }
html.dark .figure-box { background: #f9fafb; border-color: #374151; }

/* ---- Footer -------------------------------------------------------------- */
/* Side-by-side brand + 4-col link grid needs ~1024px; earlier breakpoints
   squeezed columns (~64px) so long inline-block links blew past the viewport
   (e.g. 758px scrollWidth in a 747px window — “About EasyFaviconGenerator”). */
.footer { background: #fff; box-shadow: 0 -1px 3px 0 rgb(0 0 0 / .06), 0 1px 3px 0 rgb(0 0 0 / .08); width: 100%; max-width: 100%; padding: 2rem .5rem; margin-top: 5rem; display: flex; flex-direction: column; border-radius: .5rem; box-sizing: border-box; }
@media (min-width: 640px) { .footer { padding-left: 1rem; padding-right: 1rem; } }
.footer-top { display: grid; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); justify-content: space-between; row-gap: 2rem; }
@media (min-width: 1024px) { .footer-top { display: flex; gap: 3rem; padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1280px) { .footer-top { gap: 5rem; padding-left: 5rem; padding-right: 5rem; } }
.footer-top > * { min-width: 0; }
.footer-brand { display: flex; align-items: center; margin-bottom: 1rem; max-width: 100%; min-width: 0; }
@media (min-width: 1024px) { .footer-brand { margin-bottom: 0; } }
.footer-brand img { height: 2.5rem; width: 2.5rem; margin-right: .75rem; border-radius: .5rem; flex-shrink: 0; }
.footer-brand span { align-self: center; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #1f2937; overflow-wrap: anywhere; }
@media (min-width: 1024px) { .footer-brand span { white-space: nowrap; overflow-wrap: normal; } }
@media (max-width: 400px) { .footer-brand span { font-size: 1.25rem; } }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; min-width: 0; max-width: 100%; }
@media (min-width: 1024px) { .footer-cols { flex: 1 1 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }
.footer-cols .span-2 { grid-column: span 2 / span 2; min-width: 0; }
.footer-title { margin-bottom: 1.25rem; font-size: .9375rem; line-height: 1.25rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4b5563; overflow-wrap: anywhere; }
.footer-title a:hover { text-decoration: underline; }
.footer-links { display: flex; flex-direction: column; gap: .75rem; font-size: 1rem; color: #4b5563; min-width: 0; }
.footer-links a { display: block; max-width: 100%; padding: .125rem 0; transition: color .15s; overflow-wrap: break-word; }
@media (min-width: 1024px) { .footer-links a { overflow-wrap: normal; } }
.footer-links a:hover { text-decoration: underline; color: #0e7490; }
.footer-sub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; min-width: 0; }
@media (min-width: 640px) { .footer-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.footer-divider { margin: 1.5rem 0; border-color: #e5e7eb; width: 100%; }
@media (min-width: 640px) { .footer-divider { margin: 2rem 0; } }
.footer-bottom { width: 100%; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; padding: 0; }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; flex-wrap: wrap; } }
@media (min-width: 1024px) { .footer-bottom { padding: 0 2.5rem; } }
@media (min-width: 1280px) { .footer-bottom { padding: 0 5rem; } }
.footer-copy { font-size: .9375rem; color: #4b5563; }
.footer-copy a:hover { text-decoration: underline; }
.footer-social { display: flex; gap: .5rem; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--radius); color: #4b5563; transition: color .15s, background-color .15s; }
.footer-social a:hover { color: #111827; background: #f3f4f6; }
.footer-social svg { width: 1.5rem; height: 1.5rem; }
html.dark .footer { background: #111827; }
html.dark .footer-brand span, html.dark .footer-title { color: #fff; }
html.dark .footer-links, html.dark .footer-copy, html.dark .footer-social a { color: #cbd5e1; }
html.dark .footer-social a:hover { background: #1f2937; color: #fff; }
html.dark .footer-links a:hover { color: #67e8f9; }
html.dark .footer-divider { border-color: #374151; }

/* ---- Code blocks --------------------------------------------------------- */
.codeblock { position: relative; border-radius: var(--radius); background: #111827; color: #e5e7eb; max-width: 100%; }
.codeblock pre { margin: 0; overflow-x: auto; padding: 1.25rem 1.5rem; padding-top: 3.25rem; font-size: .9375rem; line-height: 1.65; white-space: pre; color: #e5e7eb; background: transparent; }
.codeblock pre code { background: transparent; padding: 0; color: inherit; font-weight: 400; font-size: inherit; }
.codeblock .copy-btn { position: absolute; top: .625rem; right: .625rem; z-index: 1; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .375rem .875rem; font-size: .875rem; font-weight: 600; border-radius: var(--radius-sm); background: #374151; color: #fff; transition: background-color .15s; }
.codeblock .copy-btn:hover { background: #4b5563; }
.codeblock .copy-btn svg { width: 1.0625rem; height: 1.0625rem; }
.codeblock .copy-btn.is-copied { background: #15803d; }
.codeblock-label { position: absolute; top: .875rem; left: 1.5rem; font-size: .875rem; color: #9ca3af; font-family: ui-monospace, Menlo, monospace; }
.codeblock .tok-tag { color: #7dd3fc; }
.codeblock .tok-attr { color: #fcd34d; }
.codeblock .tok-str { color: #86efac; }
.codeblock .tok-com { color: #9ca3af; font-style: italic; }
.format .codeblock pre { margin: 0; font-size: .9375rem; padding: 1.25rem 1.5rem; padding-top: 3.25rem; background: transparent; color: #e5e7eb; }
.codeblock:not(:has(.copy-btn)) pre, .format .codeblock:not(:has(.copy-btn)) pre { padding-top: 1.25rem; }
.inline-copy { display: inline-flex; align-items: center; gap: .5rem; }

/* ---- Tabs ---------------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #e5e7eb; margin-bottom: 1rem; gap: .25rem; }
.tab-btn { padding: .75rem 1.125rem; min-height: var(--tap); font-size: 1rem; font-weight: 500; color: #6b7280; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: .5rem .5rem 0 0; }
.tab-btn:hover { color: #374151; background: #f9fafb; }
.tab-btn[aria-selected="true"] { color: #1d4ed8; border-color: #1d4ed8; }

/* ---- Editor (generator) -------------------------------------------------- */
.editor { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.editor .editor-title { font-size: 2rem; line-height: 2.5rem; font-weight: 800; letter-spacing: -.015em; color: #111827; margin: 0; }
.editor h2 { color: #111827; font-weight: 700; font-size: 1.5rem; line-height: 2rem; margin: 0 0 .25em; }
.editor h3 { color: #111827; font-weight: 700; font-size: 1.1875rem; line-height: 1.6; margin: 0 0 .25rem; }
.editor p { margin: .5rem 0; color: #4b5563; font-size: 1rem; line-height: 1.6; }
.editor-section { display: flex; flex-direction: column; gap: 1rem; }
.editor-row { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
@media (min-width: 640px) { .editor-row { flex-direction: row; } }
.editor-row > .panel { flex: 1 1 0; min-width: 0; }
.editor-row > .panel.grow { flex-grow: 1; }
.editor .opt { padding: .25rem 0; }
.editor .opt label { font-size: 1rem; font-weight: 500; color: #111827; cursor: pointer; line-height: 1.4; }
.editor .opt-body { padding: .25rem 0 .75rem 1.875rem; display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-end; }
.editor .opt-help { display: block; padding-left: 1.875rem; font-size: .9375rem; line-height: 1.5; color: #4b5563; margin-top: -.25rem; margin-bottom: .25rem; }
.editor .opt-collapse { overflow: hidden; }
.field-group { display: flex; flex-direction: column; gap: .25rem; }
.field-group > .label { margin-bottom: .25rem; }
.slider-row { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; color: #4b5563; }
.slider-row .range { min-width: 8rem; }
.editor-actions { display: flex; flex-direction: row-reverse; }
.master-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; padding: .75rem 1rem; }
.master-thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); flex-shrink: 0; border: 1px solid #e5e7eb; background: repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 50% / 12px 12px; object-fit: contain; }
.legacy-toggle { border-style: dashed; }
.dark-note { font-size: .9375rem; }
.icon-picker .master-thumb { width: 44px !important; height: 44px !important; }
.editor .field-group .input, .editor .field-group .select { max-width: 100%; }
.sep-arrow { display: flex; align-items: center; justify-content: center; }
.spinner { width: 3rem; height: 3rem; border: 4px solid #e5e7eb; border-top-color: #1d4ed8; border-radius: 50%; animation: spin .8s linear infinite; }
html.dark .editor h2, html.dark .editor h3, html.dark .editor .opt label { color: #fff; }
html.dark .editor p { color: #a8b0bd; }
html.dark .editor .editor-title { color: #fff; }
html.dark .editor .opt-help { color: #a8b0bd; }
html.dark .master-summary [id="master-name"] { color: #fff !important; }

/* ---- Preview mock-ups ---------------------------------------------------- */
.pv-wrap { display: flex; flex-direction: column; gap: .25rem; }
.pv-box { border: 1px solid #d1d5db; overflow: hidden; border-radius: var(--radius-sm); max-width: 100%; }
/* Browser */
.pv-browser { width: 100%; max-width: 520px; font-family: "Segoe UI", Roboto, Arial, sans-serif; user-select: none; }
.pv-browser .strip { display: flex; align-items: flex-end; height: 48px; padding: 10px 10px 0; gap: 4px; }
.pv-browser .tab { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; min-width: 0; width: 220px; max-width: 70%; border-radius: 10px 10px 0 0; font-size: 14px; position: relative; }
.pv-browser .tab img, .pv-browser .tab .ico { width: 16px; height: 16px; flex-shrink: 0; object-fit: contain; }
.pv-browser .tab .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-browser .tab .x { font-size: 17px; line-height: 1; opacity: .7; }
.pv-browser .tab.ghost { width: 120px; opacity: .6; }
.pv-browser .bar { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.pv-browser .bar .omni { flex: 1; min-width: 0; height: 30px; border-radius: 15px; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; padding: 0 12px; }
.pv-browser.light .strip { background: #dee1e6; }
.pv-browser.light .tab.active, .pv-browser.light .bar { background: #fff; color: #202124; }
.pv-browser.light .tab { color: #5f6368; }
.pv-browser.light .tab.active { color: #202124; }
.pv-browser.light .omni { background: #f1f3f4; color: #5f6368; }
.pv-browser.dark .strip { background: #202124; }
.pv-browser.dark .tab.active, .pv-browser.dark .bar { background: #35363a; color: #e8eaed; }
.pv-browser.dark .tab { color: #9aa0a6; }
.pv-browser.dark .tab.active { color: #e8eaed; }
.pv-browser.dark .omni { background: #202124; color: #bdc1c6; }
/* Google SERP */
.pv-serp { padding: 1rem; font-family: Arial, Roboto, sans-serif; height: 100%; min-width: 0; overflow-wrap: anywhere; }
.pv-serp.light { background: #fff; }
.pv-serp.dark { background: #202124; }
.pv-serp .site { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.pv-serp .fav { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #dadce0; background: #f1f3f4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pv-serp .fav img { width: 18px; height: 18px; object-fit: contain; }
.pv-serp.dark .fav { background: #303134; border-color: #3c4043; }
.pv-serp .sname { font-size: 15px; line-height: 1.2; color: #202124; }
.pv-serp .surl { font-size: 13px; line-height: 1.3; color: #4d5156; }
.pv-serp.dark .sname { color: #e8eaed; }
.pv-serp.dark .surl { color: #bdc1c6; }
.pv-serp .title { font-size: 21px; line-height: 1.3; color: #1a0dab; margin: 4px 0; font-weight: 400; }
.pv-serp.dark .title { color: #8ab4f8; }
.pv-serp .desc { font-size: 15px; line-height: 1.58; color: #4d5156; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pv-serp.dark .desc { color: #bdc1c6; }
/* iOS */
.pv-ios { position: relative; width: 220px; height: 228px; background: linear-gradient(160deg, #5b7cfa 0%, #7c4dff 45%, #ff7eb3 100%); padding: 28px 14px 0; user-select: none; }
.pv-ios .status { position: absolute; left: 0; right: 0; top: 0; height: 22px; display: flex; justify-content: space-between; padding: 4px 14px; font-size: 10px; font-weight: 600; color: #fff; }
.pv-ios .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.pv-ios .app { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 8px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.pv-ios .app .i { width: 40px; height: 40px; border-radius: 22.37%; overflow: hidden; background: rgba(255, 255, 255, .28); display: block; }
.pv-ios .app .i img { width: 100%; height: 100%; object-fit: cover; background: #000; }
.pv-ios .app .n { max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-ios .dock { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 50px; border-radius: 16px; background: rgba(255, 255, 255, .3); backdrop-filter: blur(6px); display: flex; justify-content: space-around; align-items: center; }
.pv-ios .dock i { width: 34px; height: 34px; border-radius: 22.37%; background: rgba(255, 255, 255, .55); display: block; }
/* Phone mock-ups are drawn at 1x pixel sizes; zoom enlarges them as a whole. */
.pv-ios, .pv-android-home, .pv-splash, .pv-switch, .pv-tile { zoom: 1.25; }
/* Android */
.pv-android-home { position: relative; width: 156px; height: 228px; background: linear-gradient(180deg, #1e3a8a 0%, #0e7490 60%, #164e63 100%); user-select: none; }
.pv-android-home .status { height: 14px; display: flex; justify-content: space-between; padding: 2px 8px; font-size: 8px; color: #fff; font-family: Roboto, Arial, sans-serif; }
.pv-android-home .search { margin: 12px 10px 14px; height: 24px; border-radius: 12px; background: rgba(255, 255, 255, .85); }
.pv-android-home .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 4px; padding: 0 6px; }
.pv-android-home .app { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 7px; color: #fff; font-family: Roboto, Arial, sans-serif; }
.pv-android-home .app .i { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .35); display: block; overflow: hidden; }
.pv-android-home .app .i img { width: 100%; height: 100%; object-fit: cover; }
.pv-android-home .app .n { max-width: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-android-home .nav { position: absolute; left: 0; right: 0; bottom: 4px; height: 14px; display: flex; justify-content: center; }
.pv-android-home .nav i { width: 50px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .8); align-self: center; }
.pv-splash { display: flex; flex-direction: column; width: 156px; height: 228px; font-family: Roboto, Arial, sans-serif; }
.pv-splash .status { height: 14px; background: rgba(0, 0, 0, .18); display: flex; justify-content: space-between; padding: 2px 8px; font-size: 8px; color: #fff; }
.pv-splash .body { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pv-splash .body .logo { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; }
.pv-splash .body .logo img { width: 100%; height: 100%; object-fit: cover; }
.pv-splash .name { margin: 8px 0; font-size: 8px; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
.pv-splash .navbar-fake { height: 9px; background: #000; }
.pv-switch { position: relative; width: 376px; max-width: 100%; height: 228px; background: #e8eaed; overflow: hidden; font-family: Roboto, Arial, sans-serif; }
.pv-switch .card-fake { position: absolute; left: 50%; transform: translateX(-50%); top: 26px; width: 150px; height: 190px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); overflow: hidden; }
.pv-switch .card-fake .head { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.pv-switch .card-fake .ic { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.pv-switch .card-fake .ic img { width: 100%; height: 100%; object-fit: cover; }
.pv-switch .card-fake .tt { height: 6px; width: 60px; border-radius: 3px; background: rgba(255, 255, 255, .8); }
.pv-switch .card-fake .line { height: 6px; margin: 10px 10px 0; border-radius: 3px; background: #e5e7eb; }
.pv-switch .side { position: absolute; top: 40px; width: 90px; height: 170px; border-radius: 12px; background: #fff; opacity: .7; }
.pv-switch .side.l { left: -40px; } .pv-switch .side.r { right: -40px; }
/* Windows tile / Safari pinned */
.pv-tile { display: grid; place-items: center; width: 150px; height: 150px; }
.pv-tile img { width: 70%; height: 70%; object-fit: contain; }
.pv-pinned { zoom: 1.15; display: flex; align-items: flex-end; height: 40px; padding: 8px 8px 0; background: #dedede; width: 100%; max-width: 320px; }
.pv-pinned .pin { width: 36px; height: 32px; border-radius: 6px 6px 0 0; background: #f6f6f6; display: grid; place-items: center; }
.pv-pinned .pin .mask { width: 16px; height: 16px; background: var(--pin-color, #000); -webkit-mask: var(--pin-mask) center / contain no-repeat; mask: var(--pin-mask) center / contain no-repeat; }
.checker-bg { background: repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 50% / 10px 10px; }

/* ---- Result page --------------------------------------------------------- */
.step { display: flex; gap: 1rem; }
.step-num { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: #1d4ed8; color: #fff; font-weight: 700; font-size: 1.125rem; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.step-num svg { width: 1.375rem; height: 1.375rem; }
@media (max-width: 480px) {
  .step { flex-direction: column; gap: .75rem; }
  .step-num { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
  .step-body .files-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .step-body .file-card { padding: .75rem .5rem; }
  .step-body .file-card .thumb { width: 64px; height: 64px; }
}
.step-body { min-width: 0; flex: 1; }
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.file-card { border: 1px solid #e5e7eb; border-radius: var(--radius); padding: 1rem .75rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; background: #fff; text-align: center; min-width: 0; transition: box-shadow .15s, border-color .15s; }
.file-card:hover { box-shadow: var(--shadow-md); border-color: #93c5fd; }
.file-card .thumb { width: 80px; height: 80px; object-fit: contain; background: repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 50% / 10px 10px; border: 1px solid #e5e7eb; border-radius: 4px; }
.file-card .fname { font-size: .9375rem; font-weight: 600; color: #111827; overflow-wrap: anywhere; line-height: 1.3; }
.file-card .fmeta { font-size: .875rem; color: #4b5563; }
.file-card a { margin-top: auto; display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .75rem; font-size: .9375rem; font-weight: 600; color: #1d4ed8; border-radius: var(--radius-sm); }
.file-card a:hover { text-decoration: underline; background: #eff6ff; }
.file-list { font-size: .9375rem; border: 1px solid #e5e7eb; border-radius: var(--radius); overflow: hidden; }
.file-list li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; padding: .625rem 1rem; border-bottom: 1px solid #f3f4f6; }
.file-list li:last-child { border-bottom: 0; }
.file-list li span:first-child { font-family: ui-monospace, Menlo, monospace; color: #111827; overflow-wrap: anywhere; }
.file-list li span:last-child { color: #4b5563; }
.progress { height: .625rem; background: #e5e7eb; border-radius: 9999px; overflow: hidden; }
.progress > div { height: 100%; background: #1d4ed8; transition: width .2s; }
html.dark .file-card { background: #1f2937; border-color: #374151; }
html.dark .file-card .fname { color: #fff; }
html.dark .file-card .fmeta { color: #a8b0bd; }
html.dark .file-card a { color: #93c5fd; }
html.dark .file-card a:hover { background: #374151; }
html.dark .file-list { border-color: #374151; }
html.dark .file-list li { border-color: #374151; }
html.dark .file-list li span:first-child { color: #fff; }
html.dark .file-list li span:last-child { color: #a8b0bd; }

/* ---- Checker ------------------------------------------------------------- */
.check-section { margin-top: 2rem; }
.check-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.check-head h2 { margin: 0; }
.check-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.check-item { display: flex; gap: .875rem; padding: .875rem 1.125rem; border-radius: var(--radius); border: 1px solid; font-size: 1rem; line-height: 1.5; }
.check-item .ic { width: 1.5rem; height: 1.5rem; flex-shrink: 0; margin-top: .0625rem; }
.check-item .msg { font-weight: 600; }
.check-item .det { margin-top: .15rem; font-weight: 400; opacity: .9; word-break: break-word; }
.check-item.ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.check-item.warning { background: #fefce8; border-color: #fde68a; color: #854d0e; }
.check-item.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.check-item.info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.check-item code { background: rgba(255, 255, 255, .6); padding: 0 .3rem; border-radius: .2rem; font-size: .9rem; }
.check-icons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.check-icon { border: 1px solid #e5e7eb; border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: .375rem; width: 11rem; max-width: 100%; background: #fff; }
.check-icon img { max-width: 96px; max-height: 96px; object-fit: contain; background: repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 50% / 10px 10px; border-radius: 4px; }
.check-icon .cap { font-size: .875rem; color: #374151; text-align: center; overflow-wrap: anywhere; }
.check-icon .cap a { text-decoration: underline; text-underline-offset: 2px; }
.check-icon .dim { font-size: .8125rem; color: #4b5563; text-align: center; overflow-wrap: anywhere; }
.score { display: inline-flex; align-items: center; gap: .5rem; }
.checker-summary { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.sum-box { flex: 1 1 140px; border-radius: var(--radius); padding: 1.25rem 1rem; background: #fff; text-align: center; border: 1px solid #e5e7eb; }
.sum-box .n { font-size: 2.25rem; font-weight: 800; line-height: 1; }
.sum-box .l { font-size: .9375rem; color: #4b5563; margin-top: .375rem; }
.sum-box.ok .n { color: #15803d; } .sum-box.warning .n { color: #a16207; } .sum-box.error .n { color: #b91c1c; }
html.dark .check-icon, html.dark .sum-box { background: #1f2937; border-color: #374151; }
html.dark .check-icon .cap { color: #d1d5db; }
html.dark .check-icon .dim, html.dark .sum-box .l { color: #a8b0bd; }
html.dark .check-item.ok { background: #052e16; border-color: #166534; color: #bbf7d0; }
html.dark .check-item.warning { background: #422006; border-color: #854d0e; color: #fde68a; }
html.dark .check-item.error { background: #450a0a; border-color: #991b1b; color: #fecaca; }
html.dark .check-item.info { background: #172554; border-color: #1e40af; color: #bfdbfe; }
html.dark .check-item code { background: rgba(0, 0, 0, .3); }

/* ---- Content pages ------------------------------------------------------- */
.blog-list { display: flex; flex-direction: column; gap: 0; max-width: 48rem; }
.blog-item { padding: 1.25rem 0; border-bottom: 1px solid #e5e7eb; }
.blog-item:first-child { padding-top: .25rem; }
.blog-item-body { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.blog-item-title { color: #111827; font-weight: 600; font-size: 1.125rem; line-height: 1.4; text-decoration: none; }
.blog-item-title:hover { color: #0e7490; text-decoration: underline; }
.blog-item-summary { margin: 0; color: #4b5563; font-size: .9875rem; line-height: 1.55; }
.blog-item-meta, .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; color: #6b7280; font-size: .875rem; margin: 0; }
.post-meta { margin-bottom: 1.75rem; color: #4b5563; font-size: .9375rem; }
.meta-sep { color: #9ca3af; }
.article-cta { margin: 2.5rem 0 0; padding: 1.25rem 1.35rem; border: 1px solid #bfdbfe; border-radius: var(--radius-lg); background: #eff6ff; box-shadow: var(--shadow-sm); }
.article-cta-title { margin: 0 0 .75rem; font-weight: 700; font-size: 1.0625rem; color: #1e3a8a; }
.article-cta-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.post-nav { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav-link { display: flex; flex-direction: column; gap: .25rem; min-height: var(--tap); padding: .875rem 1rem; border: 1px solid #e5e7eb; border-radius: var(--radius); background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s, background-color .15s; color: inherit; }
.post-nav-link:hover { border-color: #93c5fd; box-shadow: var(--shadow-sm); background: #f8fafc; }
.post-nav-link:focus-visible { outline: 3px solid #0891b2; outline-offset: 2px; }
.post-nav-link.is-empty { visibility: hidden; pointer-events: none; border: 0; padding: 0; min-height: 0; }
.post-nav-next { text-align: right; }
.post-nav-dir { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #6b7280; }
.post-nav-title { font-size: .9875rem; font-weight: 600; color: #111827; line-height: 1.35; }
.post-nav-link:hover .post-nav-title { color: #0e7490; }
.related-posts { margin: 2rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid #e5e7eb; }
.related-heading { margin: 0 0 .75rem; font-size: 1.25rem; font-weight: 700; color: #111827; }
.related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.related-list a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .35rem 0; font-weight: 500; color: #1f2937; text-decoration: underline; text-underline-offset: 3px; }
.related-list a:hover { color: #0e7490; text-decoration: none; }
.related-more { margin: .75rem 0 0; font-size: .9375rem; }
.related-more a { color: #4b5563; font-weight: 500; }
html.dark .blog-item { border-color: #374151; }
html.dark .blog-item-title { color: #fff; }
html.dark .blog-item-summary { color: #9ca3af; }
html.dark .blog-item-meta, html.dark .post-meta { color: #9ca3af; }
html.dark .article-cta { background: #172554; border-color: #1e40af; }
html.dark .article-cta-title { color: #bfdbfe; }
html.dark .post-nav { border-color: #374151; }
html.dark .post-nav-link { background: #1f2937; border-color: #374151; }
html.dark .post-nav-link:hover { background: #111827; border-color: #60a5fa; }
html.dark .post-nav-title { color: #fff; }
html.dark .related-posts { border-color: #374151; }
html.dark .related-heading { color: #fff; }
html.dark .related-list a { color: #e5e7eb; }
html.dark .related-more a { color: #9ca3af; }
.guide-card { display: block; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s, transform .15s; }
.guide-card:hover { box-shadow: var(--shadow-lg); border-color: #67e8f9; transform: translateY(-2px); }
.guide-card h2 { font-size: 1.375rem; font-weight: 700; color: #111827; margin-bottom: .375rem; }
.guide-card p { color: #4b5563; font-size: 1.0625rem; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e5e7eb; border-radius: var(--radius); }
.data-table { width: 100%; font-size: 1rem; text-align: left; color: #374151; }
.data-table thead { background: #f9fafb; font-size: .875rem; text-transform: uppercase; letter-spacing: .03em; color: #374151; }
.data-table th, .data-table td { padding: .875rem 1.125rem; vertical-align: top; }
.data-table tbody tr { border-top: 1px solid #e5e7eb; }
.data-table tbody tr:hover { background: #f9fafb; }
html.dark .table-wrap { border-color: #374151; }
html.dark .data-table { color: #d1d5db; }
html.dark .data-table thead { background: #1f2937; color: #e5e7eb; }
html.dark .data-table tbody tr { border-color: #374151; }
html.dark .data-table tbody tr:hover { background: #111827; }
.faq-q { margin-top: 2rem; }
.faq-nav a { display: inline-block; margin: .25rem .5rem .25rem 0; padding: .25rem 0; min-height: 2.5rem; }
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: #111827; color: #fff; padding: .875rem 1.5rem; border-radius: var(--radius); font-size: 1rem; z-index: 100; box-shadow: var(--shadow-lg); max-width: calc(100vw - 2rem); box-sizing: border-box; }
.form-status { font-size: 1rem; margin-top: .75rem; }
.form-status.ok { color: #15803d; } .form-status.err { color: #b91c1c; }
.error-hero { text-align: center; padding: 3rem 0; }
.error-hero .code { font-size: 6rem; font-weight: 800; color: #1d4ed8; line-height: 1; }

/* ---- Logo maker ---------------------------------------------------------- */
.logo-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .logo-layout { grid-template-columns: 1fr 420px; } }
.logo-layout > div { min-width: 0; }
.logo-stage { display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: #f3f4f6 repeating-conic-gradient(#e5e7eb 0 25%, #f9fafb 0 50%) 50% / 16px 16px; border-radius: var(--radius-lg); }
.logo-stage canvas { width: 100%; max-width: 420px; height: auto; border-radius: 4px; }
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .625rem; }
.palette-opt { display: flex; height: 2.75rem; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; cursor: pointer; padding: 0; transition: border-color .15s, box-shadow .15s; }
.palette-opt:hover { border-color: #93c5fd; }
.emoji-btn > span { min-width: var(--tap); padding: .25rem .5rem; font-size: 1.5rem; line-height: 1.75rem; }
.palette-opt span { flex: 1; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.palette-opt.is-selected { border-color: #1d4ed8; box-shadow: 0 0 0 2px #bfdbfe; }
.shape-opts { display: flex; gap: .5rem; flex-wrap: wrap; }
.shape-opts label { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; min-height: var(--tap); border: 1px solid #9ca3af; border-radius: var(--radius); cursor: pointer; font-size: 1rem; transition: border-color .15s, background-color .15s; max-width: 100%; }
.shape-opts label:hover { border-color: #3b82f6; background: #eff6ff; }
.shape-opts label:has(input:checked) { border-color: #1d4ed8; background: #eff6ff; }
.shape-opts input:checked + span { font-weight: 700; color: #1d4ed8; }
.color-input { display: block; width: 4.5rem; height: var(--tap); padding: .25rem; border: 1px solid #9ca3af; border-radius: var(--radius); background: #fff; cursor: pointer; }
.color-input:hover { border-color: #0891b2; }
.opt { display: flex; align-items: center; gap: .625rem; min-height: var(--tap); }
.opt label { font-size: 1rem; font-weight: 500; color: #111827; cursor: pointer; }
.field-group .range { min-width: 10rem; }
html.dark .opt label { color: #fff; }
html.dark .color-input { background: #374151; border-color: #6b7280; }
html.dark .logo-stage { background-color: #1f2937; }
html.dark .shape-opts label { border-color: #6b7280; }
html.dark .shape-opts label:hover, html.dark .shape-opts label:has(input:checked) { background: #1e3a8a33; border-color: #60a5fa; }
html.dark .shape-opts input:checked + span { color: #93c5fd; }

/* ---- Utilities specific to this theme ------------------------------------ */
.text-link { color: #1d4ed8; text-decoration: underline; }
.text-link:hover { text-decoration: none; }
.max-w-prose-site { max-width: 65ch; }
.no-js-note { padding: 1rem 1.25rem; background: #fefce8; color: #854d0e; border-radius: var(--radius); font-size: 1.0625rem; }
/* Utility sizes were a notch too small for comfortable reading: bump the small text steps. */
.text-xs { font-size: .8125rem; line-height: 1.25rem; }
.text-sm { font-size: .9375rem; line-height: 1.5rem; }
html.dark .card { box-shadow: none; }
html.dark .pill { color: #e5e7eb; }
html.dark ::placeholder { color: #9ca3af; }
html.dark .pv-box { border-color: #4b5563; }
@media print {
  .skip-link, .navbar, header, .footer, .theme-toggle, .navbar-toggle,
  .article-cta, .post-nav, .related-posts, .toast, #theme-toggle, #nav-toggle { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .site-main { padding: 0 !important; }
  .page, .article-page { max-width: none; padding: 0; }
  .format { max-width: none; color: #111 !important; font-size: 11pt; line-height: 1.5; }
  .format h1, .format h2, .format h3, .format h4, .format strong { color: #000 !important; }
  .format a { color: #000 !important; text-decoration: underline; }
  .format a[href^="http"]::after, .format a[href^="/"]::after { content: " (" attr(href) ")"; font-size: .85em; font-weight: 400; }
  .format pre, .format code { background: #f5f5f5 !important; color: #000 !important; border-color: #ccc !important; }
  .table-scroll { border: 0; overflow: visible; }
  .table-scroll table { min-width: 0; }
  .format table { font-size: 9pt; }
  .post-meta, .breadcrumb { color: #444 !important; }
  .card, .panel { box-shadow: none !important; border-color: #ccc !important; break-inside: avoid; }
  a { orphans: 3; widows: 3; }
  h1, h2, h3 { break-after: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero-icons > div:hover > svg { transform: none; }
  .guide-card:hover { transform: none; }
}