/* ApplyReady visual system
   Screen chrome only. Does not set @page, document margins, or template type.
   Native controls stay in the DOM; this file only changes how they look. */

@media screen {
  :root {
    --ux-control-h: 44px;
    --ux-radius: 8px;
    --ux-radius-sm: 6px;
    --ux-ease: cubic-bezier(0.2, 0, 0, 1);
    --bg-page: #f4f3f0;
    --shadow-sm: 0 1px 2px rgba(24, 33, 38, 0.04);
    --shadow-md: 0 8px 24px rgba(24, 33, 38, 0.06);
    --shadow-lg: 0 16px 40px rgba(24, 33, 38, 0.12);
  }

  [data-theme="dark"] {
    --bg-page: #101416;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  }

  body {
    background: var(--bg-page);
    text-rendering: optimizeLegibility;
  }

  :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: none;
  }

  button,
  [role="button"],
  summary,
  label[for],
  .nav-link,
  .preset-shortcut,
  .btn,
  .custom-select__button,
  .custom-select__option,
  .example-link,
  .footer-link {
    cursor: pointer;
  }

  button:disabled,
  .btn:disabled,
  [aria-disabled="true"] {
    cursor: not-allowed;
  }

  /* Kill glass and hover-lift. Motion should explain state, not decorate. */
  .navbar { backdrop-filter: none; background: var(--bg-card); }
  .btn:hover:not(:disabled),
  .preset-shortcut:hover { transform: none; }

  /* Navigation */
  .navbar { border-bottom: 1px solid var(--border-color); }
  .brand-logo { letter-spacing: -0.03em; }
  .nav-link {
    color: var(--text-main);
    background: transparent;
    border-color: transparent;
  }
  .nav-link:hover { background: var(--bg-card-subtle); color: var(--text-heading); }
  .nav-link.active {
    background: var(--primary-light);
    color: var(--primary);
    box-shadow: inset 0 -2px 0 var(--primary);
  }
  .theme-toggle-btn,
  .nav-menu-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .tools-menu > button.nav-link {
    color: var(--text-main) !important;
    min-height: 44px;
  }
  [data-theme="dark"] .tools-menu > button.nav-link { color: #f1f5f9 !important; }
  .tools-menu__panel {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: var(--ux-radius);
    box-shadow: var(--shadow-lg);
    min-width: 260px;
    padding: 0.35rem;
  }
  .tools-menu__group strong {
    color: var(--text-muted);
    letter-spacing: 0.06em;
    font-size: 0.75rem;
  }
  .tools-menu a {
    color: var(--text-main);
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    font-size: 0.875rem;
  }
  .tools-menu a:hover,
  .tools-menu a:focus-visible { background: var(--primary-light); color: var(--text-heading); }

  /* Page titles stay readable, not poster-sized */
  .workspace-hero { align-items: flex-end; }
  .workspace-hero .hero-title {
    font-size: clamp(1.55rem, 2.4vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    max-width: 22ch;
  }
  .hero-title { letter-spacing: -0.03em; }
  .workspace-hero .hero-subtitle { max-width: 46ch; }
  .workspace-assurance {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--ux-radius);
    background: var(--bg-card);
    max-width: 240px;
  }

  .trust-points span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 600;
  }

  /* Steps: Upload, Adjust, Download */
  .steps { gap: 0; margin-top: 1rem; }
  .steps__item {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.45rem;
  }
  .steps__item + .steps__item::before {
    content: "";
    width: 1.25rem;
    height: 1px;
    background: var(--border-color-dark);
    margin-right: 0.35rem;
  }
  .steps__item > span {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.75rem;
    border: 1px solid var(--border-color-dark);
  }
  .steps__item.is-active { color: var(--text-heading); }
  .steps__item.is-active > span,
  .steps__item.is-done > span {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }

  /* Presets read as shortcuts, not a second toolbar of equal weight */
  .preset-bar-label {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .preset-shortcut {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    min-height: 44px;
    box-shadow: none;
  }
  .preset-shortcut[aria-pressed="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }
  .preset-shortcut[aria-pressed="true"] > i,
  .preset-shortcut[aria-pressed="true"] span { color: #fff; }
  [data-theme="dark"] .preset-shortcut[aria-pressed="true"] {
    background: var(--primary-light);
    color: var(--text-heading);
    border-color: var(--primary);
  }
  [data-theme="dark"] .preset-shortcut[aria-pressed="true"] > i,
  [data-theme="dark"] .preset-shortcut[aria-pressed="true"] span { color: var(--text-heading); }
  [data-theme="dark"] .steps__item.is-active > span,
  [data-theme="dark"] .steps__item.is-done > span { color: #10221c; }
  [data-theme="dark"] input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.2l3 3.1 6-6.4' fill='none' stroke='%2310241c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }

  /* Surfaces: one level, not stacked cards */
  .app-card,
  .form-panel,
  .guide-card,
  .preview-toolbar {
    box-shadow: none;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
  }
  .card-title { font-size: 0.95rem; }
  .image-stage { border: 1px solid var(--border-color); }
  .crop-empty { background: var(--bg-card-subtle); }

  /* Fields */
  .form-control,
  .form-select,
  textarea.form-control,
  input[type="date"].form-control,
  input[type="number"].form-control,
  input[type="text"].form-control,
  input[type="email"].form-control,
  input[type="tel"].form-control,
  input[type="url"].form-control,
  input[type="search"].form-control,
  .custom-select__button {
    min-height: var(--ux-control-h);
    border-radius: var(--ux-radius);
    background-color: var(--input-bg);
    color: var(--text-main);
    border: 1px solid var(--input-border);
    box-shadow: none;
  }
  textarea.form-control { min-height: 96px; line-height: 1.5; padding-top: 0.7rem; }
  .form-label { font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.01em; color: var(--text-heading); }
  .form-hint { line-height: 1.45; color: var(--text-muted); }
  /* Focus must out-rank the control rules above (they use type selectors),
     otherwise text fields lose their only focus indicator. */
  .form-control:focus,
  .form-select:focus,
  textarea.form-control:focus,
  input[type="date"].form-control:focus,
  input[type="number"].form-control:focus,
  input[type="text"].form-control:focus,
  input[type="email"].form-control:focus,
  input[type="tel"].form-control:focus,
  input[type="url"].form-control:focus,
  input[type="search"].form-control:focus,
  .custom-select__button:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-focus);
  }
  .form-control.is-invalid,
  .form-select.is-invalid,
  input[aria-invalid="true"],
  .custom-select.is-invalid .custom-select__button {
    border-color: var(--accent-danger);
    box-shadow: 0 0 0 3px rgba(188, 37, 45, 0.16);
  }
  .field-error { font-weight: 600; }

  select.form-select,
  select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%235c6970' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
  }
  [data-theme="dark"] select.form-select,
  [data-theme="dark"] select.form-control {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%23aab8bf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }

  input[type="number"].form-control {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="date"].form-control {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><rect x='2' y='3' width='12' height='11' rx='1.5' stroke='%235c6970' stroke-width='1.4'/><path d='M2 6.5h12M5 2v2.5M11 2v2.5' stroke='%235c6970' stroke-width='1.4' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
  }
  [data-theme="dark"] input[type="date"].form-control {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><rect x='2' y='3' width='12' height='11' rx='1.5' stroke='%23aab8bf' stroke-width='1.4'/><path d='M2 6.5h12M5 2v2.5M11 2v2.5' stroke='%23aab8bf' stroke-width='1.4' stroke-linecap='round'/></svg>");
  }
  input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    width: 2.6rem;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }

  input[type="file"]::file-selector-button,
  input[type="file"]::-webkit-file-upload-button {
    min-height: 36px;
    margin-right: 0.75rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--bg-card-subtle);
    color: var(--text-heading);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
    cursor: pointer;
  }

  .checkbox-label { min-height: 44px; gap: 0.65rem; }
  input[type="checkbox"],
  input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    margin: 0;
    border: 1.5px solid var(--border-color-dark);
    background: var(--input-bg) center / 0.8rem no-repeat;
    vertical-align: middle;
    flex-shrink: 0;
    box-shadow: none;
    accent-color: transparent;
  }
  input[type="checkbox"] { border-radius: 4px; }
  input[type="radio"] { border-radius: 50%; }
  input[type="checkbox"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.2l3 3.1 6-6.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }
  input[type="radio"]:checked {
    border-color: var(--primary);
    background-color: var(--input-bg);
    box-shadow: inset 0 0 0 4px var(--primary);
  }
  input[type="checkbox"]:focus-visible,
  input[type="radio"]:focus-visible,
  input[type="range"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  input[type="checkbox"]:disabled,
  input[type="radio"]:disabled { opacity: 0.45; }

  input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 1.75rem;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--border-color-dark);
    border-radius: 999px;
  }
  input[type="range"]::-moz-range-track {
    height: 4px;
    background: var(--border-color-dark);
    border-radius: 999px;
  }
  input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  }
  input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid #fff;
  }
  .range-wrap { position: relative; padding-top: 1.35rem; width: 100%; }
  .range-bubble {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    background: var(--text-heading);
    color: var(--bg-card);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
  }

  select.ux-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    border: 0 !important;
    clip: auto !important;
  }

  .custom-select { position: relative; width: 100%; }
  .custom-select__button {
    width: 100%;
    padding: 0.55rem 2.4rem 0.55rem 0.85rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 550;
    text-align: left;
    display: flex;
    align-items: center;
    position: relative;
  }
  .custom-select__button:hover:not(:disabled) { border-color: var(--text-muted); }
  .custom-select__button:disabled { opacity: 0.55; }
  .custom-select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%;
  }
  .custom-select__button::after {
    content: "";
    position: absolute;
    right: 0.85rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 1.6px solid var(--text-muted);
    border-bottom: 1.6px solid var(--text-muted);
    transform: translateY(-70%) rotate(45deg);
  }
  .custom-select.is-open .custom-select__button {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-focus);
  }
  .custom-select.is-open .custom-select__button::after { transform: translateY(-30%) rotate(225deg); }
  .custom-select__list {
    position: fixed;
    z-index: 200;
    margin: 0;
    padding: 0.3rem;
    max-height: min(280px, 50vh);
    overflow: auto;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: var(--ux-radius);
    box-shadow: var(--shadow-lg);
  }
  .custom-select__option {
    min-height: 40px;
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--text-main);
  }
  .custom-select__option.is-active,
  .custom-select__option:hover { background: var(--primary-light); color: var(--text-heading); }
  .custom-select__option[aria-selected="true"]::before {
    content: "";
    width: 0.4rem;
    height: 0.7rem;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(40deg);
    flex-shrink: 0;
  }
  .custom-select__option[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

  /* Buttons */
  .btn {
    min-height: var(--ux-control-h);
    border-radius: var(--ux-radius);
    font-weight: 650;
    box-shadow: none;
  }
  .btn-sm { min-height: 44px; border-radius: var(--ux-radius-sm); }
  .btn-primary { box-shadow: none; }
  .btn-primary:active:not(:disabled) { transform: translateY(1px); }
  .btn-outline-danger {
    background: transparent;
    border-color: transparent;
    color: var(--accent-danger);
  }
  .btn-outline-danger:hover { background: var(--accent-danger-bg); border-color: var(--accent-danger-border); }
  .btn-lock-aspect { min-width: 44px; min-height: 44px; }

  #btnProcess, #btnBrowse { min-height: 48px; }
  #resultArea:not(.hidden) #btnDownload,
  #btnDownload.btn-success,
  #btnCleanerDownload,
  a.btn-success {
    min-height: 48px;
    font-weight: 700;
  }
  .preview-result-card {
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
  }
  .comparison-view-toggle {
    padding: 0.2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--ux-radius);
    background: var(--bg-card-subtle);
    gap: 0.2rem;
  }
  .comparison-view-toggle .btn {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .comparison-view-toggle .btn.active,
  .comparison-view-toggle .btn[aria-pressed="true"] {
    background: var(--bg-card);
    color: var(--text-heading);
    box-shadow: var(--shadow-sm);
  }

  .meta-stats { gap: 0.5rem; }
  .meta-stat-item {
    background: var(--bg-card-subtle);
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
  }
  .status-ok { color: var(--accent-green-text); }
  .alert-box { border-radius: var(--ux-radius); }

  .dropzone {
    background: var(--bg-card);
    border-style: dashed;
    transition: border-color 0.15s var(--ux-ease), background-color 0.15s var(--ux-ease);
  }
  .dropzone:hover,
  .dropzone.is-dragover,
  .dropzone.dragover {
    border-color: var(--primary);
    background: var(--primary-light);
  }
  .upload-symbol {
    background: var(--primary-light);
    color: var(--primary);
    border-color: transparent;
  }
  .example-link { color: var(--text-muted); font-weight: 600; }
  .example-link:hover { color: var(--primary); }

  .advanced-disclosure {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
  }
  .advanced-disclosure > summary {
    min-height: 44px;
    list-style: none;
    font-weight: 650;
    color: var(--text-main);
  }
  .advanced-disclosure > summary::-webkit-details-marker { display: none; }

  /* Resume editor shell. Document pages are not restyled here. */
  .editor-tabs-nav { background: var(--bg-card-subtle); gap: 0; padding: 0; }
  .editor-tab-btn {
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    box-shadow: inset 0 -2px 0 transparent;
  }
  .editor-tab-btn.active,
  .editor-tab-btn[aria-selected="true"] {
    background: var(--bg-card);
    color: var(--text-heading);
    box-shadow: inset 0 -2px 0 var(--primary);
  }
  .resume-mode-tabs .tab-btn { min-height: 44px; }
  .accordion-section {
    border: 1px solid var(--border-color);
    border-radius: var(--ux-radius);
    background: var(--bg-card);
    margin-bottom: 0.65rem;
  }
  .accordion-header { min-height: 48px; width: 100%; text-align: left; }
  .dynamic-item {
    border: 1px solid var(--border-color);
    border-radius: var(--ux-radius);
    background: var(--bg-card-subtle);
    padding: 0.85rem;
    margin-bottom: 0.65rem;
  }
  .dynamic-item-actions .btn { min-width: 44px; }
  .template-card.active {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
    background: var(--primary-light);
  }
  .draft-options, .writing-hints-card { background: var(--bg-card); }

  /* Reading */
  .content-page .guide-content { max-width: 760px; }
  .guide-content { font-size: 1.02rem; }
  .content-page .guide-content > .app-card p,
  .content-page .guide-content > .app-card li {
    max-width: 70ch;
    line-height: 1.7;
  }
  .content-page .guide-content > .app-card { box-shadow: none; }
  .content-page .guide-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
  }
  .content-page .guide-content th,
  .content-page .guide-content td {
    border-bottom: 1px solid var(--border-color);
    padding: 0.55rem 0.4rem;
    text-align: left;
    vertical-align: top;
  }
  .faq-item { border-bottom: 1px solid var(--border-color); }
  .faq-question { min-height: 48px; }
  .guide-card { box-shadow: none; }
  .guide-card:hover { border-color: var(--primary); }
  .related-tool { border-top: 1px solid var(--border-color); }

  .site-footer, .footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
  }
  .footer-bottom {
    color: var(--text-muted);
    font-size: 0.8rem;
  }
  .footer-link { min-height: 32px; display: inline-flex; align-items: center; }
  .footer-link:hover { color: var(--text-heading); }

  .toast-container {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    align-items: center;
  }
  .toast {
    width: min(100%, 28rem);
    background: var(--text-heading);
    color: var(--bg-card);
    border-radius: var(--ux-radius);
  }

  .ad-slot-container { margin-top: 1.5rem; }

  /* Current page */
  .nav-link[aria-current="page"],
  .tools-menu a[aria-current="page"] {
    color: var(--text-heading);
    box-shadow: inset 0 -2px 0 var(--primary);
    background: transparent;
  }

  /* Workspace leads. Settings stay, at a lower rank. */
  .resizer-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .resizer-grid > .image-controls { order: 2; }
  .resizer-grid > section:not(.image-controls) { order: 1; }

  .image-controls:has(#fileInfoBox.hidden) {
    background: var(--bg-card);
  }
  .image-controls:has(#fileInfoBox.hidden) .card-title { color: var(--text-muted); }

  /* Result: preview, then the action, then the numbers */
  #resultArea {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 3px solid var(--primary);
    padding-top: 1rem;
  }
  #resultArea > :first-child { order: 1; margin-bottom: 0; }
  #resultArea > .preview-image-box { order: 2; }
  #resultArea > div:last-child { order: 3; }
  #resultArea > .meta-stats { order: 4; margin-top: 0.25rem; }
  #btnDownload, #btnCleanerDownload {
    min-height: 48px;
    font-weight: 700;
  }

  /* Advanced is a disclosure, not a second card */
  .advanced-disclosure {
    border: 0;
    border-top: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .advanced-disclosure > summary { padding-left: 0; padding-right: 0; }

  .tool-jump { margin: 0.85rem 0 0; }
  .tool-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.35rem 0.8rem;
    border-radius: var(--ux-radius);
    border: 1px solid var(--primary);
    color: var(--primary);
    font-weight: 650;
    text-decoration: none;
    background: var(--bg-card);
  }
  .tool-jump a:hover { background: var(--primary-light); }

  .template-card.active {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 2px var(--primary);
  }

  :root { --text-muted: #3f4c56; }
  [data-theme="dark"] { --text-muted: #b7c3c9; }

}

@media screen and (max-width: 960px) {
  .resizer-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .resizer-grid > .image-controls,
  .resizer-grid > section:not(.image-controls) { width: 100%; }
  .crop-empty { min-height: 320px; }
}
@media screen and (max-width: 760px) {
  .tools-menu__panel {
    position: static;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    margin-top: 0.25rem;
  }
  .workspace-hero .hero-title { max-width: none; font-size: 1.45rem; }
  .workspace-assurance { max-width: none; margin-top: 0.75rem; }
  .preset-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .preset-bar-label { flex: 0 0 auto; align-self: center; margin: 0; }
  .preset-shortcut { flex: 0 0 auto; min-height: 44px; }
  .preset-shortcut span { display: inline !important; }
  .main-content { padding-left: 1rem; padding-right: 1rem; }
  input.form-control,
  select.form-select,
  textarea.form-control,
  .custom-select__button { font-size: 16px; }
  .steps { flex-wrap: wrap; row-gap: 0.4rem; }
  .cropper-toolbar .btn { flex: 1 1 auto; }
  .footer-links { gap: 0.35rem 1rem; }
}

@media screen and (max-width: 400px) {
  .theme-toggle-btn, .nav-menu-toggle { width: 44px; height: 44px; }
  .main-content, .nav-container { padding-left: 0.75rem; padding-right: 0.75rem; }
  .btn-block { width: 100%; }
}

/* =========================================================================
   Astra layer. One system for chrome shared by every page.
   Sections: 1 tokens, 2 buttons, 3 segmented control, 4 shared field labels,
   5 embedded exam and KB tool, 6 tool pages, 7 result panel, 8 reading pages.
   Screen only. Resume sheet and print rules are not touched.
   ========================================================================= */
@media screen {
  /* 1. Tokens */
  :root {
    --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;
    --fs-title: clamp(1.625rem, 1.3rem + 1vw, 2rem);
    --fs-h2: 1.375rem; --fs-h3: 1.125rem; --fs-body: 1rem;
    --fs-ui: 0.9375rem; --fs-label: 0.8125rem; --fs-help: 0.8125rem; --fs-cap: 0.75rem;
    --ux-surface-2: var(--bg-card-subtle);
  }

  /* 2. Buttons: primary, secondary, quiet destructive, link-buttons identical */
  .btn { font-size: 0.875rem; font-weight: 600; text-decoration: none; }
  .btn-sm { font-size: 0.8125rem; }
  a.btn, a.btn:hover { text-decoration: none; }
  a.btn:not(.btn-primary):not(.btn-success) { color: var(--text-main); }
  @media (pointer: fine) { .btn-sm { min-height: 40px; } }
  .btn-text {
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    min-height: 40px;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--input-border);
    border-radius: var(--ux-radius-sm);
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
  }
  .btn-text:hover { background: var(--bg-card-subtle); color: var(--text-heading); }
  .btn-text.danger { border-color: transparent; background: transparent; color: var(--accent-danger); }
  .btn-text.danger:hover { background: var(--accent-danger-bg); }

  /* 3. Segmented control (Cleaned/Original, Result/Original) */
  .comparison-view-toggle { display: inline-flex; flex-wrap: nowrap; }
  .comparison-view-toggle .btn,
  .comparison-view-toggle .btn-toggle {
    min-height: 36px;
    padding: 0.35rem 0.8rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .comparison-view-toggle .btn-toggle:hover { color: var(--text-heading); }
  .comparison-view-toggle .btn.active,
  .comparison-view-toggle .btn[aria-pressed="true"],
  .comparison-view-toggle .btn-toggle.active,
  .comparison-view-toggle .btn-toggle[aria-pressed="true"] {
    background: var(--bg-card);
    color: var(--text-heading);
    box-shadow: var(--shadow-sm);
  }

  /* 4. Field labels used by the embedded tool match the home tool */
  .control-group { margin: 0; }
  .control-label {
    display: block;
    font-size: var(--fs-label);
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--text-heading);
    margin-bottom: 0.35rem;
  }

  /* 5. Embedded resizer on exam, KB and Hindi pages.
     Order: file bar, image or result, settings, action. */
  #resizerApp {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
  }
  #resizerApp > .form-panel,
  #resizerApp > .preview-panel { display: contents; }
  #resizerApp .file-upload-wrapper { order: 1; }
  #resizerApp #fileInfoBox { order: 2; }
  #resizerApp #cropperActiveArea,
  #resizerApp #resultArea { order: 3; }
  #resizerApp .form-panel > .control-group { order: 4; }
  #resizerApp #customControls { order: 5; }
  #resizerApp #btnProcess { order: 6; margin-top: 0 !important; min-height: 48px; }
  #resizerApp > .form-panel > .field-error { order: 5; }
  #resizerApp > .form-panel > .alert-box { margin: 0; }
  #resizerApp .btn-group { order: 6; margin-top: 0 !important; }
  #resizerApp .workspace-footnote { order: 7; margin-top: 0 !important; }
  .field-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  #resizerApp .cropper-placeholder { display: none; }
  #resizerApp:has(#fileInfoBox:not(.hidden)) .file-upload-wrapper { display: none; }
  #resizerApp .file-upload-wrapper .dropzone {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.4rem;
    padding: var(--sp-5) var(--sp-4);
  }
  #resizerApp .dropzone-icon { font-size: 2rem; color: var(--primary); margin-bottom: 0.25rem; }
  #resizerApp .dropzone-text { margin: 0; font-size: var(--fs-ui); color: var(--text-main); }
  #resizerApp .dropzone-text strong { color: var(--text-heading); }
  #resizerApp #fileInfoBox:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3);
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--ux-radius);
  }
  #resizerApp #fileInfoText {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--text-heading);
    overflow-wrap: anywhere;
  }
  #resizerApp .file-info-actions { display: flex; gap: var(--sp-2); }
  #resizerApp #customControls { display: grid; gap: var(--sp-4); }
  #resizerApp .dim-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: var(--sp-2) !important; align-items: end; }
  #resizerApp .dim-row .control-group { flex: initial !important; }
  #resizerApp .form-row-2 { margin-top: 0 !important; gap: var(--sp-3) !important; }
  #resizerApp .cropper-container-wrapper { border-radius: var(--ux-radius); overflow: hidden; }
  #resizerApp .cropper-actions { margin-top: var(--sp-3) !important; }
  #resizerApp .workspace-footnote {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-cap);
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding: var(--sp-3) 0 0;
  }
  #resizerApp .workspace-footnote i { color: var(--primary); margin-right: 0.3rem; }

  /* Result block on the embedded tool */
  #resizerApp #resultArea {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--primary);
    border-radius: var(--ux-radius);
    margin: 0 !important;
  }
  #resizerApp #resultArea.hidden { display: none; }
  #resizerApp #resultArea > .result-head { order: -1; }
  .result-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--text-heading);
  }
  .result-head i { color: var(--accent-green); }
  #resizerApp .result-card {
    display: grid;
    place-items: center;
    padding: var(--sp-4);
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--ux-radius);
  }
  #resizerApp .result-img { max-width: 100%; max-height: 360px; object-fit: contain; display: block; }
  #resizerApp .result-meta-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2) !important;
    margin: 0 !important;
  }
  #resizerApp .result-meta-stats > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-card-subtle);
    border-radius: 6px;
    min-width: 0;
    font-size: var(--fs-label);
  }
  #resizerApp .result-meta-stats .text-muted { font-size: var(--fs-cap); }
  #resizerApp .result-meta-stats strong { font-size: var(--fs-label); font-weight: 650; overflow-wrap: anywhere; }
  #resizerApp #btnDownload { min-height: 48px; font-weight: 700; }

  /* 6. Tool pages: compress, image to PDF, passport sheet, signature cleaner */
  .guide-content:has(> .resizer-grid) { max-width: none; padding: 0; }
  .guide-content:has(> .resizer-grid) > .breadcrumb-nav { margin-bottom: var(--sp-4); }
  .guide-content:has(> .resizer-grid) > header { max-width: none; }
  .guide-content:has(> .resizer-grid) > .resizer-grid { margin-bottom: var(--sp-6) !important; }
  .guide-content:has(> .resizer-grid) .card-title {
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
    margin: 0 0 var(--sp-4);
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-heading);
  }
  .guide-content:has(> .resizer-grid) .card-title i { color: var(--text-muted); font-size: 0.95em; }
  .guide-content:has(> .resizer-grid) > :not(header):not(.breadcrumb-nav):not(.resizer-grid):not(.ad-slot-container) {
    max-width: 880px;
  }
  .guide-content:has(> .resizer-grid) .resizer-grid > .app-card { margin: 0; }
  .resizer-grid[data-layout="input-first"] { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: start; }
  .resizer-grid[data-layout="input-first"] > .image-controls { order: 1; }
  .resizer-grid[data-layout="input-first"] > section:not(.image-controls) { order: 2; }
  .resizer-grid[data-layout="stack"] { display: flex; flex-direction: column; max-width: 720px; gap: var(--sp-4); }
  .resizer-grid[data-layout="stack"] > .image-controls { order: 1; width: 100%; }
  .resizer-grid[data-layout="stack"] > section:not(.image-controls) { order: 2; width: 100%; }
  .resizer-grid[data-layout="stack"] > section:not(.image-controls):has(#compressProgressBox.hidden):has(#compressResultArea.hidden) { display: none; }
  .resizer-grid > .app-card .dropzone { margin: 0; width: 100%; max-width: none; }
  .guide-content:has(> .resizer-grid) .dropzone h3 { font-size: 1rem; font-weight: 650; margin: 0; }

  /* 7. Result metrics on the home tool: status first, three numbers, details quiet */
  #resultArea > .meta-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-2);
  }
  #resultArea > .meta-stats > .meta-stat-item { min-width: 0; text-align: left; }
  #resultArea > .meta-stats > .meta-stat-item:nth-child(7) { order: 1; grid-column: 1 / -1; background: var(--accent-green-bg, var(--bg-card-subtle)); }
  #resultArea > .meta-stats > .meta-stat-item:nth-child(5) { order: 2; grid-column: span 3; }
  #resultArea > .meta-stats > .meta-stat-item:nth-child(3) { order: 3; grid-column: span 2; }
  #resultArea > .meta-stats > .meta-stat-item:nth-child(6) { order: 4; grid-column: span 1; }
  #resultArea > .meta-stats > .meta-stat-item:nth-child(1),
  #resultArea > .meta-stats > .meta-stat-item:nth-child(2),
  #resultArea > .meta-stats > .meta-stat-item:nth-child(4) { order: 5; grid-column: span 2; background: transparent; border: 1px solid var(--border-color); }
  #resultArea > .meta-stats .meta-stat-label { text-transform: none; letter-spacing: 0; font-size: var(--fs-cap); }
  #resultArea > .meta-stats .meta-stat-val { font-size: var(--fs-label); }
  #resultArea > .meta-stats > .meta-stat-item:nth-child(7) .meta-stat-val { font-size: var(--fs-ui); font-weight: 700; }
  #resultArea > .meta-stats > .meta-stat-item:nth-child(5) .meta-stat-val { font-size: var(--fs-ui); font-weight: 700; }

  /* 8. Reading pages: guides, legal, about, exam and KB content */
  .content-page .guide-content .hero-title,
  .content-page .guide-content > h1,
  .content-page .guide-content header h1 {
    font-size: var(--fs-title);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: left;
  }
  .content-page .guide-content .hero-subtitle { font-size: 1.0625rem; line-height: 1.6; max-width: 62ch; }
  .content-page .guide-content > .app-card {
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: var(--sp-6);
  }
  .content-page .guide-content > .app-card h2,
  .content-page .guide-content > .app-card h3 {
    color: var(--text-heading);
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  .content-page .guide-content > .app-card h2 {
    font-size: var(--fs-h2);
    font-weight: 700;
    margin: var(--sp-6) 0 var(--sp-3);
    padding-top: 0;
    border-top: 0;
  }
  .content-page .guide-content > .app-card h3 { font-size: var(--fs-h3); font-weight: 650; margin: var(--sp-5) 0 var(--sp-2); }
  .content-page .guide-content > .app-card > :first-child { margin-top: 0; }
  .content-page .guide-content > .app-card p,
  .content-page .guide-content > .app-card li { line-height: 1.7; }
  .content-page .guide-content > .app-card p + p { margin-top: var(--sp-3); }
  .content-page .guide-content table {
    border: 1px solid var(--border-color);
    border-radius: var(--ux-radius);
    background: var(--bg-card);
  }
  .content-page .guide-content th {
    background: var(--bg-card-subtle);
    color: var(--text-heading);
    font-weight: 650;
    font-size: var(--fs-label);
  }
  .content-page .guide-content td,
  .content-page .guide-content th { padding: 0.65rem 0.75rem; }
  .eyebrow { font-size: var(--fs-cap); }
}

