/* Unified warm product theme inspired by the yellow app-showcase reference. */
:root {
  --ink: #262126;
  --muted: #786f67;
  --line: #e7dcc9;
  --surface: #ffffff;
  --canvas: #fffaf0;
  --yellow: #ffc936;
  --yellow-strong: #f3b900;
  --yellow-soft: #fff1b8;
  --red: #bd3b38;
  --coral: #e96a59;
  --coral-soft: #fff0e9;
  --mint: #3bbf9c;
  --mint-soft: #e7f8f1;
  --sky: #56b9dd;
  --blue: #56b9dd;
  --blue-dark: #287a98;
  --blue-soft: #e9f7fc;
  --lavender: #8c79a8;
  --lavender-soft: #f3eff7;
  --outline: #332e32;
  --shadow: 0 14px 32px rgba(77,61,35,.10);
  --sketch-shadow: 4px 4px 0 rgba(51,46,50,.10);
}

html { background: var(--canvas); }
body {
  color: var(--ink);
  background: var(--canvas);
}
h1,h2,h3,.panel-title,.navbar-brand strong {
  color: var(--ink);
}
a { color: #2c718b; }
a:hover { color: var(--red); }
::selection { color: var(--ink); background: #ffe07a; }
.text-secondary { color: var(--muted) !important; }

.btn {
  border-radius: 7px;
  border-width: 1px;
  font-weight: 800;
}
.btn-primary {
  --bs-btn-color: #262126;
  --bs-btn-bg: var(--yellow);
  --bs-btn-border-color: #342e32;
  --bs-btn-hover-color: #262126;
  --bs-btn-hover-bg: #ffd75d;
  --bs-btn-hover-border-color: #342e32;
  --bs-btn-active-color: #262126;
  --bs-btn-active-bg: var(--yellow-strong);
  --bs-btn-active-border-color: #342e32;
  color: #262126;
  background: var(--yellow);
  background-image: none;
  border-color: #342e32;
  box-shadow: 3px 3px 0 #342e32;
}
.btn-primary:hover {
  color: #262126;
  background: #ffd75d;
  border-color: #342e32;
  box-shadow: 1px 1px 0 #342e32;
}
.btn-outline-primary {
  --bs-btn-color: #342e32;
  --bs-btn-border-color: #787066;
  --bs-btn-hover-color: #262126;
  --bs-btn-hover-bg: var(--yellow-soft);
  --bs-btn-hover-border-color: #342e32;
  color: #342e32;
  background: #fff;
  border-color: #8e8377;
}
.btn-outline-primary:hover { color: #262126; background: var(--yellow-soft); border-color: #342e32; }
.btn-soft { color: #4c4339; background: var(--yellow-soft); border-color: #e2bf48; }
.btn-soft:hover { color: #262126; background: #ffe383; }

.form-control,.form-select {
  color: var(--ink);
  background: #fff;
  border-color: #d8cbb8;
  border-radius: 7px;
}
.form-control:hover,.form-select:hover { border-color: #a99b89; }
.form-control:focus,.form-select:focus {
  border-color: #d4a500;
  box-shadow: 0 0 0 .2rem rgba(255,201,54,.22);
}
.form-label { color: #534b43; }

.site-header {
  position: sticky !important;
  top: 0;
  z-index: 1100;
  background: #ffd75a;
  border-bottom: 1px solid #d5ae37;
  box-shadow: 0 5px 16px rgba(73,56,29,.08);
  backdrop-filter: none;
}
.navbar { min-height: 70px; }
.brand-mark strong { color: var(--ink); }
.brand-mark small { color: #766c60; }
.nav-link { color: #4c4642; border-radius: 6px; }
.nav-link:hover { color: var(--red); background: #fff2bd; }
.nav-link.active { color: #262126; background: var(--yellow); }
.site-header .nav-link.active { background: rgba(255,255,255,.7); }
.site-header .btn-primary {
  color: #fff;
  background: #2d292d;
  border-color: #2d292d;
  box-shadow: none;
}
.site-header .btn-primary:hover {
  color: #fff;
  background: #443d44;
  border-color: #443d44;
}
.user-pill { color: var(--ink); }
.user-pill > span { color: #262126; background: var(--yellow); border-color: #d3a70d; }
.navbar-toggler { background: #fff; border-color: #cfc0ac; }
.navbar-collapse { background: transparent; }
.flash-stack .alert { border-color: #ddcfbb; }

.eyebrow {
  color: var(--red);
  font-size: .76rem;
  font-weight: 900;
}
.eyebrow::before {
  width: 20px;
  height: 4px;
  background: var(--yellow);
  border-radius: 4px;
}
.page-hero {
  padding: 48px 0 38px;
  background: #ffdc69;
  border-bottom: 1px solid #d8b23d;
}
.page-hero h1 {
  max-width: 820px;
  margin: 8px 0 9px;
  color: #262126;
  font-size: 2.75rem;
  line-height: 1.16;
  font-weight: 950;
}
.page-hero p { max-width: 740px; color: #655523; }
.content-wrap { padding: 42px 0 78px; background: var(--canvas); }
.section-white { background: #fffdf8; }
.section-muted { background: #fff0ba; border-color: #e3c45a; }
.section-heading h2 { color: var(--ink); }

.panel,.major-card,.plan,.post,.stat,.center-menu {
  background: #fff;
  border: 1px solid #dfd2bf;
  border-radius: 8px;
  box-shadow: 0 9px 24px rgba(72,56,31,.07);
}
.panel { padding: 26px; }
.panel-title { color: var(--ink); font-weight: 900; }
.soft-callout {
  color: #4e453c;
  background: #fff2bd;
  border: 1px solid #e3c252;
  border-left: 4px solid var(--yellow-strong);
  border-radius: 7px;
}
.warning-callout { background: var(--coral-soft); border-color: #efc1b2; border-left-color: var(--coral); }
.mint-callout { background: var(--mint-soft); border-color: #b8e2d4; border-left-color: var(--mint); }
.badge { border-radius: 5px; }
.tag-blue { color: #236f8b; background: var(--blue-soft); }
.tag-mint { color: #26775f; background: var(--mint-soft); }
.tag-lavender { color: #6b4a23; background: var(--yellow-soft); }

.login-shell,.install-body {
  background: #ffdc69;
}
.login-panel,.install-panel {
  background: #fffdf8;
  border: 1px solid #342e32;
  border-radius: 8px;
  box-shadow: 8px 9px 0 rgba(52,46,50,.16);
}
.login-panel h1,.install-panel h1 { color: var(--ink); }

.ai-layout { background: var(--canvas); }
.ai-sidebar { background: #fffdf8; border-right-color: #e0d3c0; }
.ai-sidebar-title strong { color: var(--ink); }
.conversation-item { color: #665d54; border-radius: 6px; }
.conversation-item:hover,.conversation-item.active { color: #262126; background: var(--yellow-soft); }
.ai-toolbar { background: rgba(255,253,248,.96); border-bottom-color: #e0d3c0; }
.role-switch { background: #f1e7d6; border-radius: 7px; }
.role-switch button { color: #746b62; border-radius: 5px; }
.role-switch button.active { color: #262126; background: var(--yellow); box-shadow: 0 2px 5px rgba(81,62,27,.12); }
.message-area { background: var(--canvas); }
.message-avatar { color: #262126; background: var(--yellow); border: 1px solid #d2a816; }
.message.user .message-avatar { color: #235f73; background: var(--blue-soft); border-color: #b4dae8; }
.message-bubble { background: #fff; border-color: #dfd2bf; box-shadow: 0 4px 12px rgba(75,57,30,.06); }
.message.user .message-bubble { background: #e9f7fc; border-color: #bcdbe7; }
.starter .feature-icon { color: #262126; background: var(--yellow); border-color: #342e32; }
.starter-option { color: var(--ink); background: #fff; border-color: #d9cbb8; box-shadow: none; }
.starter-option:hover { color: var(--ink); background: var(--yellow-soft); border-color: #d0a315; }
.ai-composer-wrap { background: linear-gradient(180deg,rgba(255,250,240,0),#fffaf0 25%); }
.ai-composer { background: #fff; border-color: #9e9181; box-shadow: 0 10px 24px rgba(71,54,27,.11); }

.assessment-game { background: #fff1b8; }
.journey-topbar { color: var(--ink); }
.journey-topbar small,.journey-disclaimer { color: #72675d; }
.journey-close { color: var(--ink); }
.journey-close:hover { color: var(--red); }
.journey-track { background: #fff; border-color: var(--outline); }
.journey-track span { background: var(--yellow); }
.journey-stops i { background: #fff; border-color: var(--outline); }
.journey-stops i.done { background: var(--mint); }
.journey-stops i.active { background: var(--coral); }
.journey-world { background: #ccefff; border-color: var(--outline); box-shadow: 5px 6px 0 rgba(52,46,50,.13); }
.paper-cloud { color: #42606b; background: #fff; border-color: var(--outline); }
.journey-land { background: #8fd6aa; border-color: var(--outline); }
.azheng-head { background: #fff8e4; border-color: var(--outline); }
.azheng-head b { background: var(--yellow); border-color: var(--outline); }
.azheng-body { color: #fff; background: var(--coral); border-color: var(--outline); }
.journey-sign { color: var(--ink); background: var(--yellow); border-color: var(--outline); }
.journey-dialog { background: #fffdf8; border-color: var(--outline); box-shadow: 5px 6px 0 rgba(52,46,50,.13); }
.dialog-kicker { color: var(--red); }
.journey-dialog legend { color: var(--ink); }
.journey-choice { background: #fff; border-color: #716860; box-shadow: none; }
.journey-choice:hover { background: #fff7d8; border-color: #c89b00; }
.journey-choice.chosen,.journey-choice:has(input:checked) { background: #fff0a8; border-color: #9c7800; }
.choice-token { color: var(--ink); background: var(--yellow); border-color: var(--outline); }
.journey-choice:nth-child(2) .choice-token { background: #ffad98; }
.journey-choice:nth-child(3) .choice-token { background: #8fd9c1; }
.journey-next { color: var(--ink); background: var(--yellow); background-image: none; border-color: var(--outline); }
.journey-next:hover { color: var(--ink); background: #ffd75d; border-color: var(--outline); }

.filter-bar { padding: 13px; background: #fff1b8; border-color: #dfc35d; }
.employment-filter {
  grid-template-columns: minmax(180px,1.35fr) minmax(150px,1fr) minmax(130px,.8fr) minmax(130px,.8fr) auto;
  align-items: center;
}
.employment-research {
  position: relative;
  overflow: hidden;
  border-top: 6px solid var(--mint);
}
.employment-research::after {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 14px;
  height: 14px;
  content: "";
  background: var(--coral);
  border: 2px solid var(--outline);
  border-radius: 50%;
}
.employment-research-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-right: 30px;
  margin-bottom: 10px;
}
.employment-research-head h2 {
  margin: 9px 0 0;
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 900;
}
[data-research-result] {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.research-block {
  min-width: 0;
  padding: 16px;
  background: #fffaf0;
  border: 1px solid #e4d7c3;
  border-radius: 7px;
}
.research-block:nth-child(3n+2) { background: #eef9fc; border-color: #c8e2ea; }
.research-block:nth-child(3n) { background: #eef9f4; border-color: #c5e6d9; }
.research-block h3 {
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
}
.research-block p {
  margin: 0;
  color: #625950;
  line-height: 1.72;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.research-sources {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}
.research-sources strong { width: 100%; color: var(--ink); }
.research-sources a {
  max-width: 100%;
  padding: 6px 9px;
  color: #276a7f;
  background: #eef9fc;
  border: 1px solid #c4e0e9;
  border-radius: 5px;
  font-size: .82rem;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.research-sources a:hover { color: var(--red); border-color: var(--coral); }
.research-disclaimer {
  margin: 18px 0 0;
  padding-top: 14px;
  color: #756c63;
  border-top: 1px dashed #d9cbb7;
  font-size: .8rem;
}
.ai-draft-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  background: #fff1b8;
  border: 1px solid #dfc35d;
  border-left: 5px solid var(--mint);
  border-radius: 7px;
}
.ai-draft-bar strong,.ai-draft-bar small { display: block; }
.ai-draft-bar strong { color: var(--ink); }
.ai-draft-bar small { margin-top: 4px; color: #6c6259; }
.major-card { min-height: 286px; background: #fff; border-top: 6px solid var(--yellow); }
.major-card:nth-child(3n+1) { background: #fff; border-top-color: var(--yellow); }
.major-card:nth-child(3n+2) { background: #fff; border-top-color: var(--sky); }
.major-card:nth-child(3n) { background: #fff; border-top-color: var(--mint); }
.major-card h2 { color: var(--ink); }
.locked-content::after { background: linear-gradient(180deg,rgba(255,255,255,0),#fff 68%); }
.detail-section { border-bottom-color: #eadfce; }

.plan { background: #fff; }
.plan:nth-child(1),.plan:nth-child(2),.plan:nth-child(3) { background: #fff; }
.plan.featured { background: #fff8d8; border-color: #342e32; box-shadow: 5px 6px 0 rgba(52,46,50,.14); }
.plan-ribbon { color: #fff; background: var(--red); border: 0; }
.plan-price { color: #a22f2c; }
.benefit-list li { color: #5e554d; }
.benefit-list li::before { color: var(--mint); }

.center-menu a { color: #625a52; }
.center-menu a:hover,.center-menu a.active { color: #262126; background: var(--yellow-soft); }
.stat:nth-child(4n+1) { background: #fff3bd; }
.stat:nth-child(4n+2) { background: #e9f7fc; }
.stat:nth-child(4n+3) { background: #e9f8f2; }
.stat:nth-child(4n) { background: #fff0e9; }
.stat strong { color: var(--ink); }

.post { background: #fff; border-left: 5px solid var(--yellow); }
.post:hover { border-color: #d9caa9; border-left-color: var(--coral); box-shadow: 0 10px 25px rgba(74,57,29,.09); }
.post h2,.post h2 a { color: var(--ink); }
.post h2 a:hover { color: var(--red); }
.post-meta { color: #81776e; }

.site-footer {
  padding: 36px 0 90px;
  color: #655825;
  background: #ffe58a;
  border-top: 1px solid #dabb47;
}
.site-footer strong { color: var(--ink); }
.footer-brand p { color: #6d612f; }
.footer-links { margin: 15px 0; }
.footer-links a { color: #423b33; }
.footer-links a:hover { color: var(--red); }
.footer-note { color: #6e644f; }
.mobile-nav { background: rgba(255,253,248,.97); border-top-color: #ddcfb9; box-shadow: 0 -6px 18px rgba(79,60,29,.08); }
.mobile-nav a { color: #7a7169; }
.mobile-nav a span { background: transparent; }
.mobile-nav a.active { color: var(--red); }
.mobile-nav a.active span { color: #262126; background: var(--yellow); }

/* Homepage keeps the reference image's single bold yellow stage. */
.home-page { background: #fffaf0; }
.home-page .site-header { position: sticky !important; top: 0; background: #ffd75a; border-bottom-color: #d5ae37; box-shadow: none; }
.home-page .nav-link:hover,.home-page .nav-link.active { color: #262126; background: rgba(255,255,255,.55); }
.home-page .site-header .btn-primary { color: #fff; background: #2d292d; border-color: #2d292d; box-shadow: none; }
.poster-hero { background: #ffd75a; border-bottom-color: #d5ae37; }
.poster-heading h1 { color: #211e22; text-shadow: 0 4px 0 rgba(255,255,255,.88); }
.poster-heading h1 span { color: var(--red); }
.poster-slogan { color: #302b2f; }
.poster-copy,.poster-topline { color: #68561f; }
.poster-actions .btn-primary { color: #fff; background: #2d292d; border-color: #2d292d; }
.poster-actions .btn-primary:hover { color: #fff; background: #443d44; border-color: #443d44; }
.poster-secondary { color: #262126; background: #fff; }
.mini-screen { background: #fffdf8; border-color: #332e32; box-shadow: 9px 11px 0 rgba(69,54,29,.16),0 18px 38px rgba(76,57,24,.12); }
.mini-status,.mini-greeting small,.mini-career-head small,.mini-question small,.mini-job small { color: #756d65; }
.mini-greeting { background: #ffe27a; border-color: #d2aa1d; }
.mini-chat .from-user { background: var(--blue-soft); border-color: #b7dbe8; }
.mini-chat .from-azheng { background: var(--coral-soft); border-color: #efc1b3; }
.mini-progress i:nth-child(-n+2),.mini-progress i.active { background: var(--coral); }
.mini-career-head { background: #e8f7fc; border-color: #b9dce8; }
.mini-tags span { color: #4c443a; background: #fff1b8; border-color: #e4c451; }
.home-quick { background: #fffaf0; border-bottom-color: #e5d7c1; }
.home-quick-links a { border-color: #e1d4c0; }
.home-quick-links a:hover { color: var(--red); }
.home-quick-links i { color: #262126; background: var(--yellow); border-color: #c99c00; }
.home-page .site-footer { padding: 24px 0 30px; background: #ffe58a; }
.home-page .footer-note { display: none; }
.home-page .footer-record { margin-top: 10px !important; }

/* Admin uses the same brand palette, with restrained density for operations. */
.admin-body { color: var(--ink); background: #fffaf0; }
.admin-top { color: var(--ink); background: #ffd75a; border-bottom-color: #d6af38; box-shadow: none; }
.admin-top a,.admin-brand { color: var(--ink) !important; }
.admin-layout { background: #fffaf0; }
.admin-menu { background: #fffdf8; border-right-color: #e2d5c2; }
.admin-menu a { color: #625a51; border-radius: 6px; }
.admin-menu a:hover { color: var(--red); background: #fff2bd; }
.admin-menu a.active { color: #262126; background: var(--yellow); box-shadow: none; }
.admin-heading h1 { color: var(--ink); }
.admin-card { background: #fff; border-color: #dfd2bf; box-shadow: 0 8px 22px rgba(72,55,28,.07); }
.admin-table { color: #4f4842; }
.admin-table th { color: #4f473e; background: #fff0b2; border-bottom-color: #ddc45f; }
.admin-table td { border-color: #eee4d4; }
.admin-table tbody tr:hover td { background: #fffaf0; }

@media (max-width: 991.98px) {
  .site-header,.home-page .site-header { position: sticky !important; top: 0; }
  .navbar-collapse { background: #fff5c9; border-color: #cda62f; }
  .home-page .navbar-collapse { background: #fff5c9; border-color: #cda62f; }
  .mobile-nav a.active span { color: #262126; background: var(--yellow); }
  .admin-menu { border-bottom-color: #dfd1bd; }
  .home-page .site-footer { padding-bottom: 86px; }
  .employment-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .employment-filter .btn { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
  .page-hero { padding: 38px 0 30px; }
  .page-hero h1 { font-size: 2rem; }
  .content-wrap { padding: 28px 0 68px; }
  .panel { padding: 20px 16px; }
  .employment-filter { grid-template-columns: 1fr; }
  .employment-filter .btn { grid-column: auto; }
  .employment-research-head,.ai-draft-bar { align-items: stretch; flex-direction: column; }
  .employment-research-head { padding-right: 24px; }
  .employment-research-head .btn,.ai-draft-bar .btn { width: 100%; }
  [data-research-result] { grid-template-columns: 1fr; }
  .employment-research::after { top: 16px; right: 16px; }
  .site-footer { padding-top: 28px; }
  .home-page .site-footer { padding-top: 20px; }
  .home-quick .container { gap: 14px; }
  .home-quick-title { text-align: center; }
  .home-quick-title span { font-size: 1rem; }
  .home-quick-title small { font-size: .72rem; }
  .home-quick-links {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
  }
  .home-quick-links a {
    min-height: 88px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    text-align: center;
    background: #fff;
    border: 1px solid #e0d2bc;
    border-radius: 7px;
  }
  .home-quick-links i {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
  .home-quick-links strong { font-size: .74rem; }
  .home-quick-links small { display: none; }
  .home-page .footer-brand { justify-content: center; }
  .home-page .footer-links { justify-content: center; }
  .home-page .footer-record { text-align: center; }
  .home-page .footer-brand img { width: 42px; height: 42px; }
  .home-page .footer-links { gap: 14px; margin: 11px 0; }
  .home-page .footer-record { margin-top: 6px !important; }
}