/* ===========================================================================
   LIGHT THEME — inversion layer (loaded AFTER styles.css)
   Flips the dark "monochrome OS scan" theme to a clean white base while
   keeping the game / tech feel: blueprint grid, corner brackets, mono labels,
   notched CTA, rank accents. Scoped to win by source order + specificity.
   Remove this <link> to fall back to the dark theme.
   =========================================================================== */
:root {
  --lt-bg: #FBFBFD;          /* page background */
  --lt-panel: #FFFFFF;       /* cards */
  --lt-ink: #15171C;         /* primary text */
  --lt-ink-2: #424A57;       /* secondary text */
  --lt-ink-3: #4E5663;       /* muted text — measured 5.4:1 on white (AA pass) */
  --lt-line: rgba(20, 32, 56, 0.12);
  --lt-line-soft: rgba(20, 32, 56, 0.07);
  --lt-grid: rgba(30, 55, 100, 0.05);
  --lt-accent: #1B3A5C;      /* navy primary */
  --lt-accent-h: #234D78;    /* navy hover */
  --lt-accent2: #2563EB;     /* electric blue pop */
  --lt-bracket: rgba(27, 58, 92, 0.34);

  /* rank accents tuned for contrast on white */
  --rk-S: #8A6410;  /* deep gold — 4.7:1 on white */
  --rk-A: #0E7C6B;
  --rk-B: #8C6019;  /* deep bronze — 4.8:1 on white */
  --rk-C: #C2410C;
  --rk-D: #6D28D9;
  --rk-E: #DC2626;
}

/* ---- global base ---- */
html, body { background: var(--lt-bg) !important; }
body { color: var(--lt-ink) !important; }

/* =========================================================================
   HUD bar + side rails
   ========================================================================= */
.hud-bar { color: rgba(20, 32, 56, 0.55) !important; border-bottom-color: var(--lt-line) !important; }
.hud-bar-c { color: rgba(20, 32, 56, 0.4) !important; }
#hud-clock { color: rgba(20, 32, 56, 0.72) !important; }
.hud-live { background: var(--lt-accent2) !important; box-shadow: 0 0 8px rgba(37, 99, 235, 0.55) !important; }
.hud-signal b { background: var(--lt-accent2) !important; box-shadow: 0 0 5px rgba(37, 99, 235, 0.5) !important; }
.hud-rail { color: rgba(20, 32, 56, 0.26) !important; }

/* =========================================================================
   START SCREEN
   ========================================================================= */
#screen-start {
  background:
    radial-gradient(78% 46% at 50% 38%, rgba(37, 99, 235, 0.05), transparent 72%),
    var(--lt-bg) !important;
  color: var(--lt-ink) !important;
}
#screen-start::before {
  background-image: linear-gradient(180deg, transparent 30%, rgba(20, 32, 56, 0.025) 41%, rgba(20, 32, 56, 0.025) 60%, transparent 71%) !important;
}
#screen-start::after { display: none !important; }
#screen-start .container::before,
#screen-start .container::after { border-color: var(--lt-bracket) !important; }

/* hero: huge title */
#screen-start .hero-main,
#screen-start .hero-main .hero-accent {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(40px, 8.8vw, 80px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.015em !important;
  transform: none !important;
  text-shadow: none !important;
}
/* second line tinted with the brand accent for a calm two-tone display */
#screen-start .hero-main { color: var(--lt-ink) !important; }
#screen-start .hero-sub {
  font-family: "Noto Sans JP", sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(15px, 3.4vw, 22px) !important;
  letter-spacing: 0.01em !important;
  color: var(--lt-ink-2) !important;
}
#screen-start .hero-tag {
  background: #fff !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-3) !important;
}
#screen-start .hero-lead { color: var(--lt-ink-2) !important; }
#screen-start .hero-lead strong { color: var(--lt-accent) !important; }

/* rank ladder */
#screen-start .rank-chip {
  background: #fff !important;
  border: 1px solid var(--lt-line) !important;
  box-shadow: 0 1px 4px rgba(20, 32, 56, 0.06) !important;
  border-radius: 3px !important;
}
#screen-start .rank-S { color: var(--rk-S) !important; }
#screen-start .rank-A { color: var(--rk-A) !important; }
#screen-start .rank-B { color: var(--rk-B) !important; }
#screen-start .rank-C { color: var(--rk-C) !important; }
#screen-start .rank-D { color: var(--rk-D) !important; }
#screen-start .rank-E { color: var(--rk-E) !important; }
/* the "01"-"06" ladder index lives on ::after (v8 moved it there) and was
   faint white (rgba(232,234,238,0.32)) -> invisible on white. Recolor to ink. */
#screen-start .rank-chip::after { color: var(--lt-ink-3) !important; }
#screen-start .rank-chip:hover {
  border-color: var(--lt-accent) !important;
  box-shadow: 0 10px 22px rgba(20, 32, 56, 0.12) !important;
}
#screen-start .rank-preview::after {
  background:
    linear-gradient(90deg, transparent, rgba(27, 58, 92, 0.25) 12%, rgba(27, 58, 92, 0.25) 88%, transparent),
    repeating-linear-gradient(90deg, rgba(27, 58, 92, 0) 0 22px, rgba(27, 58, 92, 0.3) 22px 23px) !important;
}
#screen-start .type-preview { color: var(--lt-ink-3) !important; }
#screen-start .type-preview strong { color: var(--lt-ink) !important; }

