/* =============================================================
   MyPortfolioHub brand palette
   Matches the main platform's premium dark navy, indigo, and cyan
   design language without adding a frontend framework.
   ============================================================= */

:root {
  color-scheme: dark;
  --rb-bg: #080a0f;
  --rb-bg-1: #0d1117;
  --rb-bg-2: #111827;
  --rb-bg-3: #161d2e;
  --rb-bg-4: #1a2237;
  --rb-primary: #6366f1;
  --rb-primary-dark: #4f46e5;
  --rb-primary-light: #818cf8;
  --rb-primary-soft: rgba(99, 102, 241, 0.11);
  --rb-primary-medium: rgba(99, 102, 241, 0.18);
  --rb-secondary: #06b6d4;
  --rb-secondary-light: #22d3ee;
  --rb-gradient: linear-gradient(135deg, #6366f1 0%, #818cf8 48%, #06b6d4 100%);
  --rb-gradient-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(6, 182, 212, 0.09));
  --rb-ink: #e8eaf0;
  --rb-muted: #8892a4;
  --rb-dim: #7a8094;
  --rb-faint: #4b5268;
  --rb-line: rgba(255, 255, 255, 0.075);
  --rb-line-light: rgba(255, 255, 255, 0.12);
  --rb-soft: #0d1117;
  --rb-card: #111827;
  --rb-success: #10b981;
  --rb-warning: #f59e0b;
  --rb-danger: #ef4444;
  --rb-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
  --rb-shadow-sm: 0 8px 28px rgba(0, 0, 0, 0.28);
  --rb-radius: 18px;
  --rb-font-display: "Syne", "DM Sans", sans-serif;
  --rb-font-body: "DM Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { background: var(--rb-bg); }
body {
  color: var(--rb-ink);
  background: var(--rb-bg);
  font-family: var(--rb-font-body);
}

h1, h2, h3, h4, h5, h6,
.rb-hero-copy h1,
.rb-section-heading h2,
.rb-page-heading h1,
.rb-dashboard-head h1,
.rb-dashboard-hero h1,
.rb-benefits-copy h2,
.rb-auth-showcase h1,
.rb-auth-card-v4 .rb-auth-heading h1,
.rb-form-heading-v4 h1 {
  font-family: var(--rb-font-display);
}

::selection { background: var(--rb-primary); color: #fff; }

/* Navigation and common controls */
.rb-header {
  border-bottom-color: var(--rb-line);
  background: rgba(8, 10, 15, 0.88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025);
}
.rb-brand-mark,
.rb-editor-brand-mark,
.rb-user-avatar {
  background: var(--rb-gradient);
  box-shadow: 0 10px 28px rgba(99, 102, 241, 0.28);
}
.rb-brand strong { color: var(--rb-ink); }
.rb-brand small,
.rb-nav > a,
.rb-account-menu summary { color: var(--rb-muted); }
.rb-nav > a:hover,
.rb-nav > a.is-active,
.rb-footer-links a:hover { color: var(--rb-secondary-light); }
.rb-menu-btn span { background: var(--rb-ink); }

.rb-btn-primary {
  background: var(--rb-gradient);
  color: #fff;
  box-shadow: 0 12px 28px rgba(99, 102, 241, 0.25);
}
.rb-btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 46%, #0891b2 100%);
  box-shadow: 0 15px 32px rgba(99, 102, 241, 0.32);
}
.rb-btn-outline,
.rb-btn-ghost {
  background: rgba(255, 255, 255, 0.035);
  color: var(--rb-ink);
  border-color: var(--rb-line-light);
}
.rb-btn-outline:hover,
.rb-btn-ghost:hover {
  background: var(--rb-primary-soft);
  border-color: rgba(99, 102, 241, 0.5);
}
.rb-btn-light { background: #fff; color: #4f46e5; }
.rb-eyebrow { color: var(--rb-secondary-light); }

.rb-flash,
.rb-account-dropdown,
.rb-more-menu > div,
.rb-dialog,
.rb-dialog form {
  background: var(--rb-bg-2);
  color: var(--rb-ink);
  border-color: var(--rb-line-light);
}
.rb-flash { box-shadow: var(--rb-shadow-sm); }
.rb-flash button,
.rb-dialog-head button { color: var(--rb-muted); }
.rb-account-summary { border-bottom-color: var(--rb-line); }
.rb-account-dropdown > a:hover,
.rb-account-dropdown button:hover,
.rb-more-menu button:hover,
.rb-more-menu a:hover { background: var(--rb-primary-soft); }
.rb-dialog::backdrop { background: rgba(3, 5, 10, 0.76); }
.rb-dialog-head button { background: rgba(255, 255, 255, 0.06); }

.rb-footer {
  border-top-color: var(--rb-line);
  background: var(--rb-bg-1);
}
.rb-footer-brand p,
.rb-footer-bottom,
.rb-footer-links { color: var(--rb-muted); }

/* Landing page */
.rb-hero,
.rb-hero-v4 {
  background:
    radial-gradient(700px 480px at 12% 12%, rgba(99, 102, 241, 0.20), transparent 65%),
    radial-gradient(680px 460px at 88% 30%, rgba(6, 182, 212, 0.12), transparent 62%),
    linear-gradient(180deg, #080a0f 0%, #0d1117 100%);
}
.rb-hero-copy h1 { color: #f8fafc; }
.rb-hero-copy h1 span {
  background: var(--rb-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rb-hero-copy > p { color: var(--rb-muted); }
.rb-product-pill {
  color: var(--rb-secondary-light);
  background: rgba(6, 182, 212, 0.08);
  border-color: rgba(34, 211, 238, 0.22);
}
.rb-product-pill span { background: var(--rb-secondary-light); box-shadow: 0 0 11px rgba(34, 211, 238, 0.7); }
.rb-hero-proof { border-top-color: var(--rb-line); }
.rb-hero-proof strong { color: var(--rb-ink); }
.rb-hero-proof span { color: var(--rb-muted); }
.rb-hero-glow {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.28), rgba(6, 182, 212, 0.08) 45%, transparent 70%);
}
.rb-mock-window {
  background: var(--rb-bg-2);
  border-color: var(--rb-line-light);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(99, 102, 241, 0.08);
}
.rb-mock-top {
  background: var(--rb-bg-1);
  border-bottom-color: var(--rb-line);
  color: var(--rb-muted);
}
.rb-mock-top i { background: var(--rb-faint); }
.rb-mock-top em { color: var(--rb-secondary-light); background: rgba(6, 182, 212, 0.08); }
.rb-mock-body > aside,
.rb-mock-form {
  background: var(--rb-bg-1);
  border-right-color: var(--rb-line);
  color: var(--rb-muted);
}
.rb-mock-body > aside b {
  color: var(--rb-primary-light);
  background: var(--rb-primary-soft);
}
.rb-mock-window-v4 .rb-mock-form div:not(.rb-mock-label) {
  background: var(--rb-bg-2);
  border-color: var(--rb-line-light);
  color: var(--rb-muted);
}
.rb-mock-label { color: var(--rb-secondary-light); }
.rb-float-card {
  background: rgba(17, 24, 39, 0.96);
  border-color: var(--rb-line-light);
  color: var(--rb-ink);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}
.rb-float-card .rb-float-icon { background: var(--rb-primary-soft); color: var(--rb-primary-light); }
.rb-float-card small { color: var(--rb-muted); }

.rb-logo-strip {
  border-color: var(--rb-line);
  background: var(--rb-bg-1);
}
.rb-logo-strip > div > div { color: var(--rb-muted); }
.rb-logo-strip b:hover { color: var(--rb-secondary-light); }
.rb-workflow-section,
.rb-benefits-section { background: var(--rb-bg); }
.rb-workflow-grid article,
.rb-template-card {
  background: var(--rb-bg-2);
  border-color: var(--rb-line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.rb-workflow-grid article:hover,
.rb-template-card:hover {
  border-color: rgba(99, 102, 241, 0.38);
  box-shadow: var(--rb-shadow-sm);
}
.rb-feature-icon { background: var(--rb-primary-soft); color: var(--rb-primary-light); }
.rb-step-number,
.rb-template-meta small { color: var(--rb-faint); }
.rb-workflow-grid p,
.rb-template-info p,
.rb-section-heading p,
.rb-benefits-copy > p { color: var(--rb-muted); }
.rb-soft-section {
  background:
    radial-gradient(540px 360px at 80% 0%, rgba(99, 102, 241, 0.09), transparent 70%),
    var(--rb-bg-1);
}
.rb-template-info > span,
.rb-template-info a { color: var(--rb-secondary-light); }
.rb-template-thumb { background: #e8edf5; }
.rb-template-thumb:before { background: #fff; }
.rb-benefits-copy li span { background: rgba(16, 185, 129, 0.12); color: #34d399; }
.rb-benefit-panel {
  background:
    radial-gradient(350px 220px at 100% 0%, rgba(6, 182, 212, 0.13), transparent 70%),
    linear-gradient(145deg, #111827, #0d1117);
  border: 1px solid var(--rb-line-light);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.40);
}
.rb-progress-track i { background: var(--rb-gradient); }
.rb-readiness-list .is-next > span { background: var(--rb-primary-soft); color: var(--rb-primary-light); }
.rb-import-banner,
.rb-cta-banner {
  background:
    radial-gradient(420px 240px at 100% 0%, rgba(34, 211, 238, 0.22), transparent 68%),
    linear-gradient(135deg, #4f46e5 0%, #6366f1 52%, #0891b2 100%);
  box-shadow: 0 24px 65px rgba(79, 70, 229, 0.28);
}
.rb-import-banner .rb-eyebrow { color: #cffafe; }
.rb-import-banner p { color: rgba(255, 255, 255, 0.78); }

/* Dashboard and template library */
.rb-app-page,
.rb-dashboard-main,
.rb-template-page,
.rb-template-page-v4 {
  background:
    radial-gradient(680px 380px at 5% 0%, rgba(99, 102, 241, 0.10), transparent 70%),
    var(--rb-bg);
}
.rb-dashboard-hero {
  background:
    radial-gradient(390px 220px at 100% 0%, rgba(34, 211, 238, 0.18), transparent 70%),
    linear-gradient(135deg, #111827, #1a2237);
  border: 1px solid var(--rb-line-light);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}
.rb-dashboard-avatar { background: var(--rb-primary-soft); border-color: rgba(129, 140, 248, 0.3); }
.rb-dashboard-hero .rb-eyebrow { color: var(--rb-secondary-light); }
.rb-dashboard-hero p { color: var(--rb-muted); }
.rb-dashboard-hero .rb-btn-primary { background: var(--rb-gradient); color: #fff; }
.rb-stats-grid article,
.rb-dashboard-section,
.rb-dashboard-section-v4,
.rb-library-card,
.rb-template-toolbar,
.rb-template-help {
  background: var(--rb-bg-2);
  border-color: var(--rb-line);
  color: var(--rb-ink);
}
.rb-stats-grid span { color: var(--rb-muted); }
.rb-stats-grid small { color: var(--rb-faint); }
.rb-stat-icon { background: var(--rb-primary-soft); color: var(--rb-primary-light); }
.rb-dashboard-tools {
  background: var(--rb-bg-1);
  border-color: var(--rb-line);
}
.rb-search-control,
.rb-filter-select select,
.rb-template-search,
.rb-field input,
.rb-field select,
.rb-field textarea,
.rb-input {
  color: var(--rb-ink);
  background: var(--rb-bg-2);
  border-color: var(--rb-line-light);
}
.rb-search-control input { color: var(--rb-ink); }
.rb-search-control input::placeholder,
.rb-field input::placeholder,
.rb-field textarea::placeholder { color: var(--rb-faint); }
.rb-search-control:focus-within,
.rb-field input:focus,
.rb-field select:focus,
.rb-field textarea:focus,
.rb-input:focus {
  border-color: rgba(99, 102, 241, 0.75);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
}
.rb-resume-card { background: var(--rb-bg-2); border-color: var(--rb-line); }
.rb-resume-preview { background: #e8edf5; }
.rb-resume-meta p,
.rb-resume-meta small { color: var(--rb-muted); }
.rb-card-actions { border-top-color: var(--rb-line); }
.rb-status { background: rgba(255, 255, 255, 0.055); color: var(--rb-muted); }
.rb-status.is-public { background: rgba(16, 185, 129, 0.11); color: #34d399; }
.rb-preview-topbar span,
.rb-preview-topbar i,
.rb-template-quality {
  background: rgba(13, 17, 23, 0.92);
  color: var(--rb-ink);
  border: 1px solid var(--rb-line);
}
.rb-edit-overlay { background: rgba(8, 10, 15, 0.94); }
.rb-no-results,
.rb-empty-state-v4 {
  background: var(--rb-bg-1);
  border-color: var(--rb-line-light);
}
.rb-empty-plus { background: var(--rb-gradient); }
.rb-template-toolbar { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24); }
.rb-filter-pills button {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--rb-line-light);
  color: var(--rb-muted);
}
.rb-filter-pills button:hover,
.rb-filter-pills button.active {
  background: var(--rb-primary-soft);
  color: var(--rb-primary-light);
  border-color: rgba(99, 102, 241, 0.42);
}
.rb-template-features { color: var(--rb-muted); }
.rb-template-features span { background: var(--rb-bg-1); border-color: var(--rb-line); }
.rb-library-actions { border-top-color: var(--rb-line); }
.rb-color-swatch { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.22), 0 0 0 1px var(--rb-line-light); }
.rb-canva-note { color: var(--rb-faint); }
.rb-template-radio > span:last-child,
.rb-template-choice {
  background: var(--rb-bg-2);
  border-color: var(--rb-line);
}
.rb-template-radio input:checked ~ span:last-child,
.rb-template-choice.active,
.rb-radio-card:has(input:checked) {
  background: var(--rb-primary-soft);
  color: var(--rb-primary-light);
  border-color: rgba(99, 102, 241, 0.65);
}
.rb-radio-card { border-color: var(--rb-line); }

/* Authentication */
.rb-auth-main,
.rb-auth-main-v4 {
  background: var(--rb-bg);
}
.rb-auth-showcase {
  background:
    radial-gradient(620px 420px at 85% 10%, rgba(6, 182, 212, 0.15), transparent 65%),
    radial-gradient(520px 360px at 10% 80%, rgba(99, 102, 241, 0.20), transparent 68%),
    linear-gradient(145deg, #0d1117, #111827);
  border-right: 1px solid var(--rb-line);
}
.rb-auth-showcase .rb-eyebrow { color: var(--rb-secondary-light); }
.rb-auth-showcase > div > p,
.rb-auth-preview-top small,
.rb-auth-benefits small,
.rb-auth-showcase blockquote { color: var(--rb-muted); }
.rb-auth-preview-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--rb-line-light);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}
.rb-mini-avatar { background: var(--rb-gradient); color: #fff; }
.rb-auth-preview-top > i { background: rgba(16, 185, 129, 0.12); color: #34d399; }
.rb-auth-preview-status span:first-child,
.rb-auth-benefits > div > span { color: #34d399; }
.rb-auth-card,
.rb-auth-card-v4 {
  background: var(--rb-bg-2);
  border-color: var(--rb-line-light);
  color: var(--rb-ink);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}
.rb-auth-heading p,
.rb-auth-card-v4 .rb-auth-heading p,
.rb-auth-form small,
.rb-auth-check,
.rb-auth-foot,
.rb-auth-security,
.rb-oauth-note { color: var(--rb-muted); }
.rb-auth-form .rb-field > span { color: var(--rb-ink); }
.rb-input-wrap,
.rb-oauth-btn {
  background: var(--rb-bg-1);
  border-color: var(--rb-line-light);
  color: var(--rb-ink);
}
.rb-input-wrap:focus-within,
.rb-oauth-btn:hover {
  background: var(--rb-bg-3);
  border-color: rgba(99, 102, 241, 0.62);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.11);
}
.rb-input-wrap input { color: var(--rb-ink); background: transparent; }
.rb-input-wrap input::placeholder { color: var(--rb-faint); }
.rb-input-wrap > svg,
.rb-oauth-arrow { color: var(--rb-muted); }
.rb-auth-divider { color: var(--rb-faint); }
.rb-auth-divider:before,
.rb-auth-divider:after { background: var(--rb-line); }
.rb-oauth-btn.is-unconfigured { color: var(--rb-muted); }
.rb-oauth-btn.is-unconfigured:after { background: var(--rb-primary-soft); color: var(--rb-primary-light); }
.rb-auth-foot a,
.rb-password-toggle { color: var(--rb-secondary-light); }
.rb-password-meter > div { background: rgba(255, 255, 255, 0.07); }

/* Editor workspace */
.rb-editor,
.rb-editor-v4 { background: var(--rb-bg); }
.rb-editor-toolbar,
.rb-editor-toolbar-v4 {
  background: var(--rb-bg-1);
  border-bottom-color: var(--rb-line);
  color: var(--rb-ink);
}
.rb-editor-title-field input { color: var(--rb-ink); }
.rb-icon-btn { border-color: var(--rb-line-light); color: var(--rb-muted); }
.rb-icon-btn:hover { color: var(--rb-secondary-light); background: rgba(6, 182, 212, 0.07); }
.rb-completion-badge { border-right-color: var(--rb-line); }
.rb-completion-ring { background: conic-gradient(var(--rb-primary) var(--completion), rgba(255, 255, 255, 0.08) 0); }
.rb-completion-ring:before { background: var(--rb-bg-1); }
.rb-editor-sections,
.rb-editor-sections-v4 {
  background: var(--rb-bg-1);
  border-right-color: var(--rb-line);
}
.rb-editor-sections > button { color: var(--rb-muted); }
.rb-editor-sections > button:hover { background: rgba(255, 255, 255, 0.035); color: var(--rb-ink); }
.rb-editor-sections > button.active {
  background: var(--rb-primary-soft);
  color: var(--rb-primary-light);
}
.rb-editor-sections > button.active span { color: var(--rb-primary-light); }
.rb-editor-sections > button i { background: rgba(255, 255, 255, 0.055); color: var(--rb-muted); }
.rb-editor-nav-label,
.rb-editor-side-head span { color: var(--rb-faint); }
.rb-section-help {
  background: rgba(99, 102, 241, 0.07);
  border-color: rgba(99, 102, 241, 0.18);
}
.rb-section-help b { color: var(--rb-primary-light); }
.rb-section-help p { color: var(--rb-muted); }
.rb-editor-form,
.rb-editor-form-v4 {
  background: var(--rb-bg-2);
  border-right-color: var(--rb-line);
}
.rb-form-heading { border-bottom-color: var(--rb-line); }
.rb-form-heading p { color: var(--rb-muted); }
.rb-form-progress-hint {
  background: rgba(99, 102, 241, 0.07);
  border-color: rgba(99, 102, 241, 0.18);
}
.rb-form-progress-hint > span { background: var(--rb-primary-soft); color: var(--rb-primary-light); }
.rb-form-progress-hint small { color: var(--rb-muted); }
.rb-form-label { color: var(--rb-ink); }
.rb-form-label input,
.rb-form-label textarea,
.rb-form-label select,
.rb-editor-item,
.rb-design-block,
.rb-order-item {
  background: var(--rb-bg-1);
  color: var(--rb-ink);
  border-color: var(--rb-line-light);
}
.rb-form-label input:hover,
.rb-form-label textarea:hover,
.rb-form-label select:hover { border-color: rgba(129, 140, 248, 0.42); }
.rb-form-label input:focus,
.rb-form-label textarea:focus,
.rb-form-label select:focus {
  border-color: rgba(99, 102, 241, 0.75);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
}
.rb-form-help { color: var(--rb-muted); }
.rb-item-actions button,
.rb-inline-list button,
.rb-order-item button { background: rgba(255, 255, 255, 0.055); color: var(--rb-muted); }
.rb-add-item {
  background: rgba(99, 102, 241, 0.055);
  color: var(--rb-primary-light);
  border-color: rgba(99, 102, 241, 0.36);
}
.rb-template-choice-preview,
.rb-template-radio-preview { background: #e8edf5; }
.rb-color-row input[type="color"] { background: var(--rb-bg-1); border-color: var(--rb-line-light); }
.rb-live-preview-panel,
.rb-live-preview-panel-v4 { background: #080a0f; }
.rb-preview-toolbar,
.rb-preview-toolbar-v4 {
  background: var(--rb-bg-1);
  border-bottom-color: var(--rb-line);
}
.rb-preview-zoom,
.rb-preview-device,
.rb-preview-close { background: rgba(255, 255, 255, 0.055); }
.rb-preview-zoom button,
.rb-preview-device button { color: var(--rb-muted); }
.rb-preview-zoom button:hover,
.rb-preview-device button.active { background: var(--rb-bg-3); color: var(--rb-ink); }
.rb-preview-stage {
  background:
    radial-gradient(520px 320px at 50% 0%, rgba(99, 102, 241, 0.10), transparent 70%),
    #080a0f;
}
.rb-editor-mobile-bar { background: var(--rb-bg-1); border-bottom-color: var(--rb-line); color: var(--rb-ink); }

/* Keep document and thumbnail paper surfaces printable and familiar. */
.rb-mini-resume,
.preview-paper,
.large-paper,
.rb-template-thumb:before,
.rb-template-radio-preview:before,
.rb-template-choice-preview i,
.rb-resume-live,
.live-resume { color: #24212d; background-color: #fff; }

@media (max-width: 900px) {
  .rb-nav {
    background: rgba(13, 17, 23, 0.98);
    border-color: var(--rb-line-light);
    box-shadow: var(--rb-shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Enterprise v6 integration on the public resume surfaces */
.rb-dashboard-hero-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.rb-create-dialog .rb-field select{width:100%;border:1px solid var(--rb-line-light);background:var(--rb-bg-1);color:var(--rb-ink);border-radius:10px;padding:11px 12px;outline:none}
.rb-create-dialog .rb-field select:focus{border-color:var(--rb-primary);box-shadow:0 0 0 3px rgba(99,102,241,.13)}
@media(max-width:1100px){.rb-nav{gap:16px}.rb-account-name{display:none}}
@media(max-width:720px){.rb-dashboard-hero-actions{width:100%;justify-content:stretch}.rb-dashboard-hero-actions .rb-btn,.rb-dashboard-hero-actions button{flex:1}}
@media(max-width:470px){.rb-dashboard-hero-actions{flex-direction:column}.rb-dashboard-hero-actions .rb-btn,.rb-dashboard-hero-actions button{width:100%}}