@media screen {
  /* Image to PDF page rows */
  .page-row {
    display: grid;
    grid-template-columns: auto 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    margin: 0 0 var(--sp-2);
  }
  .page-row__num { font-weight: 700; color: var(--primary); min-width: 1.5rem; }
  .page-row__thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-color); }
  .page-row__text { min-width: 0; }
  .page-row__name { display: block; font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-row__meta { font-size: var(--fs-help); color: var(--text-muted); }
  .page-row__actions { display: flex; gap: var(--sp-1); }
  /* Download is the one primary action in tool results */
  .resizer-grid a.btn-primary[download],
  .resizer-grid a.btn-success[download],
  #btnCleanerDownload { flex: 1 1 100% !important; justify-content: center; }
  .content-page .guide-content h2 { font-size: var(--fs-h2); line-height: 1.3; }
}
@media screen and (max-width: 520px) {
  .page-row { grid-template-columns: auto 52px minmax(0, 1fr); }
  .page-row__actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media screen {
  /* Home settings: one list of fields, no repeated summary, aligned lock */
  .image-controls .aspect-lock-wrap { align-self: end; }
  .image-controls .form-row-2:has(#formatSelect) { grid-template-columns: minmax(0, 1fr); }
  .image-controls #presetSummaryBox {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}
@media screen {
  /* Breadcrumb row with the language switch */
  .breadcrumb-nav { flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
  .lang-switch {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--ux-radius-sm);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: var(--fs-label);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .lang-switch:hover { background: var(--bg-card-subtle); color: var(--text-heading); }
}
@media screen {
  /* 9. Resume builder shell. The resume sheet and print rules are not touched. */
  .add-section-row {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-color);
    display: grid;
    gap: var(--sp-2);
  }
  .add-section-label { font-size: var(--fs-label); font-weight: 650; color: var(--text-heading); }
  .add-section-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); }
  .draft-card {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--ux-radius);
  }
  .draft-card .checkbox-label { margin: 0; }
  .draft-card .form-hint { margin: 0; }
  .draft-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    font-size: var(--fs-help);
    color: var(--text-muted);
  }

  /* Entries read as one object: title row with actions, then paired fields */
  .dynamic-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
  }
  .dynamic-item-header strong { font-size: var(--fs-label); color: var(--text-heading); }
  .dynamic-item-actions { display: flex; gap: var(--sp-1); margin-left: auto; }
  .dynamic-item-actions .btn { min-width: 44px; padding-inline: 0.5rem; }
  .dynamic-item .form-row-2 { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-3) !important; }
  .dynamic-item .form-row-2:has(.item-duration),
  .dynamic-item .form-row-2:has(.item-year),
  .dynamic-item .form-row-2:has(.item-term) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dynamic-item .form-label { margin-bottom: 0.3rem; }

  /* Template gallery: choose by picture and name, read details in the preview */
  .template-gallery-grid { gap: var(--sp-3); }
  .template-card {
    padding: var(--sp-3);
    border: 1px solid var(--border-color);
    border-radius: var(--ux-radius);
    background: var(--bg-card);
    min-width: 0;
  }
  .template-card:hover { border-color: var(--text-muted); }
  .template-card.active,
  .template-card.active:hover {
    background: var(--bg-card);
    border-color: var(--primary);
    box-shadow: inset 0 0 0 2px var(--primary);
  }
  .template-thumb-wrap { height: 150px; border-radius: 6px; }
  .template-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-3); }
  .template-card-title { font-size: var(--fs-label); font-weight: 650; color: var(--text-heading); }
  .template-badge { margin-top: 0; }
  .template-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: var(--sp-2) 0 var(--sp-3);
    font-size: var(--fs-help);
    line-height: 1.45;
    color: var(--text-muted);
  }
  .template-card-actions { gap: var(--sp-2); }
  .btn-preview-template { background: transparent; border-color: transparent; color: var(--text-muted); }
  .btn-preview-template:hover { background: var(--bg-card-subtle); color: var(--text-heading); }
  .template-card .btn-select-template.btn-primary {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
  }

  /* Review: blocking, warning and suggestion are separate, named groups */
  .review-checklist { display: block; }
  .review-group-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 var(--sp-2);
    font-size: var(--fs-label);
    font-weight: 700;
    color: var(--text-heading);
  }
  .review-group-title:first-child { margin-top: var(--sp-2); }
  .review-group-count {
    margin-left: auto;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--bg-card-subtle);
    color: var(--text-muted);
    font-size: var(--fs-cap);
    font-weight: 600;
  }
  .review-group-title--error i { color: var(--accent-danger); }
  .review-group-title--warning i { color: var(--accent-warning); }
  .review-group-title--info i { color: var(--text-muted); }
  .review-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-2);
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-color);
    border-left-width: 3px;
    border-radius: var(--ux-radius-sm);
    background: var(--bg-card);
    font-size: var(--fs-label);
    line-height: 1.5;
  }
  .review-item--error { border-left-color: var(--accent-danger); background: var(--accent-danger-bg); }
  .review-item--warning { border-left-color: var(--accent-warning); }
  .review-item--info { border-left-color: var(--border-color-dark); }
  .review-item--ok { border-left-color: var(--accent-green); }
  .review-item-content { display: flex; gap: 0.6rem; min-width: 0; }
  .review-item-content > i { margin-top: 0.2rem; flex-shrink: 0; }
  .review-item--error .review-item-content > i { color: var(--accent-danger); }
  .review-item--warning .review-item-content > i { color: var(--accent-warning); }
  .review-item--info .review-item-content > i { color: var(--text-muted); }
  .review-item--ok .review-item-content > i { color: var(--accent-green); }
  .review-jump-btn { flex-shrink: 0; white-space: nowrap; border-color: transparent; background: transparent; color: var(--primary); }
  .review-jump-btn:hover { background: var(--primary-light); color: var(--primary); }
  .page-indicator-pill { white-space: nowrap; }
  #viewReview .form-row-2 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)) !important; }
  #viewReview .keyword-match-card { margin-top: var(--sp-5); }

  /* One primary action per context in the resume header */
  .hero-export .btn { min-height: 44px; }
}
@media screen and (max-width: 949px) {
  .hero-export .btn { display: none; }
}
@media screen and (max-width: 520px) {
  .review-item { flex-direction: column; gap: var(--sp-2); }
  .review-jump-btn { align-self: flex-start; }
}
@media screen {
  /* Targets: footer links and the brand mark are real controls */
  .footer-links { row-gap: 0; }
  .footer-link { min-height: 36px; }
  .brand-logo { min-height: 44px; display: inline-flex; align-items: center; }
  .content-page .app-card.text-center .hero-title { font-size: var(--fs-title); }
  .breadcrumb-item a { display: inline-flex; align-items: center; min-height: 36px; }
}
@media screen and (pointer: coarse) {
  .footer-link, .breadcrumb-item a { min-height: 44px; }
}
@media screen {
  /* Second audit fixes */
  .image-controls [id$="FileInfoText"] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
  .image-controls [id$="FileInfoBox"] > div:first-child { flex: 1 1 10rem !important; min-width: 0; }
  .image-controls [id$="FileInfoBox"] { gap: var(--sp-2) var(--sp-3); }
  .content-page .guide-content th,
  .content-page .guide-content td { min-width: 5.5rem; }
}
@media screen and (max-width: 1100px) {
  .preset-bar { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: var(--sp-2); -webkit-overflow-scrolling: touch; }
  .preset-bar-label { flex: 0 0 auto; align-self: center; }
  .preset-shortcut { flex: 0 0 auto; }
}
@media screen and (max-width: 949px) {
  .resume-hero { display: block; }
  .hero-export { display: block; margin-top: var(--sp-2); }
  .hero-export > span { display: inline-flex; align-items: center; gap: 0.4rem; }
}
@media screen and (max-width: 420px) {
  .comparison-view-toggle { display: flex; width: 100%; }
  .comparison-view-toggle .btn,
  .comparison-view-toggle .btn-toggle { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 0.4rem; }
  .comparison-view-toggle .btn > i { display: none; }
}
@media screen {
  /* Guides: byline and callout used by the long-form articles */
  .guide-meta { margin: var(--sp-3) 0 0; font-size: var(--fs-help); color: var(--text-muted); }
  .guide-meta a { color: var(--text-main); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }
  .callout {
    margin: var(--sp-4) 0;
    padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--primary);
    background: var(--bg-card-subtle);
    border-radius: 0 var(--ux-radius-sm) var(--ux-radius-sm) 0;
    font-size: var(--fs-ui);
    line-height: 1.6;
  }
  .content-page .guide-content > .app-card > ol { padding-left: 1.25rem; }
  .content-page .guide-content table { margin: var(--sp-4) 0; }
  /* Long file names and URLs in prose wrap instead of widening the page */
  .content-page .guide-content p,
  .content-page .guide-content li,
  .content-page .guide-content h2,
  .content-page .guide-content h3 { overflow-wrap: break-word; }
}
@media screen and (max-width: 760px) {
  /* The last column usually holds a sentence: give it room so rows do not become tall and narrow */
  .content-page .guide-content th:last-child,
  .content-page .guide-content td:last-child { min-width: 12rem; }
}
@media screen and (max-width: 960px) {
  .resizer-grid[data-layout="input-first"] { display: flex; flex-direction: column; }
  .resizer-grid[data-layout="input-first"] > * { width: 100%; }
  #resultArea > .meta-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #resultArea > .meta-stats > .meta-stat-item:nth-child(7),
  #resultArea > .meta-stats > .meta-stat-item:nth-child(5) { grid-column: 1 / -1; }
  #resultArea > .meta-stats > .meta-stat-item:nth-child(3),
  #resultArea > .meta-stats > .meta-stat-item:nth-child(6) { grid-column: span 1; }
  #resultArea > .meta-stats > .meta-stat-item:nth-child(1),
  #resultArea > .meta-stats > .meta-stat-item:nth-child(2) { grid-column: span 1; }
  #resultArea > .meta-stats > .meta-stat-item:nth-child(4) { grid-column: 1 / -1; }
}
@media screen and (max-width: 520px) {
  #resizerApp { padding: var(--sp-4); border-radius: 10px; }
  #resizerApp .result-meta-stats { grid-template-columns: 1fr 1fr; }
  #resizerApp .result-meta-stats > div:first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}