/* مناسب لي — app pages (profile, jobs, admin, trial) on the brand identity.
   Loads after design.css (tokens, header, footer, buttons). Same class names the views already use. */

body { background: var(--bg-alt); }
.workspace { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: #121212; color: #fff; padding: 22px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; }
.sidebar-caption { font-size: var(--fs-12); color: #9a9a92; margin: 8px 12px 14px; font-weight: 600; }
.sidebar nav { display: flex; flex-direction: column; gap: 6px; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-lg); color: #d6d6ce; font-size: 15px; font-weight: 500; transition: background-color var(--ease), color var(--ease); }
.sidebar nav a .i { color: #9a9a92; }
.sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar nav a.active { background: var(--lime); color: #121212; font-weight: 600; }
.sidebar nav a.active .i { color: #121212; }
.sidebar-help { margin-top: auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 16px; font-size: var(--fs-14); }
.sidebar-help b { color: var(--lime); }
.sidebar-help p { line-height: 1.8; color: #b9b9b2; margin-top: 4px; }
.workspace-body { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
/* The footer stays at the bottom of a short page (owner, 2026-10-16). */
.workspace-body > main { flex: 1 0 auto; width: 100%; margin: 0 auto; }
.workspace-header { position: sticky; top: 0; z-index: 20; min-height: 60px; padding: 0 36px; border-bottom: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.local-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--muted); font-weight: 500; }
.local-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.workspace main { max-width: 1080px; padding: 32px 36px 60px; margin: auto; }
.workspace .ws-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: var(--fs-12); color: var(--muted); padding: 16px 36px; border-top: 1px solid var(--line); background: #fff; }
.ws-footer a { color: var(--ink); font-weight: 600; }
.ws-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ws-footer small { width: 100%; color: #8a8a84; }

/* trial (single column) */
.trial main { width: min(1160px, calc(100% - 48px)); margin: auto; padding: 24px 0 60px; }
.trial .hero { background: none; color: var(--ink); padding: 40px 0 24px; max-width: 780px; overflow: visible; }
.trial .hero::before, .trial .hero::after { display: none; }
.trial .hero h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.4; margin: 10px 0; }
.trial .hero h1 span { color: var(--muted); }
.trial .hero > p:last-child { color: var(--muted); font-size: var(--fs-18); }
.steps { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.steps a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: var(--fs-14); }
.steps a:hover { border-color: #121212; }

/* shared content blocks */
.page-heading h1 { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.4; margin: 6px 0; }
.page-heading > p:last-child { color: var(--muted); margin-bottom: 26px; }
.eyebrow { color: #4a4a44; }
h2 { font-size: var(--fs-24); margin: 4px 0 14px; }
h3 { margin: 8px 0; font-size: var(--fs-20); }
h4 { margin: 12px 0 6px; font-size: var(--fs-16); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px; margin-bottom: 22px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.section-head { margin: 4px 0 18px; }
.section-head h2 { margin-bottom: 0; }
.tag { white-space: nowrap; }
.upload { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px; background: var(--bg-alt); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.upload label { font-weight: 600; }
.upload small { width: 100%; color: var(--muted); }
input, select { font: inherit; border-radius: var(--r); padding: 10px 14px; border: 1px solid var(--line-2); background: #fff; max-width: 100%; }
input:focus, select:focus { outline: 3px solid #121212; outline-offset: 2px; }
button:not(.button):not(.nav-toggle):not(.plan-card):not(.bare):not(.quiet):not(.ws-toggle):not(.ad-btn):not(.ad-x):not(.ad-plan) { font: inherit; font-weight: 600; border: 0; border-radius: var(--r); padding: 12px 18px; background: var(--lime); color: #121212; cursor: pointer; transition: background-color var(--ease); }
button:not(.button):not(.nav-toggle):not(.plan-card):not(.bare):not(.quiet):not(.ws-toggle):not(.ad-btn):not(.ad-x):not(.ad-plan):hover { background: #c9e33c; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.stats div { padding: 16px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: var(--fs-14); color: var(--muted); }
.stats b { display: block; font-size: 30px; color: #121212; line-height: 1.2; font-variant-numeric: tabular-nums; }
.muted, small { color: var(--muted); }
.notice { background: none; border: 0; color: var(--muted); padding: 0; border-radius: 0; margin: 8px 0 12px; font-size: var(--fs-14); line-height: 1.8; }
.notice[role=alert], .notice.validation-summary-errors { color: #9f302b; }
.notice.validation-summary-valid { display: none; }
.notice a { color: #121212; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
details { border-top: 1px solid var(--line); margin-top: 14px; padding: 12px 0; }
summary { cursor: pointer; font-weight: 600; color: #121212; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.8 'IBM Plex Sans Arabic', Tahoma, sans-serif; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.source-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.source-grid article { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow-wrap: anywhere; background: #fff; }
blockquote { font-size: var(--fs-14); color: var(--muted); margin: 8px 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--lime); }
.error { color: #b8453f; font-size: var(--fs-12); }

@media (max-width: 850px) {
  .workspace { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .workspace-header { min-height: 52px; padding: 0 18px; font-size: var(--fs-14); }
  .workspace main { padding: 22px 18px 40px; }
  .section-head { align-items: start; }
  .section-head { flex-direction: column; }
  .panel { padding: 18px; }
  .source-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .trial main { width: calc(100% - 32px); }
}

/* ---------- funnel (after upload): one direction, no exits ---------- */
body.funnel { background: var(--bg-alt); }
.funnel-bar { background: #fff; border-bottom: 1px solid var(--line); }
.funnel-bar .wrap { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-14); font-weight: 600; padding: 6px 10px; border-radius: var(--r); }
.stepper li .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-alt); border: 1px solid var(--line-2); font-size: var(--fs-12); font-weight: 700; color: var(--muted); }
.stepper li.now { color: #121212; }
.stepper li.now .n { background: var(--lime); border-color: var(--lime); color: #121212; }
.stepper li.done .n { background: #121212; border-color: #121212; color: var(--lime); }
.stepper li + li::before { content: ""; width: 18px; height: 1px; background: var(--line-2); margin-inline-end: 6px; }
.secure { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-14); }
.secure .i { color: #121212; }
.funnel-main { padding: 40px 0 60px; }
.fstep { max-width: 640px; margin-inline: auto; }
.fstep.wide { max-width: 960px; }
.fstep h1 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.4; margin: 6px 0 10px; }
.fstep .lead { color: var(--muted); font-size: var(--fs-18); margin-bottom: 22px; }
.fstep .lead b { color: #121212; }
.fform { display: grid; gap: 16px; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; gap: 14px; background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color var(--ease), background-color var(--ease); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice .box { width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--line-2); display: grid; place-items: center; color: transparent; flex: 0 0 auto; transition: background-color var(--ease), border-color var(--ease), color var(--ease); }
.choice .txt b { display: block; font-size: var(--fs-18); }
.choice .txt small { color: var(--muted); }
.choice:has(input:checked) { border-color: #121212; background: #fbfdec; }
.choice:has(input:checked) .box { background: #121212; border-color: #121212; color: var(--lime); }
.choice:has(input:focus-visible) { outline: 3px solid #121212; outline-offset: 2px; }
.extra { display: grid; gap: 6px; font-weight: 600; font-size: var(--fs-14); }
.extra input { width: 100%; }
.chips-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-pick { position: relative; cursor: pointer; }
.chip-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-pick span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 600; transition: background-color var(--ease), border-color var(--ease), color var(--ease); }
.chip-pick span .i { color: var(--muted); }
.chip-pick:has(input:checked) span { background: #121212; border-color: #121212; color: #fff; }
.chip-pick:has(input:checked) span .i { color: var(--lime); }
.chip-pick:has(input:focus-visible) span { outline: 3px solid #121212; outline-offset: 2px; }
.fform .button { margin-top: 6px; }
.fform .helper { text-align: center; }
.funnel .try { margin-top: 0; max-width: none; }
.funnel .drop { min-height: 240px; }
.apps-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 22px; }
.apps-summary div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 2px; }
.apps-summary b { font-size: 28px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.apps-summary b .i { width: 28px; height: 28px; }
.apps-summary span { color: var(--muted); font-size: var(--fs-14); }
.apps { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.apps-h, .apps-r { display: grid; grid-template-columns: 1.6fr 1.3fr .9fr .7fr 1fr; gap: 12px; align-items: center; padding: 14px 18px; }
.apps-h { background: var(--bg-alt); color: var(--muted); font-size: var(--fs-14); font-weight: 600; border-bottom: 1px solid var(--line); }
.apps-r { border-bottom: 1px solid var(--line); }
.apps-r:last-child { border-bottom: 0; }
.apps-r .pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.apps-r .st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); font-weight: 600; color: #121212; background: var(--green-bg); border-radius: 6px; padding: 4px 10px; width: max-content; }
.apps-r .st .i { color: #121212; }
.apps-empty { background: #fff; border: 1px dashed var(--line-2); border-radius: 12px; padding: 40px 24px; text-align: center; display: grid; justify-items: center; gap: 8px; }
.apps-empty .i { color: #121212; }
.apps-empty b { font-size: var(--fs-18); }
.apps-empty p { color: var(--muted); max-width: 460px; }
.funnel-foot { text-align: center; color: var(--muted); font-size: var(--fs-14); padding: 24px 16px 40px; }
.funnel-foot a { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 860px) {
  .stepper li .t { display: none; }
  .stepper li.now .t { display: inline; }
  .secure { display: none; }
  .apps-h { display: none; }
  .apps-r { grid-template-columns: 1fr 1fr; padding: 12px 14px; }
  .apps-r > span:first-child { grid-column: 1 / -1; }
  .apps-summary { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .apps-summary b { font-size: 22px; }
}

/* analyzing + setup */
.center-step { text-align: center; }
.analyzing { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 40px 28px; display: grid; justify-items: center; gap: 10px; }
.analyzing .ring { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: #121212; position: relative; }
.analyzing .ring::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid rgba(215,240,74,.5); border-top-color: #121212; animation: spin 1.4s linear infinite; }
.analyzing h1 { margin: 6px 0 4px; }
.analyzing .lead { margin-bottom: 8px; }
.phases { display: grid; gap: 8px; text-align: start; margin: 8px auto 6px; width: max-content; max-width: 100%; }
.phases li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; }
.phases li .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.phases li.on { color: #121212; }
.phases li.on .dot { background: #121212; box-shadow: 0 0 0 4px rgba(215,240,74,.6); }
.fh { font-size: var(--fs-18); margin: 8px 0 -4px; }
@media (prefers-reduced-motion: reduce) { .analyzing .ring::after { animation: none; border-top-color: rgba(215,240,74,.5); } }

/* ---------- v16: smooth analyzing, connect, plans, pay, credit ---------- */
.soft-bar { width: min(420px, 100%); height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin-top: 6px; }
.soft-bar i { display: block; height: 100%; width: 0; background: #121212; border-radius: 6px; transition: width 1.2s ease; }
.phases li { transition: color .5s ease; }
.phases li .dot { transition: background-color .5s ease, box-shadow .5s ease; }
.connect-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: grid; gap: 14px; justify-items: stretch; width: min(100%, 560px); margin-inline: auto; text-align: start; }
.button.google { background: #fff; color: #121212; border-color: var(--line-2); gap: 12px; }
.button.google:hover { background: var(--bg-alt); border-color: #121212; }
.button.google .gi { width: 22px; height: 22px; }
.order { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px 18px; margin-bottom: 16px; }
.order-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.order-row:last-child { border-bottom: 0; }
.order-row span { color: var(--muted); }
.order-row.total b { font-size: var(--fs-20); }
.apps-summary .credit { position: relative; }
.apps-summary .credit b { color: #121212; }
.meter-line { display: block; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin-top: 8px; }
.meter-line em { display: block; height: 100%; background: var(--lime); border-radius: 6px; }
.apps-summary .up { display: inline-block; margin-top: 6px; font-size: var(--fs-14); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1050px) { .plans-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .plans-grid { grid-template-columns: 1fr; } }

/* v19: funnel bar fits a 375px phone (stepper was clipped at the edge) */
@media (max-width: 760px) {
  .funnel-bar .wrap { gap: 10px; min-height: 60px; }
  .funnel-bar .brand { flex-shrink: 0; }
  .stepper { min-width: 0; gap: 2px; }
  .stepper li { padding: 4px 4px; gap: 6px; }
  .stepper li + li::before { width: 12px; margin-inline-end: 2px; }
  .stepper li.now .t { white-space: nowrap; font-size: var(--fs-12); }
}
@media (max-width: 480px) {
  .stepper li.now .t { display: none; }
  .stepper li .n { width: 24px; height: 24px; }
}

/* v20: member forms (edit resume, settings, applications, connections) and account pages on the same identity */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 22px; }
.button.secondary { background: #fff; color: #121212; border-color: var(--line-2); }
.button.secondary:hover { border-color: #121212; background: var(--bg-alt); }
.editor { display: grid; gap: 14px; }
.editor label { display: grid; gap: 6px; font-weight: 600; font-size: var(--fs-14); }
.editor label:has(input[type=checkbox]) { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-weight: 500; line-height: 1.7; }
.editor input[type=checkbox] { width: 20px; height: 20px; margin-top: 4px; accent-color: #121212; }
.editor input, .editor select, .editor textarea { width: 100%; }
.editor textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; resize: vertical; }
.editor textarea:focus { outline: 3px solid #121212; outline-offset: 2px; }
.editor fieldset { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; margin: 0 0 4px; display: grid; gap: 12px; background: var(--bg-alt); }
.editor legend { font-weight: 700; padding: 0 6px; }
.editor button, .editor .button { justify-self: start; }
.editor small { color: var(--muted); font-weight: 500; }
.panel form + form, .panel .button + form { margin-top: 12px; }
.panel h2 { margin-top: 0; }
button:not(.button):disabled { opacity: .5; cursor: not-allowed; }
.validation-summary-valid { display: none; }
.notice ul { margin: 0; padding-inline-start: 18px; }
.connect-card .notice { margin: 0; }
.fform .extra small { color: var(--muted); font-weight: 500; }
.fform .button { width: 100%; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-14); margin: 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.connect-card .helper a { text-decoration: underline; text-underline-offset: 4px; color: #121212; font-weight: 600; }
/* ---------- v21: one guided member flow (D29): dashboard hero, progress row, activation page, credit card ---------- */
.hero-strip { background: #121212; color: #fff; border-radius: 16px; padding: 28px 30px; display: flex; justify-content: space-between; align-items: center; gap: 24px; position: relative; overflow: hidden; margin-bottom: 18px; }
.hero-strip::after { content: ""; position: absolute; width: 320px; height: 320px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(215,240,74,.28), transparent 62%); pointer-events: none; }
.hero-strip > * { position: relative; z-index: 1; min-width: 0; }
.hero-strip .eyebrow { color: var(--lime); }
.hero-strip h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.35; margin: 6px 0 6px; color: #fff; }
.hero-strip .hint { color: #d6d6ce; margin: 0; font-size: var(--fs-16); }
.hero-strip .credit-line b { color: var(--lime); font-size: var(--fs-20); font-variant-numeric: tabular-nums; }
.hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 0 0 auto; min-width: 220px; }
.hero-actions form { display: contents; }
.button.ghost-dark { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.button.ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,.08); }
button.button { font: inherit; font-weight: 600; cursor: pointer; }
.progress-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.pstep { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--muted); }
.pstep .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-alt); border: 1px solid var(--line-2); font-weight: 700; font-size: var(--fs-14); flex: 0 0 auto; }
.pstep .t { display: grid; gap: 2px; font-weight: 700; color: #121212; min-width: 0; }
.pstep .t small { font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstep.done .n { background: #121212; border-color: #121212; color: var(--lime); }
.pstep.now { border-color: #121212; box-shadow: 0 0 0 3px var(--lime); }
.pstep.now .n { background: var(--lime); border-color: var(--lime); color: #121212; }
.pstep.todo .t { color: var(--muted); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 22px; align-items: start; }
.dash-grid .stats { margin-top: 0; margin-bottom: 18px; }
.stats b small { font-size: var(--fs-14); color: var(--muted); }
.recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.recent li a { display: grid; gap: 2px; min-width: 0; }
.recent li a span { color: var(--muted); font-size: var(--fs-14); }
.quick-links { color: var(--muted); font-size: var(--fs-14); }
.quick-links a { color: #121212; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.credit-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: grid; gap: 8px; position: sticky; top: 84px; }
.credit-card .big { font-size: 44px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.credit-card .big small { font-size: var(--fs-16); color: var(--muted); font-weight: 600; }
.credit-card .lbl { color: var(--muted); font-size: var(--fs-14); }
.credit-card .expiry { font-size: var(--fs-14); color: var(--muted); }
.credit-card .links { margin: 6px 0 0; font-size: var(--fs-14); color: var(--muted); }
.credit-card .links a { color: #121212; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.tag.amber { background: var(--amber-bg); border-color: #efd9a6; color: var(--amber-ink); width: max-content; }
.next-step { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #fff; border: 1px solid #121212; border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; }
.next-step > span { display: grid; gap: 2px; }
.next-step b { font-size: var(--fs-16); }
.next-step .button { flex: 0 0 auto; }
.filter-links { display: flex; gap: 8px; margin: 0 0 16px; }
.filter-links a { border: 1px solid var(--line-2); border-radius: var(--r); padding: 8px 14px; font-weight: 600; font-size: var(--fs-14); background: #fff; }
.filter-links a.on { background: #121212; color: #fff; border-color: #121212; }
.table { overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.table table { width: 100%; border-collapse: collapse; text-align: start; font-size: var(--fs-14); }
.table th { background: var(--bg-alt); color: var(--muted); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.pages { display: flex; justify-content: center; gap: 16px; margin-top: 14px; color: var(--muted); font-size: var(--fs-14); }
/* activation page (moved from the funnel stylesheet) */
.activate { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr); gap: 32px; align-items: start; }
.activate-side { position: sticky; top: 84px; }
.blk { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; margin-top: 16px; display: grid; gap: 14px; }
.blk:first-child { margin-top: 0; }
.blk h2 { font-size: var(--fs-18); display: flex; align-items: center; gap: 10px; margin: 0; }
.blk .num { width: 28px; height: 28px; border-radius: 50%; background: #121212; color: var(--lime); display: grid; place-items: center; font-size: var(--fs-14); font-weight: 700; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 600; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.pick span .i { color: var(--line-2); transition: color .18s ease, transform .18s ease; transform: scale(.6); }
.pick:hover span { border-color: #121212; }
.pick input:checked + span { background: #121212; border-color: #121212; color: #fff; }
.pick input:checked + span .i { color: var(--lime); transform: scale(1); }
.pick input:focus-visible + span { outline: 3px solid #121212; outline-offset: 2px; }
.pick span:active { transform: scale(.96); }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.plan { position: relative; cursor: pointer; display: grid; gap: 4px; background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 16px 14px 14px; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.plan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan:hover { border-color: #121212; transform: translateY(-2px); }
.plan:has(input:checked) { border-color: #121212; box-shadow: 0 0 0 3px var(--lime); }
.plan:has(input:focus-visible) { outline: 3px solid #121212; outline-offset: 2px; }
.plan.off { opacity: .5; cursor: not-allowed; }
.plan.off:hover { transform: none; border-color: var(--line-2); }
.plan.current { border-color: #121212; }
.plan .rib { position: absolute; top: -10px; inset-inline-start: 12px; font-style: normal; background: var(--lime); color: #121212; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.plan.current .rib { background: #121212; color: var(--lime); }
.plan .pl-name { color: var(--muted); font-weight: 700; font-size: var(--fs-14); }
.plan .pl-price { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan .pl-price small { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--muted); font-weight: 600; white-space: nowrap; }
.plan .pl-apps { color: var(--muted); font-size: var(--fs-12); }
/* Saving against the smallest paid plan (owner, 2026-10-17); the same pill on the Start plan cards. */
.pl-save, .plan-save { justify-self: start; display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--green-bg, #e8f5ec); color: var(--green, #146c3a); border: 1px solid var(--green-line, #bfe3cb); font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan .pl-tick { position: absolute; top: 10px; inset-inline-end: 10px; width: 22px; height: 22px; border-radius: 50%; background: #121212; color: var(--lime); display: grid; place-items: center; transform: scale(0); transition: transform .2s cubic-bezier(.2,1.4,.4,1); }
.plan:has(input:checked) .pl-tick { transform: scale(1); }
.sum-auth { margin: 0; color: #b9b9b2; font-size: var(--fs-12); line-height: 1.7; }
.sum { background: #121212; color: #fff; border-radius: 16px; padding: 22px; display: grid; gap: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.25); position: relative; overflow: hidden; }
.sum::after { content: ""; position: absolute; width: 260px; height: 260px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(215,240,74,.25), transparent 62%); pointer-events: none; }
.sum > * { position: relative; z-index: 1; }
.sum-head { display: flex; align-items: center; gap: 8px; color: var(--lime); font-size: var(--fs-12); font-weight: 700; letter-spacing: .5px; }
.sum .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(215,240,74,.5); animation: ping 2s ease-out infinite; }
@keyframes ping { 100% { box-shadow: 0 0 0 10px rgba(215,240,74,0); } }
.sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-14); border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 8px; }
.sum-row span { color: #b9b9b2; }
.sum-row b { display: inline-block; text-align: start; max-width: 62%; color: #fff; }
.sum-big { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.sum-big b { display: inline-block; font-size: 44px; line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums; }
.sum-big span { color: #d6d6ce; }
.sum-price { color: #b9b9b2; font-size: var(--fs-14); }
.sum .button { width: 100%; margin-top: 6px; }
.sum-fine { color: #b9b9b2; font-size: var(--fs-12); display: flex; align-items: center; gap: 6px; }
.sum-fine .i { color: var(--lime); }
.button[disabled].lime { background: #3a3a3a; border-color: #3a3a3a; color: #8a8a84; }
.bump { animation: bump .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes bump { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
@media (max-width: 1050px) { .plans { grid-template-columns: 1fr 1fr; } .activate { grid-template-columns: 1fr; } .activate-side { position: static; } .dash-grid { grid-template-columns: 1fr; } .credit-card { position: static; } }
@media (max-width: 760px) { .hero-strip { flex-direction: column; align-items: stretch; padding: 22px 18px; } .hero-actions { min-width: 0; } .progress-row { grid-auto-flow: row; grid-auto-columns: auto; } .next-step { flex-direction: column; align-items: stretch; } .plans { grid-template-columns: 1fr 1fr; } .blk { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .sum .live-dot { animation: none; } }
.upload-card { margin: 8px 0 18px; }
.upload-card .drop { min-height: 200px; }
.upload-card .helper { margin: 0; }
.upload-card .trust { margin-top: 4px; }

/* ---------- v22: resume page (D30): identity card, timeline, credentials, skills, evidence layer, confirm bar ---------- */
.resume { display: grid; gap: 18px; }
.resume-head { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.resume-id { min-width: 0; }
.resume-head h1 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 4px; line-height: 1.3; }
.resume-label { color: var(--muted); font-size: var(--fs-18); margin: 0; }
.resume-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; color: var(--muted); font-size: var(--fs-14); }
.resume-meta span { display: inline-flex; align-items: center; gap: 6px; }
.resume-meta [dir=ltr] { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.resume-status { display: grid; gap: 10px; justify-items: end; flex: 0 0 auto; }
.resume-status .tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tag.green { background: var(--green-bg); border-color: var(--green-line); color: #121212; }
.years-badge { font-weight: 700; font-size: var(--fs-14); background: #121212; color: var(--lime); border-radius: var(--r); padding: 4px 10px; font-variant-numeric: tabular-nums; }
.resume-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.button.small.secondary { min-height: 36px; padding: 4px 12px; }
.evidence-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-14); font-weight: 600; color: var(--muted); cursor: pointer; margin-inline-start: 6px; }
.evidence-toggle input { accent-color: #121212; width: 18px; height: 18px; }
.evidence-toggle small { font-weight: 500; }
.resume-section { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; }
.resume-section h2 { font-size: var(--fs-20); display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.resume-section h2 .count { font-size: var(--fs-12); color: var(--muted); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-variant-numeric: tabular-nums; }
.rt-summary, .rt-bullets li, .rt-desc, .rt-achievements p { max-width: 72ch; line-height: 1.8; }
.rt-summary { margin: 0; }
.rt-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.rt-grid-2.skills { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.fit { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.fit-hook { font-size: var(--fs-18); line-height: 1.7; margin: 0; }
.fit-hook::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--lime); border-radius: 2px; margin-inline-end: 8px; }
.fit-label { display: block; font-size: var(--fs-12); font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.fit-titles { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.fit-titles li { border: 1px solid #121212; border-radius: var(--r); padding: 5px 12px; font-weight: 600; font-size: var(--fs-14); }
.fit-meter { display: flex; align-items: center; gap: 12px; font-size: var(--fs-14); color: var(--muted); flex-wrap: wrap; }
.fit-meter .fit-label { margin: 0; }
.fit-meter .meter-line { flex: 1; margin: 0; max-width: 320px; min-width: 120px; }
.fit-meter b { color: #121212; font-variant-numeric: tabular-nums; }
.rt-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.rt-role { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.rt-role:first-child { border-top: 0; padding-top: 4px; }
.rt-when { position: relative; padding-inline-start: 18px; color: var(--muted); font-size: var(--fs-14); display: grid; align-content: start; gap: 2px; }
.rt-when::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: #121212; box-shadow: 0 0 0 3px var(--lime); }
.rt-role.current .rt-when::before { background: var(--lime); box-shadow: 0 0 0 3px #121212; }
.rt-period { font-weight: 700; color: #121212; font-variant-numeric: tabular-nums; }
.rt-length { color: var(--muted); }
.rt-body h3 { font-size: var(--fs-18); margin: 0; }
.rt-org { color: var(--muted); margin: 2px 0 10px; }
.rt-org span[title] { text-decoration: underline dotted; text-underline-offset: 4px; cursor: help; }
.rt-bullets { display: grid; gap: 6px; padding-inline-start: 18px; margin: 0; list-style: disc; }
.rt-bullets li::marker { color: var(--line-2); }
.rt-desc { margin: 0; white-space: pre-line; }
.rt-list { list-style: none; margin: 0; padding: 0; display: grid; }
.rt-item { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.rt-item:first-child { border-top: 0; padding-top: 0; }
.rt-item b { font-size: var(--fs-16); }
.rt-item span { color: var(--ink); }
.rt-item small { color: var(--muted); font-variant-numeric: tabular-nums; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.skill-chips li { font-size: var(--fs-14); padding: 6px 12px; border-radius: var(--r); background: var(--bg-alt); border: 1px solid var(--line); }
.skill-chips li.used { background: var(--green-bg); border-color: var(--green-line); }
.skill-chips li[title] { cursor: help; }
.lang-list { list-style: none; margin: 0; padding: 0; display: grid; }
.lang-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lang-list li:last-child { border-bottom: 0; }
.lang-list span { color: var(--muted); font-size: var(--fs-14); }
.rt-achievements { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rt-achievements li { padding-inline-start: 14px; border-inline-start: 3px solid var(--lime); }
.rt-achievements p { margin: 0; }
.rt-achievements small { display: block; color: var(--muted); }
.ev { display: none; font-size: var(--fs-14); color: var(--muted); margin: 6px 0 4px; padding-inline-start: 12px; border-inline-start: 3px solid var(--lime); white-space: pre-line; overflow-wrap: anywhere; }
.ev::before { content: "من سيرتك: "; font-weight: 600; color: #121212; }
.resume:has(#ev-switch:checked) .ev { display: block; }
.replace-panel { border: 1px dashed var(--line-2); border-radius: 14px; background: #fff; margin: 0; padding: 0; }
.replace-panel summary { padding: 16px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.replace-panel summary small { font-weight: 500; }
.replace-panel[open] summary { border-bottom: 1px solid var(--line); }
.replace-panel .try { box-shadow: none; border: 0; margin: 0; }
.confirm-bar { position: sticky; bottom: 12px; z-index: 5; background: #121212; color: #fff; border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.confirm-bar form { display: contents; }
.confirm-bar > span { color: #d6d6ce; font-size: var(--fs-14); }
.confirm-bar .button.secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.confirm-bar.done { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.confirm-bar.done > span { color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.resume-empty { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 22px; align-items: start; }
.after-upload { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 12px; }
.after-upload h2 { margin: 0; font-size: var(--fs-20); }
.after-upload ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.after-upload li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.7; }
.after-upload .num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #121212; color: var(--lime); display: grid; place-items: center; font-size: var(--fs-14); font-weight: 700; }
@media (max-width: 850px) {
  .resume-head { flex-direction: column; }
  .resume-status { justify-items: start; }
  .resume-status .tags { justify-content: flex-start; }
  .rt-role { grid-template-columns: 1fr; gap: 6px; }
  .rt-when { padding-inline-start: 16px; }
  .rt-grid-2, .rt-grid-2.skills, .resume-empty { grid-template-columns: 1fr; }
  .confirm-bar { flex-direction: column; align-items: stretch; bottom: 8px; padding: 12px; }
  .confirm-bar .button { width: 100%; }
  .resume-section { padding: 18px; }
}

/* ---------- v23: onboarding funnel (D30): home saved-resume card, result page, plan pick, account gate ---------- */
.saved-card { display: grid; gap: 12px; }
.saved-card .saved-id { display: flex; align-items: center; gap: 14px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.saved-card .saved-id .ico { width: 48px; height: 48px; border-radius: 12px; background: #121212; color: var(--lime); display: grid; place-items: center; flex: 0 0 auto; }
.saved-card .saved-id b { display: block; font-size: var(--fs-18); }
.saved-card .saved-id span { color: var(--muted); font-size: var(--fs-14); }
.saved-card .saved-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: var(--fs-14); }
.funnel-bar .brand { cursor: default; }
.fstep.start { max-width: 960px; display: grid; gap: 22px; }
.start-hello h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.3; margin: 8px 0 4px; }
.start-field { font-size: var(--fs-18); color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.start-hello .lead { margin-bottom: 0; }
.start-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.start-facts div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 2px; }
.start-facts b { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.start-facts span { color: var(--muted); font-size: var(--fs-14); }
.start-jobs { background: #121212; color: #fff; border-radius: 14px; padding: 20px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; position: relative; overflow: hidden; }
.start-jobs::after { content: ""; position: absolute; width: 260px; height: 260px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(215,240,74,.25), transparent 62%); pointer-events: none; }
.start-jobs b { font-size: 40px; color: var(--lime); font-variant-numeric: tabular-nums; line-height: 1; position: relative; }
.start-jobs > span { color: #d6d6ce; font-size: var(--fs-16); max-width: 46ch; position: relative; }
.start-plans h2, .start-account h2 { margin: 0 0 14px; }
.start-plans .helper { margin-top: 10px; }
.start-account .connect-card h2 { font-size: var(--fs-24); }
.sum-auth.light { color: var(--muted); }
.connect-card .switch, .connect-card #back-plans { text-decoration: underline; text-underline-offset: 4px; color: #121212; font-weight: 600; }
.slide-out { opacity: 0; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease; }
.slide-in { animation: slidein .35s cubic-bezier(.2,.7,.2,1); }
@keyframes slidein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .start-facts { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .start-facts b { font-size: 24px; } .start-jobs b { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .slide-in { animation: none; } .slide-out { transition: none; } }

/* ---------- v24: funnel polish (D30): plans row, account gate, analyzing card, base fixes ---------- */
[hidden] { display: none !important; }
.helper { color: var(--muted); font-size: var(--fs-14); line-height: 1.7; margin: 0; }
.bare { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; color: #121212; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.funnel-bar { position: sticky; top: 0; z-index: 40; }
.funnel-bar .wrap.center { justify-content: center; }
.connect-card .card-head { text-align: center; display: grid; gap: 6px; justify-items: center; margin-bottom: 6px; }
.connect-card .card-head h1, .connect-card .card-head h2 { margin: 0; font-size: var(--fs-24); }
.connect-card .card-head .lead { margin-bottom: 0; font-size: var(--fs-16); }
.connect-card .trust { justify-content: center; }
.connect-card .notice { margin: 0; }
.connect-card .helper { text-align: center; }
.auth-step { max-width: 480px; margin-inline: auto; }
.plans-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; align-items: stretch; }
.plan-card { position: relative; font: inherit; text-align: start; background: #fff; color: var(--ink); border: 1.5px solid var(--line-2); border-radius: 14px; padding: 22px 18px 18px; display: grid; gap: 6px; align-content: start; cursor: pointer; transition: border-color var(--ease), transform .2s ease, box-shadow .2s ease; }
.plan-card:hover { border-color: #121212; transform: translateY(-3px); box-shadow: var(--shadow); }
.plan-card:focus-visible { outline: 3px solid #121212; outline-offset: 3px; }
.plan-card.recommended { border-color: #121212; padding-top: 34px; }
.plan-ribbon { position: absolute; top: -1.5px; inset-inline: -1.5px; height: 24px; display: grid; place-items: center; background: #121212; color: var(--lime); font-size: var(--fs-12); font-weight: 700; border-radius: 13px 13px 0 0; }
.plan-card.selected { border-color: #121212; box-shadow: 0 0 0 3px var(--lime); }
.plan-name { font-weight: 700; color: var(--muted); font-size: var(--fs-14); }
.plan-price { font-size: 30px; font-weight: 700; line-height: 1.1; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: var(--fs-12); color: var(--muted); font-weight: 600; }
.plan-apps { font-size: var(--fs-16); }
.plan-apps b { font-size: var(--fs-20); }
.plan-note { color: var(--muted); font-size: var(--fs-14); min-height: 44px; }
.plan-cta { margin-top: 6px; display: inline-flex; justify-content: center; align-items: center; min-height: 44px; border-radius: var(--r); border: 1.5px solid #121212; background: #fff; color: #121212; font-weight: 600; transition: background-color var(--ease), color var(--ease); }
.plan-card.recommended .plan-cta, .plan-card.selected .plan-cta { background: var(--lime); border-color: var(--lime); }
.plan-card:hover .plan-cta { background: #121212; color: #fff; border-color: #121212; }
.plan-card.recommended:hover .plan-cta { background: #c9e33c; color: #121212; border-color: #c9e33c; }
.plan-chip { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin-inline: auto; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: var(--fs-14); color: var(--muted); }
.plan-chip b { color: #121212; }
.gate-card .eyebrow { justify-self: start; }
.gate-email { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; font-size: var(--fs-14); font-weight: 600; }
.gate-email .lbl { grid-column: 1 / -1; }
.gate-email .val { font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-alt); }
.gate-email input { grid-column: 1 / -1; width: 100%; }
.strength { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 4px; margin-top: 4px; }
.strength i { background: var(--line); border-radius: 2px; transition: background-color .2s ease; }
.strength[data-level="1"] i:nth-child(-n+1) { background: var(--line-2); }
.strength[data-level="2"] i:nth-child(-n+2), .strength[data-level="3"] i { background: var(--lime); }
.gate .sum-auth, .connect-card .sum-auth { color: var(--muted); }
.fstep .slide-out[data-reveal], .fstep .slide-out { opacity: 0; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease; }
.analyzing.done .ring { background: #121212; color: var(--lime); }
.analyzing.done .ring::after { animation: none; border-color: var(--lime); }
.phases li.now { color: #121212; }
.phases li.now .dot { background: var(--lime); box-shadow: 0 0 0 4px rgba(215,240,74,.35); animation: ping 1.6s ease-out infinite; }
.skeleton { width: min(720px, 100%); margin: 18px auto 0; display: grid; gap: 12px; opacity: .7; transition: opacity .3s ease; }
.skeleton i, .skeleton .sk-tiles i { display: block; background: linear-gradient(90deg, var(--line) 25%, #ecece6 50%, var(--line) 75%); background-size: 200% 100%; border-radius: 12px; animation: shimmer 1.6s linear infinite; }
.sk-line { height: 28px; width: 46%; margin-inline: auto; }
.sk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sk-tiles i { height: 84px; }
.sk-band { height: 72px; }
.analyzing.done ~ .skeleton { opacity: 1; }
@keyframes shimmer { to { background-position: -200% 0; } }
/* ---------- result page: a short page that leads to a plan (owner, 2026-10-24) ---------- */
.fstep.start { gap: 16px; }
.r-hero { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; display: grid; gap: 10px; }
.r-hero .eyebrow { justify-self: start; }
.r-hero h1 { margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.35; }
.r-know { margin: 0; color: var(--muted); font-size: var(--fs-14); }
.r-know span { color: #121212; font-weight: 700; }
.r-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.r-stats > div { background: #121212; color: #fff; border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.r-stats b { color: var(--lime); font-size: clamp(20px, 2.6vw, 26px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.r-stats > div > span { font-size: var(--fs-12); color: rgba(255,255,255,.75); }
.r-targets { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--muted); }
.r-targets b { background: var(--lime); color: #121212; border-radius: 999px; padding: 2px 10px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-plans h2 { font-size: clamp(20px, 2.4vw, 24px); margin: 4px 0 12px; }
.plans-row.r-plans { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 0; align-items: stretch; }
.r-plans .plan-card { padding: 18px 14px 14px; gap: 4px; text-align: center; justify-items: center; }
.r-plans .plan-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.r-plans .plan-save { font-size: 11px; padding: 0 7px; }
.r-plans .plan-price { font-size: 28px; justify-content: center; flex-wrap: wrap; gap: 0 4px; }
.r-plans .plan-apps { font-size: var(--fs-14); }
.r-plans .plan-apps b { font-size: var(--fs-16); }
.plan-each { color: var(--muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.r-plans .plan-cta { width: 100%; margin-top: 8px; min-height: 40px; }
.r-plans .plan-card.recommended { background: #121212; color: #fff; border-color: #121212; padding-top: 32px; box-shadow: 0 12px 28px rgba(18,18,18,.18); }
.r-plans .plan-card.recommended .plan-name, .r-plans .plan-card.recommended .plan-each, .r-plans .plan-card.recommended .plan-price small { color: rgba(255,255,255,.75); }
.r-plans .plan-card.recommended .plan-ribbon { background: var(--lime); color: #121212; }
.r-plans .plan-card.recommended.selected { box-shadow: 0 0 0 3px var(--lime), 0 12px 28px rgba(18,18,18,.18); }
.r-plans .plan-card.plan-free { border-style: dashed; }
.r-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 12px 0 0; color: var(--muted); font-size: var(--fs-12); }
.r-trust span::before { content: "✓ "; color: #146c3a; font-weight: 700; }
@media (max-width: 900px) { .plans-row.r-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .r-hero { padding: 16px; gap: 8px; border-radius: 16px; }
  .r-stats > div { padding: 8px 10px; }
  .r-stats > div > span { font-size: 11px; }
  .r-targets b:nth-of-type(n+3) { display: none; }
  .plans-row.r-plans { gap: 8px; }
  .r-plans .plan-card { padding: 14px 10px 10px; border-radius: 12px; }
  .r-plans .plan-card.recommended { padding-top: 28px; }
  .r-plans .plan-ribbon { height: 20px; font-size: 11px; }
  .r-plans .plan-price { font-size: 24px; }
  .r-plans .plan-price small { font-size: 11px; }
  .r-plans .plan-cta { min-height: 38px; font-size: var(--fs-14); }
}
@media (prefers-reduced-motion: reduce) { .skeleton i, .phases li.now .dot { animation: none; } .plan-card:hover { transform: none; } }

/* ---------- v25: member shell without marketing chrome (D30) ---------- */
html.app { scroll-padding-top: 24px; }
.ws-topbar { display: none; }
.sidebar-brand { display: flex; min-height: 44px; padding: 0 12px; margin-bottom: 14px; color: #fff; font-size: 22px; }
.sidebar-brand:hover .stamp { transform: rotate(0); }
.sidebar-state { margin-top: auto; display: grid; gap: 4px; padding: 14px; border-radius: var(--r-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #d6d6ce; transition: background-color var(--ease), border-color var(--ease); }
.sidebar-state:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.sidebar-state .lbl { font-size: var(--fs-12); color: #9a9a92; font-weight: 600; }
.sidebar-state b { font-size: var(--fs-20); color: #fff; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sidebar-state b small { font-size: var(--fs-12); color: #9a9a92; font-weight: 600; }
.sidebar-state .meter-line { background: rgba(255,255,255,.12); margin-top: 4px; }
.sidebar-state .hint { font-size: var(--fs-14); color: var(--lime); font-weight: 600; }
.sidebar-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-foot form { display: contents; }
.quiet { font: inherit; font-size: var(--fs-14); font-weight: 600; color: #121212; background: transparent; border: 0; padding: 6px 8px; margin-inline-start: -8px; border-radius: var(--r); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.quiet:hover { background: var(--bg-alt); }
.sidebar .sidebar-logout { display: inline-flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: var(--r); background: transparent; color: #9a9a92; font: inherit; font-size: var(--fs-14); font-weight: 500; text-align: start; text-decoration: none; cursor: pointer; transition: color var(--ease), background-color var(--ease); }
.sidebar .sidebar-logout:hover { color: #fff; background: rgba(255,255,255,.06); }
.flash { display: flex; align-items: flex-start; gap: 10px; background: #121212; color: #fff; border-radius: 12px; padding: 12px 16px; margin: 0 0 18px; font-size: var(--fs-14); line-height: 1.7; box-shadow: 0 10px 30px rgba(0,0,0,.12); animation: flash-in .3s ease both; }
.flash .i { color: var(--lime); margin-top: 3px; flex: 0 0 auto; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 850px) {
  html.app { scroll-padding-top: 72px; }
  .workspace-body { min-height: calc(100dvh - 56px); }  /* below the phone top bar */
  html.no-scroll { overflow: hidden; }
  .ws-topbar { display: flex; position: sticky; top: 0; z-index: 50; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 16px; background: #121212; color: #fff; }
  .ws-topbar .brand { color: #fff; font-size: 20px; }
  .ws-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--r); border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font: inherit; font-size: var(--fs-14); font-weight: 600; cursor: pointer; }
  .ws-toggle .i-close { display: none; }
  .ws-toggle[aria-expanded="true"] .i-close { display: block; }
  .ws-toggle[aria-expanded="true"] .i-menu { display: none; }
  .sidebar { display: none; position: fixed; top: 56px; inset-inline: 0; bottom: 0; z-index: 45; height: auto; padding: 16px; overflow: auto; box-shadow: 0 24px 40px rgba(0,0,0,.35); flex-direction: column; }
  .workspace.menu-open .sidebar { display: flex; animation: ws-drawer .2s ease both; }
  .sidebar nav { flex-direction: column; gap: 6px; }
  .sidebar nav a { font-size: 15px; padding: 12px 14px; white-space: normal; }
  .sidebar-brand { display: none; }
  .sidebar-caption { display: block; }
  .workspace-header { min-height: 52px; padding: 0 16px; font-size: var(--fs-14); }
  .workspace .ws-footer { padding: 14px 16px; }
}
@keyframes ws-drawer { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- v26: jobs list for paid members (D30) ---------- */
.jobs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.jobs-head h1 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.35; margin: 4px 0 0; display: flex; align-items: center; gap: 10px; }
.jobs-head h1 .count { font-size: var(--fs-14); font-weight: 700; background: #121212; color: var(--lime); border-radius: 999px; padding: 2px 10px; font-variant-numeric: tabular-nums; }
.jobs-head .sub { color: var(--muted); margin-top: 4px; }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; background: transparent; }
.seg { display: inline-flex; gap: 2px; padding: 3px; margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 6px; font-size: var(--fs-14); font-weight: 600; color: var(--muted); white-space: nowrap; transition: background-color var(--ease), color var(--ease); }
.seg input:checked + span { background: #121212; color: #fff; }
.seg input:focus-visible + span { outline: 3px solid #121212; outline-offset: 2px; }
.filters .city { position: relative; display: inline-flex; align-items: center; }
.filters .city .i { position: absolute; inset-inline-start: 10px; color: var(--muted); pointer-events: none; }
.filters .city input { min-height: 42px; width: 200px; padding: 0 12px; padding-inline-start: 34px; border-radius: var(--r-lg); }
.filters .button.small { min-height: 42px; }
.auto-note { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; font-size: var(--fs-14); color: var(--muted); }
.auto-note b { color: #121212; font-weight: 600; }
.auto-note a { color: #121212; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.auto-note .live-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(215,240,74,.5); animation: ping 2s ease-out infinite; }
.auto-note.off .live-dot { background: var(--line-2); animation: none; }
.jobs { display: grid; gap: 14px; }
.jc { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; display: grid; gap: 14px; transition: border-color var(--ease), box-shadow var(--ease); animation: jc-in .4s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
.jc:hover { border-color: var(--line-2); box-shadow: 0 10px 28px rgba(0,0,0,.05); }
@keyframes jc-in { from { opacity: 0; transform: translateY(8px); } }
.jc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.jc-title { min-width: 0; }
.jc h3 { font-size: var(--fs-20); line-height: 1.4; margin: 0; }
.jc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: var(--fs-14); margin-top: 4px; }
.jc-meta .sep { color: var(--line-2); }
.jc-meta time { font-variant-numeric: tabular-nums; }
.jc .meter { display: flex; height: auto; min-width: 0; background: none; overflow: visible; border-radius: 0; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; text-align: center; }
.jc .meter .ring { position: relative; display: block; width: 62px; height: 62px; }
.jc .meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.jc .meter circle { fill: none; stroke-width: 3.4; }
.jc .meter .bg { stroke: var(--line); }
.jc .meter .fg { stroke: var(--lime); stroke-linecap: round; stroke-dasharray: var(--p) 100; animation: meter-fill 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
@keyframes meter-fill { from { stroke-dasharray: 0 100; } }
.jc .meter b { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-18); font-weight: 700; font-variant-numeric: tabular-nums; color: #121212; }
.jc .meter small { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.jc-lbl { display: block; font-size: var(--fs-12); font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li { font-size: var(--fs-14); padding: 4px 10px; border-radius: 6px; background: var(--bg-alt); border: 1px solid var(--line); unicode-bidi: plaintext; }
.chips.good li { background: var(--green-bg); border-color: var(--green-line); color: #121212; }
.chips.gap li { background: #fff; border-color: var(--line-2); color: var(--muted); }
.chips li.more { background: #fff; border-style: dashed; color: var(--muted); font-variant-numeric: tabular-nums; }
.jc-none { color: var(--muted); font-size: var(--fs-14); margin: 0; }
.jc details { border: 0; margin: 0; padding: 0; }
.jc-gap { margin-top: 8px; }
.jc summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 6px; margin-inline-start: -6px; border-radius: var(--r); font-size: var(--fs-14); font-weight: 600; color: var(--muted); list-style: none; cursor: pointer; transition: color var(--ease), background-color var(--ease); }
.jc summary::-webkit-details-marker { display: none; }
.jc summary:hover { color: #121212; background: var(--bg-alt); }
.jc summary .i { transition: transform var(--ease); }
.jc details[open] summary .i { transform: rotate(180deg); }
.jc-gap .chips { margin-top: 8px; }
.jc-gap small { display: block; margin-top: 6px; }
.jc-req ul { margin: 8px 0 0; padding-inline-start: 18px; list-style: disc; display: grid; gap: 4px; font-size: var(--fs-14); color: var(--amber-ink); }
.jc-req li::marker { color: #d9a441; }
.jc-desc { border-top: 1px solid var(--line); padding-top: 12px; }
.jc-desc-body { position: relative; overflow: hidden; transition: max-height .35s ease; }
.jc-desc-body.is-clamped { max-height: 260px; }
.jc-desc-body.is-clamped::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 80px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 85%); pointer-events: none; }
.jc-desc-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 1.85; color: var(--ink); }
.jc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.jc-foot form { display: contents; }
.jc-src { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: var(--r); font-size: var(--fs-14); font-weight: 600; color: var(--muted); transition: color var(--ease), background-color var(--ease); }
.jc-src:hover { color: #121212; background: var(--bg-alt); }
.jc-src [dir=ltr] { unicode-bidi: isolate; }
.jobs-fine { color: var(--muted); font-size: var(--fs-12); margin-top: 18px; line-height: 1.8; }
@media (max-width: 760px) {
  .filters .city { flex: 1; } .filters .city input { width: 100%; }
  .jc { padding: 16px; }
  .jc-head { flex-direction: column; gap: 10px; }
  .jc .meter { flex-direction: row; gap: 10px; text-align: start; }
  .jc .meter .ring { width: 48px; height: 48px; }
  .jc .meter b { font-size: var(--fs-16); }
  .jc-foot { flex-direction: column; align-items: stretch; }
  .jc-foot .button { width: 100%; }
  .jc-src { justify-content: center; }
}

.editor .match-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .editor .match-columns { grid-template-columns: 1fr; } }

/* Source administration and full job catalog */
.admin-form{display:grid;gap:16px;padding:24px;margin-block:20px;border:1px solid #dce5df;border-radius:16px;background:#fff;max-width:900px}.admin-form label{display:grid;gap:7px}.admin-form input:not([type=checkbox]),.admin-form select,.admin-form textarea{width:100%;padding:10px;border:1px solid #c6d1ca;border-radius:8px}.admin-form textarea{min-height:100px}.table-wrap{overflow:auto;margin-block:24px}.table-wrap table{width:100%;border-collapse:collapse}.table-wrap th,.table-wrap td{padding:14px;text-align:start;border-bottom:1px solid #dce5df;vertical-align:top}.table-wrap form{margin-block:8px}.keyword-cloud{display:flex;flex-wrap:wrap;gap:8px}.keyword-cloud a{border-radius:20px;padding:4px 12px;background:#edf4e6}
/* Funnel result: what the analysis understood, in the person's facts (owner, 2026-10-05) */
.start-know { display: grid; gap: 12px; }
.start-know h2 { margin: 0; font-size: clamp(20px, 2.4vw, 24px); }
.know-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.know-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.know-card p { margin: 0; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.know-card small { color: var(--muted); font-size: 13px; }
.know-k { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.know-k .i { color: #121212; }
.know-num { font-size: 30px !important; line-height: 1.1; font-variant-numeric: tabular-nums; }
.know-meter { height: 6px; border-radius: 6px; background: #eef0e6; overflow: hidden; }
.know-meter i { display: block; height: 100%; background: linear-gradient(90deg, #121212, #8fb100); border-radius: 6px; }
.know-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.know-chips span { font-size: 13px; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; background: #fafaf6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.know-card.gap { border-color: #e9cf86; background: #fffaf0; }
.know-targets { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--muted); font-size: 14px; }
.know-targets b { color: #121212; background: #f3f8cf; border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.know-chips span { display: block; min-width: 0; direction: ltr; text-align: start; }
.know-card > * { min-width: 0; }

/* ---------- resume design (D43): strip above the resume and the chooser dialog ---------- */
.dz-strip { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 14px; margin: 0 0 16px; }
.dz-mini { width: 46px; height: 65px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 4px; flex: none; }
.dz-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dz-k { font-size: var(--fs-12); color: var(--muted); }
.dz-what b { font-size: 1.05rem; }
.dz-why { font-size: var(--fs-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.dz { width: min(1180px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 32px)); max-height: none; padding: 0; border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.dz[open] { display: flex; flex-direction: column; }
.dz::backdrop { background: rgba(18,18,18,.55); }
.dz-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 22px 12px; border-bottom: 1px solid var(--line); margin: 0; }
.dz-top h2 { margin: 0 0 2px; font-size: 1.25rem; }
.dz-top p { margin: 0; color: var(--muted); font-size: var(--fs-14); }
.dz-x { font-size: 1.1rem; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.dz-x:hover { background: var(--bg-alt); }
.dz-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.dz-preview { background: #2a2a2a; padding: 18px; overflow: auto; display: flex; justify-content: center; }
.dz-frame { width: 476px; height: 674px; flex: none; overflow: hidden; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.4); background: #fff; }
.dz-frame iframe { width: 794px; height: 1123px; border: 0; transform: scale(.6); transform-origin: top right; display: block; }
[dir="ltr"] .dz-frame iframe { transform-origin: top left; }
.dz-side { overflow: auto; padding: 14px 18px 18px; min-width: 0; }
.dz-opts { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dz-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dz-opt > span { font-size: var(--fs-12); color: var(--muted); min-width: 46px; }
.dz-pill { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-14); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; }
.dz-pill.on { border-color: #121212; box-shadow: inset 0 0 0 1px #121212; }
.dz-pill i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dz-pill i.dz-auto { background: conic-gradient(#1F3A5F, #0E6B6B, #7B2D3B, #9A4F1F, #1F3A5F); }
.dz-check input { margin: 0; accent-color: #121212; }
.dz-note { margin: 0; font-size: var(--fs-12); color: var(--muted); }
.dz-tabs { display: flex; gap: 6px; padding: 12px 0 10px; position: sticky; top: -14px; background: #fff; z-index: 1; }
.dz-tab { font: inherit; font-size: var(--fs-14); padding: 6px 14px; border-radius: 999px; border: 0; background: var(--bg-alt); color: var(--ink); cursor: pointer; }
.dz-tab.on { background: #121212; color: #fff; }
.dz-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.dz-card { display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; text-align: inherit; font: inherit; color: inherit; }
.dz-card img { display: block; width: 100%; height: auto; aspect-ratio: 318 / 449; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); transition: transform var(--ease), box-shadow var(--ease); }
.dz-card:hover img { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.dz-card.on { border-color: var(--lime); }
.dz-card.on img { border-color: transparent; }
.dz-card span { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 6px 4px 2px; }
.dz-card b { font-size: var(--fs-14); }
.dz-card small { font-size: 11px; color: var(--muted); }
.dz-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 22px; border-top: 1px solid var(--line); background: #fff; }
.dz-reset { font-size: var(--fs-14); text-decoration: underline; cursor: pointer; color: var(--muted); }
@media (max-width: 860px) {
  .dz { width: 100vw; height: 100dvh; border-radius: 0; }
  .dz-body { display: block; overflow: auto; }
  .dz-preview { padding: 12px; }
  .dz-frame { width: 318px; height: 449px; }
  .dz-frame iframe { transform: scale(.4); }
  .dz-side { overflow: visible; }
  .dz-tabs { top: 0; }
  .dz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dz-card small { display: none; }
  .dz-foot { flex-wrap: wrap; }
  .dz-strip .button { padding-inline: 10px; }
  .dz-why { display: none; }
}

/* Phones: text fields at 16px so iOS Safari does not zoom the page when one is tapped (sign-in, registration, forms). */
@media (max-width: 760px) { input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px !important; } }

/* coupon box on the activation page (D46) */
.coupon { margin-top: 14px; display: grid; gap: 6px; }
.coupon label { font-size: var(--fs-14); font-weight: 600; }
.coupon-row { display: flex; gap: 8px; min-width: 0; }
.coupon-row input { flex: 1; min-width: 0; width: 0; text-transform: uppercase; letter-spacing: .04em; }
.coupon .coupon-row .button { flex: none; width: auto; margin: 0; }  /* phones: the apply button stays beside the field (owner, 2026-10-16) */
/* The credit badge links to #plan: land with the section heading below the sticky header (owner, 2026-10-16). */
#plan { scroll-margin-top: 84px; scroll-margin-bottom: 16px; }
.coupon-msg { margin: 0; font-size: var(--fs-14); min-height: 1.4em; }
.coupon-msg.good { color: #3d5512; font-weight: 600; } .coupon-msg.bad { color: #8a1c1c; }
.referral-card { display: grid; gap: 10px; }
.referral-link { display: flex; gap: 8px; } .referral-link input { flex: 1; min-width: 0; direction: ltr; }

/* «رسالة التقديم» in «سيرتي» (CoverLetters) */
.lt{margin:24px 0;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff}
.lt-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.lt-head h2{margin:0 0 4px;font-size:var(--fs-20,20px)}.lt-head p{margin:0;color:var(--muted);font-size:var(--fs-14,14px);line-height:1.8;max-width:760px}
.lt-badge{background:var(--lime);color:#111;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.lt-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 12px}
.lt-seg{display:inline-flex;border:1px solid var(--line-2,var(--line));border-radius:999px;overflow:hidden}
.lt-seg label{cursor:pointer;position:relative}.lt-seg input{position:absolute;opacity:0}.lt-seg span{display:block;padding:8px 18px;font-weight:600}
.lt-seg input:checked+span{background:#121212;color:#fff}.lt-seg input:focus-visible+span{box-shadow:inset 0 0 0 3px var(--lime)}
.lt-family{min-width:220px}.lt-count{color:var(--muted);font-size:13px;margin-inline-start:auto}
.lt-styles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:18px}
.lt-style{position:relative;cursor:pointer}.lt-style input{position:absolute;opacity:0}
.lt-style span{display:block;height:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;transition:border-color .15s}
.lt-style b{display:block;font-size:15px}.lt-style small{display:block;color:var(--muted);line-height:1.6;font-size:12px;margin-top:2px}
.lt-style:hover span{border-color:#121212}
.lt-style input:checked+span{background:#121212;border-color:#121212;color:#fff}.lt-style input:checked+span small{color:rgba(255,255,255,.72)}
.lt-style input:focus-visible+span{box-shadow:0 0 0 3px rgba(215,240,74,.6)}
.lt-work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.lt-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}.lt-label small{color:var(--muted);font-size:12px}
.lt-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.lt-chip{text-decoration:none;border:1px dashed #9db82a;background:#f6fbe2;color:#2f4a06;border-radius:8px;padding:4px 9px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;direction:rtl}
.lt-chip:hover{background:var(--lime);border-style:solid}.lt-chip:focus-visible{outline:2px solid #121212;outline-offset:1px}
.lt-editor textarea{width:100%;min-height:420px;border:1px solid var(--line-2,var(--line));border-radius:12px;padding:14px;font:inherit;font-size:15px;line-height:1.9;resize:vertical;background:#fcfcfa}
.lt-editor textarea:focus{outline:none;border-color:#121212;box-shadow:0 0 0 3px rgba(215,240,74,.45)}
.lt-under{display:flex;justify-content:space-between;gap:8px;margin-top:6px;min-height:20px}.lt-len{color:var(--muted);font-size:12px;margin-inline-start:auto;font-variant-numeric:tabular-nums}
.lt-warn{color:#9b1c1c;font-size:13px;font-weight:600}
.lt-preview{position:sticky;top:16px}
.lt-mail{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(18,18,18,.06);overflow:hidden}
.lt-mailhead{display:flex;gap:10px;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--line);background:#fafaf6}
.lt-mailhead span{color:var(--muted);font-size:12px;flex:0 0 auto}.lt-mailhead b{font-size:14px}
.lt-mailbody{padding:16px 18px;font-size:15px;line-height:1.95;min-height:340px;white-space:normal;overflow-wrap:anywhere}
.lt-mail mark{background:#eef8c4;color:#2f4a06;border-radius:5px;padding:0 4px;font-weight:600}
.lt-attach{display:flex;align-items:center;gap:8px;margin:0 16px 16px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;color:#333;background:#fafaf6}
.lt-rules{margin-top:18px;border:1px solid var(--line);border-radius:12px}
.lt-rules summary{cursor:pointer;padding:12px 16px;font-weight:700}
.lt-rules table{width:100%;border-collapse:collapse;font-size:14px}
.lt-rules th,.lt-rules td{text-align:start;padding:9px 16px;border-top:1px solid var(--line);vertical-align:top}
.lt-rules th{color:var(--muted);font-weight:600;font-size:12px;background:#fafaf6}
.lt-rules code{background:#f6fbe2;color:#2f4a06;border-radius:6px;padding:1px 6px;font-family:inherit;font-weight:600;white-space:nowrap}
.lt-rules td:last-child{color:#333;overflow-wrap:anywhere}.lt-from{color:#2f6b1f;font-weight:600}.lt-empty{color:var(--muted)}
.lt-rules ul{margin:0;padding:12px 34px 16px 16px;border-top:1px solid var(--line);color:#333;line-height:1.9;font-size:14px}
.lt-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}.lt-note{color:var(--muted);font-size:14px}
@media (max-width:1000px){.lt-styles{grid-template-columns:repeat(3,minmax(0,1fr))}.lt-work{grid-template-columns:1fr}.lt-preview{position:static}}
@media (max-width:640px){.lt{padding:16px}.lt-head{flex-direction:column}.lt-styles{grid-template-columns:1fr 1fr}.lt-count{margin-inline-start:0}.lt-editor textarea{min-height:320px}.lt-rules th:nth-child(2),.lt-rules td:nth-child(2){display:none}}

/* Munasib dropdown (wwwroot/js/dd.js): one look for every member filter */
.dd{position:relative}.dd.open{z-index:70}.dd-native{position:absolute!important;opacity:0;pointer-events:none;width:1px;height:1px}
.dd-btn{text-decoration:none;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 14px;border:1px solid var(--line-2,#d9d9d2);border-radius:12px;background:#fff;font:inherit;font-size:var(--fs-14);color:#121212;cursor:pointer;text-align:start;white-space:nowrap}
.dd-btn:hover{border-color:#121212}.dd-btn:focus-visible{outline:0;border-color:#121212;box-shadow:0 0 0 3px rgba(215,240,74,.45)}
.dd.on .dd-btn{background:#121212;color:#fff;border-color:#121212}.dd.on .dd-chev{border-color:var(--lime)}
.dd-label{overflow:hidden;text-overflow:ellipsis}
.dd-chev{width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;flex:0 0 auto;transition:transform .15s}
.dd.open .dd-chev{transform:rotate(225deg);margin-top:4px}
.dd-panel{position:absolute;z-index:40;top:calc(100% + 6px);inset-inline-start:0;min-width:100%;width:max-content;max-width:min(340px,90vw);background:#fff;border:1px solid var(--line,#e6e6df);border-radius:14px;box-shadow:0 18px 40px rgba(18,18,18,.14);padding:6px}
.dd-panel.flip{inset-inline-start:auto;inset-inline-end:0}
.dd-search{width:100%;min-height:40px;border:1px solid var(--line,#e6e6df);border-radius:10px;padding:0 10px;font:inherit;font-size:16px;margin-bottom:6px}
.dd-search:focus{outline:0;border-color:#121212;box-shadow:0 0 0 3px rgba(215,240,74,.45)}
.dd-list{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto}
.dd-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:var(--fs-14);outline:0}
.dd-list li:hover,.dd-list li:focus{background:#f3f3ec}
.dd-list li[aria-selected=true]{background:#121212;color:#fff}.dd-list li[aria-selected=true] .dd-count{background:var(--lime);color:#121212}
.dd-text{display:flex;align-items:baseline;gap:8px}.dd-note{font-size:11px;color:#2f6b1f;background:#eef8d0;border-radius:999px;padding:1px 8px}
.dd-list li[aria-selected=true] .dd-note{background:rgba(215,240,74,.25);color:var(--lime)}
.dd-count{min-width:28px;text-align:center;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;background:#f0f0ea;color:#121212;border-radius:999px;padding:2px 8px}
/* «سيرتي · ابدأ هنا» (owner, 2026-10-10): the resume is where every member starts. */
.sidebar nav a .nav-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--lime); color: #121212; vertical-align: 1px; }
.sidebar nav a.active .nav-tag { background: #121212; color: var(--lime); }
/* «الإعدادات» (owner, 2026-10-10): plain sections, no numbers, the sending rules in one compact card that saves itself. */
.set-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.set-two .blk { margin: 0; }
.activate .blk h2, .act-more .blk h2 { font-size: var(--fs-18); }
.set-send { display: grid; gap: 12px; }
.set-send-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.set-send-head h2 { margin: 0; }
.set-send-head .ctl { margin: 0; }
.set-form { display: grid; gap: 12px; }
.set-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.set-mode label { position: relative; cursor: pointer; }
.set-mode input { position: absolute; opacity: 0; }
.set-mode span { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; }
.set-mode b { font-size: var(--fs-14); }
.set-mode small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.set-mode input:checked + span { border-color: #121212; box-shadow: inset 0 0 0 1px #121212; background: #fbfde9; }
.set-mode input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 2px; }
.set-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
.set-f { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.set-f > span, .set-f legend { font-size: 13px; font-weight: 600; color: #121212; padding: 0; }
.set-f small { font-size: 12px; color: var(--muted); }
.set-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.set-row form { margin: 0; }
.set-f input[type=number], .set-f input[type=email], .set-f input[type=password] { font: inherit; min-height: 40px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 10px; width: 100%; }
.set-f.wide { grid-column: 1 / -1; }
.set-time { display: flex; gap: 6px; }
.set-time .dd, .set-time select { flex: 1 1 0; min-width: 0; }
.mail-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 760px) { .set-two, .set-mode, .mail-opts { grid-template-columns: 1fr; } .set-grid { grid-template-columns: 1fr 1fr; } }
/* «سيرتي» grade and [X]/[Y] placeholders (owner, 2026-10-10). */
.cv-grade { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; background: #fff; display: grid; gap: 8px; }
.cv-grade-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cv-grade-top span { font-size: 13px; color: var(--muted); }
.cv-grade-top b { font-size: var(--fs-18); }
.cv-grade-bar { display: block; height: 8px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.cv-grade-bar em { display: block; height: 100%; border-radius: 999px; background: #c2410c; }
.cv-grade.mid .cv-grade-bar em { background: #d99a1e; } .cv-grade.good .cv-grade-bar em { background: #9cc22a; } .cv-grade.top .cv-grade-bar em { background: #121212; }
.cv-grade.low .cv-grade-top b { color: #c2410c; } .cv-grade.top .cv-grade-top b { color: #121212; }
.cv-grade ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.cv-grade li { display: flex; gap: 6px; align-items: flex-start; color: #8a3a12; }
.cv-grade li.ok { color: var(--muted); }
.cv-grade li .i { flex: 0 0 auto; margin-top: 3px; }
.cv-grade-fine { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 0; }
mark.ph { background: #ffe14d; color: #121212; font-weight: 800; border-radius: 4px; padding: 0 5px; box-shadow: 0 0 0 1px #c9a400; }
.cv-tpl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.cv-tpl button { font: inherit; font-size: 12px; font-weight: 600; color: #121212; background: var(--bg-alt); border: 1px dashed var(--line-2); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.cv-ph { border: 2px solid #e0b400; background: #fffbe6; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-top: 8px; }
.cv-ph ul { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
textarea.has-ph { border-color: #e0b400 !important; box-shadow: 0 0 0 3px rgba(224,180,0,.25); }
.cv-actions button[type=submit][disabled] { opacity: .5; cursor: not-allowed; }
/* softer placeholder highlight (owner, 2026-10-10): yellow only on the lines being edited */
mark.ph { background: #fff1a8; box-shadow: none; padding: 0 4px; border-radius: 3px; font-weight: 700; }
.cv-ph { border: 1px solid #f1d36b; background: #fffdf2; }
/* the credit in the page bar (owner, 2026-10-10) */
.ws-right { display: inline-flex; align-items: center; gap: 12px; }
.ws-credit { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #121212; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 600; text-decoration: none; }
.ws-credit b { color: var(--lime); font-size: 16px; font-variant-numeric: tabular-nums; }
.ws-credit small { color: rgba(255,255,255,.55); font-size: 12px; }
.ws-credit:hover { background: #2a2a2a; }
.ws-credit.bump b { animation: bc-bump .35s ease; }
@media (max-width: 760px) { .workspace-header .local-badge { display: none; } }

/* Less motion when the member's system asks for it (ui-ux-pro-max checklist, owner 2026-10-16). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Filters look final before dd.js enhances them (owner, 2026-10-16: the native boxes showed for a moment, then changed shape). */
select[data-dd]:not(.dd-native) { -webkit-appearance: none; appearance: none; width: 100%; min-height: 44px; padding: 0 14px; padding-inline-end: 34px; border: 1px solid var(--line-2, #d9d9d2); border-radius: 12px; background: #fff no-repeat; background-size: 8px 8px; font: inherit; font-weight: 500; color: inherit;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%); background-size: 6px 6px, 6px 6px; background-position: left 18px center, left 12px center; }
[dir="ltr"] select[data-dd]:not(.dd-native) { background-position: right 12px center, right 18px center; }

/* «التقديم على الشركات الكبرى» (D125): the extension settings tab. Charcoal hero with the four states, numbered install steps. */
.xt-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; background: #121212; color: #f5f5f2; border-radius: 16px; padding: 26px; margin-top: 4px; }
.xt-kicker { display: inline-flex; align-items: center; gap: 6px; background: var(--lime); color: #121212; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.xt-hero h2 { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; margin: 12px 0 8px; color: #fff; }
.xt-hero p { margin: 0; color: #c9c9c2; line-height: 1.9; font-size: var(--fs-14); }
.xt-hero .xt-state-line { margin-top: 12px; color: var(--lime); font-weight: 600; }
.xt-status { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.xt-status li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.xt-status li .i { color: #8d8d86; flex: none; }
.xt-status li b { display: block; font-size: var(--fs-14); color: #fff; }
.xt-status li small { color: #b9b9b2; font-size: 12px; }
.xt-status li small a { color: var(--lime); }
.xt-status li.on { border-color: rgba(215,240,74,.45); }
.xt-status li.on .i { color: var(--lime); }
.xt-status li.part .i { color: #f2c94c; }
.xt-time { font-size: 12px; font-weight: 500; color: var(--muted); margin-inline-start: auto; }
.xt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.xt-steps > li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-alt, #f4f4f0); }
.xt-steps > li > div { display: grid; gap: 8px; min-width: 0; justify-items: start; }
.xt-steps b { font-size: var(--fs-16); }
.xt-steps p { margin: 0; color: var(--muted); font-size: var(--fs-14); line-height: 1.8; }
.xt-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #121212; color: var(--lime); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.xt-copy-row { display: flex; flex-wrap: wrap; gap: 6px; }
.xt-copy { display: inline-flex; align-items: center; gap: 8px; border: 1px dashed var(--line-2); border-radius: 8px; padding: 6px 10px; background: #fff; cursor: pointer; font: inherit; font-size: 13px; }
.xt-copy:hover { border-color: #121212; }
.xt-copy code { font-size: 12px; background: none; }
.xt-copy span { color: var(--muted); font-size: 12px; }
.xt-mock { display: inline-flex; align-items: center; gap: 8px; direction: ltr; font: 600 12px/1 system-ui, sans-serif; color: #3c3c38; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.xt-toggle { width: 30px; height: 16px; border-radius: 999px; background: #1a73e8; position: relative; }
.xt-toggle i { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.xt-btn { border: 1px solid #1a73e8; color: #1a73e8; border-radius: 6px; padding: 5px 8px; }
.xt-btn.ghost { border-color: var(--line-2); color: #8d8d86; }
.xt-ok { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #f3f8cf; border: 1px solid #cfe07a; font-weight: 600; }
.xt-ok .i { color: #0b4938; }
.xt-note { margin: 0; }
.xt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xt-yn { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.xt-q { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; display: grid; gap: 10px; }
.xt-q legend { padding: 0 4px; font-size: var(--fs-14); font-weight: 600; }
.xt-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: var(--bg-alt, #f4f4f0); border-radius: 10px; justify-self: start; }
.xt-seg label { position: relative; cursor: pointer; }
.xt-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xt-seg span { display: inline-block; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #3c3c38; }
.xt-seg input:checked + span { background: #121212; color: #fff; }
.xt-seg input:focus-visible + span { outline: 3px solid #121212; outline-offset: 1px; }
.xt-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.xt-how > div { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 6px; align-content: start; }
.xt-how .i { color: #121212; background: var(--lime); border-radius: 8px; padding: 6px; width: 32px; height: 32px; }
.xt-how p { margin: 0; color: var(--muted); font-size: var(--fs-14); line-height: 1.8; }
.xt-tries { list-style: none; margin: 0; padding: 0; display: grid; }
.xt-try { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.xt-try:last-child { border-bottom: 0; }
.xt-dot { width: 10px; height: 10px; border-radius: 50%; background: #c9c9c2; flex: none; }
.xt-try.applied .xt-dot { background: #2e9d5b; }
.xt-try.running .xt-dot { background: var(--lime); box-shadow: 0 0 0 3px rgba(215,240,74,.35); }
.xt-try.needs_member .xt-dot { background: #e0a43a; }
.xt-try.closed .xt-dot { background: #8d8d86; }
.xt-try-job { display: grid; min-width: 0; flex: 1; }
.xt-try-job b { font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-try-job small { color: var(--muted); font-size: 12px; }
.xt-try-state { font-size: 13px; font-weight: 600; text-align: end; }
@media (max-width: 860px) { .xt-hero { grid-template-columns: 1fr; padding: 20px 16px; } .xt-how, .xt-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .xt-grid-2 { grid-template-columns: 1fr; } .xt-try { flex-wrap: wrap; } .xt-try-state { text-align: start; width: 100%; padding-inline-start: 22px; } }
.xt-wait { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px !important; padding: 10px 12px; border-radius: 10px; background: rgba(242,201,76,.12); border: 1px solid rgba(242,201,76,.45); color: #f5f5f2 !important; }
.xt-wait .i { color: #f2c94c; flex: none; margin-top: 3px; }
.xt-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lime); color: #121212; font-size: 12px; font-weight: 700; }
.xt-ask { display: flex; align-items: flex-start; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.xt-ask:last-of-type { border-bottom: 0; }
.xt-ask .set-f > span { font-weight: 600; }
.xt-ask .set-f { flex: 1; }
.xt-drop { margin-top: 2px; padding: 6px; color: var(--muted); }
.xt-ask input[type=text], .xt-ask select { font: inherit; min-height: 40px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 10px; width: 100%; }
.xt-saved summary { cursor: pointer; font-weight: 600; margin-top: 6px; }
.xt-saved ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.xt-saved li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.xt-saved li span { color: var(--muted); }
.xt-forget { margin: 0; margin-inline-start: auto; }