/* CTA: navy solid, notched corner kept */
#screen-start #btn-start,
#screen-start #btn-start:hover:not(:disabled) {
  background: var(--lt-accent) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(27, 58, 92, 0.25), 0 14px 30px rgba(27, 58, 92, 0.22) !important;
}
#screen-start #btn-start:hover:not(:disabled) { background: var(--lt-accent-h) !important; transform: translateY(-2px); }

/* meta + value list */
#screen-start .meta { border-top-color: var(--lt-line) !important; border-bottom-color: var(--lt-line) !important; }
#screen-start .meta-item { color: var(--lt-ink-2) !important; }
#screen-start .meta-item + .meta-item::before { background: var(--lt-line) !important; }
#screen-start .value-list { border-top-color: var(--lt-line) !important; }
#screen-start .value-icon {
  background: transparent !important;
  border: 1px solid var(--lt-accent) !important;
  color: var(--lt-accent) !important;
}
#screen-start .value-item strong { color: var(--lt-ink) !important; }
#screen-start .value-item p { color: var(--lt-ink-3) !important; }

/* =========================================================================
   PROFILE + PC-WORK
   ========================================================================= */
#screen-profile, #screen-pc-work {
  background:
    radial-gradient(82% 50% at 50% 0%, rgba(37, 99, 235, 0.04), transparent 62%),
    var(--lt-bg) !important;
  color: var(--lt-ink) !important;
}
#screen-profile::before, #screen-pc-work::before {
  background-image:
    linear-gradient(var(--lt-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--lt-grid) 1px, transparent 1px) !important;
}
#screen-profile .container::before, #screen-pc-work .container::before,
#screen-profile .container::after,  #screen-pc-work .container::after { border-color: var(--lt-bracket) !important; }

#screen-profile .profile-title, #screen-pc-work .profile-title { color: var(--lt-ink) !important; }
#screen-profile .profile-lead, #screen-pc-work .profile-lead { color: var(--lt-ink-2) !important; }
#screen-profile .profile-lead strong, #screen-pc-work .profile-lead strong { color: var(--lt-ink) !important; }
#screen-profile .profile-label, #screen-pc-work .profile-label { color: var(--lt-ink) !important; }
#screen-profile .profile-label::before, #screen-pc-work .profile-label::before { color: var(--lt-accent2) !important; }
#screen-profile .profile-label::after, #screen-pc-work .profile-label::after { background: var(--lt-line) !important; }
#screen-pc-work .pc-task-note { color: var(--lt-ink-3) !important; }

/* steps */
#screen-profile .step, #screen-pc-work .step {
  background: #fff !important; border: 1px solid var(--lt-line) !important; color: var(--lt-ink-3) !important;
}
#screen-profile .step small, #screen-pc-work .step small { color: var(--lt-ink-3) !important; }
#screen-profile .step.active, #screen-pc-work .step.active { background: var(--lt-accent) !important; border-color: var(--lt-accent) !important; color: #fff !important; }
#screen-profile .step.active small, #screen-pc-work .step.active small { color: rgba(255, 255, 255, 0.85) !important; }
#screen-profile .step-divider, #screen-pc-work .step-divider { background: var(--lt-line) !important; }

/* selectable chips */
#screen-profile .profile-chip, #screen-pc-work .profile-chip {
  background: #fff !important; border: 1px solid var(--lt-line) !important; color: var(--lt-ink-2) !important;
}
#screen-profile .profile-chip:hover, #screen-pc-work .profile-chip:hover { border-color: var(--lt-accent) !important; color: var(--lt-accent) !important; }
#screen-profile .profile-chip.selected, #screen-pc-work .profile-chip.selected { background: var(--lt-accent) !important; border-color: var(--lt-accent) !important; color: #fff !important; }

/* footer buttons */
#screen-profile .btn-secondary, #screen-pc-work .btn-secondary { background: #fff !important; border: 1px solid var(--lt-line) !important; color: var(--lt-ink-2) !important; }
#screen-profile .btn-secondary:hover:not(:disabled), #screen-pc-work .btn-secondary:hover:not(:disabled) { border-color: var(--lt-accent) !important; color: var(--lt-accent) !important; }
#screen-profile .btn-primary, #screen-pc-work .btn-primary { background: var(--lt-accent) !important; color: #fff !important; }
#screen-profile .btn-primary:hover:not(:disabled), #screen-pc-work .btn-primary:hover:not(:disabled) { background: var(--lt-accent-h) !important; }
#screen-pc-work .profile-footer { background: linear-gradient(180deg, rgba(251, 251, 253, 0) 0%, var(--lt-bg) 38%) !important; }

/* inputs */
#screen-profile input, #screen-profile select, #screen-profile textarea,
#screen-pc-work input, #screen-pc-work textarea {
  background: #fff !important; border: 1px solid var(--lt-line) !important; color: var(--lt-ink) !important;
}
#screen-pc-work .pc-task-other { background: #fff !important; border: 1px solid var(--lt-line) !important; }

/* =========================================================================
   QUIZ
   ========================================================================= */
