:root {
  --bg: #fdf4e0;
  --bg-2: #f5e6c8;
  --card: #fffcf3;
  --card-2: #fef7e5;
  --border: #e6c894;
  --border-strong: #c8a05e;
  --text: #3a2818;
  --text-mute: #8b6f47;
  --text-soft: #5c4531;
  --accent: #b45309;
  --accent-2: #d97706;
  --accent-3: #f59e0b;
  --accent-light: #fef3c7;
  --frame: #6b4423;
  --frame-2: #8b6b3d;
  --olive: #4a4a2a;
  --strong: #059669;
  --strong-bg: #d1fae5;
  --ok: #b45309;
  --ok-bg: #fed7aa;
  --weak: #a8927a;
  --weak-bg: #f3e5c4;
  --poor: #b91c1c;
  --poor-bg: #fecaca;
  --jd-bg: #fee2e2; --jd-fg: #b91c1c;
  --cv-bg: #d9f2d9; --cv-fg: #15803d;
  --act-bg: #fef3c7; --act-fg: #b45309;
  --star: #fbbf24;
  --star-pink: #f472b6;
  --star-blue: #60a5fa;
  --star-purple: #a78bfa;
  --star-mint: #34d399;
  --radius: 16px;
  --radius-rustic: 22px 18px 24px 20px / 20px 22px 18px 24px;
  --hand: 'Caveat', 'Noto Sans TC', cursive;
}

