/* ==========================================================================
   ATS Bridge — side panel "G" visual layer (direct rebuild)
   Loaded after flow-g.css. Visual only: no ids or behaviour depend on it.
   ========================================================================== */

:root {
  --g-ink: #101114;
  --g-ink-2: #3b3d45;
  --g-muted: #767884;
  --g-faint: #a3a5b0;
  --g-line: #eceef3;
  --g-canvas: #f6f7fa;
  --g-surface: #ffffff;
  --g-blue: #0e8cfd;   --g-blue-btn: #0f86fc;   --g-blue-tint: #eef5fe;
  --g-pink: #fe41a6;   --g-pink-tint: #fef4f8;
  --g-purple: #7a4cf7; --g-purple-btn: #7653ec; --g-purple-tint: #f6f3fe;
  --g-green: #38c962;  --g-green-btn: #12ab6c;  --g-green-tint: #edfaf3;
  --g-ease: cubic-bezier(.2, .8, .2, 1);
  --g-spring: cubic-bezier(.34, 1.42, .64, 1);
  --g-font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", sans-serif;
}

html { background: var(--g-canvas); }

body {
  margin: 8px;
  padding: 0 0 6px;
  border-radius: 22px;
  background: var(--g-surface);
  box-shadow: 0 0 0 1px rgba(16, 17, 20, .035), 0 1px 3px rgba(16, 17, 20, .04);
  color: var(--g-ink);
  font-family: var(--g-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- header ---------- */
.header { padding: 18px 14px 2px 20px; align-items: center; }
.header-brand h3 {
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -.012em;
  color: var(--g-ink);
}
body #manageRulesBtn {
  width: 40px !important; height: 40px; min-height: 40px !important;
  background: #f0f1f4 !important;
  color: var(--g-ink) !important;
  transition: transform .18s var(--g-ease), background-color .18s ease !important;
}
body #manageRulesBtn:hover { background: #e7e8ed !important; }
body #manageRulesBtn:active { transform: scale(.92); }
body #manageRulesBtn svg { width: 22px; height: 22px; stroke-width: 2.1; transition: transform .5s var(--g-ease); }
body #manageRulesBtn:hover svg { transform: rotate(45deg); }

/* ---------- character icons ---------- */
.blob {
  font-size: 44px;
  width: 1.16em;
  height: 1em;
  transform: none;
  background-size: 100% 100%;
  filter: none;
}
.blob::before,
.blob::after {
  top: .3em;
  width: .105em;
  height: .27em;
  border-radius: 1em;
  background: #121318;
  transform: rotate(-6deg);
  transform-origin: 50% 60%;
  animation: g-blink 6.5s infinite;
}
.blob::before { left: .56em; }
.blob::after  { left: .78em; }
.flow-steps li:nth-child(2) .blob::before, .flow-steps li:nth-child(2) .blob::after { animation-delay: 1.7s; }
.flow-steps li:nth-child(3) .blob::before, .flow-steps li:nth-child(3) .blob::after { animation-delay: 3.4s; }
.flow-card .blob::before, .flow-card .blob::after { animation-delay: 2.6s; }

@keyframes g-blink {
  0%, 95.5%, 100% { transform: rotate(-6deg) scaleY(1); }
  97% { transform: rotate(-6deg) scaleY(.12); }
}

/* soft mochi silhouettes with a faint top light, matching the G characters */
.blob-blue { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'><path fill='%230e8cfd' d='M30 16C38 6 54 4 64 10C70 4 86 4 96 14C108 22 114 38 110 52C114 66 104 82 88 88C72 96 46 96 30 90C14 84 4 70 8 56C2 44 8 28 18 22C22 18 26 16 30 16Z'/></svg>"); }
.blob-pink { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'><path fill='%23fe41a6' d='M18 32C26 14 48 6 70 8C94 10 112 26 112 48C112 72 94 90 66 92C50 94 36 92 26 86C12 80 4 68 7 54C8 44 12 38 18 32Z'/></svg>"); }
.blob-green { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'><path fill='%2338c962' d='M22 24C32 9 54 4 74 8C96 12 112 30 110 52C108 76 90 92 64 94C38 96 14 84 8 62C4 46 10 34 22 24Z'/></svg>"); }
.blob-purple { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'><path fill='%237a4cf7' d='M28 16C38 7 54 6 64 11C80 5 100 14 106 32C114 46 112 66 100 78C90 92 68 96 48 94C28 92 10 80 8 60C6 46 12 34 19 28C21 22 24 19 28 16Z'/></svg>"); }

/* ---------- step header 取る → 確かめる → 入れる ---------- */
.flow-steps { margin: 14px 26px 18px; }
.flow-steps li { gap: 9px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.flow-steps li > span:last-child { gap: 3px; }
.flow-steps li small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: #8b8d98; }
.flow-steps .blob { font-size: 40px; transition: transform .45s var(--g-spring); }
.flow-steps li:not(:last-child)::after {
  top: 21px;
  left: calc(50% + 38px);
  width: calc(100% - 76px);
  height: 2px;
  background: linear-gradient(90deg, var(--g-done, #dcdee6) var(--g-fill, 0%), #dcdee6 var(--g-fill, 0%));
  transition: --g-fill .6s var(--g-ease);
}
@property --g-fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

/* done badge on a step (driven by the real candidate-lock state) */
.flow-steps li > .blob { position: relative; }
.flow-steps li::before {
  content: "";
  position: absolute;
  top: 25px;
  left: calc(50% + 10px);
  z-index: 1;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%2312ab6c'/><path d='M7.5 12.3l3 3 6-6.3' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px no-repeat;
  box-shadow: 0 1px 3px rgba(16,17,20,.18);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s ease, transform .45s var(--g-spring);
}
body:has(#candidateLockPanel[data-state="locked"]) .flow-steps li:nth-child(1)::before { opacity: 1; transform: scale(1); }
body:has(#candidateLockPanel[data-state="locked"]) .flow-steps li:nth-child(1)::after { --g-fill: 100%; --g-done: #9ccdfd; }
body:has(#candidateLockPanel[data-state="locked"]) .flow-steps li:nth-child(2) .blob { animation: g-hop .7s var(--g-spring) .25s 1; }
@keyframes g-hop { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-5px) scale(1.04); } }

/* ---------- cards ---------- */
.flow-card {
  grid-template-columns: 50px minmax(0, 1fr);
  column-gap: 12px;
  margin: 0 12px 12px;
  padding: 17px 12px 13px;
  border-radius: 16px;
  transition: box-shadow .3s ease, background-color .3s ease;
}
.flow-card h2 { font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: var(--g-ink); }
.flow-card h2 .blob { grid-row: 1 / span 2; align-self: start; margin-top: 0; font-size: 43px; }
.flow-card p {
  margin: 3px 0 14px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--g-muted);
  letter-spacing: .005em;
}
.flow-card-capture { background: var(--g-blue-tint); }
.flow-card-review  { background: var(--g-pink-tint); }
.flow-card-teach   { background: var(--g-purple-tint); }
.flow-card-fill    { background: var(--g-green-tint); }

/* ---------- primary buttons ---------- */
body #extractFromPageBtn,
body #bulkFillBtn,
body #startLearningBtn {
  position: relative;
  overflow: hidden;
  height: 43px !important;
  min-height: 43px !important;
  line-height: 43px !important;
  border-radius: 13px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  color: #fff !important;
  opacity: 1 !important;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 1px rgba(16,17,20,.06), 0 4px 12px -6px var(--g-btn-glow, rgba(15,134,252,.55)) !important;
  transition: transform .16s var(--g-ease), box-shadow .2s ease, background-color .35s ease, filter .2s ease !important;
  -webkit-tap-highlight-color: transparent;
}
body #extractFromPageBtn { background-color: var(--g-blue-btn) !important; --g-btn-glow: rgba(15,134,252,.6); }
body #startLearningBtn   { background: var(--g-purple-btn) !important; --g-btn-glow: rgba(118,83,236,.6); }
body #bulkFillBtn        { background-color: var(--g-green-btn) !important; --g-btn-glow: rgba(18,171,108,.6); }

body #extractFromPageBtn:hover,
body #bulkFillBtn:hover,
body #startLearningBtn:hover { filter: brightness(1.05) saturate(1.03); }
body #extractFromPageBtn:active,
body #bulkFillBtn:active,
body #startLearningBtn:active {
  transform: scale(.975);
  filter: brightness(.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 rgba(0,0,0,0) !important;
}
body #extractFromPageBtn:focus-visible,
body #bulkFillBtn:focus-visible,
body #startLearningBtn:focus-visible { outline: 3px solid rgba(15,134,252,.35); outline-offset: 2px; }

/* press ripple, positioned by flow-g-motion.js */
.g-ripple {
  position: absolute;
  z-index: -1;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255,255,255,.38);
  pointer-events: none;
  animation: g-ripple .6s var(--g-ease) forwards;
}
@keyframes g-ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(46); opacity: 0; } }

/* button states (data-g-state is set from the existing label text) */
body [data-g-state] { transition: background-color .35s ease, transform .16s var(--g-ease) !important; }
body [data-g-state="busy"] { cursor: progress; }
body [data-g-state="busy"]::after {
  content: "" !important;
  display: inline-block;
  width: 14px; height: 14px;
  margin: 0 0 -2px 9px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  animation: g-spin .7s linear infinite;
  vertical-align: baseline;
}
@keyframes g-spin { to { transform: rotate(360deg); } }
body [data-g-state="done"] { background-color: var(--g-green-btn) !important; --g-btn-glow: rgba(18,171,108,.6); }
body [data-g-state="done"]::before {
  content: "" !important;
  display: inline-block;
  width: 18px; height: 18px;
  margin: 0 7px -3px 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' pathLength='1' stroke-dasharray='1' stroke-dashoffset='0'/></svg>") center / contain no-repeat;
  animation: g-pop .45s var(--g-spring);
}
body [data-g-state="done"] { animation: g-success .55s var(--g-ease); }
@keyframes g-pop { from { transform: scale(0) rotate(-20deg); } to { transform: scale(1) rotate(0); } }
@keyframes g-success { 0% { transform: scale(1); } 35% { transform: scale(1.02); } 100% { transform: scale(1); } }
body [data-g-state="warn"] { background-color: #f08a00 !important; --g-btn-glow: rgba(240,138,0,.55); animation: g-nudge .4s ease; }
body [data-g-state="error"] { background-color: #e5484d !important; --g-btn-glow: rgba(229,72,77,.55); animation: g-nudge .4s ease; }
@keyframes g-nudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ---------- chips ---------- */
.flow-chips { gap: 8px; margin: 0 0 13px; }
.flow-chips button {
  height: 31px; min-height: 31px; line-height: 31px;
  padding: 0 19px;
  border-radius: 999px;
  background: #e8e6f0;
  color: #4a4b55;
  font-size: 12.5px; font-weight: 600;
  transition: background-color .18s ease, transform .16s var(--g-ease), color .18s ease;
}
.flow-chips button:hover { background: #ded9f0; }
.flow-chips button:active { transform: scale(.95); }
.flow-chips button[aria-pressed="true"], .flow-chips button.active { background: var(--g-purple-btn); color: #fff; }

/* ---------- review list (candidate lock + next candidate) ---------- */
body .candidate-lock-panel {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  column-gap: 13px;
  padding: 12px 12px 4px;
  border: 0 !important;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16,17,20,.03) !important;
  transition: background-color .3s ease;
}
.candidate-lock-dot { width: 40px; height: 40px; background: #f0f1f4; color: #5d5f6b; transition: background-color .35s ease, color .35s ease; }
.candidate-lock-panel[data-state="locked"] .candidate-lock-dot { animation: g-pop .5s var(--g-spring); }
.candidate-lock-main { font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; color: var(--g-ink); }
.candidate-lock-panel[data-state="locked"] .candidate-lock-main { animation: g-rise .45s var(--g-ease); }
@keyframes g-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.candidate-lock-title > span:not(.candidate-lock-dot) { font-size: 11.5px; color: #8b8d98; }

body .candidate-lock-toggle,
body .candidate-lock-panel[data-state="off"] .candidate-lock-toggle {
  height: 24px; min-height: 24px; line-height: 24px;
  padding: 0 11px;
  background: #f0f1f4;
  color: #5d5f6b;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--g-ease);
}
body .candidate-lock-panel[data-state="locked"] .candidate-lock-toggle { background: #e3f6ea; color: #12844f; }
body .candidate-lock-toggle:active { transform: scale(.94); }

.candidate-lock-actions { margin: 12px 0 0; padding: 10px 0 8px; border-top: 1px solid var(--g-line); }
body .candidate-lock-actions button { column-gap: 13px; font-size: 14.5px; font-weight: 700; transition: opacity .25s ease; }
body .candidate-lock-actions button:disabled { opacity: .62; }
body .candidate-lock-actions button::before { background-color: #f0f1f4; }
body .candidate-lock-actions button::after { width: 34px; height: 34px; border-radius: 11px; background-color: #f2f3f6; transition: background-color .18s ease, transform .18s var(--g-ease); }
body .candidate-lock-actions button:not(:disabled):hover::after { background-color: #e8e9ee; transform: translateX(2px); }
.candidate-lock-actions button > small { font-size: 11.5px; color: #8b8d98; }
.candidate-lock-meta, .candidate-lock-message { font-size: 12px; color: var(--g-muted); }

/* ---------- inline prompts (gender / attention / shared segment) ---------- */
.flow-card-review .required-gender-prompt:not([hidden]),
.flow-card-review .candidate-attention-prompt:not([hidden]),
.flow-card-review .shared-segment-prompt:not([hidden]) { animation: g-reveal .42s var(--g-ease); }
@keyframes g-reveal { from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0 round 13px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 13px); } }
body .required-gender-prompt {
  margin-top: 10px !important;
  padding: 14px !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(16,17,20,.03) !important;
}
body .required-gender-title { font-size: 14.5px !important; font-weight: 700 !important; color: var(--g-ink) !important; display: flex; align-items: center; gap: 8px; }
body .required-gender-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 0 4px rgba(255,159,10,.16); flex: 0 0 auto; }
body .required-gender-message { margin-top: 4px !important; font-size: 12px !important; line-height: 1.55 !important; color: var(--g-muted) !important; }
body .required-gender-actions { gap: 8px !important; margin-top: 12px !important; }
body #requiredGenderMaleBtn, body #requiredGenderFemaleBtn {
  min-height: 38px !important; height: 38px;
  border-radius: 11px !important;
  border: 0 !important;
  background: #f2f3f6 !important;
  color: var(--g-ink) !important;
  font-size: 14px !important; font-weight: 700 !important;
  transition: background-color .18s ease, color .18s ease, transform .16s var(--g-ease) !important;
}
body #requiredGenderMaleBtn:hover { background: #e4f0ff !important; color: #0a6fd6 !important; }
body #requiredGenderFemaleBtn:hover { background: #ffe6f3 !important; color: #d61f84 !important; }
body #requiredGenderMaleBtn:active, body #requiredGenderFemaleBtn:active { transform: scale(.96); }
body .candidate-attention-prompt { border-radius: 13px !important; background: #fff4f4 !important; color: #b4232b !important; font-size: 12px !important; }

/* ---------- fill card ---------- */
.flow-card-fill .site-select-wrapper { top: 18px; right: 14px; }
.flow-card-fill select.site-dropdown {
  min-height: 28px; height: 28px;
  padding: 0 26px 0 12px;
  border-radius: 999px;
  background-color: rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(16,17,20,.05);
  color: #4a4c57;
  font-size: 11.5px; font-weight: 600;
  transition: box-shadow .18s ease;
}
.flow-card-fill select.site-dropdown:hover { box-shadow: 0 0 0 1px rgba(16,17,20,.12); }
body .bulk-fill-shell > #bulkFillProgress {
  min-height: 43px;
  margin-top: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 13px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18,171,108,.18);
  color: var(--g-ink);
  animation: g-rise .3s var(--g-ease);
}
body .bulk-fill-shell > #bulkFillProgress .bulk-fill-progress-track { background: transparent; }
body .bulk-fill-shell > #bulkFillProgress .bulk-fill-progress-track span {
  background: linear-gradient(90deg, #d9f5e5, #c2efd5) !important;
  -webkit-mask-image: none; mask-image: none;
  filter: none;
  transition: width .45s var(--g-ease);
}
body .bulk-fill-shell > #bulkFillProgress .bulk-fill-progress-track span::before,
body .bulk-fill-shell > #bulkFillProgress .bulk-fill-progress-track span::after { display: none; }
body .bulk-fill-shell > #bulkFillProgress .bulk-fill-progress-copy { color: var(--g-ink); text-shadow: none; gap: 1px; }
body .bulk-fill-shell > #bulkFillProgress .bulk-fill-progress-title { font-size: 13.5px; font-weight: 700; letter-spacing: 0; color: #0d7a4c; }
body .bulk-fill-shell > #bulkFillProgress .bulk-fill-progress-detail { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--g-muted); }
body .bulk-fill-shell > #bulkFillProgress .bulk-fill-progress-label { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #0d7a4c; text-shadow: none; }
body .bulk-fill-shell > #bulkFillProgress[data-state="error"] { box-shadow: inset 0 0 0 1px rgba(229,72,77,.25); }
body .bulk-fill-shell > #bulkFillProgress[data-state="error"] .bulk-fill-progress-track span { background: #fde3e4 !important; }
body .bulk-fill-shell > #bulkFillProgress[data-state="error"] .bulk-fill-progress-title,
body .bulk-fill-shell > #bulkFillProgress[data-state="error"] .bulk-fill-progress-label { color: #c4262e; }

/* ---------- tools ---------- */
.flow-tools {
  margin: 0 12px 10px;
  border: 1px solid #e9ebf0;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.flow-tools:hover { border-color: #dfe1e8; }
.flow-tools > summary { gap: 13px; padding: 11px 14px; transition: background-color .18s ease; }
.flow-tools > summary:hover { background: #fafbfc; }
.flow-tools-icon { width: 38px; height: 38px; background: #f0f1f4; color: #4a4c57; }
.flow-tools-copy strong { font-size: 15px; font-weight: 700; color: var(--g-ink); }
.flow-tools-copy small { font-size: 11.5px; color: #8b8d98; }
.flow-tools-chevron { width: 7px; height: 7px; border-width: 2px; border-color: #9fa1ac; transition: transform .3s var(--g-ease); }
.flow-tools[open] > summary { border-bottom-color: var(--g-line); }
.flow-tools[open] > summary ~ * { animation: g-rise .35s var(--g-ease); }

/* ---------- setup banner ---------- */
#sourceSetupBanner:not([hidden]) { animation: g-rise .35s var(--g-ease); }

/* ==========================================================================
   Teach (learning mode) overlay
   ========================================================================== */
body #learningModeOverlay {
  background: rgba(246, 247, 250, .72) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  justify-content: flex-end !important;
  padding: 10px !important;
  animation: g-fade .28s ease;
}
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
body #learningModeOverlay .learning-mode-dialog {
  max-width: none !important;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  padding: 20px 18px 16px !important;
  border-radius: 22px !important;
  background: #fff !important;
  text-align: left !important;
  box-shadow: 0 0 0 1px rgba(16,17,20,.04), 0 24px 60px -18px rgba(40, 24, 110, .35) !important;
  animation: g-sheet .42s var(--g-ease);
  font-family: var(--g-font);
}
@keyframes g-sheet { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
body #learningModeOverlay .learning-mode-dialog > h3 {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px !important;
  font-size: 19px !important; font-weight: 800 !important; letter-spacing: -.015em;
  color: var(--g-ink) !important;
}
body #learningModeOverlay .learning-mode-dialog > h3::before {
  content: "";
  flex: 0 0 auto;
  width: 40px; height: 36px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 100'><defs><radialGradient id='a' cx='.38' cy='.3' r='.85'><stop offset='0' stop-color='%23986ffb'/><stop offset='.62' stop-color='%237a4cf7'/><stop offset='1' stop-color='%23683be8'/></radialGradient></defs><path fill='url(%23a)' d='M26 14C36 5 52 4 62 8c14-4 30 2 38 14 8 10 9 24 5 35 3 13-3 27-15 34-12 8-29 10-44 7-15 0-29-7-37-19C2 68 2 53 8 42 7 30 14 20 26 14Z'/><rect x='54' y='33' width='9.5' height='22' rx='4.75' fill='%23121318'/><rect x='75' y='33' width='9.5' height='22' rx='4.75' fill='%23121318'/></svg>") center / contain no-repeat;
}
body #learningModeOverlay .g-title-emoji { display: none; }

body #learningModeOverlay .learning-mode-dialog > label:first-of-type {
  display: flex !important; align-items: center; gap: 10px;
  margin-bottom: 14px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: #f6f3fe !important;
  color: #4a3a8c !important;
  font-size: 12px !important; font-weight: 600;
}
body #learningModeOverlay input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px; height: 18px; margin: 0 !important;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #c9c1ea;
  transition: background-color .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
body #learningModeOverlay input[type="checkbox"]:checked {
  background: var(--g-purple-btn) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 13px no-repeat;
  box-shadow: none;
}

/* steps 1 / 2 become a numbered timeline */
body #learningStep1, body #learningStep2, body #learningStepAnchor {
  position: relative;
  margin-bottom: 12px !important;
  padding: 12px 12px 12px 48px;
  border-radius: 14px;
  background: #f7f7f9;
  transition: opacity .35s ease, background-color .35s ease, box-shadow .35s ease !important;
}
body #learningStep1::before, body #learningStep2::before {
  position: absolute; left: 12px; top: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 12.5px/1 var(--g-font);
  color: #fff;
  background: #c3c5ce;
  transition: background-color .35s ease, transform .4s var(--g-spring);
}
body #learningStep1::before { content: "1"; }
body #learningStep2::before { content: "2"; }
body #learningStep1:not([style*="opacity: 0.3"]), body #learningStep2:not([style*="opacity: 0.3"]) {
  background: #f6f3fe;
  box-shadow: inset 0 0 0 1.5px rgba(118,83,236,.35);
}
body #learningStep1:not([style*="opacity: 0.3"])::before, body #learningStep2:not([style*="opacity: 0.3"])::before { background: var(--g-purple-btn); transform: scale(1.06); }
body #learningStep1[style*="opacity: 0.3"], body #learningStep2[style*="opacity: 0.3"] { opacity: .55 !important; }
body #learningStep1Title, body #learningStep2Title { font-size: 14px !important; font-weight: 700 !important; color: var(--g-ink) !important; line-height: 1.4; }
body #learningStep1 > div:not(:first-child), body #learningStep2 > div:not(:first-child) { font-size: 11.5px !important; line-height: 1.55; color: var(--g-muted) !important; }

/* once both clicks are recorded, steps 1 and 2 read as completed */
body #learningModeOverlay:has(#learningStep3[style*="display: flex"]) #learningStep1,
body #learningModeOverlay:has(#learningStep3[style*="display: flex"]) #learningStep2 {
  opacity: 1 !important;
  padding-top: 9px; padding-bottom: 9px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--g-line);
}
body #learningModeOverlay:has(#learningStep3[style*="display: flex"]) #learningStep1 > div:not(:first-child),
body #learningModeOverlay:has(#learningStep3[style*="display: flex"]) #learningStep2 > div:not(:first-child) { display: none; }
body #learningModeOverlay:has(#learningStep3[style*="display: flex"]) #learningStep1::before,
body #learningModeOverlay:has(#learningStep3[style*="display: flex"]) #learningStep2::before {
  top: 50%; margin-top: -11px; width: 22px; height: 22px;
  content: ""; transform: none;
  background: #12ab6c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.5 12.5l3.6 3.6L17.5 8.6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px no-repeat;
  animation: g-pop .45s var(--g-spring);
}
body #learningModeOverlay:has(#learningStep3[style*="display: flex"]) #learningStep1Title,
body #learningModeOverlay:has(#learningStep3[style*="display: flex"]) #learningStep2Title { font-size: 13px !important; color: var(--g-ink-2) !important; }

/* step 3: what was picked + rule form */
body #learningStep3 { gap: 8px !important; animation: g-rise .4s var(--g-ease); }
body #learningModeOverlay #learningStep3 > div:first-child {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px !important; font-weight: 800 !important; color: #12844f !important;
}
body #learningModeOverlay #learningStep3 > div:nth-child(2) {
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #edfaf3 !important;
  font-size: 13px !important;
  line-height: 1.6;
  text-align: left !important;
}
body #learningPickedText { font-size: 15px; color: var(--g-ink); }
body #learningModeOverlay label { color: var(--g-ink-2) !important; }
body #learningModeOverlay #learningStep3 > label,
body #learningModeOverlay #learningTargetPrompt { font-size: 12px !important; font-weight: 700 !important; margin-top: 6px; }

body #learningModeOverlay .learning-mode-dialog select,
body #learningModeOverlay .learning-mode-dialog input[type="text"] {
  min-height: 42px !important;
  padding: 0 34px 0 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background-color: #f4f5f8 !important;
  box-shadow: inset 0 0 0 1px rgba(16,17,20,.04);
  color: var(--g-ink) !important;
  font-size: 13.5px !important; font-weight: 600;
  transition: box-shadow .18s ease, background-color .18s ease;
}
body #learningModeOverlay .learning-mode-dialog select:focus,
body #learningModeOverlay .learning-mode-dialog input[type="text"]:focus { outline: none; background-color: #fff !important; box-shadow: 0 0 0 2px rgba(118,83,236,.45); }
body #learningModeOverlay #learningRuleActionHelp { font-size: 11px !important; line-height: 1.55 !important; color: var(--g-muted) !important; }
body #learningModeOverlay label:has(#learningUrlScopeToggle) {
  display: flex !important; gap: 10px; align-items: flex-start;
  padding: 11px 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #f7f7f9 !important;
}
body #learningModeOverlay #learningCombinationAddBtn {
  align-self: flex-start;
  height: 28px; padding: 0 12px !important;
  background: #efebfb !important;
  color: #5b3fc4 !important;
  font-size: 11.5px !important; font-weight: 700 !important;
}
body #learningModeOverlay #saveLearnedRuleBtn {
  height: 44px; min-height: 44px;
  margin-top: 6px;
  border-radius: 13px !important;
  background: var(--g-green-btn) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 12px -6px rgba(18,171,108,.6) !important;
  font-size: 15.5px !important; font-weight: 700 !important;
  transition: transform .16s var(--g-ease), filter .2s ease !important;
}
body #learningModeOverlay #saveLearnedRuleBtn:active { transform: scale(.975); }
body #learningModeOverlay #cancelLearningBtn {
  display: block; width: 100%;
  height: 42px; min-height: 42px;
  margin-top: 4px;
  border-radius: 13px !important;
  background: #f2f3f6 !important;
  color: #4a4c57 !important;
  font-size: 13.5px !important;
  transition: background-color .18s ease, transform .16s var(--g-ease) !important;
}
body #learningModeOverlay #cancelLearningBtn:hover { background: #e9eaef !important; }
body #learningModeOverlay #cancelLearningBtn:active { transform: scale(.975); }