#screen-quiz {
  background:
    radial-gradient(60% 26% at 50% 0%, rgba(37, 99, 235, 0.04), transparent 62%),
    var(--lt-bg) !important;
  color: var(--lt-ink) !important;
}
#screen-quiz::before {
  background-image:
    linear-gradient(var(--lt-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--lt-grid) 1px, transparent 1px) !important;
}
#screen-quiz .quiz-header {
  background: linear-gradient(180deg, rgba(251, 251, 253, 0.97) 60%, rgba(251, 251, 253, 0.78)) !important;
  border-bottom-color: var(--lt-line) !important;
}
#screen-quiz .progress-info { color: var(--lt-ink-3) !important; }
#screen-quiz #quiz-progress-text { color: var(--lt-ink) !important; }
#screen-quiz #quiz-progress-text::before { color: var(--lt-accent2) !important; }
#screen-quiz .part-tag { background: rgba(37, 99, 235, 0.08) !important; color: var(--lt-accent) !important; }
#screen-quiz .progress-bar-wrap {
  background-color: rgba(20, 32, 56, 0.08) !important;
  background-image: repeating-linear-gradient(90deg,
    transparent 0, transparent calc(6.6667% - 1.5px),
    var(--lt-bg) calc(6.6667% - 1.5px), var(--lt-bg) 6.6667%) !important;
  box-shadow: inset 0 0 0 1px var(--lt-line) !important;
}
#screen-quiz .progress-bar { background: linear-gradient(90deg, var(--lt-accent), var(--lt-accent2)) !important; box-shadow: 0 0 12px rgba(37, 99, 235, 0.35) !important; }
#screen-quiz .progress-bar::after { background: var(--lt-accent) !important; box-shadow: 0 0 10px 2px rgba(37, 99, 235, 0.55) !important; }
#screen-quiz .quiz-header::after { color: var(--lt-ink-3) !important; }
#screen-quiz .quiz-encourage { background: rgba(37, 99, 235, 0.06) !important; border: 1px solid rgba(37, 99, 235, 0.25) !important; color: var(--lt-accent) !important; }
#screen-quiz .question-text { color: var(--lt-ink) !important; }
#screen-quiz .question-hint { color: var(--lt-ink-3) !important; }
#screen-quiz .option { background: #fff !important; border: 1px solid var(--lt-line) !important; color: var(--lt-ink-2) !important; box-shadow: 0 1px 4px rgba(20, 32, 56, 0.05) !important; }
#screen-quiz .option:hover { border-color: var(--lt-accent2) !important; background: rgba(37, 99, 235, 0.04) !important; color: var(--lt-ink) !important; }
#screen-quiz .option.selected { border-color: var(--lt-accent) !important; background: rgba(37, 99, 235, 0.07) !important; color: var(--lt-ink) !important; box-shadow: 0 0 0 1px rgba(27, 58, 92, 0.4) !important; }
#screen-quiz .option-marker { border-color: rgba(20, 32, 56, 0.35) !important; }
#screen-quiz .option.selected .option-marker { border-color: var(--lt-accent) !important; background: var(--lt-accent) !important; }
#screen-quiz .option.selected .option-marker::after { background: #fff !important; }
#screen-quiz .btn-secondary { background: #fff !important; border: 1px solid var(--lt-line) !important; color: var(--lt-ink-2) !important; }
#screen-quiz .btn-secondary:hover:not(:disabled) { border-color: var(--lt-accent) !important; color: var(--lt-accent) !important; }
#screen-quiz #btn-next { background: var(--lt-accent) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(27, 58, 92, 0.25) !important; }

/* =========================================================================
   RESULT (all ranks) — white panels, ink text, keep rank accent
   ========================================================================= */
body[data-rank] { background: var(--lt-bg) !important; }
body[data-rank] #screen-result,
#screen-result { background: transparent !important; }
body[data-rank]::before {
  background-image:
    linear-gradient(var(--lt-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--lt-grid) 1px, transparent 1px) !important;
  background-color: var(--lt-bg) !important;
  opacity: 1 !important;
}
body[data-rank]::after { display: none !important; }

body[data-rank] #screen-result .container::before,
body[data-rank] #screen-result .container::after { border-color: var(--lt-bracket) !important; }

/* cards */
body[data-rank] #screen-result .result-hero,
body[data-rank] #screen-result .type-section,
body[data-rank] #screen-result .chart-section,
body[data-rank] #screen-result .distribution-section,
body[data-rank] #screen-result .next-step-card,
body[data-rank] #screen-result .cta-card,
body[data-rank] #screen-result .result-visual-card,
body[data-rank] #screen-result .type-card,
body[data-rank] #screen-result .action-plan {
  background: #fff !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 16px rgba(20, 32, 56, 0.07) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body[data-rank] #screen-result .result-character { background: #fff !important; border: 1px solid var(--lt-line) !important; }

/* text -> ink */
body[data-rank] #screen-result .result-headline,
body[data-rank] #screen-result .result-rank-title,
body[data-rank] #screen-result .type-name,
body[data-rank] #screen-result h3,
body[data-rank] #screen-result .section-label,
body[data-rank] #screen-result .axis-name,
body[data-rank] #screen-result .axis-score-value,
body[data-rank] #screen-result .chart-legend,
body[data-rank] #screen-result .chart-legend strong,
body[data-rank] #screen-result .distribution-headline,
body[data-rank] #screen-result .distribution-headline strong,
body[data-rank] #screen-result .dist-rank,
body[data-rank] #screen-result .dist-pct,
body[data-rank] #screen-result .type-card-label,
body[data-rank] #screen-result .action-plan-label,
body[data-rank] #screen-result #type-action-plan,
body[data-rank] #screen-result .result-visual-card strong,
body[data-rank] #screen-result .cta-card h4,
body[data-rank] #screen-result .next-step-card p,
body[data-rank] #screen-result .cta-section h3,
body[data-rank] #screen-result .share-section h3 {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
body[data-rank] #screen-result .result-tag,
body[data-rank] #screen-result .result-description,
body[data-rank] #screen-result .type-tagline,
body[data-rank] #screen-result .type-description,
body[data-rank] #screen-result .cta-card p,
body[data-rank] #screen-result .result-visual-card span,
body[data-rank] #screen-result .share-lead {
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
}
body[data-rank] #screen-result .axis-pole-left,
body[data-rank] #screen-result .axis-pole-right,
body[data-rank] #screen-result .distribution-note,
body[data-rank] #screen-result .result-footer,
body[data-rank] #screen-result .disclaimer {
  color: var(--lt-ink-3) !important;
  -webkit-text-fill-color: var(--lt-ink-3) !important;
}

