/* ─── Brand Variables ─── */
/* Aliased to the global v2 palette (--rw-accent = #0D5F3F) so the resume
   builder picks up the site-wide theme. The --brand-neon-* names are kept
   so existing rules don't have to change. */
:root {
    --brand-neon: var(--rw-accent, #0D5F3F);
    --brand-neon-dim: var(--rw-accent-hover, #0B4E34);
    --brand-neon-bg: rgba(13, 95, 63, 0.08);
    --brand-neon-bg-strong: rgba(13, 95, 63, 0.14);
    --brand-dark: #111827;
    --brand-green: #10B981;
}

/* ─── Layout ─── */
/* Matches the v2 site container rhythm: capped max-width, centered on
   large monitors so the editor/preview don't stretch across a 2560px screen.
   The side padding comes from the page wrapper (--page-gutter) so the two
   halves sit flush against each other inside the cap. */
.rb-container {
    display: flex;
    min-height: calc(100vh - 64px);
    padding-top: 64px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Outfit','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background: var(--preview-bg, #f1f5f9);
}
.rb-editor { width: 45%; overflow-y: auto; padding: 24px 28px 100px; background: var(--editor-bg, #f9fafb); border-right: 1px solid var(--border, #e5e7eb); }
.rb-preview-wrap { width: 55%; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: 24px; background: var(--preview-bg, #f1f5f9); display: flex; flex-direction: column; }
.dark .rb-container { background: var(--preview-bg, #0f172a); }
.dark .rb-editor { --editor-bg: #111827; --border: #1f2937; }
.dark .rb-preview-wrap { --preview-bg: #0f172a; }

@media (max-width: 1023px) {
    .rb-container { flex-direction: column; max-width: none; }
    .rb-editor { width: 100%; border-right: none; border-bottom: 1px solid var(--border, #e5e7eb); padding: 20px 16px 100px; }
    .rb-preview-wrap { width: 100%; position: relative; top: 0; height: auto; min-height: 50vh; padding: 16px; }
}
@media (max-width: 640px) {
    .rb-editor { padding: 16px 12px 110px; }
}

/* ─── Editor Sections ─── */
.rb-section { margin-bottom: 24px; }
.rb-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.pagebreak-toggle { background: transparent; border: 1px solid #e5e7eb; color: #6b7280; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.pagebreak-toggle:hover { background: #f3f4f6; color: #111827; }
.pagebreak-toggle.active { background: var(--brand-neon-bg-strong); border-color: var(--brand-neon); color: var(--brand-neon); }
.dark .pagebreak-toggle { border-color: #374151; color: #9ca3af; }
.dark .pagebreak-toggle:hover { background: #1f2937; color: #f3f4f6; }
.rb-section-title { font-size: 15px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.dark .rb-section-title { color: #f3f4f6; }
.rb-section-desc { font-size: 12px; color: #6b7280; margin-bottom: 12px; line-height: 1.5; }
.dark .rb-section-desc { color: #9ca3af; }
.rb-divider { border: none; border-top: 1px solid #e5e7eb; margin: 20px 0; }
.dark .rb-divider { border-color: #374151; }

/* ─── Form ─── */
.rb-input { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 14px; background: #fff; color: #111827; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; }
.rb-input:focus { outline: none; border-color: var(--brand-neon); box-shadow: 0 0 0 3px var(--brand-neon-bg); }
.dark .rb-input { background: #1f2937; color: #f3f4f6; border-color: #374151; }
.dark .rb-input:focus { border-color: var(--brand-neon); box-shadow: 0 0 0 3px rgba(13,95,63,0.12); }
.rb-label { display: block; font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 2px; }
.dark .rb-label { color: #e5e7eb; }
.rb-helper { font-size: 11.5px; color: #6b7280; margin-bottom: 6px; line-height: 1.4; }
.dark .rb-helper { color: #9ca3af; }
.rb-field { margin-bottom: 16px; }
.rb-textarea { resize: vertical; min-height: 80px; }

/* ─── Score Gauge ─── */
.score-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.score-gauge { width: 56px; height: 56px; position: relative; flex-shrink: 0; }
.score-gauge svg { transform: rotate(-90deg); }
.score-gauge .track { fill: none; stroke: #e5e7eb; stroke-width: 5; }
.dark .score-gauge .track { stroke: #374151; }
.score-gauge .fill { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease, stroke 0.3s; }
.score-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #111827; }
.dark .score-value { color: #f3f4f6; }
.score-text h3 { font-size: 14px; font-weight: 700; color: #111827; margin: 0 0 2px; }
.dark .score-text h3 { color: #f3f4f6; }
.score-text p { font-size: 12px; color: #6b7280; margin: 0; }
.score-text { flex: 1; min-width: 0; }
.score-card { margin-bottom: 20px; }
.score-row { margin-bottom: 0; }
.score-toggle { flex-shrink: 0; background: transparent; border: 1px solid #e5e7eb; border-radius: 8px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: #6b7280; cursor: pointer; transition: transform 0.2s, background 0.15s; }
.score-toggle:hover { background: #f3f4f6; }
.dark .score-toggle { border-color: #374151; color: #9ca3af; }
.dark .score-toggle:hover { background: #1f2937; }
.score-card.expanded .score-toggle { transform: rotate(180deg); }
.score-breakdown { display: none; margin-top: 14px; padding: 12px 14px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; }
.dark .score-breakdown { background: rgba(31,41,55,0.5); border-color: #374151; }
.score-card.expanded .score-breakdown { display: block; }
.score-row-item { display: grid; grid-template-columns: 150px 1fr 48px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 12px; }
.score-row-item:last-child { margin-bottom: 0; }
.score-row-label { color: #374151; font-weight: 500; }
.dark .score-row-label { color: #d1d5db; }
.score-row-bar { height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.dark .score-row-bar { background: #374151; }
.score-row-bar-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.score-row-value { font-variant-numeric: tabular-nums; color: #6b7280; text-align: right; font-size: 11.5px; }
.dark .score-row-value { color: #9ca3af; }
@media (max-width: 640px) {
    .score-row-item { grid-template-columns: 100px 1fr 40px; gap: 6px; font-size: 11px; }
    .score-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 380px) {
    .score-row-item { grid-template-columns: 1fr auto; gap: 4px; }
    .score-row-bar { grid-column: 1 / -1; order: 3; }
}

/* ─── Skills Tags ─── */
.skill-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.skill-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-neon-bg-strong); color: var(--brand-neon-dim); padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; border: 1px solid rgba(13,95,63,0.2); }
.dark .skill-tag { background: rgba(13,95,63,0.1); color: var(--brand-neon); border-color: rgba(13,95,63,0.2); }
.skill-tag button { background: none; border: none; cursor: pointer; color: inherit; opacity: 0.7; font-size: 15px; line-height: 1; padding: 0 2px; }
.skill-tag button:hover { opacity: 1; }

/* ─── Entry Cards (summary) ─── */
.entry-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; }
.dark .entry-card { background: #1f2937; border-color: #374151; }
.entry-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-color: rgba(13,95,63,0.3); }
.dark .entry-card:hover { border-color: rgba(13,95,63,0.25); }
.entry-card.dragging { opacity: 0.5; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.drag-handle { cursor: grab; color: #9ca3af; user-select: none; flex-shrink: 0; touch-action: none; font-size: 16px; }
.drag-handle:active { cursor: grabbing; }
.entry-info { flex: 1; min-width: 0; }
.entry-title { font-weight: 600; font-size: 14px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark .entry-title { color: #f3f4f6; }
.entry-sub { font-size: 12px; color: #6b7280; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-edit-icon { color: #6b7280; flex-shrink: 0; }

/* ─── Add Entry Button ─── */
.add-entry-btn { background: none; border: 1px dashed #d1d5db; padding: 12px 16px; border-radius: 10px; color: var(--brand-neon-dim); font-weight: 500; font-size: 14px; cursor: pointer; width: 100%; text-align: center; transition: all 0.15s; }
.add-entry-btn:hover { border-color: var(--brand-neon); background: var(--brand-neon-bg); }
.dark .add-entry-btn { border-color: #374151; color: var(--brand-neon); }
.dark .add-entry-btn:hover { border-color: var(--brand-neon); background: rgba(13,95,63,0.06); }

/* ─── Template Selector ─── */
.template-btns { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.template-btn { flex: 1 1 calc(33% - 8px); min-width: 88px; padding: 10px 8px; border: 2px solid #e5e7eb; border-radius: 10px; background: #fff; color: #374151; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.15s; }
@media (max-width: 480px) { .template-btn { font-size: 12px; padding: 8px 6px; } }
.dark .template-btn { background: #1f2937; color: #d1d5db; border-color: #374151; }
.template-btn.active { border-color: var(--brand-neon); background: var(--brand-neon-bg); color: var(--brand-neon-dim); }
.dark .template-btn.active { border-color: var(--brand-neon); background: rgba(13,95,63,0.08); color: var(--brand-neon); }

/* ─── Color Picker ─── */
.color-dots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.color-dot { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all 0.15s; }
.color-dot:hover { transform: scale(1.15); }
.color-dot.active { border-color: var(--brand-neon); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-neon); }
.dark .color-dot.active { box-shadow: 0 0 0 2px #111827, 0 0 0 4px var(--brand-neon); }
.color-dot-custom {
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    border: 2px dashed #9ca3af; display: inline-flex; align-items: center; justify-content: center;
    color: #6b7280; position: relative; background: conic-gradient(from 0deg, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ef4444);
    transition: all 0.15s;
}
.color-dot-custom svg { color: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }
.color-dot-custom:hover { transform: scale(1.15); }
.dark .color-dot-custom { border-color: #4b5563; }

/* ─── AI Generate Button ─── */
.ai-gen-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; background: var(--brand-neon); color: #fff; font-size: 12px; font-weight: 700; border: none; cursor: pointer; transition: all 0.15s; }
.ai-gen-btn:hover { box-shadow: 0 2px 12px rgba(13,95,63,0.35); transform: translateY(-1px); }
.ai-gen-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ─── Sticky Footer ─── */
.rb-sticky-footer { position: fixed; bottom: 0; left: 0; width: 45%; height: 56px; background: #fff; border-top: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; z-index: 20; }
.dark .rb-sticky-footer { background: #111827; border-color: #1f2937; }
@media (max-width: 1023px) { .rb-sticky-footer { width: 100%; } }
@media (max-width: 900px) {
    /* Tablet & small laptop — let both footer halves wrap when they can't fit. */
    .rb-sticky-footer { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
    .footer-left, .footer-right { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 480px) {
    .rb-sticky-footer { padding: 8px 12px; gap: 6px; }
    .footer-right { width: 100%; justify-content: stretch; }
    .footer-right .footer-gen-btn,
    .footer-right .footer-dl-btn-group,
    .footer-right .footer-dl-btn { flex: 1; justify-content: center; font-size: 12px; padding: 8px 10px; }
    .footer-history-btn span { display: none; }
    .footer-history-btn { padding: 6px 8px; }
    .footer-save-indicator { font-size: 11px; }
}
.footer-left { display: flex; align-items: center; gap: 12px; }
.footer-right { display: flex; align-items: center; gap: 10px; }
.footer-save-indicator { font-size: 12px; color: #6b7280; display: flex; align-items: center; gap: 4px; }
.footer-save-indicator.saving { color: #f59e0b; }
.footer-save-indicator.saved { color: var(--brand-green); }
.footer-save-indicator.error { color: #ef4444; }
.footer-delete-btn { background: none; border: none; cursor: pointer; color: #9ca3af; padding: 8px; border-radius: 8px; transition: all 0.15s; }
.footer-delete-btn:hover { background: #fef2f2; color: #ef4444; }
.dark .footer-delete-btn:hover { background: #7f1d1d33; color: #ef4444; }
.footer-history-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: transparent; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.footer-history-btn:hover { background: #f3f4f6; color: #111827; }
.dark .footer-history-btn { color: #9ca3af; border-color: #374151; }
.dark .footer-history-btn:hover { background: #1f2937; color: #f3f4f6; }
.history-list { max-height: 360px; overflow-y: auto; }
.history-empty { text-align: center; color: #6b7280; font-size: 13px; padding: 24px 0; }
.dark .history-empty { color: #9ca3af; }
.history-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 8px; }
.dark .history-item { border-color: #374151; }
.history-item:last-child { margin-bottom: 0; }
.history-item-main { flex: 1; min-width: 0; }
.history-item-label { font-size: 13px; font-weight: 600; color: #111827; }
.dark .history-item-label { color: #f3f4f6; }
.history-item-date { font-size: 12px; color: #6b7280; margin-top: 2px; }
.dark .history-item-date { color: #9ca3af; }
.history-restore-btn { padding: 6px 14px; background: var(--brand-neon); color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.history-restore-btn:hover:not(:disabled) { background: var(--brand-neon-dim); }
.history-restore-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.footer-dl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; background: var(--brand-neon); color: #fff; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.footer-dl-btn:hover { background: var(--brand-neon-dim); box-shadow: 0 4px 14px rgba(13,95,63,0.25); }


/* ─── Entry Modal ─── */
.entry-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 50; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.entry-modal-overlay.open { display: flex; }
.dark .entry-modal-overlay { background: rgba(0,0,0,0.7); }
.entry-modal { background: #fff; border-radius: 16px; max-width: 580px; width: 100%; padding: 0; box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
.dark .entry-modal { background: #1f2937; }
.entry-modal-header { padding: 20px 24px 0; display: flex; align-items: flex-start; gap: 14px; }
.entry-modal-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--brand-neon-bg-strong); color: var(--brand-neon-dim); flex-shrink: 0; }
.dark .entry-modal-icon { background: rgba(13,95,63,0.1); color: var(--brand-neon); }
.entry-modal-header h3 { font-size: 16px; font-weight: 700; color: #111827; margin: 0 0 4px; }
.dark .entry-modal-header h3 { color: #f3f4f6; }
.entry-modal-header p { font-size: 13px; color: #6b7280; margin: 0; line-height: 1.4; }
.entry-modal-close { position: absolute; right: 20px; top: 20px; background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 20px; padding: 4px 8px; border-radius: 6px; }
.entry-modal-close:hover { background: #f3f4f6; color: #374151; }
.dark .entry-modal-close:hover { background: #374151; color: #d1d5db; }
.entry-modal-body { padding: 20px 24px; }
@media (max-width: 480px) { .entry-modal-body { padding: 16px; } .entry-modal-header { padding: 16px 16px 0; } .entry-modal-footer { padding: 12px 16px; } }
.entry-modal-footer { padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e5e7eb; }
.dark .entry-modal-footer { border-color: #374151; }
.modal-delete-btn { background: none; border: none; cursor: pointer; color: #ef4444; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 8px; }
.modal-delete-btn:hover { background: #fef2f2; }
.dark .modal-delete-btn:hover { background: #7f1d1d33; }
.modal-done-btn { padding: 8px 24px; background: var(--brand-neon); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.modal-done-btn:hover { background: var(--brand-neon-dim); box-shadow: 0 2px 10px rgba(13,95,63,0.3); }
.rb-grid-2m { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 500px) { .rb-grid-2m { grid-template-columns: 1fr; } }
.rb-checkbox-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.rb-checkbox-row label { font-size: 13px; color: #374151; cursor: pointer; }
.dark .rb-checkbox-row label { color: #d1d5db; }

/* ─── Preview Panel ─── */
.preview-paper { background: #fff; border-radius: 8px; box-shadow: 0 1px 10px rgba(0,0,0,0.08); flex: 1; overflow: auto; padding: 40px; max-width: 8.5in; margin: 0 auto; width: 100%; }
@media (max-width: 640px) {
    .preview-paper { padding: 20px; font-size: 12px; }
    /* Modern template is a 200px sidebar + main grid — collapse to single column on phones */
    .preview-paper .tpl-modern { grid-template-columns: 1fr !important; }
}
.dark .preview-paper { background: #1e293b; box-shadow: 0 1px 10px rgba(0,0,0,0.3); }
.preview-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }

/* ─── Back Link ─── */
.rb-back { display: inline-flex; align-items: center; gap: 6px; color: #6b7280; text-decoration: none; font-size: 14px; margin-bottom: 16px; transition: color 0.15s; }
.rb-back:hover { color: var(--brand-neon-dim); }
.dark .rb-back { color: #9ca3af; }
.dark .rb-back:hover { color: var(--brand-neon); }

/* ─── Harvard Template ─── */
/* Tailwind's base CSS resets `ul { list-style: none }` globally, which
   kills the dots inside every resume template. Restore disc bullets
   (and circles for nested lists) just for the preview content. */
.preview-paper ul,
[class*="tpl-"] ul { list-style: disc; }
.preview-paper ol,
[class*="tpl-"] ol { list-style: decimal; }
.preview-paper ul ul,
[class*="tpl-"] ul ul { list-style: circle; }

/* Page-break marker — styling targets both the live preview (a dashed
   separator) and print/PDF output (hard page break via CSS Paged Media). */
.tpl-page-break-before { page-break-before: always; break-before: page; }
.tpl-page-break-before::before {
    content: '— page break —';
    display: block;
    text-align: center;
    color: #9ca3af;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 18px 0 12px;
    padding-top: 12px;
    border-top: 1px dashed #d1d5db;
}
@media print {
    .tpl-page-break-before::before { display: none; }
}

.tpl-harvard { font-family: Georgia, 'Times New Roman', serif; color: #1a1a1a; line-height: 1.5; font-size: 13px; }
.dark .tpl-harvard { color: #e5e7eb; }
.tpl-harvard .tpl-name { text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.tpl-harvard .tpl-contact { text-align: center; font-size: 11px; color: #555; margin-bottom: 10px; }
.dark .tpl-harvard .tpl-contact { color: #9ca3af; }
.tpl-harvard .tpl-section-title { font-size: 14px; font-weight: 700; text-align: center; margin: 16px 0 8px; padding-bottom: 3px; border-bottom: 1.5px solid #333; }
.dark .tpl-harvard .tpl-section-title { border-color: #6b7280; }
.tpl-harvard .tpl-entry { margin-bottom: 12px; }
.tpl-harvard .tpl-entry-header { display: flex; justify-content: space-between; align-items: baseline; }
.tpl-harvard .tpl-entry-company { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; }
.tpl-harvard .tpl-entry-loc { font-size: 12px; color: #555; }
.dark .tpl-harvard .tpl-entry-loc { color: #9ca3af; }
.tpl-harvard .tpl-entry-title { font-size: 13px; }
.tpl-harvard .tpl-entry-date { font-size: 12px; color: #555; font-style: italic; }
.dark .tpl-harvard .tpl-entry-date { color: #9ca3af; }
.tpl-harvard .tpl-entry-sub { font-style: italic; color: #444; font-size: 12px; }
.dark .tpl-harvard .tpl-entry-sub { color: #9ca3af; }
.tpl-harvard .tpl-entry-desc { font-size: 12px; margin-top: 4px; }
.tpl-harvard .tpl-skills-list { font-size: 12px; margin-top: 4px; }
.tpl-harvard .tpl-summary { font-size: 12px; margin-top: 4px; margin-bottom: 4px; }
.tpl-harvard ul { padding-left: 18px; margin: 4px 0; }
.tpl-harvard li { font-size: 12px; margin-bottom: 2px; }

/* ─── Simple Template ─── */
.tpl-simple { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #111; line-height: 1.55; font-size: 13px; }
.dark .tpl-simple { color: #e5e7eb; }
.tpl-simple .tpl-name { font-size: 26px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.3px; }
.tpl-simple .tpl-summary { font-size: 13px; color: #444; margin-bottom: 14px; line-height: 1.6; }
.dark .tpl-simple .tpl-summary { color: #9ca3af; }
.tpl-simple .tpl-contact-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: #555; margin-bottom: 18px; }
.dark .tpl-simple .tpl-contact-row { color: #9ca3af; }
.tpl-simple .tpl-contact-item { display: inline-flex; align-items: center; gap: 5px; }
.tpl-simple .tpl-contact-item svg { color: #6b7280; flex-shrink: 0; }
.dark .tpl-simple .tpl-contact-item svg { color: #9ca3af; }
.tpl-simple .tpl-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin: 18px 0 10px; padding-bottom: 5px; border-bottom: 1.5px solid #d1d5db; }
.dark .tpl-simple .tpl-section-title { border-color: #374151; }
.tpl-simple .tpl-entry-row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; margin-bottom: 14px; }
.tpl-simple .tpl-entry-date-col { font-size: 12px; color: #6b7280; padding-top: 1px; white-space: nowrap; }
.dark .tpl-simple .tpl-entry-date-col { color: #9ca3af; }
.tpl-simple .tpl-entry-detail { min-width: 0; }
.tpl-simple .tpl-entry { margin-bottom: 14px; }
/* Shared section renderers (projects/awards/certs/volunteer/custom) use
   .tpl-entry-header; Simple's primary experience layout uses .tpl-entry-row
   instead, so this only kicks in for those extras. */
.tpl-simple .tpl-entry-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tpl-simple .tpl-entry-date { font-size: 12px; color: #6b7280; white-space: nowrap; }
.dark .tpl-simple .tpl-entry-date { color: #9ca3af; }
.tpl-simple .tpl-entry-title { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; }
.tpl-simple .tpl-entry-sub { font-size: 12px; color: #555; margin-top: 1px; }
.dark .tpl-simple .tpl-entry-sub { color: #9ca3af; }
.tpl-simple .tpl-skill-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tpl-simple .tpl-skill-pill { background: #f3f4f6; color: #374151; padding: 4px 12px; border-radius: 6px; font-size: 12px; border: 1px solid #e5e7eb; }
.dark .tpl-simple .tpl-skill-pill { background: #374151; color: #d1d5db; border-color: #4b5563; }
.tpl-simple ul { padding-left: 18px; margin: 4px 0; }
.tpl-simple li { font-size: 12px; margin-bottom: 2px; }

/* ─── Modern Template ─── */
.tpl-modern { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; display: grid; grid-template-columns: 200px 1fr; min-height: 100%; font-size: 13px; line-height: 1.5; }
.tpl-modern .tpl-sidebar { background: var(--accent, #1e3a5f); color: #fff; padding: 28px 18px; }
.tpl-modern .tpl-main { padding: 28px 24px; color: #111; }
.dark .tpl-modern .tpl-main { color: #e5e7eb; }
.tpl-modern .tpl-sidebar-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; margin-top: 18px; opacity: 0.8; }
.tpl-modern .tpl-sidebar-title:first-child { margin-top: 0; }
.tpl-modern .tpl-sidebar-item { font-size: 12px; margin-bottom: 4px; opacity: 0.95; word-break: break-all; }
.tpl-modern .tpl-name { font-size: 22px; font-weight: 700; margin-bottom: 2px; }
.tpl-modern .tpl-location { font-size: 12px; color: #666; margin-bottom: 10px; }
.dark .tpl-modern .tpl-location { color: #9ca3af; }
.tpl-modern .tpl-summary { font-size: 12px; color: #444; margin-bottom: 16px; }
.dark .tpl-modern .tpl-summary { color: #9ca3af; }
.tpl-modern .tpl-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 2px solid #e5e7eb; }
.dark .tpl-modern .tpl-section-title { border-color: #374151; }
.tpl-modern .tpl-entry { margin-bottom: 12px; }
.tpl-modern .tpl-entry-header { display: flex; justify-content: space-between; }
.tpl-modern .tpl-entry-title { font-weight: 700; font-size: 13px; }
.tpl-modern .tpl-entry-date { font-size: 12px; color: #888; }
.dark .tpl-modern .tpl-entry-date { color: #6b7280; }
.tpl-modern .tpl-entry-sub { font-size: 12px; color: #666; }
.dark .tpl-modern .tpl-entry-sub { color: #9ca3af; }
.tpl-modern ul { padding-left: 18px; margin: 4px 0; }
.tpl-modern li { font-size: 12px; margin-bottom: 2px; }

/* ─── Classic ─── */
.tpl-classic { font-family: 'Times New Roman', Georgia, serif; color: #1a1a1a; line-height: 1.55; font-size: 13px; }
.dark .tpl-classic { color: #e5e7eb; }
.tpl-classic .tpl-name { text-align: center; font-size: 24px; font-weight: 700; letter-spacing: 1px; margin-bottom: 4px; }
.tpl-classic .tpl-contact { text-align: center; font-size: 11.5px; color: #444; margin-bottom: 14px; font-style: italic; }
.dark .tpl-classic .tpl-contact { color: #9ca3af; }
.tpl-classic .tpl-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin: 18px 0 8px; padding-bottom: 2px; border-bottom: 2px solid #1a1a1a; text-align: center; }
.dark .tpl-classic .tpl-section-title { border-color: #9ca3af; }
.tpl-classic .tpl-entry { margin-bottom: 12px; }
.tpl-classic .tpl-entry-header { display: flex; justify-content: space-between; align-items: baseline; }
.tpl-classic .tpl-entry-title { font-weight: 700; font-size: 13px; }
.tpl-classic .tpl-entry-sub { font-style: italic; font-size: 12px; color: #555; }
.dark .tpl-classic .tpl-entry-sub { color: #9ca3af; }
.tpl-classic .tpl-entry-date { font-size: 12px; color: #555; }
.dark .tpl-classic .tpl-entry-date { color: #9ca3af; }
.tpl-classic ul { padding-left: 18px; margin: 4px 0; }
.tpl-classic li { font-size: 12.5px; margin-bottom: 2px; }

/* ─── Creative ─── */
.tpl-creative { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #1f2937; line-height: 1.55; font-size: 13px; }
.dark .tpl-creative { color: #e5e7eb; }
.tpl-creative .tpl-creative-header { padding: 10px 0 10px 14px; margin-bottom: 10px; }
.tpl-creative .tpl-name { font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.tpl-creative .tpl-contact { font-size: 11px; color: #6b7280; }
.dark .tpl-creative .tpl-contact { color: #9ca3af; }
.tpl-creative .tpl-section-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin: 18px 0 8px; }
.tpl-creative .tpl-entry { margin-bottom: 14px; }
.tpl-creative .tpl-entry-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tpl-creative .tpl-entry-date { font-size: 12px; color: #6b7280; white-space: nowrap; }
.dark .tpl-creative .tpl-entry-date { color: #9ca3af; }
.tpl-creative .tpl-entry-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.tpl-creative .tpl-entry-sub { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.dark .tpl-creative .tpl-entry-sub { color: #9ca3af; }
.tpl-creative .tpl-skill-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-creative .tpl-skill-pill { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.tpl-creative ul { padding-left: 18px; margin: 4px 0; }
.tpl-creative li { font-size: 12.5px; margin-bottom: 2px; }

/* ─── Minimal ─── */
.tpl-minimal { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #111827; line-height: 1.6; font-size: 13px; }
.dark .tpl-minimal { color: #e5e7eb; }
.tpl-minimal .tpl-name { font-size: 20px; margin-bottom: 6px; }
.tpl-minimal .tpl-contact { font-size: 11px; margin-bottom: 14px; }
.tpl-minimal .tpl-section-title { color: #111827; font-weight: 700; margin: 18px 0 8px; border: none; padding: 0; }
.dark .tpl-minimal .tpl-section-title { color: #f3f4f6; }
.tpl-minimal .tpl-entry { margin-bottom: 12px; padding-left: 0; }
.tpl-minimal .tpl-entry-header { display: flex; justify-content: space-between; align-items: baseline; }
.tpl-minimal .tpl-entry-title { font-weight: 600; font-size: 13.5px; }
.tpl-minimal .tpl-entry-sub { font-size: 12px; margin-bottom: 2px; }
.tpl-minimal .tpl-entry-date { font-size: 11.5px; color: #9ca3af; font-variant-numeric: tabular-nums; }
.tpl-minimal ul { padding-left: 18px; margin: 4px 0; }
.tpl-minimal li { font-size: 12.5px; margin-bottom: 2px; }



/* ── Summary Studio (Pro) ────────────────────────────────────────── */
.ai-gen-btn--pro { background: linear-gradient(135deg, var(--brand-neon, #0D5F3F), #7c3aed); position: relative; }
.ai-gen-btn--pro:hover { box-shadow: 0 2px 14px rgba(124, 58, 237, 0.32); }
.ai-gen-pro-pill { display: inline-flex; align-items: center; padding: 1px 6px; margin-left: 4px; background: rgba(255,255,255,0.18); color: #fff; border-radius: 9999px; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; }

.ss-overlay { position: fixed; inset: 0; z-index: 9500; background: rgba(15,23,42,0.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: ss-fade .18s ease-out; }
.ss-card { background: #fff; color: #0f172a; width: min(900px, 100%); max-height: 90vh; overflow-y: auto; border-radius: 16px; padding: 1.5rem; box-shadow: 0 24px 60px rgba(15,23,42,0.25); position: relative; }
.dark .ss-card { background: #1f2937; color: #f8fafc; }
.ss-close { position: absolute; top: .85rem; right: .95rem; background: none; border: 0; color: #94a3b8; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: .15rem; border-radius: 6px; }
.ss-close:hover { color: #0f172a; background: #f1f5f9; }
.dark .ss-close:hover { color: #f8fafc; background: #374151; }
.ss-head { margin-bottom: 1rem; padding-right: 2rem; }
.ss-head h3 { margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 700; }
.ss-head p { margin: 0; color: #64748b; font-size: .9rem; }
.dark .ss-head p { color: #cbd5e1; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .85rem; }
.ss-variant { display: flex; flex-direction: column; gap: .55rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.dark .ss-variant { border-color: #4b5563; background: #111827; }
.ss-variant-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ss-variant-label { margin: 0; font-weight: 700; font-size: .92rem; }
.ss-variant-sub { margin: .15rem 0 0; color: #64748b; font-size: .76rem; }
.dark .ss-variant-sub { color: #cbd5e1; }
.ss-variant-len { font-size: .68rem; color: #94a3b8; flex: 0 0 auto; padding: .15rem .45rem; border-radius: 9999px; background: #fff; border: 1px solid #e2e8f0; }
.dark .ss-variant-len { background: #1f2937; border-color: #4b5563; }
.ss-variant-text { margin: 0; flex: 1; font-size: .88rem; line-height: 1.5; color: #0f172a; white-space: pre-wrap; }
.dark .ss-variant-text { color: #e2e8f0; }
.ss-variant-use { margin-top: .35rem; padding: .55rem .8rem; border: 0; border-radius: 8px; background: var(--brand-neon, #0D5F3F); color: #fff; font-weight: 600; font-size: .85rem; cursor: pointer; transition: background-color .12s; }
.ss-variant-use:hover { background: #0B4E34; }

@keyframes ss-fade { from { opacity: 0 } to { opacity: 1 } }

/* ── Bullet Coach (Pro) ──────────────────────────────────────────── */
.bc-modal { max-width: 720px; }
.bc-empty { padding: 1.25rem; text-align: center; color: #64748b; font-size: .9rem; border: 1px dashed #e2e8f0; border-radius: 12px; }
.dark .bc-empty { color: #cbd5e1; border-color: #4b5563; }
.bc-rows { display: flex; flex-direction: column; gap: .65rem; }
.bc-row { border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; transition: border-color .15s, background-color .15s; }
.dark .bc-row { border-color: #4b5563; background: #111827; }
.bc-row--accepted { border-color: var(--brand-neon, #0D5F3F); background: rgba(13, 95, 63, 0.04); }
.bc-row-current { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding: .75rem .85rem; }
.bc-row-num { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 9999px; background: #e2e8f0; color: #475569; font-size: .72rem; font-weight: 700; flex: 0 0 auto; }
.dark .bc-row-num { background: #374151; color: #cbd5e1; }
.bc-row-text { margin: 0; font-size: .9rem; line-height: 1.45; color: #0f172a; word-break: break-word; }
.dark .bc-row-text { color: #e2e8f0; }
.bc-row-improve { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border-radius: 8px; border: 1px solid var(--brand-neon, #0D5F3F); background: #fff; color: var(--brand-neon, #0D5F3F); font-size: .78rem; font-weight: 600; cursor: pointer; flex: 0 0 auto; transition: background-color .12s; }
.bc-row-improve:hover:not(:disabled) { background: rgba(13, 95, 63, 0.08); }
.bc-row-improve:disabled { opacity: .6; cursor: not-allowed; }
.dark .bc-row-improve { background: transparent; }
.dark .bc-row-improve:hover:not(:disabled) { background: rgba(13, 95, 63, 0.18); }

.bc-row-diff { padding: 0 .85rem .85rem; }
.bc-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .5rem; }
.bc-diff-side { padding: .55rem .65rem; border-radius: 10px; }
.bc-diff-side:first-child { background: rgba(148, 163, 184, 0.15); }
.bc-diff-side:last-child { background: rgba(13, 95, 63, 0.1); border: 1px solid rgba(13, 95, 63, 0.25); }
.bc-diff-label { margin: 0 0 .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.dark .bc-diff-label { color: #cbd5e1; }
.bc-diff-text { margin: 0; font-size: .85rem; line-height: 1.45; color: #0f172a; }
.dark .bc-diff-text { color: #e2e8f0; }
.bc-diff-text--orig { text-decoration: line-through; color: #64748b; }
.dark .bc-diff-text--orig { color: #94a3b8; }
.bc-metric-hint { margin: .55rem 0 0; padding: .5rem .65rem; border-radius: 8px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.35); color: #92400e; font-size: .78rem; }
.dark .bc-metric-hint { color: #fbbf24; }
.bc-diff-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; }
.bc-btn { padding: .35rem .7rem; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; font-size: .78rem; font-weight: 600; cursor: pointer; transition: background-color .12s, border-color .12s; }
.dark .bc-btn { background: #1f2937; border-color: #4b5563; color: #e2e8f0; }
.bc-btn--accept { background: var(--brand-neon, #0D5F3F); color: #fff; border-color: var(--brand-neon, #0D5F3F); }
.bc-btn--accept:hover { background: #0B4E34; }
.bc-btn--regen { color: var(--brand-neon, #0D5F3F); border-color: var(--brand-neon, #0D5F3F); }
.bc-btn--reject { color: #b91c1c; border-color: rgba(185, 28, 28, 0.4); }
.bc-btn--reject:hover { background: rgba(185, 28, 28, 0.06); }
@media (max-width: 540px) {
    .bc-diff-grid { grid-template-columns: 1fr; }
}

/* ── JD Match Score (Pro) ───────────────────────────────────────── */
.jdm-launcher { display: inline-flex; margin: 0 0 .85rem; }
.jdm-modal { max-width: 720px; }

.jdm-results { display: flex; flex-direction: column; gap: .35rem; margin-top: .65rem; max-height: 360px; overflow-y: auto; }
.jdm-result { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .65rem .8rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; cursor: pointer; text-align: left; transition: border-color .12s, background-color .12s; }
.dark .jdm-result { background: #1f2937; border-color: #4b5563; color: #e2e8f0; }
.jdm-result:hover { border-color: var(--brand-neon, #0D5F3F); background: rgba(13, 95, 63, 0.04); }
.dark .jdm-result:hover { background: rgba(13, 95, 63, 0.18); }
.jdm-result-title { font-size: .92rem; font-weight: 600; color: #0f172a; }
.dark .jdm-result-title { color: #f8fafc; }
.jdm-result-meta { font-size: .8rem; color: #64748b; }
.dark .jdm-result-meta { color: #cbd5e1; }
.jdm-chip { display: inline-block; padding: .1rem .45rem; border-radius: 9999px; background: var(--rw-accent-light, #ECFDF5); color: var(--rw-accent, #0D5F3F); font-size: .68rem; font-weight: 600; }
.dark .jdm-chip { background: rgba(13, 95, 63, 0.22); color: #6ee7b7; }
.jdm-empty { padding: .85rem; text-align: center; color: #64748b; font-size: .85rem; }
.dark .jdm-empty { color: #cbd5e1; }

.jdm-loading { padding: 1rem 0; }
.jdm-skel { height: .9rem; border-radius: 6px; margin-bottom: .55rem; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: jdm-skel 1.4s ease-in-out infinite; }
.dark .jdm-skel { background: linear-gradient(90deg, #374151 0%, #4b5563 50%, #374151 100%); background-size: 200% 100%; }
.jdm-loading-msg { margin-top: .85rem; text-align: center; color: #64748b; font-size: .85rem; }
@keyframes jdm-skel { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

.jdm-score-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: 14px; background: linear-gradient(135deg, rgba(13,95,63,0.05), rgba(124,58,237,0.05)); border: 1px solid rgba(13,95,63,0.2); margin-bottom: 1rem; }
.jdm-tier-mid .jdm-score-row { background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(245,158,11,0.02)); border-color: rgba(245,158,11,0.35); }
.jdm-tier-low .jdm-score-row { background: linear-gradient(135deg, rgba(239,68,68,0.05), rgba(239,68,68,0.02)); border-color: rgba(239,68,68,0.3); }
.jdm-gauge { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.jdm-gauge svg { transform: rotate(-90deg); }
.jdm-gauge-track { fill: none; stroke: rgba(15,23,42,0.08); stroke-width: 8; }
.dark .jdm-gauge-track { stroke: rgba(255,255,255,0.12); }
.jdm-gauge-fill { fill: none; stroke: var(--brand-neon, #0D5F3F); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.22,1,.36,1); }
.jdm-tier-mid .jdm-gauge-fill { stroke: #f59e0b; }
.jdm-tier-low .jdm-gauge-fill { stroke: #ef4444; }
.jdm-gauge-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.dark .jdm-gauge-value { color: #f8fafc; }
.jdm-score-text { flex: 1; min-width: 0; }
.jdm-score-job { margin: 0; font-weight: 700; font-size: .95rem; color: #0f172a; }
.dark .jdm-score-job { color: #f8fafc; }
.jdm-score-summary { margin: .25rem 0 0; font-size: .85rem; color: #475569; line-height: 1.45; }
.dark .jdm-score-summary { color: #cbd5e1; }

.jdm-section { margin-bottom: 1rem; }
.jdm-section:last-child { margin-bottom: 0; }
.jdm-section-title { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; margin: 0 0 .5rem; }
.dark .jdm-section-title { color: #cbd5e1; }
.jdm-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .35rem; font-size: .88rem; color: #0f172a; line-height: 1.5; }
.dark .jdm-list { color: #e2e8f0; }
.jdm-list--numbered { list-style: decimal; }
.jdm-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.jdm-keyword { display: inline-flex; align-items: center; padding: .25rem .55rem; border-radius: 9999px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.35); color: #92400e; font-size: .78rem; font-weight: 500; }
.dark .jdm-keyword { color: #fbbf24; }

@media (max-width: 540px) {
    .jdm-score-row { flex-direction: column; text-align: center; align-items: stretch; }
    .jdm-gauge { margin: 0 auto; }
}

/* JD Match — tabs + paste mode */
.jdm-tabs { display: flex; gap: .35rem; padding: .25rem; background: #f1f5f9; border-radius: 10px; margin-bottom: .85rem; }
.dark .jdm-tabs { background: #1f2937; }
.jdm-tab { flex: 1; padding: .55rem .85rem; border: 0; background: transparent; color: #64748b; font-size: .85rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background-color .12s, color .12s; }
.dark .jdm-tab { color: #cbd5e1; }
.jdm-tab:hover { color: #0f172a; }
.dark .jdm-tab:hover { color: #f8fafc; }
.jdm-tab.is-active { background: #fff; color: var(--brand-neon, #0D5F3F); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.dark .jdm-tab.is-active { background: #374151; color: #6ee7b7; }
.jdm-paste-foot { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-top: .65rem; flex-wrap: wrap; }
.jdm-paste-count { font-size: .75rem; color: #64748b; }
.dark .jdm-paste-count { color: #cbd5e1; }

/* JD Match — Tailor button is the bridge to D.6's resume-cloning
   flow; gradient styling marks it as the Pro upgrade path within
   the result modal. */
.jdm-tailor-btn { background: linear-gradient(135deg, var(--brand-neon, #0D5F3F), #7c3aed) !important; color: #fff !important; }
.jdm-tailor-btn:disabled { opacity: 0.7; cursor: progress; }

/* ─── Anon marketing landing ───────────────────────────────────────
 *
 * Seven sections rendered for logged-out visitors:
 *   1. Hero (handled by existing .tl-hero-* styles above)
 *   2. .rb-gallery-*       — career filter pills + 6-template grid
 *   3. .rb-archetype-rail  — career chips reassurance line
 *   4. .rb-compare-*       — AI bullet before/after rail
 *   5. .rb-ats-proof       — cross-link card to /tools/resume-checker
 *   6. .rb-howto-*         — three-step tile grid (existing classes)
 *   7. .rb-faq-*           — native <details> accordion
 *   + .rb-final-cta        — closing call to action
 *   + .rb-lightbox-*       — native <dialog> for thumbnail enlargement
 *
 * All theme-aware via --rw-* variables. Pure CSS for the gallery
 * filter (visibility toggled by a `data-active` attribute on the
 * gallery root that the landing JS updates).
 * ──────────────────────────────────────────────────────────────── */

/* Marketing-landing section wrapper. Renamed from .rb-section
   (which the editor uses for its form sections with margin-bottom: 24px)
   so the two namespaces don't collide. */
.rb-marketing-section { padding: clamp(2rem, 5vw, 4rem) 0; }
.rb-marketing-section + .rb-marketing-section { padding-top: 0; }

/* Marketing-landing section heads. Renamed from .rb-section-* (which
   the editor uses for tight 15px form-section labels) so the two
   namespaces don't collide. */
.rb-marketing-head {
    text-align: center;
    margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
    max-width: 42rem;
}

.rb-marketing-title {
    font-family: 'Inter Tight', Inter, sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--rw-text);
    margin: 0.4rem 0 0.5rem;
}

.rb-marketing-sub {
    color: var(--rw-text-muted, var(--rw-muted));
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.55;
    margin: 0;
}

/* ─── 1. Template gallery ─────────────────────────────────────── */

.rb-gallery {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.rb-gallery-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.rb-gallery-pill {
    background-color: var(--rw-card-bg);
    border: 1px solid var(--rw-border);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rw-text);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.rb-gallery-pill:hover {
    border-color: var(--rw-accent);
    color: var(--rw-accent);
}

.rb-gallery-pill--active {
    background-color: var(--rw-accent);
    color: #ffffff;
    border-color: var(--rw-accent);
}

.rb-gallery-pill--active:hover {
    background-color: var(--rw-accent-hover);
    color: #ffffff;
}

.rb-gallery-pill:focus-visible {
    outline: 2px solid var(--rw-accent);
    outline-offset: 3px;
}

/* Gallery sizing rationale: a real resume is designed for ~800px
   content width. Rendering the source at 800×1100 then shrinking
   the displayed card below ~520px CSS-px wide makes 13px source
   text shrink past the legibility threshold (≈10 display px). So:
     <720px : 1-up (single full-width card)
     ≥720px : 2-up (cards ~520-620px wide, body text readable)
     ≥1600px: 3-up (only when there's room without sacrificing
                    per-card width; gallery still feels rich)
*/
.rb-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 90rem;
    margin: 0 auto;
}

@media (min-width: 720px) {
    .rb-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (min-width: 1600px) {
    .rb-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

.rb-gallery-grid--hidden { display: none; }

.rb-gallery-card {
    background: var(--rw-card-bg);
    border: 1px solid var(--rw-border);
    border-radius: 1rem;
    padding: 0.85rem;
    cursor: zoom-in;
    overflow: hidden;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.rb-gallery-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--rw-shadow-md);
    border-color: var(--rw-accent);
}

.rb-gallery-card:focus-visible {
    outline: 2px solid var(--rw-accent);
    outline-offset: 4px;
}

.rb-gallery-card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 800 / 1100;
    border-radius: 0.6rem;
    overflow: hidden;
    background-color: var(--rw-bg);
    border: 1px solid var(--rw-border);
}

.rb-gallery-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.4s ease;
}

.rb-gallery-card:hover .rb-gallery-card-thumb img {
    transform: scale(1.025);
}

.rb-gallery-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.4rem 0.25rem;
    gap: 0.5rem;
}

.rb-gallery-card-name {
    font-family: 'Inter Tight', Inter, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--rw-text);
}

.rb-gallery-card-cta {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rw-accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.rb-gallery-card:hover .rb-gallery-card-cta,
.rb-gallery-card:focus-visible .rb-gallery-card-cta {
    opacity: 1;
    transform: translateX(0);
}

/* ─── Lightbox ───────────────────────────────────────────────── */

.rb-lightbox {
    border: 0;
    padding: 0;
    background-color: transparent;
    color: #fff;
    max-width: min(92vw, 56rem);
    max-height: 92vh;
    overflow: visible;
}

.rb-lightbox::backdrop {
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.rb-lightbox-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.rb-lightbox-img {
    max-width: 100%;
    max-height: 78vh;
    border-radius: 0.85rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    background-color: #000;
}

.rb-lightbox-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.rb-lightbox-caption {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rb-lightbox-cta {
    background-color: var(--rw-accent);
    color: #ffffff;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.65rem 1.25rem;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.12s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rb-lightbox-cta:hover {
    background-color: var(--rw-accent-hover);
    transform: translateY(-1px);
}

.rb-lightbox-close {
    position: absolute;
    top: -1.4rem;
    right: -1.4rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.rb-lightbox-close:hover { background-color: rgba(255, 255, 255, 0.32); }

@media (max-width: 720px) {
    .rb-lightbox-close { top: 0.5rem; right: 0.5rem; }
}

/* ─── 2. Archetype reassurance rail ──────────────────────────── */

.rb-archetype-rail {
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
    text-align: center;
}

.rb-archetype-rail-prompt {
    color: var(--rw-text-muted, var(--rw-muted));
    font-size: 0.9rem;
    margin: 0 0 0.6rem;
    letter-spacing: 0.02em;
}

.rb-archetype-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.rb-archetype-chip {
    background-color: var(--rw-accent-light);
    color: var(--rw-accent);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ─── 3. AI compare rail ─────────────────────────────────────── */

.rb-compare-section { background-color: var(--rw-bg); }

.rb-compare-rail {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 64rem;
    margin: 0 auto;
}

.rb-compare-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
    background-color: var(--rw-card-bg);
    border: 1px solid var(--rw-border);
    border-radius: 0.85rem;
    box-shadow: var(--rw-shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (min-width: 720px) {
    .rb-compare-card { grid-template-columns: 1fr 2.5rem 1fr; align-items: stretch; }
}

.rb-compare-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rw-shadow-md);
}

.rb-compare-side {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 0.6rem;
}

.rb-compare-side--before {
    background-color: var(--rw-bg);
    border: 1px solid var(--rw-border);
}

.rb-compare-side--after {
    background-color: var(--rw-accent-light);
    border: 1px solid var(--rw-accent);
}

.rb-compare-tag {
    align-self: flex-start;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
}

.rb-compare-tag--before { background-color: var(--rw-border); color: var(--rw-text-muted, var(--rw-muted)); }
.rb-compare-tag--after  { background-color: var(--rw-accent); color: #fff; }

.rb-compare-text {
    margin: 0;
    color: var(--rw-text);
    font-size: 0.95rem;
    line-height: 1.55;
}

.rb-compare-side--before .rb-compare-text {
    color: var(--rw-text-muted, var(--rw-muted));
}

.rb-compare-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--rw-accent);
    font-size: 1.4rem;
    font-weight: 700;
}

@media (min-width: 720px) { .rb-compare-arrow { display: flex; } }

/* ─── 4. ATS-proof cross-link card ───────────────────────────── */

.rb-ats-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background-color: var(--rw-accent-light);
    border: 1px solid var(--rw-accent);
    border-radius: 1rem;
    max-width: 56rem;
    margin: 0 auto;
}

@media (max-width: 720px) {
    .rb-ats-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.rb-ats-icon {
    color: var(--rw-accent);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--rw-card-bg);
    border: 1px solid var(--rw-accent);
}

@media (max-width: 720px) {
    .rb-ats-icon { margin: 0 auto; }
}

.rb-ats-title {
    font-family: 'Inter Tight', Inter, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rw-text);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.rb-ats-sub {
    margin: 0;
    color: var(--rw-text);
    opacity: 0.85;
    font-size: 0.92rem;
    line-height: 1.5;
}

.rb-ats-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--rw-accent);
    font-weight: 700;
    text-decoration: none;
    padding: 0.6rem 1rem;
    background-color: var(--rw-card-bg);
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, transform 0.12s ease;
    white-space: nowrap;
}

.rb-ats-link:hover {
    background-color: var(--rw-accent);
    color: #ffffff;
    transform: translateY(-1px);
}

/* ─── 5. How-it-works (refresh of existing tiles) ────────────── */

.rb-howto-section { background-color: var(--rw-bg); }

/* The .rb-howto-grid + .rb-howto-tile + .rb-howto-num + .rb-howto-title
   + .rb-howto-desc are already defined inline in the EJS <style>
   block at the top of the page. We only need to re-apply the section
   wrapper background here. The tile classes already carry their own
   visuals from the <style> block. */

/* ─── 6. FAQ accordion (native <details>) ────────────────────── */

.rb-faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rw-border);
}

.rb-faq-item { border-bottom: 1px solid var(--rw-border); }

.rb-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 2rem 1.1rem 0.25rem;
    font-family: 'Inter Tight', Inter, sans-serif;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    font-weight: 600;
    color: var(--rw-text);
    line-height: 1.4;
    position: relative;
    transition: color 0.15s ease;
}

.rb-faq-item summary::-webkit-details-marker { display: none; }
.rb-faq-item summary::marker { content: ''; }

.rb-faq-item summary:hover { color: var(--rw-accent); }
.rb-faq-item summary:focus-visible {
    outline: 2px solid var(--rw-accent);
    outline-offset: 4px;
    border-radius: 0.25rem;
}

.rb-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--rw-accent);
    line-height: 1;
    transition: transform 0.18s ease;
}

.rb-faq-item details[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.rb-faq-answer {
    padding: 0 0 1.25rem 0.25rem;
    color: var(--rw-text-muted, var(--rw-muted));
    font-size: clamp(0.95rem, 1.1vw, 1rem);
    line-height: 1.65;
    max-width: 56ch;
}

/* ─── 7. Final CTA ───────────────────────────────────────────── */

.rb-final-cta {
    text-align: center;
    background-color: var(--rw-accent-light);
}

.rb-final-cta-title {
    font-family: 'Inter Tight', Inter, sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--rw-text);
    margin: 0 0 0.5rem;
}

.rb-final-cta-sub {
    color: var(--rw-text-muted, var(--rw-muted));
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.55;
    margin: 0 0 1.5rem;
}

.rb-final-cta-btn {
    font-size: 1.05rem;
    padding: 0.95rem 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .rb-gallery-pill,
    .rb-gallery-card,
    .rb-gallery-card-thumb img,
    .rb-gallery-card-cta,
    .rb-compare-card,
    .rb-ats-link,
    .rb-faq-item summary,
    .rb-faq-item summary::after,
    .rb-lightbox-cta,
    .rb-lightbox-close {
        transition: none;
    }
    .rb-gallery-card:hover,
    .rb-compare-card:hover,
    .rb-ats-link:hover,
    .rb-lightbox-cta:hover {
        transform: none;
    }
    .rb-gallery-card:hover .rb-gallery-card-thumb img {
        transform: none;
    }
}

/* ─── Post-export rating prompt (editor only) ──────────────────────
 *
 * Floating panel anchored above the sticky footer. Shown by
 * post-export-rating.js after the user clicks Download PDF / DOCX.
 * Compact card with 5 stars, dismiss button, inline status.
 *
 * Positioned so it sits above the .rb-sticky-footer (which is
 * fixed bottom: 0). On mobile we widen to fill viewport minus a
 * 0.85rem gutter; on desktop we anchor right with a max-width.
 * ──────────────────────────────────────────────────────────────── */

.rb-postexport-rating {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--rb-sticky-footer-height, 72px) + 1rem);
    width: calc(100% - 2rem);
    max-width: 24rem;
    z-index: 60;
    background-color: var(--rw-card-bg, #ffffff);
    border: 1px solid var(--rw-border, #e5e5e0);
    border-radius: 0.85rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 0.95rem 1.1rem 1rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.rb-postexport-rating--visible {
    opacity: 1;
    transform: translateY(0);
}

.rb-postexport-rating[hidden] { display: none; }

.dark .rb-postexport-rating {
    background-color: #1f2937;
    border-color: #374151;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.rb-postexport-rating-close {
    position: absolute;
    top: 0.5rem;
    right: 0.55rem;
    background: transparent;
    border: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    color: var(--rw-text-muted, #6b6b6b);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.rb-postexport-rating-close:hover {
    background-color: var(--rw-bg, #fafaf7);
    color: var(--rw-text, #0a0a0a);
}

.dark .rb-postexport-rating-close { color: #9ca3af; }
.dark .rb-postexport-rating-close:hover { background-color: #111827; color: #e5e7eb; }

.rb-postexport-rating-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-right: 1.5rem;
}

.rb-postexport-rating-prompt {
    margin: 0;
    font-family: 'Inter Tight', Inter, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--rw-text, #0a0a0a);
    line-height: 1.35;
}

.dark .rb-postexport-rating-prompt { color: #e5e7eb; }

.rb-postexport-rating-stars {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.rb-postexport-rating-star {
    background: transparent;
    border: 0;
    padding: 0.2rem;
    cursor: pointer;
    line-height: 0;
    color: var(--rw-border, #e5e5e0);
    transition: color 0.15s ease, transform 0.12s ease;
}

.rb-postexport-rating-star-icon {
    width: 1.55rem;
    height: 1.55rem;
    fill: currentColor;
    stroke: none;
}

.rb-postexport-rating-star:focus-visible {
    outline: 2px solid var(--rw-accent, #0D5F3F);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.rb-postexport-rating-star--filled {
    color: var(--rw-accent, #0D5F3F);
    transform: translateY(-1px);
}

.rb-postexport-rating-status {
    margin: 0;
    color: var(--rw-text-muted, #6b6b6b);
    font-size: 0.82rem;
    line-height: 1.4;
    min-height: 1.2em;
}

.rb-postexport-rating-status[data-tone="ok"]    { color: var(--rw-accent, #0D5F3F); }
.rb-postexport-rating-status[data-tone="error"] { color: rgb(220, 38, 38); }

/* Comment textarea (revealed after a star click) */
.rb-postexport-rating-comment {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.65rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--rw-border, #e5e5e0);
}

.dark .rb-postexport-rating-comment { border-top-color: #374151; }

.rb-postexport-rating-comment-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rw-text, #0a0a0a);
}

.dark .rb-postexport-rating-comment-label { color: #e5e7eb; }

.rb-postexport-rating-comment-text {
    width: 100%;
    min-height: 4.5rem;
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--rw-text, #0a0a0a);
    background-color: var(--rw-bg, #fafaf7);
    border: 1px solid var(--rw-border, #e5e5e0);
    border-radius: 0.5rem;
    resize: vertical;
    transition: border-color 0.15s ease;
}

.rb-postexport-rating-comment-text:focus {
    outline: none;
    border-color: var(--rw-accent, #0D5F3F);
}

.dark .rb-postexport-rating-comment-text {
    background-color: #111827;
    border-color: #374151;
    color: #e5e7eb;
}

.rb-postexport-rating-comment-name {
    width: 100%;
    padding: 0.45rem 0.7rem;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--rw-text, #0a0a0a);
    background-color: var(--rw-bg, #fafaf7);
    border: 1px solid var(--rw-border, #e5e5e0);
    border-radius: 0.5rem;
}

.rb-postexport-rating-comment-name:focus {
    outline: none;
    border-color: var(--rw-accent, #0D5F3F);
}

.dark .rb-postexport-rating-comment-name {
    background-color: #111827;
    border-color: #374151;
    color: #e5e7eb;
}

/* Honeypot — visually removed from the layout but technically still
   a focusable form element so bots autofill it. Off-screen, never
   rendered, never tabbed-to (negative tabindex set in EJS). */
.rb-postexport-rating-comment-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.rb-postexport-rating-comment-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.rb-postexport-rating-comment-skip,
.rb-postexport-rating-comment-submit {
    padding: 0.45rem 0.95rem;
    border-radius: 0.45rem;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid var(--rw-border, #e5e5e0);
    background: transparent;
    color: var(--rw-text-muted, #6b6b6b);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rb-postexport-rating-comment-skip:hover {
    border-color: var(--rw-text-muted, #6b6b6b);
    color: var(--rw-text, #0a0a0a);
}

.rb-postexport-rating-comment-submit {
    background-color: var(--rw-accent, #0D5F3F);
    color: #ffffff;
    border-color: var(--rw-accent, #0D5F3F);
}

.rb-postexport-rating-comment-submit:hover {
    background-color: var(--rw-accent-hover, #0B4E34);
    border-color: var(--rw-accent-hover, #0B4E34);
}

.rb-postexport-rating-comment-submit:disabled,
.rb-postexport-rating-comment-skip:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.rb-postexport-rating-comment-help {
    margin: 0;
    font-size: 0.72rem;
    color: var(--rw-text-muted, #6b6b6b);
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rb-postexport-rating-comment-counter {
    font-variant-numeric: tabular-nums;
    color: var(--rw-text-muted, #6b6b6b);
}

.rb-postexport-rating-comment-counter--low {
    color: rgb(202, 138, 4);
}

.rb-postexport-rating-comment-counter--ok {
    color: var(--rw-accent, #0D5F3F);
}

.rb-postexport-rating-comment-policy {
    font-style: italic;
}

.dark .rb-postexport-rating-comment-help,
.dark .rb-postexport-rating-comment-counter,
.dark .rb-postexport-rating-comment-policy {
    color: #9ca3af;
}

@media (max-width: 480px) {
    .rb-postexport-rating {
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rb-postexport-rating { transition: none; }
    .rb-postexport-rating-star { transition: none; }
    .rb-postexport-rating-star--filled { transform: none; }
}