body {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><g fill='%23c8a05e' opacity='.16'><path d='M60 50 L65 65 L80 65 L68 74 L72 89 L60 80 L48 89 L52 74 L40 65 L55 65 Z'/><path d='M380 100 L383 110 L393 110 L385 116 L388 126 L380 120 L372 126 L375 116 L367 110 L377 110 Z'/><path d='M180 240 L183 250 L193 250 L185 256 L188 266 L180 260 L172 266 L175 256 L167 250 L177 250 Z'/><path d='M330 360 L335 373 L348 373 L338 381 L342 394 L330 386 L318 394 L322 381 L312 373 L325 373 Z'/><path d='M90 400 L93 410 L103 410 L95 416 L98 426 L90 420 L82 426 L85 416 L77 410 L87 410 Z'/><path d='M430 200 L432 208 L440 208 L434 213 L436 221 L430 217 L424 221 L426 213 L420 208 L428 208 Z'/></g><g fill='%23e6c894' opacity='.08'><circle cx='120' cy='120' r='1.5'/><circle cx='420' cy='60' r='1.5'/><circle cx='250' cy='180' r='1.5'/><circle cx='380' cy='280' r='1.5'/><circle cx='140' cy='320' r='1.5'/><circle cx='460' cy='420' r='1.5'/><circle cx='50' cy='240' r='1.5'/></g></svg>") repeat,
    radial-gradient(ellipse at top, #fef7e5 0%, #fdf4e0 40%, #f5e6c8 100%) fixed;
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .3 0 0 0 0 .1 0 0 0 .13 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: .5;
  mix-blend-mode: multiply;
}

/* Star people walking layer */
.star-layer {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 100;
  overflow: hidden;
}
.star-person {
  position: absolute;
  opacity: 0.95;
  filter: drop-shadow(0 6px 12px rgba(155,90,20,.22));
  z-index: 101;
}
.star-person > img,
.star-person > .frames > img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.star-person > .frames {
  width: 100%; height: 100%;
  position: relative;
}
.star-person > .frames > .frame {
  position: absolute; inset: 0;
}
/* Multi-frame animation. Each .frames container has class .n<N> for N total frames.
 * Every child .frame is stacked (position absolute), starts opacity 0, and runs a
 * "brief-visible" keyframe once per var(--cycle). Each frame has an inline
 * animation-delay = i * cycle / N, so it becomes visible only during its (1/N) slice.
 * Duration = var(--cycle) — same for all frames. Hard cuts (no crossfade).
 */
.star-person > .frames > .frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block; pointer-events: none;
  opacity: 0;
  animation-duration: var(--cycle, 800ms);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.frames.n2 > .frame { animation-name: brief-2; }
.frames.n3 > .frame { animation-name: brief-3; }
.frames.n4 > .frame { animation-name: brief-4; }
.frames.n6 > .frame { animation-name: brief-6; }
.frames.n8 > .frame { animation-name: brief-8; }
@keyframes brief-2 { 0% { opacity: 1; } 49.9% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes brief-3 { 0% { opacity: 1; } 33.2% { opacity: 1; } 33.3% { opacity: 0; } 100% { opacity: 0; } }
@keyframes brief-4 { 0% { opacity: 1; } 24.9% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@keyframes brief-6 { 0% { opacity: 1; } 16.5% { opacity: 1; } 16.6% { opacity: 0; } 100% { opacity: 0; } }
@keyframes brief-8 { 0% { opacity: 1; } 12.4% { opacity: 1; } 12.5% { opacity: 0; } 100% { opacity: 0; } }

/* Each direction has native L/R frames — no CSS mirror needed. */

.star-person.right { animation: walk-right var(--dur, 16s) linear forwards, bob .5s ease-in-out infinite alternate; }
.star-person.left  { animation: walk-left  var(--dur, 16s) linear forwards, bob .5s ease-in-out infinite alternate; }
@keyframes walk-right {
  from { left: -160px; }
  to   { left: calc(100vw + 60px); }
}
@keyframes walk-left {
  from { left: calc(100vw + 60px); }
  to   { left: -160px; }
}
@keyframes bob {
  0%   { transform: translateY(0) rotate(-1deg); }
  50%  { transform: translateY(-4px) rotate(1deg); }
  100% { transform: translateY(0) rotate(-1deg); }
}

/* Idle poses: fade in, gentle animation, fade out */
.star-person.idle {
  opacity: 0;
  animation: idle-fade 9s ease-in-out forwards;
}
.star-person.idle.idle-wave    { animation: idle-fade 9s ease-in-out forwards, wave-bob 1.5s ease-in-out infinite alternate; }
.star-person.idle.idle-sit     { animation: idle-fade 9s ease-in-out forwards, gentle-tilt 2.4s ease-in-out infinite alternate; }
.star-person.idle.idle-reach   { animation: idle-fade 9s ease-in-out forwards, gentle-bob 1s ease-in-out infinite alternate; }
.star-person.idle.idle-sleep   { animation: idle-fade 9s ease-in-out forwards, sleep-breathe 2.8s ease-in-out infinite alternate; }
@keyframes idle-fade {
  0%   { opacity: 0; transform: translateY(6px); }
  15%  { opacity: .95; transform: translateY(0); }
  85%  { opacity: .95; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes wave-bob      { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes gentle-tilt   { from { rotate: -2deg; } to { rotate: 2deg; } }
@keyframes gentle-bob    { from { margin-top: 0; } to { margin-top: -5px; } }
@keyframes sleep-breathe { from { scale: 1; } to { scale: 1.02; } }

/* Twinkle sparkle */
.twinkle {
  display: inline-block;
  animation: twinkle 2.4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.4; transform: scale(0.85) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.1) rotate(15deg); }
}
.brand::before { content: "✨ "; }
.brand-mini::before { content: "⭐ "; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Fredoka','Noto Sans TC',-apple-system,BlinkMacSystemFont,sans-serif;
  color: var(--text);
  font-size: 14px; line-height: 1.6;
  min-height: 100vh;
}
h1,h2,h3,h4 { margin: 0; }
a { color: var(--accent); }

.top {
  position: sticky; top: 0; z-index: 20;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='51'><g fill='%23fbbf24' opacity='.20'><path d='M40 12 L42 18 L48 18 L43 22 L45 28 L40 24 L35 28 L37 22 L32 18 L38 18 Z'/><path d='M200 30 L202 36 L208 36 L203 40 L205 46 L200 42 L195 46 L197 40 L192 36 L198 36 Z'/><path d='M280 18 L281 22 L285 22 L282 24 L283 28 L280 26 L277 28 L278 24 L275 22 L279 22 Z'/></g></svg>") repeat-x,
    linear-gradient(180deg, #fef7e5 0%, #f5e6c8 100%);
  backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--border-strong);
  box-shadow: 0 2px 8px rgba(107,68,35,.08);
  padding: 12px 24px;
  display: flex; align-items: center; gap: 14px; height: 51px;
  position: relative;
}
.top { z-index: 20; }
.brand, .brand-mini {
  font-family: var(--hand);
  font-weight: 700; font-size: 22px;
  color: var(--frame); letter-spacing: .5px;
}
.brand-mini { font-size: 18px; color: var(--text-soft); }
.dot { color: var(--text-mute); margin: 0 8px; }
.meta { color: var(--text-mute); margin-left: auto; font-size: 13px; font-family: var(--hand); font-size: 18px; }
.header-widgets { display: flex; gap: 10px; align-items: center; margin-left: 12px; }
.pts-badge, .draw-btn {
  border: 2px solid var(--border-strong);
  padding: 7px 14px;
  border-radius: 100px;
  font: inherit;
  font-family: var(--hand);
  font-size: 17px;
  cursor: pointer;
  color: var(--frame);
  background: linear-gradient(180deg, #fff8e1 0%, #ffe6a3 100%);
  box-shadow: 0 3px 0 var(--frame-2), 0 4px 10px rgba(107,68,35,.14);
  transition: transform .1s, box-shadow .1s;
  white-space: nowrap;
}
.pts-badge:hover, .draw-btn:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--frame-2), 0 3px 8px rgba(107,68,35,.2); }
.pts-badge .pts-num { font-weight: 700; }
.draw-btn { background: linear-gradient(180deg, #ffd968 0%, #f59e0b 100%); color: white; text-shadow: 0 1px 1px rgba(107,68,35,.3); }
.draw-btn.disabled { opacity: .55; cursor: not-allowed; }

/* Points teaser popover */
.pts-pop {
  position: fixed; top: 60px; right: 24px; z-index: 30;
  background: var(--card);
  border: 3px solid var(--frame-2);
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 240px;
  box-shadow: 0 12px 30px rgba(107,68,35,.24);
  font-family: var(--hand);
}
.pts-pop-total { font-size: 22px; color: var(--frame); font-weight: 700; margin-bottom: 8px; text-align: center; }
.pts-pop-body { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); font-size: 15px; }
.pt-row { display: flex; justify-content: space-between; color: var(--text-soft); }
.pt-row b { color: var(--accent); font-weight: 700; }
.pts-pop-teaser { margin-top: 10px; font-size: 15px; color: var(--text-mute); text-align: center; }
.pts-pop-teaser b { color: var(--accent); }

/* Card-draw modal */
[hidden] { display: none !important; }
.draw-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.draw-backdrop {
  position: absolute; inset: 0;
  background: rgba(107,68,35,.55);
  backdrop-filter: blur(4px);
  animation: fade-in .3s ease-out;
}
.draw-panel {
  position: relative;
  background: linear-gradient(180deg, #fef7e5 0%, #fdf4e0 100%);
  border: 4px solid var(--frame);
  border-radius: 22px;
  padding: 26px 30px 22px;
  max-width: 420px; width: 100%;
  box-shadow: 0 20px 60px rgba(107,68,35,.4);
  animation: pop-in .35s cubic-bezier(.34,1.56,.64,1);
}
.draw-close {
  position: absolute; top: 10px; right: 14px;
  background: transparent; border: none; cursor: pointer;
  font-size: 24px; color: var(--frame); font-weight: 700; line-height: 1;
}
.draw-title { text-align: center; font-family: var(--hand); font-size: 26px; color: var(--frame); margin-bottom: 16px; }
.tw-date { font-size: 18px; color: var(--text-mute); }
.card-stage { perspective: 1200px; padding: 12px 0; display: flex; justify-content: center; }
.card {
  width: 240px; height: 340px;
  position: relative; cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.4,.1,.2,1);
}
.card.flipped { transform: rotateY(180deg); cursor: default; }
.card.drawing {
  animation: card-draw-shuffle 500ms ease-in-out;
  cursor: default;
  pointer-events: none;
}
@keyframes card-draw-shuffle {
  0%   { transform: rotate(0deg) scale(1);       filter: brightness(1) drop-shadow(0 0 0 rgba(251,191,36,0)); }
  20%  { transform: rotate(-6deg) scale(1.04);   filter: brightness(1.06) drop-shadow(0 0 6px rgba(251,191,36,.4)); }
  40%  { transform: rotate(6deg) scale(1.06);    filter: brightness(1.12) drop-shadow(0 0 12px rgba(251,191,36,.7)); }
  60%  { transform: rotate(-4deg) scale(1.07);   filter: brightness(1.15) drop-shadow(0 0 14px rgba(251,191,36,.8)); }
  80%  { transform: rotate(4deg) scale(1.04);    filter: brightness(1.08) drop-shadow(0 0 8px rgba(251,191,36,.5)); }
  100% { transform: rotate(0deg) scale(1);       filter: brightness(1) drop-shadow(0 0 0 rgba(251,191,36,0)); }
}
.card-face {
  position: absolute; inset: 0;
  border-radius: 18px;
  overflow: hidden;
  backface-visibility: hidden;
  border: 3px solid var(--frame-2);
  box-shadow: 0 8px 20px rgba(107,68,35,.28);
}
.card-back {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='%23fbbf24' opacity='.6'><path d='M30 20 L34 32 L46 32 L37 40 L40 52 L30 45 L20 52 L23 40 L14 32 L26 32 Z'/><path d='M90 90 L92 98 L100 98 L94 103 L96 111 L90 107 L84 111 L86 103 L80 98 L88 98 Z'/><path d='M20 90 L22 96 L28 96 L23 100 L25 106 L20 103 L15 106 L17 100 L12 96 L18 96 Z'/></g></svg>") repeat,
    linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  text-align: center;
}
.back-glyph { font-size: 82px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); animation: twinkle 2.5s ease-in-out infinite; }
.back-hint { font-family: var(--hand); font-size: 22px; letter-spacing: 1px; padding: 0 12px; }
.card-front {
  background: linear-gradient(180deg, #fffdf5 0%, #fff2c7 100%);
  transform: rotateY(180deg);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 12px 12px;
}
.card-img { width: 165px; height: 165px; object-fit: contain; margin: 8px 0 6px; filter: drop-shadow(0 4px 8px rgba(107,68,35,.18)); }
.fortune-block { text-align: center; padding: 6px 4px 0; border-top: 2px dashed var(--border-strong); width: 92%; margin-top: 4px; }
.fortune-label { font-family: var(--hand); font-size: 15px; color: var(--text-mute); letter-spacing: 1px; margin-bottom: 4px; }
.fortune-text { font-family: var(--hand); font-size: 20px; color: var(--frame); line-height: 1.4; padding: 0 4px 6px; }
.draw-footer { text-align: center; font-family: var(--hand); font-size: 17px; color: var(--text-mute); min-height: 24px; margin-top: 8px; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
  from { transform: scale(.75); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.back { color: var(--frame); text-decoration: none; font-size: 15px; margin-right: 8px; font-family: var(--hand); font-weight: 500; }
.back:hover { color: var(--accent); }

/* -------- INDEX -------- */
.filters {
  position: fixed; left: 0; top: 51px; bottom: 0;
  width: 240px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='400'><g fill='%23c8a05e' opacity='.10'><path d='M40 60 L43 68 L51 68 L45 74 L47 82 L40 78 L33 82 L35 74 L29 68 L37 68 Z'/><path d='M190 200 L192 208 L200 208 L194 213 L196 220 L190 216 L184 220 L186 213 L180 208 L188 208 Z'/><path d='M30 320 L32 328 L40 328 L34 333 L36 341 L30 337 L24 341 L26 333 L20 328 L28 328 Z'/></g></svg>") repeat-y,
    linear-gradient(180deg, #fef7e5 0%, #fdf4e0 100%);
  border-right: 3px solid var(--border);
  padding: 24px 20px 24px;
  overflow-y: auto;
}
.filters h3 { font-family: var(--hand); font-size: 22px; color: var(--frame); letter-spacing: .5px; margin-bottom: 18px; }
.filters h3::before { content: "✨ "; }
.f-group { margin-bottom: 22px; }
.f-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-mute); margin-bottom: 8px; font-weight: 500; }
.f-group input[type=range] { width: 100%; accent-color: var(--accent); }
.f-group input[type=text] { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.checks { display: flex; flex-direction: column; gap: 6px; }
.checks label { font-size: 13px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.f-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }

.grid {
  margin-left: 240px;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  box-shadow: 0 2px 0 var(--border), 0 4px 10px rgba(107,68,35,.06);
}
.card::before {
  content: "⭐";
  position: absolute; top: 8px; right: 10px;
  font-size: 14px; opacity: 0; transition: opacity .2s;
}
.card::after {
  content: "";
  position: absolute; bottom: 6px; left: 6px; right: 6px;
  height: 3px; border-radius: 0 0 12px 12px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  opacity: .5;
}
.card:hover { box-shadow: 0 4px 0 var(--border-strong), 0 12px 24px rgba(180,83,9,.18); border-color: var(--accent-2); transform: translateY(-3px) rotate(-.3deg); }
.card:hover::before { opacity: 1; animation: twinkle 1s ease-in-out infinite; }

.card-head { display: flex; align-items: flex-start; gap: 12px; }
.badge {
  flex-shrink: 0; width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; letter-spacing: -.5px;
  position: relative;
}
.badge::after {
  content: "★"; position: absolute;
  top: -6px; right: -4px;
  color: var(--star); font-size: 14px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
  animation: twinkle 3s ease-in-out infinite;
}
.fit-strong { background: var(--strong-bg); color: var(--strong); }
.fit-ok     { background: var(--ok-bg); color: var(--ok); }
.fit-weak   { background: var(--weak-bg); color: var(--weak); }
.fit-poor   { background: var(--poor-bg); color: var(--poor); }
.fit-unknown{ background: var(--weak-bg); color: var(--weak); }

.card-title { flex: 1; min-width: 0; }
.card-title .company { font-weight: 600; font-size: 14px; }
.card-title .role { color: var(--text-mute); font-size: 13px; margin-top: 3px; line-height: 1.4; }

.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 100px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
}
.tag-role { background: var(--accent-light); color: var(--accent); }
.tag-sen-associate { background: var(--cv-bg); color: var(--cv-fg); }
.tag-sen-manager { background: var(--ok-bg); color: var(--ok); }
.tag-sen-senior_plus { background: var(--jd-bg); color: var(--jd-fg); }
.tag-sen-intern { background: var(--weak-bg); color: var(--text-mute); }

.checks .cnt { color: var(--text-mute); font-size: 11px; margin-left: 2px; }

.card-pips { display: flex; gap: 4px; }
.pip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; min-width: 20px; padding: 0 6px;
  border-radius: 100px;
  background: var(--weak-bg); color: var(--text-mute);
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
  opacity: .55;
}
.pip.done {
  background: var(--strong-bg); color: var(--strong);
  opacity: 1;
}

.card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--text-mute); }
.card-meta .chip { background: var(--weak-bg); padding: 3px 9px; border-radius: 100px; }

.step-filters { display: flex; flex-direction: column; gap: 6px; }
.step-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-soft); }
.step-toggle input { margin: 0; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); display: inline-block; }
.step-toggle input:checked + .step-dot { background: var(--strong); }