/* per-rank accent */
body[data-rank="S"] { --rank-accent-lt: var(--rk-S); }
body[data-rank="A"] { --rank-accent-lt: var(--rk-A); }
body[data-rank="B"] { --rank-accent-lt: var(--rk-B); }
body[data-rank="C"] { --rank-accent-lt: var(--rk-C); }
body[data-rank="D"] { --rank-accent-lt: var(--rk-D); }
body[data-rank="E"] { --rank-accent-lt: var(--rk-E); }

body[data-rank] #screen-result .rank-letter {
  color: var(--rank-accent-lt, var(--lt-accent)) !important;
  -webkit-text-fill-color: var(--rank-accent-lt, var(--lt-accent)) !important;
  background: none !important;
  text-shadow: 0 6px 22px color-mix(in srgb, var(--rank-accent-lt, var(--lt-accent)) 24%, transparent) !important;
}
body[data-rank] #screen-result #result-score { color: var(--lt-ink) !important; -webkit-text-fill-color: var(--lt-ink) !important; }

/* bars & markers */
body[data-rank] #screen-result .axis-bar-fill,
body[data-rank] #screen-result .dist-col-you .dist-bar,
body[data-rank] #screen-result .axis-bar-marker {
  background: var(--rank-accent-lt, var(--lt-accent)) !important;
  border-color: var(--rank-accent-lt, var(--lt-accent)) !important;
}
body[data-rank] #screen-result .dist-bar { background: rgba(20, 32, 56, 0.10) !important; }
body[data-rank] #screen-result .dist-marker { background: var(--lt-ink) !important; color: #fff !important; }
body[data-rank] #screen-result .dist-marker::after { background: var(--lt-ink) !important; }
body[data-rank] #screen-result .mini-illust { background: rgba(37, 99, 235, 0.08) !important; }
body[data-rank] #screen-result .mini-illust span { background: var(--lt-accent) !important; }

/* axis + chart: kill leftover dark panels / invisible light tracks (high specificity) */
body[data-rank] #screen-result .type-section .axis-bars,
body[data-rank] #screen-result .axis-bars {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
body[data-rank] #screen-result .axis-bar-track,
body[data-rank] #screen-result .axis-score-bar .axis-bar-track { background: rgba(20, 32, 56, 0.10) !important; }
body[data-rank] #screen-result .chart-section h3,
body[data-rank] #screen-result .type-section h3,
body[data-rank] #screen-result .distribution-section h3,
body[data-rank] #screen-result .next-step-card h3,
body[data-rank] #screen-result .cta-section h3,
body[data-rank] #screen-result .share-section h3,
body[data-rank] #screen-result .type-section .axis-name,
body[data-rank] #screen-result .type-section .axis-score-value {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
body[data-rank] #screen-result .type-section .axis-pole-left,
body[data-rank] #screen-result .type-section .axis-pole-right {
  color: var(--lt-ink-3) !important;
  -webkit-text-fill-color: var(--lt-ink-3) !important;
}

/* chart legend: turn dark sub-panel into a light tint */
body[data-rank] #screen-result .chart-legend {
  background: rgba(20, 32, 56, 0.03) !important;
  border: 1px solid var(--lt-line) !important;
}
body[data-rank] #screen-result .chart-legend,
body[data-rank] #screen-result .chart-legend div,
body[data-rank] #screen-result .chart-legend strong {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}

/* CTA buttons */
body[data-rank] #screen-result .btn-primary { background: var(--lt-accent) !important; color: #fff !important; }
body[data-rank] #screen-result .btn-secondary { background: #fff !important; color: var(--lt-ink) !important; border: 1px solid var(--lt-line) !important; }
/* featured consult card -> light "recommended" card with navy emphasis */
body[data-rank] #screen-result .cta-card-consult {
  border: 1.5px solid var(--lt-accent) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(37, 99, 235, 0.07), transparent 32%),
    #fff !important;
  box-shadow: 0 10px 26px rgba(27, 58, 92, 0.10) !important;
}
body[data-rank] #screen-result .cta-card-consult::before {
  background: var(--lt-accent) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body[data-rank] #screen-result .cta-card-consult .cta-card-tag {
  background: #128a3e !important;
  border: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body[data-rank] #screen-result .cta-card-paid .cta-card-tag {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body[data-rank] #screen-result .cta-card-consult h4 {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  text-shadow: none !important;
}
body[data-rank] #screen-result .cta-punch {
  color: var(--lt-accent) !important;
  -webkit-text-fill-color: var(--lt-accent) !important;
}
body[data-rank] #screen-result .cta-card-consult .btn-primary {
  background: var(--lt-accent) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 12px 28px rgba(27, 58, 92, 0.22) !important;
}