/* ==========================================================================
   CA message (missing-field request) bottom sheet
   ========================================================================== */
body #missingFieldRequestPopup {
  left: 10px !important; right: 10px !important; bottom: 10px !important;
  padding: 16px 16px 14px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 0 0 1px rgba(16,17,20,.05), 0 -2px 10px rgba(16,17,20,.04), 0 22px 54px -12px rgba(16,17,20,.32) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  font-family: var(--g-font);
  animation: g-sheet .45s var(--g-ease);
}
body #missingFieldRequestPopup.g-leaving { animation: g-sheet-out .28s ease forwards; }
@keyframes g-sheet-out { to { opacity: 0; transform: translateY(24px) scale(.98); } }
body #missingFieldRequestPopup::before {
  content: "";
  display: block;
  width: 36px; height: 4px;
  margin: -6px auto 12px;
  border-radius: 99px;
  background: #dfe1e7;
}
body #missingFieldRequestPopup > div:first-of-type {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px !important;
  font-size: 16px !important; font-weight: 800 !important; letter-spacing: -.01em;
  color: var(--g-ink) !important;
}
body #missingFieldRequestPopup > div:first-of-type::before {
  content: "";
  flex: 0 0 auto;
  width: 30px; height: 27px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 100'><path fill='%23fe41a6' d='M22 20C32 8 50 5 64 8c18 2 34 10 40 25 6 14 4 31-6 42-10 13-28 19-46 18C33 92 16 86 8 73 0 60 2 42 10 31c3-5 7-8 12-11Z'/><rect x='54' y='33' width='9.5' height='22' rx='4.75' fill='%23121318'/><rect x='75' y='33' width='9.5' height='22' rx='4.75' fill='%23121318'/></svg>") center / contain no-repeat;
}
body #missingFieldRequestPopup textarea {
  display: block;
  min-height: 112px !important;
  max-height: 168px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #f5f6f9 !important;
  color: var(--g-ink-2) !important;
  font-family: var(--g-font) !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
  resize: none !important;
}
body #missingFieldRequestPopup > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin-top: 12px !important; }
body #missingFieldRequestPopup button {
  height: 42px; min-height: 42px !important;
  border: 0 !important;
  border-radius: 13px !important;
  font-family: var(--g-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: transform .16s var(--g-ease), background-color .2s ease, filter .2s ease !important;
}
body #missingFieldRequestPopup button:first-of-type { background-color: var(--g-blue-btn) !important; color: #fff !important; box-shadow: 0 4px 12px -6px rgba(15,134,252,.6) !important; }
body #missingFieldRequestPopup button:last-of-type  { background-color: #f2f3f6 !important; color: #4a4c57 !important; }
body #missingFieldRequestPopup button:active { transform: scale(.97); }

/* ==========================================================================
   motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* quiet scrollbars inside sheets */
body #missingFieldRequestPopup textarea::-webkit-scrollbar,
body #learningModeOverlay .learning-mode-dialog::-webkit-scrollbar { width: 6px; }
body #missingFieldRequestPopup textarea::-webkit-scrollbar-thumb,
body #learningModeOverlay .learning-mode-dialog::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(16,17,20,.14); }
body #missingFieldRequestPopup textarea::-webkit-scrollbar-track,
body #learningModeOverlay .learning-mode-dialog::-webkit-scrollbar-track { background: transparent; }