/* -------- DETAIL -------- */
.hero {
  padding: 34px 40px 26px;
  display: flex; align-items: center; gap: 24px;
  max-width: 1280px; margin: 20px auto 0;
  background: linear-gradient(135deg, var(--card) 0%, var(--card-2) 100%);
  border: 3px solid var(--frame-2);
  border-radius: var(--radius);
  position: relative;
  box-shadow:
    inset 0 0 0 6px var(--card),
    inset 0 0 0 8px var(--frame-2),
    0 10px 30px rgba(107,68,35,.16);
}
.hero::before, .hero::after {
  content: "⭐";
  position: absolute; font-size: 20px;
  color: var(--accent-3);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.15));
}
.hero::before { top: 12px; left: 14px; }
.hero::after  { top: 12px; right: 14px; animation: twinkle 2.4s ease-in-out infinite; }
.hero .badge { width: 66px; height: 66px; font-size: 24px; border-radius: 14px; }
.hero-main { flex: 1; min-width: 0; }
.hero-title { font-size: 22px; font-weight: 600; }
.hero-sub { color: var(--text-mute); font-size: 13px; margin-top: 5px; }
.hero-actions { margin-top: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: white; padding: 9px 18px; border-radius: 100px;
  text-decoration: none; font-size: 14px; font-weight: 600; display: inline-block;
  box-shadow: 0 3px 0 var(--frame), 0 4px 10px rgba(107,68,35,.2);
  transition: transform .1s, box-shadow .1s;
}
.btn:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--frame), 0 3px 8px rgba(107,68,35,.25); }
.btn::before { content: "⭐ "; }
.chip { background: var(--accent-light); color: var(--accent); padding: 5px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); }