/* share buttons + retake link */
body[data-rank] #screen-result .btn-share {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
body[data-rank] #screen-result .share-tag {
  color: var(--lt-accent) !important;
  -webkit-text-fill-color: var(--lt-accent) !important;
}
body[data-rank] #screen-result .btn-text,
body[data-rank] #screen-result #btn-retake {
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
}

/* PC-detail screen */
#screen-pc-detail { background: var(--lt-bg) !important; color: var(--lt-ink) !important; }

/* =========================================================================
   PREVIEW BAR (owner) — keep visible on light
   ========================================================================= */
#preview-bar { background: rgba(255, 255, 255, 0.92) !important; border-top: 1px solid var(--lt-line) !important; color: var(--lt-ink) !important; }

/* =========================================================================
   LEVEL SCAN — rebuilt light + simple (markup uses .ls-* classes)
   ========================================================================= */
.level-scan-screen {
  background: var(--lt-bg) !important;
  color: var(--lt-ink) !important;
}
.level-scan-screen::before {
  background-image:
    linear-gradient(var(--lt-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--lt-grid) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
  background-color: transparent !important;
}
.level-scan-screen::after {
  background: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.10), transparent) !important;
  mix-blend-mode: normal !important;
}

.ls-shell {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100% - 32px));
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px 60px;
}
.ls-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--lt-ink-3);
  border: 1px solid var(--lt-line);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: 30px;
  background: #fff;
}
.ls-ring {
  position: relative;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.ls-ring-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--lt-accent2) 0deg, rgba(37, 99, 235, 0.08) 130deg, transparent 280deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  animation: lsSpin 1.1s linear infinite;
}
.ls-ring b {
  font-family: "Bebas Neue", sans-serif;
  font-size: 36px;
  letter-spacing: 0.04em;
  color: var(--lt-accent);
}
.ls-percent {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(64px, 16vw, 116px);
  line-height: 1;
  color: var(--lt-ink);
  letter-spacing: 0.01em;
}
.ls-title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 5vw, 30px);
  color: var(--lt-ink);
  margin: 6px 0 22px;
  line-height: 1.25;
}
.ls-title small {
  display: block;
  margin-top: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--lt-ink-3);
  font-weight: 400;
}
.ls-meter {
  width: min(420px, 100%);
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--lt-line);
  background: #fff;
  padding: 2px;
  overflow: hidden;
}
.ls-meter span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lt-accent), var(--lt-accent2));
  transition: width 0.16s linear;
}
.ls-status {
  margin-top: 14px;
  min-height: 18px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--lt-ink-2);
}
.ls-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: min(520px, 100%);
  margin-top: 24px;
}
.ls-steps span {
  padding: 10px 6px;
  border-radius: 6px;
  border: 1px solid var(--lt-line);
  background: #fff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--lt-ink-3);
}
.level-scan-screen.scan-complete .ls-shell { animation: lsExit 0.34s ease forwards; }

@keyframes lsSpin { to { transform: rotate(360deg); } }
@keyframes lsExit { to { opacity: 0; transform: scale(1.02); filter: blur(5px); } }

@media (max-width: 600px) {
  .ls-steps { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-ring-arc, .level-scan-screen::after, .level-scan-screen.scan-complete .ls-shell { animation: none !important; }
}

/* ===========================================================================
   ACCESSIBILITY / CONTRAST FIXES (WCAG AA: 4.5:1 body / 3:1 large)
   - kill leftover dark-theme glow text-shadows (read as dirty blur on white)
   - light-ify the "解決策提示" (#pc-task-impact / pc-detail) sub-system
   - ensure every result text element clears AA
   =========================================================================== */

/* 1. remove all glow/blur text-shadows in the result (the "変なぼかし").
   Universal (*) loses the !important tie on specificity, so target [class]
   at (1,2,1) to beat/tie every dark glow rule; bare children inherit none. */
body[data-rank] #screen-result [class] { text-shadow: none !important; }
body[data-rank] #screen-result .container * { text-shadow: none !important; }
body[data-rank] #screen-result .rank-letter,
body[data-rank] #screen-result .result-headline,
body[data-rank] #screen-result .result-rank-title { text-shadow: none !important; }
/* (1,2,2) offenders that out-specify `.container *` */
body[data-rank] #screen-result .chart-legend > div,
body[data-rank] #screen-result .chart-legend strong,
body[data-rank] #screen-result .cta-section h3,
body[data-rank] #screen-result .cta-card-consult h4,
body[data-rank] #screen-result .share-section h3 { text-shadow: none !important; }
body[data-rank] #screen-result .chart-legend > div,
body[data-rank] #screen-result .chart-legend strong,
body[data-rank] #screen-result .cta-section h3,
body[data-rank] #screen-result .share-section h3 {
  color: var(--lt-ink) !important; -webkit-text-fill-color: var(--lt-ink) !important;
}
/* share card -> light panel (was warm gradient) */
body[data-rank] #screen-result .share-section {
  background: #fff !important;
  border: 1px solid var(--lt-line) !important;
  box-shadow: 0 2px 16px rgba(20, 32, 56, 0.07) !important;
}

