.guide-shell,
.guide-card,
.guide-control-card,
.guide-stats-card,
.guide-table-card,
.guide-alert,
.guide-process-shell {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}

.guide-shell,
.guide-control-card,
.guide-card,
.guide-table-card,
.guide-process-shell,
.guide-alert {
  padding: 30px;
}

.guide-shell::after,
.guide-control-card::after,
.guide-card::after,
.guide-table-card::after,
.guide-process-shell::after,
.guide-alert::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(109, 61, 245, 0.12), transparent 72%);
  transform: translate(24%, -24%);
  pointer-events: none;
}

.guide-shell { display: grid; gap: 24px; }
.guide-control-head,
.guide-result-head,
.guide-card-head,
.guide-table-head,
.guide-process-head,
.guide-stats-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.guide-control-title,
.guide-result-title,
.guide-card-title,
.guide-table-title,
.guide-process-title,
.guide-stats-title {
  margin: 14px 0 0;
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.guide-subcopy,
.guide-card-copy,
.guide-table-copy,
.guide-helper,
.guide-empty-copy,
.guide-kpi-note,
.guide-alert p { margin: 0; color: var(--muted); line-height: 1.72; }

.guide-form { display: grid; gap: 18px; }
.guide-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.guide-field { display: grid; gap: 10px; }
.guide-field label { font-size: 0.88rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.guide-field select,
.guide-field input {
  min-height: 58px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid rgba(11, 47, 143, 0.12);
  background: linear-gradient(180deg, #ffffff, #f7faff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
  color: var(--ink);
}
.guide-field select:focus,
.guide-field input:focus {
  outline: none;
  border-color: rgba(11, 47, 143, 0.46);
  box-shadow: 0 0 0 4px rgba(20, 58, 184, 0.12);
}
.guide-action { min-height: 58px; width: 100%; }
.guide-mini-tags,
.guide-process-pills,
.guide-goal-pills,
.guide-legend,
.guide-summary-pills,
.guide-vacancy-summary,
.guide-process-summary,
.guide-chart-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.guide-tag,
.guide-pill,
.guide-legend span,
.guide-summary-pill,
.guide-process-label,
.guide-vacancy-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(11, 47, 143, 0.08); color: var(--blue); font-size: 0.83rem; font-weight: 800; letter-spacing: 0.02em; }
.guide-pill,
.guide-process-pill,
.guide-goal-pill {
  border: 1px solid rgba(11, 47, 143, 0.08);
  background: rgba(255,255,255,0.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.guide-process-pill:hover,
.guide-goal-pill:hover,
.guide-pill:hover { transform: translateY(-1px); }
.guide-process-pill.active,
.guide-goal-pill.active {
  background: linear-gradient(135deg, rgba(11,47,143,0.96), rgba(109,61,245,0.92));
  color: white;
  border-color: transparent;
  box-shadow: 0 14px 24px rgba(28, 63, 182, 0.20);
}
.guide-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.guide-stats-card { padding: 20px; }
.guide-stats-card span { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.guide-stats-card strong { display: block; margin-top: 10px; font-family: 'Rajdhani', 'Inter', sans-serif; font-size: clamp(1.8rem, 2vw, 2.6rem); line-height: 0.9; }
.guide-stats-card small { display: block; margin-top: 10px; color: var(--muted); line-height: 1.55; }

.guide-charts-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; }
.guide-charts-stack,
.guide-tables-stack,
.guide-summary-block { display: grid; gap: 24px; }
.guide-chart-wrap {
  position: relative;
  margin-top: 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(245,248,255,0.94));
  border: 1px solid rgba(11, 47, 143, 0.08);
  padding: 16px;
}
.guide-chart-wrap svg { display: block; width: 100%; height: auto; }
.guide-chart-note { display: block; margin-top: 14px; color: var(--muted); line-height: 1.65; }

.guide-score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.guide-score-card { padding: 18px; border-radius: 22px; background: rgba(11,47,143,0.05); border: 1px solid rgba(11,47,143,0.08); }
.guide-score-card span { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.guide-score-card strong { display: block; margin-top: 8px; font-family: 'Rajdhani', 'Inter', sans-serif; font-size: clamp(1.8rem, 2vw, 2.4rem); }
.guide-score-card small { display: block; margin-top: 8px; color: var(--muted); line-height: 1.5; }

.guide-target-bar { position: relative; height: 16px; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, rgba(34,197,94,0.22), rgba(14,165,233,0.18), rgba(239,68,68,0.22)); border: 1px solid rgba(11, 47, 143, 0.08); }
.guide-target-marker,
.guide-target-threshold,
.guide-target-average,
.guide-target-maximum { position: absolute; top: -3px; width: 4px; height: 22px; border-radius: 999px; }
.guide-target-threshold { background: #22c55e; }
.guide-target-average { background: #0ea5e9; }
.guide-target-maximum { background: #ef4444; }
.guide-target-marker { width: 10px; height: 10px; top: 2px; margin-left: -3px; border-radius: 50%; background: #0b2f8f; box-shadow: 0 0 0 6px rgba(11,47,143,0.14); }
.guide-target-labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; font-size: 0.84rem; color: var(--muted); }
.guide-target-labels strong { display: block; color: var(--ink); font-size: 0.95rem; }
.guide-alert { border: 1px solid rgba(11, 47, 143, 0.1); background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,251,255,0.96)); }
.guide-alert strong { display: block; margin-bottom: 8px; }

.guide-tables-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; }
.guide-table-wrap { margin-top: 18px; overflow-x: auto; border-radius: 22px; border: 1px solid rgba(11, 47, 143, 0.08); background: rgba(255,255,255,0.92); }
.guide-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.guide-table th,
.guide-table td { padding: 14px 14px; border-bottom: 1px solid rgba(11, 47, 143, 0.08); vertical-align: top; }
.guide-table th { position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg, #eef4ff, #dfe9ff); color: var(--ink); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.guide-table tbody tr:hover { background: rgba(11, 47, 143, 0.04); }
.guide-table tbody tr.is-core { background: rgba(34, 197, 94, 0.08); }
.guide-table tbody tr.is-support { background: rgba(14, 165, 233, 0.06); }
.guide-table tbody tr.is-active-row { background: linear-gradient(90deg, rgba(11,47,143,0.12), rgba(109,61,245,0.10)); box-shadow: inset 4px 0 0 rgba(11,47,143,0.92); }
.guide-table tbody tr.target-break td { border-top: 2px solid rgba(34,197,94,0.52); }
.guide-priority-badge,
.guide-source-badge,
.guide-range-badge { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border-radius: 999px; background: rgba(11, 47, 143, 0.08); color: var(--blue); font-size: 0.76rem; font-weight: 800; }
.guide-range-badge.is-safe { background: rgba(34,197,94,0.12); color: #166534; }
.guide-range-badge.is-mid { background: rgba(14,165,233,0.12); color: #075985; }
.guide-range-badge.is-stretch { background: rgba(239,68,68,0.12); color: #991b1b; }
.guide-value-strong { font-weight: 900; color: var(--ink); }
.guide-empty { padding: 34px; border-radius: 26px; text-align: center; background: rgba(255,255,255,0.7); border: 1px dashed rgba(11, 47, 143, 0.16); }
.guide-empty h3 { margin: 0 0 8px; font-family: 'Rajdhani', 'Inter', sans-serif; font-size: 2rem; }
.guide-footnote { margin-top: 14px; color: var(--muted); font-size: 0.94rem; line-height: 1.68; }
.guide-color-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.guide-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.guide-kpi { padding: 18px; border-radius: 20px; background: rgba(11, 47, 143, 0.05); border: 1px solid rgba(11, 47, 143, 0.08); }
.guide-kpi span { display: block; font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; }
.guide-kpi strong { display: block; margin-top: 9px; font-family: 'Rajdhani', 'Inter', sans-serif; font-size: 2rem; }
.guide-chart-legend span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 1120px) {
  .guide-form-grid,
  .guide-stats-grid,
  .guide-score-grid,
  .guide-kpis,
  .guide-tables-grid,
  .guide-charts-grid { grid-template-columns: 1fr; }
  .guide-target-labels { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .guide-shell,
  .guide-control-card,
  .guide-card,
  .guide-table-card,
  .guide-process-shell,
  .guide-alert { padding: 22px; border-radius: 24px; }
  .guide-table { min-width: 620px; }
  .guide-result-title,
  .guide-card-title,
  .guide-table-title,
  .guide-control-title { font-size: 2rem; }
}