.tabs {
  padding: 0 40px;
  border-bottom: 3px solid var(--border);
  display: flex; gap: 4px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  position: sticky; top: 51px; z-index: 10;
  max-width: 1280px; margin: 20px auto 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tabs button {
  background: transparent; border: none;
  padding: 14px 20px;
  cursor: pointer; font: inherit;
  color: var(--text-mute);
  border-bottom: 3px solid transparent;
  font-family: var(--hand); font-size: 20px; font-weight: 500;
  transition: color .2s;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent-2); font-weight: 700; }

.tab-panel { display: none; padding: 28px 40px 60px; max-width: 1280px; margin: 0 auto; background: var(--card); border-left: 3px solid var(--border); border-right: 3px solid var(--border); border-bottom: 3px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.tab-panel.active { display: block; }

.two-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; }

.s-section { margin-bottom: 40px; position: relative; }
.s-title {
  font-family: var(--hand); font-size: 30px; font-weight: 700;
  color: var(--frame); letter-spacing: .5px;
  margin-bottom: 4px;
  display: inline-block;
  position: relative;
}
.s-title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 5px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 5'><path d='M 0 3 Q 12 0 25 3 T 50 3 T 75 3 T 100 3' stroke='%23d97706' stroke-width='1.4' fill='none' opacity='.6'/></svg>") repeat-x;
  background-size: 100px 5px;
}
.s-sub { color: var(--text-mute); font-size: 13px; margin: 0 0 20px; font-style: italic; }
.reasoning { color: var(--text-soft); }