/* 2. 解決策提示 card (#pc-task-impact) + detail -> light panels */
body[data-rank] #screen-result .pc-task-impact,
body[data-rank] #screen-result .pc-task-detail {
  background: #fff !important;
  border: 1px solid var(--lt-line) !important;
  box-shadow: 0 2px 16px rgba(20, 32, 56, 0.07) !important;
}
body[data-rank] #screen-result .pc-impact-summary,
body[data-rank] #screen-result .pc-impact-item,
body[data-rank] #screen-result .pc-impact-other,
body[data-rank] #screen-result .pc-impact-bucket,
body[data-rank] #screen-result .pc-impact-mini-map span,
body[data-rank] #screen-result .pc-detail-visual-card {
  background: #fff !important;
  border-color: var(--lt-line) !important;
}
body[data-rank] #screen-result .mini-illust,
body[data-rank] #screen-result .pc-detail-icon { background: rgba(37, 99, 235, 0.08) !important; }

/* eyebrow label -> accent */
body[data-rank] #screen-result .pc-impact-label {
  color: var(--lt-accent) !important; -webkit-text-fill-color: var(--lt-accent) !important;
}
/* headings -> ink */
body[data-rank] #screen-result .pc-impact-head h3,
body[data-rank] #screen-result .pc-impact-item strong,
body[data-rank] #screen-result .pc-impact-other strong,
body[data-rank] #screen-result .pc-impact-consult,
body[data-rank] #screen-result .pc-detail-visual-card strong {
  color: var(--lt-ink) !important; -webkit-text-fill-color: var(--lt-ink) !important;
}
/* body text -> ink-2 */
body[data-rank] #screen-result .pc-impact-summary,
body[data-rank] #screen-result .pc-impact-item span,
body[data-rank] #screen-result .pc-impact-other span,
body[data-rank] #screen-result .pc-impact-more,
body[data-rank] #screen-result .pc-detail-visual-card span {
  color: var(--lt-ink-2) !important; -webkit-text-fill-color: var(--lt-ink-2) !important;
}
/* count / tag / bucket-title -> accent-tinted badge (readable) */
body[data-rank] #screen-result .pc-impact-count,
body[data-rank] #screen-result .pc-impact-tag,
body[data-rank] #screen-result .pc-impact-bucket-title,
body[data-rank] #screen-result .pc-detail-visual-card b {
  background: rgba(37, 99, 235, 0.10) !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  color: var(--lt-accent) !important; -webkit-text-fill-color: var(--lt-accent) !important;
}
body[data-rank] #screen-result .pc-impact-detail-btn {
  color: var(--lt-accent) !important; -webkit-text-fill-color: var(--lt-accent) !important;
}
/* double-ID (#screen-result #pc-task-impact) to outrank stubborn dark rules */
body[data-rank] #screen-result #pc-task-impact .pc-impact-summary,
body[data-rank] #screen-result #pc-task-impact .pc-impact-item span,
body[data-rank] #screen-result #pc-task-impact .pc-impact-other span,
body[data-rank] #screen-result #pc-task-impact .pc-impact-more {
  color: var(--lt-ink-2) !important; -webkit-text-fill-color: var(--lt-ink-2) !important;
}
body[data-rank] #screen-result #pc-task-impact .pc-impact-head h3,
body[data-rank] #screen-result #pc-task-impact .pc-impact-item strong,
body[data-rank] #screen-result #pc-task-impact .pc-impact-bucket-title {
  color: var(--lt-ink) !important; -webkit-text-fill-color: var(--lt-ink) !important;
}
body[data-rank] #screen-result #pc-task-impact .pc-impact-count,
body[data-rank] #screen-result #pc-task-impact .pc-impact-tag {
  background: rgba(37, 99, 235, 0.10) !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  color: var(--lt-accent) !important; -webkit-text-fill-color: var(--lt-accent) !important;
}

/* 3. distribution "あなた" rank label was white-on-white -> accent */
body[data-rank] #screen-result .dist-rank,
body[data-rank] #screen-result .dist-pct {
  color: var(--lt-ink-2) !important; -webkit-text-fill-color: var(--lt-ink-2) !important;
}
body[data-rank] #screen-result .dist-col-you .dist-rank {
  color: var(--rank-accent-lt, var(--lt-accent)) !important;
  -webkit-text-fill-color: var(--rank-accent-lt, var(--lt-accent)) !important;
}

/* 4. CTA badges: darken backgrounds so white text clears AA (was 4.2-4.4) */
body[data-rank] #screen-result .cta-card-consult .cta-card-tag { background: #0C6B30 !important; }
body[data-rank] #screen-result .cta-card-paid .cta-card-tag {
  background: #574310 !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}

/* 5. remaining sub-AA spots: card labels, share tag */
body[data-rank] #screen-result .type-card-label {
  color: var(--lt-ink-2) !important; -webkit-text-fill-color: var(--lt-ink-2) !important;
}
body[data-rank] #screen-result .share-lead .share-tag,
body[data-rank] #screen-result .share-section .share-tag {
  color: var(--lt-accent) !important; -webkit-text-fill-color: var(--lt-accent) !important;
}

/* ===========================================================================
   EFFECT / COLOR CLEANUP (round 2) — remove leftover dark-theme glows,
   heavy shadows, cream gradients & rainbow that look broken on white.
   Applies to ALL ranks (body[data-rank]).
   =========================================================================== */

/* (home) tone down the rainbow rank chips -> calm uniform navy */
#screen-start .rank-chip span { color: var(--lt-accent) !important; }

/* (home) corner bracket (L = "2 lines") overlapped the top HUD "AI UTILIZATION
   SCAN" text -> drop it below the bar */
