/* AI companion pages: on-page gallery, personalisation panel and supporting content. */
.cc-section{max-width:1100px;margin:44px auto 0}
.cc-section>h2{font-size:clamp(23px,2.5vw,31px);letter-spacing:-.7px;margin:0 0 6px}
.cc-section>p.cc-lead{color:var(--muted,#63708c);margin:0 0 18px;max-width:760px}
#companion-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.cc-card{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:0 0 14px;border:1px solid var(--line,#e0e6f0);border-radius:18px;background:#fff;overflow:hidden;cursor:pointer;text-align:left;font:inherit;transition:border-color .18s,transform .18s,box-shadow .18s}
.cc-card:hover{transform:translateY(-3px);border-color:#c9a9e6;box-shadow:0 14px 34px #2a1a4a14}
.cc-card:focus-visible{outline:3px solid #a86fd6;outline-offset:2px}
.cc-card.cc-on{border-color:#a86fd6;box-shadow:0 0 0 1px #a86fd6}
.cc-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;margin-bottom:10px}
.cc-card strong{font-size:16px;padding:0 14px}
.cc-card span{font-size:13px;color:#5d6478;padding:0 14px}
.cc-card small{font-size:12px;color:#8b93a6;padding:0 14px;margin-top:2px}
.cc-card em{font-style:normal;font-size:13px;font-weight:650;color:#8a5cc0;padding:8px 14px 0;margin-top:auto}
.cc-card.cc-on em::after{content:" (chatting now)";font-weight:400;color:#8b93a6}
#companion-personalise{display:grid;gap:10px;padding:20px;border:1px solid var(--line,#e0e6f0);border-radius:18px;background:#fff;max-width:760px}
.cc-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#companion-personalise label{display:grid;gap:5px;font-size:13px;font-weight:650;color:#2a3045}
#companion-personalise input,#companion-personalise select,#companion-personalise textarea{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid #d9dce7;border-radius:10px;font:inherit;font-size:14px;font-weight:400;background:#fff}
#companion-personalise textarea{resize:vertical;min-height:70px}
.cc-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cc-count{font-size:12px;color:#8b93a6}
.cc-saved{font-size:12px;color:#3f8f63;min-height:1em}
.cc-forget{margin-left:auto;font-size:13px;padding:7px 12px;border:1px solid #d9dce7;border-radius:9px;background:#fff;cursor:pointer}
.cc-forget:hover{border-color:#b98fd6}
.cc-note{font-size:12px;color:#8b93a6;margin:0}
.cc-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cc-steps li{border:1px solid var(--line,#e0e6f0);border-radius:16px;padding:18px;background:#fff}
.cc-steps b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#8a5cc0;color:#fff;margin-bottom:9px}
.cc-steps strong{display:block;font-size:16px}
.cc-steps p{margin:5px 0 0;font-size:14px;color:#5d6478}
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.cc-grid div{border:1px solid var(--line,#e0e6f0);border-radius:16px;padding:18px;background:#fff}
.cc-grid h3{margin:0 0 5px;font-size:16px}
.cc-grid p{margin:0;font-size:14px;color:#5d6478}
.cc-compare{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:14px;overflow:hidden}
.cc-compare th,.cc-compare td{padding:11px 14px;border-bottom:1px solid var(--line,#e0e6f0);text-align:left;vertical-align:top}
.cc-compare thead th{background:#faf7fe;font-size:13px}
.cc-compare thead th:nth-child(2),.cc-compare td:nth-child(2){background:#f8f3fd;color:#6a3fa0;font-weight:650}
.cc-compare tbody th{font-weight:600}
.cc-wrap{overflow-x:auto}
.cc-care{border:1px solid #f0dfc0;background:#fffaf0;border-radius:16px;padding:18px 20px}
.cc-care h2{margin:0 0 8px;font-size:19px}
.cc-care p{margin:0 0 8px;font-size:14px;color:#5d5340}
.cc-care p:last-child{margin-bottom:0}
@media(max-width:760px){.cc-steps{grid-template-columns:1fr}.cc-fields{grid-template-columns:1fr}#companion-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* This page paints a dark background, but tools-ui.css loads after the page's
   :root palette and resets --ink/--muted to the light-theme values, so body copy
   renders dark-on-dark. Restore readable colours for the companion pages. */
body[data-operation="ai-girlfriend"],body[data-operation="ai-boyfriend"]{--ink:#fff5fc;--muted:#d7c4dc;--line:#563452;--soft:#39213f}
body[data-operation="ai-girlfriend"] .guide h2,body[data-operation="ai-boyfriend"] .guide h2,
body[data-operation="ai-girlfriend"] .guide summary,body[data-operation="ai-boyfriend"] .guide summary{color:#fff5fc}
body[data-operation="ai-girlfriend"] .guide p,body[data-operation="ai-boyfriend"] .guide p{color:#d7c4dc}
body[data-operation="ai-girlfriend"] .guide details,body[data-operation="ai-boyfriend"] .guide details{border-bottom-color:#563452}
/* new sections, on the dark background */
body[data-operation="ai-girlfriend"] .cc-section>h2,body[data-operation="ai-boyfriend"] .cc-section>h2{color:#fff5fc}
body[data-operation="ai-girlfriend"] .cc-lead,body[data-operation="ai-boyfriend"] .cc-lead{color:#d7c4dc}
body[data-operation="ai-girlfriend"] .cc-card,body[data-operation="ai-boyfriend"] .cc-card,
body[data-operation="ai-girlfriend"] .cc-steps li,body[data-operation="ai-boyfriend"] .cc-steps li,
body[data-operation="ai-girlfriend"] .cc-grid div,body[data-operation="ai-boyfriend"] .cc-grid div,
body[data-operation="ai-girlfriend"] #companion-personalise,body[data-operation="ai-boyfriend"] #companion-personalise,
body[data-operation="ai-girlfriend"] .cc-compare,body[data-operation="ai-boyfriend"] .cc-compare{background:#241a31;border-color:#4a3358;color:#fff5fc}
body[data-operation="ai-girlfriend"] .cc-card span,body[data-operation="ai-boyfriend"] .cc-card span,
body[data-operation="ai-girlfriend"] .cc-steps p,body[data-operation="ai-boyfriend"] .cc-steps p,
body[data-operation="ai-girlfriend"] .cc-grid p,body[data-operation="ai-boyfriend"] .cc-grid p{color:#d7c4dc}
body[data-operation="ai-girlfriend"] .cc-card small,body[data-operation="ai-boyfriend"] .cc-card small,
body[data-operation="ai-girlfriend"] .cc-count,body[data-operation="ai-boyfriend"] .cc-count,
body[data-operation="ai-girlfriend"] .cc-note,body[data-operation="ai-boyfriend"] .cc-note{color:#b09cb8}
body[data-operation="ai-girlfriend"] .cc-card em,body[data-operation="ai-boyfriend"] .cc-card em{color:#ff9ccb}
body[data-operation="ai-girlfriend"] .cc-card.cc-on,body[data-operation="ai-boyfriend"] .cc-card.cc-on{border-color:#ff9ccb;box-shadow:0 0 0 1px #ff9ccb}
body[data-operation="ai-girlfriend"] .cc-card:hover,body[data-operation="ai-boyfriend"] .cc-card:hover{border-color:#ff9ccb}
body[data-operation="ai-girlfriend"] .cc-steps b,body[data-operation="ai-boyfriend"] .cc-steps b{background:#ff9ccb;color:#2b1533}
body[data-operation="ai-girlfriend"] #companion-personalise label,body[data-operation="ai-boyfriend"] #companion-personalise label{color:#fff5fc}
body[data-operation="ai-girlfriend"] #companion-personalise input,body[data-operation="ai-boyfriend"] #companion-personalise input,
body[data-operation="ai-girlfriend"] #companion-personalise select,body[data-operation="ai-boyfriend"] #companion-personalise select,
body[data-operation="ai-girlfriend"] #companion-personalise textarea,body[data-operation="ai-boyfriend"] #companion-personalise textarea{background:#1b1326;border-color:#4a3358;color:#fff5fc;color-scheme:dark}
body[data-operation="ai-girlfriend"] .cc-forget,body[data-operation="ai-boyfriend"] .cc-forget{background:#1b1326;border-color:#4a3358;color:#fff5fc}
body[data-operation="ai-girlfriend"] .cc-saved,body[data-operation="ai-boyfriend"] .cc-saved{color:#8fe0b4}
body[data-operation="ai-girlfriend"] .cc-compare thead th,body[data-operation="ai-boyfriend"] .cc-compare thead th{background:#2e2140;color:#fff5fc}
body[data-operation="ai-girlfriend"] .cc-compare thead th:nth-child(2),body[data-operation="ai-boyfriend"] .cc-compare thead th:nth-child(2),
body[data-operation="ai-girlfriend"] .cc-compare td:nth-child(2),body[data-operation="ai-boyfriend"] .cc-compare td:nth-child(2){background:#342248;color:#ffc9e4}
body[data-operation="ai-girlfriend"] .cc-compare th,body[data-operation="ai-boyfriend"] .cc-compare th,
body[data-operation="ai-girlfriend"] .cc-compare td,body[data-operation="ai-boyfriend"] .cc-compare td{border-bottom-color:#4a3358}
body[data-operation="ai-girlfriend"] .cc-care,body[data-operation="ai-boyfriend"] .cc-care{background:#2a2136;border-color:#5b4a35}
body[data-operation="ai-girlfriend"] .cc-care h2,body[data-operation="ai-boyfriend"] .cc-care h2{color:#ffe0ad}
body[data-operation="ai-girlfriend"] .cc-care p,body[data-operation="ai-boyfriend"] .cc-care p{color:#e3d4c2}

/* The way out of the opening picker. Quiet next to the portraits, but reachable by
   touch, which Escape and the backdrop are not. */
.picker-heading .cc-browse{margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.4);color:#f4e6f7;border-radius:999px;padding:9px 15px;font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer}
.picker-heading .cc-browse:hover{border-color:#ffb3d9;color:#fff;background:rgba(255,255,255,.08)}
.picker-heading .cc-browse:focus-visible{outline:3px solid #ffb3d9;outline-offset:2px}
@media (max-width:480px){.picker-heading .cc-browse{font-size:12px;padding:8px 12px}}