/* Step 0 */
.req { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 16px; font-family: inherit; font-size: 13px; white-space: pre-wrap; max-height: 500px; overflow-y: auto; margin: 0; line-height: 1.65; }
.shot { width: 100%; border: 1px solid var(--border); border-radius: 10px; margin-top: 14px; }

.bars { display: flex; flex-direction: column; gap: 10px; }
.bar { display: grid; grid-template-columns: 100px 1fr 30px; gap: 12px; align-items: center; font-size: 12px; }
.bar-label { color: var(--text-mute); }
.bar-track { height: 6px; background: var(--weak-bg); border-radius: 3px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.bar-val { color: var(--text-mute); text-align: right; }

/* Markdown fallback */
.markdown h1, .markdown h2 { font-size: 17px; margin: 20px 0 8px; }
.markdown h3 { font-size: 14px; margin: 16px 0 6px; color: var(--text-soft); }
.markdown p, .markdown li { line-height: 1.7; }
.markdown table { border-collapse: collapse; margin: 12px 0; width: 100%; background: #fff; border-radius: 8px; overflow: hidden; }
.markdown th, .markdown td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; font-size: 13px; vertical-align: top; }
.markdown th { background: var(--weak-bg); font-weight: 600; }
.markdown code { background: var(--weak-bg); padding: 2px 6px; border-radius: 4px; font-size: 12.5px; }

/* Research table */
.research { border-collapse: collapse; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.research th, .research td { border-bottom: 1px solid var(--border); padding: 10px 14px; font-size: 12.5px; text-align: left; vertical-align: top; }
.research th { color: var(--text-mute); text-transform: uppercase; letter-spacing: .3px; font-size: 11px; font-weight: 500; background: var(--weak-bg); }
.research .src { font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: .5px; }
.research .src-dcard { color: #ec4899; }
.research .src-ptt { color: #10b981; }
.research .src-medium { color: #6366f1; }
.research .sum { max-width: 400px; color: var(--text-mute); }
.research .rel { font-weight: 600; text-align: right; }
.research tr.rel-hi .rel { color: var(--strong); }
.research a { color: var(--accent); text-decoration: none; }
.research a:hover { text-decoration: underline; }

/* -------- STEP 1: Highlights + Gap + Summary -------- */
.hi-list { display: flex; flex-direction: column; gap: 14px; }
.hi-card {
  display: grid; grid-template-columns: 68px 1fr;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.hi-num {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white; font-weight: 700; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -1px;
}
.hi-body { padding: 18px 20px; }
.hi-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.hi-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.hi-row:first-of-type { border-top: none; padding-top: 4px; }
.hi-tag {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 10px;
  border-radius: 100px; font-size: 11px; font-weight: 600;
  letter-spacing: .3px; white-space: nowrap;
  align-self: start;
}
.hi-tag.jd  { background: var(--jd-bg); color: var(--jd-fg); }
.hi-tag.cv  { background: var(--cv-bg); color: var(--cv-fg); }
.hi-tag.act { background: var(--act-bg); color: var(--act-fg); }
.hi-text { font-size: 13px; line-height: 1.7; color: var(--text-soft); }
.hi-text p:first-child { margin-top: 0; }
.hi-text p:last-child { margin-bottom: 0; }

.gap-list { display: flex; flex-direction: column; gap: 8px; }
.gap-row {
  display: grid; grid-template-columns: 160px 1fr 1fr 1.2fr;
  gap: 12px; padding: 16px; background: #fff;
  border: 1px solid var(--border); border-radius: 10px;
}
.gap-aspect { font-weight: 600; font-size: 13px; padding-top: 20px; }
.gap-cell { font-size: 12.5px; line-height: 1.65; }
.cell-tag {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; padding: 2px 8px; border-radius: 100px; margin-bottom: 6px;
}
.gap-ideal .cell-tag { background: var(--jd-bg); color: var(--jd-fg); }
.gap-current .cell-tag { background: var(--cv-bg); color: var(--cv-fg); }
.gap-action .cell-tag { background: var(--act-bg); color: var(--act-fg); }

.summary-quote {
  background: linear-gradient(135deg, #faf5ff, #eff6ff);
  border-left: 4px solid var(--accent);
  padding: 22px 26px; border-radius: 12px;
  position: relative;
}
.summary-quote .q-mark {
  position: absolute; top: 6px; left: 14px;
  font-size: 46px; font-weight: 700; color: var(--accent-light);
  line-height: 1;
}
.summary-text { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.75; color: var(--text); }

/* -------- STEP 3: Interview flow + questions + prep -------- */
.flow-block { margin-bottom: 24px; }
.flow-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--accent); }
.rounds { display: flex; flex-direction: column; gap: 12px; position: relative; }
.rounds::before {
  content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px;
  width: 2px; background: linear-gradient(180deg, var(--accent-light), transparent);
}
.round { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.round-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  color: var(--accent); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.round-body { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.round-title { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.round-text { font-size: 13px; color: var(--text-soft); line-height: 1.65; }
.round-text p:first-child { margin-top: 0; }
.round-text p:last-child { margin-bottom: 0; }

.flow-note { padding: 12px 16px; background: var(--weak-bg); border-radius: 10px; }
.note-body { font-size: 13px; color: var(--text-soft); }

.cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cite {
  display: inline-block;
  padding: 3px 9px;
  background: var(--accent-light); color: var(--accent);
  font-size: 11px; border-radius: 100px; font-weight: 500;
}

.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.q-cat { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.q-cat-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); margin-bottom: 12px; }
.q-list { display: flex; flex-direction: column; gap: 10px; }
.q-card {
  padding: 12px 14px; border-radius: 8px;
  background: var(--weak-bg);
}
.q-card.reverse { background: linear-gradient(135deg, #faf5ff, #ffffff); border: 1px solid var(--accent-light); }
.q-text { font-size: 13px; line-height: 1.65; }
.q-text p:first-child { margin-top: 0; }
.q-text p:last-child { margin-bottom: 0; }
.reverse-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }

.prep-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.prep-item { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.prep-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--strong-bg); color: var(--strong);
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.prep-body { font-size: 13.5px; line-height: 1.7; }
.prep-body p:first-child { margin-top: 0; }
.prep-body p:last-child { margin-bottom: 0; }

.refs { padding-left: 22px; margin: 0; font-size: 12.5px; color: var(--text-soft); }
.refs li { padding: 6px 0; line-height: 1.5; }
.ref-tag {
  display: inline-block; margin-right: 6px;
  background: var(--weak-bg); color: var(--text-mute);
  padding: 1px 8px; border-radius: 4px;
  font-size: 11px; font-family: 'SF Mono', Menlo, monospace;
}

/* Step 2 people cards */
.person { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.p-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; }
.p-head a { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 14px; }
.p-title { color: var(--text-mute); font-size: 13px; }
.dm summary { color: var(--text-mute); font-size: 12px; cursor: pointer; margin-top: 8px; }
.dm pre { background: var(--weak-bg); padding: 12px 14px; border-radius: 8px; font-size: 12.5px; white-space: pre-wrap; margin: 8px 0 0; font-family: inherit; line-height: 1.6; }

.empty { color: var(--text-mute); font-style: italic; padding: 20px 0; }