#screen-start .container::before { top: 56px !important; }

/* (result) rank-title pill: drop cream gradient + amber 34px glow -> clean chip */
body[data-rank] #screen-result .result-rank-title {
  background: rgba(20, 32, 56, 0.04) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  box-shadow: none !important;
}

/* (result) score: was Bebas Neue (Latin-only) so "点" broke -> clean JP gothic */
body[data-rank] #screen-result #result-score {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif !important;
  letter-spacing: normal !important;
  font-weight: 700 !important;
}

/* (result) "解決策を見る" detail button: cream gradient + white ring + 30px black
   shadow -> clean solid navy. Match the dark rule's (1,3,2) specificity. */
body[data-rank] #screen-result .pc-task-impact button.pc-impact-detail-btn,
body[data-rank] #screen-result .pc-task-impact a.pc-impact-detail-btn,
body[data-rank] #screen-result .pc-task-impact button.pc-impact-detail-btn:hover,
body[data-rank] #screen-result .pc-task-impact a.pc-impact-detail-btn:hover,
body[data-rank] #screen-result .pc-impact-detail-btn {
  background: var(--lt-accent) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(27, 58, 92, 0.18) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
body[data-rank] #screen-result .pc-task-impact button.pc-impact-detail-btn:hover,
body[data-rank] #screen-result .pc-task-impact a.pc-impact-detail-btn:hover {
  background: var(--lt-accent-h) !important;
}
body[data-rank] #screen-result .pc-task-impact .pc-impact-detail-btn * {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}

/* (result) "レポートを購入する" -> clear navy outline (was a faint hairline) */
body[data-rank] #screen-result .cta-card-paid .btn-secondary,
body[data-rank] #screen-result .cta-card-paid .btn-block {
  background: #fff !important;
  border: 1.5px solid var(--lt-accent) !important;
  color: var(--lt-accent) !important; -webkit-text-fill-color: var(--lt-accent) !important;
  box-shadow: none !important;
}

/* (result) "SHARE" badge before the share heading: cream-on-cream -> navy */
body[data-rank] #screen-result .share-section h3::before {
  background: var(--lt-accent) !important;
  border: 0 !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}

/* (result) kill amber/white glows on axis bars, markers, legend dots */
body[data-rank] #screen-result .axis-bar-fill,
body[data-rank] #screen-result .axis-bar-marker,
body[data-rank] #screen-result .chart-legend .dot { box-shadow: none !important; }
body[data-rank] #screen-result .axis-bar-marker { border-color: #fff !important; }

/* (result) soften the heavy 24px drop shadow under each share button */
body[data-rank] #screen-result .btn-share { box-shadow: 0 1px 4px rgba(20, 32, 56, 0.08) !important; }

/* ==========================================================================
   SIMPLER RESULT + READABLE SOLUTION DETAIL (2026-06-19)
   ========================================================================== */

body[data-rank] #screen-result .mosaic-grid,
body[data-rank] #screen-result .mosaic-veil,
body[data-rank] #screen-result #result-score.score-slot-spinning {
  display: none !important;
  animation: none !important;
}

body[data-rank] #screen-result #result-score {
  min-width: 0 !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
}

body[data-screen="screen-pc-detail"] {
  background: #f5f7fb !important;
}

body[data-screen="screen-pc-detail"] #screen-pc-detail {
  background: #f5f7fb !important;
}

body[data-rank] #screen-pc-detail .container {
  max-width: 920px !important;
  padding-top: 28px !important;
  padding-bottom: 44px !important;
}

body[data-rank] #screen-pc-detail .detail-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  margin: 0 0 18px !important;
  padding: 12px 0 !important;
  background: linear-gradient(180deg, #f5f7fb 72%, rgba(245, 247, 251, 0)) !important;
}

body[data-rank] #screen-pc-detail .btn-secondary {
  background: #fff !important;
  border: 1.5px solid var(--lt-line) !important;
  color: var(--lt-accent) !important;
  -webkit-text-fill-color: var(--lt-accent) !important;
  box-shadow: 0 2px 10px rgba(20, 32, 56, 0.06) !important;
}

body[data-rank] #screen-pc-detail .pc-task-detail {
  margin: 0 !important;
  padding: clamp(22px, 4vw, 40px) !important;
  background: #fff !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 34px rgba(20, 32, 56, 0.08) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

body[data-rank] #screen-pc-detail .pc-impact-head {
  align-items: center !important;
  gap: 18px !important;
  padding-bottom: 18px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--lt-line) !important;
}

body[data-rank] #screen-pc-detail .pc-impact-label {
  margin-bottom: 6px !important;
  color: var(--lt-accent) !important;
  -webkit-text-fill-color: var(--lt-accent) !important;
}

body[data-rank] #screen-pc-detail .pc-impact-head h3 {
  margin: 0 !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  font-size: clamp(23px, 4vw, 34px) !important;
  line-height: 1.35 !important;
}

body[data-rank] #screen-pc-detail .pc-impact-count {
  flex: 0 0 auto !important;
  background: rgba(37, 99, 235, 0.10) !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  color: var(--lt-accent) !important;
  -webkit-text-fill-color: var(--lt-accent) !important;
}

body[data-rank] #screen-pc-detail .pc-impact-summary {
  margin: 0 0 20px !important;
  padding: 16px 18px !important;
  background: #f8fafc !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: 8px !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  line-height: 1.8 !important;
}

body[data-rank] #screen-pc-detail .pc-detail-visual-map {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 24px !important;
}

