:root {
    --rb-navy: #092b50;
    --rb-blue: #0a65cc;
    --rb-mint: #13b89a;
    --rb-ink: #172230;
    --rb-muted: #617086;
    --rb-line: #dce5ef;
    --rb-soft: #f4f7fb;
}

.rb-page {
    background: #f6f8fb;
    color: var(--rb-ink);
    overflow: clip;
}

.rb-container {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.rb-breadcrumb {
    padding: 15px 0;
    border-bottom: 1px solid var(--rb-line);
    background: #fff;
    color: var(--rb-muted);
    font-size: 14px;
}

.rb-breadcrumb a { color: var(--rb-blue); }

.rb-hero {
    padding: 68px 0 54px;
    background: #fff;
}

.rb-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .8fr);
    align-items: center;
    gap: 58px;
}

.rb-kicker,
.rb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #087a68;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.rb-kicker::before,
.rb-eyebrow::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rb-mint);
    content: '';
}

.rb-hero h1 {
    max-width: 690px;
    margin: 16px 0 18px;
    color: var(--rb-navy);
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.06;
    letter-spacing: 0;
}

.rb-hero-copy {
    max-width: 670px;
    color: var(--rb-muted);
    font-size: 18px;
    line-height: 1.7;
}

.rb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.rb-btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 12px 18px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.rb-btn:hover { transform: translateY(-2px); }
.rb-btn-primary { background: var(--rb-blue); color: #fff; box-shadow: 0 12px 25px rgba(10, 101, 204, .2); }
.rb-btn-primary:hover { color: #fff; }
.rb-btn-light { border-color: #ccd8e7; background: #fff; color: var(--rb-navy); }
.rb-btn-danger { border-color: #fecaca; background: #fff; color: #b42318; }

.rb-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 22px 0 0;
    padding: 0;
    color: #44546a;
    font-size: 14px;
    list-style: none;
}

.rb-trust li { display: inline-flex; align-items: center; gap: 7px; }
.rb-trust i { color: #07947d; font-size: 19px; }

.rb-visual {
    position: relative;
    min-height: 480px;
}

.rb-paper {
    min-height: 450px;
    border: 1px solid #d9e2ed;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(27, 49, 78, .16);
    padding: 38px;
}

.rb-paper-head { border-bottom: 3px solid var(--rb-blue); padding-bottom: 19px; }
.rb-paper-name { color: var(--rb-navy); font-size: 31px; font-weight: 850; line-height: 1.1; }
.rb-paper-role { margin-top: 7px; color: var(--rb-blue); font-size: 15px; font-weight: 700; }
.rb-paper-contact { margin-top: 9px; color: #738096; font-size: 10px; }
.rb-paper-section { margin-top: 24px; }
.rb-paper-section h3 { margin: 0 0 10px; color: var(--rb-blue); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.rb-paper-line { height: 7px; margin-top: 7px; border-radius: 3px; background: #e9eef4; }
.rb-paper-line.short { width: 62%; }
.rb-paper-job { display: flex; justify-content: space-between; margin-top: 13px; color: #26364b; font-size: 11px; font-weight: 800; }
.rb-paper-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-paper-pills span { border-radius: 4px; background: #edf5ff; padding: 5px 8px; color: #24598f; font-size: 9px; }

.rb-score-chip {
    position: absolute;
    right: -18px;
    top: 38px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #cfe1f6;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(21, 62, 110, .14);
    padding: 13px 16px;
}

.rb-score-chip strong { display: block; color: var(--rb-navy); }
.rb-score-chip span { color: var(--rb-muted); font-size: 12px; }
.rb-score-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #ddf8f1; color: #087a68; font-size: 21px; }

.rb-band { padding: 72px 0; }
.rb-band-white { background: #fff; }
.rb-section-head { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.rb-section-head h2 { margin: 10px 0; color: var(--rb-navy); font-size: 34px; }
.rb-section-head p { color: var(--rb-muted); line-height: 1.7; }

.rb-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rb-feature {
    border: 1px solid var(--rb-line);
    border-radius: 7px;
    background: #fff;
    padding: 25px;
}
.rb-feature-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 7px; background: #eaf4ff; color: var(--rb-blue); font-size: 24px; }
.rb-feature h3 { margin: 18px 0 8px; color: var(--rb-navy); font-size: 19px; }
.rb-feature p { margin: 0; color: var(--rb-muted); line-height: 1.65; }

.rb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: rb-step; }
.rb-step { position: relative; padding: 0 22px; text-align: center; counter-increment: rb-step; }
.rb-step:not(:last-child)::after { position: absolute; top: 28px; right: -16%; width: 32%; border-top: 1px dashed #9bbce0; content: ''; }
.rb-step-number { display: grid; width: 56px; height: 56px; place-items: center; margin: 0 auto 17px; border: 1px solid #bbd5ef; border-radius: 50%; background: #fff; color: var(--rb-blue); font-size: 20px; font-weight: 850; }
.rb-step-number::before { content: counter(rb-step); }
.rb-step h3 { color: var(--rb-navy); font-size: 17px; }
.rb-step p { color: var(--rb-muted); font-size: 14px; line-height: 1.6; }

.rb-answer-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 46px; align-items: start; }
.rb-answer-grid h2 { color: var(--rb-navy); font-size: 34px; }
.rb-answer-grid > div > p { color: var(--rb-muted); line-height: 1.75; }
.rb-checklist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rb-checklist li { display: flex; gap: 11px; color: #34445a; line-height: 1.55; }
.rb-checklist i { flex: 0 0 auto; margin-top: 3px; color: #07947d; font-size: 20px; }

.rb-faq { max-width: 850px; margin-inline: auto; }
.rb-faq details { border-bottom: 1px solid var(--rb-line); background: #fff; }
.rb-faq summary { cursor: pointer; padding: 20px 4px; color: var(--rb-navy); font-size: 17px; font-weight: 800; }
.rb-faq p { padding: 0 4px 20px; color: var(--rb-muted); line-height: 1.7; }

.rb-cta { padding: 34px 0 72px; background: #fff; }
.rb-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; border-radius: 7px; background: var(--rb-navy); padding: 34px; color: #fff; }
.rb-cta-inner h2 { margin: 0 0 7px; color: #fff; font-size: 27px; }
.rb-cta-inner p { margin: 0; color: #c6d6e7; }

/* Authenticated workspace */
.rb-workspace { background: #f4f7fb; min-height: 100vh; padding: 28px 0 60px; }
.rb-workspace-shell { width: min(1500px, calc(100% - 30px)); margin-inline: auto; }
.rb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.rb-toolbar h1 { margin: 0; color: var(--rb-navy); font-size: 28px; }
.rb-toolbar p { margin: 4px 0 0; color: var(--rb-muted); }
.rb-toolbar-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.rb-workspace-grid { display: grid; grid-template-columns: minmax(520px, 1fr) minmax(420px, .9fr); gap: 20px; align-items: start; }
.rb-editor-panel { border: 1px solid var(--rb-line); border-radius: 7px; background: #fff; }
.rb-document-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px; border-bottom: 1px solid var(--rb-line); }
.rb-document-select { width: 100%; min-height: 44px; border: 1px solid #cfd9e6; border-radius: 6px; padding: 8px 12px; color: var(--rb-ink); background: #fff; }
.rb-inline-actions { display: flex; gap: 7px; }
.rb-icon-btn { display: inline-grid; width: 42px; height: 42px; place-items: center; border: 1px solid #cfd9e6; border-radius: 6px; background: #fff; color: var(--rb-navy); font-size: 19px; }
.rb-icon-btn:hover { border-color: #96bbe3; color: var(--rb-blue); }

.rb-editor-section { border-bottom: 1px solid var(--rb-line); }
.rb-editor-section summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 18px 20px; color: var(--rb-navy); font-weight: 850; list-style: none; }
.rb-editor-section summary::-webkit-details-marker { display: none; }
.rb-editor-section summary span { display: inline-flex; align-items: center; gap: 10px; }
.rb-editor-section summary i { color: var(--rb-blue); font-size: 20px; }
.rb-editor-section[open] summary { background: #f8fbff; }
.rb-editor-body { padding: 20px; }
.rb-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.rb-field-full { grid-column: 1 / -1; }
.rb-field label { display: block; margin-bottom: 7px; color: #334155; font-size: 13px; font-weight: 750; }
.rb-field input,
.rb-field textarea,
.rb-field select { width: 100%; min-height: 44px; border: 1px solid #cfd9e6; border-radius: 6px; padding: 10px 12px; color: var(--rb-ink); background: #fff; }
.rb-field textarea { min-height: 105px; resize: vertical; }
.rb-field input:focus,
.rb-field textarea:focus,
.rb-field select:focus { border-color: #6ca5e3; box-shadow: 0 0 0 3px rgba(10,101,204,.1); outline: 0; }
.rb-help { display: block; margin-top: 5px; color: #758399; font-size: 12px; }
.rb-repeater-item { position: relative; border-top: 1px solid #e5ebf2; margin-top: 18px; padding-top: 18px; }
.rb-repeater-item:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.rb-remove-row { position: absolute; right: 0; top: 11px; border: 0; background: transparent; color: #b42318; font-size: 20px; }
.rb-repeater-item:first-child .rb-remove-row { top: -7px; }
.rb-add-row { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; border: 0; background: transparent; color: var(--rb-blue); font-weight: 800; }

.rb-template-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rb-template-option { border: 2px solid #d8e1ec; border-radius: 6px; background: #fff; padding: 12px; color: #43536a; text-align: left; }
.rb-template-option.active { border-color: var(--rb-blue); background: #f0f7ff; color: var(--rb-navy); }
.rb-template-mini { display: block; height: 42px; margin-bottom: 9px; border: 1px solid #d8e1ec; background: linear-gradient(90deg, var(--rb-blue) 0 28%, #fff 28%); }
.rb-template-option[data-template="professional"] .rb-template-mini { border-top: 7px solid var(--rb-blue); background: #fff; }
.rb-template-option[data-template="compact"] .rb-template-mini { background: linear-gradient(#fff 0 30%, #eef3f8 30% 34%, #fff 34%); }
.rb-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.rb-color { width: 32px; height: 32px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #bdc9d8; }
.rb-color.active { box-shadow: 0 0 0 3px #172230; }

.rb-savebar { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: sticky; bottom: 0; z-index: 4; padding: 14px 18px; border-top: 1px solid var(--rb-line); background: rgba(255,255,255,.96); }
.rb-completion { min-width: 180px; }
.rb-completion-head { display: flex; justify-content: space-between; gap: 8px; color: #526176; font-size: 12px; }
.rb-completion-track { height: 7px; margin-top: 6px; border-radius: 8px; background: #e5ecf4; overflow: hidden; }
.rb-completion-track span { display: block; height: 100%; background: var(--rb-mint); }

.rb-preview-panel { position: sticky; top: 18px; }
.rb-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rb-preview-head h2 { margin: 0; color: var(--rb-navy); font-size: 18px; }
.rb-live-paper { --resume-accent: #0a65cc; aspect-ratio: 210 / 297; overflow: hidden; border: 1px solid #d7e0eb; background: #fff; box-shadow: 0 20px 48px rgba(29, 48, 75, .13); padding: 7.5%; color: #283548; font-family: Arial, sans-serif; }
.rb-live-head { border-bottom: 3px solid var(--resume-accent); padding-bottom: 3.2%; }
.rb-live-name { margin: 0; color: #13243a; font-size: clamp(21px, 2.2vw, 35px); font-weight: 800; line-height: 1.1; }
.rb-live-role { margin-top: 1.2%; color: var(--resume-accent); font-size: clamp(10px, 1vw, 15px); font-weight: 700; }
.rb-live-contact { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 1.6%; color: #66768b; font-size: clamp(6px, .67vw, 10px); }
.rb-live-section { margin-top: 4%; }
.rb-live-section h3 { margin: 0 0 1.6%; color: var(--resume-accent); font-size: clamp(8px, .75vw, 11px); text-transform: uppercase; font-weight: 850; }
.rb-live-section p { margin: 0; font-size: clamp(7px, .7vw, 10px); line-height: 1.45; white-space: pre-line; }
.rb-live-item { margin-top: 2.3%; }
.rb-live-item:first-of-type { margin-top: 0; }
.rb-live-item-head { display: flex; justify-content: space-between; gap: 10px; font-size: clamp(7px, .72vw, 10.5px); }
.rb-live-item-head strong { color: #17263a; }
.rb-live-item-head span { color: #728096; white-space: nowrap; }
.rb-live-subtitle { color: #4f6075; font-size: clamp(6px, .66vw, 9.5px); font-weight: 700; }
.rb-live-skills { display: flex; flex-wrap: wrap; gap: 4px; }
.rb-live-skills span { border-radius: 3px; background: color-mix(in srgb, var(--resume-accent) 10%, white); padding: 3px 6px; color: #263b54; font-size: clamp(6px, .63vw, 9px); }
.rb-live-paper.template-modern { display: grid; grid-template-columns: 31% 1fr; column-gap: 6%; padding: 0; }
.rb-live-paper.template-modern .rb-live-head { grid-row: 1 / span 20; padding: 18% 13%; border: 0; background: var(--resume-accent); color: #fff; }
.rb-live-paper.template-modern .rb-live-name,
.rb-live-paper.template-modern .rb-live-role,
.rb-live-paper.template-modern .rb-live-contact { color: #fff; }
.rb-live-paper.template-modern > .rb-live-section { grid-column: 2; margin-right: 9%; }
.rb-live-paper.template-modern > .rb-live-section:nth-of-type(1) { margin-top: 11%; }
.rb-live-paper.template-compact { padding: 5.6%; }
.rb-live-paper.template-compact .rb-live-section { margin-top: 2.5%; }
.rb-live-paper.template-compact .rb-live-head { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.rb-mobile-tabs { display: none; }
.rb-alert { margin-bottom: 16px; border: 1px solid #a7e2d5; border-radius: 7px; background: #edfbf7; padding: 14px 16px; color: #075e51; }
.rb-errors { margin-bottom: 16px; border: 1px solid #fecaca; border-radius: 7px; background: #fff5f5; padding: 14px 18px; color: #9f1c1c; }

@media (max-width: 1100px) {
    .rb-workspace-grid { grid-template-columns: minmax(460px, 1fr) minmax(360px, .8fr); }
}

@media (max-width: 900px) {
    .rb-hero-grid { grid-template-columns: 1fr; }
    .rb-visual { width: min(520px, 100%); margin-inline: auto; }
    .rb-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .rb-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
    .rb-step::after { display: none; }
    .rb-answer-grid { grid-template-columns: 1fr; gap: 22px; }
    .rb-workspace-grid { grid-template-columns: 1fr; }
    .rb-preview-panel { position: static; }
    .rb-mobile-tabs { display: grid; grid-template-columns: 1fr 1fr; position: sticky; top: 0; z-index: 7; margin-bottom: 12px; border: 1px solid #cad7e6; border-radius: 7px; overflow: hidden; background: #fff; }
    .rb-mobile-tab { min-height: 44px; border: 0; background: #fff; color: #526176; font-weight: 800; }
    .rb-mobile-tab.active { background: var(--rb-navy); color: #fff; }
    .rb-workspace-grid[data-mobile-view="editor"] .rb-preview-panel { display: none; }
    .rb-workspace-grid[data-mobile-view="preview"] .rb-editor-panel { display: none; }
}

@media (max-width: 640px) {
    .rb-container { width: min(100% - 24px, 1180px); }
    .rb-hero { padding: 44px 0 38px; }
    .rb-hero h1 { font-size: 38px; }
    .rb-hero-copy { font-size: 16px; }
    .rb-actions .rb-btn { width: 100%; }
    .rb-visual { min-height: 390px; }
    .rb-paper { min-height: 370px; padding: 26px; }
    .rb-score-chip { right: 8px; top: 18px; }
    .rb-band { padding: 52px 0; }
    .rb-feature-grid,
    .rb-steps { grid-template-columns: 1fr; }
    .rb-section-head h2,
    .rb-answer-grid h2 { font-size: 28px; }
    .rb-cta-inner { align-items: stretch; flex-direction: column; padding: 26px 22px; }
    .rb-workspace-shell { width: min(100% - 20px, 1500px); }
    .rb-toolbar { align-items: flex-start; flex-direction: column; }
    .rb-toolbar-actions { width: 100%; }
    .rb-toolbar-actions .rb-btn { flex: 1; }
    .rb-document-bar { grid-template-columns: 1fr; }
    .rb-inline-actions { justify-content: flex-end; }
    .rb-field-grid { grid-template-columns: 1fr; }
    .rb-template-options { grid-template-columns: 1fr; }
    .rb-template-option { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 10px; }
    .rb-template-mini { margin: 0; }
    .rb-savebar { align-items: stretch; flex-direction: column; }
    .rb-savebar .rb-btn { width: 100%; }
    .rb-live-paper { min-height: 560px; aspect-ratio: auto; }
    .rb-live-name { font-size: 24px; }
    .rb-live-role { font-size: 12px; }
    .rb-live-contact,
    .rb-live-section p,
    .rb-live-item-head { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .rb-btn { transition: none; }
}