body[data-rank] #screen-pc-detail .pc-detail-visual-card,
body[data-rank] #screen-pc-detail .pc-impact-bucket,
body[data-rank] #screen-pc-detail .pc-impact-item,
body[data-rank] #screen-pc-detail .pc-impact-other {
  background: #fff !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(20, 32, 56, 0.045) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

body[data-rank] #screen-pc-detail .pc-detail-visual-card {
  padding: 16px !important;
}

body[data-rank] #screen-pc-detail .pc-detail-icon {
  background: rgba(37, 99, 235, 0.08) !important;
}

body[data-rank] #screen-pc-detail .pc-detail-icon span {
  background: var(--lt-accent) !important;
}

body[data-rank] #screen-pc-detail .pc-detail-visual-card strong,
body[data-rank] #screen-pc-detail .pc-impact-item strong,
body[data-rank] #screen-pc-detail .pc-impact-other strong,
body[data-rank] #screen-pc-detail .pc-impact-consult {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}

body[data-rank] #screen-pc-detail .pc-detail-visual-card span,
body[data-rank] #screen-pc-detail .pc-impact-item span,
body[data-rank] #screen-pc-detail .pc-impact-other span {
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
}

body[data-rank] #screen-pc-detail .pc-detail-visual-card b,
body[data-rank] #screen-pc-detail .pc-impact-bucket-title,
body[data-rank] #screen-pc-detail .pc-impact-tag {
  background: rgba(37, 99, 235, 0.10) !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  color: var(--lt-accent) !important;
  -webkit-text-fill-color: var(--lt-accent) !important;
}

body[data-rank] #screen-pc-detail .pc-impact-list {
  gap: 10px !important;
}

body[data-rank] #screen-pc-detail .pc-impact-item {
  padding: 16px !important;
}

body[data-rank] #screen-pc-detail .pc-impact-consult {
  margin-top: 20px !important;
  padding: 16px 18px !important;
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  border-radius: 8px !important;
  line-height: 1.8 !important;
}

body[data-rank] #screen-pc-detail .pc-detail-consult-cta {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 26px !important;
  padding: 24px !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(37, 99, 235, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(20, 32, 56, 0.035)) !important;
  border: 1px solid rgba(37, 99, 235, 0.24) !important;
  box-shadow: 0 12px 28px rgba(20, 32, 56, 0.08) !important;
}

body[data-rank] #screen-pc-detail .pc-detail-consult-label {
  display: inline-flex !important;
  width: fit-content !important;
  margin-bottom: 8px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(37, 99, 235, 0.20) !important;
  color: var(--lt-accent) !important;
  -webkit-text-fill-color: var(--lt-accent) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body[data-rank] #screen-pc-detail .pc-detail-consult-cta h4 {
  margin: 0 0 8px !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  font-size: clamp(20px, 3.2vw, 28px) !important;
  line-height: 1.42 !important;
}

body[data-rank] #screen-pc-detail .pc-detail-consult-cta p {
  margin: 0 !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

body[data-rank] #screen-pc-detail .pc-detail-consult-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 56px !important;
  min-width: 230px !important;
  padding: 14px 22px !important;
  background: var(--lt-accent) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 22px rgba(27, 58, 92, 0.20) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

body[data-rank] #screen-pc-detail .pc-detail-consult-btn:hover {
  background: var(--lt-accent-h) !important;
  transform: translateY(-1px) !important;
}

body[data-rank] #screen-result .cta-card-paid .btn-secondary,
body[data-rank] #screen-result .cta-card-paid .btn-block {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  font-size: clamp(14px, 2.8vw, 15px) !important;
}

body[data-rank] #screen-result .rights-notice {
  max-width: 680px !important;
  margin: 12px auto 0 !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  font-size: 11px !important;
  line-height: 1.8 !important;
}

/* Mobile flow guard: keep long profile / PC task screens scrollable. */
#screen-profile,
#screen-pc-work {
  overflow: visible !important;
}

body[data-screen="screen-profile"],
body[data-screen="screen-pc-work"] {
  overflow-y: auto !important;
}

#screen-pc-work .container {
  padding-bottom: max(120px, env(safe-area-inset-bottom) + 112px) !important;
}

#screen-pc-work .pc-task-form {
  gap: 18px !important;
}

#screen-pc-work .pc-task-options {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

#screen-pc-work .pc-task-chip {
  min-height: 48px !important;
  padding: 10px 12px !important;
  line-height: 1.45 !important;
}

#screen-pc-work .profile-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 50 !important;
  margin-top: 22px !important;
  padding: 12px 0 calc(14px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, rgba(251, 251, 253, 0) 0%, var(--lt-bg) 28%, var(--lt-bg) 100%) !important;
}

#screen-pc-work .profile-footer .btn {
  max-width: none !important;
  min-height: 52px !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  body[data-rank] #screen-pc-detail .pc-detail-visual-map {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-rank] #screen-pc-detail .pc-detail-consult-cta {
    grid-template-columns: 1fr !important;
  }

  body[data-rank] #screen-pc-detail .pc-detail-consult-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  #screen-pc-work .pc-task-options {
    grid-template-columns: 1fr !important;
  }

  #screen-pc-work .profile-footer {
    gap: 10px !important;
  }

  body[data-rank] #screen-pc-detail .pc-impact-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body[data-rank] #screen-pc-detail .pc-detail-visual-map {
    grid-template-columns: 1fr !important;
  }
}